@flowmap.gl/data 8.0.0-alpha.9 → 8.0.1

package/src/FlowmapSelectors.ts

@@ -1,25 +1,11 @@
 /*
- * Copyright 2022 FlowmapBlue
- * Copyright 2018-2020 Teralytics, modified by FlowmapBlue
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
+ * Copyright (c) Flowmap.gl contributors
+ * Copyright (c) 2018-2020 Teralytics
+ * SPDX-License-Identifier: Apache-2.0
  */
 
-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';
+import {ascending, descending, extent, min, rollup} from 'd3-array';
+import {ScaleLinear, scaleSqrt} from 'd3-scale';
 import KDBush from 'kdbush';
 import {
   createSelector,
@@ -33,6 +19,7 @@ import {
   buildIndex,
   ClusterIndex,
   findAppropriateZoomLevel,
+  LocationWeightGetter,
   makeLocationWeightGetter,
 } from './cluster/ClusterIndex';
 import getColors, {
@@ -46,6 +33,11 @@ import getColors, {
 } from './colors';
 import FlowmapAggregateAccessors from './FlowmapAggregateAccessors';
 import {FlowmapState} from './FlowmapState';
+import {
+  addClusterNames,
+  getFlowThicknessScale,
+  getViewportBoundingBox,
+} from './selector-functions';
 import {
   getTimeGranularityByKey,
   getTimeGranularityByOrder,
@@ -55,6 +47,7 @@ import {
 import {
   AggregateFlow,
   Cluster,
+  ClusterLevels,
   ClusterNode,
   CountByTime,
   FlowAccessors,
@@ -78,7 +71,10 @@ export type Selector<L, F, T> = ParametricSelector<
   T
 >;
 
-export default class FlowmapSelectors<L, F> {
+export default class FlowmapSelectors<
+  L extends Record<string, any>,
+  F extends Record<string, any>,
+> {
   accessors: FlowmapAggregateAccessors<L, F>;
 
   constructor(accessors: FlowmapDataAccessors<L, F>) {
@@ -90,60 +86,71 @@ export default class FlowmapSelectors<L, F> {
     this.accessors = new FlowmapAggregateAccessors(accessors);
   }
 
-  getFetchedFlows = (state: FlowmapState, props: FlowmapData<L, F>) =>
+  getAggregateAccessors(): FlowmapAggregateAccessors<L, F> {
+    return this.accessors;
+  }
+
+  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;
+  getClusterLevelsFromProps = (
+    state: FlowmapState,
+    props: FlowmapData<L, F>,
+  ) => {
+    return props.clusterLevels;
+  };
   getMaxTopFlowsDisplayNum = (state: FlowmapState, props: FlowmapData<L, F>) =>
-    state.settingsState.maxTopFlowsDisplayNum;
+    state.settings.maxTopFlowsDisplayNum;
   getSelectedLocations = (state: FlowmapState, props: FlowmapData<L, F>) =>
-    state.filterState.selectedLocations;
+    state.filter?.selectedLocations;
   getLocationFilterMode = (state: FlowmapState, props: FlowmapData<L, F>) =>
-    state.filterState.locationFilterMode;
+    state.filter?.locationFilterMode;
   getClusteringEnabled = (state: FlowmapState, props: FlowmapData<L, F>) =>
-    state.settingsState.clusteringEnabled;
+    state.settings.clusteringEnabled;
   getLocationTotalsEnabled = (state: FlowmapState, props: FlowmapData<L, F>) =>
-    state.settingsState.locationTotalsEnabled;
+    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>) =>
     state.viewport;
   getSelectedTimeRange = (state: FlowmapState, props: FlowmapData<L, F>) =>
-    state.filterState.selectedTimeRange;
+    state.filter?.selectedTimeRange;
 
   getColorScheme: Selector<L, F, string | string[] | undefined> = (
     state: FlowmapState,
     props: FlowmapData<L, F>,
-  ) => state.settingsState.colorScheme;
+  ) => state.settings.colorScheme;
 
   getDarkMode: Selector<L, F, boolean> = (
     state: FlowmapState,
     props: FlowmapData<L, F>,
-  ) => state.settingsState.darkMode;
+  ) => state.settings.darkMode;
 
   getFadeEnabled: Selector<L, F, boolean> = (
     state: FlowmapState,
     props: FlowmapData<L, F>,
-  ) => state.settingsState.fadeEnabled;
+  ) => state.settings.fadeEnabled;
 
   getFadeOpacityEnabled: Selector<L, F, boolean> = (
     state: FlowmapState,
     props: FlowmapData<L, F>,
-  ) => state.settingsState.fadeOpacityEnabled;
+  ) => state.settings.fadeOpacityEnabled;
 
   getFadeAmount: Selector<L, F, number> = (
     state: FlowmapState,
     props: FlowmapData<L, F>,
-  ) => state.settingsState.fadeAmount;
+  ) => state.settings.fadeAmount;
 
   getAnimate: Selector<L, F, boolean> = (
     state: FlowmapState,
     props: FlowmapData<L, F>,
-  ) => state.settingsState.animationEnabled;
+  ) => 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) {
@@ -155,51 +162,63 @@ export default class FlowmapSelectors<L, F> {
         }
       }
       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> =
+  getSelectedLocationsSet: Selector<L, F, Set<string | number> | undefined> =
     createSelector(this.getSelectedLocations, (ids) =>
       ids && ids.length > 0 ? new Set(ids) : undefined,
     );
 
   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) => {
@@ -271,44 +290,54 @@ 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(),
       );
+      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(),
@@ -317,47 +346,27 @@ export default class FlowmapSelectors<L, F> {
           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;
     },
   );
@@ -373,7 +382,7 @@ export default class FlowmapSelectors<L, F> {
       let maxZoom = Number.POSITIVE_INFINITY;
       let minZoom = Number.NEGATIVE_INFINITY;
 
-      const adjust = (zoneId: string) => {
+      const adjust = (zoneId: string | number) => {
         const cluster = clusterIndex.getClusterById(zoneId);
         if (cluster) {
           minZoom = Math.max(minZoom, cluster.zoom);
@@ -402,7 +411,7 @@ export default class FlowmapSelectors<L, F> {
     this.getAvailableClusterZoomLevels,
     (clusterIndex, mapZoom, availableClusterZoomLevels) => {
       if (!clusterIndex) return undefined;
-      if (!availableClusterZoomLevels) {
+      if (!availableClusterZoomLevels || mapZoom == null) {
         return undefined;
       }
 
@@ -415,12 +424,12 @@ 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) {
+    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> =
@@ -438,7 +447,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);
@@ -448,7 +457,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);
@@ -473,13 +482,14 @@ 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;
     },
@@ -505,27 +515,28 @@ export default class FlowmapSelectors<L, F> {
     },
   );
 
-  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,
@@ -566,31 +577,34 @@ export default class FlowmapSelectors<L, F> {
     },
   );
 
-  getExpandedSelectedLocationsSet: Selector<L, F, Set<string> | undefined> =
-    createSelector(
-      this.getClusteringEnabled,
-      this.getSelectedLocationsSet,
-      this.getClusterIndex,
-      (clusteringEnabled, selectedLocations, clusterIndex) => {
-        if (!selectedLocations || !clusterIndex) {
-          return selectedLocations;
-        }
+  getExpandedSelectedLocationsSet: Selector<
+    L,
+    F,
+    Set<string | number> | undefined
+  > = createSelector(
+    this.getClusteringEnabled,
+    this.getSelectedLocationsSet,
+    this.getClusterIndex,
+    (clusteringEnabled, selectedLocations, clusterIndex) => {
+      if (!selectedLocations || !clusterIndex) {
+        return selectedLocations;
+      }
 
-        const result = new Set<string>();
-        for (const locationId of selectedLocations) {
-          const cluster = clusterIndex.getClusterById(locationId);
-          if (cluster) {
-            const expanded = clusterIndex.expandCluster(cluster);
-            for (const id of expanded) {
-              result.add(id);
-            }
-          } else {
-            result.add(locationId);
+      const result = new Set<string | number>();
+      for (const locationId of selectedLocations) {
+        const cluster = clusterIndex.getClusterById(locationId);
+        if (cluster) {
+          const expanded = clusterIndex.expandCluster(cluster);
+          for (const id of expanded) {
+            result.add(id);
           }
+        } else {
+          result.add(locationId);
         }
-        return result;
-      },
-    );
+      }
+      return result;
+    },
+  );
 
   getTotalCountsByTime: Selector<L, F, CountByTime[] | undefined> =
     createSelector(
@@ -645,18 +659,10 @@ export default class FlowmapSelectors<L, F> {
     createSelector(
       this.getViewport,
       this.getMaxLocationCircleSize,
-      (viewport, maxLocationCircleSize) => {
-        const pad = maxLocationCircleSize;
-        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]];
-      },
+      getViewportBoundingBox,
     );
 
-  getLocationsForZoom: Selector<L, F, L[] | ClusterNode[] | undefined> =
+  getLocationsForZoom: Selector<L, F, Iterable<L> | ClusterNode[] | undefined> =
     createSelector(
       this.getClusteringEnabled,
       this.getLocationsHavingFlows,
@@ -671,47 +677,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,
@@ -719,14 +728,20 @@ export default class FlowmapSelectors<L, F> {
       if (!locations) {
         return undefined;
       }
-      return new KDBush(
-        // @ts-ignore
-        locations,
-        (location: L | ClusterNode) =>
-          lngX(this.accessors.getLocationLon(location)),
-        (location: L | ClusterNode) =>
-          latY(this.accessors.getLocationLat(location)),
-      );
+      const nodes = Array.isArray(locations)
+        ? locations
+        : Array.from(locations);
+      const bush = new KDBush(nodes.length, 64, Float32Array);
+      for (let i = 0; i < nodes.length; i++) {
+        const node = nodes[i];
+        bush.add(
+          lngX(this.accessors.getLocationLon(node)),
+          latY(this.accessors.getLocationLat(node)),
+        );
+      }
+      bush.finish();
+      bush.points = nodes;
+      return bush;
     },
   );
 
@@ -745,7 +760,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
@@ -817,7 +832,7 @@ export default class FlowmapSelectors<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);
@@ -912,7 +927,7 @@ export default class FlowmapSelectors<L, F> {
     state: FlowmapState,
     props: FlowmapData<L, F>,
   ): [number, number] | undefined => {
-    if (state.settingsState.adaptiveScalesEnabled) {
+    if (state.settings.adaptiveScalesEnabled) {
       return this._getAdaptiveFlowMagnitudeExtent(state, props);
     } else {
       return this._getFlowMagnitudeExtent(state, props);
@@ -935,19 +950,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(
@@ -978,7 +981,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 (
@@ -996,7 +999,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 (
@@ -1071,6 +1074,15 @@ 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,
@@ -1081,6 +1093,7 @@ export default class FlowmapSelectors<L, F> {
     this.getOutCircleSizeGetter,
     this.getFlowThicknessScale,
     this.getAnimate,
+    this.getLocationLabelsEnabled,
     (
       locations,
       flows,
@@ -1091,6 +1104,7 @@ export default class FlowmapSelectors<L, F> {
       getOutCircleSize,
       flowThicknessScale,
       animationEnabled,
+      locationLabelsEnabled,
     ) => {
       return this._prepareLayersData(
         locations,
@@ -1102,6 +1116,7 @@ export default class FlowmapSelectors<L, F> {
         getOutCircleSize,
         flowThicknessScale,
         animationEnabled,
+        locationLabelsEnabled,
       );
     },
   );
@@ -1115,6 +1130,7 @@ export default class FlowmapSelectors<L, F> {
     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,
@@ -1124,7 +1140,8 @@ export default class FlowmapSelectors<L, F> {
       getInCircleSize,
       getOutCircleSize,
       flowThicknessScale,
-      state.settingsState.animationEnabled,
+      state.settings.animationEnabled,
+      locationLabelsEnabled,
     );
   }
 
@@ -1132,12 +1149,13 @@ export default class FlowmapSelectors<L, F> {
     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,
+    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 = [];
@@ -1148,6 +1166,7 @@ export default class FlowmapSelectors<L, F> {
       getLocationId,
       getLocationLon,
       getLocationLat,
+      getLocationName,
     } = this.accessors;
 
     const flowMagnitudeExtent = extent(flows, (f) => getFlowMagnitude(f)) as [
@@ -1279,6 +1298,9 @@ export default class FlowmapSelectors<L, F> {
             : {}),
         },
       },
+      ...(locationLabelsEnabled
+        ? {locationLabels: locations.map(getLocationName)}
+        : undefined),
     };
   }
 
@@ -1309,8 +1331,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);
@@ -1356,8 +1378,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;
@@ -1403,10 +1425,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;
@@ -1425,11 +1446,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);
     }
   }