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

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

@@ -1,26 +1,30 @@
 import {LocationFilterMode, ViewportProps} from './types';
 
 export interface FilterState {
-  selectedLocations: string[] | undefined;
-  selectedTimeRange: [Date, Date] | undefined;
-  locationFilterMode: LocationFilterMode;
+  selectedLocations?: string[];
+  locationFilterMode?: LocationFilterMode;
+  selectedTimeRange?: [Date, Date];
 }
 
 export interface SettingsState {
   animationEnabled: boolean;
   fadeEnabled: boolean;
+  fadeOpacityEnabled: boolean;
   locationTotalsEnabled: boolean;
+  locationLabelsEnabled: boolean;
   adaptiveScalesEnabled: boolean;
   clusteringEnabled: boolean;
   clusteringAuto: boolean;
   clusteringLevel?: number;
   darkMode: boolean;
   fadeAmount: number;
-  colorScheme: string | undefined;
+  colorScheme: string | string[] | undefined;
+  highlightColor: string;
+  maxTopFlowsDisplayNum: number;
 }
 
-export interface FlowMapState {
-  filterState: FilterState;
-  settingsState: SettingsState;
+export interface FlowmapState {
+  filter?: FilterState;
+  settings: SettingsState;
   viewport: ViewportProps;
 }

package/src/cluster/ClusterIndex.ts

@@ -27,14 +27,14 @@ import {
 } from './../types';
 import {ascending, bisectLeft, extent} from 'd3-array';
 
-export type LocationWeightGetter = (id: string) => number;
+export type LocationWeightGetter = (id: string | number) => number;
 
 /**
  * A data structure representing the cluster levels for efficient flow aggregation.
  */
 export interface ClusterIndex<F> {
   availableZoomLevels: number[];
-  getClusterById: (clusterId: string) => Cluster | undefined;
+  getClusterById: (clusterId: string | number) => Cluster | undefined;
   /**
    * List the nodes on the given zoom level.
    */
@@ -50,7 +50,10 @@ export interface ClusterIndex<F> {
   /**
    * Find the cluster the given location is residing in on the specified zoom level.
    */
-  findClusterFor: (locationId: string, zoom: number) => string | undefined;
+  findClusterFor: (
+    locationId: string | number,
+    zoom: number,
+  ) => string | number | undefined;
   /**
    * Aggregate flows for the specified zoom level.
    */
@@ -69,8 +72,8 @@ export interface ClusterIndex<F> {
  */
 export function buildIndex<F>(clusterLevels: ClusterLevels): ClusterIndex<F> {
   const nodesByZoom = new Map<number, ClusterNode[]>();
-  const clustersById = new Map<string, Cluster>();
-  const minZoomByLocationId = new Map<string, number>();
+  const clustersById = new Map<string | number, Cluster>();
+  const minZoomByLocationId = new Map<string | number, number>();
   for (const {zoom, nodes} of clusterLevels) {
     nodesByZoom.set(zoom, nodes);
     for (const node of nodes) {
@@ -91,7 +94,10 @@ export function buildIndex<F>(clusterLevels: ClusterLevels): ClusterIndex<F> {
     throw new Error('Could not determine minZoom or maxZoom');
   }
 
-  const leavesToClustersByZoom = new Map<number, Map<string, Cluster>>();
+  const leavesToClustersByZoom = new Map<
+    number,
+    Map<string | number, Cluster>
+  >();
 
   for (const cluster of clustersById.values()) {
     const {zoom} = cluster;
@@ -118,7 +124,7 @@ export function buildIndex<F>(clusterLevels: ClusterLevels): ClusterIndex<F> {
 
   const expandCluster = (cluster: Cluster, targetZoom: number = maxZoom) => {
     const ids: string[] = [];
-    const visit = (c: Cluster, expandedIds: string[]) => {
+    const visit = (c: Cluster, expandedIds: (string | number)[]) => {
       if (targetZoom > c.zoom) {
         for (const childId of c.children) {
           const child = clustersById.get(childId);
@@ -136,7 +142,7 @@ export function buildIndex<F>(clusterLevels: ClusterLevels): ClusterIndex<F> {
     return ids;
   };
 
-  function findClusterFor(locationId: string, zoom: number) {
+  function findClusterFor(locationId: string | number, zoom: number) {
     const leavesToClusters = leavesToClustersByZoom.get(zoom);
     if (!leavesToClusters) {
       return undefined;
@@ -179,7 +185,8 @@ export function buildIndex<F>(clusterLevels: ClusterLevels): ClusterIndex<F> {
       }
       const result: (F | AggregateFlow)[] = [];
       const aggFlowsByKey = new Map<string, AggregateFlow>();
-      const makeKey = (origin: string, dest: string) => `${origin}:${dest}`;
+      const makeKey = (origin: string | number, dest: string | number) =>
+        `${origin}:${dest}`;
       const {
         flowCountsMapReduce = {
           map: getFlowMagnitude,
@@ -223,8 +230,8 @@ export function makeLocationWeightGetter<F>(
   {getFlowOriginId, getFlowDestId, getFlowMagnitude}: FlowAccessors<F>,
 ): LocationWeightGetter {
   const locationTotals = {
-    incoming: new Map<string, number>(),
-    outgoing: new Map<string, number>(),
+    incoming: new Map<string | number, number>(),
+    outgoing: new Map<string | number, number>(),
   };
   for (const flow of flows) {
     const origin = getFlowOriginId(flow);
@@ -239,7 +246,7 @@ export function makeLocationWeightGetter<F>(
       (locationTotals.outgoing.get(origin) || 0) + count,
     );
   }
-  return (id: string) =>
+  return (id: string | number) =>
     Math.max(
       Math.abs(locationTotals.incoming.get(id) || 0),
       Math.abs(locationTotals.outgoing.get(id) || 0),

package/src/cluster/cluster.ts

@@ -36,7 +36,7 @@
 // TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
 // THIS SOFTWARE.
 
-import {rollup} from 'd3-array';
+import {min, rollup} from 'd3-array';
 import KDBush from 'kdbush';
 import {LocationWeightGetter} from './ClusterIndex';
 import {Cluster, ClusterLevel, ClusterNode, LocationAccessors} from '../types';
@@ -69,8 +69,9 @@ interface BasePoint {
   parentId: number; // parent cluster id
 }
 
-interface LeafPoint extends BasePoint {
+interface LeafPoint<L> extends BasePoint {
   index: number; // index of the source feature in the original input array,
+  location: L;
 }
 
 interface ClusterPoint extends BasePoint {
@@ -78,14 +79,14 @@ interface ClusterPoint extends BasePoint {
   numPoints: number;
 }
 
-type Point = LeafPoint | ClusterPoint;
+type Point<L> = LeafPoint<L> | ClusterPoint;
 
-export function isLeafPoint(p: Point): p is LeafPoint {
-  const {index} = p as LeafPoint;
+export function isLeafPoint<L>(p: Point<L>): p is LeafPoint<L> {
+  const {index} = p as LeafPoint<L>;
   return index != null;
 }
 
-export function isClusterPoint(p: Point): p is ClusterPoint {
+export function isClusterPoint<L>(p: Point<L>): p is ClusterPoint {
   const {id} = p as ClusterPoint;
   return id != null;
 }
@@ -93,12 +94,12 @@ export function isClusterPoint(p: Point): p is ClusterPoint {
 type ZoomLevelKDBush = any;
 
 export function clusterLocations<L>(
-  locations: L[],
+  locations: Iterable<L>,
   locationAccessors: LocationAccessors<L>,
   getLocationWeight: LocationWeightGetter,
   options?: Partial<Options>,
 ): ClusterLevel[] {
-  const {getLocationCentroid, getLocationId} = locationAccessors;
+  const {getLocationLon, getLocationLat, getLocationId} = locationAccessors;
   const opts = {
     ...defaultOptions,
     ...options,
@@ -108,50 +109,78 @@ export function clusterLocations<L>(
   const trees = new Array<ZoomLevelKDBush>(maxZoom + 1);
 
   // generate a cluster object for each point and index input points into a KD-tree
-  let clusters = new Array<Point>();
-  for (let i = 0; i < locations.length; i++) {
-    const [x, y] = getLocationCentroid(locations[i]);
+  let clusters = new Array<Point<L>>();
+  let locationsCount = 0;
+  for (const location of locations) {
+    const x = getLocationLon(location);
+    const y = getLocationLat(location);
     clusters.push({
       x: lngX(x), // projected point coordinates
       y: latY(y),
-      weight: getLocationWeight(getLocationId(locations[i])),
+      weight: getLocationWeight(getLocationId(location)),
       zoom: Infinity, // the last zoom the point was processed at
-      index: i, // index of the source feature in the original input array,
+      index: locationsCount, // index of the source feature in the original input array,
       parentId: -1, // parent cluster id
+      location,
     });
+    locationsCount++;
   }
-  trees[maxZoom + 1] = new KDBush(clusters, getX, getY, nodeSize, Float32Array);
 
   // cluster points on max zoom, then cluster the results on previous zoom, etc.;
   // results in a cluster hierarchy across zoom levels
+  trees[maxZoom + 1] = new KDBush(clusters, getX, getY, nodeSize, Float32Array);
+  let prevZoom = maxZoom + 1;
+
   for (let z = maxZoom; z >= minZoom; z--) {
     // create a new set of clusters for the zoom and index them with a KD-tree
-    clusters = cluster(clusters, z, trees[z + 1], opts);
-    trees[z] = new KDBush(clusters, getX, getY, nodeSize, Float32Array);
+    const _clusters = cluster(clusters, z, trees[prevZoom], opts);
+    if (_clusters.length === clusters.length) {
+      // same number of clusters => move the higher level clusters up
+      // no need to keep the same data on multiple levels
+      trees[z] = trees[prevZoom];
+      trees[prevZoom] = undefined;
+      prevZoom = z;
+      clusters = _clusters;
+    } else {
+      prevZoom = z;
+      clusters = _clusters;
+      trees[z] = new KDBush(clusters, getX, getY, nodeSize, Float32Array);
+    }
   }
 
   if (trees.length === 0) {
     return [];
   }
-  const numbersOfClusters = trees.map((d) => d.points.length);
-  const maxAvailZoom = numbersOfClusters.indexOf(
-    numbersOfClusters[numbersOfClusters.length - 1],
-  );
+
+  const numbersOfClusters = trees.map((d) => d?.points.length);
+  const minClusters = min(numbersOfClusters.filter((d) => d > 0));
+  const maxClusters = getMaxNumberOfClusters(locations, locationAccessors);
+
+  let maxAvailZoom = numbersOfClusters.indexOf(maxClusters);
+  if (maxClusters < locationsCount) {
+    maxAvailZoom++;
+    if (maxAvailZoom < maxZoom + 1) {
+      trees[maxAvailZoom] = trees[maxZoom + 1];
+      trees[maxZoom + 1] = undefined;
+    }
+  }
   const minAvailZoom = Math.min(
     maxAvailZoom,
-    numbersOfClusters.lastIndexOf(numbersOfClusters[0]),
+    numbersOfClusters.lastIndexOf(minClusters),
   );
 
   const clusterLevels = new Array<ClusterLevel>();
-  for (let zoom = minAvailZoom; zoom <= maxAvailZoom; zoom++) {
-    let childrenByParent: Map<number, string[]> | undefined;
+  prevZoom = NaN;
+  for (let zoom = maxAvailZoom; zoom >= minAvailZoom; zoom--) {
+    let childrenByParent: Map<number, (string | number)[]> | undefined;
     const tree = trees[zoom];
+    if (!tree) continue;
     if (zoom < maxAvailZoom) {
-      childrenByParent = rollup<Point, string[], number>(
-        trees[zoom + 1].points,
+      childrenByParent = rollup<Point<L>, (string | number)[], number>(
+        trees[prevZoom].points,
         (points: any[]) =>
           points.map((p: any) =>
-            p.id ? makeClusterId(p.id) : getLocationId(locations[p.index]),
+            p.id ? makeClusterId(p.id) : getLocationId(p.location),
           ),
         (point: any) => point.parentId,
       );
@@ -159,13 +188,13 @@ export function clusterLocations<L>(
 
     const nodes: ClusterNode[] = [];
     for (const point of tree.points) {
-      const {x, y, numPoints} = point;
+      const {x, y, numPoints, location} = point;
       if (isLeafPoint(point)) {
-        const location = locations[point.index];
         nodes.push({
           id: getLocationId(location),
           zoom,
-          centroid: getLocationCentroid(location),
+          lat: getLocationLat(location),
+          lon: getLocationLon(location),
         });
       } else if (isClusterPoint(point)) {
         const {id} = point;
@@ -177,7 +206,8 @@ export function clusterLocations<L>(
           id: makeClusterId(id),
           name: makeClusterName(id, numPoints),
           zoom,
-          centroid: [xLng(x), yLat(y)] as [number, number],
+          lat: yLat(y),
+          lon: xLng(x),
           children,
         } as Cluster);
       }
@@ -186,6 +216,7 @@ export function clusterLocations<L>(
       zoom,
       nodes,
     });
+    prevZoom = zoom;
   }
   return clusterLevels;
 }
@@ -208,13 +239,13 @@ function createCluster(
   };
 }
 
-function cluster(
-  points: Point[],
+function cluster<L>(
+  points: Point<L>[],
   zoom: number,
   tree: ZoomLevelKDBush,
   options: Options,
 ) {
-  const clusters: Point[] = [];
+  const clusters: Point<L>[] = [];
   const {radius, extent} = options;
   const r = radius / (extent * Math.pow(2, zoom));
 
@@ -290,10 +321,40 @@ function latY(lat: number) {
   return y < 0 ? 0 : y > 1 ? 1 : y;
 }
 
-function getX(p: Point) {
+function getX<L>(p: Point<L>) {
   return p.x;
 }
 
-function getY(p: Point) {
+function getY<L>(p: Point<L>) {
   return p.y;
 }
+
+/**
+ * Finds groups of locations which share the same positions.
+ * They will always be clustered together at any zoom level
+ * which can lead to having too many zooms.
+ */
+function getMaxNumberOfClusters<L>(
+  locations: Iterable<L>,
+  locationAccessors: LocationAccessors<L>,
+) {
+  const {getLocationLon, getLocationLat} = locationAccessors;
+  const countByLatLon = new Map<string, number>();
+  let numLocations = 0;
+  for (const loc of locations) {
+    const lon = getLocationLon(loc);
+    const lat = getLocationLat(loc);
+    const key = `${lon},${lat}`;
+    const prev = countByLatLon.get(key);
+    countByLatLon.set(key, prev ? prev + 1 : 1);
+    numLocations++;
+  }
+
+  let numSame = 0;
+  for (const [key, count] of countByLatLon) {
+    if (count > 1) {
+      numSame++;
+    }
+  }
+  return numLocations - numSame;
+}

package/src/colors.ts

@@ -26,9 +26,9 @@ import {
 } from 'd3-scale-chromatic';
 import {range} from 'd3-array';
 import {scalePow, scaleSequential, scaleSequentialPow} from 'd3-scale';
-import {interpolateRgbBasis} from 'd3-interpolate';
-import {color as d3color, hcl} from 'd3-color';
-import {SettingsState} from './FlowMapState';
+import {interpolateBasis, interpolateRgbBasis} from 'd3-interpolate';
+import {color as d3color, hcl, rgb as colorRgb} from 'd3-color';
+import {SettingsState} from './FlowmapState';
 
 const DEFAULT_OUTLINE_COLOR = '#fff';
 const DEFAULT_DIMMED_OPACITY = 0.4;
@@ -58,7 +58,10 @@ export function opacifyHex(hexCode: string, opacity: number): string {
   return `rgba(${col.r}, ${col.g}, ${col.b}, ${opacity})`;
 }
 
-export function colorAsRgba(color: string): RGBA {
+export function colorAsRgba(color: string | number[]): RGBA {
+  if (Array.isArray(color)) {
+    return color as RGBA;
+  }
   const col = d3color(color);
   if (!col) {
     console.warn('Invalid color: ', color);
@@ -100,7 +103,7 @@ const getColorSteps = (interpolate: (x: number) => string) =>
     .reverse();
 
 const FLOW_MIN_COLOR = 'rgba(240,240,240,0.5)';
-export const BLUES_PALE = [FLOW_MIN_COLOR, ColorScheme.primary];
+export const GRAYISH = [FLOW_MIN_COLOR, ColorScheme.primary];
 const schemeBluYl = [
   '#f7feae',
   '#b7e6a5',
@@ -134,7 +137,6 @@ export const schemeTeal = [
 export const DEFAULT_COLOR_SCHEME = schemeTeal;
 export const COLOR_SCHEMES: {[key: string]: string[]} = {
   Blues: asScheme(schemeBlues),
-  BluesPale: BLUES_PALE,
   BluGrn: [
     '#c4e6c3',
     '#96d2a4',
@@ -186,6 +188,7 @@ export const COLOR_SCHEMES: {[key: string]: string[]} = {
   ],
   Emrld: schemeEmrld,
   GnBu: asScheme(schemeGnBu),
+  Grayish: GRAYISH,
   Greens: asScheme(schemeGreens),
   Greys: asScheme(schemeGreys),
   Inferno: getColorSteps(interpolateInferno),
@@ -330,24 +333,24 @@ const diffColors: DiffColors = {
   outlineColor: 'rgb(230,233,237)',
 };
 
-export function getFlowMapColors(
-  settingsState: SettingsState,
-): Colors | DiffColors {
+export function getFlowmapColors(settings: SettingsState): Colors | DiffColors {
   return getColors(
     false, // TODO: diffMode
-    settingsState.colorScheme,
-    settingsState.darkMode,
-    settingsState.fadeEnabled,
-    settingsState.fadeAmount,
-    settingsState.animationEnabled,
+    settings.colorScheme,
+    settings.darkMode,
+    settings.fadeEnabled,
+    settings.fadeOpacityEnabled,
+    settings.fadeAmount,
+    settings.animationEnabled,
   );
 }
 
 export function getColors(
   diffMode: boolean,
-  schemeKey: string | undefined,
+  colorScheme: string | string[] | undefined,
   darkMode: boolean,
   fadeEnabled: boolean,
+  fadeOpacityEnabled: boolean,
   fadeAmount: number,
   animate: boolean,
 ): Colors | DiffColors {
@@ -355,11 +358,18 @@ export function getColors(
     return diffColors;
   }
 
-  let scheme = (schemeKey && COLOR_SCHEMES[schemeKey]) || DEFAULT_COLOR_SCHEME;
+  let scheme;
 
-  if (darkMode) {
-    scheme = scheme.slice().reverse();
+  if (Array.isArray(colorScheme)) {
+    scheme = colorScheme;
+  } else {
+    scheme =
+      (colorScheme && COLOR_SCHEMES[colorScheme]) || DEFAULT_COLOR_SCHEME;
+    if (darkMode) {
+      scheme = scheme.slice().reverse();
+    }
   }
+
   // if (animate)
   // if (fadeAmount > 0)
   {
@@ -390,13 +400,14 @@ export function getColors(
       scheme = indices.map(
         (c, i) => {
           const color = colorScale(i);
-          const alpha = amount(i);
-          if (color == null || alpha == null) return '#000';
+          const a = amount(i);
+          if (color == null || a == null) return '#000';
           const col = hcl(color);
-          col.l = darkMode
-            ? col.l - col.l * alpha
-            : col.l + (100 - col.l) * alpha;
-          col.c = col.c - col.c * (alpha / 4);
+          col.l = darkMode ? col.l - col.l * a : col.l + (100 - col.l) * a;
+          col.c = col.c - col.c * (a / 4);
+          if (fadeOpacityEnabled) {
+            col.opacity = col.opacity * (1.0 - a);
+          }
           return col.toString();
         },
         // interpolateRgbBasis([colorScale(i), darkMode ? '#000' : '#fff'])(amount(i))
@@ -417,15 +428,46 @@ export function getColors(
   };
 }
 
+function interpolateRgbaBasis(colors: string[]) {
+  const spline = interpolateBasis;
+  const n = colors.length;
+  let r: any = new Array(n),
+    g: any = new Array(n),
+    b: any = new Array(n),
+    opacity: any = new Array(n),
+    i,
+    color: any;
+  for (i = 0; i < n; ++i) {
+    color = colorRgb(colors[i]);
+    r[i] = color.r || 0;
+    g[i] = color.g || 0;
+    b[i] = color.b || 0;
+    opacity[i] = color.opacity || 0;
+  }
+  r = spline(r);
+  g = spline(g);
+  b = spline(b);
+  opacity = spline(opacity);
+  // color.opacity = 1;
+  return function (t: number) {
+    color.r = r(t);
+    color.g = g(t);
+    color.b = b(t);
+    color.opacity = opacity(t);
+    return color + '';
+  };
+}
+
 export function createFlowColorScale(
   domain: [number, number],
   scheme: string[],
   animate: boolean | undefined,
 ): ColorScale {
-  const scale = scaleSequentialPow(interpolateRgbBasis(scheme))
+  const scale = scaleSequentialPow(interpolateRgbaBasis(scheme))
     // @ts-ignore
     .exponent(animate ? 1 / 2 : 1 / 3)
     .domain(domain);
+
   return (value: number) => colorAsRgba(scale(value));
 }
 
@@ -516,7 +558,7 @@ export interface LocationCircleColors {
   incoming?: string;
   highlighted?: string;
   empty?: string;
-  emptyOutline?: string;
+  outlineEmptyMix?: number;
 }
 
 export interface LocationAreaColors {
@@ -563,7 +605,7 @@ export interface LocationCircleColorsRGBA {
   incoming: RGBA;
   highlighted: RGBA;
   empty: RGBA;
-  emptyOutline: RGBA;
+  outlineEmptyMix: number;
 }
 
 export interface LocationAreaColorsRGBA {
@@ -648,7 +690,7 @@ function getFlowAndCircleColors(
         flowColorHighlighted,
       ),
       empty: emptyColor,
-      emptyOutline: mixColorsRGBA(innerColor, emptyColor, 0.4),
+      outlineEmptyMix: inputColors?.locationCircles?.outlineEmptyMix ?? 0.4,
     },
   };
 }