feat: Add line width unit control in deckgl Polygon and Path (#24755)

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

@@ -77,7 +77,7 @@ const config: ControlPanelConfig = {
             config: {
               type: 'SelectControl',
               label: t('Line width unit'),
-              default: 'meters',
+              default: 'pixels',
               choices: [
                 ['meters', t('meters')],
                 ['pixels', t('pixels')],

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/Path.jsx

@@ -64,6 +64,7 @@ export function getLayer(formData, payload, onAddFilter, setTooltip) {
     data,
     rounded: true,
     widthScale: 1,
+    widthUnits: fd.line_width_unit,
     ...commonLayerProps(fd, setTooltip, setTooltipContent),
   });
 }

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/controlPanel.ts

@@ -68,8 +68,25 @@ const config: ControlPanelConfig = {
       expanded: true,
       controlSetRows: [
         [mapboxStyle, viewport],
-        ['color_picker', lineWidth],
-        [reverseLongLat, autozoom],
+        ['color_picker'],
+        [lineWidth],
+        [
+          {
+            name: 'line_width_unit',
+            config: {
+              type: 'SelectControl',
+              label: t('Line width unit'),
+              default: 'pixels',
+              choices: [
+                ['meters', t('meters')],
+                ['pixels', t('pixels')],
+              ],
+              renderTrigger: true,
+            },
+          },
+        ],
+        [reverseLongLat],
+        [autozoom],
       ],
     },
     {

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/Polygon.jsx

@@ -143,6 +143,7 @@ export function getLayer(
     getLineColor: [sc.r, sc.g, sc.b, 255 * sc.a],
     getLineWidth: fd.line_width,
     extruded: fd.extruded,
+    lineWidthUnits: fd.line_width_unit,
     getElevation: d => getElevation(d, colorScaler),
     elevationScale: fd.multiplier,
     fp64: true,

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/controlPanel.ts

@@ -97,10 +97,7 @@ const config: ControlPanelConfig = {
     {
       label: t('Map'),
       expanded: true,
-      controlSetRows: [
-        [mapboxStyle, viewport],
-        [autozoom, null],
-      ],
+      controlSetRows: [[mapboxStyle], [viewport], [autozoom]],
     },
     {
       label: t('Polygon Settings'),
@@ -108,10 +105,26 @@ const config: ControlPanelConfig = {
       controlSetRows: [
         [fillColorPicker, strokeColorPicker],
         [filled, stroked],
-        [extruded, multiplier],
-        [lineWidth, null],
+        [extruded],
+        [multiplier],
+        [lineWidth],
+        [
+          {
+            name: 'line_width_unit',
+            config: {
+              type: 'SelectControl',
+              label: t('Line width unit'),
+              default: 'pixels',
+              choices: [
+                ['meters', t('meters')],
+                ['pixels', t('pixels')],
+              ],
+              renderTrigger: true,
+            },
+          },
+        ],
+        ['linear_color_scheme'],
         [
-          'linear_color_scheme',
           {
             name: 'opacity',
             config: {
@@ -140,6 +153,8 @@ const config: ControlPanelConfig = {
               renderTrigger: true,
             },
           },
+        ],
+        [
           {
             name: 'break_points',
             config: {
@@ -166,6 +181,8 @@ const config: ControlPanelConfig = {
               description: t('Whether to apply filter when items are clicked'),
             },
           },
+        ],
+        [
           {
             name: 'toggle_polygons',
             config: {
@@ -179,7 +196,8 @@ const config: ControlPanelConfig = {
             },
           },
         ],
-        [legendPosition, legendFormat],
+        [legendPosition],
+        [legendFormat],
       ],
     },
     {

superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/Shared_DeckGL.jsx

@@ -210,7 +210,7 @@ export const lineWidth = {
     label: t('Line width'),
     renderTrigger: true,
     isInt: true,
-    default: 10,
+    default: 1,
     description: t('The width of the lines'),
   },
 };

superset/examples/deck.py

@@ -387,6 +387,8 @@ def load_deck_dash() -> None:  # pylint: disable=too-many-statements
         "stroked": False,
         "extruded": True,
         "multiplier": 0.1,
+        "line_width": 10,
+        "line_width_unit": "meters",
         "point_radius_fixed": {
             "type": "metric",
             "value": {

superset/migrations/versions/2023-07-19_17-54_ee179a490af9_deckgl_path_width_units.py

@@ -0,0 +1,70 @@
+# 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.
+"""deckgl-path-width-units
+
+Revision ID: ee179a490af9
+Revises: a23c6f8b1280
+Create Date: 2023-07-19 17:54:06.752360
+
+"""
+import json
+import logging
+
+from alembic import op
+from sqlalchemy import Column, Integer, or_, String, Text
+from sqlalchemy.ext.declarative import declarative_base
+
+from superset import db
+
+# revision identifiers, used by Alembic.
+revision = "ee179a490af9"
+down_revision = "a23c6f8b1280"
+
+
+Base = declarative_base()
+
+
+class Slice(Base):
+    __tablename__ = "slices"
+    id = Column(Integer, primary_key=True)
+    viz_type = Column(String(250))
+    params = Column(Text)
+
+
+def upgrade():
+    bind = op.get_bind()
+    session = db.Session(bind=bind)
+    for slc in session.query(Slice).filter(
+        or_(
+            Slice.viz_type == "deck_path",
+            Slice.viz_type == "deck_geojson",
+            Slice.viz_type == "deck_polygon",
+        )
+    ):
+        try:
+            params = json.loads(slc.params)
+            if not params.get("line_width_unit"):
+                params["line_width_unit"] = "meters"
+                slc.params = json.dumps(params)
+        except Exception:
+            logging.exception(f"Unable to parse params for slice {slc.id}")
+    session.commit()
+    session.close()
+
+
+def downgrade():
+    pass