Play scrubber #4336

betodealmeida · 2018-02-02T23:55:21Z

@mistercrunch, this is the play slider/scrobbler for Deck.gl scatterplot. I started creating an NPM package for the <PlaySlider> component, but the layout and style is coupled with Superset, so I thought it would be better to have it here.

One thing I'm worried about these changes is that in order to get the start/end values for the slider the code is scanning the payload to get the min/max timestamps from the data. This has some advantages:

If you select a wide range of data (the long_lat sample table has a query since 2004, IIRC) the play slider will cover only the available data, making it better for exploring the results.
We don't need to parse the freetext ("now", "7 days ago") in Javascript.

The only downside is that it could be slow. Let me know what you think.

…lay_time

mistercrunch · 2018-02-07T00:13:55Z

superset/viz.py

@@ -1933,6 +1933,7 @@ class DeckScatterViz(BaseDeckGLViz):
    viz_type = 'deck_scatter'
    verbose_name = _('Deck.gl - Scatter plot')
    spatial_control_keys = ['spatial']
+    is_timeseries = True


I was expecting to see something that turns is_timeseries on or off in the query_obj based on whether a Time Grain is selected. Eventually we'll hide the Time Grain control where is_timeseries==False

mistercrunch · 2018-02-07T00:15:48Z

superset/assets/visualizations/PlaySlider.css

@@ -0,0 +1,21 @@
+.play-slider {
+    height: 100px; 


counldn't figure out how the DeckGL container knows how to set itself to height() -100 or is it just rendering on top of it?

That's the space currently left in the bottom, below the DeckGL container. TBH I wasn't really sure about the best way to place this.

mistercrunch · 2018-02-07T00:19:36Z

superset/assets/package.json

@@ -79,6 +81,7 @@
    "react-addons-shallow-compare": "^15.4.2",
    "react-alert": "^2.3.0",
    "react-bootstrap": "^0.31.5",
+    "react-bootstrap-slider": "2.0.1",


Cool, looks suited to support a nice SliderControl eventually.

Yeah, it should be straightforward to add the SliderControl — I actually added it at some point, and then removed.

(The latest version of the component is incompatible with other dependencies, which is why I fixed the version to 2.0.1, BTW.)

mistercrunch · 2018-02-07T00:19:59Z

superset/assets/package.json

@@ -69,6 +70,7 @@
    "mapbox-gl": "^0.43.0",
    "mathjs": "^3.16.3",
    "moment": "2.18.1",
+    "mousetrap": "^1.6.1",


Nice. we should sprinkle hotkeys everywhere! (and document them)

Yeah, it's worth doing a PR introducing some basic shortcuts.

At some point I was playing with more shortcuts (left and right to step the scrubber, up and down to increase/decrease its width), but I was worried it could conflict with other things.

mistercrunch · 2018-02-07T00:20:42Z

superset/assets/visualizations/PlaySlider.jsx

+  }
+  render() {
+    return (
+      <div className="row play-slider">


Let's use react-boostrap's Row and Cols here, in general we do all of the boostrap support through react-bootstrap as opposed through using className

Cool, I didn't know about them.

mistercrunch · 2018-02-07T00:23:24Z

I few minor nits and questions. Otherwise this looks solid!

betodealmeida

Will push the fixes.

betodealmeida · 2018-02-09T23:08:04Z

superset/assets/visualizations/PlaySlider.css

@@ -0,0 +1,21 @@
+.play-slider {
+    height: 100px; 


That's the space currently left in the bottom, below the DeckGL container. TBH I wasn't really sure about the best way to place this.

betodealmeida · 2018-02-09T23:09:23Z

superset/assets/package.json

@@ -79,6 +81,7 @@
    "react-addons-shallow-compare": "^15.4.2",
    "react-alert": "^2.3.0",
    "react-bootstrap": "^0.31.5",
+    "react-bootstrap-slider": "2.0.1",


Yeah, it should be straightforward to add the SliderControl — I actually added it at some point, and then removed.

(The latest version of the component is incompatible with other dependencies, which is why I fixed the version to 2.0.1, BTW.)

betodealmeida · 2018-02-09T23:10:37Z

superset/assets/package.json

@@ -69,6 +70,7 @@
    "mapbox-gl": "^0.43.0",
    "mathjs": "^3.16.3",
    "moment": "2.18.1",
+    "mousetrap": "^1.6.1",


Yeah, it's worth doing a PR introducing some basic shortcuts.

At some point I was playing with more shortcuts (left and right to step the scrubber, up and down to increase/decrease its width), but I was worried it could conflict with other things.

betodealmeida · 2018-02-09T23:11:17Z

superset/assets/visualizations/PlaySlider.jsx

+  }
+  render() {
+    return (
+      <div className="row play-slider">


Cool, I didn't know about them.

betodealmeida · 2018-02-09T23:11:26Z

superset/viz.py

@@ -1933,6 +1933,7 @@ class DeckScatterViz(BaseDeckGLViz):
    viz_type = 'deck_scatter'
    verbose_name = _('Deck.gl - Scatter plot')
    spatial_control_keys = ['spatial']
+    is_timeseries = True


betodealmeida · 2018-02-15T19:39:47Z

@mistercrunch, I refactored the animation code based on our discussion, can you take a look and see if this could be reused in your animated lines viz? Basically you need to pass a getLayers function that takes the time range of the frame (from the PlaySlider) and returns an array of layers.

In the scatterplot viz, the values (start and end, but they can be equal) are timestamps that are used to further filter the payload. In your animated lines viz you can increase the frame rate (might require changing PlaySlider a bit) and force start and end to be identical (to give you a single instant in time).

I tested changing the time grain and zooming in/out to ensure that the viewport and the scrubber controls are correctly being updated:

mistercrunch · 2018-02-16T01:55:03Z

This looks solid, I may need to adapt things a bit on my side but will do so in my PR if needed.

* Initial working prototype * Small fixes * Refactoring dekgl * Show all data when no time grain is selected * Refactor layers * Standardize function name * Fix exports * Fix require * Initial working prototype * Small fixes * Show all data when no time grain is selected * Moving play bar to correct location * Split component * Working on CSS * Remove control * Positioning the play slider * Fix refresh of slider state * Fix lint * Small fixes * Smoother animation for scans * Fix versions * Play/pause with spacebar. * Small fixes * Clean stuff that went to other PRs * Address issues * Refactor scatter animation

betodealmeida added 26 commits January 25, 2018 10:50

Initial working prototype

c31e642

Small fixes

4ba5e6e

Refactoring dekgl

e66ce7a

Show all data when no time grain is selected

a112a62

Refactor layers

b870862

Standardize function name

5d6f62f

Fix exports

4caa673

Fix require

52369ac

Initial working prototype

387ce72

Small fixes

bd2d45e

Show all data when no time grain is selected

ef59605

Moving play bar to correct location

cdd7139

Split component

dcf9561

Working on CSS

4946c33

Merge branch 'play_time' of github.com:lyft/incubator-superset into p…

6718276

…lay_time

Remove control

932b2fb

Positioning the play slider

62ddd0e

Fix refresh of slider state

813d1b0

Fix lint

a5697a1

Small fixes

f9b3c65

Smoother animation for scans

f8e9ce6

Rebase

5f34f63

Fix versions

01be0dc

Play/pause with spacebar.

a18f8e0

Small fixes

1f0e026

Clean stuff that went to other PRs

1afa41e

mistercrunch reviewed Feb 7, 2018

View reviewed changes

betodealmeida commented Feb 9, 2018

View reviewed changes

betodealmeida added 2 commits February 9, 2018 15:12

Address issues

f3c1a45

Refactor scatter animation

092f1e0

Merge branch 'master' into play_time

ec92c63

mistercrunch merged commit 4ee0833 into apache:master Feb 16, 2018

mistercrunch deleted the play_time branch February 16, 2018 01:55

mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 0.23.0 labels Feb 27, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Play scrubber #4336

Play scrubber #4336

betodealmeida commented Feb 2, 2018

mistercrunch Feb 7, 2018

betodealmeida Feb 9, 2018

mistercrunch Feb 7, 2018 •

edited

Loading

betodealmeida Feb 9, 2018

mistercrunch Feb 7, 2018

betodealmeida Feb 9, 2018

mistercrunch Feb 7, 2018

betodealmeida Feb 9, 2018

mistercrunch Feb 7, 2018 •

edited

Loading

betodealmeida Feb 9, 2018

mistercrunch commented Feb 7, 2018

betodealmeida left a comment

betodealmeida Feb 9, 2018

betodealmeida Feb 9, 2018

betodealmeida Feb 9, 2018

betodealmeida Feb 9, 2018

betodealmeida Feb 9, 2018

betodealmeida commented Feb 15, 2018

mistercrunch commented Feb 16, 2018

Play scrubber #4336

Play scrubber #4336

Conversation

betodealmeida commented Feb 2, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mistercrunch Feb 7, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mistercrunch Feb 7, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mistercrunch commented Feb 7, 2018

betodealmeida left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

betodealmeida commented Feb 15, 2018

mistercrunch commented Feb 16, 2018

mistercrunch Feb 7, 2018 •

edited

Loading

mistercrunch Feb 7, 2018 •

edited

Loading