Merge pull request #18 from imec-int/feature/PREC-143-request-mitigat…

…ion-actions [PREC-141] Improve graph look
imec-int · Oct 27, 2022 · 3d5f64c · 3d5f64c
2 parents 837135c + 1a6964b
commit 3d5f64c
Show file tree

Hide file tree

Showing 3 changed files with 14,066 additions and 13,910 deletions.
diff --git a/examples/demo-app/src/app.js b/examples/demo-app/src/app.js
@@ -317,11 +317,11 @@ class App extends Component {
                         type: 'standard',
                         category: 'BelAQI',
                         ranges: [1, 2, 3, 4, 5],
-                        colors: ['#4dff01', '#fdff00', '#f9bb02', '#f66600', '#f50b00'],
+                        colors: ['#83E980', '#FFFC58', '#FEC44E', '#FF8A3F', '#ff4545'],
                         reversed: false
                       },
-                      strokeColor: [11, 255, 255],
-                      opacity: 0.8
+                      strokeColor: [50, 50, 50],
+                      opacity: 1
                     }
                   },
                   visualChannels: {

diff --git a/src/layers/graph-layer/graph-layer.js b/src/layers/graph-layer/graph-layer.js
@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import {BrushingExtension} from '@deck.gl/extensions';
-import {IconLayer, LineLayer} from '@deck.gl/layers';
+import {IconLayer, LineLayer, ScatterplotLayer} from '@deck.gl/layers';
 
 import {CHANNEL_SCALES} from 'constants/default-settings';
 import Layer from '../base-layer';
@@ -36,7 +36,6 @@ export const iconPosAccessor = ({icon}) => dc => d => {
     url: dc.valueAt(d.index, icon.fieldIdx),
     width: 64,
     height: 64,
-    anchorY: 64,
     mask: true
   };
 };
@@ -260,9 +259,12 @@ export default class GraphLayer extends Layer {
       // eslint-disable-next-line no-unused-vars
       data: {data: not_in_use, nodes, edges, ...data},
       gpuFilter,
-      interactionConfig
+      interactionConfig,
+      mapState
     } = opts;
 
+    const radiusScale = this.getRadiusScaleByZoom(mapState, false);
+
     const updateTriggers = {
       getPosition: this.config.columns,
       getFilterValue: gpuFilter.filterValueUpdateTriggers,
@@ -274,45 +276,98 @@ export default class GraphLayer extends Layer {
     const extensions = [...defaultLayerProps.extensions, brushingExtension];
 
     return [
+      // White background border for accentuating the edges. This is clickable.
       new LineLayer({
         ...defaultLayerProps,
-        id: `edges-${defaultLayerProps.id}`,
-        idx: defaultLayerProps.idx,
         ...brushingProps,
         ...data,
+        id: `edges-${defaultLayerProps.id}`,
+        idx: defaultLayerProps.idx,
         data: edges,
+        updateTriggers,
+        extensions,
         parameters: {
           // circles will be flat on the map when the altitude column is not used
           depthTest: this.config.columns.altitude?.fieldIdx > -1
         },
+
+        // LineLayer properties
+        getColor: [255, 255, 255], // Background line is always white right now
+        getWidth: d => 6,
         lineWidthUnits: 'pixels',
+        getSourcePosition: d => d.coordinates.from,
+        getTargetPosition: d => d.coordinates.to
+      }),
+      // Foreground layer for the edges, not clickable. This contains the actual color of the edge.
+      new LineLayer({
+        ...defaultLayerProps,
+        id: `edges-${defaultLayerProps.id}-color`,
+        idx: defaultLayerProps.idx,
+        ...data,
+        data: edges,
         updateTriggers,
-        extensions,
+        parameters: {
+          // circles will be flat on the map when the altitude column is not used
+          depthTest: this.config.columns.altitude?.fieldIdx > -1
+        },
 
-        // LineLayer stuff
+        // LineLayer properties
         getColor: data.getLineColor,
-        getWidth: 8,
+        getWidth: d => 2,
+        lineWidthUnits: 'pixels',
         getSourcePosition: d => d.coordinates.from,
         getTargetPosition: d => d.coordinates.to
       }),
-      new IconLayer({
+      // We use a "billboard" scatterplot for the circle background of each icon. This is clickable
+      new ScatterplotLayer({
         ...defaultLayerProps,
+        ...brushingProps,
+        ...data,
         id: `nodes-${defaultLayerProps.id}`,
         idx: defaultLayerProps.idx,
-        ...brushingProps,
-        // ...layerProps,
+        updateTriggers,
+        extensions,
+        parameters: {
+          // circles will be flat on the map when the altitude column is not used
+          depthTest: this.config.columns.altitude?.fieldIdx > -1
+        },
+
+        // ScatterplotLayer properties
+        billboard: true,
+        filled: true,
+        stroked: true,
+        data: nodes,
+        getPosition: d => d.coordinates,
+
+        getRadius: d => 16,
+        radiusUnits: 'pixels',
+        getFillColor: data.getIconColor,
+
+        getLineWidth: d => 2,
+        lineWidthUnits: 'pixels',
+        getLineColor: data.getLineColor,
+
+        radiusScale,
+        lineWidthScale: radiusScale
+      }),
+      // The icon visible inside the circle background, not clickable.
+      new IconLayer({
+        ...defaultLayerProps,
+        id: `nodes-${defaultLayerProps.id}-icons`,
+        idx: defaultLayerProps.idx,
         ...data,
         data: nodes,
+        updateTriggers,
         parameters: {
+          // circles will be flat on the map when the altitude column is not used
           depthTest: this.config.columns.altitude?.fieldIdx > -1
         },
-        sizeUnits: 'pixels',
-        updateTriggers,
-        extensions,
 
-        // IconLayer stuff
-        getSize: 32,
-        getColor: data.getIconColor
+        // IconLayer properties
+        getSize: d => 16,
+        sizeUnits: 'pixels',
+        getColor: data.getLineColor,
+        sizeScale: radiusScale
       })
     ];
   }