@flowmap.gl/data 8.0.3 → 9.1.0

package/src/FlowmapSelectors.ts

@@ -7,12 +7,7 @@
 import {ascending, descending, extent, min, rollup} from 'd3-array';
 import {ScaleLinear, scaleSqrt} from 'd3-scale';
 import KDBush from 'kdbush';
-import {
-  ParametricSelector,
-  createSelector,
-  createSelectorCreator,
-  defaultMemoize,
-} from 'reselect';
+import {createSelector, createSelectorCreator, lruMemoize} from 'reselect';
 import {alea} from 'seedrandom';
 import FlowmapAggregateAccessors from './FlowmapAggregateAccessors';
 import {FlowmapState} from './FlowmapState';
@@ -53,22 +48,23 @@ import {
   FlowAccessors,
   FlowCirclesLayerAttributes,
   FlowLinesLayerAttributes,
+  FlowLinesRenderingMode,
   FlowmapData,
   FlowmapDataAccessors,
   LayersData,
   LocationFilterMode,
   LocationTotals,
+  ViewportProps,
   isLocationClusterNode,
 } from './types';
 
 const MAX_CLUSTER_ZOOM_LEVEL = 20;
 type KDBushTree = any;
 
-export type Selector<L, F, T> = ParametricSelector<
-  FlowmapState,
-  FlowmapData<L, F>,
-  T
->;
+export type Selector<L, F, T> = (
+  state: FlowmapState,
+  props: FlowmapData<L, F>,
+) => T;
 
 export default class FlowmapSelectors<
   L extends Record<string, any>,
@@ -147,10 +143,15 @@ export default class FlowmapSelectors<
     props: FlowmapData<L, F>,
   ) => state.settings.fadeAmount;
 
-  getAnimate: Selector<L, F, boolean> = (
+  getFlowLinesRenderingMode: Selector<L, F, FlowLinesRenderingMode> = (
     state: FlowmapState,
     props: FlowmapData<L, F>,
-  ) => state.settings.animationEnabled;
+  ) => state.settings.flowLinesRenderingMode;
+
+  getAnimate: Selector<L, F, boolean> = createSelector(
+    this.getFlowLinesRenderingMode,
+    (flowLinesRenderingMode) => flowLinesRenderingMode === 'animated-straight',
+  );
 
   getInvalidLocationIds: Selector<L, F, (string | number)[] | undefined> =
     createSelector(this.getLocationsFromProps, (locations) => {
@@ -246,7 +247,7 @@ export default class FlowmapSelectors<
       (flows, timeExtent) => {
         if (!flows || !timeExtent) return undefined;
 
-        const minOrder = min(flows, (d) => {
+        const minOrder = min(flows, (d: F) => {
           const t = this.accessors.getFlowTime(d);
           return t ? getTimeGranularityForDate(t).order : null;
         });
@@ -286,7 +287,7 @@ export default class FlowmapSelectors<
       ) {
         return flows;
       }
-      return flows.filter((flow) => {
+      return flows.filter((flow: F) => {
         const time = this.accessors.getFlowTime(flow);
         return time && timeRange[0] <= time && time < timeRange[1];
       });
@@ -403,7 +404,7 @@ export default class FlowmapSelectors<
       }
 
       return clusterIndex.availableZoomLevels.filter(
-        (level) => minZoom <= level && level <= maxZoom,
+        (level: number) => minZoom <= level && level <= maxZoom,
       );
     },
   );
@@ -627,7 +628,7 @@ export default class FlowmapSelectors<
           ? getTimeGranularityByKey(timeGranularityKey)
           : undefined;
         if (!flows || !timeGranularity || !timeExtent) return undefined;
-        const byTime = flows.reduce((m, flow) => {
+        const byTime = flows.reduce((m: Map<number, number>, flow: F) => {
           if (
             this.isFlowInSelection(
               flow,
@@ -646,10 +647,12 @@ export default class FlowmapSelectors<
           return m;
         }, new Map<number, number>());
 
-        return Array.from(byTime.entries()).map(([millis, count]) => ({
-          time: new Date(millis),
-          count,
-        }));
+        return Array.from(byTime.entries()).map(
+          ([millis, count]: [number, number]) => ({
+            time: new Date(millis),
+            count,
+          }),
+        );
       },
     );
 
@@ -766,21 +769,21 @@ export default class FlowmapSelectors<
     );
 
   getLocationIdsInViewport: Selector<L, F, Set<string | number> | undefined> =
-    createSelectorCreator(
-      defaultMemoize,
-      // @ts-ignore
-      (
-        s1: Set<string> | undefined,
-        s2: Set<string> | undefined,
-        index: number,
-      ) => {
-        if (s1 === s2) return true;
-        if (s1 == null || s2 == null) return false;
-        if (s1.size !== s2.size) return false;
-        for (const item of s1) if (!s2.has(item)) return false;
-        return true;
+    createSelectorCreator({
+      memoize: lruMemoize,
+      memoizeOptions: {
+        equalityCheck: (
+          s1: Set<string> | undefined,
+          s2: Set<string> | undefined,
+        ) => {
+          if (s1 === s2) return true;
+          if (s1 == null || s2 == null) return false;
+          if (s1.size !== s2.size) return false;
+          for (const item of s1) if (!s2.has(item)) return false;
+          return true;
+        },
       },
-    )(
+    })(
       this._getLocationIdsInViewport,
       (locationIds: Set<string> | undefined) => {
         if (!locationIds) return undefined;
@@ -793,7 +796,7 @@ export default class FlowmapSelectors<
     (flows) => {
       if (!flows) return undefined;
       return flows.reduce(
-        (m, flow) => m + this.accessors.getFlowMagnitude(flow),
+        (m: number, flow: F) => m + this.accessors.getFlowMagnitude(flow),
         0,
       );
     },
@@ -805,7 +808,7 @@ export default class FlowmapSelectors<
     this.getLocationFilterMode,
     (flows, selectedLocationSet, locationFilterMode) => {
       if (!flows) return undefined;
-      const count = flows.reduce((m, flow) => {
+      const count = flows.reduce((m: number, flow: F | AggregateFlow) => {
         if (
           this.isFlowInSelection(flow, selectedLocationSet, locationFilterMode)
         ) {
@@ -1075,11 +1078,14 @@ export default class FlowmapSelectors<
   getLocationsForFlowmapLayerById: Selector<
     L,
     F,
-    Map<string, L | ClusterNode> | undefined
+    Map<string | number, L | ClusterNode> | undefined
   > = createSelector(this.getLocationsForFlowmapLayer, (locations) => {
     if (!locations) return undefined;
     return locations.reduce(
-      (m, d) => (m.set(this.accessors.getLocationId(d), d), m),
+      (m: Map<string | number, L | ClusterNode>, d: L | ClusterNode) => (
+        m.set(this.accessors.getLocationId(d), d),
+        m
+      ),
       new Map(),
     );
   });
@@ -1102,7 +1108,8 @@ export default class FlowmapSelectors<
     this.getInCircleSizeGetter,
     this.getOutCircleSizeGetter,
     this.getFlowThicknessScale,
-    this.getAnimate,
+    this.getViewport,
+    this.getFlowLinesRenderingMode,
     this.getLocationLabelsEnabled,
     (
       locations,
@@ -1113,7 +1120,8 @@ export default class FlowmapSelectors<
       getInCircleSize,
       getOutCircleSize,
       flowThicknessScale,
-      animationEnabled,
+      viewport,
+      flowLinesRenderingMode,
       locationLabelsEnabled,
     ) => {
       return this._prepareLayersData(
@@ -1125,7 +1133,8 @@ export default class FlowmapSelectors<
         getInCircleSize,
         getOutCircleSize,
         flowThicknessScale,
-        animationEnabled,
+        viewport,
+        flowLinesRenderingMode,
         locationLabelsEnabled,
       );
     },
@@ -1134,13 +1143,16 @@ export default class FlowmapSelectors<
   prepareLayersData(state: FlowmapState, props: FlowmapData<L, F>): LayersData {
     const locations = this.getLocationsForFlowmapLayer(state, props) || [];
     const flows = this.getFlowsForFlowmapLayer(state, props) || [];
-    const flowmapColors = this.getFlowmapColorsRGBA(state, props);
+    const flowmapColors = (
+      this.getFlowmapColorsRGBA as Selector<L, F, DiffColorsRGBA | ColorsRGBA>
+    )(state, props);
     const locationsById = this.getLocationsForFlowmapLayerById(state, props);
     const locationIdsInViewport = this.getLocationIdsInViewport(state, props);
     const getInCircleSize = this.getInCircleSizeGetter(state, props);
     const getOutCircleSize = this.getOutCircleSizeGetter(state, props);
     const flowThicknessScale = this.getFlowThicknessScale(state, props);
     const locationLabelsEnabled = this.getLocationLabelsEnabled(state, props);
+    const viewport = this.getViewport(state, props);
     return this._prepareLayersData(
       locations,
       flows,
@@ -1150,7 +1162,8 @@ export default class FlowmapSelectors<
       getInCircleSize,
       getOutCircleSize,
       flowThicknessScale,
-      state.settings.animationEnabled,
+      viewport,
+      state.settings.flowLinesRenderingMode,
       locationLabelsEnabled,
     );
   }
@@ -1164,7 +1177,8 @@ export default class FlowmapSelectors<
     getInCircleSize: (locationId: string | number) => number,
     getOutCircleSize: (locationId: string | number) => number,
     flowThicknessScale: ScaleLinear<number, number, never> | undefined,
-    animationEnabled: boolean,
+    viewport: ViewportProps,
+    flowLinesRenderingMode: FlowLinesRenderingMode,
     locationLabelsEnabled: boolean,
   ): LayersData {
     if (!locations) locations = [];
@@ -1186,15 +1200,16 @@ export default class FlowmapSelectors<
     const flowColorScale = getFlowColorScale(
       flowmapColors,
       flowMagnitudeExtent,
-      false,
+      flowLinesRenderingMode === 'animated-straight',
     );
 
     // Using a generator here helps to avoid creating intermediary arrays
-    const circlePositions = Float32Array.from(
+    const circlePositions = Float64Array.from(
       (function* () {
         for (const location of locations) {
           yield getLocationLon(location);
           yield getLocationLat(location);
+          yield 0;
         }
       })(),
     );
@@ -1229,21 +1244,23 @@ export default class FlowmapSelectors<
       })(),
     );
 
-    const sourcePositions = Float32Array.from(
+    const sourcePositions = Float64Array.from(
       (function* () {
         for (const flow of flows) {
           const loc = locationsById?.get(getFlowOriginId(flow));
           yield loc ? getLocationLon(loc) : 0;
           yield loc ? getLocationLat(loc) : 0;
+          yield 0;
         }
       })(),
     );
-    const targetPositions = Float32Array.from(
+    const targetPositions = Float64Array.from(
       (function* () {
         for (const flow of flows) {
           const loc = locationsById?.get(getFlowDestId(flow));
           yield loc ? getLocationLon(loc) : 0;
           yield loc ? getLocationLat(loc) : 0;
+          yield 0;
         }
       })(),
     );
@@ -1274,22 +1291,36 @@ export default class FlowmapSelectors<
       })(),
     );
 
-    const staggeringValues = animationEnabled
-      ? Float32Array.from(
-          (function* () {
-            for (const f of flows) {
-              // @ts-ignore
-              yield new alea(`${getFlowOriginId(f)}-${getFlowDestId(f)}`)();
-            }
-          })(),
-        )
-      : undefined;
+    const staggeringValues =
+      flowLinesRenderingMode === 'animated-straight'
+        ? Float32Array.from(
+            (function* () {
+              for (const f of flows) {
+                // @ts-ignore
+                yield new alea(`${getFlowOriginId(f)}-${getFlowDestId(f)}`)();
+              }
+            })(),
+          )
+        : undefined;
+
+    const curveOffsets =
+      flowLinesRenderingMode === 'curved'
+        ? calculateCurveOffsets(
+            flows,
+            viewport,
+            locationsById,
+            getFlowOriginId,
+            getFlowDestId,
+            getLocationLon,
+            getLocationLat,
+          )
+        : undefined;
 
     return {
       circleAttributes: {
         length: locations.length,
         attributes: {
-          getPosition: {value: circlePositions, size: 2},
+          getPosition: {value: circlePositions, size: 3},
           getColor: {value: circleColors, size: 4},
           getInRadius: {value: inCircleRadii, size: 1},
           getOutRadius: {value: outCircleRadii, size: 1},
@@ -1298,14 +1329,17 @@ export default class FlowmapSelectors<
       lineAttributes: {
         length: flows.length,
         attributes: {
-          getSourcePosition: {value: sourcePositions, size: 2},
-          getTargetPosition: {value: targetPositions, size: 2},
+          getSourcePosition: {value: sourcePositions, size: 3},
+          getTargetPosition: {value: targetPositions, size: 3},
           getThickness: {value: thicknesses, size: 1},
           getColor: {value: flowLineColors, size: 4},
           getEndpointOffsets: {value: endpointOffsets, size: 2},
           ...(staggeringValues
             ? {getStaggering: {value: staggeringValues, size: 1}}
             : {}),
+          ...(curveOffsets
+            ? {getCurveOffset: {value: curveOffsets, size: 1}}
+            : {}),
         },
       },
       ...(locationLabelsEnabled
@@ -1488,7 +1522,8 @@ export function getLocationCoordsByIndex(
   index: number,
 ): [number, number] {
   const {getPosition} = circleAttributes.attributes;
-  return [getPosition.value[index * 2], getPosition.value[index * 2 + 1]];
+  const offset = index * getPosition.size;
+  return [getPosition.value[offset], getPosition.value[offset + 1]];
 }
 
 export function getFlowLineAttributesByIndex(
@@ -1497,6 +1532,7 @@ export function getFlowLineAttributesByIndex(
 ): FlowLinesLayerAttributes {
   const {
     getColor,
+    getCurveOffset,
     getEndpointOffsets,
     getSourcePosition,
     getTargetPosition,
@@ -1515,12 +1551,18 @@ export function getFlowLineAttributesByIndex(
         size: 2,
       },
       getSourcePosition: {
-        value: getSourcePosition.value.subarray(index * 2, (index + 1) * 2),
-        size: 2,
+        value: getSourcePosition.value.subarray(
+          index * getSourcePosition.size,
+          (index + 1) * getSourcePosition.size,
+        ),
+        size: getSourcePosition.size,
       },
       getTargetPosition: {
-        value: getTargetPosition.value.subarray(index * 2, (index + 1) * 2),
-        size: 2,
+        value: getTargetPosition.value.subarray(
+          index * getTargetPosition.size,
+          (index + 1) * getTargetPosition.size,
+        ),
+        size: getTargetPosition.size,
       },
       getThickness: {
         value: getThickness.value.subarray(index, index + 1),
@@ -1534,6 +1576,122 @@ export function getFlowLineAttributesByIndex(
             },
           }
         : undefined),
+      ...(getCurveOffset
+        ? {
+            getCurveOffset: {
+              value: getCurveOffset.value.subarray(index, index + 1),
+              size: 1,
+            },
+          }
+        : undefined),
     },
   };
 }
+
+type FlowLineScreenGeometry = {
+  index: number;
+  originId: string | number;
+  destId: string | number;
+  sx: number;
+  sy: number;
+  tx: number;
+  ty: number;
+  chordLengthPx: number;
+};
+
+function calculateCurveOffsets<L, F>(
+  flows: (F | AggregateFlow)[],
+  viewport: ViewportProps,
+  locationsById: Map<string | number, L | ClusterNode> | undefined,
+  getFlowOriginId: (flow: F | AggregateFlow) => string | number,
+  getFlowDestId: (flow: F | AggregateFlow) => string | number,
+  getLocationLon: (location: L | ClusterNode) => number,
+  getLocationLat: (location: L | ClusterNode) => number,
+): Float32Array {
+  const curveOffsets = new Float32Array(flows.length);
+  const corridorBuckets = new Map<string, FlowLineScreenGeometry[]>();
+  const worldScale = 512 * Math.pow(2, viewport.zoom ?? 0);
+
+  flows.forEach((flow, index) => {
+    const originId = getFlowOriginId(flow);
+    const destId = getFlowDestId(flow);
+    const origin = locationsById?.get(originId);
+    const dest = locationsById?.get(destId);
+    if (!origin || !dest) {
+      return;
+    }
+
+    const sourceLon = getLocationLon(origin);
+    const sourceLat = getLocationLat(origin);
+    const targetLon = getLocationLon(dest);
+    const targetLat = getLocationLat(dest);
+    const sx = lngX(sourceLon) * worldScale;
+    const sy = latY(sourceLat) * worldScale;
+    const tx = lngX(targetLon) * worldScale;
+    const ty = latY(targetLat) * worldScale;
+
+    let corridorSourceX = sx;
+    let corridorSourceY = sy;
+    let corridorTargetX = tx;
+    let corridorTargetY = ty;
+    if (
+      corridorSourceX > corridorTargetX ||
+      (corridorSourceX === corridorTargetX && corridorSourceY > corridorTargetY)
+    ) {
+      [corridorSourceX, corridorTargetX] = [corridorTargetX, corridorSourceX];
+      [corridorSourceY, corridorTargetY] = [corridorTargetY, corridorSourceY];
+    }
+
+    const dx = corridorTargetX - corridorSourceX;
+    const dy = corridorTargetY - corridorSourceY;
+    const chordLengthPx = Math.hypot(dx, dy);
+    if (!isFinite(chordLengthPx) || chordLengthPx < 1) {
+      return;
+    }
+
+    const angle = ((Math.atan2(dy, dx) % Math.PI) + Math.PI) % Math.PI;
+    const signedDistance =
+      (corridorSourceX * corridorTargetY - corridorSourceY * corridorTargetX) /
+      chordLengthPx;
+    const key = [
+      Math.round(angle / ((6 * Math.PI) / 180)),
+      Math.round(signedDistance / 18),
+      Math.round(chordLengthPx / 24),
+    ].join(':');
+
+    const bucket = corridorBuckets.get(key) ?? [];
+    bucket.push({index, originId, destId, sx, sy, tx, ty, chordLengthPx});
+    corridorBuckets.set(key, bucket);
+  });
+
+  corridorBuckets.forEach((bucket) => {
+    bucket
+      .sort((a, b) => {
+        const originCompare = compareIds(a.originId, b.originId);
+        if (originCompare !== 0) return originCompare;
+        const destCompare = compareIds(a.destId, b.destId);
+        if (destCompare !== 0) return destCompare;
+        return a.index - b.index;
+      })
+      .forEach((entry, bucketIndex) => {
+        const maxOffsetPx = Math.min(72, entry.chordLengthPx * 0.35);
+        curveOffsets[entry.index] = Math.min(
+          maxOffsetPx,
+          (bucketIndex + 1) * 18,
+        );
+      });
+  });
+
+  return curveOffsets;
+}
+
+function compareIds(a: string | number, b: string | number): number {
+  if (typeof a === 'number' && typeof b === 'number') {
+    return a - b;
+  }
+  const aString = String(a);
+  const bString = String(b);
+  if (aString < bString) return -1;
+  if (aString > bString) return 1;
+  return 0;
+}

package/src/FlowmapState.ts

@@ -4,7 +4,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {LocationFilterMode, ViewportProps} from './types';
+import {
+  FlowLinesRenderingMode,
+  LocationFilterMode,
+  ViewportProps,
+} from './types';
 
 export type FlowEndpointsInViewportMode = 'any' | 'both';
 
@@ -15,7 +19,7 @@ export interface FilterState {
 }
 
 export interface SettingsState {
-  animationEnabled: boolean;
+  flowLinesRenderingMode: FlowLinesRenderingMode;
   fadeEnabled: boolean;
   fadeOpacityEnabled: boolean;
   locationsEnabled: boolean;
@@ -28,7 +32,7 @@ export interface SettingsState {
   darkMode: boolean;
   fadeAmount: number;
   colorScheme: string | string[] | undefined;
-  highlightColor: string;
+  highlightColor: string | number[];
   maxTopFlowsDisplayNum: number;
   flowEndpointsInViewportMode: FlowEndpointsInViewportMode;
 }

package/src/colors.ts

@@ -35,6 +35,7 @@ import {scalePow, scaleSequential, scaleSequentialPow} from 'd3-scale';
 import {interpolateBasis, interpolateRgbBasis} from 'd3-interpolate';
 import {color as d3color, hcl, rgb as colorRgb} from 'd3-color';
 import {SettingsState} from './FlowmapState';
+import {FlowLinesRenderingMode} from './types';
 
 const DEFAULT_OUTLINE_COLOR = '#fff';
 const DEFAULT_DIMMED_OPACITY = 0.4;
@@ -347,10 +348,16 @@ export function getFlowmapColors(settings: SettingsState): Colors | DiffColors {
     settings.fadeEnabled,
     settings.fadeOpacityEnabled,
     settings.fadeAmount,
-    settings.animationEnabled,
+    isAnimatedFlowLinesMode(settings.flowLinesRenderingMode),
   );
 }
 
+function isAnimatedFlowLinesMode(
+  flowLinesRenderingMode: FlowLinesRenderingMode,
+): boolean {
+  return flowLinesRenderingMode === 'animated-straight';
+}
+
 export function getColors(
   diffMode: boolean,
   colorScheme: string | string[] | undefined,

package/src/selector-functions.ts

@@ -30,6 +30,14 @@ export const getViewportBoundingBox = (
   return [bounds[0][0], bounds[0][1], bounds[1][0], bounds[1][1]];
 };
 
+export const makeViewportProjector = (viewport: ViewportProps) => {
+  const mercatorViewport = new WebMercatorViewport(viewport);
+  return (coords: [number, number]): [number, number] => {
+    const [x, y] = mercatorViewport.project(coords);
+    return [x, y];
+  };
+};
+
 export const getFlowThicknessScale = (
   magnitudeExtent: [number, number] | undefined,
 ) => {

package/src/types.ts

@@ -21,6 +21,10 @@ export interface ViewState {
 
 export type FlowAccessor<F, T> = (flow: F) => T; // objectInfo?: AccessorObjectInfo,
 export type LocationAccessor<L, T> = (location: L) => T;
+export type FlowLinesRenderingMode =
+  | 'straight'
+  | 'animated-straight'
+  | 'curved';
 
 export interface FlowAccessors<F> {
   getFlowOriginId: FlowAccessor<F, string | number>;
@@ -144,7 +148,7 @@ export enum LocationFilterMode {
 export interface FlowCirclesLayerAttributes {
   length: number;
   attributes: {
-    getPosition: LayersDataAttrValues<Float32Array>;
+    getPosition: LayersDataAttrValues<Float64Array>;
     getColor: LayersDataAttrValues<Uint8Array>;
     getInRadius: LayersDataAttrValues<Float32Array>;
     getOutRadius: LayersDataAttrValues<Float32Array>;
@@ -154,12 +158,13 @@ export interface FlowCirclesLayerAttributes {
 export interface FlowLinesLayerAttributes {
   length: number;
   attributes: {
-    getSourcePosition: LayersDataAttrValues<Float32Array>;
-    getTargetPosition: LayersDataAttrValues<Float32Array>;
+    getSourcePosition: LayersDataAttrValues<Float64Array>;
+    getTargetPosition: LayersDataAttrValues<Float64Array>;
     getThickness: LayersDataAttrValues<Float32Array>;
     getColor: LayersDataAttrValues<Uint8Array>;
     getEndpointOffsets: LayersDataAttrValues<Float32Array>;
     getStaggering?: LayersDataAttrValues<Float32Array>;
+    getCurveOffset?: LayersDataAttrValues<Float32Array>;
   };
 }
 

package/src/util.ts

@@ -4,9 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import {createSelectorCreator, defaultMemoize} from 'reselect';
+import {createSelectorCreator, lruMemoize} from 'reselect';
 
-export const createDebugSelector = createSelectorCreator(defaultMemoize, {
+export const createDebugSelector = createSelectorCreator(lruMemoize, {
   equalityCheck: (previousVal: any, currentVal: any) => {
     const rv = currentVal === previousVal;
     if (!rv) {

package/tsconfig.json

@@ -2,7 +2,8 @@
   "extends": "../../tsconfig.common.json",
   "compilerOptions": {
     "noEmit": false,
-    "outDir": "dist"
+    "outDir": "dist",
+    "rootDir": "src"
   },
   "include": [
     "src/**/*.ts",