Skip to content

Make registry viewer autosize to viewport with resizable sidebar#217

Merged
timkpaine merged 1 commit into
mainfrom
pit/ui-autosize
May 27, 2026
Merged

Make registry viewer autosize to viewport with resizable sidebar#217
timkpaine merged 1 commit into
mainfrom
pit/ui-autosize

Conversation

@ptomecek
Copy link
Copy Markdown
Collaborator

Replaces the fixed-pixel pn.Row layout in the ccflow.ui registry viewer with a panel_material_ui.Page that fills the viewport and provides a draggable sidebar/main divider out of the box.

Changes

  • ModelRegistryViewer.__panel__() now returns a pmui.Page with the registry browser in the sidebar and the model viewer in the main slot.
  • Inner widgets that had hardcoded pixel widths (ModelTypeViewer._pane, ModelConfigViewer._metadata, ModelViewer._json_editor) now use sizing_mode='stretch_width' and the stretch is propagated through their parent Columns.
  • JSONEditor gets min_width=400 to guard against the known zero-width-when-initially-hidden measurement bug.
  • overflow-wrap:anywhere added to <code>/<li> blocks that render long type names, paths, and field rows so they wrap instead of forcing horizontal overflow when the sidebar is narrowed.
  • The browser is wrapped in a scrolling pn.Column(..., sizing_mode='stretch_both', scroll=True) inside the sidebar so large registries remain navigable.

Hard breaks

  • ModelRegistryViewer params browser_height and viewer_width removed.
  • CLI flags --browser-height and --viewer-width removed.
  • New title param + --title flag for the page header (default "ccflow Model Registry").

Notebook usage note

pmui.Page is a template — designed to be the root of a served document, not embedded inline in a Jupyter output cell. For interactive inline inspection of a registry or model use the existing BaseModel.get_widget() (IPython.display.JSON). For the full interactive UI, run the CLI or pn.serve(viewer.__panel__()) / viewer.__panel__().show().

Verification

  • make lint clean.
  • All 68 tests in ccflow/tests/ui/ pass.
  • Reviewed by a GPT-5.5 code-review agent; one finding (unwrapped field-list <code> blocks) addressed before commit.
  • Smoke-tested via panel serve against a registry with nested subregistries and long field names — sidebar resize, scroll, and content wrapping all behave as expected.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 27, 2026

Test Results

840 tests   - 3   838 ✅  - 3   1m 49s ⏱️ +6s
  1 suites ±0     2 💤 ±0 
  1 files   ±0     0 ❌ ±0 

Results for commit bfaa4a2. ± Comparison against base commit 68a35ff.

This pull request removes 4 and adds 1 tests. Note that renamed tests count towards both.
ccflow.tests.ui.test_registry.TestModelRegistryViewer ‑ test_make_browser_column
ccflow.tests.ui.test_registry.TestModelRegistryViewer ‑ test_make_viewer_column_with_width
ccflow.tests.ui.test_registry.TestModelRegistryViewer ‑ test_make_viewer_column_without_width
ccflow.tests.ui.test_registry.TestModelRegistryViewer ‑ test_panel_is_row_layout
ccflow.tests.ui.test_registry.TestModelRegistryViewer ‑ test_panel_is_page_layout

♻️ This comment has been updated with latest results.

@codecov
Copy link
Copy Markdown

codecov Bot commented May 27, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.36%. Comparing base (68a35ff) to head (bfaa4a2).

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #217      +/-   ##
==========================================
- Coverage   95.37%   95.36%   -0.02%     
==========================================
  Files         142      142              
  Lines       11428    11402      -26     
  Branches      623      622       -1     
==========================================
- Hits        10899    10873      -26     
  Misses        399      399              
  Partials      130      130              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@ptomecek ptomecek changed the base branch from main to pit/ui-improvements May 27, 2026 17:21
Base automatically changed from pit/ui-improvements to main May 27, 2026 17:46
Replace the fixed-pixel pn.Row layout with a panel_material_ui.Page that
fills the viewport and provides a draggable sidebar/main divider. Inner
widgets that had hardcoded widths (HTML panes, JSONEditor) now use
sizing_mode='stretch_width' so they grow with the viewer panel.

The browser is wrapped in a scrolling Column inside the sidebar so large
registries remain navigable. Long type names, paths, and field entries
get overflow-wrap:anywhere to prevent horizontal overflow when the panel
is narrowed.

Hard breaks:
- ModelRegistryViewer params browser_height and viewer_width removed.
- CLI flags --browser-height and --viewer-width removed.
- Added a 'title' param and corresponding --title flag.

Signed-off-by: Pascal Tomecek <pascal.tomecek@cubistsystematic.com>
@ptomecek ptomecek marked this pull request as ready for review May 27, 2026 18:08
@timkpaine timkpaine merged commit 6213332 into main May 27, 2026
13 checks passed
@timkpaine timkpaine deleted the pit/ui-autosize branch May 27, 2026 19:55
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.

3 participants