feat: Component palette side panel and configurable widget components - #45
Merged
Merged
Conversation
Replace the top toolbar and component picker with a side panel holding the mode toggle, Preview, Save, toolbar_extra (Share) and Clear above a draggable component palette. Palette items add on click, on drop at the drop point, or on drop onto a port, which also wires the new node. - Place added components inside the visible viewport and refuse duplicate singletons. - Confirm Clear in a dialog and highlight Save while there are unsaved changes. - Load the Panel extensions components declare via `register(extensions=...)` up front, so lazily imported components render on the canvas. - Give the built-in widgets a minimum width so canvas nodes are no longer squeezed to 140px, and expose description, searchable, variant, size, placeholder, max_items, default value, format and color options. - Add a Slider number type that follows its bounds and step or can be set explicitly to integer or float.
…responsive reference width
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR replaces the editor's top toolbar and its Select + Add picker with a component palette in a side panel and a compact toolbar that floats over the canvas. Adding a component used to take two steps and dropped the node on a fixed grid, often off screen. Now you click it, or drag it to where it should go. It also makes the built-in widget components usable on the canvas and configurable.
pmui.MenuList(draggable=True)grouped by section. Clicking an item adds the component in the visible viewport. Dropping it on the canvas adds it at the drop point. Dropping it on a port places it beside that node and connects it through the first port pairvalidate_connectionaccepts, and a notification explains when no pair fits. Placed singletons are not draggable, and clicking one warns instead of adding it again.Selectand Add button. The mode toggle, the Preview switch, Save, Download,toolbar_extra(Share inFlowDashApp) and Clear now share one toolbar. It sits in the canvas'stop_panelin wiring mode and above the tile grid in dashboard mode. All actions are small text buttons. The side panel holds only the palette and is hidden in dashboard mode.toolbar=Falsehides the toolbar but keeps the palette, andeditable=Falsehides both. An empty canvas shows a hint in itsbottom_panel.<title>.json. Dropping that file onto the canvas recreates the components, edges and tile layout, after a confirmation when the canvas isn't empty. The file leaves outdashboard_id,user_idandpermission, and an import takes the loaded dashboard's identity, so a file cannot overwrite another dashboard or change its sharing.FlowDash.export_dashboard()andimport_dashboard()expose the same round trip.reference_width(panel-tiles 0.4.0) onDashboardModeland in the SQLite store, so narrower screens derive their layout from the width the dashboard was authored at. Dashboards saved without it are treated as authored at the largest breakpoint. I rewrote the responsive layout section of the layout guide to match.register(extensions=[...]), stored asPanelAppMetadata.extensions. The editor loads every declared extension up front, because components are imported lazily after the page has fetched its JavaScript, and a Tabulator, Vega or deck.gl view dropped later would otherwise break the canvas. The example components declare theirs.min_widget_widthoption (default 240). React Flow nodes size to their content and the widgets usestretch_width, so nodes were squeezed to the stylesheet's 140pxmin-width, which left the input about 80 to 100px. Tiles still stretch the widget.label,descriptionandmin_widget_width.searchable,variantandsize.placeholder,max_items,searchableandvariant. Formax_items, 0 means no limit, because panel-reactflow's schema form cannot render nullable fields.default_value,show_value,formatandcolor.Slider.number_type(auto,integerorfloat).autoselects integers when the effective bounds (configured or wired), step and default value are all whole numbers.integerrounds the bounds inward, uses a step of at least 1, formats without decimals and outputs anint.Raises minimum versions:
MenuList.draggable(feat: Add draggable MenuList items panel-material-ui#746).drop_types, thedropevent (feat: Accept drops onto the canvas and keep nodes mounted when node types change panel-reactflow#77) and"Files"drops (feat: Accept files dropped onto the canvas panel-reactflow#79).reference_width.panel-material-ui 0.16.0 is not on conda-forge yet, so
pixi.tomlpins it to thepyvizchannel until the feedstock catches up.API changes:
_component_pickerand_add_buttonare gone.toolbar_extraitems move from the right end of the toolbar to between Download and Clear.FlowDashApp's Share button is now a text button to match.How to test: run
flowdash serve examples/complex_dataflow, open a dashboard in edit mode, and drag components from the palette onto the canvas and onto ports. Then open a Slider's config and switchnumber_type, or wire a fractional start into it. Finally, click Download, clear the canvas and drag the downloaded file back onto it.Tests: 411 unit tests passed (1 skipped), 9 UI tests passed, and pre-commit is clean.
AI Disclosure
Tool & Model: Kilo Code + Claude Opus 5.5
Usage: Implemented the side panel, palette, drop handling, extension loading, widget options, tests and this PR description with AI assistance. I reviewed the diff and the screenshots and ran the listed checks.
Checklist