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

package/src/FlowmapSelectors.ts

@@ -16,9 +16,8 @@
  *
  */
 
-import {WebMercatorViewport} from '@math.gl/web-mercator';
-import {ascending, rollup, descending, extent, min} from 'd3-array';
-import {ScaleLinear, scaleLinear, scaleSqrt} from 'd3-scale';
+import {ascending, descending, extent, min, rollup} from 'd3-array';
+import {ScaleLinear, scaleSqrt} from 'd3-scale';
 import KDBush from 'kdbush';
 import {
   createSelector,
@@ -32,6 +31,7 @@ import {
   buildIndex,
   ClusterIndex,
   findAppropriateZoomLevel,
+  LocationWeightGetter,
   makeLocationWeightGetter,
 } from './cluster/ClusterIndex';
 import getColors, {
@@ -45,6 +45,10 @@ import getColors, {
 } from './colors';
 import FlowmapAggregateAccessors from './FlowmapAggregateAccessors';
 import {FlowmapState} from './FlowmapState';
+import {
+  getFlowThicknessScale,
+  getViewportBoundingBox,
+} from './selector-functions';
 import {
   getTimeGranularityByKey,
   getTimeGranularityByOrder,
@@ -54,6 +58,7 @@ import {
 import {
   AggregateFlow,
   Cluster,
+  ClusterLevels,
   ClusterNode,
   CountByTime,
   FlowAccessors,
@@ -89,60 +94,65 @@ export default class FlowmapSelectors<L, F> {
     this.accessors = new FlowmapAggregateAccessors(accessors);
   }
 
-  getFetchedFlows = (state: FlowmapState, props: FlowmapData<L, F>) =>
+  getFlowsFromProps = (state: FlowmapState, props: FlowmapData<L, F>) =>
     props.flows;
-  getFetchedLocations = (state: FlowmapState, props: FlowmapData<L, F>) =>
+  getLocationsFromProps = (state: FlowmapState, props: FlowmapData<L, F>) =>
     props.locations;
+  getClusterLevelsFromProps = (
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
+  ) => {
+    return props.clusterLevels;
+  };
   getMaxTopFlowsDisplayNum = (state: FlowmapState, props: FlowmapData<L, F>) =>
-    state.settingsState.maxTopFlowsDisplayNum;
+    state.settings.maxTopFlowsDisplayNum;
   getSelectedLocations = (state: FlowmapState, props: FlowmapData<L, F>) =>
-    state.filterState.selectedLocations;
+    state.filter?.selectedLocations;
   getLocationFilterMode = (state: FlowmapState, props: FlowmapData<L, F>) =>
-    state.filterState.locationFilterMode;
+    state.filter?.locationFilterMode;
   getClusteringEnabled = (state: FlowmapState, props: FlowmapData<L, F>) =>
-    state.settingsState.clusteringEnabled;
+    state.settings.clusteringEnabled;
   getLocationTotalsEnabled = (state: FlowmapState, props: FlowmapData<L, F>) =>
-    state.settingsState.locationTotalsEnabled;
+    state.settings.locationTotalsEnabled;
   getZoom = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.viewport.zoom;
   getViewport = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.viewport;
   getSelectedTimeRange = (state: FlowmapState, props: FlowmapData<L, F>) =>
-    state.filterState.selectedTimeRange;
+    state.filter?.selectedTimeRange;
 
   getColorScheme: Selector<L, F, string | string[] | undefined> = (
     state: FlowmapState,
     props: FlowmapData<L, F>,
-  ) => state.settingsState.colorScheme;
+  ) => state.settings.colorScheme;
 
   getDarkMode: Selector<L, F, boolean> = (
     state: FlowmapState,
     props: FlowmapData<L, F>,
-  ) => state.settingsState.darkMode;
+  ) => state.settings.darkMode;
 
   getFadeEnabled: Selector<L, F, boolean> = (
     state: FlowmapState,
     props: FlowmapData<L, F>,
-  ) => state.settingsState.fadeEnabled;
+  ) => state.settings.fadeEnabled;
 
   getFadeOpacityEnabled: Selector<L, F, boolean> = (
     state: FlowmapState,
     props: FlowmapData<L, F>,
-  ) => state.settingsState.fadeOpacityEnabled;
+  ) => state.settings.fadeOpacityEnabled;
 
   getFadeAmount: Selector<L, F, number> = (
     state: FlowmapState,
     props: FlowmapData<L, F>,
-  ) => state.settingsState.fadeAmount;
+  ) => state.settings.fadeAmount;
 
   getAnimate: Selector<L, F, boolean> = (
     state: FlowmapState,
     props: FlowmapData<L, F>,
-  ) => state.settingsState.animationEnabled;
+  ) => state.settings.animationEnabled;
 
-  getInvalidLocationIds: Selector<L, F, string[] | undefined> = createSelector(
-    this.getFetchedLocations,
-    (locations) => {
+  getInvalidLocationIds: Selector<L, F, (string | number)[] | undefined> =
+    createSelector(this.getLocationsFromProps, (locations) => {
       if (!locations) return undefined;
       const invalid = [];
       for (const location of locations) {
@@ -154,11 +164,10 @@ export default class FlowmapSelectors<L, F> {
         }
       }
       return invalid.length > 0 ? invalid : undefined;
-    },
-  );
+    });
 
   getLocations: Selector<L, F, Iterable<L> | undefined> = createSelector(
-    this.getFetchedLocations,
+    this.getLocationsFromProps,
     this.getInvalidLocationIds,
     (locations, invalidIds) => {
       if (!locations) return undefined;
@@ -175,17 +184,15 @@ export default class FlowmapSelectors<L, F> {
     },
   );
 
-  getLocationIds: Selector<L, F, Set<string> | undefined> = createSelector(
-    this.getLocations,
-    (locations) => {
+  getLocationIds: Selector<L, F, Set<string | number> | undefined> =
+    createSelector(this.getLocations, (locations) => {
       if (!locations) return undefined;
-      const ids = new Set<string>();
+      const ids = new Set<string | number>();
       for (const id of locations) {
         ids.add(this.accessors.getLocationId(id));
       }
       return ids;
-    },
-  );
+    });
 
   getSelectedLocationsSet: Selector<L, F, Set<string> | undefined> =
     createSelector(this.getSelectedLocations, (ids) =>
@@ -193,23 +200,27 @@ export default class FlowmapSelectors<L, F> {
     );
 
   getSortedFlowsForKnownLocations: Selector<L, F, F[] | undefined> =
-    createSelector(this.getFetchedFlows, this.getLocationIds, (flows, ids) => {
-      if (!ids || !flows) return undefined;
-      const filtered = [];
-      for (const flow of flows) {
-        const srcId = this.accessors.getFlowOriginId(flow);
-        const dstId = this.accessors.getFlowDestId(flow);
-        if (ids.has(srcId) && ids.has(dstId)) {
-          filtered.push(flow);
+    createSelector(
+      this.getFlowsFromProps,
+      this.getLocationIds,
+      (flows, ids) => {
+        if (!ids || !flows) return undefined;
+        const filtered = [];
+        for (const flow of flows) {
+          const srcId = this.accessors.getFlowOriginId(flow);
+          const dstId = this.accessors.getFlowDestId(flow);
+          if (ids.has(srcId) && ids.has(dstId)) {
+            filtered.push(flow);
+          }
         }
-      }
-      return filtered.sort((a: F, b: F) =>
-        descending(
-          Math.abs(this.accessors.getFlowMagnitude(a)),
-          Math.abs(this.accessors.getFlowMagnitude(b)),
-        ),
-      );
-    });
+        return filtered.sort((a: F, b: F) =>
+          descending(
+            Math.abs(this.accessors.getFlowMagnitude(a)),
+            Math.abs(this.accessors.getFlowMagnitude(b)),
+          ),
+        );
+      },
+    );
 
   getActualTimeExtent: Selector<L, F, [Date, Date] | undefined> =
     createSelector(this.getSortedFlowsForKnownLocations, (flows) => {
@@ -302,29 +313,33 @@ export default class FlowmapSelectors<L, F> {
       },
     );
 
-  getLocationsById: Selector<L, F, Map<string, L> | undefined> = createSelector(
-    this.getLocationsHavingFlows,
-    (locations) => {
+  getLocationsById: Selector<L, F, Map<string | number, L> | undefined> =
+    createSelector(this.getLocationsHavingFlows, (locations) => {
       if (!locations) return undefined;
-      const locationsById = new Map<string, L>();
+      const locationsById = new Map<string | number, L>();
       for (const location of locations) {
         locationsById.set(this.accessors.getLocationId(location), location);
       }
       return locationsById;
-    },
-  );
-
-  getClusterIndex: Selector<L, F, ClusterIndex<F> | undefined> = createSelector(
-    this.getLocationsHavingFlows,
-    this.getLocationsById,
-    this.getSortedFlowsForKnownLocations,
-    (locations, locationsById, flows) => {
-      if (!locations || !locationsById || !flows) return undefined;
+    });
 
+  getLocationWeightGetter: Selector<L, F, LocationWeightGetter | undefined> =
+    createSelector(this.getSortedFlowsForKnownLocations, (flows) => {
+      if (!flows) return undefined;
       const getLocationWeight = makeLocationWeightGetter(
         flows,
         this.accessors.getFlowmapDataAccessors(),
       );
+      return getLocationWeight;
+    });
+
+  getClusterLevels: Selector<L, F, ClusterLevels | undefined> = createSelector(
+    this.getClusterLevelsFromProps,
+    this.getLocationsHavingFlows,
+    this.getLocationWeightGetter,
+    (clusterLevelsFromProps, locations, getLocationWeight) => {
+      if (clusterLevelsFromProps) return clusterLevelsFromProps;
+      if (!locations || !getLocationWeight) return undefined;
       const clusterLevels = clusterLocations(
         locations,
         this.accessors.getFlowmapDataAccessors(),
@@ -333,12 +348,24 @@ export default class FlowmapSelectors<L, F> {
           maxZoom: MAX_CLUSTER_ZOOM_LEVEL,
         },
       );
+      return clusterLevels;
+    },
+  );
+
+  getClusterIndex: Selector<L, F, ClusterIndex<F> | undefined> = createSelector(
+    this.getLocationsById,
+    this.getLocationWeightGetter,
+    this.getClusterLevels,
+    (locationsById, getLocationWeight, clusterLevels) => {
+      if (!locationsById || !getLocationWeight || !clusterLevels)
+        return undefined;
+
       const clusterIndex = buildIndex<F>(clusterLevels);
       const {getLocationName, getLocationClusterName} =
         this.accessors.getFlowmapDataAccessors();
 
       // Adding meaningful names
-      const getName = (id: string) => {
+      const getName = (id: string | number) => {
         const loc = locationsById.get(id);
         if (loc) {
           return getLocationName
@@ -418,7 +445,7 @@ export default class FlowmapSelectors<L, F> {
     this.getAvailableClusterZoomLevels,
     (clusterIndex, mapZoom, availableClusterZoomLevels) => {
       if (!clusterIndex) return undefined;
-      if (!availableClusterZoomLevels) {
+      if (!availableClusterZoomLevels || mapZoom == null) {
         return undefined;
       }
 
@@ -431,12 +458,12 @@ export default class FlowmapSelectors<L, F> {
   );
 
   getClusterZoom = (state: FlowmapState, props: FlowmapData<L, F>) => {
-    const {settingsState} = state;
-    if (!settingsState.clusteringEnabled) return undefined;
-    if (settingsState.clusteringAuto || settingsState.clusteringLevel == null) {
+    const {settings} = state;
+    if (!settings.clusteringEnabled) return undefined;
+    if (settings.clusteringAuto || settings.clusteringLevel == null) {
       return this._getClusterZoom(state, props);
     }
-    return settingsState.clusteringLevel;
+    return settings.clusteringLevel;
   };
 
   getLocationsForSearchBox: Selector<L, F, (L | Cluster)[] | undefined> =
@@ -489,7 +516,7 @@ export default class FlowmapSelectors<L, F> {
     );
 
   getDiffMode: Selector<L, F, boolean> = createSelector(
-    this.getFetchedFlows,
+    this.getFlowsFromProps,
     (flows) => {
       if (flows) {
         for (const f of flows) {
@@ -522,27 +549,28 @@ export default class FlowmapSelectors<L, F> {
     },
   );
 
-  getUnknownLocations: Selector<L, F, Set<string> | undefined> = createSelector(
-    this.getLocationIds,
-    this.getFetchedFlows,
-    this.getSortedFlowsForKnownLocations,
-    (ids, flows, flowsForKnownLocations) => {
-      if (!ids || !flows) return undefined;
-      if (
-        flowsForKnownLocations
-        // && flows.length === flowsForKnownLocations.length
-      )
-        return undefined;
-      const missing = new Set<string>();
-      for (const flow of flows) {
-        if (!ids.has(this.accessors.getFlowOriginId(flow)))
-          missing.add(this.accessors.getFlowOriginId(flow));
-        if (!ids.has(this.accessors.getFlowDestId(flow)))
-          missing.add(this.accessors.getFlowDestId(flow));
-      }
-      return missing;
-    },
-  );
+  getUnknownLocations: Selector<L, F, Set<string | number> | undefined> =
+    createSelector(
+      this.getLocationIds,
+      this.getFlowsFromProps,
+      this.getSortedFlowsForKnownLocations,
+      (ids, flows, flowsForKnownLocations) => {
+        if (!ids || !flows) return undefined;
+        if (
+          flowsForKnownLocations
+          // && flows.length === flowsForKnownLocations.length
+        )
+          return undefined;
+        const missing = new Set<string | number>();
+        for (const flow of flows) {
+          if (!ids.has(this.accessors.getFlowOriginId(flow)))
+            missing.add(this.accessors.getFlowOriginId(flow));
+          if (!ids.has(this.accessors.getFlowDestId(flow)))
+            missing.add(this.accessors.getFlowDestId(flow));
+        }
+        return missing;
+      },
+    );
 
   getSortedAggregatedFilteredFlows: Selector<
     L,
@@ -662,15 +690,7 @@ export default class FlowmapSelectors<L, F> {
     createSelector(
       this.getViewport,
       this.getMaxLocationCircleSize,
-      (viewport, maxLocationCircleSize) => {
-        const pad = maxLocationCircleSize;
-        const bounds = new WebMercatorViewport({
-          ...viewport,
-          width: viewport.width + pad * 2,
-          height: viewport.height + pad * 2,
-        }).getBounds();
-        return [bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]];
-      },
+      getViewportBoundingBox,
     );
 
   getLocationsForZoom: Selector<L, F, Iterable<L> | ClusterNode[] | undefined> =
@@ -688,47 +708,50 @@ export default class FlowmapSelectors<L, F> {
       },
     );
 
-  getLocationTotals: Selector<L, F, Map<string, LocationTotals> | undefined> =
-    createSelector(
-      this.getLocationsForZoom,
-      this.getSortedAggregatedFilteredFlows,
-      this.getSelectedLocationsSet,
-      this.getLocationFilterMode,
-      (locations, flows, selectedLocationsSet, locationFilterMode) => {
-        if (!flows) return undefined;
-        const totals = new Map<string, LocationTotals>();
-        const add = (
-          id: string,
-          d: Partial<LocationTotals>,
-        ): LocationTotals => {
-          const rv = totals.get(id) ?? {
-            incomingCount: 0,
-            outgoingCount: 0,
-            internalCount: 0,
-          };
-          if (d.incomingCount != null) rv.incomingCount += d.incomingCount;
-          if (d.outgoingCount != null) rv.outgoingCount += d.outgoingCount;
-          if (d.internalCount != null) rv.internalCount += d.internalCount;
-          return rv;
+  getLocationTotals: Selector<
+    L,
+    F,
+    Map<string | number, LocationTotals> | undefined
+  > = createSelector(
+    this.getLocationsForZoom,
+    this.getSortedAggregatedFilteredFlows,
+    this.getSelectedLocationsSet,
+    this.getLocationFilterMode,
+    (locations, flows, selectedLocationsSet, locationFilterMode) => {
+      if (!flows) return undefined;
+      const totals = new Map<string | number, LocationTotals>();
+      const add = (
+        id: string | number,
+        d: Partial<LocationTotals>,
+      ): LocationTotals => {
+        const rv = totals.get(id) ?? {
+          incomingCount: 0,
+          outgoingCount: 0,
+          internalCount: 0,
         };
-        for (const f of flows) {
-          if (
-            this.isFlowInSelection(f, selectedLocationsSet, locationFilterMode)
-          ) {
-            const originId = this.accessors.getFlowOriginId(f);
-            const destId = this.accessors.getFlowDestId(f);
-            const count = this.accessors.getFlowMagnitude(f);
-            if (originId === destId) {
-              totals.set(originId, add(originId, {internalCount: count}));
-            } else {
-              totals.set(originId, add(originId, {outgoingCount: count}));
-              totals.set(destId, add(destId, {incomingCount: count}));
-            }
+        if (d.incomingCount != null) rv.incomingCount += d.incomingCount;
+        if (d.outgoingCount != null) rv.outgoingCount += d.outgoingCount;
+        if (d.internalCount != null) rv.internalCount += d.internalCount;
+        return rv;
+      };
+      for (const f of flows) {
+        if (
+          this.isFlowInSelection(f, selectedLocationsSet, locationFilterMode)
+        ) {
+          const originId = this.accessors.getFlowOriginId(f);
+          const destId = this.accessors.getFlowDestId(f);
+          const count = this.accessors.getFlowMagnitude(f);
+          if (originId === destId) {
+            totals.set(originId, add(originId, {internalCount: count}));
+          } else {
+            totals.set(originId, add(originId, {outgoingCount: count}));
+            totals.set(destId, add(destId, {incomingCount: count}));
           }
         }
-        return totals;
-      },
-    );
+      }
+      return totals;
+    },
+  );
 
   getLocationsTree: Selector<L, F, KDBushTree> = createSelector(
     this.getLocationsForZoom,
@@ -762,7 +785,7 @@ export default class FlowmapSelectors<L, F> {
       },
     );
 
-  getLocationIdsInViewport: Selector<L, F, Set<string> | undefined> =
+  getLocationIdsInViewport: Selector<L, F, Set<string | number> | undefined> =
     createSelectorCreator(
       defaultMemoize,
       // @ts-ignore
@@ -834,7 +857,7 @@ export default class FlowmapSelectors<L, F> {
     state: FlowmapState,
     props: FlowmapData<L, F>,
   ): [number, number] | undefined => {
-    if (state.settingsState.adaptiveScalesEnabled) {
+    if (state.settings.adaptiveScalesEnabled) {
       return this._getLocationTotalsForViewportExtent(state, props);
     } else {
       return this._getLocationTotalsExtent(state, props);
@@ -929,7 +952,7 @@ export default class FlowmapSelectors<L, F> {
     state: FlowmapState,
     props: FlowmapData<L, F>,
   ): [number, number] | undefined => {
-    if (state.settingsState.adaptiveScalesEnabled) {
+    if (state.settings.adaptiveScalesEnabled) {
       return this._getAdaptiveFlowMagnitudeExtent(state, props);
     } else {
       return this._getFlowMagnitudeExtent(state, props);
@@ -952,19 +975,7 @@ export default class FlowmapSelectors<L, F> {
 
   getFlowThicknessScale = createSelector(
     this.getFlowMagnitudeExtent,
-    (magnitudeExtent) => {
-      if (!magnitudeExtent) return undefined;
-      return scaleLinear()
-        .range([0.025, 0.5])
-        .domain([
-          0,
-          // should support diff mode too
-          Math.max.apply(
-            null,
-            magnitudeExtent.map((x: number | undefined) => Math.abs(x || 0)),
-          ),
-        ]);
-    },
+    getFlowThicknessScale,
   );
 
   getCircleSizeScale = createSelector(
@@ -995,7 +1006,7 @@ export default class FlowmapSelectors<L, F> {
     this.getCircleSizeScale,
     this.getLocationTotals,
     (circleSizeScale, locationTotals) => {
-      return (locationId: string) => {
+      return (locationId: string | number) => {
         const total = locationTotals?.get(locationId);
         if (total && circleSizeScale) {
           return (
@@ -1013,7 +1024,7 @@ export default class FlowmapSelectors<L, F> {
     this.getCircleSizeScale,
     this.getLocationTotals,
     (circleSizeScale, locationTotals) => {
-      return (locationId: string) => {
+      return (locationId: string | number) => {
         const total = locationTotals?.get(locationId);
         if (total && circleSizeScale) {
           return (
@@ -1141,7 +1152,7 @@ export default class FlowmapSelectors<L, F> {
       getInCircleSize,
       getOutCircleSize,
       flowThicknessScale,
-      state.settingsState.animationEnabled,
+      state.settings.animationEnabled,
     );
   }
 
@@ -1149,10 +1160,10 @@ export default class FlowmapSelectors<L, F> {
     locations: (L | ClusterNode)[] | undefined,
     flows: (F | AggregateFlow)[] | undefined,
     flowmapColors: DiffColorsRGBA | ColorsRGBA,
-    locationsById: Map<string, L | ClusterNode> | undefined,
-    locationIdsInViewport: Set<string> | undefined,
-    getInCircleSize: (locationId: string) => number,
-    getOutCircleSize: (locationId: string) => number,
+    locationsById: Map<string | number, L | ClusterNode> | undefined,
+    locationIdsInViewport: Set<string | number> | undefined,
+    getInCircleSize: (locationId: string | number) => number,
+    getOutCircleSize: (locationId: string | number) => number,
     flowThicknessScale: ScaleLinear<number, number, never> | undefined,
     animationEnabled: boolean,
   ): LayersData {
@@ -1326,8 +1337,8 @@ export default class FlowmapSelectors<L, F> {
 
   isFlowInSelection(
     flow: F | AggregateFlow,
-    selectedLocationsSet: Set<string> | undefined,
-    locationFilterMode: LocationFilterMode,
+    selectedLocationsSet: Set<string | number> | undefined,
+    locationFilterMode?: LocationFilterMode,
   ) {
     const origin = this.accessors.getFlowOriginId(flow);
     const dest = this.accessors.getFlowDestId(flow);
@@ -1373,8 +1384,8 @@ export default class FlowmapSelectors<L, F> {
 }
 
 function calcLocationTotalsExtent(
-  locationTotals: Map<string, LocationTotals> | undefined,
-  locationIdsInViewport: Set<string> | undefined,
+  locationTotals: Map<string | number, LocationTotals> | undefined,
+  locationIdsInViewport: Set<string | number> | undefined,
 ) {
   if (!locationTotals) return undefined;
   let rv: [number, number] | undefined = undefined;

package/src/FlowmapState.ts

@@ -1,9 +1,9 @@
 import {LocationFilterMode, ViewportProps} from './types';
 
 export interface FilterState {
-  selectedLocations: string[] | undefined;
-  selectedTimeRange: [Date, Date] | undefined;
-  locationFilterMode: LocationFilterMode;
+  selectedLocations?: string[];
+  locationFilterMode?: LocationFilterMode;
+  selectedTimeRange?: [Date, Date];
 }
 
 export interface SettingsState {
@@ -23,7 +23,7 @@ export interface SettingsState {
 }
 
 export interface FlowmapState {
-  filterState: FilterState;
-  settingsState: SettingsState;
+  filter?: FilterState;
+  settings: SettingsState;
   viewport: ViewportProps;
 }