refactor(deckgl): update deck.gl charts to use new api (#34859)

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,96 @@
+/**
+ * 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';
+import { addTooltipColumnsToQuery } from '../buildQueryUtils';
+
+export interface DeckArcFormData extends SqlaFormData {
+  start_spatial: SpatialFormData['spatial'];
+  end_spatial: SpatialFormData['spatial'];
+  dimension?: string;
+  js_columns?: string[];
+  tooltip_contents?: unknown[];
+  tooltip_template?: string;
+}
+
+export default function buildQuery(formData: DeckArcFormData) {
+  const {
+    start_spatial,
+    end_spatial,
+    dimension,
+    js_columns,
+    tooltip_contents,
+  } = 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];
+    }
+
+    const jsColumns = ensureIsArray(js_columns || []);
+    jsColumns.forEach(col => {
+      if (!columns.includes(col)) {
+        columns.push(col);
+      }
+    });
+
+    columns = addTooltipColumnsToQuery(columns, tooltip_contents);
+
+    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

@@ -21,7 +21,8 @@ import thumbnail from './images/thumbnail.png';
 import thumbnailDark from './images/thumbnail-dark.png';
 import example from './images/example.png';
 import exampleDark from './images/example-dark.png';
-import transformProps from '../../transformProps';
+import transformProps from './transformProps';
+import buildQuery from './buildQuery';
 import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
@@ -39,13 +40,13 @@ const metadata = new ChartMetadata({
   thumbnail,
   thumbnailDark,
   exampleGallery: [{ url: example, urlDark: exampleDark }],
-  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,108 @@
+/**
+ * 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,
+  addJsColumnsToExtraProps,
+  DataRecord,
+} from '../spatialUtils';
+import {
+  createBaseTransformResult,
+  getRecordsFromQuery,
+  addPropertiesToFeature,
+} from '../transformUtils';
+import { DeckArcFormData } from './buildQuery';
+
+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);
+  const excludeKeys = new Set(
+    ['__timestamp', dimension, ...(jsColumns || [])].filter(
+      (key): key is string => key != null,
+    ),
+  );
+
+  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);
+      }
+
+      arcPoint = addPropertiesToFeature(arcPoint, record, excludeKeys);
+      return arcPoint;
+    })
+    .filter((point): point is ArcPoint => point !== null);
+}
+
+export default function transformProps(chartProps: ChartProps) {
+  const { rawFormData: formData } = chartProps;
+  const { start_spatial, end_spatial, dimension, js_columns } =
+    formData as DeckArcFormData;
+
+  const records = getRecordsFromQuery(chartProps.queriesData);
+  const features = processArcData(
+    records,
+    start_spatial,
+    end_spatial,
+    dimension,
+    js_columns,
+  );
+
+  return createBaseTransformResult(chartProps, features);
+}

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,12 +17,13 @@
  * 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 thumbnailDark from './images/thumbnail-dark.png';
 import example from './images/example.png';
 import exampleDark from './images/example-dark.png';
+import buildQuery from './buildQuery';
+import transformProps from './transformProps';
+import controlPanel from './controlPanel';
 
 const metadata = new ChartMetadata({
   category: t('Map'),
@@ -34,14 +35,14 @@ const metadata = new ChartMetadata({
   name: t('deck.gl Contour'),
   thumbnail,
   thumbnailDark,
-  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,21 @@
+/**
+ * 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';
+
+export default transformSpatialProps;

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

@@ -76,7 +76,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,

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

@@ -0,0 +1,27 @@
+/**
+ * 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 DeckGridFormData extends SpatialFormData {
+  extruded?: boolean;
+}
+
+export default function buildQuery(formData: DeckGridFormData) {
+  return buildSpatialQuery(formData);
+}