Refactor deck.gl charts to new API; Fix Multi Layer results error

Author: DamianPendrak

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

@@ -169,12 +169,12 @@ const CategoricalDeckGLContainer = (props: CategoricalDeckGLContainerProps) => {
           }));
         }
         case COLOR_SCHEME_TYPES.color_breakpoints: {
-          const defaultBreakpointColor = fd.deafult_breakpoint_color
+          const defaultBreakpointColor = fd.default_breakpoint_color
             ? [
-                fd.deafult_breakpoint_color.r,
-                fd.deafult_breakpoint_color.g,
-                fd.deafult_breakpoint_color.b,
-                fd.deafult_breakpoint_color.a * 255,
+                fd.default_breakpoint_color.r,
+                fd.default_breakpoint_color.g,
+                fd.default_breakpoint_color.b,
+                fd.default_breakpoint_color.a * 255,
               ]
             : [
                 DEFAULT_DECKGL_COLOR.r,

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

@@ -0,0 +1,86 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+import {
+  buildQueryContext,
+  ensureIsArray,
+  SqlaFormData,
+} from '@superset-ui/core';
+import {
+  getSpatialColumns,
+  addSpatialNullFilters,
+  SpatialFormData,
+} from '../spatialUtils';
+
+export interface DeckArcFormData extends SqlaFormData {
+  start_spatial: SpatialFormData['spatial'];
+  end_spatial: SpatialFormData['spatial'];
+  dimension?: string;
+  js_columns?: string[];
+}
+
+export default function buildQuery(formData: DeckArcFormData) {
+  const { start_spatial, end_spatial, dimension, js_columns } = formData;
+
+  if (!start_spatial || !end_spatial) {
+    throw new Error(
+      'Start and end spatial configurations are required for Arc charts',
+    );
+  }
+
+  return buildQueryContext(formData, baseQueryObject => {
+    const startSpatialColumns = getSpatialColumns(start_spatial);
+    const endSpatialColumns = getSpatialColumns(end_spatial);
+
+    let columns = [
+      ...(baseQueryObject.columns || []),
+      ...startSpatialColumns,
+      ...endSpatialColumns,
+    ];
+
+    if (dimension) {
+      columns = [...columns, dimension];
+    }
+
+    // Add js_columns to ensure they're available for JavaScript functions
+    const jsColumns = ensureIsArray(js_columns || []);
+    jsColumns.forEach(col => {
+      if (!columns.includes(col)) {
+        columns.push(col);
+      }
+    });
+
+    let filters = addSpatialNullFilters(
+      start_spatial,
+      ensureIsArray(baseQueryObject.filters || []),
+    );
+    filters = addSpatialNullFilters(end_spatial, filters);
+
+    const isTimeseries = !!formData.time_grain_sqla;
+
+    return [
+      {
+        ...baseQueryObject,
+        columns,
+        filters,
+        is_timeseries: isTimeseries,
+        row_limit: baseQueryObject.row_limit,
+      },
+    ];
+  });
+}

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

@@ -19,7 +19,8 @@
 import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
 import thumbnail from './images/thumbnail.png';
 import example from './images/example.png';
-import transformProps from '../../transformProps';
+import transformProps from './transformProps';
+import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -36,13 +37,13 @@ const metadata = new ChartMetadata({
   name: t('deck.gl Arc'),
   thumbnail,
   exampleGallery: [{ url: example }],
-  useLegacyApi: true,
   tags: [t('deckGL'), t('Geo'), t('3D'), t('Relational'), t('Web')],
 });
 
 export default class ArcChartPlugin extends ChartPlugin {
   constructor() {
     super({
+      buildQuery,
       loadChart: () => import('./Arc'),
       controlPanel,
       metadata,

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

@@ -0,0 +1,151 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+import { ChartProps } from '@superset-ui/core';
+import {
+  processSpatialData,
+  getMapboxApiKey,
+  addJsColumnsToExtraProps,
+  DataRecord,
+} from '../spatialUtils';
+import { DeckArcFormData } from './buildQuery';
+
+const NOOP = () => {};
+
+interface ArcPoint {
+  sourcePosition: [number, number];
+  targetPosition: [number, number];
+  cat_color?: string;
+  __timestamp?: number;
+  extraProps?: Record<string, unknown>;
+  [key: string]: unknown;
+}
+
+function processArcData(
+  records: DataRecord[],
+  startSpatial: DeckArcFormData['start_spatial'],
+  endSpatial: DeckArcFormData['end_spatial'],
+  dimension?: string,
+  jsColumns?: string[],
+): ArcPoint[] {
+  if (!startSpatial || !endSpatial || !records.length) {
+    return [];
+  }
+
+  const startFeatures = processSpatialData(records, startSpatial);
+  const endFeatures = processSpatialData(records, endSpatial);
+
+  return records
+    .map((record, index) => {
+      const startFeature = startFeatures[index];
+      const endFeature = endFeatures[index];
+
+      if (!startFeature || !endFeature) {
+        return null;
+      }
+
+      let arcPoint: ArcPoint = {
+        sourcePosition: startFeature.position,
+        targetPosition: endFeature.position,
+        extraProps: {},
+      };
+
+      arcPoint = addJsColumnsToExtraProps(arcPoint, record, jsColumns);
+
+      if (dimension && record[dimension] != null) {
+        arcPoint.cat_color = String(record[dimension]);
+      }
+
+      // eslint-disable-next-line no-underscore-dangle
+      if (record.__timestamp != null) {
+        // eslint-disable-next-line no-underscore-dangle
+        arcPoint.__timestamp = Number(record.__timestamp);
+      }
+      Object.keys(record).forEach(key => {
+        if (
+          key !== '__timestamp' &&
+          key !== dimension &&
+          !(jsColumns || []).includes(key)
+        ) {
+          arcPoint[key] = record[key];
+        }
+      });
+
+      return arcPoint;
+    })
+    .filter((point): point is ArcPoint => point !== null);
+}
+
+export default function transformProps(chartProps: ChartProps) {
+  const {
+    datasource,
+    height,
+    hooks,
+    queriesData,
+    rawFormData: formData,
+    width,
+    filterState,
+    emitCrossFilters,
+  } = chartProps;
+
+  const {
+    onAddFilter = NOOP,
+    onContextMenu = NOOP,
+    setControlValue = NOOP,
+    setDataMask = NOOP,
+  } = hooks;
+
+  const { start_spatial, end_spatial, dimension, js_columns } =
+    formData as DeckArcFormData;
+
+  const queryData = queriesData[0];
+  const records = queryData?.data || [];
+  const features = processArcData(
+    records,
+    start_spatial,
+    end_spatial,
+    dimension,
+    js_columns,
+  );
+
+  return {
+    datasource,
+    emitCrossFilters,
+    formData,
+    height,
+    onAddFilter,
+    onContextMenu,
+    payload: {
+      ...queryData,
+      data: {
+        features,
+        mapboxApiKey: getMapboxApiKey(),
+      },
+    },
+    setControlValue,
+    filterState,
+    viewport: {
+      ...formData.viewport,
+      height,
+      width,
+    },
+    width,
+    setDataMask,
+    setTooltip: () => {},
+  };
+}

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

@@ -0,0 +1,34 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+import { SpatialFormData, buildSpatialQuery } from '../spatialUtils';
+
+export interface DeckContourFormData extends SpatialFormData {
+  cellSize?: string;
+  aggregation?: string;
+  contours?: Array<{
+    color: { r: number; g: number; b: number };
+    lowerThreshold: number;
+    upperThreshold?: number;
+    strokeWidth?: number;
+  }>;
+}
+
+export default function buildQuery(formData: DeckContourFormData) {
+  return buildSpatialQuery(formData);
+}

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

@@ -17,10 +17,11 @@
  * under the License.
  */
 import { t, ChartMetadata, ChartPlugin, Behavior } from '@superset-ui/core';
-import transformProps from '../../transformProps';
-import controlPanel from './controlPanel';
 import thumbnail from './images/thumbnail.png';
 import example from './images/example.png';
+import buildQuery from './buildQuery';
+import transformProps from './transformProps';
+import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
   category: t('Map'),
@@ -31,14 +32,14 @@ const metadata = new ChartMetadata({
   exampleGallery: [{ url: example }],
   name: t('deck.gl Contour'),
   thumbnail,
-  useLegacyApi: true,
   tags: [t('deckGL'), t('Spatial'), t('Comparison')],
   behaviors: [Behavior.InteractiveChart],
 });
 
 export default class ContourChartPlugin extends ChartPlugin {
   constructor() {
     super({
+      buildQuery,
       loadChart: () => import('./Contour'),
       controlPanel,
       metadata,

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

@@ -0,0 +1,22 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you 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.
+ */
+import { transformSpatialProps } from '../spatialUtils';
+
+// Use the generic spatial transform function directly
+export default transformSpatialProps;

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

@@ -72,7 +72,7 @@ export const getLayer: GetLayerType<GridLayer> = function ({
 
   const colorSchemeType = fd.color_scheme_type;
   const colorRange = getColorRange({
-    defaultBreakpointsColor: fd.deafult_breakpoint_color,
+    defaultBreakpointsColor: fd.default_breakpoint_color,
     colorSchemeType,
     colorScale,
     colorBreakpoints,