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

package/src/FlowmapSelectors.ts

@@ -151,9 +151,8 @@ export default class FlowmapSelectors<L, F> {
     props: FlowmapData<L, F>,
   ) => state.settings.animationEnabled;
 
-  getInvalidLocationIds: Selector<L, F, string[] | undefined> = createSelector(
-    this.getLocationsFromProps,
-    (locations) => {
+  getInvalidLocationIds: Selector<L, F, (string | number)[] | undefined> =
+    createSelector(this.getLocationsFromProps, (locations) => {
       if (!locations) return undefined;
       const invalid = [];
       for (const location of locations) {
@@ -165,8 +164,7 @@ export default class FlowmapSelectors<L, F> {
         }
       }
       return invalid.length > 0 ? invalid : undefined;
-    },
-  );
+    });
 
   getLocations: Selector<L, F, Iterable<L> | undefined> = createSelector(
     this.getLocationsFromProps,
@@ -186,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) =>
@@ -317,17 +313,15 @@ 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;
-    },
-  );
+    });
 
   getLocationWeightGetter: Selector<L, F, LocationWeightGetter | undefined> =
     createSelector(this.getSortedFlowsForKnownLocations, (flows) => {
@@ -371,7 +365,7 @@ export default class FlowmapSelectors<L, F> {
         this.accessors.getFlowmapDataAccessors();
 
       // Adding meaningful names
-      const getName = (id: string) => {
+      const getName = (id: string | number) => {
         const loc = locationsById.get(id);
         if (loc) {
           return getLocationName
@@ -555,27 +549,28 @@ export default class FlowmapSelectors<L, F> {
     },
   );
 
-  getUnknownLocations: Selector<L, F, Set<string> | 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>();
-      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,
@@ -713,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,
@@ -787,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
@@ -1008,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 (
@@ -1026,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 (
@@ -1162,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 {
@@ -1339,7 +1337,7 @@ export default class FlowmapSelectors<L, F> {
 
   isFlowInSelection(
     flow: F | AggregateFlow,
-    selectedLocationsSet: Set<string> | undefined,
+    selectedLocationsSet: Set<string | number> | undefined,
     locationFilterMode?: LocationFilterMode,
   ) {
     const origin = this.accessors.getFlowOriginId(flow);
@@ -1386,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/cluster/ClusterIndex.ts

@@ -27,14 +27,14 @@ import {
 } from './../types';
 import {ascending, bisectLeft, extent} from 'd3-array';
 
-export type LocationWeightGetter = (id: string) => number;
+export type LocationWeightGetter = (id: string | number) => number;
 
 /**
  * A data structure representing the cluster levels for efficient flow aggregation.
  */
 export interface ClusterIndex<F> {
   availableZoomLevels: number[];
-  getClusterById: (clusterId: string) => Cluster | undefined;
+  getClusterById: (clusterId: string | number) => Cluster | undefined;
   /**
    * List the nodes on the given zoom level.
    */
@@ -50,7 +50,10 @@ export interface ClusterIndex<F> {
   /**
    * Find the cluster the given location is residing in on the specified zoom level.
    */
-  findClusterFor: (locationId: string, zoom: number) => string | undefined;
+  findClusterFor: (
+    locationId: string | number,
+    zoom: number,
+  ) => string | number | undefined;
   /**
    * Aggregate flows for the specified zoom level.
    */
@@ -69,8 +72,8 @@ export interface ClusterIndex<F> {
  */
 export function buildIndex<F>(clusterLevels: ClusterLevels): ClusterIndex<F> {
   const nodesByZoom = new Map<number, ClusterNode[]>();
-  const clustersById = new Map<string, Cluster>();
-  const minZoomByLocationId = new Map<string, number>();
+  const clustersById = new Map<string | number, Cluster>();
+  const minZoomByLocationId = new Map<string | number, number>();
   for (const {zoom, nodes} of clusterLevels) {
     nodesByZoom.set(zoom, nodes);
     for (const node of nodes) {
@@ -91,7 +94,10 @@ export function buildIndex<F>(clusterLevels: ClusterLevels): ClusterIndex<F> {
     throw new Error('Could not determine minZoom or maxZoom');
   }
 
-  const leavesToClustersByZoom = new Map<number, Map<string, Cluster>>();
+  const leavesToClustersByZoom = new Map<
+    number,
+    Map<string | number, Cluster>
+  >();
 
   for (const cluster of clustersById.values()) {
     const {zoom} = cluster;
@@ -118,7 +124,7 @@ export function buildIndex<F>(clusterLevels: ClusterLevels): ClusterIndex<F> {
 
   const expandCluster = (cluster: Cluster, targetZoom: number = maxZoom) => {
     const ids: string[] = [];
-    const visit = (c: Cluster, expandedIds: string[]) => {
+    const visit = (c: Cluster, expandedIds: (string | number)[]) => {
       if (targetZoom > c.zoom) {
         for (const childId of c.children) {
           const child = clustersById.get(childId);
@@ -136,7 +142,7 @@ export function buildIndex<F>(clusterLevels: ClusterLevels): ClusterIndex<F> {
     return ids;
   };
 
-  function findClusterFor(locationId: string, zoom: number) {
+  function findClusterFor(locationId: string | number, zoom: number) {
     const leavesToClusters = leavesToClustersByZoom.get(zoom);
     if (!leavesToClusters) {
       return undefined;
@@ -179,7 +185,8 @@ export function buildIndex<F>(clusterLevels: ClusterLevels): ClusterIndex<F> {
       }
       const result: (F | AggregateFlow)[] = [];
       const aggFlowsByKey = new Map<string, AggregateFlow>();
-      const makeKey = (origin: string, dest: string) => `${origin}:${dest}`;
+      const makeKey = (origin: string | number, dest: string | number) =>
+        `${origin}:${dest}`;
       const {
         flowCountsMapReduce = {
           map: getFlowMagnitude,
@@ -223,8 +230,8 @@ export function makeLocationWeightGetter<F>(
   {getFlowOriginId, getFlowDestId, getFlowMagnitude}: FlowAccessors<F>,
 ): LocationWeightGetter {
   const locationTotals = {
-    incoming: new Map<string, number>(),
-    outgoing: new Map<string, number>(),
+    incoming: new Map<string | number, number>(),
+    outgoing: new Map<string | number, number>(),
   };
   for (const flow of flows) {
     const origin = getFlowOriginId(flow);
@@ -239,7 +246,7 @@ export function makeLocationWeightGetter<F>(
       (locationTotals.outgoing.get(origin) || 0) + count,
     );
   }
-  return (id: string) =>
+  return (id: string | number) =>
     Math.max(
       Math.abs(locationTotals.incoming.get(id) || 0),
       Math.abs(locationTotals.outgoing.get(id) || 0),

package/src/cluster/cluster.ts

@@ -172,11 +172,11 @@ export function clusterLocations<L>(
   const clusterLevels = new Array<ClusterLevel>();
   prevZoom = NaN;
   for (let zoom = maxAvailZoom; zoom >= minAvailZoom; zoom--) {
-    let childrenByParent: Map<number, string[]> | undefined;
+    let childrenByParent: Map<number, (string | number)[]> | undefined;
     const tree = trees[zoom];
     if (!tree) continue;
     if (zoom < maxAvailZoom) {
-      childrenByParent = rollup<Point<L>, string[], number>(
+      childrenByParent = rollup<Point<L>, (string | number)[], number>(
         trees[prevZoom].points,
         (points: any[]) =>
           points.map((p: any) =>

package/src/provider/FlowmapDataProvider.ts

@@ -23,11 +23,13 @@ export default interface FlowmapDataProvider<L, F> {
 
   getFlowByIndex(index: number): Promise<F | AggregateFlow | undefined>;
 
-  getLocationById(id: string): Promise<L | Cluster | undefined>;
+  getLocationById(id: string | number): Promise<L | Cluster | undefined>;
 
   getLocationByIndex(idx: number): Promise<L | ClusterNode | undefined>;
 
-  getTotalsForLocation(id: string): Promise<LocationTotals | undefined>;
+  getTotalsForLocation(
+    id: string | number,
+  ): Promise<LocationTotals | undefined>;
 
   // getLocationsInBbox(
   //   bbox: [number, number, number, number],

package/src/provider/LocalFlowmapDataProvider.ts

@@ -72,7 +72,7 @@ export default class LocalFlowmapDataProvider<L, F>
     return this.selectors.getLayersData(this.flowmapState, this.flowmapData);
   }
 
-  async getLocationById(id: string): Promise<L | Cluster | undefined> {
+  async getLocationById(id: string | number): Promise<L | Cluster | undefined> {
     if (!this.flowmapState || !this.flowmapData) {
       return undefined;
     }
@@ -93,7 +93,9 @@ export default class LocalFlowmapDataProvider<L, F>
     return locationsById?.get(id);
   }
 
-  async getTotalsForLocation(id: string): Promise<LocationTotals | undefined> {
+  async getTotalsForLocation(
+    id: string | number,
+  ): Promise<LocationTotals | undefined> {
     if (!this.flowmapState || !this.flowmapData) {
       return undefined;
     }

package/src/types.ts

@@ -17,19 +17,19 @@ export type FlowAccessor<F, T> = (flow: F) => T; // objectInfo?: AccessorObjectI
 export type LocationAccessor<L, T> = (location: L) => T;
 
 export interface FlowAccessors<F> {
-  getFlowOriginId: FlowAccessor<F, string>;
-  getFlowDestId: FlowAccessor<F, string>;
+  getFlowOriginId: FlowAccessor<F, string | number>;
+  getFlowDestId: FlowAccessor<F, string | number>;
   getFlowMagnitude: FlowAccessor<F, number>;
   getFlowTime?: FlowAccessor<F, Date>; // TODO: use number instead of Date
   // getFlowColor?: FlowAccessor<string | undefined>;
 }
 
 export interface LocationAccessors<L> {
-  getLocationId: LocationAccessor<L, string>;
-  getLocationName?: LocationAccessor<L, string>;
+  getLocationId: LocationAccessor<L, string | number>;
+  getLocationName?: LocationAccessor<L, string | number>;
   getLocationLat: LocationAccessor<L, number>;
   getLocationLon: LocationAccessor<L, number>;
-  getLocationClusterName?: (locationIds: string[]) => string;
+  getLocationClusterName?: (locationIds: (string | number)[]) => string;
   // getLocationTotalIn?: LocationAccessor<number>;
   // getLocationTotalOut?: LocationAccessor<number>;
   // getLocationTotalInternal?: LocationAccessor<number>;
@@ -75,7 +75,7 @@ export interface ViewportProps {
 }
 
 export interface ClusterNode {
-  id: string;
+  id: string | number;
   zoom: number;
   lat: number;
   lon: number;
@@ -105,8 +105,8 @@ export function isLocationClusterNode<L>(l: L | ClusterNode): l is ClusterNode {
 }
 
 export interface AggregateFlow {
-  origin: string;
-  dest: string;
+  origin: string | number;
+  dest: string | number;
   count: number;
   aggregate: true;
 }