support plotly.js@1.49.x mapbox features

Author: nicolaskruchten

package.json

@@ -14,8 +14,8 @@
     "draft-js-utils": "^1.3.3",
     "fast-isnumeric": "^1.1.2",
     "immutability-helper": "^3.0.0",
-    "plotly-icons": "1.3.12",
-    "plotly.js": "1.48.3",
+    "plotly-icons": "1.3.13",
+    "plotly.js": "1.49.5",
     "prop-types": "^15.7.2",
     "raf": "^3.4.1",
     "react-color": "^2.17.0",

src/EditorControls.js

@@ -18,6 +18,7 @@ import {
   shamefullyDeleteRelatedAnalysisTransforms,
   shamefullyAdjustSizeref,
   shamefullyAdjustAxisDirection,
+  shamefullyAdjustMapbox,
 } from './shame';
 import {EDITOR_ACTIONS} from './lib/constants';
 import isNumeric from 'fast-isnumeric';
@@ -87,6 +88,9 @@ class EditorControls extends Component {
         shamefullyAdjustAxisRef(graphDiv, payload);
         shamefullyAddTableColumns(graphDiv, payload);
         shamefullyAdjustSplitStyleTargetContainers(graphDiv, payload);
+        if (!this.props.mapBoxAccess) {
+          shamefullyAdjustMapbox(graphDiv, payload);
+        }
 
         for (let i = 0; i < payload.traceIndexes.length; i++) {
           for (const attr in payload.update) {
@@ -283,6 +287,19 @@ class EditorControls extends Component {
         }
         break;
 
+      case EDITOR_ACTIONS.DELETE_MAPBOXLAYER:
+        if (isNumeric(payload.mapboxLayerIndex)) {
+          graphDiv.layout[payload.mapboxId].layers.splice(payload.mapboxLayerIndex, 1);
+          if (this.props.onUpdate) {
+            this.props.onUpdate(
+              graphDiv.data,
+              Object.assign({}, graphDiv.layout),
+              graphDiv._transitionData._frames
+            );
+          }
+        }
+        break;
+
       case EDITOR_ACTIONS.DELETE_TRANSFORM:
         if (isNumeric(payload.transformIndex) && payload.traceIndex < graphDiv.data.length) {
           if (graphDiv.data[payload.traceIndex].transforms.length === 1) {
@@ -327,6 +344,10 @@ class EditorControls extends Component {
             move(graphDiv.layout.annotations);
           }
 
+          if (payload.path === 'layout.mapbox.layers') {
+            move(graphDiv.layout[payload.mapboxId].layers);
+          }
+
           const updatedData = payload.path.startsWith('data')
             ? graphDiv.data.slice()
             : graphDiv.data;

src/components/containers/MapboxLayersAccordion.js

@@ -0,0 +1,73 @@
+import PlotlyFold from './PlotlyFold';
+import PlotlyPanel from './PlotlyPanel';
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import {connectLayersToMapbox, getParsedTemplateString} from 'lib';
+
+const MapboxLayersFold = connectLayersToMapbox(PlotlyFold);
+
+class MapboxLayersAccordion extends Component {
+  render() {
+    const {
+      fullContainer: {layers = []},
+      localize: _,
+      layout: meta,
+    } = this.context;
+    const {children} = this.props;
+
+    const content =
+      layers.length &&
+      layers.map((layer, i) => (
+        <MapboxLayersFold
+          key={i}
+          mapboxLayerIndex={i}
+          name={getParsedTemplateString(layer.name, {meta})}
+          canDelete={true}
+        >
+          {children}
+        </MapboxLayersFold>
+      ));
+
+    const addAction = {
+      label: _('Layer'),
+      handler: context => {
+        const {fullContainer, updateContainer} = context;
+        if (updateContainer) {
+          const mapboxLayerIndex = Array.isArray(fullContainer.layers)
+            ? fullContainer.layers.length
+            : 0;
+
+          updateContainer({
+            [`layers[${mapboxLayerIndex}]`]: {
+              name: `Layer ${mapboxLayerIndex}`,
+              sourcetype: 'raster',
+              below: 'traces',
+            },
+          });
+        }
+      },
+    };
+
+    return (
+      <PlotlyPanel addAction={addAction} canReorder>
+        {content ? content : null}
+      </PlotlyPanel>
+    );
+  }
+}
+
+MapboxLayersAccordion.contextTypes = {
+  fullContainer: PropTypes.object,
+  localize: PropTypes.func,
+  layout: PropTypes.object,
+};
+
+MapboxLayersAccordion.propTypes = {
+  children: PropTypes.node,
+};
+
+MapboxLayersAccordion.plotly_editor_traits = {
+  no_visibility_forcing: true,
+};
+
+export default MapboxLayersAccordion;

src/components/containers/index.js

@@ -4,6 +4,7 @@ import SliderAccordion from './SliderAccordion';
 import ImageAccordion from './ImageAccordion';
 import UpdateMenuAccordion from './UpdateMenuAccordion';
 import RangeSelectorAccordion from './RangeSelectorAccordion';
+import MapboxLayersAccordion from './MapboxLayersAccordion';
 import AxesFold from './AxesFold';
 import PlotlyFold, {Fold} from './PlotlyFold';
 import MenuPanel from './MenuPanel';
@@ -27,6 +28,7 @@ export {
   ImageAccordion,
   UpdateMenuAccordion,
   RangeSelectorAccordion,
+  MapboxLayersAccordion,
   MenuPanel,
   PlotlyFold,
   Fold,

src/components/fields/Dropzone.js

@@ -26,4 +26,10 @@ UnconnectedDropzone.propTypes = {
 
 UnconnectedDropzone.displayName = 'UnconnectedDropzone';
 
-export default connectToContainer(UnconnectedDropzone);
+function modifyPlotProps(props, context, plotProps) {
+  if (context.container.type === 'choroplethmapbox') {
+    plotProps.isVisible = true;
+  }
+}
+
+export default connectToContainer(UnconnectedDropzone, {modifyPlotProps});

src/components/fields/LocationSelector.js

@@ -91,31 +91,36 @@ class UnconnectedLocationSelector extends Component {
       container: {type: type},
     } = this.context;
 
-    return type === 'scattergeo' ? (
-      <>
-        <Field {...this.props} attr={this.props.attr}>
-          <Radio
-            options={[
-              {value: 'latlon', label: _('Lat/Lon')},
-              {value: 'location', label: _('Location')},
-            ]}
-            fullValue={mode}
-            updatePlot={this.setMode}
-            attr={this.props.attr}
-          />
-        </Field>
-        {mode === 'latlon' ? (
-          <>
-            <DataSelector label={_('Latitude')} attr="lat" />
-            <DataSelector label={_('Longitude')} attr="lon" />
-          </>
-        ) : (
-          <Location attr="type" />
-        )}
-      </>
-    ) : type === 'choropleth' ? (
-      <Location attr="type" />
-    ) : (
+    if (type === 'scattergeo') {
+      return (
+        <>
+          <Field {...this.props} attr={this.props.attr}>
+            <Radio
+              options={[
+                {value: 'latlon', label: _('Lat/Lon')},
+                {value: 'location', label: _('Location')},
+              ]}
+              fullValue={mode}
+              updatePlot={this.setMode}
+              attr={this.props.attr}
+            />
+          </Field>
+          {mode === 'latlon' ? (
+            <>
+              <DataSelector label={_('Latitude')} attr="lat" />
+              <DataSelector label={_('Longitude')} attr="lon" />
+            </>
+          ) : (
+            <Location attr="type" />
+          )}
+        </>
+      );
+    } else if (type === 'choropleth') {
+      return <Location attr="type" />;
+    } else if (type === 'choroplethmapbox') {
+      return <DataSelector label={_('Locations')} attr="locations" />;
+    }
+    return (
       <>
         <DataSelector label={_('Latitude')} attr="lat" />
         <DataSelector label={_('Longitude')} attr="lon" />

src/components/fields/SubplotCreator.js

@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import Dropdown from './Dropdown';
 import Info from './Info';
 import PropTypes from 'prop-types';
-import {EDITOR_ACTIONS, SUBPLOT_TO_ATTR} from 'lib/constants';
+import {EDITOR_ACTIONS, SUBPLOT_TO_ATTR, subplotName} from 'lib/constants';
 import Button from '../widgets/Button';
 import {PlusIcon} from 'plotly-icons';
 import {connectToContainer, traceTypeToAxisType, getSubplotTitle} from 'lib';
@@ -127,7 +127,7 @@ class UnconnectedSubplotCreator extends Component {
         <SingleSubplotCreator
           attr={SUBPLOT_TO_ATTR[subplotType].data}
           layoutAttr={subplotType}
-          label={SUBPLOT_TO_ATTR[subplotType].layout}
+          label={subplotName(SUBPLOT_TO_ATTR[subplotType].layout, _)}
           options={getOptions(subplotType)}
         />
         <Info>

src/components/fields/derived.js

@@ -12,6 +12,8 @@ import {UnconnectedColorPicker} from './ColorPicker';
 import {UnconnectedTextEditor} from './TextEditor';
 import {UnconnectedVisibilitySelect} from './VisibilitySelect';
 import {connectToContainer, getAllAxes, getAxisTitle, axisIdToAxisName} from 'lib';
+import PropTypes from 'prop-types';
+import Text from './Text';
 
 export const AxisAnchorDropdown = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
@@ -574,8 +576,14 @@ export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
       } else if (container.lat || container.lon) {
         options = [{label: _('Longitude'), value: 'lon'}, {label: _('Latitude'), value: 'lat'}];
       }
-    } else if (container.type === 'scattermapbox') {
+    } else if (container.type === 'scattermapbox' || container.type === 'densitymapbox') {
       options = [{label: _('Longitude'), value: 'lon'}, {label: _('Latitude'), value: 'lat'}];
+    } else if (container.type === 'densitymapbox') {
+      options = [
+        {label: _('Longitude'), value: 'lon'},
+        {label: _('Latitude'), value: 'lat'},
+        {label: _('Z'), value: 'z'},
+      ];
     } else if (container.type === 'scatterternary') {
       options = [
         {label: _('A'), value: 'a'},
@@ -655,6 +663,54 @@ export const FillDropdown = connectToContainer(UnconnectedDropdown, {
   },
 });
 
+export const MapboxSourceArray = connectToContainer(Text, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const {fullValue, updatePlot} = plotProps;
+    if (plotProps.fullValue && plotProps.fullValue.length > 0) {
+      plotProps.fullValue = fullValue[0];
+    }
+
+    plotProps.updatePlot = v => {
+      if (v.length) {
+        updatePlot([v]);
+      } else {
+        updatePlot([]);
+      }
+    };
+  },
+});
+
+export const MapboxStyleDropdown = connectToContainer(UnconnectedDropdown, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const {mapBoxAccess, localize: _} = context;
+
+    plotProps.options = (!mapBoxAccess
+      ? []
+      : [
+          {label: _('Mapbox Basic'), value: 'basic'},
+          {label: _('Mapbox Outdoors'), value: 'outdoors'},
+          {label: _('Mapbox Light'), value: 'light'},
+          {label: _('Mapbox Dark'), value: 'dark'},
+          {label: _('Mapbox Satellite'), value: 'satellite'},
+          {label: _('Mapbox Satellite with Streets'), value: 'satellite-streets'},
+        ]
+    ).concat([
+      {label: _('No tiles (white background)'), value: 'white-bg'},
+      {label: _('Open Street Map'), value: 'open-street-map'},
+      {label: _('Carto Positron'), value: 'carto-positron'},
+      {label: _('Carto Dark Matter'), value: 'carto-darkmatter'},
+      {label: _('Stamen Terrain'), value: 'stamen-terrain'},
+      {label: _('Stamen Toner'), value: 'stamen-toner'},
+      {label: _('Stamen Watercolor'), value: 'stamen-watercolor'},
+    ]);
+    plotProps.clearable = false;
+  },
+});
+MapboxStyleDropdown.contextTypes = {
+  mapBoxAccess: PropTypes.bool,
+  ...MapboxStyleDropdown.contextTypes,
+};
+
 export const HoveronDropdown = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
     const {localize: _} = context;