@flowmap.gl/layers 8.0.0-alpha.1 → 8.0.0-alpha.10

package/src/{FlowMapLayer.ts → FlowmapLayer.ts}

@@ -19,51 +19,53 @@ import {ScatterplotLayer} from '@deck.gl/layers';
 import {
   colorAsRgba,
   FlowLinesLayerAttributes,
-  FlowMapData,
-  FlowMapDataAccessors,
-  FlowMapDataProvider,
+  FlowmapData,
+  FlowmapDataAccessors,
+  FlowmapDataProvider,
   getFlowLineAttributesByIndex,
-  getFlowMapColors,
+  getFlowmapColors,
   getOuterCircleRadiusByIndex,
-  getLocationCentroidByIndex,
-  isFlowMapData,
-  isFlowMapDataProvider,
+  getLocationCoordsByIndex,
+  isFlowmapData,
+  isFlowmapDataProvider,
   LayersData,
-  LocalFlowMapDataProvider,
+  LocalFlowmapDataProvider,
   LocationFilterMode,
   ViewportProps,
-  FlowMapAggregateAccessors,
-  ClusterNode,
-  AggregateFlow,
+  FlowmapAggregateAccessors,
 } from '@flowmap.gl/data';
 import AnimatedFlowLinesLayer from './AnimatedFlowLinesLayer';
 import FlowCirclesLayer from './FlowCirclesLayer';
 import FlowLinesLayer from './FlowLinesLayer';
 import {
-  FlowLayerPickingInfo,
+  FlowmapLayerPickingInfo,
   LayerProps,
   PickingInfo,
   PickingType,
 } from './types';
 
-export type FlowMapLayerProps<L, F> = {
-  data: FlowMapData<L, F> | FlowMapDataProvider<L, F>;
+export type FlowmapLayerProps<L, F> = {
+  data?: FlowmapData<L, F>;
+  dataProvider?: FlowmapDataProvider<L, F>;
   locationTotalsEnabled?: boolean;
   adaptiveScalesEnabled?: boolean;
   animationEnabled?: boolean;
   clusteringEnabled?: boolean;
   clusteringLevel?: number;
   fadeEnabled?: boolean;
+  fadeOpacityEnabled?: boolean;
   clusteringAuto?: boolean;
   darkMode?: boolean;
   fadeAmount?: number;
-  colorScheme?: string;
+  colorScheme?: string | string[];
+  highlightColor?: string | number[];
+  maxTopFlowsDisplayNum?: number;
   onHover?: (
-    info: FlowLayerPickingInfo<L, F> | undefined,
+    info: FlowmapLayerPickingInfo<L, F> | undefined,
     event: SourceEvent,
   ) => void;
-  onClick?: (info: FlowLayerPickingInfo<L, F>, event: SourceEvent) => void;
-} & Partial<FlowMapDataAccessors<L, F>> &
+  onClick?: (info: FlowmapLayerPickingInfo<L, F>, event: SourceEvent) => void;
+} & Partial<FlowmapDataAccessors<L, F>> &
   LayerProps;
 
 enum HighlightType {
@@ -73,7 +75,7 @@ enum HighlightType {
 
 type HighlightedLocationObject = {
   type: HighlightType.LOCATION;
-  centroid: [number, number];
+  coords: [number, number];
   radius: number;
 };
 
@@ -85,15 +87,16 @@ type HighlightedFlowObject = {
 type HighlightedObject = HighlightedLocationObject | HighlightedFlowObject;
 
 type State<L, F> = {
-  accessors: FlowMapAggregateAccessors<L, F>;
-  dataProvider: FlowMapDataProvider<L, F>;
+  accessors: FlowmapAggregateAccessors<L, F>;
+  dataProvider: FlowmapDataProvider<L, F>;
   layersData: LayersData | undefined;
   highlightedObject: HighlightedObject | undefined;
+  pickingInfo: FlowmapLayerPickingInfo<L, F> | undefined;
 };
 
 export type SourceEvent = {srcEvent: MouseEvent};
 
-export default class FlowMapLayer<L, F> extends CompositeLayer {
+export default class FlowmapLayer<L, F> extends CompositeLayer {
   static defaultProps = {
     darkMode: true,
     fadeAmount: 50,
@@ -101,16 +104,23 @@ export default class FlowMapLayer<L, F> extends CompositeLayer {
     animationEnabled: false,
     clusteringEnabled: true,
     fadeEnabled: true,
+    fadeOpacityEnabled: false,
     clusteringAuto: true,
     clusteringLevel: undefined,
     adaptiveScalesEnabled: true,
     colorScheme: 'Teal',
+    highlightColor: 'orange',
+    maxTopFlowsDisplayNum: 5000,
   };
   state: State<L, F> | undefined;
 
-  public constructor(props: FlowMapLayerProps<L, F>) {
+  public constructor(props: FlowmapLayerProps<L, F>) {
     super({
       ...props,
+      dataProvider: {
+        // To avoid deck.gl props diffing on comlink worker proxy causing an exception
+        dataProvider: props.dataProvider,
+      },
       onHover: (info: PickingInfo<any>, event: SourceEvent) => {
         // TODO: if (lastHoverEventStartTimeRef > startTime) {
         //   // Skipping, because this is not the latest hover event
@@ -119,15 +129,17 @@ export default class FlowMapLayer<L, F> extends CompositeLayer {
         this.setState({highlightedObject: this._getHighlightedObject(info)});
         const {onHover} = props;
         if (onHover) {
-          this._getFlowLayerPickingInfo(info).then((info) =>
-            onHover(info, event),
-          );
+          this._getFlowmapLayerPickingInfo(info).then((info) => {
+            this.setState({pickingInfo: info});
+            onHover(info, event);
+          });
         }
       },
       onClick: (info: PickingInfo<any>, event: SourceEvent) => {
         const {onClick} = props;
         if (onClick) {
-          this._getFlowLayerPickingInfo(info).then((info) => {
+          this._getFlowmapLayerPickingInfo(info).then((info) => {
+            this.setState({pickingInfo: info});
             if (info) {
               onClick(info, event);
             }
@@ -139,34 +151,43 @@ export default class FlowMapLayer<L, F> extends CompositeLayer {
 
   initializeState() {
     this.state = {
-      accessors: new FlowMapAggregateAccessors<L, F>(this.props),
-      dataProvider: this._makeDataProvider(),
+      accessors: new FlowmapAggregateAccessors<L, F>(this.props),
+      dataProvider: this._getOrMakeDataProvider(),
       layersData: undefined,
       highlightedObject: undefined,
+      pickingInfo: undefined,
+    };
+  }
+
+  getPickingInfo(pickParams: Record<string, any>) {
+    // This is for onHover event handlers set on the <DeckGL> component
+    return {
+      ...pickParams.info,
+      object: this.state?.pickingInfo?.object,
     };
   }
 
   private _updateAccessors() {
     this.state?.dataProvider?.setAccessors(this.props);
-    this.setState({accessors: new FlowMapAggregateAccessors(this.props)});
+    this.setState({accessors: new FlowmapAggregateAccessors(this.props)});
   }
 
-  private _makeDataProvider() {
-    const {data} = this.props;
-    if (isFlowMapDataProvider<L, F>(data)) {
-      return data;
-    } else if (isFlowMapData<L, F>(data)) {
-      const dataProvider = new LocalFlowMapDataProvider<L, F>(this.props);
-      dataProvider.setFlowMapData(data);
+  private _getOrMakeDataProvider() {
+    const {data, dataProvider} = this.props;
+    if (isFlowmapDataProvider<L, F>(dataProvider?.dataProvider)) {
+      return dataProvider.dataProvider;
+    } else if (isFlowmapData<L, F>(data)) {
+      const dataProvider = new LocalFlowmapDataProvider<L, F>(this.props);
+      dataProvider.setFlowmapData(data);
       return dataProvider;
     }
     throw new Error(
-      'FlowMapLayer: data must be a FlowMapDataProvider or FlowMapData',
+      'FlowmapLayer: data must be a FlowmapDataProvider or FlowmapData',
     );
   }
 
   private _updateDataProvider() {
-    this.setState({dataProvider: this._makeDataProvider()});
+    this.setState({dataProvider: this._getOrMakeDataProvider()});
   }
 
   shouldUpdateState(params: Record<string, any>): boolean {
@@ -189,7 +210,7 @@ export default class FlowMapLayer<L, F> extends CompositeLayer {
     }
 
     if (changeFlags.propsChanged) {
-      this._updateAccessors();
+      // this._updateAccessors();
     }
     if (changeFlags.dataChanged) {
       this._updateDataProvider();
@@ -200,8 +221,11 @@ export default class FlowMapLayer<L, F> extends CompositeLayer {
       });
     }
 
-    if (changeFlags.viewportChanged || changeFlags.propsOrDataChanged) {
-      dataProvider.setFlowMapState(this._getFlowMapState());
+    if (
+      changeFlags.viewportChanged ||
+      changeFlags.propsOrDataChanged // TODO can we ignore accessor props changes?
+    ) {
+      dataProvider.setFlowmapState(this._getFlowmapState());
       (async () => {
         const layersData = await dataProvider.getLayersData();
         this.setState({layersData});
@@ -217,10 +241,13 @@ export default class FlowMapLayer<L, F> extends CompositeLayer {
       clusteringEnabled,
       clusteringLevel,
       fadeEnabled,
+      fadeOpacityEnabled,
       clusteringAuto,
       darkMode,
       fadeAmount,
       colorScheme,
+      highlightColor,
+      maxTopFlowsDisplayNum,
     } = this.props;
     return {
       locationTotalsEnabled,
@@ -229,16 +256,19 @@ export default class FlowMapLayer<L, F> extends CompositeLayer {
       clusteringEnabled,
       clusteringLevel,
       fadeEnabled,
+      fadeOpacityEnabled,
       clusteringAuto,
       darkMode,
       fadeAmount,
       colorScheme,
+      highlightColor,
+      maxTopFlowsDisplayNum,
     };
   }
 
-  private _getFlowMapState() {
+  private _getFlowmapState() {
     return {
-      viewport: asViewState(this.context.viewport),
+      viewport: pickViewportProps(this.context.viewport),
       filterState: {
         selectedLocations: undefined,
         locationFilterMode: LocationFilterMode.ALL,
@@ -248,9 +278,9 @@ export default class FlowMapLayer<L, F> extends CompositeLayer {
     };
   }
 
-  private async _getFlowLayerPickingInfo(
+  private async _getFlowmapLayerPickingInfo(
     info: Record<string, any>,
-  ): Promise<FlowLayerPickingInfo<L, F> | undefined> {
+  ): Promise<FlowmapLayerPickingInfo<L, F> | undefined> {
     const {index, sourceLayer} = info;
     const {dataProvider, accessors} = this.state || {};
     if (!dataProvider || !accessors) {
@@ -330,9 +360,25 @@ export default class FlowMapLayer<L, F> extends CompositeLayer {
     ) {
       const {lineAttributes} = this.state?.layersData || {};
       if (lineAttributes) {
+        let attrs = getFlowLineAttributesByIndex(lineAttributes, index);
+        if (this.props.fadeOpacityEnabled) {
+          attrs = {
+            ...attrs,
+            attributes: {
+              ...attrs.attributes,
+              getColor: {
+                ...attrs.attributes.getColor,
+                value: new Uint8Array([
+                  ...attrs.attributes.getColor.value.slice(0, 3),
+                  255, // the highlight color should be always opaque
+                ]),
+              },
+            },
+          };
+        }
         return {
           type: HighlightType.FLOW,
-          lineAttributes: getFlowLineAttributesByIndex(lineAttributes, index),
+          lineAttributes: attrs,
         };
       }
     } else if (sourceLayer instanceof FlowCirclesLayer) {
@@ -340,7 +386,7 @@ export default class FlowMapLayer<L, F> extends CompositeLayer {
       if (circleAttributes) {
         return {
           type: HighlightType.LOCATION,
-          centroid: getLocationCentroidByIndex(circleAttributes, index),
+          coords: getLocationCoordsByIndex(circleAttributes, index),
           radius: getOuterCircleRadiusByIndex(circleAttributes, index),
         };
       }
@@ -354,9 +400,9 @@ export default class FlowMapLayer<L, F> extends CompositeLayer {
       const {layersData, highlightedObject} = this.state;
       const {circleAttributes, lineAttributes} = layersData || {};
       if (circleAttributes && lineAttributes) {
-        const flowMapColors = getFlowMapColors(this._getSettingsState());
+        const flowmapColors = getFlowmapColors(this._getSettingsState());
         const outlineColor = colorAsRgba(
-          flowMapColors.outlineColor || (this.props.darkMode ? '#000' : '#fff'),
+          flowmapColors.outlineColor || (this.props.darkMode ? '#000' : '#fff'),
         );
         const commonLineLayerProps = {
           data: lineAttributes,
@@ -395,8 +441,10 @@ export default class FlowMapLayer<L, F> extends CompositeLayer {
             this.getSubLayerProps({
               id: 'circles',
               data: circleAttributes,
-              emptyColor: [0, 0, 0, 255],
-              emptyOutlineColor: [0, 0, 0, 255],
+              emptyColor: this.props.darkMode
+                ? [0, 0, 0, 255]
+                : [255, 255, 255, 255],
+              outlineEmptyMix: 0.4,
             }),
           ),
         );
@@ -405,28 +453,34 @@ export default class FlowMapLayer<L, F> extends CompositeLayer {
             case HighlightType.LOCATION:
               layers.push(
                 new ScatterplotLayer({
-                  id: 'location-highlight',
-                  data: [highlightedObject],
-                  stroked: true,
-                  filled: false,
-                  lineWidthUnits: 'pixels',
-                  getLineWidth: 2,
-                  radiusUnits: 'pixels',
-                  getRadius: (d: HighlightedLocationObject) => d.radius,
-                  getLineColor: (d: HighlightedLocationObject) =>
-                    colorAsRgba('orange'),
-                  getPosition: (d: HighlightedLocationObject) => d.centroid,
+                  ...this.getSubLayerProps({
+                    id: 'location-highlight',
+                    data: [highlightedObject],
+                    pickable: false,
+                    antialiasing: true,
+                    stroked: true,
+                    filled: false,
+                    lineWidthUnits: 'pixels',
+                    getLineWidth: 2,
+                    radiusUnits: 'pixels',
+                    getRadius: (d: HighlightedLocationObject) => d.radius,
+                    getLineColor: colorAsRgba(this.props.highlightColor),
+                    getPosition: (d: HighlightedLocationObject) => d.coords,
+                  }),
                 }),
               );
               break;
             case HighlightType.FLOW:
               layers.push(
                 new FlowLinesLayer({
-                  id: 'flow-highlight',
-                  data: highlightedObject.lineAttributes,
-                  drawOutline: true,
-                  outlineColor: colorAsRgba('orange'),
-                  outlineThickness: 1,
+                  ...this.getSubLayerProps({
+                    id: 'flow-highlight',
+                    data: highlightedObject.lineAttributes,
+                    drawOutline: true,
+                    pickable: false,
+                    outlineColor: colorAsRgba(this.props.highlightColor),
+                    outlineThickness: 1,
+                  }),
                 }),
               );
               break;
@@ -439,7 +493,7 @@ export default class FlowMapLayer<L, F> extends CompositeLayer {
   }
 }
 
-function asViewState(viewport: Record<string, any>): ViewportProps {
+function pickViewportProps(viewport: Record<string, any>): ViewportProps {
   const {width, height, longitude, latitude, zoom, pitch, bearing} = viewport;
   return {
     width,

package/src/index.ts

@@ -1,7 +1,7 @@
 export {default as AnimatedFlowLinesLayer} from './AnimatedFlowLinesLayer';
 export {default as FlowLinesLayer} from './FlowLinesLayer';
 export {default as FlowCirclesLayer} from './FlowCirclesLayer';
-export {default as FlowMapLayer} from './FlowMapLayer';
-export type {FlowMapLayerProps} from './FlowMapLayer';
+export {default as FlowmapLayer} from './FlowmapLayer';
+export type {FlowmapLayerProps} from './FlowmapLayer';
 
 export * from './types';

package/src/types.ts

@@ -45,7 +45,7 @@ export interface FlowPickingInfo<L, F> extends PickingInfo<F | AggregateFlow> {
 //   object: FlowLocation;
 // }
 
-export type FlowLayerPickingInfo<L, F> =
+export type FlowmapLayerPickingInfo<L, F> =
   | LocationPickingInfo<L>
   // | LocationAreaPickingInfo
   | FlowPickingInfo<L, F>;

package/dist/FlowMapLayer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FlowMapLayer.d.ts","sourceRoot":"","sources":["../src/FlowMapLayer.ts"],"names":[],"mappings":"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"}