POC - Client-Side Dash Apps by chriddyp · Pull Request #7 · plotly/dash-renderer

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

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


This is the super simple example to get started.

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

@@ -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

@@ -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

+ * 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

+
+ ]
+ }
+};


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

+ 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

+ * 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

+ * 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

+ 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

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


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

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

+ }
+ });
+ 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

+ 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

+
+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 · 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

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


This is the super simple example to get started.

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

@@ -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

@@ -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

+ * 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

+
+ ]
+ }
+};


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

+ 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

+ * 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

+ * 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

+ 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

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


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

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

+ }
+ });
+ 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

+ 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

+
+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 · 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

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


This is the super simple example to get started.

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

@@ -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

@@ -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

+ * 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

+
+ ]
+ }
+};


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

+ 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

+ * 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

+ * 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

+ 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

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


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

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

+ }
+ });
+ 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

+ 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

+
+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 · 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

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


This is the super simple example to get started.

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

@@ -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

@@ -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

+ * 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

+
+ ]
+ }
+};


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

+ 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

+ * 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

+ * 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

+ 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

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


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

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

+ }
+ });
+ 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

+ 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

+
+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 · 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

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


This is the super simple example to get started.

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

@@ -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

@@ -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

+ * 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

+
+ ]
+ }
+};


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

+ 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

+ * 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

+ * 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

+ 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

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


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

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

+ }
+ });
+ 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

+ 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

+
+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 · 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

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


This is the super simple example to get started.

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

@@ -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

@@ -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

+ * 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

+
+ ]
+ }
+};


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

+ 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

+ * 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

+ * 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

+ 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

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


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

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

+ }
+ });
+ 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

+ 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

+
+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 · 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

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


This is the super simple example to get started.

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

@@ -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

@@ -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

+ * 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

+
+ ]
+ }
+};


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

+ 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

+ * 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

+ * 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

+ 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

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


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

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

+ }
+ });
+ 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

+ 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

+
+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 · 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

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


This is the super simple example to get started.

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

@@ -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

@@ -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

+ * 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

+
+ ]
+ }
+};


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

+ 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

+ * 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

+ * 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

+ 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

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


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

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

+ }
+ });
+ 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

+ 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

+
+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
Closed

chriddyp mentioned this pull request Mar 26, 2018
Dash Tabs component plotly/dash-core-components#74
Closed

chriddyp closed this Jun 22, 2018

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
Closed

chriddyp mentioned this pull request Mar 26, 2018
Dash Tabs component plotly/dash-core-components#74
Closed

chriddyp closed this Jun 22, 2018

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
Closed

chriddyp mentioned this pull request Mar 26, 2018
Dash Tabs component plotly/dash-core-components#74
Closed

chriddyp closed this Jun 22, 2018

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
Closed

chriddyp mentioned this pull request Mar 26, 2018
Dash Tabs component plotly/dash-core-components#74
Closed

chriddyp closed this Jun 22, 2018

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
Closed

chriddyp mentioned this pull request Mar 26, 2018
Dash Tabs component plotly/dash-core-components#74
Closed

chriddyp closed this Jun 22, 2018

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
Closed

chriddyp mentioned this pull request Mar 26, 2018
Dash Tabs component plotly/dash-core-components#74
Closed

chriddyp closed this Jun 22, 2018

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
Closed

chriddyp mentioned this pull request Mar 26, 2018
Dash Tabs component plotly/dash-core-components#74
Closed

chriddyp closed this Jun 22, 2018

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
Closed

chriddyp mentioned this pull request Mar 26, 2018
Dash Tabs component plotly/dash-core-components#74
Closed

chriddyp closed this Jun 22, 2018

Uh oh!

Conversation

chriddyp commented May 24, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chriddyp commented May 24, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chriddyp commented Jun 22, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

chriddyp commented May 24, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chriddyp commented May 24, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!