@flowmap.gl/data 8.0.0-alpha.21 → 8.0.0-alpha.24

package/src/FlowmapSelectors.ts

@@ -46,6 +46,7 @@ import getColors, {
 import FlowmapAggregateAccessors from './FlowmapAggregateAccessors';
 import {FlowmapState} from './FlowmapState';
 import {
+  addClusterNames,
   getFlowThicknessScale,
   getViewportBoundingBox,
 } from './selector-functions';
@@ -94,6 +95,10 @@ export default class FlowmapSelectors<L, F> {
     this.accessors = new FlowmapAggregateAccessors(accessors);
   }
 
+  getAggregateAccessors(): FlowmapAggregateAccessors<L, F> {
+    return this.accessors;
+  }
+
   getFlowsFromProps = (state: FlowmapState, props: FlowmapData<L, F>) =>
     props.flows;
   getLocationsFromProps = (state: FlowmapState, props: FlowmapData<L, F>) =>
@@ -114,6 +119,8 @@ export default class FlowmapSelectors<L, F> {
     state.settings.clusteringEnabled;
   getLocationTotalsEnabled = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.settings.locationTotalsEnabled;
+  getLocationLabelsEnabled = (state: FlowmapState, props: FlowmapData<L, F>) =>
+    state.settings.locationLabelsEnabled;
   getZoom = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.viewport.zoom;
   getViewport = (state: FlowmapState, props: FlowmapData<L, F>) =>
@@ -194,7 +201,7 @@ export default class FlowmapSelectors<L, F> {
       return ids;
     });
 
-  getSelectedLocationsSet: Selector<L, F, Set<string> | undefined> =
+  getSelectedLocationsSet: Selector<L, F, Set<string | number> | undefined> =
     createSelector(this.getSelectedLocations, (ids) =>
       ids && ids.length > 0 ? new Set(ids) : undefined,
     );
@@ -361,46 +368,14 @@ export default class FlowmapSelectors<L, F> {
         return undefined;
 
       const clusterIndex = buildIndex<F>(clusterLevels);
-      const {getLocationName, getLocationClusterName} =
-        this.accessors.getFlowmapDataAccessors();
-
       // Adding meaningful names
-      const getName = (id: string | number) => {
-        const loc = locationsById.get(id);
-        if (loc) {
-          return getLocationName
-            ? getLocationName(loc)
-            : this.accessors.getLocationId(loc) || id;
-        }
-        return `"${id}"`;
-      };
-      for (const level of clusterLevels) {
-        for (const node of level.nodes) {
-          // Here mutating the nodes (adding names)
-          if (isCluster(node)) {
-            const leaves = clusterIndex.expandCluster(node);
-
-            leaves.sort((a, b) =>
-              descending(getLocationWeight(a), getLocationWeight(b)),
-            );
-
-            if (getLocationClusterName) {
-              node.name = getLocationClusterName(leaves);
-            } else {
-              const topId = leaves[0];
-              const otherId = leaves.length === 2 ? leaves[1] : undefined;
-              node.name = `"${getName(topId)}" and ${
-                otherId
-                  ? `"${getName(otherId)}"`
-                  : `${leaves.length - 1} others`
-              }`;
-            }
-          } else {
-            (node as any).name = getName(node.id);
-          }
-        }
-      }
-
+      addClusterNames(
+        clusterIndex,
+        clusterLevels,
+        locationsById,
+        this.accessors.getFlowmapDataAccessors(),
+        getLocationWeight,
+      );
       return clusterIndex;
     },
   );
@@ -416,7 +391,7 @@ export default class FlowmapSelectors<L, F> {
       let maxZoom = Number.POSITIVE_INFINITY;
       let minZoom = Number.NEGATIVE_INFINITY;
 
-      const adjust = (zoneId: string) => {
+      const adjust = (zoneId: string | number) => {
         const cluster = clusterIndex.getClusterById(zoneId);
         if (cluster) {
           minZoom = Math.max(minZoom, cluster.zoom);
@@ -611,31 +586,34 @@ export default class FlowmapSelectors<L, F> {
     },
   );
 
-  getExpandedSelectedLocationsSet: Selector<L, F, Set<string> | undefined> =
-    createSelector(
-      this.getClusteringEnabled,
-      this.getSelectedLocationsSet,
-      this.getClusterIndex,
-      (clusteringEnabled, selectedLocations, clusterIndex) => {
-        if (!selectedLocations || !clusterIndex) {
-          return selectedLocations;
-        }
+  getExpandedSelectedLocationsSet: Selector<
+    L,
+    F,
+    Set<string | number> | undefined
+  > = createSelector(
+    this.getClusteringEnabled,
+    this.getSelectedLocationsSet,
+    this.getClusterIndex,
+    (clusteringEnabled, selectedLocations, clusterIndex) => {
+      if (!selectedLocations || !clusterIndex) {
+        return selectedLocations;
+      }
 
-        const result = new Set<string>();
-        for (const locationId of selectedLocations) {
-          const cluster = clusterIndex.getClusterById(locationId);
-          if (cluster) {
-            const expanded = clusterIndex.expandCluster(cluster);
-            for (const id of expanded) {
-              result.add(id);
-            }
-          } else {
-            result.add(locationId);
+      const result = new Set<string | number>();
+      for (const locationId of selectedLocations) {
+        const cluster = clusterIndex.getClusterById(locationId);
+        if (cluster) {
+          const expanded = clusterIndex.expandCluster(cluster);
+          for (const id of expanded) {
+            result.add(id);
           }
+        } else {
+          result.add(locationId);
         }
-        return result;
-      },
-    );
+      }
+      return result;
+    },
+  );
 
   getTotalCountsByTime: Selector<L, F, CountByTime[] | undefined> =
     createSelector(
@@ -1099,6 +1077,15 @@ export default class FlowmapSelectors<L, F> {
     );
   });
 
+  getLocationOrClusterByIdGetter = createSelector(
+    this.getClusterIndex,
+    this.getLocationsById,
+    (clusterIndex, locationsById) => {
+      return (id: string | number) =>
+        clusterIndex?.getClusterById(id) ?? locationsById?.get(id);
+    },
+  );
+
   getLayersData: Selector<L, F, LayersData> = createSelector(
     this.getLocationsForFlowmapLayer,
     this.getFlowsForFlowmapLayer,
@@ -1109,6 +1096,7 @@ export default class FlowmapSelectors<L, F> {
     this.getOutCircleSizeGetter,
     this.getFlowThicknessScale,
     this.getAnimate,
+    this.getLocationLabelsEnabled,
     (
       locations,
       flows,
@@ -1119,6 +1107,7 @@ export default class FlowmapSelectors<L, F> {
       getOutCircleSize,
       flowThicknessScale,
       animationEnabled,
+      locationLabelsEnabled,
     ) => {
       return this._prepareLayersData(
         locations,
@@ -1130,6 +1119,7 @@ export default class FlowmapSelectors<L, F> {
         getOutCircleSize,
         flowThicknessScale,
         animationEnabled,
+        locationLabelsEnabled,
       );
     },
   );
@@ -1143,6 +1133,7 @@ export default class FlowmapSelectors<L, F> {
     const getInCircleSize = this.getInCircleSizeGetter(state, props);
     const getOutCircleSize = this.getOutCircleSizeGetter(state, props);
     const flowThicknessScale = this.getFlowThicknessScale(state, props);
+    const locationLabelsEnabled = this.getLocationLabelsEnabled(state, props);
     return this._prepareLayersData(
       locations,
       flows,
@@ -1153,6 +1144,7 @@ export default class FlowmapSelectors<L, F> {
       getOutCircleSize,
       flowThicknessScale,
       state.settings.animationEnabled,
+      locationLabelsEnabled,
     );
   }
 
@@ -1166,6 +1158,7 @@ export default class FlowmapSelectors<L, F> {
     getOutCircleSize: (locationId: string | number) => number,
     flowThicknessScale: ScaleLinear<number, number, never> | undefined,
     animationEnabled: boolean,
+    locationLabelsEnabled: boolean,
   ): LayersData {
     if (!locations) locations = [];
     if (!flows) flows = [];
@@ -1176,6 +1169,7 @@ export default class FlowmapSelectors<L, F> {
       getLocationId,
       getLocationLon,
       getLocationLat,
+      getLocationName,
     } = this.accessors;
 
     const flowMagnitudeExtent = extent(flows, (f) => getFlowMagnitude(f)) as [
@@ -1307,6 +1301,9 @@ export default class FlowmapSelectors<L, F> {
             : {}),
         },
       },
+      ...(locationLabelsEnabled
+        ? {locationLabels: locations.map(getLocationName)}
+        : undefined),
     };
   }
 

package/src/FlowmapState.ts

@@ -1,7 +1,7 @@
 import {LocationFilterMode, ViewportProps} from './types';
 
 export interface FilterState {
-  selectedLocations?: string[];
+  selectedLocations?: (string | number)[];
   locationFilterMode?: LocationFilterMode;
   selectedTimeRange?: [Date, Date];
 }
@@ -11,6 +11,7 @@ export interface SettingsState {
   fadeEnabled: boolean;
   fadeOpacityEnabled: boolean;
   locationTotalsEnabled: boolean;
+  locationLabelsEnabled: boolean;
   adaptiveScalesEnabled: boolean;
   clusteringEnabled: boolean;
   clusteringAuto: boolean;

package/src/cluster/ClusterIndex.ts

@@ -42,7 +42,7 @@ export interface ClusterIndex<F> {
   /**
    * Get the min zoom level on which the location is not clustered.
    */
-  getMinZoomForLocation: (locationId: string) => number;
+  getMinZoomForLocation: (locationId: string | number) => number;
   /**
    * List the IDs of all locations in the cluster (leaves of the subtree starting in the cluster).
    */

package/src/provider/LocalFlowmapDataProvider.ts

@@ -15,6 +15,7 @@ import {
   GetViewStateOptions,
   getViewStateForLocations,
 } from '../getViewStateForLocations';
+import {ClusterIndex} from '../cluster/ClusterIndex';
 
 export default class LocalFlowmapDataProvider<L, F>
   implements FlowmapDataProvider<L, F>
@@ -34,14 +35,26 @@ export default class LocalFlowmapDataProvider<L, F>
     this.selectors.setAccessors(accessors);
   }
 
-  async setFlowmapData(flowmapData: FlowmapData<L, F>): Promise<void> {
+  setFlowmapData(flowmapData: FlowmapData<L, F>): void {
     this.flowmapData = flowmapData;
   }
 
+  getSelectors(): FlowmapSelectors<L, F> {
+    return this.selectors;
+  }
+
+  getFlowmapData(): FlowmapData<L, F> | undefined {
+    return this.flowmapData;
+  }
+
   async setFlowmapState(flowmapState: FlowmapState): Promise<void> {
     this.flowmapState = flowmapState;
   }
 
+  getFlowmapState(): FlowmapState | undefined {
+    return this.flowmapState;
+  }
+
   async getFlowByIndex(idx: number): Promise<F | AggregateFlow | undefined> {
     if (!this.flowmapState || !this.flowmapData) {
       return undefined;
@@ -128,4 +141,37 @@ export default class LocalFlowmapDataProvider<L, F>
   ) {
     setLayersData(await this.getLayersData());
   }
+
+  getClusterZoom(): number | undefined {
+    return this.flowmapState && this.flowmapData
+      ? this.selectors.getClusterZoom(this.flowmapState, this.flowmapData)
+      : undefined;
+  }
+
+  getClusterIndex(): ClusterIndex<F> | undefined {
+    return this.flowmapState && this.flowmapData
+      ? this.selectors.getClusterIndex(this.flowmapState, this.flowmapData)
+      : undefined;
+  }
+
+  getLocationsById(): Map<string | number, L> | undefined {
+    return this.flowmapState && this.flowmapData
+      ? this.selectors.getLocationsById(this.flowmapState, this.flowmapData)
+      : undefined;
+  }
+
+  getLocationTotals(): Map<string | number, LocationTotals> | undefined {
+    return this.flowmapState && this.flowmapData
+      ? this.selectors.getLocationTotals(this.flowmapState, this.flowmapData)
+      : undefined;
+  }
+
+  getFlowsForFlowmapLayer(): Array<F | AggregateFlow> | undefined {
+    return this.flowmapState && this.flowmapData
+      ? this.selectors.getFlowsForFlowmapLayer(
+          this.flowmapState,
+          this.flowmapData,
+        )
+      : undefined;
+  }
 }

package/src/selector-functions.ts

@@ -1,6 +1,13 @@
 import {WebMercatorViewport} from '@math.gl/web-mercator';
-import {ViewportProps} from './types';
+import {
+  ClusterLevel,
+  isCluster,
+  LocationAccessors,
+  ViewportProps,
+} from './types';
 import {scaleLinear} from 'd3-scale';
+import {ClusterIndex, LocationWeightGetter} from './cluster/ClusterIndex';
+import {descending} from 'd3-array';
 
 // TODO: use re-reselect
 
@@ -32,3 +39,49 @@ export const getFlowThicknessScale = (
       ),
     ]);
 };
+
+/**
+ * Adding meaningful cluster names.
+ * NOTE: this will mutate the nodes in clusterIndex
+ */
+export function addClusterNames<L, F>(
+  clusterIndex: ClusterIndex<F>,
+  clusterLevels: ClusterLevel[],
+  locationsById: Map<string | number, L>,
+  locationAccessors: LocationAccessors<L>,
+  getLocationWeight: LocationWeightGetter,
+): void {
+  const {getLocationId, getLocationName, getLocationClusterName} =
+    locationAccessors;
+  const getName = (id: string | number) => {
+    const loc = locationsById.get(id);
+    if (loc) {
+      return getLocationName ? getLocationName(loc) : getLocationId(loc) || id;
+    }
+    return `"${id}"`;
+  };
+  for (const level of clusterLevels) {
+    for (const node of level.nodes) {
+      // Here mutating the nodes (adding names)
+      if (isCluster(node)) {
+        const leaves = clusterIndex.expandCluster(node);
+
+        leaves.sort((a, b) =>
+          descending(getLocationWeight(a), getLocationWeight(b)),
+        );
+
+        if (getLocationClusterName) {
+          node.name = getLocationClusterName(leaves);
+        } else {
+          const topId = leaves[0];
+          const otherId = leaves.length === 2 ? leaves[1] : undefined;
+          node.name = `"${getName(topId)}" and ${
+            otherId ? `"${getName(otherId)}"` : `${leaves.length - 1} others`
+          }`;
+        }
+      } else {
+        (node as any).name = getName(node.id);
+      }
+    }
+  }
+}

package/src/types.ts

@@ -26,7 +26,7 @@ export interface FlowAccessors<F> {
 
 export interface LocationAccessors<L> {
   getLocationId: LocationAccessor<L, string | number>;
-  getLocationName?: LocationAccessor<L, string | number>;
+  getLocationName?: LocationAccessor<L, string>;
   getLocationLat: LocationAccessor<L, number>;
   getLocationLon: LocationAccessor<L, number>;
   getLocationClusterName?: (locationIds: (string | number)[]) => string;
@@ -160,6 +160,7 @@ export interface FlowLinesLayerAttributes {
 export interface LayersData {
   circleAttributes: FlowCirclesLayerAttributes;
   lineAttributes: FlowLinesLayerAttributes;
+  locationLabels?: string[];
 }
 
 export type LayersDataAttrValues<T> = {value: T; size: number};