feat(deckgl): add selected cross-filter indication (apache#34322)

Author: DamianPendrak

superset-frontend/plugins/legacy-preset-chart-deckgl/src/CategoricalDeckGLContainer.tsx

@@ -89,6 +89,7 @@ export type CategoricalDeckGLContainerProps = {
   width: number;
   viewport: Viewport;
   getLayer: GetLayerType<unknown>;
+  getHighlightLayer?: GetLayerType<unknown>;
   payload: JsonObject;
   onAddFilter?: HandlerFunction;
   setControlValue: (control: string, value: JsonValue) => void;
@@ -213,6 +214,7 @@ const CategoricalDeckGLContainer = (props: CategoricalDeckGLContainerProps) => {
   const getLayers = useCallback(() => {
     const {
       getLayer,
+      getHighlightLayer,
       payload,
       formData: fd,
       onAddFilter,
@@ -244,19 +246,27 @@ const CategoricalDeckGLContainer = (props: CategoricalDeckGLContainerProps) => {
       data: { ...payload.data, features },
     };
 
-    return [
-      getLayer({
-        formData: fd,
-        payload: filteredPayload,
-        onAddFilter,
-        setTooltip,
-        datasource: props.datasource,
-        onContextMenu,
-        filterState,
-        setDataMask,
-        emitCrossFilters,
-      }) as Layer,
-    ];
+    const layerProps = {
+      formData: fd,
+      payload: filteredPayload,
+      onAddFilter,
+      setTooltip,
+      datasource: props.datasource,
+      onContextMenu,
+      filterState,
+      setDataMask,
+      emitCrossFilters,
+    };
+
+    const layer = getLayer(layerProps) as Layer;
+
+    if (emitCrossFilters && filterState?.value && getHighlightLayer) {
+      const highlightLayer = getHighlightLayer(layerProps) as Layer;
+
+      return [layer, highlightLayer];
+    }
+
+    return [layer];
   }, [addColor, categories, props, setTooltip]);
 
   const toggleCategory = useCallback(

superset-frontend/plugins/legacy-preset-chart-deckgl/src/Multi/Multi.tsx

@@ -23,8 +23,11 @@ import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { isEqual } from 'lodash';
 import {
   AdhocFilter,
+  ContextMenuFilters,
+  DataMask,
   Datasource,
   ensureIsArray,
+  FilterState,
   HandlerFunction,
   isDefined,
   JsonObject,
@@ -65,7 +68,15 @@ export type DeckMultiProps = {
   height: number;
   width: number;
   datasource: Datasource;
+  setDataMask?: (dataMask: DataMask) => void;
+  onContextMenu?: (
+    clientX: number,
+    clientY: number,
+    filters?: ContextMenuFilters,
+  ) => void;
   onSelect: () => void;
+  filterState?: FilterState;
+  emitCrossFilters?: boolean;
 };
 
 const DeckMulti = (props: DeckMultiProps) => {
@@ -175,16 +186,14 @@ const DeckMulti = (props: DeckMultiProps) => {
   const createLayerFromData = useCallback(
     (subslice: JsonObject, json: JsonObject): Layer =>
       // @ts-ignore TODO(hainenber): define proper type for `form_data.viz_type` and call signature for functions in layerGenerators.
-      layerGenerators[subslice.form_data.viz_type](
-        subslice.form_data,
-        json,
-        props.onAddFilter,
+      layerGenerators[subslice.form_data.viz_type]({
+        formData: subslice.form_data,
+        payload: json,
         setTooltip,
-        props.datasource,
-        [],
-        props.onSelect,
-      ),
-    [props.onAddFilter, props.onSelect, props.datasource, setTooltip],
+        datasource: props.datasource,
+        onSelect: props.onSelect,
+      }),
+    [props.onSelect, props.datasource, setTooltip],
   );
 
   const loadSingleLayer = useCallback(

superset-frontend/plugins/legacy-preset-chart-deckgl/src/factory.tsx

@@ -87,6 +87,7 @@ interface GetPointsType {
 export function createDeckGLComponent(
   getLayer: GetLayerType<unknown>,
   getPoints: GetPointsType,
+  getHighlightLayer?: GetLayerType<unknown>,
 ) {
   // Higher order component
   return memo((props: DeckGLComponentProps) => {
@@ -118,7 +119,7 @@ export function createDeckGLComponent(
       }
     }, []);
 
-    const computeLayer = useCallback(
+    const computeLayers = useCallback(
       (props: DeckGLComponentProps) => {
         const {
           formData,
@@ -130,7 +131,7 @@ export function createDeckGLComponent(
           emitCrossFilters,
         } = props;
 
-        return getLayer({
+        const layerProps = {
           formData,
           payload,
           onAddFilter,
@@ -139,7 +140,17 @@ export function createDeckGLComponent(
           onContextMenu,
           filterState,
           emitCrossFilters,
-        }) as Layer;
+        };
+
+        const layer = getLayer(layerProps) as Layer;
+
+        if (emitCrossFilters && filterState?.value && getHighlightLayer) {
+          const highlightLayer = getHighlightLayer(layerProps) as Layer;
+
+          return [layer, highlightLayer];
+        }
+
+        return [layer];
       },
       [setTooltip],
     );
@@ -152,7 +163,7 @@ export function createDeckGLComponent(
       setCategories(categories);
     }, [props]);
 
-    const [layer, setLayer] = useState(computeLayer(props));
+    const [layers, setLayers] = useState(computeLayers(props));
 
     useEffect(() => {
       // Only recompute the layer if anything BUT the viewport has changed
@@ -167,9 +178,9 @@ export function createDeckGLComponent(
         viewport: null,
       };
       if (!isEqual(prevFdNoVP, currFdNoVP) || prevPayload !== props.payload) {
-        setLayer(computeLayer(props));
+        setLayers(computeLayers(props));
       }
-    }, [computeLayer, prevFormData, prevFilterState, prevPayload, props]);
+    }, [computeLayers, prevFormData, prevFilterState, prevPayload, props]);
 
     const { formData, payload, setControlValue, height, width } = props;
 
@@ -179,7 +190,7 @@ export function createDeckGLComponent(
           ref={containerRef}
           mapboxApiAccessToken={payload.data.mapboxApiKey}
           viewport={viewport}
-          layers={[layer]}
+          layers={layers}
           mapStyle={formData.mapbox_style}
           setControlValue={setControlValue}
           width={width}
@@ -200,6 +211,7 @@ export function createDeckGLComponent(
 export function createCategoricalDeckGLComponent(
   getLayer: GetLayerType<Layer>,
   getPoints: GetPointsType,
+  getHighlightLayer?: GetLayerType<Layer>,
 ) {
   return function Component(props: DeckGLComponentProps) {
     const {
@@ -224,6 +236,7 @@ export function createCategoricalDeckGLComponent(
         setControlValue={setControlValue}
         viewport={viewport}
         getLayer={getLayer}
+        getHighlightLayer={getHighlightLayer}
         payload={payload}
         getPoints={getPoints}
         width={width}

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/Arc.tsx

@@ -23,6 +23,7 @@ import { commonLayerProps } from '../common';
 import { GetLayerType, createCategoricalDeckGLComponent } from '../../factory';
 import TooltipRow from '../../TooltipRow';
 import { Point } from '../../types';
+import { HIGHLIGHT_COLOR_ARRAY, TRANSPARENT_COLOR_ARRAY } from '../../utils';
 
 export function getPoints(data: JsonObject[]) {
   const points: Point[] = [];
@@ -73,7 +74,7 @@ export const getLayer: GetLayerType<ArcLayer> = function ({
 
   return new ArcLayer({
     data,
-    getSourceColor: (d: any) => {
+    getSourceColor: (d: JsonObject) => {
       if (colorSchemeType === COLOR_SCHEME_TYPES.fixed_color) {
         return [sc.r, sc.g, sc.b, 255 * sc.a];
       }
@@ -98,7 +99,50 @@ export const getLayer: GetLayerType<ArcLayer> = function ({
       filterState,
       emitCrossFilters,
     }),
+    opacity: filterState?.value ? 0.1 : 1,
   });
 };
 
-export default createCategoricalDeckGLComponent(getLayer, getPoints);
+export const getHighlightLayer: GetLayerType<ArcLayer> = function ({
+  formData,
+  payload,
+  filterState,
+}) {
+  const fd = formData;
+  const data = payload.data.features;
+
+  const getColor = (d: {
+    sourcePosition: [number, number];
+    targetPosition: [number, number];
+  }) => {
+    const sourcePosition = filterState?.value[0];
+    const targetPosition = filterState?.value[1];
+
+    if (
+      sourcePosition &&
+      targetPosition &&
+      d.sourcePosition[0] === sourcePosition[0] &&
+      d.sourcePosition[1] === sourcePosition[1] &&
+      d.targetPosition[0] === targetPosition[0] &&
+      d.targetPosition[1] === targetPosition[1]
+    ) {
+      return HIGHLIGHT_COLOR_ARRAY;
+    }
+
+    return TRANSPARENT_COLOR_ARRAY;
+  };
+
+  return new ArcLayer({
+    data,
+    getSourceColor: getColor,
+    getTargetColor: getColor,
+    id: `path-hihglight-layer-${fd.slice_id}` as const,
+    getWidth: fd.stroke_width ? fd.stroke_width : 3,
+  });
+};
+
+export default createCategoricalDeckGLComponent(
+  getLayer,
+  getPoints,
+  getHighlightLayer,
+);

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Contour/Contour.tsx

@@ -17,13 +17,15 @@
  * under the License.
  */
 import { ContourLayer } from '@deck.gl/aggregation-layers';
+import { PolygonLayer } from '@deck.gl/layers';
 import { Position } from '@deck.gl/core';
 import { t } from '@superset-ui/core';
 import { commonLayerProps } from '../common';
 import sandboxedEval from '../../utils/sandbox';
 import { GetLayerType, createDeckGLComponent } from '../../factory';
 import { ColorType } from '../../types';
 import TooltipRow from '../../TooltipRow';
+import { HIGHLIGHT_COLOR_ARRAY } from '../../utils';
 
 function setTooltipContent(o: any) {
   return (
@@ -112,4 +114,56 @@ export function getPoints(data: any[]) {
   return data.map(d => d.position);
 }
 
-export default createDeckGLComponent(getLayer, getPoints);
+export const getHighlightLayer: GetLayerType<PolygonLayer> = function ({
+  formData,
+  filterState,
+  setDataMask,
+  onContextMenu,
+  setTooltip,
+  emitCrossFilters,
+}) {
+  const fd = formData;
+
+  const fromLonLat = filterState?.value[0];
+  const toLonLat = filterState?.value[1];
+
+  const minLon = fromLonLat[0];
+  const maxLon = toLonLat[0];
+  const minLat = fromLonLat[1];
+  const maxLat = toLonLat[1];
+
+  const boxPolygon = [
+    [minLon, minLat],
+    [maxLon, minLat],
+    [maxLon, maxLat],
+    [minLon, maxLat],
+    [minLon, minLat],
+  ];
+
+  return new PolygonLayer({
+    id: `contour-highlight-layer-${fd.slice_id}`,
+    data: [{ polygon: boxPolygon }],
+    getPolygon: (d: any) => d.polygon,
+    getFillColor: [
+      HIGHLIGHT_COLOR_ARRAY[0],
+      HIGHLIGHT_COLOR_ARRAY[1],
+      HIGHLIGHT_COLOR_ARRAY[2],
+      100,
+    ],
+    getLineColor: HIGHLIGHT_COLOR_ARRAY,
+    getLineWidth: 4,
+    filled: true,
+    stroked: true,
+    ...commonLayerProps({
+      formData: fd,
+      setTooltip,
+      setTooltipContent,
+      onContextMenu,
+      setDataMask,
+      filterState,
+      emitCrossFilters,
+    }),
+  });
+};
+
+export default createDeckGLComponent(getLayer, getPoints, getHighlightLayer);

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/Geojson.tsx

@@ -43,6 +43,7 @@ import fitViewport, { Viewport } from '../../utils/fitViewport';
 import { TooltipProps } from '../../components/Tooltip';
 import { Point } from '../../types';
 import { GetLayerType } from '../../factory';
+import { HIGHLIGHT_COLOR_ARRAY } from '../../utils';
 
 type ProcessedFeature = Feature<Geometry, GeoJsonProperties> & {
   properties: JsonObject;
@@ -119,7 +120,21 @@ function setTooltipContent(o: JsonObject) {
   );
 }
 
-const getFillColor = (feature: JsonObject) => feature?.properties?.fillColor;
+const getFillColor = (feature: JsonObject, filterStateValue: unknown[]) => {
+  if (filterStateValue) {
+    if (
+      JSON.stringify(feature.geometry.coordinates) ===
+      JSON.stringify(filterStateValue?.[0])
+    ) {
+      return HIGHLIGHT_COLOR_ARRAY;
+    }
+
+    const fillColor = feature?.properties?.fillColor;
+    fillColor[3] = 125;
+    return fillColor;
+  }
+  return feature?.properties?.fillColor;
+};
 const getLineColor = (feature: JsonObject) => feature?.properties?.strokeColor;
 
 export const getLayer: GetLayerType<GeoJsonLayer> = function ({
@@ -160,7 +175,8 @@ export const getLayer: GetLayerType<GeoJsonLayer> = function ({
     extruded: fd.extruded,
     filled: fd.filled,
     stroked: fd.stroked,
-    getFillColor,
+    getFillColor: (feature: JsonObject) =>
+      getFillColor(feature, filterState?.value),
     getLineColor,
     getLineWidth: fd.line_width || 1,
     pointRadiusScale: fd.point_radius_scale,
@@ -188,6 +204,7 @@ export type DeckGLGeoJsonProps = {
   filterState: FilterState;
   onContextMenu: HandlerFunction;
   setDataMask: SetDataMaskHook;
+  emitCrossFilters?: boolean;
 };
 
 export function getPoints(data: Point[]) {
@@ -242,6 +259,7 @@ const DeckGLGeoJson = (props: DeckGLGeoJsonProps) => {
     onAddFilter,
     payload,
     formData,
+    emitCrossFilters: props.emitCrossFilters,
   });
 
   return (