superset-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From maximebeauche...@apache.org
Subject [incubator-superset] branch master updated: Fixes to the play slider (#5675)
Date Wed, 22 Aug 2018 04:01:47 GMT
This is an automated email from the ASF dual-hosted git repository.

maximebeauchemin pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-superset.git


The following commit(s) were added to refs/heads/master by this push:
     new bcc0954  Fixes to the play slider (#5675)
bcc0954 is described below

commit bcc0954bb9d23f40abcf3a04fd28cf5eb18e4ffd
Author: Beto Dealmeida <roberto@dealmeida.net>
AuthorDate: Tue Aug 21 21:01:44 2018 -0700

    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  |  8 +++--
 superset/assets/src/visualizations/PlaySlider.jsx  | 34 +++++++++++++---------
 .../deckgl/AnimatableDeckGLContainer.jsx           | 31 ++++++++++++++------
 .../visualizations/deckgl/layers/screengrid.jsx    |  1 +
 4 files changed, 49 insertions(+), 25 deletions(-)

diff --git a/superset/assets/src/visualizations/PlaySlider.css b/superset/assets/src/visualizations/PlaySlider.css
index 7de07de..df0fe77 100644
--- a/superset/assets/src/visualizations/PlaySlider.css
+++ b/superset/assets/src/visualizations/PlaySlider.css
@@ -1,8 +1,8 @@
 .play-slider {
-    position: absolute;
-    bottom: -16px;
+    position: relative;
     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;
+}
diff --git a/superset/assets/src/visualizations/PlaySlider.jsx b/superset/assets/src/visualizations/PlaySlider.jsx
index b72dc63..107aa55 100644
--- a/superset/assets/src/visualizations/PlaySlider.jsx
+++ b/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 cr = values[0] - this.props.start;
-      values = values.map(value => value - cr);
-    }
-    this.props.onChange(values);
+
+    const currentValues = Array.isArray(values) ? values : [values, values + step];
+    const nextValues = currentValues.map(value => value + this.increment);
+    const carriageReturn = (nextValues[1] > end) ? (nextValues[0] - start) : 0;
+
+    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}
-            max={this.props.end}
-            step={this.props.step}
-            orientation={this.props.orientation}
-            reversed={this.props.reversed}
-            disabled={this.props.disabled ? 'disabled' : 'enabled'}
+            min={start}
+            max={end}
+            step={step}
+            orientation={orientation}
+            reversed={reversed}
+            disabled={disabled ? 'disabled' : 'enabled'}
           />
         </Col>
       </Row>
diff --git a/superset/assets/src/visualizations/deckgl/AnimatableDeckGLContainer.jsx b/superset/assets/src/visualizations/deckgl/AnimatableDeckGLContainer.jsx
index 3bee4a4..ddf5a40 100644
--- a/superset/assets/src/visualizations/deckgl/AnimatableDeckGLContainer.jsx
+++ b/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}
-          end={this.props.end}
-          step={this.props.step}
-          values={this.state.values}
-          onChange={newValues => this.setState({ values: newValues })}
+          start={start}
+          end={end}
+          step={step}
+          values={values}
+          range={!aggregation}
+          onChange={this.onChange}
         />
         }
-        {this.props.children}
+        {children}
       </div>
     );
   }
diff --git a/superset/assets/src/visualizations/deckgl/layers/screengrid.jsx b/superset/assets/src/visualizations/deckgl/layers/screengrid.jsx
index cb21153..4ec6e8d 100644
--- a/superset/assets/src/visualizations/deckgl/layers/screengrid.jsx
+++ b/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>
     );


Mime
View raw message