Add splitter support for points and billboards in vector datasets

.nvmrc

@@ -1 +1 @@
-v20.18.3
+v20.19.0

CHANGES.md

@@ -2,6 +2,7 @@
 
 #### next release (8.10.1)
 
+- Added support for using splitter with points and billboards in vector datasets.
 - Fix app crash when encountering unsupported WPS input types.
 - Warn the user when the story causes shareData size exceed the limit set on the server as `shareMaxRequestSize`. #7636
 - Adds new `TileMapServiceCatalogItem` for loading Tile Map Service (TMS) imagery tilesets.

lib/Core/runWhenObserved.ts

@@ -0,0 +1,25 @@
+import { IReactionDisposer, onBecomeObserved, onBecomeUnobserved } from "mobx";
+
+/**
+ * Starts the given reaction when the property becomes observed and destroys it when
+ * it becomes unobserved.
+ *
+ * @param obj Any object
+ * @param prop An observable property belonging to object
+ * @param startReaction The reaction to run when the `prop` is observed.
+ */
+export default function runWhenObserved<T extends object, P extends keyof T>(
+  obj: T,
+  prop: P,
+  startReaction: () => IReactionDisposer
+) {
+  let reactionDisposer: IReactionDisposer | undefined;
+  onBecomeObserved(obj, prop, () => {
+    reactionDisposer = startReaction();
+  });
+
+  onBecomeUnobserved(obj, prop, () => {
+    reactionDisposer?.();
+    reactionDisposer = undefined;
+  });
+}

lib/Map/Cesium/CesiumSelectionIndicator.ts

@@ -119,7 +119,7 @@ export default class CesiumSelectionIndicator {
   @action
   update() {
     if (this.showSelection && isDefined(this.position)) {
-      const screenPosition = SceneTransforms.wgs84ToWindowCoordinates(
+      const screenPosition = SceneTransforms.worldToWindowCoordinates(
         this._cesium.scene,
         this.position,
         screenSpacePos

lib/ModelMixins/GeojsonMixin.ts

@@ -8,9 +8,9 @@ import {
 } from "@turf/helpers";
 import i18next from "i18next";
 import {
+  IReactionDisposer,
   action,
   computed,
-  IReactionDisposer,
   makeObservable,
   observable,
   onBecomeObserved,
@@ -23,14 +23,14 @@ import {
 import { createTransformer } from "mobx-utils";
 import Cartesian2 from "terriajs-cesium/Source/Core/Cartesian2";
 import Cartesian3 from "terriajs-cesium/Source/Core/Cartesian3";
-import clone from "terriajs-cesium/Source/Core/clone";
 import Color from "terriajs-cesium/Source/Core/Color";
 import DeveloperError from "terriajs-cesium/Source/Core/DeveloperError";
 import Iso8601 from "terriajs-cesium/Source/Core/Iso8601";
 import JulianDate from "terriajs-cesium/Source/Core/JulianDate";
 import PolygonHierarchy from "terriajs-cesium/Source/Core/PolygonHierarchy";
 import TimeInterval from "terriajs-cesium/Source/Core/TimeInterval";
 import TimeIntervalCollection from "terriajs-cesium/Source/Core/TimeIntervalCollection";
+import clone from "terriajs-cesium/Source/Core/clone";
 import BillboardGraphics from "terriajs-cesium/Source/DataSources/BillboardGraphics";
 import ColorMaterialProperty from "terriajs-cesium/Source/DataSources/ColorMaterialProperty";
 import ConstantProperty from "terriajs-cesium/Source/DataSources/ConstantProperty";
@@ -47,24 +47,24 @@ import Property from "terriajs-cesium/Source/DataSources/Property";
 import HeightReference from "terriajs-cesium/Source/Scene/HeightReference";
 import ImageryLayerFeatureInfo from "terriajs-cesium/Source/Scene/ImageryLayerFeatureInfo";
 import AbstractConstructor from "../Core/AbstractConstructor";
-import filterOutUndefined from "../Core/filterOutUndefined";
-import formatPropertyValue from "../Core/formatPropertyValue";
 import {
-  explodeMultiPoint,
   FeatureCollectionWithCrs,
+  explodeMultiPoint,
   isPoint
 } from "../Core/GeoJson";
-import hashFromString from "../Core/hashFromString";
-import isDefined from "../Core/isDefined";
 import {
+  JsonObject,
   isJsonArray,
   isJsonNumber,
-  isJsonObject,
-  JsonObject
+  isJsonObject
 } from "../Core/Json";
-import { isJson } from "../Core/loadBlob";
 import StandardCssColors from "../Core/StandardCssColors";
 import TerriaError, { networkRequestError } from "../Core/TerriaError";
+import filterOutUndefined from "../Core/filterOutUndefined";
+import formatPropertyValue from "../Core/formatPropertyValue";
+import hashFromString from "../Core/hashFromString";
+import isDefined from "../Core/isDefined";
+import { isJson } from "../Core/loadBlob";
 import ProtomapsImageryProvider, {
   ProtomapsData
 } from "../Map/ImageryProvider/ProtomapsImageryProvider";
@@ -74,17 +74,17 @@ import Reproject from "../Map/Vector/Reproject";
 import CatalogMemberMixin from "../ModelMixins/CatalogMemberMixin";
 import UrlMixin from "../ModelMixins/UrlMixin";
 import proxyCatalogItemUrl from "../Models/Catalog/proxyCatalogItemUrl";
-import createStratumInstance from "../Models/Definition/createStratumInstance";
 import LoadableStratum from "../Models/Definition/LoadableStratum";
 import Model, { BaseModel } from "../Models/Definition/Model";
 import StratumOrder from "../Models/Definition/StratumOrder";
+import createStratumInstance from "../Models/Definition/createStratumInstance";
 import TerriaFeature from "../Models/Feature/Feature";
 import { TerriaFeatureData } from "../Models/Feature/FeatureData";
 import { ViewingControl } from "../Models/ViewingControls";
 import TableStylingWorkflow from "../Models/Workflows/TableStylingWorkflow";
-import createLongitudeLatitudeFeaturePerRow from "../Table/createLongitudeLatitudeFeaturePerRow";
 import TableAutomaticStylesStratum from "../Table/TableAutomaticStylesStratum";
 import TableStyle, { createRowGroupId } from "../Table/TableStyle";
+import createLongitudeLatitudeFeaturePerRow from "../Table/createLongitudeLatitudeFeaturePerRow";
 import { GeoJsonTraits } from "../Traits/TraitsClasses/GeoJsonTraits";
 import { RectangleTraits } from "../Traits/TraitsClasses/MappableTraits";
 import StyleTraits from "../Traits/TraitsClasses/StyleTraits";
@@ -645,11 +645,11 @@ function GeoJsonMixin<T extends AbstractConstructor<BaseType>>(Base: T) {
         const dataSource = new CustomDataSource(this.name || "Table");
         dataSource.entities.suspendEvents();
 
-        const features: Entity[] = createLongitudeLatitudeFeaturePerRow(
-          style,
+        const features: Entity[] = createLongitudeLatitudeFeaturePerRow(style, {
           longitudes,
-          latitudes
-        );
+          latitudes,
+          splitDirection: this.splitDirectionProperty
+        });
 
         // _catalogItem property is needed for some feature picking functions (eg FeatureInfoUrlTemplateMixin)
         features.forEach((f) => {
@@ -993,6 +993,8 @@ function GeoJsonMixin<T extends AbstractConstructor<BaseType>>(Base: T) {
 
       const dataSource = await GeoJsonDataSource.load(geoJson, styles);
       const entities = dataSource.entities;
+
+      dataSource.entities.suspendEvents();
       for (let i = 0; i < entities.values.length; ++i) {
         const entity = entities.values[i];
 
@@ -1138,7 +1140,16 @@ function GeoJsonMixin<T extends AbstractConstructor<BaseType>>(Base: T) {
             createPolylineFromPolygon(entities, entity, now);
           }
         }
+
+        if (entity.point) {
+          entity.point.splitDirection = this.splitDirectionProperty;
+        }
+
+        if (entity.billboard) {
+          entity.billboard.splitDirection = this.splitDirectionProperty;
+        }
       }
+      dataSource.entities.resumeEvents();
       return dataSource;
     }
 

lib/ModelMixins/TableMixin.ts

@@ -1,6 +1,7 @@
 import i18next from "i18next";
 import {
   action,
+  autorun,
   computed,
   makeObservable,
   observable,
@@ -10,6 +11,7 @@ import {
 import { ITransformer, createTransformer } from "mobx-utils";
 import DeveloperError from "terriajs-cesium/Source/Core/DeveloperError";
 import JulianDate from "terriajs-cesium/Source/Core/JulianDate";
+import ConstantProperty from "terriajs-cesium/Source/DataSources/ConstantProperty";
 import CustomDataSource from "terriajs-cesium/Source/DataSources/CustomDataSource";
 import DataSource from "terriajs-cesium/Source/DataSources/DataSource";
 import ImageryProvider from "terriajs-cesium/Source/Scene/ImageryProvider";
@@ -22,6 +24,7 @@ import TerriaError from "../Core/TerriaError";
 import filterOutUndefined from "../Core/filterOutUndefined";
 import flatten from "../Core/flatten";
 import isDefined from "../Core/isDefined";
+import runWhenObserved from "../Core/runWhenObserved";
 import ConstantColorMap from "../Map/ColorMap/ConstantColorMap";
 import RegionProvider from "../Map/Region/RegionProvider";
 import RegionProviderList from "../Map/Region/RegionProviderList";
@@ -98,6 +101,13 @@ function TableMixin<T extends AbstractConstructor<BaseType>>(Base: T) {
           );
         });
       }
+
+      runWhenObserved(this, "mapItems", () =>
+        autorun(() => {
+          // Update splitDirectionProperty based on the trait value
+          this.splitDirectionProperty.setValue(this.splitDirection);
+        })
+      );
     }
 
     get hasTableMixin() {
@@ -114,6 +124,13 @@ function TableMixin<T extends AbstractConstructor<BaseType>>(Base: T) {
     @observable
     regionProviderLists: RegionProviderList[] | undefined;
 
+    /**
+     * A shared property that tracks the value of `splitDirection` trait. It
+     * can be passed to Cesium Entity objects like PointGraphics and
+     * BillboardGraphics without having to create a new one for each Entity.
+     */
+    splitDirectionProperty: ConstantProperty = new ConstantProperty();
+
     /**
      * The raw data table in column-major format, i.e. the outer array is an
      * array of columns.
@@ -844,9 +861,13 @@ function TableMixin<T extends AbstractConstructor<BaseType>>(Base: T) {
 
         let features: TerriaFeature[];
         if (style.isTimeVaryingPointsWithId()) {
-          features = createLongitudeLatitudeFeaturePerId(style);
+          features = createLongitudeLatitudeFeaturePerId(style, {
+            splitDirection: this.splitDirectionProperty
+          });
         } else {
-          features = createLongitudeLatitudeFeaturePerRow(style);
+          features = createLongitudeLatitudeFeaturePerRow(style, {
+            splitDirection: this.splitDirectionProperty
+          });
         }
 
         // _catalogItem property is needed for some feature picking functions (eg `featureInfoTemplate`)

lib/Models/Cesium.ts

@@ -19,7 +19,6 @@ import Cartesian2 from "terriajs-cesium/Source/Core/Cartesian2";
 import Cartesian3 from "terriajs-cesium/Source/Core/Cartesian3";
 import Cartographic from "terriajs-cesium/Source/Core/Cartographic";
 import CesiumTerrainProvider from "terriajs-cesium/Source/Core/CesiumTerrainProvider";
-import Clock from "terriajs-cesium/Source/Core/Clock";
 import createWorldTerrainAsync from "terriajs-cesium/Source/Core/createWorldTerrainAsync";
 import Credit from "terriajs-cesium/Source/Core/Credit";
 import defaultValue from "terriajs-cesium/Source/Core/defaultValue";
@@ -125,8 +124,6 @@ export default class Cesium extends GlobeOrMap {
   readonly terriaViewer: TerriaViewer;
   readonly cesiumWidget: CesiumWidget;
   readonly scene: Scene;
-  readonly dataSources: DataSourceCollection = new DataSourceCollection();
-  readonly dataSourceDisplay: DataSourceDisplay;
   readonly pauser: CesiumRenderLoopPauser;
   readonly canShowSplitter = true;
   private readonly _eventHelper: EventHelper;
@@ -190,7 +187,6 @@ export default class Cesium extends GlobeOrMap {
     9TXL0Y4OHwAAAABJRU5ErkJggg==";
 
     const options = {
-      dataSources: this.dataSources,
       clock: this.terria.timelineClock,
       baseLayer: ImageryLayer.fromProviderAsync(
         SingleTileImageryProvider.fromUrl(img),
@@ -228,21 +224,12 @@ export default class Cesium extends GlobeOrMap {
 
     //new Cesium3DTilesInspector(document.getElementsByClassName("cesium-widget").item(0), this.scene);
 
-    this.dataSourceDisplay = new DataSourceDisplay({
-      scene: this.scene,
-      dataSourceCollection: this.dataSources
-    });
-
     this._selectionIndicator = new CesiumSelectionIndicator(this);
 
     this.supportsPolylinesOnTerrain = (this.scene as any).context.depthTexture;
 
     this._eventHelper = new EventHelper();
 
-    this._eventHelper.add(this.terria.timelineClock.onTick, ((clock: Clock) => {
-      this.dataSourceDisplay.update(clock.currentTime);
-    }) as any);
-
     // Progress
     this._eventHelper.add(
       this.scene.globe.tileLoadProgressEvent,
@@ -417,7 +404,7 @@ export default class Cesium extends GlobeOrMap {
 
     this._disposeWorkbenchMapItemsSubscription = this.observeModelLayer();
     this._disposeTerrainReaction = autorun(() => {
-      this.scene.globe.terrainProvider = this.terrainProvider;
+      this.cesiumWidget.terrainProvider = this.terrainProvider;
       this.scene.globe.splitDirection = this.terria.showSplitter
         ? this.terria.terrainSplitDirection
         : SplitDirection.NONE;
@@ -438,6 +425,14 @@ export default class Cesium extends GlobeOrMap {
     });
   }
 
+  get dataSources(): DataSourceCollection {
+    return this.cesiumWidget.dataSources;
+  }
+
+  get dataSourceDisplay(): DataSourceDisplay {
+    return this.cesiumWidget.dataSourceDisplay;
+  }
+
   /** Add an event listener to a TerrainProvider.
    * If we get an error when trying to load the terrain, then switch to smooth mode, and notify the user.
    * Finally, remove the listener, so failed tiles do not trigger the error as these can be common and are not a problem. */
@@ -615,7 +610,6 @@ export default class Cesium extends GlobeOrMap {
     this.stopObserving();
     this._eventHelper.removeAll();
     this._updateTilesLoadingIndeterminate(false); // reset progress bar loading state to false for any data sources with indeterminate progress e.g. 3DTilesets.
-    this.dataSourceDisplay.destroy();
 
     this._disposeTerrainReaction();
     this._disposeResolutionReaction();
@@ -1067,8 +1061,8 @@ export default class Cesium extends GlobeOrMap {
 
     const frustrum = scene.camera.frustum as PerspectiveFrustum;
 
-    const fovy = frustrum.fovy * 0.5;
-    const fovx = Math.atan(Math.tan(fovy) * frustrum.aspectRatio);
+    const fovy = (frustrum.fovy ?? 0) * 0.5;
+    const fovx = Math.atan(Math.tan(fovy) * (frustrum.aspectRatio ?? 0));
 
     const cameraOffset = Cartesian3.subtract(
       camera.positionWC,
@@ -1620,6 +1614,7 @@ export default class Cesium extends GlobeOrMap {
                   result.pickPosition
                 );
                 const pickedSide =
+                  screenPosition &&
                   this._getSplitterSideForScreenPosition(screenPosition);
 
                 features = features.filter((feature) => {
@@ -1700,7 +1695,7 @@ export default class Cesium extends GlobeOrMap {
    * @return The screen position, or undefined if the position is not on the screen.
    */
   private _computePositionOnScreen(position: Cartesian3, result?: Cartesian2) {
-    return SceneTransforms.wgs84ToWindowCoordinates(
+    return SceneTransforms.worldToWindowCoordinates(
       this.scene,
       position,
       result

lib/Table/TableAutomaticStylesStratum.ts

@@ -1,24 +1,25 @@
 import i18next from "i18next";
 import { uniq } from "lodash-es";
 import { computed, makeObservable } from "mobx";
+import EntityCollection from "terriajs-cesium/Source/DataSources/EntityCollection";
 import filterOutUndefined from "../Core/filterOutUndefined";
 import isDefined from "../Core/isDefined";
+import { ImageryParts } from "../ModelMixins/MappableMixin";
 import TableMixin from "../ModelMixins/TableMixin";
-import createStratumInstance from "../Models/Definition/createStratumInstance";
 import LoadableStratum from "../Models/Definition/LoadableStratum";
 import { BaseModel } from "../Models/Definition/Model";
 import StratumFromTraits from "../Models/Definition/StratumFromTraits";
+import createStratumInstance from "../Models/Definition/createStratumInstance";
 import { ShortReportTraits } from "../Traits/TraitsClasses/CatalogMemberTraits";
 import TableChartStyleTraits, {
   TableChartLineStyleTraits
 } from "../Traits/TraitsClasses/Table/ChartStyleTraits";
 import TableColorStyleTraits from "../Traits/TraitsClasses/Table/ColorStyleTraits";
 import TablePointSizeStyleTraits from "../Traits/TraitsClasses/Table/PointSizeStyleTraits";
 import TableStyleTraits from "../Traits/TraitsClasses/Table/StyleTraits";
-import TableTimeStyleTraits from "../Traits/TraitsClasses/Table/TimeStyleTraits";
 import TableTraits from "../Traits/TraitsClasses/Table/TableTraits";
+import TableTimeStyleTraits from "../Traits/TraitsClasses/Table/TimeStyleTraits";
 import TableColumnType from "./TableColumnType";
-import { ImageryParts } from "../ModelMixins/MappableMixin";
 
 const DEFAULT_ID_COLUMN = "id";
 
@@ -56,7 +57,22 @@ export default class TableAutomaticStylesStratum extends LoadableStratum(
 
   @computed
   get disableSplitter() {
-    return !this.catalogItem.mapItems.find(ImageryParts.is) ? true : undefined;
+    const hasImagery = this.catalogItem.mapItems.find(ImageryParts.is);
+    return !hasImagery && !this.hasPointsOrBillboards;
+  }
+
+  /**
+   * Return true if any dataSource has points or billboards
+   */
+  @computed
+  private get hasPointsOrBillboards() {
+    return this.catalogItem.mapItems.some(
+      (it: any) =>
+        it?.entities instanceof EntityCollection &&
+        (it.entities as EntityCollection).values.some(
+          (value) => value.point || value.billboard
+        )
+    );
   }
 
   /**