Merge 9433499131 into f5843fe588

2024-05-05 02:17:01 -03:00 · 2024-05-05 02:17:01 -03:00 · 7edcd42bf8
parent f5843fe588 9433499131
commit 7edcd42bf8
6 changed files with 146 additions and 81 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -0,0 +1,4 @@
+include:
+    - project: 'infra/gitlab-ci-util'
+      ref: master
+      file: '/templates/raasify-images.gitlab-ci.yml'
--- a/superset-frontend/plugins/legacy-plugin-chart-map-box/CHANGELOG.md
+++ b/superset-frontend/plugins/legacy-plugin-chart-map-box/CHANGELOG.md
@ -22,6 +22,14 @@ under the License.
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.

+
+# [0.19.0](https://github.com/apache-superset/superset-ui/compare/v0.18.25...v0.19.0) (2021-08-30)
+
+**Note:** Added support for presetting a fixed zoom and map position
+
+
+
+
 # [0.18.0](https://github.com/apache-superset/superset-ui/compare/v0.17.87...v0.18.0) (2021-08-30)

 **Note:** Version bump only for package @superset-ui/legacy-plugin-chart-map-box
--- a/superset-frontend/plugins/legacy-plugin-chart-map-box/package.json
+++ b/superset-frontend/plugins/legacy-plugin-chart-map-box/package.json
@ -1,6 +1,6 @@
 {
  "name": "@superset-ui/legacy-plugin-chart-map-box",
-  "version": "0.18.25",
+  "version": "0.19.0",
  "description": "Superset Legacy Chart - MapBox",
  "keywords": [
    "superset"
--- a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/MapBox.jsx
+++ b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/MapBox.jsx
@ -18,7 +18,9 @@
 */
 /* eslint-disable react/jsx-sort-default-props, react/sort-prop-types */
 /* eslint-disable react/forbid-prop-types, react/require-default-props */
-import React from 'react';
+// -- import React, { useEffect, useMemo } from 'react';
+// ++
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import MapGL from 'react-map-gl';
 import ViewportMercator from 'viewport-mercator-project';
@ -44,6 +46,10 @@ const propTypes = {
  renderWhileDragging: PropTypes.bool,
  rgb: PropTypes.array,
  bounds: PropTypes.array,
+  viewportLongitude: PropTypes.number,
+  viewportLatitude: PropTypes.number,
+  viewportZoom: PropTypes.number,
+  initialViewportSettings: PropTypes.oneOf(['Auto', 'Fixed']),
 };

 const defaultProps = {
@ -55,11 +61,35 @@ const defaultProps = {
  pointRadiusUnit: 'Pixels',
 };

-class MapBox extends React.Component {
-  constructor(props) {
-    super(props);
+const isEmpty = v => v === undefined || v === null || v === '';

-    const { width, height, bounds } = this.props;
+const MapBox = props => {
+  const {
+    width,
+    height,
+    bounds,
+    viewportLongitude,
+    viewportLatitude,
+    viewportZoom,
+    initialViewportSettings,
+    aggregatorName,
+    clusterer,
+    globalOpacity,
+    mapStyle,
+    mapboxApiKey,
+    pointRadius,
+    pointRadiusUnit,
+    renderWhileDragging,
+    rgb,
+    hasCustomMetric,
+    onViewportChange,
+  } = props;
+
+  const [viewport, setViewport] = React.useState();
+  // ++
+  const [clusters, setClusters] = React.useState();
+
+  useEffect(() => {
    // Get a viewport that fits the given bounds, which all marks to be clustered.
    // Derive lat, lon and zoom from this viewport. This is only done on initial
    // render as the bounds don't update as we pan/zoom in the current design.
@ -69,87 +99,86 @@ class MapBox extends React.Component {
    }).fitBounds(bounds);
    const { latitude, longitude, zoom } = mercator;

-    this.state = {
-      viewport: {
+    if (initialViewportSettings === 'Fixed') {
+      setViewport({
+        longitude: !isEmpty(viewportLongitude) ? viewportLongitude : longitude,
+        latitude: !isEmpty(viewportLatitude) ? viewportLatitude : latitude,
+        zoom: !isEmpty(viewportZoom) ? viewportZoom : zoom,
+      });
+    } else {
+      setViewport({
        longitude,
        latitude,
        zoom,
-      },
-    };
-    this.handleViewportChange = this.handleViewportChange.bind(this);
+      });
+    }
+  }, []);
+
+  // ++
+  useEffect(() => {
+    // -- const clusters = useMemo(() => {
+    if (viewport) {
+      // Compute the clusters based on the original bounds and current zoom level. Note when zoom/pan
+      // to an area outside of the original bounds, no additional queries are made to the backend to
+      // retrieve additional data.
+      // add this variable to widen the visible area
+      const offsetHorizontal = (width * 0.5) / 100;
+      const offsetVertical = (height * 0.5) / 100;
+      const bbox = [
+        bounds[0][0] - offsetHorizontal,
+        bounds[0][1] - offsetVertical,
+        bounds[1][0] + offsetHorizontal,
+        bounds[1][1] + offsetVertical,
+      ];
+      // ++
+      setClusters(clusterer.getClusters(bbox, Math.round(viewport.zoom)));
+      // -- return clusterer.getClusters(bbox, Math.round(viewport.zoom));
+    }
+  }, [clusterer, viewport, bounds, width, height]);
+  // --  return undefined;
+  // -- }, [viewport, clusterer, bounds, width, height]);
+
+  if (!viewport || !clusters) {
+    return <></>;
  }

-  handleViewportChange(viewport) {
-    this.setState({ viewport });
-    const { onViewportChange } = this.props;
-    onViewportChange(viewport);
-  }
+  const isDragging = Boolean(viewport.isDragging);

-  render() {
-    const {
-      width,
-      height,
-      aggregatorName,
-      clusterer,
-      globalOpacity,
-      mapStyle,
-      mapboxApiKey,
-      pointRadius,
-      pointRadiusUnit,
-      renderWhileDragging,
-      rgb,
-      hasCustomMetric,
-      bounds,
-    } = this.props;
-    const { viewport } = this.state;
-    const isDragging =
-      viewport.isDragging === undefined ? false : viewport.isDragging;
+  const handleViewportChange = newViewport => {
+    setViewport(newViewport);
+    onViewportChange(newViewport);
+  };

-    // Compute the clusters based on the original bounds and current zoom level. Note when zoom/pan
-    // to an area outside of the original bounds, no additional queries are made to the backend to
-    // retrieve additional data.
-    // add this variable to widen the visible area
-    const offsetHorizontal = (width * 0.5) / 100;
-    const offsetVertical = (height * 0.5) / 100;
-    const bbox = [
-      bounds[0][0] - offsetHorizontal,
-      bounds[0][1] - offsetVertical,
-      bounds[1][0] + offsetHorizontal,
-      bounds[1][1] + offsetVertical,
-    ];
-    const clusters = clusterer.getClusters(bbox, Math.round(viewport.zoom));
-
-    return (
-      <MapGL
+  return (
+    <MapGL
+      {...viewport}
+      mapStyle={mapStyle}
+      width={width}
+      height={height}
+      mapboxApiAccessToken={mapboxApiKey}
+      onViewportChange={handleViewportChange}
+      preserveDrawingBuffer
+    >
+      <ScatterPlotGlowOverlay
        {...viewport}
-        mapStyle={mapStyle}
-        width={width}
-        height={height}
-        mapboxApiAccessToken={mapboxApiKey}
-        onViewportChange={this.handleViewportChange}
-        preserveDrawingBuffer
-      >
-        <ScatterPlotGlowOverlay
-          {...viewport}
-          isDragging={isDragging}
-          locations={clusters}
-          dotRadius={pointRadius}
-          pointRadiusUnit={pointRadiusUnit}
-          rgb={rgb}
-          globalOpacity={globalOpacity}
-          compositeOperation="screen"
-          renderWhileDragging={renderWhileDragging}
-          aggregation={hasCustomMetric ? aggregatorName : null}
-          lngLatAccessor={location => {
-            const { coordinates } = location.geometry;
+        isDragging={isDragging}
+        locations={clusters}
+        dotRadius={pointRadius}
+        pointRadiusUnit={pointRadiusUnit}
+        rgb={rgb}
+        globalOpacity={globalOpacity}
+        compositeOperation="screen"
+        renderWhileDragging={renderWhileDragging}
+        aggregation={hasCustomMetric ? aggregatorName : null}
+        lngLatAccessor={location => {
+          const { coordinates } = location.geometry;

-            return [coordinates[0], coordinates[1]];
-          }}
-        />
-      </MapGL>
-    );
-  }
-}
+          return [coordinates[0], coordinates[1]];
+        }}
+      />
+    </MapGL>
+  );
+};

 MapBox.propTypes = propTypes;
 MapBox.defaultProps = defaultProps;
--- a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/controlPanel.ts
@ -272,7 +272,7 @@ const config: ControlPanelConfig = {
              type: 'TextControl',
              label: t('Default longitude'),
              renderTrigger: true,
-              default: -122.405293,
+              default: 14,
              isFloat: true,
              description: t('Longitude of default viewport'),
              places: 8,
@ -286,7 +286,7 @@ const config: ControlPanelConfig = {
              type: 'TextControl',
              label: t('Default latitude'),
              renderTrigger: true,
-              default: 37.772123,
+              default: 14,
              isFloat: true,
              description: t('Latitude of default viewport'),
              places: 8,
@ -303,7 +303,7 @@ const config: ControlPanelConfig = {
              label: t('Zoom'),
              renderTrigger: true,
              isFloat: true,
-              default: 11,
+              default: 1.96,
              description: t('Zoom level of the map'),
              places: 8,
              // Viewport zoom shouldn't prompt user to re-run query
@ -312,6 +312,22 @@ const config: ControlPanelConfig = {
          },
          null,
        ],
+        [
+          {
+            name: 'initial_viewport_settings',
+            config: {
+              type: 'SelectControl',
+              renderTrigger: true,
+              freeForm: true,
+              label: t('Initial Viewport Settings'),
+              default: 'Auto',
+              choices: formatSelectOptions(['Auto', 'Fixed']),
+              description: t(
+                'Auto calculate on bounds or fix the initial settings',
+              ),
+            },
+          },
+        ],
      ],
    },
  ],
--- a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/transformProps.js
+++ b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/transformProps.js
@ -35,6 +35,10 @@ export default function transformProps(chartProps) {
    pointRadius,
    pointRadiusUnit,
    renderWhileDragging,
+    viewportLongitude,
+    viewportLatitude,
+    viewportZoom,
+    initialViewportSettings,
  } = formData;

  // Validate mapbox color
@ -94,5 +98,9 @@ export default function transformProps(chartProps) {
    pointRadiusUnit,
    renderWhileDragging,
    rgb,
+    viewportLongitude,
+    viewportLatitude,
+    viewportZoom,
+    initialViewportSettings,
  };
 }