From 64ba5797df92d0f8067ccd2b30ba6ff58e0bd791 Mon Sep 17 00:00:00 2001
From: Matthew Chiang <36670322+Mattc1221@users.noreply.github.com>
Date: Mon, 29 Jan 2024 05:10:11 -0800
Subject: [PATCH] fix(deck.gl Multiple Layer Chart): Add Contour and Heatmap
 Layer as options (#25923)

---
 .../plugins/legacy-preset-chart-deckgl/src/index.ts    |  2 ++
 .../legacy-preset-chart-deckgl/src/layers/Arc/Arc.tsx  |  8 ++++----
 .../src/layers/Geojson/Geojson.tsx                     |  4 ++--
 .../src/layers/Heatmap/Heatmap.tsx                     |  2 +-
 .../src/layers/Path/Path.tsx                           |  2 +-
 .../src/layers/Polygon/Polygon.tsx                     | 10 +++++-----
 .../src/layers/Scatter/Scatter.tsx                     | 10 +++++-----
 .../src/layers/Screengrid/Screengrid.tsx               |  4 ++--
 .../legacy-preset-chart-deckgl/src/layers/index.ts     |  4 ++++
 9 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/index.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/index.ts
index 819964173ed85..fc4aa7fca0151 100644
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/index.ts
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/index.ts
@@ -26,3 +26,5 @@ export { default as PathChartPlugin } from './layers/Path';
 export { default as PolygonChartPlugin } from './layers/Polygon';
 export { default as ScatterChartPlugin } from './layers/Scatter';
 export { default as ScreengridChartPlugin } from './layers/Screengrid';
+export { default as ContourChartPlugin } from './layers/Contour';
+export { default as HeatmapChartPlugin } from './layers/Heatmap';
diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/Arc.tsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/Arc.tsx
index 1bc19618b678d..7ad1870170410 100644
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/Arc.tsx
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/Arc.tsx
@@ -45,16 +45,16 @@ function setTooltipContent(formData: QueryFormData) {
     <div className="deckgl-tooltip">
       <TooltipRow
         label={t('Start (Longitude, Latitude): ')}
-        value={`${o.object.sourcePosition[0]}, ${o.object.sourcePosition[1]}`}
+        value={`${o.object?.sourcePosition?.[0]}, ${o.object?.sourcePosition?.[1]}`}
       />
       <TooltipRow
         label={t('End (Longitude, Latitude): ')}
-        value={`${o.object.targetPosition[0]}, ${o.object.targetPosition[1]}`}
+        value={`${o.object?.targetPosition?.[0]}, ${o.object?.targetPosition?.[1]}`}
       />
       {formData.dimension && (
         <TooltipRow
-          label={`${formData.dimension}: `}
-          value={`${o.object.cat_color}`}
+          label={`${formData?.dimension}: `}
+          value={`${o.object?.cat_color}`}
         />
       )}
     </div>
diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/Geojson.tsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/Geojson.tsx
index c8c9d4863ce9b..a5dc2a14a0386 100644
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/Geojson.tsx
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/Geojson.tsx
@@ -93,13 +93,13 @@ const recurseGeoJson = (
 
 function setTooltipContent(o: JsonObject) {
   return (
-    o.object.extraProps && (
+    o.object?.extraProps && (
       <div className="deckgl-tooltip">
         {Object.keys(o.object.extraProps).map((prop, index) => (
           <TooltipRow
             key={`prop-${index}`}
             label={`${prop}: `}
-            value={`${o.object.extraProps[prop]}`}
+            value={`${o.object.extraProps?.[prop]}`}
           />
         ))}
       </div>
diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/Heatmap.tsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/Heatmap.tsx
index b491d6dba164c..5a1453459d9b9 100644
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/Heatmap.tsx
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/Heatmap.tsx
@@ -30,7 +30,7 @@ function setTooltipContent(o: JsonObject) {
     <div className="deckgl-tooltip">
       <TooltipRow
         label={t('Centroid (Longitude and Latitude): ')}
-        value={`(${o.coordinate[0]}, ${o.coordinate[1]})`}
+        value={`(${o?.coordinate[0]}, ${o?.coordinate[1]})`}
       />
     </div>
   );
diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/Path.tsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/Path.tsx
index c4f13f0e57f91..f2f5c35e3d46d 100644
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/Path.tsx
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/Path.tsx
@@ -29,7 +29,7 @@ import { Point } from '../../types';
 
 function setTooltipContent(o: JsonObject) {
   return (
-    o.object.extraProps && (
+    o.object?.extraProps && (
       <div className="deckgl-tooltip">
         {Object.keys(o.object.extraProps).map((prop, index) => (
           <TooltipRow
diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/Polygon.tsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/Polygon.tsx
index 460c4a3b51969..08f2e4514069a 100644
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/Polygon.tsx
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/Polygon.tsx
@@ -62,27 +62,27 @@ function getElevation(
 
 function setTooltipContent(formData: PolygonFormData) {
   return (o: JsonObject) => {
-    const metricLabel = formData.metric.label || formData.metric;
+    const metricLabel = formData?.metric?.label || formData?.metric;
 
     return (
       <div className="deckgl-tooltip">
-        {o.object.name && (
+        {o.object?.name && (
           <TooltipRow
             // eslint-disable-next-line prefer-template
             label={t('name') + ': '}
             value={`${o.object.name}`}
           />
         )}
-        {o.object[formData.line_column] && (
+        {o.object?.[formData?.line_column] && (
           <TooltipRow
             label={`${formData.line_column}: `}
             value={`${o.object[formData.line_column]}`}
           />
         )}
-        {formData.metric && (
+        {formData?.metric && (
           <TooltipRow
             label={`${metricLabel}: `}
-            value={`${o.object[metricLabel]}`}
+            value={`${o.object?.[metricLabel]}`}
           />
         )}
       </div>
diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Scatter/Scatter.tsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Scatter/Scatter.tsx
index c529e5c1d9df3..3ce1dcf25ef3d 100644
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Scatter/Scatter.tsx
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Scatter/Scatter.tsx
@@ -48,17 +48,17 @@ function setTooltipContent(
         <TooltipRow
           // eslint-disable-next-line prefer-template
           label={t('Longitude and Latitude') + ': '}
-          value={`${o.object.position[0]}, ${o.object.position[1]}`}
+          value={`${o.object?.position?.[0]}, ${o.object?.position?.[1]}`}
         />
-        {o.object.cat_color && (
+        {o.object?.cat_color && (
           <TooltipRow
             // eslint-disable-next-line prefer-template
             label={t('Category') + ': '}
-            value={`${o.object.cat_color}`}
+            value={`${o.object?.cat_color}`}
           />
         )}
-        {o.object.metric && (
-          <TooltipRow label={`${label}: `} value={`${o.object.metric}`} />
+        {o.object?.metric && (
+          <TooltipRow label={`${label}: `} value={`${o.object?.metric}`} />
         )}
       </div>
     );
diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/Screengrid.tsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/Screengrid.tsx
index 7e47cc9530c04..9584c8f53eed6 100644
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/Screengrid.tsx
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/Screengrid.tsx
@@ -45,12 +45,12 @@ function setTooltipContent(o: JsonObject) {
       <TooltipRow
         // eslint-disable-next-line prefer-template
         label={t('Longitude and Latitude') + ': '}
-        value={`${o.coordinate[0]}, ${o.coordinate[1]}`}
+        value={`${o?.coordinate?.[0]}, ${o?.coordinate?.[1]}`}
       />
       <TooltipRow
         // eslint-disable-next-line prefer-template
         label={t('Weight') + ': '}
-        value={`${o.object.cellWeight}`}
+        value={`${o.object?.cellWeight}`}
       />
     </div>
   );
diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/index.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/index.ts
index b77d5bd12c49c..9747a50b1e761 100644
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/index.ts
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/index.ts
@@ -25,6 +25,8 @@ import { getLayer as deck_scatter } from './Scatter/Scatter';
 import { getLayer as deck_geojson } from './Geojson/Geojson';
 import { getLayer as deck_arc } from './Arc/Arc';
 import { getLayer as deck_polygon } from './Polygon/Polygon';
+import { getLayer as deck_heatmap } from './Heatmap/Heatmap';
+import { getLayer as deck_contour } from './Contour/Contour';
 
 const layerGenerators = {
   deck_grid,
@@ -35,6 +37,8 @@ const layerGenerators = {
   deck_geojson,
   deck_arc,
   deck_polygon,
+  deck_heatmap,
+  deck_contour,
 };
 
 export default layerGenerators;