Streamlit & Plotly — design lessons for facett
Two reference systems for facett's direction. Streamlit defines the component / layout / forms / state ergonomics (admin apps); Plotly defines the chart taxonomy + interaction/crossfilter model (analytics). Both converge on the uniform capability model in capability-model.md.
Architectural note: Streamlit re-runs a script server-side on every interaction; Plotly is retained/JS. facett is immediate-mode native egui — it gets the ergonomics of both with none of the re-run/retained cost. Immediate mode is the reactive model.
Streamlit → the ergonomics reference
| Streamlit idea | What facett steals |
Uniform widget signature (label, value, key, on_change, disabled, help) |
Every Facet exposes the same builder shape — pairs with FacetCaps. The owner's "uniform components" goal. |
Layout primitives: columns, tabs, expander, sidebar, container |
Ship these as first-class layout Facets (most map onto egui panels). Admin apps are 80% layout. |
st.form batches inputs, submits as a unit |
The model for facett-form: validate-on-submit, no per-keystroke churn. |
st.metric (KPI cards), st.data_editor (editable grid) |
Metric cards + an editable mode for facett-table. |
st.session_state |
Formalize FacetDeck keyed state (egui Memory already does this) so state survives frame rebuilds. |
Plotly → the charting reference
figure = traces + layout. Trace taxonomy: scatter/line/bar/histogram/box/violin/ heatmap/contour/candlestick/3d surface+mesh/choropleth/sankey/treemap/sunburst/ parallel-coords. Interaction: hover, zoom/pan, box+lasso select, legend toggle, range slider, crossfilter.
| Plotly idea | What facett steals |
| Chart-type breadth | egui_plot (→ facett-plot) covers line/scatter/bar/histogram. Fill the gap (box/violin/heatmap/candlestick/sankey/treemap) via facett-plotters; 3d via facett-graph3d; geo via facett-map. |
| Selection emits an event (box/lasso) | Route selection through FacetDeck so selecting on one chart filters every other facet — crossfilter. Highest-value analytics interaction (korp!). |
figure/trace/layout separation |
A clean, themeable declarative data model facett-plot should mirror. |
| Interaction vocabulary | Adopt hover-readout / legend-toggle / range-slider uniformly. |
Realism: full Plotly parity is infeasible in immediate mode — target the common-80% trace types + select/hover/zoom/legend, lean on plotters for the long tail.
Net
- Streamlit → facett's component/layout/forms/state surface.
- Plotly → facett's chart taxonomy + selection/crossfilter surface.
- Both reinforce: uniform
(label/key/disabled/help/on_change)+FacetCaps(scalable/copyable/selectable) + selection events flowing through the deck.
See also: capability-model.md, facett-form.md, component-uniformity.md.