From d26ea980acc7d2a20757efc360d810afe83d5c65 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Thu, 27 Jul 2023 18:41:50 +0200 Subject: [PATCH] feat: Add line width unit control in deckgl Polygon and Path (#24755) --- .../src/layers/Geojson/controlPanel.ts | 2 +- .../src/layers/Path/Path.jsx | 1 + .../src/layers/Path/controlPanel.ts | 21 +++++- .../src/layers/Polygon/Polygon.jsx | 1 + .../src/layers/Polygon/controlPanel.ts | 34 ++++++--- .../src/utilities/Shared_DeckGL.jsx | 2 +- superset/examples/deck.py | 2 + ...54_ee179a490af9_deckgl_path_width_units.py | 70 +++++++++++++++++++ 8 files changed, 121 insertions(+), 12 deletions(-) create mode 100644 superset/migrations/versions/2023-07-19_17-54_ee179a490af9_deckgl_path_width_units.py diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/controlPanel.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/controlPanel.ts index 894c09853ac08..7c5b162d8dfb6 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Geojson/controlPanel.ts +++ b/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')], diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/Path.jsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/Path.jsx index 0cea73e2b7bae..faadf4b3e1342 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/Path.jsx +++ b/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), }); } diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/controlPanel.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/controlPanel.ts index cdbb06746bc97..80691efa6b737 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/controlPanel.ts +++ b/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], ], }, { diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/Polygon.jsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/Polygon.jsx index 81df4384f9da1..a881cfd96dcbc 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/Polygon.jsx +++ b/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, diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/controlPanel.ts b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/controlPanel.ts index a226004c76f78..c336dd25befd1 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Polygon/controlPanel.ts +++ b/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], ], }, { diff --git a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/Shared_DeckGL.jsx b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/Shared_DeckGL.jsx index 3ae47ac054e8a..0010d617b211b 100644 --- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/Shared_DeckGL.jsx +++ b/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'), }, }; diff --git a/superset/examples/deck.py b/superset/examples/deck.py index 418ed9d28ba1e..fc1e8ba00cd6c 100644 --- a/superset/examples/deck.py +++ b/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": { diff --git a/superset/migrations/versions/2023-07-19_17-54_ee179a490af9_deckgl_path_width_units.py b/superset/migrations/versions/2023-07-19_17-54_ee179a490af9_deckgl_path_width_units.py new file mode 100644 index 0000000000000..100efad0bae1a --- /dev/null +++ b/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