@flowmap.gl/layers 8.0.0-alpha.9 → 8.0.2

package/src/FlowmapLayer.ts

@@ -1,38 +1,27 @@
 /*
- * Copyright 2022 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 {CompositeLayer} from '@deck.gl/core';
-import {ScatterplotLayer} from '@deck.gl/layers';
+import {ScatterplotLayer, TextLayer} from '@deck.gl/layers';
 import {
-  colorAsRgba,
+  FilterState,
   FlowLinesLayerAttributes,
+  FlowmapAggregateAccessors,
   FlowmapData,
   FlowmapDataAccessors,
   FlowmapDataProvider,
+  LayersData,
+  LocalFlowmapDataProvider,
+  ViewportProps,
+  colorAsRgba,
   getFlowLineAttributesByIndex,
   getFlowmapColors,
-  getOuterCircleRadiusByIndex,
   getLocationCoordsByIndex,
+  getOuterCircleRadiusByIndex,
   isFlowmapData,
   isFlowmapDataProvider,
-  LayersData,
-  LocalFlowmapDataProvider,
-  LocationFilterMode,
-  ViewportProps,
-  FlowmapAggregateAccessors,
 } from '@flowmap.gl/data';
 import AnimatedFlowLinesLayer from './AnimatedFlowLinesLayer';
 import FlowCirclesLayer from './FlowCirclesLayer';
@@ -44,10 +33,16 @@ import {
   PickingType,
 } from './types';
 
-export type FlowmapLayerProps<L, F> = {
+export type FlowmapLayerProps<
+  L extends Record<string, any>,
+  F extends Record<string, any>,
+> = {
   data?: FlowmapData<L, F>;
   dataProvider?: FlowmapDataProvider<L, F>;
+  filter?: FilterState;
+  locationsEnabled?: boolean;
   locationTotalsEnabled?: boolean;
+  locationLabelsEnabled?: boolean;
   adaptiveScalesEnabled?: boolean;
   animationEnabled?: boolean;
   clusteringEnabled?: boolean;
@@ -68,6 +63,25 @@ export type FlowmapLayerProps<L, F> = {
 } & Partial<FlowmapDataAccessors<L, F>> &
   LayerProps;
 
+const PROPS_TO_CAUSE_LAYER_DATA_UPDATE: string[] = [
+  'filter',
+  'locationsEnabled',
+  'locationTotalsEnabled',
+  'locationLabelsEnabled',
+  'adaptiveScalesEnabled',
+  'animationEnabled',
+  'clusteringEnabled',
+  'clusteringLevel',
+  'fadeEnabled',
+  'fadeOpacityEnabled',
+  'clusteringAuto',
+  'darkMode',
+  'fadeAmount',
+  'colorScheme',
+  'highlightColor',
+  'maxTopFlowsDisplayNum',
+];
+
 enum HighlightType {
   LOCATION = 'location',
   FLOW = 'flow',
@@ -86,20 +100,28 @@ type HighlightedFlowObject = {
 
 type HighlightedObject = HighlightedLocationObject | HighlightedFlowObject;
 
-type State<L, F> = {
+type State<L extends Record<string, any>, F extends Record<string, any>> = {
   accessors: FlowmapAggregateAccessors<L, F>;
   dataProvider: FlowmapDataProvider<L, F>;
   layersData: LayersData | undefined;
   highlightedObject: HighlightedObject | undefined;
+  pickingInfo: FlowmapLayerPickingInfo<L, F> | undefined;
+  lastHoverTime: number | undefined;
+  lastClickTime: number | undefined;
 };
 
 export type SourceEvent = {srcEvent: MouseEvent};
 
-export default class FlowmapLayer<L, F> extends CompositeLayer {
+export default class FlowmapLayer<
+  L extends Record<string, any>,
+  F extends Record<string, any>,
+> extends CompositeLayer {
   static defaultProps = {
     darkMode: true,
     fadeAmount: 50,
+    locationsEnabled: true,
     locationTotalsEnabled: true,
+    locationLabelsEnabled: false,
     animationEnabled: false,
     clusteringEnabled: true,
     fadeEnabled: true,
@@ -116,29 +138,40 @@ export default class FlowmapLayer<L, F> extends CompositeLayer {
   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
-        //   return;
-        // }
-        this.setState({highlightedObject: this._getHighlightedObject(info)});
+        const startTime = Date.now();
+        this.setState({
+          highlightedObject: this._getHighlightedObject(info),
+          lastHoverTime: startTime,
+        });
+
         const {onHover} = props;
         if (onHover) {
-          this._getFlowmapLayerPickingInfo(info).then((info) =>
-            onHover(info, event),
-          );
+          this._getFlowmapLayerPickingInfo(info).then((info) => {
+            if ((this.state?.lastHoverTime ?? 0) <= startTime) {
+              this.setState({pickingInfo: info});
+              onHover(info, event);
+            } else {
+              // Skipping, because this is not the latest hover event
+            }
+          });
         }
       },
       onClick: (info: PickingInfo<any>, event: SourceEvent) => {
         const {onClick} = props;
+        const startTime = Date.now();
+        this.setState({
+          lastClickTime: startTime,
+        });
         if (onClick) {
           this._getFlowmapLayerPickingInfo(info).then((info) => {
-            if (info) {
-              onClick(info, event);
+            if ((this.state?.lastClickTime ?? 0) <= startTime) {
+              this.setState({pickingInfo: info});
+              if (info) {
+                onClick(info, event);
+              }
+            } else {
+              // Skipping, because this is not the latest hover event
             }
           });
         }
@@ -152,18 +185,36 @@ export default class FlowmapLayer<L, F> extends CompositeLayer {
       dataProvider: this._getOrMakeDataProvider(),
       layersData: undefined,
       highlightedObject: undefined,
+      pickingInfo: undefined,
+      lastHoverTime: undefined,
+      lastClickTime: 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 _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;
+    if (isFlowmapDataProvider<L, F>(dataProvider)) {
+      return dataProvider;
     } else if (isFlowmapData<L, F>(data)) {
       const dataProvider = new LocalFlowmapDataProvider<L, F>(this.props);
       dataProvider.setFlowmapData(data);
@@ -192,11 +243,6 @@ 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();
     }
@@ -204,26 +250,32 @@ export default class FlowmapLayer<L, F> extends CompositeLayer {
       this._updateDataProvider();
     }
     if (changeFlags.viewportChanged || changeFlags.dataChanged) {
-      this.setState({
-        highlightedObject: undefined,
-      });
+      this.setState({highlightedObject: undefined});
     }
 
     if (
       changeFlags.viewportChanged ||
-      changeFlags.propsOrDataChanged // TODO can we ignore accessor props changes?
+      changeFlags.dataChanged ||
+      (changeFlags.propsChanged &&
+        PROPS_TO_CAUSE_LAYER_DATA_UPDATE.some(
+          (prop) => oldProps[prop] !== props[prop],
+        ))
     ) {
-      dataProvider.setFlowmapState(this._getFlowmapState());
-      (async () => {
-        const layersData = await dataProvider.getLayersData();
-        this.setState({layersData});
-      })();
+      const {dataProvider} = this.state || {};
+      if (dataProvider) {
+        dataProvider.setFlowmapState(this._getFlowmapState());
+        dataProvider.updateLayersData((layersData: LayersData | undefined) => {
+          this.setState({layersData, highlightedObject: undefined});
+        }, changeFlags);
+      }
     }
   }
 
   private _getSettingsState() {
     const {
+      locationsEnabled,
       locationTotalsEnabled,
+      locationLabelsEnabled,
       adaptiveScalesEnabled,
       animationEnabled,
       clusteringEnabled,
@@ -238,7 +290,9 @@ export default class FlowmapLayer<L, F> extends CompositeLayer {
       maxTopFlowsDisplayNum,
     } = this.props;
     return {
+      locationsEnabled,
       locationTotalsEnabled,
+      locationLabelsEnabled,
       adaptiveScalesEnabled,
       animationEnabled,
       clusteringEnabled,
@@ -257,12 +311,8 @@ export default class FlowmapLayer<L, F> extends CompositeLayer {
   private _getFlowmapState() {
     return {
       viewport: pickViewportProps(this.context.viewport),
-      filterState: {
-        selectedLocations: undefined,
-        locationFilterMode: LocationFilterMode.ALL,
-        selectedTimeRange: undefined,
-      },
-      settingsState: this._getSettingsState(),
+      filter: this.props.filter,
+      settings: this._getSettingsState(),
     };
   }
 
@@ -275,12 +325,14 @@ export default class FlowmapLayer<L, F> extends CompositeLayer {
       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 ||
@@ -298,11 +350,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),
+            },
           };
         }
       }
@@ -322,13 +376,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,
+            },
           };
         }
       }
@@ -386,7 +441,8 @@ export default class FlowmapLayer<L, F> extends CompositeLayer {
     const layers = [];
     if (this.state?.layersData) {
       const {layersData, highlightedObject} = this.state;
-      const {circleAttributes, lineAttributes} = layersData || {};
+      const {circleAttributes, lineAttributes, locationLabels} =
+        layersData || {};
       if (circleAttributes && lineAttributes) {
         const flowmapColors = getFlowmapColors(this._getSettingsState());
         const outlineColor = colorAsRgba(
@@ -468,6 +524,9 @@ export default class FlowmapLayer<L, F> extends CompositeLayer {
                     pickable: false,
                     outlineColor: colorAsRgba(this.props.highlightColor),
                     outlineThickness: 1,
+                    parameters: {
+                      depthTest: false,
+                    },
                   }),
                 }),
               );
@@ -475,6 +534,33 @@ export default class FlowmapLayer<L, F> extends CompositeLayer {
           }
         }
       }
+      if (locationLabels) {
+        layers.push(
+          new TextLayer(
+            this.getSubLayerProps({
+              id: 'location-labels',
+              data: locationLabels,
+              maxWidth: 1000,
+              pickable: false,
+              fontFamily: 'Helvetica',
+              getPixelOffset: (d: string, {index}: {index: number}) => {
+                const r = getOuterCircleRadiusByIndex(circleAttributes, index);
+                return [0, r + 5];
+              },
+              getPosition: (d: string, {index}: {index: number}) => {
+                const pos = getLocationCoordsByIndex(circleAttributes, index);
+                return pos;
+              },
+              getText: (d: string) => d,
+              getSize: 10,
+              getColor: [255, 255, 255, 255],
+              getAngle: 0,
+              getTextAnchor: 'middle',
+              getAlignmentBaseline: 'top',
+            }),
+          ),
+        );
+      }
     }
 
     return layers;

package/src/index.ts

@@ -1,3 +1,9 @@
+/*
+ * Copyright (c) Flowmap.gl contributors
+ * Copyright (c) 2018-2020 Teralytics
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 export {default as AnimatedFlowLinesLayer} from './AnimatedFlowLinesLayer';
 export {default as FlowLinesLayer} from './FlowLinesLayer';
 export {default as FlowCirclesLayer} from './FlowCirclesLayer';

package/src/types.ts

@@ -1,3 +1,9 @@
+/*
+ * Copyright (c) Flowmap.gl contributors
+ * Copyright (c) 2018-2020 Teralytics
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 import {
   AggregateFlow,
   Cluster,
@@ -18,28 +24,35 @@ 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> {
+export interface LocationPickingInfoObject<L> {
+  id: string | number;
   type: PickingType.LOCATION;
-  id: string;
+  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;