@flowmap.gl/data 8.0.0-alpha.0 → 8.0.0-alpha.4

package/src/FlowMapSelectors.ts

@@ -19,7 +19,7 @@
 import {bounds} from '@mapbox/geo-viewport';
 import {ascending, descending, extent, min} from 'd3-array';
 import {nest} from 'd3-collection';
-import {scaleLinear, scaleSqrt} from 'd3-scale';
+import {ScaleLinear, scaleLinear, scaleSqrt} from 'd3-scale';
 import KDBush from 'kdbush';
 import {
   createSelector,
@@ -36,6 +36,8 @@ import {
   makeLocationWeightGetter,
 } from './cluster/ClusterIndex';
 import getColors, {
+  ColorsRGBA,
+  DiffColorsRGBA,
   getColorsRGBA,
   getDiffColorsRGBA,
   getFlowColorScale,
@@ -66,7 +68,6 @@ import {
   LocationFilterMode,
   LocationTotals,
 } from './types';
-import {flatMap} from './util';
 
 const MAX_CLUSTER_ZOOM_LEVEL = 20;
 const NUMBER_OF_FLOWS_TO_DISPLAY = 5000;
@@ -124,6 +125,11 @@ export default class FlowMapSelectors<L, F> {
     props: FlowMapData<L, F>,
   ) => state.settingsState.fadeEnabled;
 
+  getFadeOpacityEnabled: Selector<L, F, boolean> = (
+    state: FlowMapState,
+    props: FlowMapData<L, F>,
+  ) => state.settingsState.fadeOpacityEnabled;
+
   getFadeAmount: Selector<L, F, number> = (
     state: FlowMapState,
     props: FlowMapData<L, F>,
@@ -485,6 +491,7 @@ export default class FlowMapSelectors<L, F> {
     this.getColorSchemeKey,
     this.getDarkMode,
     this.getFadeEnabled,
+    this.getFadeOpacityEnabled,
     this.getFadeAmount,
     this.getAnimate,
     getColors,
@@ -560,7 +567,7 @@ export default class FlowMapSelectors<L, F> {
     },
   );
 
-  _getFlowMagnitudeExtent: Selector<L, F, [number, number] | undefined> =
+  getFlowMagnitudeExtent: Selector<L, F, [number, number] | undefined> =
     createSelector(
       this.getSortedAggregatedFilteredFlows,
       this.getSelectedLocationsSet,
@@ -775,10 +782,9 @@ export default class FlowMapSelectors<L, F> {
     );
 
   getLocationIdsInViewport: Selector<L, F, Set<string> | undefined> =
-    // @ts-ignore
-    createSelectorCreator<Set<string> | undefined>(
-      // @ts-ignore
+    createSelectorCreator(
       defaultMemoize,
+      // @ts-ignore
       (
         s1: Set<string> | undefined,
         s2: Set<string> | undefined,
@@ -899,10 +905,10 @@ export default class FlowMapSelectors<L, F> {
       },
     );
 
-  getFlowMagnitudeExtent(
+  _getFlowMagnitudeExtent = (
     state: FlowMapState,
     props: FlowMapData<L, F>,
-  ): [number, number] | undefined {
+  ): [number, number] | undefined => {
     if (state.settingsState.adaptiveScalesEnabled) {
       const flows = this.getFlowsForFlowMapLayer(state, props);
       if (flows) {
@@ -912,9 +918,9 @@ export default class FlowMapSelectors<L, F> {
         return undefined;
       }
     } else {
-      return this._getFlowMagnitudeExtent(state, props);
+      return this.getFlowMagnitudeExtent(state, props);
     }
-  }
+  };
 
   getLocationMaxAbsTotalGetter = createSelector(
     this.getLocationTotals,
@@ -930,41 +936,46 @@ export default class FlowMapSelectors<L, F> {
     },
   );
 
-  getFlowThicknessScale = (state: FlowMapState, props: FlowMapData<L, F>) => {
-    const magnitudeExtent = this.getFlowMagnitudeExtent(state, props);
-    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)),
-        ),
-      ]);
-  };
-
-  getCircleSizeScale = (state: FlowMapState, props: FlowMapData<L, F>) => {
-    const maxLocationCircleSize = this.getMaxLocationCircleSize(state, props);
-    const {locationTotalsEnabled} = state.settingsState;
-    if (!locationTotalsEnabled) {
-      return () => maxLocationCircleSize;
-    }
+  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)),
+          ),
+        ]);
+    },
+  );
 
-    const locationTotalsExtent = this.getLocationTotalsExtent(state, props);
-    if (!locationTotalsExtent) return undefined;
-    return scaleSqrt()
-      .range([0, maxLocationCircleSize])
-      .domain([
-        0,
-        // should support diff mode too
-        Math.max.apply(
-          null,
-          locationTotalsExtent.map((x: number | undefined) => Math.abs(x || 0)),
-        ),
-      ]);
-  };
+  getCircleSizeScale = createSelector(
+    this.getMaxLocationCircleSize,
+    this.getLocationTotalsEnabled,
+    this.getLocationTotalsExtent,
+    (maxLocationCircleSize, locationTotalsEnabled, locationTotalsExtent) => {
+      if (!locationTotalsEnabled) {
+        return () => maxLocationCircleSize;
+      }
+      if (!locationTotalsExtent) return undefined;
+      return scaleSqrt()
+        .range([0, maxLocationCircleSize])
+        .domain([
+          0,
+          // should support diff mode too
+          Math.max.apply(
+            null,
+            locationTotalsExtent.map((x: number | undefined) =>
+              Math.abs(x || 0),
+            ),
+          ),
+        ]);
+    },
+  );
 
   getInCircleSizeGetter = createSelector(
     this.getCircleSizeScale,
@@ -1063,9 +1074,76 @@ export default class FlowMapSelectors<L, F> {
     );
   });
 
+  getLayersData: Selector<L, F, LayersData> = createSelector(
+    this.getLocationsForFlowMapLayer,
+    this.getFlowsForFlowMapLayer,
+    this.getFlowMapColorsRGBA,
+    this.getLocationsForFlowMapLayerById,
+    this.getLocationIdsInViewport,
+    this.getInCircleSizeGetter,
+    this.getOutCircleSizeGetter,
+    this.getFlowThicknessScale,
+    this.getAnimate,
+    (
+      locations,
+      flows,
+      flowMapColors,
+      locationsById,
+      locationIdsInViewport,
+      getInCircleSize,
+      getOutCircleSize,
+      flowThicknessScale,
+      animationEnabled,
+    ) => {
+      return this._prepareLayersData(
+        locations,
+        flows,
+        flowMapColors,
+        locationsById,
+        locationIdsInViewport,
+        getInCircleSize,
+        getOutCircleSize,
+        flowThicknessScale,
+        animationEnabled,
+      );
+    },
+  );
+
   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 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);
+    return this._prepareLayersData(
+      locations,
+      flows,
+      flowMapColors,
+      locationsById,
+      locationIdsInViewport,
+      getInCircleSize,
+      getOutCircleSize,
+      flowThicknessScale,
+      state.settingsState.animationEnabled,
+    );
+  }
+
+  _prepareLayersData(
+    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,
+    flowThicknessScale: ScaleLinear<number, number, never> | undefined,
+    animationEnabled: boolean,
+  ): LayersData {
+    if (!locations) locations = [];
+    if (!flows) flows = [];
     const {
       getFlowOriginId,
       getFlowDestId,
@@ -1074,21 +1152,11 @@ export default class FlowMapSelectors<L, F> {
       getLocationCentroid,
     } = this.accessors;
 
-    const flowMapColors = this.getFlowMapColorsRGBA(state, props);
-    const {settingsState} = state;
-
-    const locationsById = this.getLocationsForFlowMapLayerById(state, props);
     const getCentroid = (id: string) => {
       const loc = locationsById?.get(id);
       return loc ? getLocationCentroid(loc) : [0, 0];
     };
 
-    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 flowMagnitudeExtent = extent(flows, (f) => getFlowMagnitude(f)) as [
       number,
       number,
@@ -1099,8 +1167,14 @@ export default class FlowMapSelectors<L, F> {
       false,
     );
 
-    const circlePositions = new Float32Array(
-      flatMap(locations, getLocationCentroid),
+    // Using yield here helps to avoid creating intermediary arrays
+    const circlePositions = Float32Array.from(
+      (function* () {
+        for (const location of locations) {
+          // yield* effectively does same as flatMap here
+          yield* getLocationCentroid(location);
+        }
+      })(),
     );
 
     // TODO: diff mode
@@ -1108,53 +1182,80 @@ export default class FlowMapSelectors<L, F> {
       ? flowMapColors.positive.locationCircles.inner
       : flowMapColors.locationCircles.inner;
 
-    const circleColors = new Uint8Array(flatMap(locations, (d) => circleColor));
-    const inCircleRadii = new Float32Array(
-      locations.map((loc) => {
-        const id = getLocationId(loc);
-        return locationIdsInViewport?.has(id) ? getInCircleSize(id) : 1.0;
-      }),
+    const circleColors = Uint8Array.from(
+      (function* () {
+        for (const location of locations) {
+          yield* circleColor;
+        }
+      })(),
+    );
+
+    const inCircleRadii = Float32Array.from(
+      (function* () {
+        for (const location of locations) {
+          const id = getLocationId(location);
+          yield locationIdsInViewport?.has(id) ? getInCircleSize(id) : 1.0;
+        }
+      })(),
     );
-    const outCircleRadii = new Float32Array(
-      locations.map((loc) => {
-        const id = getLocationId(loc);
-        return locationIdsInViewport?.has(id) ? getOutCircleSize(id) : 1.0;
-      }),
+    const outCircleRadii = Float32Array.from(
+      (function* () {
+        for (const location of locations) {
+          const id = getLocationId(location);
+          yield locationIdsInViewport?.has(id) ? getOutCircleSize(id) : 1.0;
+        }
+      })(),
     );
 
-    const sourcePositions = new Float32Array(
-      flatMap(flows, (d: F | AggregateFlow) => getCentroid(getFlowOriginId(d))),
+    const sourcePositions = Float32Array.from(
+      (function* () {
+        for (const flow of flows) {
+          yield* getCentroid(getFlowOriginId(flow));
+        }
+      })(),
     );
-    const targetPositions = new Float32Array(
-      flatMap(flows, (d: F | AggregateFlow) => getCentroid(getFlowDestId(d))),
+    const targetPositions = Float32Array.from(
+      (function* () {
+        for (const flow of flows) {
+          yield* getCentroid(getFlowDestId(flow));
+        }
+      })(),
     );
-    const thicknesses = new Float32Array(
-      flows.map((d: F | AggregateFlow) =>
-        flowThicknessScale ? flowThicknessScale(getFlowMagnitude(d)) || 0 : 0,
-      ),
+    const thicknesses = Float32Array.from(
+      (function* () {
+        for (const flow of flows) {
+          yield flowThicknessScale
+            ? flowThicknessScale(getFlowMagnitude(flow)) || 0
+            : 0;
+        }
+      })(),
     );
-    const endpointOffsets = new Float32Array(
-      flatMap(flows, (d: F | AggregateFlow) => {
-        const originId = getFlowOriginId(d);
-        const destId = getFlowDestId(d);
-        return [
-          Math.max(getInCircleSize(originId), getOutCircleSize(originId)),
-          Math.max(getInCircleSize(destId), getOutCircleSize(destId)),
-        ];
-      }),
+    const endpointOffsets = Float32Array.from(
+      (function* () {
+        for (const flow of flows) {
+          const originId = getFlowOriginId(flow);
+          const destId = getFlowDestId(flow);
+          yield Math.max(getInCircleSize(originId), getOutCircleSize(originId));
+          yield Math.max(getInCircleSize(destId), getOutCircleSize(destId));
+        }
+      })(),
     );
-    const flowLineColors = new Uint8Array(
-      flatMap(flows, (f: F | AggregateFlow) =>
-        flowColorScale(getFlowMagnitude(f)),
-      ),
+    const flowLineColors = Uint8Array.from(
+      (function* () {
+        for (const flow of flows) {
+          yield* flowColorScale(getFlowMagnitude(flow));
+        }
+      })(),
     );
 
-    const staggeringValues = settingsState.animationEnabled
-      ? new Float32Array(
-          flows.map((f: F | AggregateFlow) =>
-            // @ts-ignore
-            new alea(`${getFlowOriginId(f)}-${getFlowDestId(f)}`)(),
-          ),
+    const staggeringValues = animationEnabled
+      ? Float32Array.from(
+          (function* () {
+            for (const flow of flows) {
+              // @ts-ignore
+              yield new alea(`${getFlowOriginId(f)}-${getFlowDestId(f)}`)();
+            }
+          })(),
         )
       : undefined;
 

package/src/FlowMapState.ts

@@ -9,6 +9,7 @@ export interface FilterState {
 export interface SettingsState {
   animationEnabled: boolean;
   fadeEnabled: boolean;
+  fadeOpacityEnabled: boolean;
   locationTotalsEnabled: boolean;
   adaptiveScalesEnabled: boolean;
   clusteringEnabled: boolean;

package/src/colors.ts

@@ -26,8 +26,8 @@ import {
 } from 'd3-scale-chromatic';
 import {range} from 'd3-array';
 import {scalePow, scaleSequential, scaleSequentialPow} from 'd3-scale';
-import {interpolateRgbBasis} from 'd3-interpolate';
-import {color as d3color, hcl} from 'd3-color';
+import {interpolateBasis, interpolateRgbBasis} from 'd3-interpolate';
+import {color as d3color, hcl, rgb as colorRgb} from 'd3-color';
 import {SettingsState} from './FlowMapState';
 
 const DEFAULT_OUTLINE_COLOR = '#fff';
@@ -338,6 +338,7 @@ export function getFlowMapColors(
     settingsState.colorScheme,
     settingsState.darkMode,
     settingsState.fadeEnabled,
+    settingsState.fadeOpacityEnabled,
     settingsState.fadeAmount,
     settingsState.animationEnabled,
   );
@@ -348,6 +349,7 @@ export function getColors(
   schemeKey: string | undefined,
   darkMode: boolean,
   fadeEnabled: boolean,
+  fadeOpacityEnabled: boolean,
   fadeAmount: number,
   animate: boolean,
 ): Colors | DiffColors {
@@ -390,13 +392,14 @@ export function getColors(
       scheme = indices.map(
         (c, i) => {
           const color = colorScale(i);
-          const alpha = amount(i);
-          if (color == null || alpha == null) return '#000';
+          const a = amount(i);
+          if (color == null || a == null) return '#000';
           const col = hcl(color);
-          col.l = darkMode
-            ? col.l - col.l * alpha
-            : col.l + (100 - col.l) * alpha;
-          col.c = col.c - col.c * (alpha / 4);
+          col.l = darkMode ? col.l - col.l * a : col.l + (100 - col.l) * a;
+          col.c = col.c - col.c * (a / 4);
+          if (fadeOpacityEnabled) {
+            col.opacity = col.opacity * (1.0 - a);
+          }
           return col.toString();
         },
         // interpolateRgbBasis([colorScale(i), darkMode ? '#000' : '#fff'])(amount(i))
@@ -417,15 +420,46 @@ export function getColors(
   };
 }
 
+function interpolateRgbaBasis(colors: string[]) {
+  const spline = interpolateBasis;
+  const n = colors.length;
+  let r: any = new Array(n),
+    g: any = new Array(n),
+    b: any = new Array(n),
+    opacity: any = new Array(n),
+    i,
+    color: any;
+  for (i = 0; i < n; ++i) {
+    color = colorRgb(colors[i]);
+    r[i] = color.r || 0;
+    g[i] = color.g || 0;
+    b[i] = color.b || 0;
+    opacity[i] = color.opacity || 0;
+  }
+  r = spline(r);
+  g = spline(g);
+  b = spline(b);
+  opacity = spline(opacity);
+  // color.opacity = 1;
+  return function (t: number) {
+    color.r = r(t);
+    color.g = g(t);
+    color.b = b(t);
+    color.opacity = opacity(t);
+    return color + '';
+  };
+}
+
 export function createFlowColorScale(
   domain: [number, number],
   scheme: string[],
   animate: boolean | undefined,
 ): ColorScale {
-  const scale = scaleSequentialPow(interpolateRgbBasis(scheme))
+  const scale = scaleSequentialPow(interpolateRgbaBasis(scheme))
     // @ts-ignore
     .exponent(animate ? 1 / 2 : 1 / 3)
     .domain(domain);
+
   return (value: number) => colorAsRgba(scale(value));
 }
 

package/src/provider/LocalFlowMapDataProvider.ts

@@ -66,10 +66,7 @@ export default class LocalFlowMapDataProvider<L, F>
     if (!this.flowMapState || !this.flowMapData) {
       return undefined;
     }
-    return this.selectors.prepareLayersData(
-      this.flowMapState,
-      this.flowMapData,
-    );
+    return this.selectors.getLayersData(this.flowMapState, this.flowMapData);
   }
 
   async getLocationById(id: string): Promise<L | Cluster | undefined> {

package/src/util.ts

@@ -1,3 +1,11 @@
-export function flatMap<S, T>(xs: S[], f: (item: S) => T | T[]): T[] {
-  return xs.reduce((acc: T[], x: S) => acc.concat(f(x)), []);
-}
+import {createSelectorCreator, defaultMemoize} from 'reselect';
+
+export const createDebugSelector = createSelectorCreator(defaultMemoize, {
+  equalityCheck: (previousVal: any, currentVal: any) => {
+    const rv = currentVal === previousVal;
+    if (!rv) {
+      console.log('Selector param value changed', currentVal);
+    }
+    return rv;
+  },
+});