fix: lint

superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-preset-chart-deckgl/src/AnimatableDeckGLContainer.jsx

@@ -22,7 +22,7 @@ import PropTypes from 'prop-types';
 import DeckGLContainer from './DeckGLContainer';
 import PlaySlider from '../PlaySlider';
 
-const PLAYSLIDER_HEIGHT = 20;  // px
+const PLAYSLIDER_HEIGHT = 20; // px
 
 const propTypes = {
   getLayers: PropTypes.func.isRequired,
@@ -55,12 +55,14 @@ export default class AnimatableDeckGLContainer extends React.Component {
     super(props);
     this.onViewportChange = this.onViewportChange.bind(this);
   }
+
   onViewportChange(viewport) {
     const originalViewport = this.props.disabled
       ? { ...viewport }
       : { ...viewport, height: viewport.height + PLAYSLIDER_HEIGHT };
     this.props.onViewportChange(originalViewport);
   }
+
   render() {
     const {
       start,
@@ -95,16 +97,16 @@ export default class AnimatableDeckGLContainer extends React.Component {
           mapboxApiAccessToken={mapboxApiAccessToken}
           onViewportChange={this.onViewportChange}
         />
-        {!disabled &&
-        <PlaySlider
-          start={start}
-          end={end}
-          step={getStep(start)}
-          values={values}
-          range={!aggregation}
-          onChange={onValuesChange}
-        />
-        }
+        {!disabled && (
+          <PlaySlider
+            start={start}
+            end={end}
+            step={getStep(start)}
+            values={values}
+            range={!aggregation}
+            onChange={onValuesChange}
+          />
+        )}
         {children}
       </div>
     );

superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-preset-chart-deckgl/src/CategoricalDeckGLContainer.jsx

@@ -22,10 +22,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { CategoricalColorNamespace } from '@superset-ui/color';
 import AnimatableDeckGLContainer from './AnimatableDeckGLContainer';
-import Legend from '../Legend';
-import { hexToRGB } from '../../modules/colors';
-import { getPlaySliderParams } from '../../modules/time';
-import sandboxedEval from '../../modules/sandbox';
+import Legend from './Legend';
+import { hexToRGB } from './utils/colors';
+import { getPlaySliderParams } from './utils/time';
+import sandboxedEval from './utils/sandbox';
 import { fitViewport } from './layers/common';
 
 const { getScale } = CategoricalColorNamespace;
@@ -35,7 +35,7 @@ function getCategories(fd, data) {
   const fixedColor = [c.r, c.g, c.b, 255 * c.a];
   const colorFn = getScale(fd.color_scheme);
   const categories = {};
-  data.forEach((d) => {
+  data.forEach(d => {
     if (d.cat_color != null && !categories.hasOwnProperty(d.cat_color)) {
       let color;
       if (fd.dimension) {
@@ -46,6 +46,7 @@ function getCategories(fd, data) {
       categories[d.cat_color] = { color, enabled: true };
     }
   });
+
   return categories;
 }
 
@@ -78,21 +79,23 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
     this.toggleCategory = this.toggleCategory.bind(this);
     this.showSingleCategory = this.showSingleCategory.bind(this);
   }
+
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (nextProps.payload.form_data !== this.state.formData) {
       this.setState({ ...this.getStateFromProps(nextProps) });
     }
   }
+
   onValuesChange(values) {
     this.setState({
-      values: Array.isArray(values)
-        ? values
-        : [values, values + this.state.getStep(values)],
+      values: Array.isArray(values) ? values : [values, values + this.state.getStep(values)],
     });
   }
+
   onViewportChange(viewport) {
     this.setState({ viewport });
   }
+
   getStateFromProps(props, state) {
     const features = props.payload.data.features || [];
     const timestamps = features.map(f => f.__timestamp);
@@ -107,19 +110,10 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
 
     // the granularity has to be read from the payload form_data, not the
     // props formData which comes from the instantaneous controls state
-    const granularity = (
-      props.payload.form_data.time_grain_sqla ||
-      props.payload.form_data.granularity ||
-      'P1D'
-    );
+    const granularity =
+      props.payload.form_data.time_grain_sqla || props.payload.form_data.granularity || 'P1D';
 
-    const {
-      start,
-      end,
-      getStep,
-      values,
-      disabled,
-    } = getPlaySliderParams(timestamps, granularity);
+    const { start, end, getStep, values, disabled } = getPlaySliderParams(timestamps, granularity);
 
     const viewport = props.formData.autozoom
       ? fitViewport(props.viewport, props.getPoints(features))
@@ -138,17 +132,10 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
       categories,
     };
   }
+
   getLayers(values) {
-    const {
-      getLayer,
-      payload,
-      formData: fd,
-      onAddFilter,
-      setTooltip,
-    } = this.props;
-    let features = payload.data.features
-      ? [...payload.data.features]
-      : [];
+    const { getLayer, payload, formData: fd, onAddFilter, setTooltip } = this.props;
+    let features = payload.data.features ? [...payload.data.features] : [];
 
     // Add colors from categories or fixed color
     features = this.addColor(features, fd);
@@ -179,18 +166,23 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
 
     return [getLayer(fd, filteredPayload, onAddFilter, setTooltip)];
   }
+
   addColor(data, fd) {
     const c = fd.color_picker || { r: 0, g: 0, b: 0, a: 1 };
     const colorFn = getScale(fd.color_scheme);
-    return data.map((d) => {
+
+    return data.map(d => {
       let color;
       if (fd.dimension) {
         color = hexToRGB(colorFn(d.cat_color), c.a * 255);
+
         return { ...d, color };
       }
+
       return d;
     });
   }
+
   toggleCategory(category) {
     const categoryState = this.state.categories[category];
     const categories = {
@@ -204,17 +196,23 @@ export default class CategoricalDeckGLContainer extends React.PureComponent {
     // if all categories are disabled, enable all -- similar to nvd3
     if (Object.values(categories).every(v => !v.enabled)) {
       /* eslint-disable no-param-reassign */
-      Object.values(categories).forEach((v) => { v.enabled = true; });
+      Object.values(categories).forEach(v => {
+        v.enabled = true;
+      });
     }
     this.setState({ categories });
   }
+
   showSingleCategory(category) {
     const categories = { ...this.state.categories };
     /* eslint-disable no-param-reassign */
-    Object.values(categories).forEach((v) => { v.enabled = false; });
+    Object.values(categories).forEach(v => {
+      v.enabled = false;
+    });
     categories[category].enabled = true;
     this.setState({ categories });
   }
+
   render() {
     return (
       <div style={{ position: 'relative' }}>

superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-preset-chart-deckgl/src/DeckGLContainer.jsx

@@ -22,9 +22,9 @@ import MapGL from 'react-map-gl';
 import DeckGL from 'deck.gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
 import { isEqual } from 'lodash';
-import '../stylesheets/deckgl.css';
+import './css/deckgl.css';
 
-const TICK = 2000;  // milliseconds
+const TICK = 2000; // milliseconds
 
 const propTypes = {
   viewport: PropTypes.object.isRequired,
@@ -51,18 +51,22 @@ export default class DeckGLContainer extends React.Component {
       timer: setInterval(this.tick, TICK),
     };
   }
+
   static getDerivedStateFromProps(nextProps, prevState) {
     if (nextProps.viewport !== prevState.viewport) {
       return {
         viewport: { ...nextProps.viewport },
         previousViewport: prevState.viewport,
       };
     }
+
     return null;
   }
+
   componentWillUnmount() {
     clearInterval(this.state.timer);
   }
+
   onViewportChange(viewport) {
     const vp = Object.assign({}, viewport);
     // delete vp.width;
@@ -72,6 +76,7 @@ export default class DeckGLContainer extends React.Component {
     // this.setState(() => ({ viewport: newVp }));
     this.props.onViewportChange(newVp);
   }
+
   tick() {
     // Limiting updating viewport controls through Redux at most 1*sec
     // Deep compare is needed as shallow equality doesn't work here, viewport object
@@ -85,27 +90,27 @@ export default class DeckGLContainer extends React.Component {
       this.setState(() => ({ previousViewport: this.props.viewport }));
     }
   }
+
   layers() {
     // Support for layer factory
     if (this.props.layers.some(l => typeof l === 'function')) {
-      return this.props.layers.map(l => typeof l === 'function' ? l() : l);
+      return this.props.layers.map(l => (typeof l === 'function' ? l() : l));
     }
+
     return this.props.layers;
   }
+
   render() {
     const { viewport } = this.props;
+
     return (
       <MapGL
         {...viewport}
         mapStyle={this.props.mapStyle}
         onViewportChange={this.onViewportChange}
         mapboxApiAccessToken={this.props.mapboxApiAccessToken}
       >
-        <DeckGL
-          {...viewport}
-          layers={this.layers()}
-          initWebGLParameters
-        />
+        <DeckGL {...viewport} layers={this.layers()} initWebGLParameters />
       </MapGL>
     );
   }

superset-frontend/temporary_superset_ui/superset-ui-plugins-deckgl/packages/superset-ui-preset-chart-deckgl/src/Legend.css

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ */
+div.legend {
+    font-size: 90%;
+    position: absolute;
+    background: #fff;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
+    margin: 24px;
+    padding: 12px 20px;
+    outline: none;
+    overflow-y: scroll;
+    max-height: 200px;
+}
+
+ul.categories {
+    list-style: none;
+    padding-left: 0;
+    margin: 0;
+}
+
+ul.categories li a {
+    color: rgb(51, 51, 51);
+    text-decoration: none;
+}
+
+ul.categories li a span {
+    margin-right: 10px;
+}