POC - Client-Side Dash Apps #7

chriddyp · 2017-05-24T18:17:59Z

No description provided.

This new index will serve as our playground for making a client-side version of the app

chriddyp · 2017-05-24T18:22:23Z

src/local_examples/example_1_input_to_div.js

@@ -0,0 +1,51 @@
+export const appLayout = {


This is the super simple example to get started.

chriddyp · 2017-05-24T18:22:44Z

src/local_examples/example_3_crossfilter.js

@@ -0,0 +1,299 @@
+import R from 'ramda';


Crossfiltering! This example demonstrates simple crossfiltering. The flow being:

The selectedData and hoverData properties of each graph get updated when their events get fired.

This data gets fed into a Filter component.

The output of the Filter component gets fed into the opposite graph.

There is a separate Filter component for each graph

Some things to note:

We could add another TextInput and another Filter item to further filter out the data

The select box clears on newPlot. We'll need a way to persist this box across newPlot calls

chriddyp · 2017-05-24T18:22:48Z

src/local_examples/example_2_register_components.js

@@ -0,0 +1,323 @@
+import R from 'ramda';


This example is a little bit more complicated:

There are a few custom components (in the example_components.react file): a Filter, Table, and a DataStore component

The Dropdown elements and the text Input element update the properties of the Filter component.

The output of the Filter component updates the secondary table and the chart (the orange dots).

Set the "animation=true" property of the graph to show some smooth transitions for fun.

chriddyp · 2017-05-24T18:25:45Z

To run these examples:

Step 1 - Build the bundle:

git clone https://github.com/plotly/dash-renderer.git
cd dash_renderer
npm run build-local

I use a combination of ag and entr to rebuild automatically:

ag -l --js | entr npm run build-local

In a separate terminal, start a local file serving server. For example:

cd dash_renderer
python -m SimpleHTTPServer

then visit this server in your web browser (e.g. localhost:8000)

chriddyp · 2017-05-24T18:26:27Z

src/local.js

+ * Examples need to export appLayout and mapInputsToOutputs
+ * objects.
+*/
+import {appLayout, mapInputsToOutputs} from './local_examples/example_1_input_to_div';


To create a new example, just change this import. And make sure that the examples that you write export an appLayout and a mapInputsToOutputs object.

chriddyp · 2017-05-24T18:28:29Z

src/local_examples/example_1_input_to_div.js

+
+        ]
+    }
+};


This appLayout object describes what the app looks like. Technically, it recursively generates the tree of react components.

dash_core_components and dash_html_components are loaded up in the index.html file. Here is the source for the dash_core_components: https://github.com/plotly/dash-core-components/tree/master/src/components

chriddyp · 2017-05-24T18:30:05Z

src/local_examples/example_1_input_to_div.js

+                id: 'my-input',
+                property: 'value'
+            }
+        ],


mapInputsToOutputs describes out properties of input components (as specified in the appLayout) map to a single property of a single output component. Updates happen reactively, so whenever an input changes, the output transform function gets called with those input properties and then the output property gets updated with that new value.

chriddyp · 2017-05-24T18:30:32Z

src/local_examples/example_1_input_to_div.js

+             * objects or arrays, arithmetic, etc.
+             */
+            transform: inputArguments => {
+                return `You've entered: ${inputArguments['my-input.value']}`;


inputArguments is an object with keys that are the id and the property of the inputs, separated by a ..

chriddyp · 2017-05-24T18:30:42Z

src/local_examples/example_1_input_to_div.js

+             * Of course, we can't have functions in the actual spec,
+             * but we could introduce a lightweight transformation
+             * language for modifying strings, accessing values in
+             * objects or arrays, arithmetic, etc.


Important point here! ^^

chriddyp · 2017-05-24T18:39:31Z

src/local_examples/example_3_crossfilter.js

+                    selectedData = R.pluck('customdata', inputArguments['graph-1-vs-2.selectedData']['points']);
+                }
+                return R.concat(hoverData, selectedData);
+            }


This transform uses a bit of JS, which can't be serialized as JSON. So, for this to work, we'd need to do one or more of the following:

Design better input and output properties of components so that they can easily be declaratively composed with each other.

Design a lightweight language for doing these types of operations (like we could just expose Ramda)

chriddyp · 2017-05-24T18:40:10Z

src/local_examples/example_components.react.js

+    }
+
+    render() {
+        return null;


Note how this component doesn't actually render itself on the page

chriddyp · 2017-05-24T18:40:36Z

src/local_examples/example_components.react.js

+                }
+            });
+            console.warn('filteredColumns: ', filteredColumns);
+            setProps({filteredColumns});


setProps is provided by dash-renderer and performs the reactive updates across the app

chriddyp · 2017-05-24T18:41:43Z

src/local_examples/example_components.react.js

+    filteredColumns: PropTypes.object
+}
+
+export const DataStore = props => null;


DataStore is super generic - you can pass whatever props in whatever form you want to it. In the examples it's being used to store columns={...} but it could be used to store anything. Unlike filter, the properties that you supply to it never change.

chriddyp · 2017-05-24T18:43:04Z

src/local_examples/example_components.react.js

+
+window.dash_functional_components = {
+    DataStore, Filter, Table
+};


dash-renderer looks up the namespace and type of each component in the window.

chriddyp · 2018-06-22T15:36:21Z

Closing this WIP in favor of https://github.com/plotly/streambed/issues/10927

chriddyp added 4 commits May 24, 2017 14:15

Webpack config for a new local index point

6f16cbc

This new index will serve as our playground for making a client-side version of the app

Simple example of an app that uses local callbacks

097868a

example with creating custom components and filters

c0b1d4e

example with cross-filtering

30672e2

chriddyp commented May 24, 2017

View reviewed changes

chriddyp changed the title ~~POC - Apps Without AJAX~~ POC - Client-Side Dash Apps Oct 9, 2017

chriddyp mentioned this pull request Nov 2, 2017

Is there a way to export the dash layout as an html? plotly/dash#145

Closed

chriddyp mentioned this pull request Nov 15, 2017

enable users to create standalone desktop Dash apps plotly/dash#158

Open

chriddyp mentioned this pull request Mar 26, 2018

Dash Tabs component plotly/dash-core-components#74

Closed

chriddyp closed this Jun 22, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

POC - Client-Side Dash Apps #7

POC - Client-Side Dash Apps #7

chriddyp commented May 24, 2017

chriddyp May 24, 2017

chriddyp May 24, 2017

chriddyp May 24, 2017

chriddyp May 24, 2017

chriddyp May 24, 2017

chriddyp May 24, 2017

chriddyp commented May 24, 2017

chriddyp May 24, 2017

chriddyp May 24, 2017

chriddyp May 24, 2017

chriddyp May 24, 2017

chriddyp May 24, 2017

chriddyp May 24, 2017

chriddyp May 24, 2017

chriddyp May 24, 2017

chriddyp May 24, 2017

chriddyp May 24, 2017

chriddyp commented Jun 22, 2018

POC - Client-Side Dash Apps #7

POC - Client-Side Dash Apps #7

Conversation

chriddyp commented May 24, 2017

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

chriddyp commented May 24, 2017

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

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

chriddyp commented Jun 22, 2018