@flowmap.gl/data 8.0.0-alpha.2 → 8.0.0-alpha.22

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

@@ -16,10 +16,8 @@
  *
  */
 
-import {bounds} from '@mapbox/geo-viewport';
-import {ascending, descending, extent, min} from 'd3-array';
-import {nest} from 'd3-collection';
-import {ScaleLinear, scaleLinear, scaleSqrt} from 'd3-scale';
+import {ascending, descending, extent, min, rollup} from 'd3-array';
+import {ScaleLinear, scaleSqrt} from 'd3-scale';
 import KDBush from 'kdbush';
 import {
   createSelector,
@@ -33,6 +31,7 @@ import {
   buildIndex,
   ClusterIndex,
   findAppropriateZoomLevel,
+  LocationWeightGetter,
   makeLocationWeightGetter,
 } from './cluster/ClusterIndex';
 import getColors, {
@@ -44,8 +43,13 @@ import getColors, {
   isDiffColors,
   isDiffColorsRGBA,
 } from './colors';
-import FlowMapAggregateAccessors from './FlowMapAggregateAccessors';
-import {FlowMapState} from './FlowMapState';
+import FlowmapAggregateAccessors from './FlowmapAggregateAccessors';
+import {FlowmapState} from './FlowmapState';
+import {
+  addClusterNames,
+  getFlowThicknessScale,
+  getViewportBoundingBox,
+} from './selector-functions';
 import {
   getTimeGranularityByKey,
   getTimeGranularityByOrder,
@@ -55,126 +59,143 @@ import {
 import {
   AggregateFlow,
   Cluster,
+  ClusterLevels,
   ClusterNode,
   CountByTime,
   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>) =>
+  getFlowsFromProps = (state: FlowmapState, props: FlowmapData<L, F>) =>
     props.flows;
-  getFetchedLocations = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getLocationsFromProps = (state: FlowmapState, props: FlowmapData<L, F>) =>
     props.locations;
-  getSelectedLocations = (state: FlowMapState, props: FlowMapData<L, F>) =>
-    state.filterState.selectedLocations;
-  getLocationFilterMode = (state: FlowMapState, props: FlowMapData<L, F>) =>
-    state.filterState.locationFilterMode;
-  getClusteringEnabled = (state: FlowMapState, props: FlowMapData<L, F>) =>
-    state.settingsState.clusteringEnabled;
-  getLocationTotalsEnabled = (state: FlowMapState, props: FlowMapData<L, F>) =>
-    state.settingsState.locationTotalsEnabled;
-  getZoom = (state: FlowMapState, props: FlowMapData<L, F>) =>
+  getClusterLevelsFromProps = (
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
+  ) => {
+    return props.clusterLevels;
+  };
+  getMaxTopFlowsDisplayNum = (state: FlowmapState, props: FlowmapData<L, F>) =>
+    state.settings.maxTopFlowsDisplayNum;
+  getSelectedLocations = (state: FlowmapState, props: FlowmapData<L, F>) =>
+    state.filter?.selectedLocations;
+  getLocationFilterMode = (state: FlowmapState, props: FlowmapData<L, F>) =>
+    state.filter?.locationFilterMode;
+  getClusteringEnabled = (state: FlowmapState, props: FlowmapData<L, F>) =>
+    state.settings.clusteringEnabled;
+  getLocationTotalsEnabled = (state: FlowmapState, props: FlowmapData<L, F>) =>
+    state.settings.locationTotalsEnabled;
+  getLocationLabelsEnabled = (state: FlowmapState, props: FlowmapData<L, F>) =>
+    state.settings.locationLabelsEnabled;
+  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>) =>
-    state.filterState.selectedTimeRange;
+  getSelectedTimeRange = (state: FlowmapState, props: FlowmapData<L, F>) =>
+    state.filter?.selectedTimeRange;
 
-  getColorSchemeKey: Selector<L, F, string | undefined> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
-  ) => state.settingsState.colorScheme;
+  getColorScheme: Selector<L, F, string | string[] | undefined> = (
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
+  ) => state.settings.colorScheme;
 
   getDarkMode: Selector<L, F, boolean> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
-  ) => state.settingsState.darkMode;
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
+  ) => state.settings.darkMode;
 
   getFadeEnabled: Selector<L, F, boolean> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
-  ) => state.settingsState.fadeEnabled;
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
+  ) => state.settings.fadeEnabled;
+
+  getFadeOpacityEnabled: Selector<L, F, boolean> = (
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
+  ) => state.settings.fadeOpacityEnabled;
 
   getFadeAmount: Selector<L, F, number> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
-  ) => state.settingsState.fadeAmount;
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
+  ) => state.settings.fadeAmount;
 
   getAnimate: Selector<L, F, boolean> = (
-    state: FlowMapState,
-    props: FlowMapData<L, F>,
-  ) => state.settingsState.animationEnabled;
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
+  ) => state.settings.animationEnabled;
 
-  getInvalidLocationIds: Selector<L, F, string[] | undefined> = createSelector(
-    this.getFetchedLocations,
-    (locations) => {
+  getInvalidLocationIds: Selector<L, F, (string | number)[] | undefined> =
+    createSelector(this.getLocationsFromProps, (locations) => {
       if (!locations) return undefined;
       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);
         }
       }
       return invalid.length > 0 ? invalid : undefined;
-    },
-  );
+    });
 
-  getLocations: Selector<L, F, L[] | undefined> = createSelector(
-    this.getFetchedLocations,
+  getLocations: Selector<L, F, Iterable<L> | undefined> = createSelector(
+    this.getLocationsFromProps,
     this.getInvalidLocationIds,
     (locations, invalidIds) => {
       if (!locations) return undefined;
       if (!invalidIds || invalidIds.length === 0) return locations;
       const invalid = new Set(invalidIds);
-      return locations.filter(
-        (location: L) => !invalid.has(this.accessors.getLocationId(location)),
-      );
+      const filtered: L[] = [];
+      for (const location of locations) {
+        const id = this.accessors.getLocationId(location);
+        if (!invalid.has(id)) {
+          filtered.push(location);
+        }
+      }
+      return filtered;
     },
   );
 
-  getLocationIds: Selector<L, F, Set<string> | undefined> = createSelector(
-    this.getLocations,
-    (locations) =>
-      locations
-        ? new Set(locations.map(this.accessors.getLocationId))
-        : undefined,
-  );
+  getLocationIds: Selector<L, F, Set<string | number> | undefined> =
+    createSelector(this.getLocations, (locations) => {
+      if (!locations) return undefined;
+      const ids = new Set<string | number>();
+      for (const id of locations) {
+        ids.add(this.accessors.getLocationId(id));
+      }
+      return ids;
+    });
 
   getSelectedLocationsSet: Selector<L, F, Set<string> | undefined> =
     createSelector(this.getSelectedLocations, (ids) =>
@@ -182,21 +203,27 @@ export default class FlowMapSelectors<L, F> {
     );
 
   getSortedFlowsForKnownLocations: Selector<L, F, F[] | undefined> =
-    createSelector(this.getFetchedFlows, this.getLocationIds, (flows, ids) => {
-      if (!ids || !flows) return undefined;
-      return flows
-        .filter(
-          (flow: F) =>
-            ids.has(this.accessors.getFlowOriginId(flow)) &&
-            ids.has(this.accessors.getFlowDestId(flow)),
-        )
-        .sort((a: F, b: F) =>
+    createSelector(
+      this.getFlowsFromProps,
+      this.getLocationIds,
+      (flows, ids) => {
+        if (!ids || !flows) return undefined;
+        const filtered = [];
+        for (const flow of flows) {
+          const srcId = this.accessors.getFlowOriginId(flow);
+          const dstId = this.accessors.getFlowDestId(flow);
+          if (ids.has(srcId) && ids.has(dstId)) {
+            filtered.push(flow);
+          }
+        }
+        return filtered.sort((a: F, b: F) =>
           descending(
             Math.abs(this.accessors.getFlowMagnitude(a)),
             Math.abs(this.accessors.getFlowMagnitude(b)),
           ),
         );
-    });
+      },
+    );
 
   getActualTimeExtent: Selector<L, F, [Date, Date] | undefined> =
     createSelector(this.getSortedFlowsForKnownLocations, (flows) => {
@@ -268,93 +295,83 @@ export default class FlowMapSelectors<L, F> {
     },
   );
 
-  getLocationsHavingFlows: Selector<L, F, L[] | undefined> = createSelector(
-    this.getSortedFlowsForKnownLocations,
-    this.getLocations,
-    (flows, locations) => {
-      if (!locations || !flows) return locations;
-      const withFlows = new Set();
-      for (const flow of flows) {
-        withFlows.add(this.accessors.getFlowOriginId(flow));
-        withFlows.add(this.accessors.getFlowDestId(flow));
-      }
-      return locations.filter((location: L) =>
-        withFlows.has(this.accessors.getLocationId(location)),
-      );
-    },
-  );
+  getLocationsHavingFlows: Selector<L, F, Iterable<L> | undefined> =
+    createSelector(
+      this.getSortedFlowsForKnownLocations,
+      this.getLocations,
+      (flows, locations) => {
+        if (!locations || !flows) return locations;
+        const withFlows = new Set();
+        for (const flow of flows) {
+          withFlows.add(this.accessors.getFlowOriginId(flow));
+          withFlows.add(this.accessors.getFlowDestId(flow));
+        }
+        const filtered = [];
+        for (const location of locations) {
+          if (withFlows.has(this.accessors.getLocationId(location))) {
+            filtered.push(location);
+          }
+        }
+        return filtered;
+      },
+    );
 
-  getLocationsById: Selector<L, F, Map<string, L> | undefined> = createSelector(
-    this.getLocationsHavingFlows,
-    (locations) => {
+  getLocationsById: Selector<L, F, Map<string | number, L> | undefined> =
+    createSelector(this.getLocationsHavingFlows, (locations) => {
       if (!locations) return undefined;
-      return nest<L, L>()
-        .key((d: L) => this.accessors.getLocationId(d))
-        .rollup(([d]) => d)
-        .map(locations) as any as Map<string, L>;
-    },
-  );
-
-  getClusterIndex: Selector<L, F, ClusterIndex<F> | undefined> = createSelector(
-    this.getLocationsHavingFlows,
-    this.getLocationsById,
-    this.getSortedFlowsForKnownLocations,
-    (locations, locationsById, flows) => {
-      if (!locations || !locationsById || !flows) return undefined;
+      const locationsById = new Map<string | number, L>();
+      for (const location of locations) {
+        locationsById.set(this.accessors.getLocationId(location), location);
+      }
+      return locationsById;
+    });
 
+  getLocationWeightGetter: Selector<L, F, LocationWeightGetter | undefined> =
+    createSelector(this.getSortedFlowsForKnownLocations, (flows) => {
+      if (!flows) return undefined;
       const getLocationWeight = makeLocationWeightGetter(
         flows,
-        this.accessors.getFlowMapDataAccessors(),
+        this.accessors.getFlowmapDataAccessors(),
       );
+      return getLocationWeight;
+    });
+
+  getClusterLevels: Selector<L, F, ClusterLevels | undefined> = createSelector(
+    this.getClusterLevelsFromProps,
+    this.getLocationsHavingFlows,
+    this.getLocationWeightGetter,
+    (clusterLevelsFromProps, locations, getLocationWeight) => {
+      if (clusterLevelsFromProps) return clusterLevelsFromProps;
+      if (!locations || !getLocationWeight) return undefined;
       const clusterLevels = clusterLocations(
         locations,
-        this.accessors.getFlowMapDataAccessors(),
+        this.accessors.getFlowmapDataAccessors(),
         getLocationWeight,
         {
           maxZoom: MAX_CLUSTER_ZOOM_LEVEL,
         },
       );
-      const clusterIndex = buildIndex<F>(clusterLevels);
-      const {getLocationName, getLocationClusterName} =
-        this.accessors.getFlowMapDataAccessors();
-
-      // Adding meaningful names
-      const getName = (id: string) => {
-        const loc = locationsById.get(id);
-        if (loc) {
-          return getLocationName
-            ? getLocationName(loc)
-            : this.accessors.getLocationId(loc) || id;
-        }
-        return `"${id}"`;
-      };
-      for (const level of clusterLevels) {
-        for (const node of level.nodes) {
-          // Here mutating the nodes (adding names)
-          if (isCluster(node)) {
-            const leaves = clusterIndex.expandCluster(node);
-
-            leaves.sort((a, b) =>
-              descending(getLocationWeight(a), getLocationWeight(b)),
-            );
+      return clusterLevels;
+    },
+  );
 
-            if (getLocationClusterName) {
-              node.name = getLocationClusterName(leaves);
-            } else {
-              const topId = leaves[0];
-              const otherId = leaves.length === 2 ? leaves[1] : undefined;
-              node.name = `"${getName(topId)}" and ${
-                otherId
-                  ? `"${getName(otherId)}"`
-                  : `${leaves.length - 1} others`
-              }`;
-            }
-          } else {
-            (node as any).name = getName(node.id);
-          }
-        }
-      }
+  getClusterIndex: Selector<L, F, ClusterIndex<F> | undefined> = createSelector(
+    this.getLocationsById,
+    this.getLocationWeightGetter,
+    this.getClusterLevels,
+    (locationsById, getLocationWeight, clusterLevels) => {
+      if (!locationsById || !getLocationWeight || !clusterLevels)
+        return undefined;
 
+      const clusterIndex = buildIndex<F>(clusterLevels);
+      // Adding meaningful names
+      addClusterNames(
+        clusterIndex,
+        clusterLevels,
+        locationsById,
+        this.accessors.getFlowmapDataAccessors(),
+        getLocationWeight,
+      );
       return clusterIndex;
     },
   );
@@ -399,7 +416,7 @@ export default class FlowMapSelectors<L, F> {
     this.getAvailableClusterZoomLevels,
     (clusterIndex, mapZoom, availableClusterZoomLevels) => {
       if (!clusterIndex) return undefined;
-      if (!availableClusterZoomLevels) {
+      if (!availableClusterZoomLevels || mapZoom == null) {
         return undefined;
       }
 
@@ -411,13 +428,13 @@ export default class FlowMapSelectors<L, F> {
     },
   );
 
-  getClusterZoom = (state: FlowMapState, props: FlowMapData<L, F>) => {
-    const {settingsState} = state;
-    if (!settingsState.clusteringEnabled) return undefined;
-    if (settingsState.clusteringAuto || settingsState.clusteringLevel == null) {
+  getClusterZoom = (state: FlowmapState, props: FlowmapData<L, F>) => {
+    const {settings} = state;
+    if (!settings.clusteringEnabled) return undefined;
+    if (settings.clusteringAuto || settings.clusteringLevel == null) {
       return this._getClusterZoom(state, props);
     }
-    return settingsState.clusteringLevel;
+    return settings.clusteringLevel;
   };
 
   getLocationsForSearchBox: Selector<L, F, (L | Cluster)[] | undefined> =
@@ -435,7 +452,7 @@ export default class FlowMapSelectors<L, F> {
         clusterIndex,
       ) => {
         if (!locations) return undefined;
-        let result: (L | Cluster)[] = locations;
+        let result: (L | Cluster)[] = Array.from(locations);
         // if (clusteringEnabled) {
         //   if (clusterIndex) {
         //     const zoomItems = clusterIndex.getClusterNodesFor(clusterZoom);
@@ -445,7 +462,7 @@ export default class FlowMapSelectors<L, F> {
         //   }
         // }
 
-        if (result && clusterIndex && selectedLocations) {
+        if (clusterIndex && selectedLocations) {
           const toAppend = [];
           for (const id of selectedLocations) {
             const cluster = clusterIndex.getClusterById(id);
@@ -470,58 +487,61 @@ export default class FlowMapSelectors<L, F> {
     );
 
   getDiffMode: Selector<L, F, boolean> = createSelector(
-    this.getFetchedFlows,
+    this.getFlowsFromProps,
     (flows) => {
-      if (
-        flows &&
-        flows.find((f: F) => this.accessors.getFlowMagnitude(f) < 0)
-      ) {
-        return true;
+      if (flows) {
+        for (const f of flows) {
+          if (this.accessors.getFlowMagnitude(f) < 0) {
+            return true;
+          }
+        }
       }
       return false;
     },
   );
 
-  _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);
     },
   );
 
-  getUnknownLocations: Selector<L, F, Set<string> | undefined> = createSelector(
-    this.getLocationIds,
-    this.getFetchedFlows,
-    this.getSortedFlowsForKnownLocations,
-    (ids, flows, flowsForKnownLocations) => {
-      if (!ids || !flows) return undefined;
-      if (
-        flowsForKnownLocations &&
-        flows.length === flowsForKnownLocations.length
-      )
-        return undefined;
-      const missing = new Set<string>();
-      for (const flow of flows) {
-        if (!ids.has(this.accessors.getFlowOriginId(flow)))
-          missing.add(this.accessors.getFlowOriginId(flow));
-        if (!ids.has(this.accessors.getFlowDestId(flow)))
-          missing.add(this.accessors.getFlowDestId(flow));
-      }
-      return missing;
-    },
-  );
+  getUnknownLocations: Selector<L, F, Set<string | number> | undefined> =
+    createSelector(
+      this.getLocationIds,
+      this.getFlowsFromProps,
+      this.getSortedFlowsForKnownLocations,
+      (ids, flows, flowsForKnownLocations) => {
+        if (!ids || !flows) return undefined;
+        if (
+          flowsForKnownLocations
+          // && flows.length === flowsForKnownLocations.length
+        )
+          return undefined;
+        const missing = new Set<string | number>();
+        for (const flow of flows) {
+          if (!ids.has(this.accessors.getFlowOriginId(flow)))
+            missing.add(this.accessors.getFlowOriginId(flow));
+          if (!ids.has(this.accessors.getFlowDestId(flow)))
+            missing.add(this.accessors.getFlowDestId(flow));
+        }
+        return missing;
+      },
+    );
 
   getSortedAggregatedFilteredFlows: Selector<
     L,
@@ -544,12 +564,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 +582,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,
@@ -668,18 +661,10 @@ export default class FlowMapSelectors<L, F> {
     createSelector(
       this.getViewport,
       this.getMaxLocationCircleSize,
-      (viewport, maxLocationCircleSize) => {
-        const pad = maxLocationCircleSize;
-        return bounds(
-          [viewport.longitude, viewport.latitude],
-          viewport.zoom,
-          [viewport.width + pad * 2, viewport.height + pad * 2],
-          512,
-        );
-      },
+      getViewportBoundingBox,
     );
 
-  getLocationsForZoom: Selector<L, F, L[] | ClusterNode[] | undefined> =
+  getLocationsForZoom: Selector<L, F, Iterable<L> | ClusterNode[] | undefined> =
     createSelector(
       this.getClusteringEnabled,
       this.getLocationsHavingFlows,
@@ -694,47 +679,50 @@ export default class FlowMapSelectors<L, F> {
       },
     );
 
-  getLocationTotals: Selector<L, F, Map<string, LocationTotals> | undefined> =
-    createSelector(
-      this.getLocationsForZoom,
-      this.getSortedAggregatedFilteredFlows,
-      this.getSelectedLocationsSet,
-      this.getLocationFilterMode,
-      (locations, flows, selectedLocationsSet, locationFilterMode) => {
-        if (!flows) return undefined;
-        const totals = new Map<string, LocationTotals>();
-        const add = (
-          id: string,
-          d: Partial<LocationTotals>,
-        ): LocationTotals => {
-          const rv = totals.get(id) ?? {
-            incomingCount: 0,
-            outgoingCount: 0,
-            internalCount: 0,
-          };
-          if (d.incomingCount != null) rv.incomingCount += d.incomingCount;
-          if (d.outgoingCount != null) rv.outgoingCount += d.outgoingCount;
-          if (d.internalCount != null) rv.internalCount += d.internalCount;
-          return rv;
+  getLocationTotals: Selector<
+    L,
+    F,
+    Map<string | number, LocationTotals> | undefined
+  > = createSelector(
+    this.getLocationsForZoom,
+    this.getSortedAggregatedFilteredFlows,
+    this.getSelectedLocationsSet,
+    this.getLocationFilterMode,
+    (locations, flows, selectedLocationsSet, locationFilterMode) => {
+      if (!flows) return undefined;
+      const totals = new Map<string | number, LocationTotals>();
+      const add = (
+        id: string | number,
+        d: Partial<LocationTotals>,
+      ): LocationTotals => {
+        const rv = totals.get(id) ?? {
+          incomingCount: 0,
+          outgoingCount: 0,
+          internalCount: 0,
         };
-        for (const f of flows) {
-          if (
-            this.isFlowInSelection(f, selectedLocationsSet, locationFilterMode)
-          ) {
-            const originId = this.accessors.getFlowOriginId(f);
-            const destId = this.accessors.getFlowDestId(f);
-            const count = this.accessors.getFlowMagnitude(f);
-            if (originId === destId) {
-              totals.set(originId, add(originId, {internalCount: count}));
-            } else {
-              totals.set(originId, add(originId, {outgoingCount: count}));
-              totals.set(destId, add(destId, {incomingCount: count}));
-            }
+        if (d.incomingCount != null) rv.incomingCount += d.incomingCount;
+        if (d.outgoingCount != null) rv.outgoingCount += d.outgoingCount;
+        if (d.internalCount != null) rv.internalCount += d.internalCount;
+        return rv;
+      };
+      for (const f of flows) {
+        if (
+          this.isFlowInSelection(f, selectedLocationsSet, locationFilterMode)
+        ) {
+          const originId = this.accessors.getFlowOriginId(f);
+          const destId = this.accessors.getFlowDestId(f);
+          const count = this.accessors.getFlowMagnitude(f);
+          if (originId === destId) {
+            totals.set(originId, add(originId, {internalCount: count}));
+          } else {
+            totals.set(originId, add(originId, {outgoingCount: count}));
+            totals.set(destId, add(destId, {incomingCount: count}));
           }
         }
-        return totals;
-      },
-    );
+      }
+      return totals;
+    },
+  );
 
   getLocationsTree: Selector<L, F, KDBushTree> = createSelector(
     this.getLocationsForZoom,
@@ -746,17 +734,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)),
       );
     },
   );
@@ -776,7 +756,7 @@ export default class FlowMapSelectors<L, F> {
       },
     );
 
-  getLocationIdsInViewport: Selector<L, F, Set<string> | undefined> =
+  getLocationIdsInViewport: Selector<L, F, Set<string | number> | undefined> =
     createSelectorCreator(
       defaultMemoize,
       // @ts-ignore
@@ -845,27 +825,29 @@ 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) {
+    if (state.settings.adaptiveScalesEnabled) {
       return this._getLocationTotalsForViewportExtent(state, props);
     } else {
       return this._getLocationTotalsExtent(state, props);
     }
   };
 
-  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 +874,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 +882,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;
-      }
+    if (state.settings.adaptiveScalesEnabled) {
+      return this._getAdaptiveFlowMagnitudeExtent(state, props);
     } else {
-      return this.getFlowMagnitudeExtent(state, props);
+      return this._getFlowMagnitudeExtent(state, props);
     }
   };
 
@@ -933,19 +946,7 @@ export default class FlowMapSelectors<L, F> {
 
   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)),
-          ),
-        ]);
-    },
+    getFlowThicknessScale,
   );
 
   getCircleSizeScale = createSelector(
@@ -976,7 +977,7 @@ export default class FlowMapSelectors<L, F> {
     this.getCircleSizeScale,
     this.getLocationTotals,
     (circleSizeScale, locationTotals) => {
-      return (locationId: string) => {
+      return (locationId: string | number) => {
         const total = locationTotals?.get(locationId);
         if (total && circleSizeScale) {
           return (
@@ -994,7 +995,7 @@ export default class FlowMapSelectors<L, F> {
     this.getCircleSizeScale,
     this.getLocationTotals,
     (circleSizeScale, locationTotals) => {
-      return (locationId: string) => {
+      return (locationId: string | number) => {
         const total = locationTotals?.get(locationId);
         if (total && circleSizeScale) {
           return (
@@ -1027,7 +1028,7 @@ export default class FlowMapSelectors<L, F> {
       },
     );
 
-  getLocationsForFlowMapLayer: Selector<
+  getLocationsForFlowmapLayer: Selector<
     L,
     F,
     Array<L | ClusterNode> | undefined
@@ -1057,11 +1058,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),
@@ -1069,73 +1070,88 @@ export default class FlowMapSelectors<L, F> {
     );
   });
 
+  getLocationOrClusterByIdGetter = createSelector(
+    this.getClusterIndex,
+    this.getLocationsById,
+    (clusterIndex, locationsById) => {
+      return (id: string | number) =>
+        clusterIndex?.getClusterById(id) ?? locationsById?.get(id);
+    },
+  );
+
   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,
     this.getFlowThicknessScale,
     this.getAnimate,
+    this.getLocationLabelsEnabled,
     (
       locations,
       flows,
-      flowMapColors,
+      flowmapColors,
       locationsById,
       locationIdsInViewport,
       getInCircleSize,
       getOutCircleSize,
       flowThicknessScale,
       animationEnabled,
+      locationLabelsEnabled,
     ) => {
       return this._prepareLayersData(
         locations,
         flows,
-        flowMapColors,
+        flowmapColors,
         locationsById,
         locationIdsInViewport,
         getInCircleSize,
         getOutCircleSize,
         flowThicknessScale,
         animationEnabled,
+        locationLabelsEnabled,
       );
     },
   );
 
-  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);
     const flowThicknessScale = this.getFlowThicknessScale(state, props);
+    const locationLabelsEnabled = this.getLocationLabelsEnabled(state, props);
     return this._prepareLayersData(
       locations,
       flows,
-      flowMapColors,
+      flowmapColors,
       locationsById,
       locationIdsInViewport,
       getInCircleSize,
       getOutCircleSize,
       flowThicknessScale,
-      state.settingsState.animationEnabled,
+      state.settings.animationEnabled,
+      locationLabelsEnabled,
     );
   }
 
   _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,
+    flowmapColors: DiffColorsRGBA | ColorsRGBA,
+    locationsById: Map<string | number, L | ClusterNode> | undefined,
+    locationIdsInViewport: Set<string | number> | undefined,
+    getInCircleSize: (locationId: string | number) => number,
+    getOutCircleSize: (locationId: string | number) => number,
     flowThicknessScale: ScaleLinear<number, number, never> | undefined,
     animationEnabled: boolean,
+    locationLabelsEnabled: boolean,
   ): LayersData {
     if (!locations) locations = [];
     if (!flows) flows = [];
@@ -1144,80 +1160,114 @@ export default class FlowMapSelectors<L, F> {
       getFlowDestId,
       getFlowMagnitude,
       getLocationId,
-      getLocationCentroid,
+      getLocationLon,
+      getLocationLat,
+      getLocationName,
     } = 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;
 
@@ -1244,6 +1294,9 @@ export default class FlowMapSelectors<L, F> {
             : {}),
         },
       },
+      ...(locationLabelsEnabled
+        ? {locationLabels: locations.map(getLocationName)}
+        : undefined),
     };
   }
 
@@ -1274,8 +1327,8 @@ export default class FlowMapSelectors<L, F> {
 
   isFlowInSelection(
     flow: F | AggregateFlow,
-    selectedLocationsSet: Set<string> | undefined,
-    locationFilterMode: LocationFilterMode,
+    selectedLocationsSet: Set<string | number> | undefined,
+    locationFilterMode?: LocationFilterMode,
   ) {
     const origin = this.accessors.getFlowOriginId(flow);
     const dest = this.accessors.getFlowDestId(flow);
@@ -1321,8 +1374,8 @@ export default class FlowMapSelectors<L, F> {
 }
 
 function calcLocationTotalsExtent(
-  locationTotals: Map<string, LocationTotals> | undefined,
-  locationIdsInViewport: Set<string> | undefined,
+  locationTotals: Map<string | number, LocationTotals> | undefined,
+  locationIdsInViewport: Set<string | number> | undefined,
 ) {
   if (!locationTotals) return undefined;
   let rv: [number, number] | undefined = undefined;
@@ -1368,10 +1421,9 @@ function aggregateFlows<F>(
   flowAccessors: FlowAccessors<F>,
 ): AggregateFlow[] {
   // Sum up flows with same origin, dest
-  const byOriginDest = nest<F, AggregateFlow>()
-    .key(flowAccessors.getFlowOriginId)
-    .key(flowAccessors.getFlowDestId)
-    .rollup((ff: F[]) => {
+  const byOriginDest = rollup(
+    flows,
+    (ff: F[]) => {
       const origin = flowAccessors.getFlowOriginId(ff[0]);
       const dest = flowAccessors.getFlowDestId(ff[0]);
       // const color = ff[0].color;
@@ -1390,11 +1442,14 @@ function aggregateFlows<F>(
       };
       // if (color) rv.color = color;
       return rv;
-    })
-    .entries(flows);
+    },
+    flowAccessors.getFlowOriginId,
+    flowAccessors.getFlowDestId,
+  );
+
   const rv: AggregateFlow[] = [];
-  for (const {values} of byOriginDest) {
-    for (const {value} of values) {
+  for (const values of byOriginDest.values()) {
+    for (const value of values.values()) {
       rv.push(value);
     }
   }
@@ -1414,7 +1469,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] {