@flowmap.gl/data 8.0.0-alpha.3 → 8.0.0-alpha.7

package/src/{FlowMapSelectors.ts → FlowmapSelectors.ts}

@@ -16,7 +16,7 @@
  *
  */
 
-import {bounds} from '@mapbox/geo-viewport';
+import {WebMercatorViewport} from '@math.gl/web-mercator';
 import {ascending, descending, extent, min} from 'd3-array';
 import {nest} from 'd3-collection';
 import {ScaleLinear, scaleLinear, scaleSqrt} from 'd3-scale';
@@ -44,8 +44,8 @@ import getColors, {
   isDiffColors,
   isDiffColorsRGBA,
 } from './colors';
-import FlowMapAggregateAccessors from './FlowMapAggregateAccessors';
-import {FlowMapState} from './FlowMapState';
+import FlowmapAggregateAccessors from './FlowmapAggregateAccessors';
+import {FlowmapState} from './FlowmapState';
 import {
   getTimeGranularityByKey,
   getTimeGranularityByOrder,
@@ -60,85 +60,85 @@ import {
   FlowAccessors,
   FlowCirclesLayerAttributes,
   FlowLinesLayerAttributes,
-  FlowMapData,
-  FlowMapDataAccessors,
+  FlowmapData,
+  FlowmapDataAccessors,
   isCluster,
   isLocationClusterNode,
   LayersData,
   LocationFilterMode,
   LocationTotals,
 } from './types';
-import {flatMap} from './util';
 
 const MAX_CLUSTER_ZOOM_LEVEL = 20;
-const NUMBER_OF_FLOWS_TO_DISPLAY = 5000;
 type KDBushTree = any;
 
 export type Selector<L, F, T> = ParametricSelector<
-  FlowMapState,
-  FlowMapData<L, F>,
+  FlowmapState,
+  FlowmapData<L, F>,
   T
 >;
 
-export default class FlowMapSelectors<L, F> {
-  accessors: FlowMapAggregateAccessors<L, F>;
+export default class FlowmapSelectors<L, F> {
+  accessors: FlowmapAggregateAccessors<L, F>;
 
-  constructor(accessors: FlowMapDataAccessors<L, F>) {
-    this.accessors = new FlowMapAggregateAccessors(accessors);
+  constructor(accessors: FlowmapDataAccessors<L, F>) {
+    this.accessors = new FlowmapAggregateAccessors(accessors);
     this.setAccessors(accessors);
   }
 
-  setAccessors(accessors: FlowMapDataAccessors<L, F>) {
-    this.accessors = new FlowMapAggregateAccessors(accessors);
+  setAccessors(accessors: FlowmapDataAccessors<L, F>) {
+    this.accessors = new FlowmapAggregateAccessors(accessors);
   }
 
-  getFetchedFlows = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getFetchedFlows = (state: FlowmapState, props: FlowmapData<L, F>) =>
     props.flows;
-  getFetchedLocations = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getFetchedLocations = (state: FlowmapState, props: FlowmapData<L, F>) =>
     props.locations;
-  getSelectedLocations = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getMaxTopFlowsDisplayNum = (state: FlowmapState, props: FlowmapData<L, F>) =>
+    state.settingsState.maxTopFlowsDisplayNum;
+  getSelectedLocations = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.filterState.selectedLocations;
-  getLocationFilterMode = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getLocationFilterMode = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.filterState.locationFilterMode;
-  getClusteringEnabled = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getClusteringEnabled = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.settingsState.clusteringEnabled;
-  getLocationTotalsEnabled = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getLocationTotalsEnabled = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.settingsState.locationTotalsEnabled;
-  getZoom = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getZoom = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.viewport.zoom;
-  getViewport = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getViewport = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.viewport;
-  getSelectedTimeRange = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getSelectedTimeRange = (state: FlowmapState, props: FlowmapData<L, F>) =>
     state.filterState.selectedTimeRange;
 
   getColorSchemeKey: Selector<L, F, string | undefined> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ) => state.settingsState.colorScheme;
 
   getDarkMode: Selector<L, F, boolean> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ) => state.settingsState.darkMode;
 
   getFadeEnabled: Selector<L, F, boolean> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ) => state.settingsState.fadeEnabled;
 
   getFadeOpacityEnabled: Selector<L, F, boolean> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ) => state.settingsState.fadeOpacityEnabled;
 
   getFadeAmount: Selector<L, F, number> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ) => state.settingsState.fadeAmount;
 
   getAnimate: Selector<L, F, boolean> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ) => state.settingsState.animationEnabled;
 
   getInvalidLocationIds: Selector<L, F, string[] | undefined> = createSelector(
@@ -309,11 +309,11 @@ export default class FlowMapSelectors<L, F> {
 
       const getLocationWeight = makeLocationWeightGetter(
         flows,
-        this.accessors.getFlowMapDataAccessors(),
+        this.accessors.getFlowmapDataAccessors(),
       );
       const clusterLevels = clusterLocations(
         locations,
-        this.accessors.getFlowMapDataAccessors(),
+        this.accessors.getFlowmapDataAccessors(),
         getLocationWeight,
         {
           maxZoom: MAX_CLUSTER_ZOOM_LEVEL,
@@ -321,7 +321,7 @@ export default class FlowMapSelectors<L, F> {
       );
       const clusterIndex = buildIndex<F>(clusterLevels);
       const {getLocationName, getLocationClusterName} =
-        this.accessors.getFlowMapDataAccessors();
+        this.accessors.getFlowmapDataAccessors();
 
       // Adding meaningful names
       const getName = (id: string) => {
@@ -416,7 +416,7 @@ export default class FlowMapSelectors<L, F> {
     },
   );
 
-  getClusterZoom = (state: FlowMapState, props: FlowMapData<L, F>) => {
+  getClusterZoom = (state: FlowmapState, props: FlowmapData<L, F>) => {
     const {settingsState} = state;
     if (!settingsState.clusteringEnabled) return undefined;
     if (settingsState.clusteringAuto || settingsState.clusteringLevel == null) {
@@ -487,7 +487,7 @@ export default class FlowMapSelectors<L, F> {
     },
   );
 
-  _getFlowMapColors = createSelector(
+  _getFlowmapColors = createSelector(
     this.getDiffMode,
     this.getColorSchemeKey,
     this.getDarkMode,
@@ -498,12 +498,12 @@ export default class FlowMapSelectors<L, F> {
     getColors,
   );
 
-  getFlowMapColorsRGBA = createSelector(
-    this._getFlowMapColors,
-    (flowMapColors) => {
-      return isDiffColors(flowMapColors)
-        ? getDiffColorsRGBA(flowMapColors)
-        : getColorsRGBA(flowMapColors);
+  getFlowmapColorsRGBA = createSelector(
+    this._getFlowmapColors,
+    (flowmapColors) => {
+      return isDiffColors(flowmapColors)
+        ? getDiffColorsRGBA(flowmapColors)
+        : getColorsRGBA(flowmapColors);
     },
   );
 
@@ -550,12 +550,12 @@ export default class FlowMapSelectors<L, F> {
           //   : flows,
           flows,
           clusterZoom,
-          this.accessors.getFlowMapDataAccessors(),
+          this.accessors.getFlowmapDataAccessors(),
         );
       } else {
         aggregated = aggregateFlows(
           flows,
-          this.accessors.getFlowMapDataAccessors(),
+          this.accessors.getFlowmapDataAccessors(),
         );
       }
       aggregated.sort((a, b) =>
@@ -676,12 +676,12 @@ export default class FlowMapSelectors<L, F> {
       this.getMaxLocationCircleSize,
       (viewport, maxLocationCircleSize) => {
         const pad = maxLocationCircleSize;
-        return bounds(
-          [viewport.longitude, viewport.latitude],
-          viewport.zoom,
-          [viewport.width + pad * 2, viewport.height + pad * 2],
-          512,
-        );
+        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]];
       },
     );
 
@@ -851,8 +851,8 @@ export default class FlowMapSelectors<L, F> {
   );
 
   getLocationTotalsExtent = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ): [number, number] | undefined => {
     if (state.settingsState.adaptiveScalesEnabled) {
       return this._getLocationTotalsForViewportExtent(state, props);
@@ -861,17 +861,19 @@ export default class FlowMapSelectors<L, F> {
     }
   };
 
-  getFlowsForFlowMapLayer: Selector<L, F, (F | AggregateFlow)[] | undefined> =
+  getFlowsForFlowmapLayer: Selector<L, F, (F | AggregateFlow)[] | undefined> =
     createSelector(
       this.getSortedAggregatedFilteredFlows,
       this.getLocationIdsInViewport,
       this.getSelectedLocationsSet,
       this.getLocationFilterMode,
+      this.getMaxTopFlowsDisplayNum,
       (
         flows,
         locationIdsInViewport,
         selectedLocationsSet,
         locationFilterMode,
+        maxTopFlowsDisplayNum,
       ) => {
         if (!flows || !locationIdsInViewport) return undefined;
         const picked: (F | AggregateFlow)[] = [];
@@ -898,7 +900,7 @@ export default class FlowMapSelectors<L, F> {
             }
           }
           // Only keep top
-          if (pickedCount > NUMBER_OF_FLOWS_TO_DISPLAY) break;
+          if (pickedCount > maxTopFlowsDisplayNum) break;
         }
         // assuming they are sorted in descending order,
         // we need ascending for rendering
@@ -907,11 +909,11 @@ export default class FlowMapSelectors<L, F> {
     );
 
   _getFlowMagnitudeExtent = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ): [number, number] | undefined => {
     if (state.settingsState.adaptiveScalesEnabled) {
-      const flows = this.getFlowsForFlowMapLayer(state, props);
+      const flows = this.getFlowsForFlowmapLayer(state, props);
       if (flows) {
         const rv = extent(flows, this.accessors.getFlowMagnitude);
         return rv[0] !== undefined && rv[1] !== undefined ? rv : undefined;
@@ -1033,7 +1035,7 @@ export default class FlowMapSelectors<L, F> {
       },
     );
 
-  getLocationsForFlowMapLayer: Selector<
+  getLocationsForFlowmapLayer: Selector<
     L,
     F,
     Array<L | ClusterNode> | undefined
@@ -1063,11 +1065,11 @@ export default class FlowMapSelectors<L, F> {
     },
   );
 
-  getLocationsForFlowMapLayerById: Selector<
+  getLocationsForFlowmapLayerById: Selector<
     L,
     F,
     Map<string, L | ClusterNode> | undefined
-  > = createSelector(this.getLocationsForFlowMapLayer, (locations) => {
+  > = createSelector(this.getLocationsForFlowmapLayer, (locations) => {
     if (!locations) return undefined;
     return locations.reduce(
       (m, d) => (m.set(this.accessors.getLocationId(d), d), m),
@@ -1076,10 +1078,10 @@ export default class FlowMapSelectors<L, F> {
   });
 
   getLayersData: Selector<L, F, LayersData> = createSelector(
-    this.getLocationsForFlowMapLayer,
-    this.getFlowsForFlowMapLayer,
-    this.getFlowMapColorsRGBA,
-    this.getLocationsForFlowMapLayerById,
+    this.getLocationsForFlowmapLayer,
+    this.getFlowsForFlowmapLayer,
+    this.getFlowmapColorsRGBA,
+    this.getLocationsForFlowmapLayerById,
     this.getLocationIdsInViewport,
     this.getInCircleSizeGetter,
     this.getOutCircleSizeGetter,
@@ -1088,7 +1090,7 @@ export default class FlowMapSelectors<L, F> {
     (
       locations,
       flows,
-      flowMapColors,
+      flowmapColors,
       locationsById,
       locationIdsInViewport,
       getInCircleSize,
@@ -1099,7 +1101,7 @@ export default class FlowMapSelectors<L, F> {
       return this._prepareLayersData(
         locations,
         flows,
-        flowMapColors,
+        flowmapColors,
         locationsById,
         locationIdsInViewport,
         getInCircleSize,
@@ -1110,11 +1112,11 @@ export default class FlowMapSelectors<L, F> {
     },
   );
 
-  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);
+  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);
@@ -1122,7 +1124,7 @@ export default class FlowMapSelectors<L, F> {
     return this._prepareLayersData(
       locations,
       flows,
-      flowMapColors,
+      flowmapColors,
       locationsById,
       locationIdsInViewport,
       getInCircleSize,
@@ -1135,7 +1137,7 @@ export default class FlowMapSelectors<L, F> {
   _prepareLayersData(
     locations: (L | ClusterNode)[] | undefined,
     flows: (F | AggregateFlow)[] | undefined,
-    flowMapColors: DiffColorsRGBA | ColorsRGBA,
+    flowmapColors: DiffColorsRGBA | ColorsRGBA,
     locationsById: Map<string, L | ClusterNode> | undefined,
     locationIdsInViewport: Set<string> | undefined,
     getInCircleSize: (locationId: string) => number,
@@ -1163,67 +1165,100 @@ export default class FlowMapSelectors<L, F> {
       number,
     ];
     const flowColorScale = getFlowColorScale(
-      flowMapColors,
+      flowmapColors,
       flowMagnitudeExtent,
       false,
     );
 
-    const circlePositions = new Float32Array(
-      flatMap(locations, getLocationCentroid),
+    // Using a generator here helps to avoid creating intermediary arrays
+    const circlePositions = Float32Array.from(
+      (function* () {
+        for (const location of locations) {
+          // yield* effectively works as flatMap here
+          yield* getLocationCentroid(location);
+        }
+      })(),
     );
 
     // TODO: diff mode
-    const circleColor = isDiffColorsRGBA(flowMapColors)
-      ? 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 circleColor = isDiffColorsRGBA(flowmapColors)
+      ? flowmapColors.positive.locationCircles.inner
+      : flowmapColors.locationCircles.inner;
+
+    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 = animationEnabled
-      ? new Float32Array(
-          flows.map((f: F | AggregateFlow) =>
-            // @ts-ignore
-            new alea(`${getFlowOriginId(f)}-${getFlowDestId(f)}`)(),
-          ),
+      ? Float32Array.from(
+          (function* () {
+            for (const f of flows) {
+              // @ts-ignore
+              yield new alea(`${getFlowOriginId(f)}-${getFlowDestId(f)}`)();
+            }
+          })(),
         )
       : undefined;
 

package/src/{FlowMapState.ts → FlowmapState.ts}

@@ -18,9 +18,11 @@ export interface SettingsState {
   darkMode: boolean;
   fadeAmount: number;
   colorScheme: string | undefined;
+  highlightColor: string;
+  maxTopFlowsDisplayNum: number;
 }
 
-export interface FlowMapState {
+export interface FlowmapState {
   filterState: FilterState;
   settingsState: SettingsState;
   viewport: ViewportProps;

package/src/colors.ts

@@ -28,7 +28,7 @@ import {range} from 'd3-array';
 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 {SettingsState} from './FlowmapState';
 
 const DEFAULT_OUTLINE_COLOR = '#fff';
 const DEFAULT_DIMMED_OPACITY = 0.4;
@@ -100,7 +100,7 @@ const getColorSteps = (interpolate: (x: number) => string) =>
     .reverse();
 
 const FLOW_MIN_COLOR = 'rgba(240,240,240,0.5)';
-export const BLUES_PALE = [FLOW_MIN_COLOR, ColorScheme.primary];
+export const GRAYISH = [FLOW_MIN_COLOR, ColorScheme.primary];
 const schemeBluYl = [
   '#f7feae',
   '#b7e6a5',
@@ -134,7 +134,6 @@ export const schemeTeal = [
 export const DEFAULT_COLOR_SCHEME = schemeTeal;
 export const COLOR_SCHEMES: {[key: string]: string[]} = {
   Blues: asScheme(schemeBlues),
-  BluesPale: BLUES_PALE,
   BluGrn: [
     '#c4e6c3',
     '#96d2a4',
@@ -186,6 +185,7 @@ export const COLOR_SCHEMES: {[key: string]: string[]} = {
   ],
   Emrld: schemeEmrld,
   GnBu: asScheme(schemeGnBu),
+  Grayish: GRAYISH,
   Greens: asScheme(schemeGreens),
   Greys: asScheme(schemeGreys),
   Inferno: getColorSteps(interpolateInferno),
@@ -330,7 +330,7 @@ const diffColors: DiffColors = {
   outlineColor: 'rgb(230,233,237)',
 };
 
-export function getFlowMapColors(
+export function getFlowmapColors(
   settingsState: SettingsState,
 ): Colors | DiffColors {
   return getColors(
@@ -550,7 +550,7 @@ export interface LocationCircleColors {
   incoming?: string;
   highlighted?: string;
   empty?: string;
-  emptyOutline?: string;
+  outlineEmptyMix?: number;
 }
 
 export interface LocationAreaColors {
@@ -597,7 +597,7 @@ export interface LocationCircleColorsRGBA {
   incoming: RGBA;
   highlighted: RGBA;
   empty: RGBA;
-  emptyOutline: RGBA;
+  outlineEmptyMix: number;
 }
 
 export interface LocationAreaColorsRGBA {
@@ -682,7 +682,7 @@ function getFlowAndCircleColors(
         flowColorHighlighted,
       ),
       empty: emptyColor,
-      emptyOutline: mixColorsRGBA(innerColor, emptyColor, 0.4),
+      outlineEmptyMix: inputColors?.locationCircles?.outlineEmptyMix ?? 0.4,
     },
   };
 }