docs: deephaven.ui dashboard crash course #1057
Conversation
| ```py | ||
| @ui.component | ||
| def species_panel(): | ||
| species, set_species = ui.use_state() |
There was a problem hiding this comment.
Unresolved comment from @mofojed for further discussion
https://github.com/deephaven/deephaven.io/pull/4567#discussion_r1873516746
There was a problem hiding this comment.
It's worth showing both somewhere, not sure that needs to be here.
There was a problem hiding this comment.
added badges with data hooks
| title: Create a Dashboard with deephaven.ui | ||
| --- | ||
|
|
||
| This guide shows you how to build a dashboard with `deephaven.ui`. [`deephaven.ui`](https://github.com/deephaven/deephaven-plugins/tree/main/plugins/ui) is Deephaven’s Python library to create user interfaces. You’ll use a wide range of components supported by the library to get you familiar with what `deephaven.ui` provides. |
There was a problem hiding this comment.
I wasn't kidding about my suggested introduction from your outline, I think its okay to give some personality, and introduce context to the dataset of what we are building from, and why.
Contextualize what you are building, and what your views into the data you are trying to show and weave the narrative through out.
There was a problem hiding this comment.
I did try to contextualize a bit more, but I think I'd need more specific examples/guidance throughout to write something more creative if that's still needed
|
|
||
| This guide shows you how to build a dashboard with `deephaven.ui`. [`deephaven.ui`](https://github.com/deephaven/deephaven-plugins/tree/main/plugins/ui) is Deephaven’s Python library to create user interfaces. You’ll use a wide range of components supported by the library to get you familiar with what `deephaven.ui` provides. | ||
|
|
||
|  |
There was a problem hiding this comment.
I don't think the end result dashboard is sexy enough yet.
The same view of the data twice looks boring, and the really tall vertically stretched plot just looks bad.
Doing some aggregations on the data or something to present it differently.
Make a histogram.
The tab view just being the same thing is also just lame. It should at least pretend to be useful.
There was a problem hiding this comment.
This is a more general comment, but especially pertinent to this comment.
One thing that I'm not entirely sure about is what the scope of this tutorial should be. I was under the impression that the original intended scope is really the sections of Basic Components and Dashboard. I added Interactivity as I think it's important, but could be skipped easily by someone only interested in the first two sections. If I start pulling in tons of different component this becomes a very tutorial from that original objective.
Maybe that's fine, but I think we still want something incredibly basic, perhaps in a different PR, of "I just want to build a super basic dashboard because I don't need tons of complex things, and maybe I'll pick up those complex things later, but really I just want to know how deephaven.ui works to get my feet wet."
There was a problem hiding this comment.
Added all suggestions
|
|
||
| ### `ui.table` | ||
|
|
||
| Wrapping a table in `ui.table` unlocks visual functionality on the table. With `iris`, create a `ui.table` that: |
There was a problem hiding this comment.
the first usage of each component should link to it's docs page.
|
|
||
| ### `ui.flex` | ||
|
|
||
| Wrap your chart and `ui.table` in a `ui.flex` component. `ui.flex` enables responsive layouts that adjust as you resize panels. |
There was a problem hiding this comment.
explain what a flex is, that is is an implementation of a flexbox [mdn link] and that it is one way to lay things out within a panel.
| ``` | ||
|
|
||
|  | ||
|
|
There was a problem hiding this comment.
I think we need more introduction of the plan, and the parts. What is a dashboard, what is a panel. The idea that we will iterate and create all our panels, then arrange them in a dashboard.
|
|
||
|  | ||
|
|
||
| ### `ui.use_state` |
There was a problem hiding this comment.
I would expect and example of showing state within a panel, and also state hoisted to the dashboard level that controls things across multiple panels.
|
|
||
|  | ||
|
|
||
| ### Stack |
There was a problem hiding this comment.
there's no stacks in the final example
|
|
||
|  | ||
|
|
||
| ### Row |
There was a problem hiding this comment.
I would expect at least one example of manually setting a row or columns width or height.
| 4. Uses the compact table density so you can see as many rows as possible | ||
|
|
||
| ```py | ||
| ui_iris = ui.table( |
There was a problem hiding this comment.
should show off table interactivity, with a row on_double_press handler
plugins/ui/docs/tutorial.md
Outdated
|
|
||
|  | ||
| To follow along, you need the [`deephaven.ui`](https://pypi.org/project/deephaven-plugin-ui/) package. | ||
| You also need simulated data and charts from [`deephaven.plot.express`](https://pypi.org/project/deephaven-plugin-ui/). You’ll create the simulated `iris` data below. |
There was a problem hiding this comment.
| You also need simulated data and charts from [`deephaven.plot.express`](https://pypi.org/project/deephaven-plugin-ui/). You’ll create the simulated `iris` data below. | |
| You also need simulated data and charts from [`deephaven.plot.express`](https://pypi.org/project/deephaven-plugin-ui/). You’ll create the simulated [`iris` data set](https://en.wikipedia.org/wiki/Iris_flower_data_set) below. |
plugins/ui/docs/tutorial.md
Outdated
| ui_iris_max = ui.panel(iris_max, title="Max") | ||
| ui_iris_min = ui.panel(iris_min, title="Min") | ||
|
|
||
| iris_agg_stack = ui.stack(ui_iris_avg, ui_iris_max, ui_iris_min) |
There was a problem hiding this comment.
This block doesn't work as is. Getting an error on the ui.stack ..
There was a problem hiding this comment.
Removed that chunk. Shouldn't have been there yet anyways.
There was a problem hiding this comment.
Still getting an error here. Chunk not removed?
There was a problem hiding this comment.
Ooops. Absolutely, definitely removed this time.
|
|
||
| ```python | ||
| @ui.component | ||
| def summary_badges(species): |
There was a problem hiding this comment.
This will be a nice place to use dx.indicator. But I like the use of badge in the meantime.
plugins/ui/docs/sidebar.json
Outdated
| @@ -14,6 +14,10 @@ | |||
| "label": "Introduction", | |||
| "path": "README.md" | |||
| }, | |||
| { | |||
There was a problem hiding this comment.
Order after installation please.
| - [`dx.scatter`](../../plotly-express/main/scatter.md) | ||
| - [`dx.histogram`](../../plotly-express/main/histogram.md) | ||
| - [`dx.densityheatmap`](../../plotly-express/main/density_heatmap.md) | ||
| - Component State |
There was a problem hiding this comment.
TODO: for these links
There was a problem hiding this comment.
@dsmmcken what should these links look like?
|
Took into account the feedback from the Friday demo. Specifically I added a small section on memoization. I didn't mention the flickering explicitly because of #1063 but that step does fix it. |
plugins/ui/docs/tutorial.md
Outdated
| ui_iris_max = ui.panel(iris_max, title="Max") | ||
| ui_iris_min = ui.panel(iris_min, title="Min") | ||
|
|
||
| iris_agg_stack = ui.stack(ui_iris_avg, ui_iris_max, ui_iris_min) |
There was a problem hiding this comment.
Still getting an error here. Chunk not removed?
Co-authored-by: margaretkennedy <[email protected]>
plugins/ui/docs/tutorial.md
Outdated
| - [`dx.scatter`](../../plotly-express/main/scatter.md) | ||
| - [`dx.histogram`](../../plotly-express/main/histogram.md) | ||
| - [`dx.densityheatmap`](../../plotly-express/main/density_heatmap.md) |
jnumainville
dismissed stale reviews from mofojed and margaretkennedy
via
6cf3fde
| - [`dx.scatter`](core/plotly/docs/box) | ||
| - [`dx.histogram`](core/plotly/docs/histogram) | ||
| - [`dx.density_heatmap`](core/plotly/docs/density_heatmap) |
There was a problem hiding this comment.
you need the leading slash.
/core
is not a relative path.
| - Component State | ||
| - Custom Components |
There was a problem hiding this comment.
remove if not linking to anything
Continued from https://github.com/deephaven/deephaven.io/pull/4567
Contains a deephaven.ui crash course
Idea is to progressively build an iris dashboard, creating a panel with some basic components, then move to a dashboard with several panels and more components, than add a custom panel with a picker and ui.use_state for a bit of interactivity. If someone just cares about putting some components together they could easily skip the last section, but I think it's important to include at least a basic example as that's where the power of deephaven.ui is.