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

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

@@ -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;
@@ -72,7 +85,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 +106,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;
     }
@@ -126,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

@@ -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>;
+  getLocationId: LocationAccessor<L, string | number>;
   getLocationName?: LocationAccessor<L, string>;
   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;
 }
@@ -160,6 +160,7 @@ export interface FlowLinesLayerAttributes {
 export interface LayersData {
   circleAttributes: FlowCirclesLayerAttributes;
   lineAttributes: FlowLinesLayerAttributes;
+  locationLabels?: string[];
 }
 
 export type LayersDataAttrValues<T> = {value: T; size: number};