Fixes to the play slider (#5675)

* Fixes to the play slider

* Address comments

* Make CSS rules more strict

* Fix CSS and improve code

superset/assets/src/visualizations/PlaySlider.css

@@ -1,8 +1,8 @@
 .play-slider {
-    position: absolute;
+    position: relative;
-    bottom: -16px;
     height: 20px;
     width: 100%;
+    margin: 0;
 }
 
 .slider-selection {
@@ -21,3 +21,7 @@
     color: #b3b3b3;
     margin-right: 5px;
 }
+
+div.slider > div.tooltip.tooltip-main.top.in {
+    margin-left: 0 !important;
+}

superset/assets/src/visualizations/PlaySlider.jsx

@@ -21,6 +21,7 @@ const propTypes = {
   orientation: PropTypes.oneOf(['horizontal', 'vertical']),
   reversed: PropTypes.bool,
   disabled: PropTypes.bool,
+  range: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -30,6 +31,7 @@ const defaultProps = {
   orientation: 'horizontal',
   reversed: false,
   disabled: false,
+  range: true,
 };
 
 export default class PlaySlider extends React.PureComponent {
@@ -84,15 +86,17 @@ export default class PlaySlider extends React.PureComponent {
     this.setState({ intervalId: null });
   }
   step() {
-    if (this.props.disabled) {
+    const { start, end, step, values, disabled } = this.props;
+
+    if (disabled) {
       return;
     }
-    let values = this.props.values.map(value => value + this.increment);
+
-    if (values[1] > this.props.end) {
+    const currentValues = Array.isArray(values) ? values : [values, values + step];
-      const cr = values[0] - this.props.start;
+    const nextValues = currentValues.map(value => value + this.increment);
-      values = values.map(value => value - cr);
+    const carriageReturn = (nextValues[1] > end) ? (nextValues[0] - start) : 0;
-    }
+
-    this.props.onChange(values);
+    this.props.onChange(nextValues.map(value => value - carriageReturn));
   }
   formatter(values) {
     if (this.props.disabled) {
@@ -108,6 +112,7 @@ export default class PlaySlider extends React.PureComponent {
     return parts.map(value => (new Date(value)).toUTCString()).join(' : ');
   }
   render() {
+    const { start, end, step, orientation, reversed, disabled, range, values } = this.props;
     return (
       <Row className="play-slider">
         <Col md={1} className="padded">
@@ -116,15 +121,16 @@ export default class PlaySlider extends React.PureComponent {
         </Col>
         <Col md={11} className="padded">
           <ReactBootstrapSlider
-            value={this.props.values}
+            value={range ? values : values[0]}
+            range={range}
             formatter={this.formatter}
             change={this.onChange}
-            min={this.props.start}
+            min={start}
-            max={this.props.end}
+            max={end}
-            step={this.props.step}
+            step={step}
-            orientation={this.props.orientation}
+            orientation={orientation}
-            reversed={this.props.reversed}
+            reversed={reversed}
-            disabled={this.props.disabled ? 'disabled' : 'enabled'}
+            disabled={disabled ? 'disabled' : 'enabled'}
           />
         </Col>
       </Row>

superset/assets/src/visualizations/deckgl/AnimatableDeckGLContainer.jsx

@@ -10,12 +10,14 @@ const propTypes = {
   end: PropTypes.number.isRequired,
   step: PropTypes.number.isRequired,
   values: PropTypes.array.isRequired,
+  aggregation: PropTypes.bool,
   disabled: PropTypes.bool,
   viewport: PropTypes.object.isRequired,
   children: PropTypes.node,
 };
 
 const defaultProps = {
+  aggregation: false,
   disabled: false,
   step: 1,
 };
@@ -26,30 +28,41 @@ export default class AnimatableDeckGLContainer extends React.Component {
     const { getLayers, start, end, step, values, disabled, viewport, ...other } = props;
     this.state = { values, viewport };
     this.other = other;
+    this.onChange = this.onChange.bind(this);
   }
   componentWillReceiveProps(nextProps) {
     this.setState({ values: nextProps.values, viewport: nextProps.viewport });
   }
+  onChange(newValues) {
+    this.setState({
+      values: Array.isArray(newValues)
+        ? newValues
+        : [newValues, newValues + this.props.step],
+    });
+  }
   render() {
-    const layers = this.props.getLayers(this.state.values);
+    const { start, end, step, disabled, aggregation, children, getLayers } = this.props;
+    const { values, viewport } = this.state;
+    const layers = getLayers(values);
     return (
       <div>
         <DeckGLContainer
           {...this.other}
-          viewport={this.state.viewport}
+          viewport={viewport}
           layers={layers}
           onViewportChange={newViewport => this.setState({ viewport: newViewport })}
         />
-        {!this.props.disabled &&
+        {!disabled &&
         <PlaySlider
-          start={this.props.start}
+          start={start}
-          end={this.props.end}
+          end={end}
-          step={this.props.step}
+          step={step}
-          values={this.state.values}
+          values={values}
-          onChange={newValues => this.setState({ values: newValues })}
+          range={!aggregation}
+          onChange={this.onChange}
         />
         }
-        {this.props.children}
+        {children}
       </div>
     );
   }

superset/assets/src/visualizations/deckgl/layers/screengrid.jsx

@@ -110,6 +110,7 @@ class DeckGLScreenGrid extends React.PureComponent {
           mapboxApiAccessToken={this.props.payload.data.mapboxApiKey}
           mapStyle={this.props.slice.formData.mapbox_style}
           setControlValue={this.props.setControlValue}
+          aggregation
         />
       </div>
     );