@flowmap.gl/layers 8.0.0-alpha.2 → 8.0.0-alpha.20

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

@@ -19,51 +19,54 @@ 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,
-  LocationFilterMode,
+  LocalFlowmapDataProvider,
   ViewportProps,
-  FlowMapAggregateAccessors,
-  ClusterNode,
-  AggregateFlow,
+  FlowmapAggregateAccessors,
+  FilterState,
 } 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>;
+  filter?: FilterState;
   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 +76,7 @@ enum HighlightType {
 
 type HighlightedLocationObject = {
   type: HighlightType.LOCATION;
-  centroid: [number, number];
+  coords: [number, number];
   radius: number;
 };
 
@@ -85,15 +88,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 +105,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 +130,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 +152,50 @@ 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,
     };
   }
 
-  private _updateAccessors() {
-    this.state?.dataProvider?.setAccessors(this.props);
-    this.setState({accessors: new FlowMapAggregateAccessors(this.props)});
+  getPickingInfo({info}: Record<string, any>) {
+    // This is for onHover event handlers set on the <DeckGL> component
+    if (!info.object) {
+      const object = this.state?.pickingInfo?.object;
+      if (object) {
+        return {
+          ...info,
+          object,
+          picked: true,
+        };
+      }
+    }
+    return info;
   }
 
-  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 _updateAccessors() {
+  //   this.state?.dataProvider?.setAccessors(this.props);
+  //   this.setState({accessors: new FlowmapAggregateAccessors(this.props)});
+  // }
+
+  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 {
@@ -183,13 +212,8 @@ export default class FlowMapLayer<L, F> extends CompositeLayer {
   }
 
   updateState({oldProps, props, changeFlags}: Record<string, any>): void {
-    const {dataProvider, highlightedObject} = this.state || {};
-    if (!dataProvider) {
-      return;
-    }
-
     if (changeFlags.propsChanged) {
-      this._updateAccessors();
+      // this._updateAccessors();
     }
     if (changeFlags.dataChanged) {
       this._updateDataProvider();
@@ -200,12 +224,17 @@ export default class FlowMapLayer<L, F> extends CompositeLayer {
       });
     }
 
-    if (changeFlags.viewportChanged || changeFlags.propsOrDataChanged) {
-      dataProvider.setFlowMapState(this._getFlowMapState());
-      (async () => {
-        const layersData = await dataProvider.getLayersData();
-        this.setState({layersData});
-      })();
+    if (
+      changeFlags.viewportChanged ||
+      changeFlags.propsOrDataChanged // TODO can we ignore accessor props changes?
+    ) {
+      const {dataProvider} = this.state || {};
+      if (dataProvider) {
+        dataProvider.setFlowmapState(this._getFlowmapState());
+        dataProvider.updateLayersData((layersData: LayersData | undefined) => {
+          this.setState({layersData});
+        }, changeFlags);
+      }
     }
   }
 
@@ -217,10 +246,13 @@ export default class FlowMapLayer<L, F> extends CompositeLayer {
       clusteringEnabled,
       clusteringLevel,
       fadeEnabled,
+      fadeOpacityEnabled,
       clusteringAuto,
       darkMode,
       fadeAmount,
       colorScheme,
+      highlightColor,
+      maxTopFlowsDisplayNum,
     } = this.props;
     return {
       locationTotalsEnabled,
@@ -229,40 +261,41 @@ 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),
-      filterState: {
-        selectedLocations: undefined,
-        locationFilterMode: LocationFilterMode.ALL,
-        selectedTimeRange: undefined,
-      },
-      settingsState: this._getSettingsState(),
+      viewport: pickViewportProps(this.context.viewport),
+      filter: this.props.filter,
+      settings: this._getSettingsState(),
     };
   }
 
-  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) {
       return undefined;
     }
     const commonInfo = {
-      // ...info,
+      ...info,
+      picked: info.picked,
       layer: info.layer,
       index: info.index,
       x: info.x,
       y: info.y,
       coordinate: info.coordinate,
+      event: info.event,
     };
     if (
       sourceLayer instanceof FlowLinesLayer ||
@@ -280,11 +313,13 @@ export default class FlowMapLayer<L, F> extends CompositeLayer {
         if (origin && dest) {
           return {
             ...commonInfo,
-            type: PickingType.FLOW,
-            object: flow,
-            origin: origin,
-            dest: dest,
-            count: accessors.getFlowMagnitude(flow),
+            object: {
+              type: PickingType.FLOW,
+              flow,
+              origin: origin,
+              dest: dest,
+              count: accessors.getFlowMagnitude(flow),
+            },
           };
         }
       }
@@ -304,13 +339,14 @@ export default class FlowMapLayer<L, F> extends CompositeLayer {
           );
           return {
             ...commonInfo,
-            type: PickingType.LOCATION,
-            object: location,
-            id,
-            name,
-            totals,
-            circleRadius: circleRadius,
-            event: undefined,
+            object: {
+              type: PickingType.LOCATION,
+              location,
+              id,
+              name,
+              totals,
+              circleRadius: circleRadius,
+            },
           };
         }
       }
@@ -330,9 +366,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 +392,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 +406,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 +447,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,
             }),
           ),
         );
@@ -409,15 +463,15 @@ export default class FlowMapLayer<L, F> extends CompositeLayer {
                     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: (d: HighlightedLocationObject) =>
-                      colorAsRgba('orange'),
-                    getPosition: (d: HighlightedLocationObject) => d.centroid,
+                    getLineColor: colorAsRgba(this.props.highlightColor),
+                    getPosition: (d: HighlightedLocationObject) => d.coords,
                   }),
                 }),
               );
@@ -430,7 +484,7 @@ export default class FlowMapLayer<L, F> extends CompositeLayer {
                     data: highlightedObject.lineAttributes,
                     drawOutline: true,
                     pickable: false,
-                    outlineColor: colorAsRgba('orange'),
+                    outlineColor: colorAsRgba(this.props.highlightColor),
                     outlineThickness: 1,
                   }),
                 }),
@@ -445,7 +499,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

@@ -18,34 +18,41 @@ export type DeckGLLayer = Record<string, any>;
 export interface PickingInfo<T> {
   layer: DeckGLLayer;
   index: number;
+  picked: boolean;
   object: T | undefined;
   x: number;
   y: number;
   coordinate: [number, number];
+  event: MouseEvent | undefined;
 }
 
-export interface LocationPickingInfo<L> extends PickingInfo<L | ClusterNode> {
-  type: PickingType.LOCATION;
+export interface LocationPickingInfoObject<L> {
   id: string;
+  type: PickingType.LOCATION;
+  location: L | ClusterNode;
   name: string;
   totals: LocationTotals;
   circleRadius: number;
-  event: MouseEvent | undefined;
 }
 
-export interface FlowPickingInfo<L, F> extends PickingInfo<F | AggregateFlow> {
+export type LocationPickingInfo<L> = PickingInfo<LocationPickingInfoObject<L>>;
+
+export interface FlowPickingInfoObject<L, F> {
   type: PickingType.FLOW;
+  flow: F | AggregateFlow;
   origin: L | ClusterNode;
   dest: L | ClusterNode;
   count: number;
 }
 
+export type FlowPickingInfo<L, F> = PickingInfo<FlowPickingInfoObject<L, F>>;
+
 // export interface LocationAreaPickingInfo extends PickingInfo<PickingInfoData> {
 //   type: PickingType.LOCATION_AREA;
 //   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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"}