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

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

@@ -36,7 +36,7 @@
 // TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
 // THIS SOFTWARE.
 
-import {rollup} from 'd3-array';
+import {min, rollup} from 'd3-array';
 import KDBush from 'kdbush';
 import {LocationWeightGetter} from './ClusterIndex';
 import {Cluster, ClusterLevel, ClusterNode, LocationAccessors} from '../types';
@@ -110,7 +110,7 @@ export function clusterLocations<L>(
 
   // generate a cluster object for each point and index input points into a KD-tree
   let clusters = new Array<Point<L>>();
-  let i = 0;
+  let locationsCount = 0;
   for (const location of locations) {
     const x = getLocationLon(location);
     const y = getLocationLat(location);
@@ -119,41 +119,65 @@ export function clusterLocations<L>(
       y: latY(y),
       weight: getLocationWeight(getLocationId(location)),
       zoom: Infinity, // the last zoom the point was processed at
-      index: i, // index of the source feature in the original input array,
+      index: locationsCount, // index of the source feature in the original input array,
       parentId: -1, // parent cluster id
       location,
     });
-    i++;
+    locationsCount++;
   }
-  trees[maxZoom + 1] = new KDBush(clusters, getX, getY, nodeSize, Float32Array);
 
   // cluster points on max zoom, then cluster the results on previous zoom, etc.;
   // results in a cluster hierarchy across zoom levels
+  trees[maxZoom + 1] = new KDBush(clusters, getX, getY, nodeSize, Float32Array);
+  let prevZoom = maxZoom + 1;
+
   for (let z = maxZoom; z >= minZoom; z--) {
     // create a new set of clusters for the zoom and index them with a KD-tree
-    clusters = cluster(clusters, z, trees[z + 1], opts);
-    trees[z] = new KDBush(clusters, getX, getY, nodeSize, Float32Array);
+    const _clusters = cluster(clusters, z, trees[prevZoom], opts);
+    if (_clusters.length === clusters.length) {
+      // same number of clusters => move the higher level clusters up
+      // no need to keep the same data on multiple levels
+      trees[z] = trees[prevZoom];
+      trees[prevZoom] = undefined;
+      prevZoom = z;
+      clusters = _clusters;
+    } else {
+      prevZoom = z;
+      clusters = _clusters;
+      trees[z] = new KDBush(clusters, getX, getY, nodeSize, Float32Array);
+    }
   }
 
   if (trees.length === 0) {
     return [];
   }
-  const numbersOfClusters = trees.map((d) => d.points.length);
-  const maxAvailZoom = numbersOfClusters.indexOf(
-    numbersOfClusters[numbersOfClusters.length - 1],
-  );
+
+  const numbersOfClusters = trees.map((d) => d?.points.length);
+  const minClusters = min(numbersOfClusters.filter((d) => d > 0));
+  const maxClusters = getMaxNumberOfClusters(locations, locationAccessors);
+
+  let maxAvailZoom = numbersOfClusters.indexOf(maxClusters);
+  if (maxClusters < locationsCount) {
+    maxAvailZoom++;
+    if (maxAvailZoom < maxZoom + 1) {
+      trees[maxAvailZoom] = trees[maxZoom + 1];
+      trees[maxZoom + 1] = undefined;
+    }
+  }
   const minAvailZoom = Math.min(
     maxAvailZoom,
-    numbersOfClusters.lastIndexOf(numbersOfClusters[0]),
+    numbersOfClusters.lastIndexOf(minClusters),
   );
 
   const clusterLevels = new Array<ClusterLevel>();
-  for (let zoom = minAvailZoom; zoom <= maxAvailZoom; zoom++) {
-    let childrenByParent: Map<number, string[]> | undefined;
+  prevZoom = NaN;
+  for (let zoom = maxAvailZoom; zoom >= minAvailZoom; zoom--) {
+    let childrenByParent: Map<number, (string | number)[]> | undefined;
     const tree = trees[zoom];
+    if (!tree) continue;
     if (zoom < maxAvailZoom) {
-      childrenByParent = rollup<Point<L>, string[], number>(
-        trees[zoom + 1].points,
+      childrenByParent = rollup<Point<L>, (string | number)[], number>(
+        trees[prevZoom].points,
         (points: any[]) =>
           points.map((p: any) =>
             p.id ? makeClusterId(p.id) : getLocationId(p.location),
@@ -192,6 +216,7 @@ export function clusterLocations<L>(
       zoom,
       nodes,
     });
+    prevZoom = zoom;
   }
   return clusterLevels;
 }
@@ -303,3 +328,33 @@ function getX<L>(p: Point<L>) {
 function getY<L>(p: Point<L>) {
   return p.y;
 }
+
+/**
+ * Finds groups of locations which share the same positions.
+ * They will always be clustered together at any zoom level
+ * which can lead to having too many zooms.
+ */
+function getMaxNumberOfClusters<L>(
+  locations: Iterable<L>,
+  locationAccessors: LocationAccessors<L>,
+) {
+  const {getLocationLon, getLocationLat} = locationAccessors;
+  const countByLatLon = new Map<string, number>();
+  let numLocations = 0;
+  for (const loc of locations) {
+    const lon = getLocationLon(loc);
+    const lat = getLocationLat(loc);
+    const key = `${lon},${lat}`;
+    const prev = countByLatLon.get(key);
+    countByLatLon.set(key, prev ? prev + 1 : 1);
+    numLocations++;
+  }
+
+  let numSame = 0;
+  for (const [key, count] of countByLatLon) {
+    if (count > 1) {
+      numSame++;
+    }
+  }
+  return numLocations - numSame;
+}

package/src/colors.ts

@@ -333,17 +333,15 @@ const diffColors: DiffColors = {
   outlineColor: 'rgb(230,233,237)',
 };
 
-export function getFlowmapColors(
-  settingsState: SettingsState,
-): Colors | DiffColors {
+export function getFlowmapColors(settings: SettingsState): Colors | DiffColors {
   return getColors(
     false, // TODO: diffMode
-    settingsState.colorScheme,
-    settingsState.darkMode,
-    settingsState.fadeEnabled,
-    settingsState.fadeOpacityEnabled,
-    settingsState.fadeAmount,
-    settingsState.animationEnabled,
+    settings.colorScheme,
+    settings.darkMode,
+    settings.fadeEnabled,
+    settings.fadeOpacityEnabled,
+    settings.fadeAmount,
+    settings.animationEnabled,
   );
 }
 

package/src/index.ts

@@ -2,9 +2,12 @@ export * from './types';
 export * from './colors';
 export * from './FlowmapState';
 export * from './FlowmapSelectors';
+export * from './selector-functions';
 export * from './time';
 export * from './getViewStateForLocations';
 export * from './provider/FlowmapDataProvider';
+export * from './cluster/cluster';
+export * from './cluster/ClusterIndex';
 export {default as FlowmapAggregateAccessors} from './FlowmapAggregateAccessors';
 export type {default as FlowmapDataProvider} from './provider/FlowmapDataProvider';
 export {default as LocalFlowmapDataProvider} from './provider/LocalFlowmapDataProvider';

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],
@@ -36,6 +38,15 @@ export default interface FlowmapDataProvider<L, F> {
   // getLocationsForSearchBox(): Promise<(FlowLocation | ClusterNode)[] | undefined>;
 
   getLayersData(): Promise<LayersData | undefined>;
+
+  /**
+   * This is to give the data provider control over when/how often layersData
+   * is updated which leads to the flowmap being redrawn.
+   */
+  updateLayersData(
+    setLayersData: (layersData: LayersData | undefined) => void,
+    changeFlags: Record<string, boolean>,
+  ): Promise<void>;
 }
 
 export function isFlowmapData<L, F>(

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;
     }
@@ -120,4 +122,10 @@ export default class LocalFlowmapDataProvider<L, F>
       opts,
     );
   }
+
+  async updateLayersData(
+    setLayersData: (layersData: LayersData | undefined) => void,
+  ) {
+    setLayersData(await this.getLayersData());
+  }
 }

package/src/selector-functions.ts

@@ -0,0 +1,34 @@
+import {WebMercatorViewport} from '@math.gl/web-mercator';
+import {ViewportProps} from './types';
+import {scaleLinear} from 'd3-scale';
+
+// TODO: use re-reselect
+
+export const getViewportBoundingBox = (
+  viewport: ViewportProps,
+  maxLocationCircleSize = 0,
+): [number, number, number, number] => {
+  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]];
+};
+
+export const getFlowThicknessScale = (
+  magnitudeExtent: [number, number] | undefined,
+) => {
+  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)),
+      ),
+    ]);
+};

package/src/types.ts

@@ -1,6 +1,7 @@
 export type FlowmapData<L, F> = {
   locations: Iterable<L> | undefined;
   flows: Iterable<F> | undefined;
+  clusterLevels?: ClusterLevels;
 };
 
 export interface ViewState {
@@ -16,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>;
@@ -59,9 +60,9 @@ export interface ViewportProps {
   height: number;
   latitude: number;
   longitude: number;
-  zoom: number;
-  bearing: number;
-  pitch: number;
+  zoom?: number;
+  bearing?: number;
+  pitch?: number;
   altitude?: number;
   maxZoom?: number;
   minZoom?: number;
@@ -74,7 +75,7 @@ export interface ViewportProps {
 }
 
 export interface ClusterNode {
-  id: string;
+  id: string | number;
   zoom: number;
   lat: number;
   lon: number;
@@ -104,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;
 }