@flowmap.gl/data 8.0.0-alpha.1 → 8.0.0-alpha.13

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,80 +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>,
+  getColorScheme: Selector<L, F, string | string[] | undefined> = (
+    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.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(
@@ -143,10 +148,8 @@ export default class FlowMapSelectors<L, F> {
       const invalid = [];
       for (const location of locations) {
         const id = this.accessors.getLocationId(location);
-        const [lon, lat] = this.accessors.getLocationCentroid(location) || [
-          NaN,
-          NaN,
-        ];
+        const lon = this.accessors.getLocationLon(location);
+        const lat = this.accessors.getLocationLat(location);
         if (!(-90 <= lat && lat <= 90) || !(-180 <= lon && lon <= 180)) {
           invalid.push(id);
         }
@@ -304,11 +307,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,
@@ -316,7 +319,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) => {
@@ -411,7 +414,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) {
@@ -482,22 +485,23 @@ export default class FlowMapSelectors<L, F> {
     },
   );
 
-  _getFlowMapColors = createSelector(
+  _getFlowmapColors = createSelector(
     this.getDiffMode,
-    this.getColorSchemeKey,
+    this.getColorScheme,
     this.getDarkMode,
     this.getFadeEnabled,
+    this.getFadeOpacityEnabled,
     this.getFadeAmount,
     this.getAnimate,
     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);
     },
   );
 
@@ -544,12 +548,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) =>
@@ -562,33 +566,6 @@ export default class FlowMapSelectors<L, F> {
     },
   );
 
-  getFlowMagnitudeExtent: Selector<L, F, [number, number] | undefined> =
-    createSelector(
-      this.getSortedAggregatedFilteredFlows,
-      this.getSelectedLocationsSet,
-      this.getLocationFilterMode,
-      (flows, selectedLocationsSet, locationFilterMode) => {
-        if (!flows) return undefined;
-        let rv: [number, number] | undefined = undefined;
-        for (const f of flows) {
-          if (
-            this.accessors.getFlowOriginId(f) !==
-              this.accessors.getFlowDestId(f) &&
-            this.isFlowInSelection(f, selectedLocationsSet, locationFilterMode)
-          ) {
-            const count = this.accessors.getFlowMagnitude(f);
-            if (rv == null) {
-              rv = [count, count];
-            } else {
-              if (count < rv[0]) rv[0] = count;
-              if (count > rv[1]) rv[1] = count;
-            }
-          }
-        }
-        return rv;
-      },
-    );
-
   getExpandedSelectedLocationsSet: Selector<L, F, Set<string> | undefined> =
     createSelector(
       this.getClusteringEnabled,
@@ -670,12 +647,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]];
       },
     );
 
@@ -746,17 +723,9 @@ export default class FlowMapSelectors<L, F> {
         // @ts-ignore
         locations,
         (location: L | ClusterNode) =>
-          lngX(
-            isLocationClusterNode(location)
-              ? location.centroid[0]
-              : this.accessors.getLocationCentroid(location)[0],
-          ),
+          lngX(this.accessors.getLocationLon(location)),
         (location: L | ClusterNode) =>
-          latY(
-            isLocationClusterNode(location)
-              ? location.centroid[1]
-              : this.accessors.getLocationCentroid(location)[1],
-          ),
+          latY(this.accessors.getLocationLat(location)),
       );
     },
   );
@@ -845,8 +814,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);
@@ -855,17 +824,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)[] = [];
@@ -892,7 +863,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
@@ -900,20 +871,51 @@ export default class FlowMapSelectors<L, F> {
       },
     );
 
-  _getFlowMagnitudeExtent = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
+  _getFlowMagnitudeExtent: Selector<L, F, [number, number] | undefined> =
+    createSelector(
+      this.getSortedAggregatedFilteredFlows,
+      this.getSelectedLocationsSet,
+      this.getLocationFilterMode,
+      (flows, selectedLocationsSet, locationFilterMode) => {
+        if (!flows) return undefined;
+        let rv: [number, number] | undefined = undefined;
+        for (const f of flows) {
+          if (
+            this.accessors.getFlowOriginId(f) !==
+              this.accessors.getFlowDestId(f) &&
+            this.isFlowInSelection(f, selectedLocationsSet, locationFilterMode)
+          ) {
+            const count = this.accessors.getFlowMagnitude(f);
+            if (rv == null) {
+              rv = [count, count];
+            } else {
+              if (count < rv[0]) rv[0] = count;
+              if (count > rv[1]) rv[1] = count;
+            }
+          }
+        }
+        return rv;
+      },
+    );
+
+  _getAdaptiveFlowMagnitudeExtent: Selector<
+    L,
+    F,
+    [number, number] | undefined
+  > = createSelector(this.getFlowsForFlowmapLayer, (flows) => {
+    if (!flows) return undefined;
+    const rv = extent(flows, this.accessors.getFlowMagnitude);
+    return rv[0] !== undefined && rv[1] !== undefined ? rv : undefined;
+  });
+
+  getFlowMagnitudeExtent = (
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
   ): [number, number] | undefined => {
     if (state.settingsState.adaptiveScalesEnabled) {
-      const flows = this.getFlowsForFlowMapLayer(state, props);
-      if (flows) {
-        const rv = extent(flows, this.accessors.getFlowMagnitude);
-        return rv[0] !== undefined && rv[1] !== undefined ? rv : undefined;
-      } else {
-        return undefined;
-      }
+      return this._getAdaptiveFlowMagnitudeExtent(state, props);
     } else {
-      return this.getFlowMagnitudeExtent(state, props);
+      return this._getFlowMagnitudeExtent(state, props);
     }
   };
 
@@ -1027,7 +1029,7 @@ export default class FlowMapSelectors<L, F> {
       },
     );
 
-  getLocationsForFlowMapLayer: Selector<
+  getLocationsForFlowmapLayer: Selector<
     L,
     F,
     Array<L | ClusterNode> | undefined
@@ -1057,11 +1059,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),
@@ -1070,10 +1072,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,
@@ -1082,7 +1084,7 @@ export default class FlowMapSelectors<L, F> {
     (
       locations,
       flows,
-      flowMapColors,
+      flowmapColors,
       locationsById,
       locationIdsInViewport,
       getInCircleSize,
@@ -1093,7 +1095,7 @@ export default class FlowMapSelectors<L, F> {
       return this._prepareLayersData(
         locations,
         flows,
-        flowMapColors,
+        flowmapColors,
         locationsById,
         locationIdsInViewport,
         getInCircleSize,
@@ -1104,11 +1106,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);
@@ -1116,7 +1118,7 @@ export default class FlowMapSelectors<L, F> {
     return this._prepareLayersData(
       locations,
       flows,
-      flowMapColors,
+      flowmapColors,
       locationsById,
       locationIdsInViewport,
       getInCircleSize,
@@ -1129,7 +1131,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,
@@ -1144,80 +1146,113 @@ export default class FlowMapSelectors<L, F> {
       getFlowDestId,
       getFlowMagnitude,
       getLocationId,
-      getLocationCentroid,
+      getLocationLon,
+      getLocationLat,
     } = this.accessors;
 
-    const getCentroid = (id: string) => {
-      const loc = locationsById?.get(id);
-      return loc ? getLocationCentroid(loc) : [0, 0];
-    };
-
     const flowMagnitudeExtent = extent(flows, (f) => getFlowMagnitude(f)) as [
       number,
       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 getLocationLon(location);
+          yield getLocationLat(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 outCircleRadii = new Float32Array(
-      locations.map((loc) => {
-        const id = getLocationId(loc);
-        return locationIdsInViewport?.has(id) ? getOutCircleSize(id) : 1.0;
-      }),
+
+    const inCircleRadii = Float32Array.from(
+      (function* () {
+        for (const location of locations) {
+          const id = getLocationId(location);
+          yield locationIdsInViewport?.has(id) ? getInCircleSize(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) {
+          const loc = locationsById?.get(getFlowOriginId(flow));
+          yield loc ? getLocationLon(loc) : 0;
+          yield loc ? getLocationLat(loc) : 0;
+        }
+      })(),
     );
-    const targetPositions = new Float32Array(
-      flatMap(flows, (d: F | AggregateFlow) => getCentroid(getFlowDestId(d))),
+    const targetPositions = Float32Array.from(
+      (function* () {
+        for (const flow of flows) {
+          const loc = locationsById?.get(getFlowDestId(flow));
+          yield loc ? getLocationLon(loc) : 0;
+          yield loc ? getLocationLat(loc) : 0;
+        }
+      })(),
     );
-    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;
 
@@ -1414,7 +1449,7 @@ export function getOuterCircleRadiusByIndex(
   return Math.max(getInRadius.value[index], getOutRadius.value[index]);
 }
 
-export function getLocationCentroidByIndex(
+export function getLocationCoordsByIndex(
   circleAttributes: FlowCirclesLayerAttributes,
   index: number,
 ): [number, number] {

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

@@ -9,6 +9,7 @@ export interface FilterState {
 export interface SettingsState {
   animationEnabled: boolean;
   fadeEnabled: boolean;
+  fadeOpacityEnabled: boolean;
   locationTotalsEnabled: boolean;
   adaptiveScalesEnabled: boolean;
   clusteringEnabled: boolean;
@@ -16,10 +17,12 @@ export interface SettingsState {
   clusteringLevel?: number;
   darkMode: boolean;
   fadeAmount: number;
-  colorScheme: string | undefined;
+  colorScheme: string | string[] | undefined;
+  highlightColor: string;
+  maxTopFlowsDisplayNum: number;
 }
 
-export interface FlowMapState {
+export interface FlowmapState {
   filterState: FilterState;
   settingsState: SettingsState;
   viewport: ViewportProps;