Skip to content

feat: Component palette side panel and configurable widget components - #45

Merged
philippjfr merged 3 commits into
mainfrom
feat/component-palette
Sep 29, 2026
Merged

philippjfr merged 3 commits into
mainfrom
feat/component-palette

Conversation

@philippjfr

@philippjfr philippjfr commented Sep 29, 2026 •

Copy link
Copy Markdown
Contributor

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.

  • Added a palette, a 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 pair validate_connection accepts, and a notification explains when no pair fits. Placed singletons are not draggable, and clicking one warns instead of adding it again.
  • Removed the component Select and Add button. The mode toggle, the Preview switch, Save, Download, toolbar_extra (Share in FlowDashApp) and Clear now share one toolbar. It sits in the canvas's top_panel in 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=False hides the toolbar but keeps the palette, and editable=False hides both. An empty canvas shows a hint in its bottom_panel.
  • Clear now asks for confirmation in a dialog, and Save switches from text to contained while there are unsaved changes.
  • Added a Download button that saves the canvas as <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 out dashboard_id, user_id and permission, and an import takes the loaded dashboard's identity, so a file cannot overwrite another dashboard or change its sharing. FlowDash.export_dashboard() and import_dashboard() expose the same round trip.
  • Persisted the tile grid's reference_width (panel-tiles 0.4.0) on DashboardModel and 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.
  • Added register(extensions=[...]), stored as PanelAppMetadata.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.
  • Gave the built-in widgets a min_widget_width option (default 240). React Flow nodes size to their content and the widgets use stretch_width, so nodes were squeezed to the stylesheet's 140px min-width, which left the input about 80 to 100px. Tiles still stretch the widget.
  • Exposed more options on the built-in widgets, all applied live through a shared base class:
    • All three: label, description and min_widget_width.
    • Select: searchable, variant and size.
    • MultiChoice: placeholder, max_items, searchable and variant. For max_items, 0 means no limit, because panel-reactflow's schema form cannot render nullable fields.
    • Slider: default_value, show_value, format and color.
  • Added Slider.number_type (auto, integer or float). auto selects integers when the effective bounds (configured or wired), step and default value are all whole numbers. integer rounds the bounds inward, uses a step of at least 1, formats without decimals and outputs an int.

Raises minimum versions:

panel-material-ui 0.16.0 is not on conda-forge yet, so pixi.toml pins it to the pyviz channel until the feedstock catches up.

API changes:

  • The private _component_picker and _add_button are gone.
  • toolbar_extra items 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 switch number_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.

  • I have tested all AI-generated content in my PR.
  • I take responsibility for all AI-generated content in my PR.

Checklist

  • Tests added and are passing
  • Added documentation

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.
@philippjfr
philippjfr merged commit e53ac9c into main Sep 29, 2026
14 checks passed
@philippjfr
philippjfr deleted the feat/component-palette branch September 29, 2026 12:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant