FE-512: Create FilterableListSubView with keyboard navigation and search by kube · Pull Request #8532 · hashintel/hash

kube · 2026-03-12T01:06:27Z

Kapture.2026-03-13.at.11.01.04.mp4

🌟 What is the purpose of this PR?

Introduces the FilterableListSubView component and a global search panel for the Petrinaut editor sidebar. This provides a reusable, keyboard-navigable list pattern for all sidebar sections, along with fuzzy search across all entities.

🔗 Related links

FE-512 (internal)

🔍 What does this change?

FilterableListSubView

Add createFilterableListSubView factory for reusable sidebar list sections
Keyboard navigation (Arrow Up/Down), range selection (Shift+Click, Shift+Arrow), multi-select (Ctrl/Cmd+Click)
Row ellipsis menu with context actions
Focus management with visual focus indicator and blur reset

Search panel

Global search triggered via Ctrl/Cmd+F or Search button in sidebar headers
Fuzzy matching using fuzzysort with highlighted match results
Keyboard navigation between search input and results (ArrowDown enters list, ArrowUp on first item returns to input)
Escape closes search; empty query shows no results

VerticalSubViewsContainer improvements

Collapsible header border hidden when collapsed
renderTitle support for custom header content (used by search input)
Token-based header height and icon sizing

Other

Centralized entity icons
Keyboard focus highlighting on Menu items and submenu triggers
TopBar title input fills available space
Fix infinite render loop in EditorProvider by removing manual useCallback/useMemo (React Compiler handles memoization)

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

modifies an npm-publishable library and I have added a changeset file(s)

📜 Does this require a change to the docs?

The changes in this PR:

are internal and do not require a docs change

🕸️ Does this require a change to the Turbo Graph?

The changes in this PR:

do not affect the execution graph

❓ How to test this?

Checkout the branch and run yarn dev in libs/@hashintel/petrinaut
Open the sidebar — verify lists are keyboard navigable (Arrow keys, Shift+Click range, Ctrl+Click toggle)
Press Ctrl/Cmd+F — search panel appears with animated transition
Type to fuzzy-search entities — matches are highlighted
Use Arrow Down to navigate into results, Arrow Up on first result returns to input
Press Escape to close search

vercel · 2026-03-12T01:06:39Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hash	Ready	Preview, Comment	Mar 14, 2026 7:15pm
petrinaut	Ready	Preview	Mar 14, 2026 7:15pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
hashdotdesign	Ignored	Preview	Mar 14, 2026 7:15pm
hashdotdesign-tokens	Ignored	Preview	Mar 14, 2026 7:15pm

kube · 2026-03-12T01:06:45Z

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

FE-502: Improve SDCPN file import/export with Zod validation and layout fix #8536
FE-504: Add copy/paste and select all to petrinaut editor #8533
FE-512: Create FilterableListSubView with keyboard navigation and search #8532 👈 (View in Graphite)
H-6324: Migrate petrinaut to oxlint and verify React Compiler #8539 : 2 other dependent PRs (#8537 , #8541 )
main

This stack of pull requests is managed by Graphite. Learn more about stacking.

cursor · 2026-03-13T00:39:53Z

PR Summary

Medium Risk
Moderate UI/UX change that refactors left sidebar list implementations and adds new keyboard shortcut-driven search state, which could introduce selection/focus regressions but does not touch security- or data-critical logic.

Overview
Adds a reusable createFilterableListSubView pattern for left-sidebar entity lists, including keyboard navigation, range/multi-select behaviors, and per-row overflow menus for actions like delete.

Introduces a sidebar-wide fuzzy search panel (powered by fuzzysort) that can be opened via header search buttons or Ctrl/Cmd+F, with focus management via new EditorContext search state/ref and an animated swap between normal sidebar content and search view.

Updates subview/header plumbing and styling (SubView now supports icon, renderTitle, and alwaysShowHeaderAction), applies icons across properties subviews, and includes small visual tweaks (menu highlighted state, tooltip icon variants, layout/padding adjustments, and editor container overflow).

^{Written by Cursor Bugbot for commit 981a51a. This will update automatically on new commits. Configure here.}

libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/multi-selection-panel.tsx

augmentcode · 2026-03-13T00:45:51Z

🤖 Augment PR Summary

Summary: Refines Petrinaut’s vertical subview headers to better match updated UI behavior and adds reusable list subviews.

Changes:

Updated VerticalSubViewsContainer header styling: header actions/tooltip reveal on hover/focus and chevron visibility behavior.
Extended SubView to support optional header icons and an alwaysShowHeaderAction flag.
Introduced centralized entity icon exports (entity-icons.tsx) and applied them to PropertiesPanel headers.
Refactored left sidebar lists (nodes/types/parameters/differential equations) onto a new createFilterableListSubView factory with consistent row styling and per-row menus.
Adjusted menu/tooltip/section styling tokens for updated design-system alignment (highlight states, borders, radii, spacing).

Technical Notes: New filterable list subviews add keyboard navigation and multi-select range selection, and move destructive actions into an ellipsis menu using the shared Menu component.

_{🤖 Was this summary useful? React with 👍 or 👎}

augmentcode

Review completed. 3 suggestions posted.

Comment augment review to trigger a new review at any time.

augmentcode · 2026-03-13T00:45:52Z

...ashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx

+                  <item.icon size={LIST_ITEM_ICON_SIZE} />
+                </span>
+              )}
+              <span className={listItemNameStyle}>


renderItem() is wrapped in a <span>, but some callers (e.g. parameters) return a <div> which creates invalid HTML (div inside span) and can lead to layout/hydration warnings. Consider using a block wrapper or constraining renderItem to inline content.

Severity: medium

_{🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.}

Fixed — changed the <span> wrapper to <div> so block-level renderItem content doesn't create invalid HTML.

augmentcode · 2026-03-13T00:45:52Z

...ashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx

+    [items, getSelectionItem, setSelection],
+  );
+
+  const handleKeyDown = useCallback(


The listbox-level onKeyDown will also fire when focus is on nested controls (e.g. the row menu IconButton), so Enter/Space/arrow keys can interfere with opening/navigating menus. Consider ignoring key handling unless the event originated from the container itself.

Severity: medium

_{🤖 Was this useful? React with 👍 or 👎, or 🚀 if it prevented an incident/outage.}

Fixed — added event.target \!== event.currentTarget guard so the listbox-level onKeyDown ignores events bubbling from nested controls like menu buttons.

...ashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx

libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx

libs/@hashintel/petrinaut/src/views/Editor/components/BottomBar/use-keyboard-shortcuts.ts

cursor · 2026-03-13T10:10:56Z

libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx

+  },
+  emptyMessage: "No global parameters yet",
+  renderHeaderAction: () => <ParametersHeaderAction />,
+});


Simulation parameter value editing feature lost in refactor

Medium Severity

The refactor from a custom component to createFilterableListSubView removed the inline NumberInput that allowed changing parameter values during simulation mode. The old code used SimulationContext (parameterValues, setParameterValue) to render an editable input for each parameter when globalMode === "simulate". The new code only hides the delete menu item in simulation mode but provides no way to edit parameter values inline.

Valid observation — the inline NumberInput for editing parameter values during simulation mode was removed when migrating to the createFilterableListSubView pattern. This will be addressed in a follow-up since it requires a per-item renderAction slot that doesn't fit the current generic list abstraction.

...ashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/filterable-list-sub-view.tsx

...intel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/differential-equations-list.tsx

libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/search-panel.tsx

…e entity icons Clicking in the list container but not on an item now calls clearSelection to deselect all. Also update Parameter/TokenType/DifferentialEquation icons. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Increase default panel content horizontal padding to 4 and use negative margin on FilterableListSubView to reduce its effective padding to 3. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

…terable list and menu - Add Arrow Up/Down keyboard navigation with focused item tracking - Support Shift+Click and Shift+Arrow range selection via selectRange helper - Ctrl/Cmd+Click toggles multi-selection with anchor tracking - Escape clears selection and resets focus state - Clamp focus/anchor indices when item list shrinks - Auto-scroll focused items into view - Add ARIA listbox/option roles for accessibility - Suppress default browser focus outline on list container - Add _highlighted styles to Menu items and submenu triggers for keyboard focus Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Convert headerRowStyle to cva with isCollapsed variant that sets borderBottomColor to transparent, avoiding visual double-borders between collapsed sections. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Replace raw [44px] with token value for consistent sizing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Clear focusedIndex and anchorIndex on blur when focus moves outside the list container, so stale keyboard state doesn't persist. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Replace fixed minWidth with flex: 1 so the title input expands to use all remaining space in the left section. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Add isSearchOpen state and searchInputRef to EditorContext - Create SearchPanel subview with input in header via renderTitle - Add renderTitle to SubView type for custom main header content - Swap between normal subviews and search panel with CSS transition - Ctrl/Cmd+F opens search or focuses input if already open - Escape closes search globally via keyboard shortcuts hook - Wire Search button in FilterableListSubView header to open search Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Search all sidebar items (nodes, types, equations, parameters) with fuzzy matching via fuzzysort. Matched characters are highlighted in results. Shows match count at top, all items when query is empty. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

… call ArrowDown from the search input moves focus to the first result. ArrowUp/Down navigates through results, selecting each item. ArrowUp on the first result returns focus to the input. Also fixes the fuzzysort highlight call to use the instance method (result.highlight) instead of the non-existent static method. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Hide the Filter and Sort IconButtons from FilterHeaderAction (not yet implemented). Remove all useCallback and useMemo wrappers from changed files so the React Compiler can optimize the components. Also fix search panel to show empty state when no query and prevent onFocus render loop. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

… handler Rename getMenuItems → useMenuItems so the linter recognizes these callbacks as hooks (they call use() and useIsReadOnly() inside RowMenu's render). Add onKeyDown to the row div to satisfy the click-events-have-key-events a11y rule. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

libs/@hashintel/petrinaut/src/views/Editor/components/BottomBar/use-keyboard-shortcuts.ts

- Fix invalid HTML: change <span> to <div> for listItemNameStyle wrapper so block-level renderItem content (e.g. parameters) nests correctly - Guard listbox onKeyDown to ignore events bubbling from nested controls - Prevent Ctrl+F from intercepting inside Monaco/inputs by checking isInputFocused before handling the shortcut - Restrict Escape-to-close-search to only fire when search input is focused - Remove duplicate onKeyDown on search result rows (parent listbox handles navigation; rows now only handle Enter/Space for a11y) - Add alwaysShowHeaderAction to multi-selection panel for consistency - Remove commented-out CSS in tooltip.tsx - Update stale doc comment (getMenuItems → useMenuItems) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

The compiler flagged useMenuItems and useItems as dynamic hook props. Fix by: - Replacing useMenuItems callback with renderRowMenu component prop, so each consumer defines a proper React component (DiffEqRowMenu, ParameterRowMenu, TypeRowMenu) that calls hooks safely - Moving useItems() call from FilterableListContent into the factory's Component, passing plain items data down instead of a hook prop - Exporting RowMenu helper for consumers to render shared menu chrome Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Adds overflow: hidden to editorRootStyle so portalled menus and tooltips don't render outside the component boundary. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

There are 2 total unresolved issues (including 1 from previous review).

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

cursor · 2026-03-14T19:05:59Z

libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/search-panel.tsx

+  const listRef = useRef<HTMLDivElement>(null);
+  const rowRefs = useRef<(HTMLDivElement | null)[]>([]);
+
+  const { searchInputRef } = use(EditorContext);


Duplicate use(EditorContext) call in SearchContent component

Low Severity

SearchContent calls use(EditorContext) twice — once at line 205 to destructure isSelected and selectItem, and again at line 212 to destructure searchInputRef. These could be a single use() call with a combined destructuring.

graphite-app · 2026-03-14T19:06:33Z

libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/panel.tsx

+        <div
+          className={contentLayerStyle({
+            active: !isSearchOpen,
+            direction: "forward",
+          })}
+        >
+          <VerticalSubViewsContainer
+            name="left-sidebar"
+            subViews={LEFT_SIDEBAR_SUBVIEWS}
+          />
+        </div>
+        <div
+          className={contentLayerStyle({
+            active: isSearchOpen,
+            direction: "backward",
+          })}
+        >
+          <VerticalSubViewsContainer
+            name="left-sidebar-search"
+            subViews={searchSubViews}
+          />
+        </div>
+      </div>


Both content layers (main sidebar and search) are rendered simultaneously with only opacity and pointerEvents controlling visibility. The pointerEvents: 'none' prevents mouse interaction but does not prevent keyboard focus. Users can still Tab into invisible/inactive elements in the hidden layer, causing confusing navigation.

Fix: Add visibility: 'hidden' or conditionally render the inactive layer:

compoundVariants: [ { active: false, css: { transform: "translateX(-8px)", visibility: "hidden" // Prevents keyboard focus } } ]

Suggested change

<div

className={contentLayerStyle({

active: !isSearchOpen,

direction: "forward",

})}

>

<VerticalSubViewsContainer

name="left-sidebar"

subViews={LEFT_SIDEBAR_SUBVIEWS}

/>

</div>

<div

className={contentLayerStyle({

active: isSearchOpen,

direction: "backward",

})}

>

<VerticalSubViewsContainer

name="left-sidebar-search"

subViews={searchSubViews}

/>

</div>

</div>

{!isSearchOpen ? (

<div

className={contentLayerStyle({

active: true,

direction: "forward",

})}

>

<VerticalSubViewsContainer

name="left-sidebar"

subViews={LEFT_SIDEBAR_SUBVIEWS}

/>

</div>

) : (

<div

className={contentLayerStyle({

active: true,

direction: "backward",

})}

>

<VerticalSubViewsContainer

name="left-sidebar-search"

subViews={searchSubViews}

/>

</div>

)}

</div>

Spotted by Graphite

Is this helpful? React 👍 or 👎 to let us know.

github-actions bot added area/libs Relates to first-party libraries/crates/packages (area) type/eng > frontend Owned by the @frontend team labels Mar 12, 2026

kube mentioned this pull request Mar 12, 2026

FE-225: Petrinaut: Setup rolldown-plugin-dts and update @typeScript/native-preview + vite #8509

Merged

3 tasks

This was referenced Mar 12, 2026

FE-515: Extract petrinaut demo-site into @apps/petrinaut-website #8528

Merged

H-5655: Refactor selection logic and migrate to @xyflow/react v12 #8523

Merged

FE-504: Add copy/paste and select all to petrinaut editor #8533

Open

vercel bot deployed to Preview – petrinaut March 12, 2026 01:09 View deployment

vercel bot deployed to Preview – hash March 12, 2026 01:14 View deployment

kube changed the base branch from cf/h-5655-refactor-selection-logic to graphite-base/8532 March 12, 2026 14:40

kube mentioned this pull request Mar 12, 2026

H-6327: Integrate Sentry feedback button into ViewportControls #8537

Open

3 tasks

kube marked this pull request as ready for review March 13, 2026 00:39

graphite-app bot assigned kube Mar 13, 2026

cursor bot reviewed Mar 13, 2026

View reviewed changes

libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/multi-selection-panel.tsx Show resolved Hide resolved

augmentcode bot reviewed Mar 13, 2026

View reviewed changes

kube force-pushed the graphite-base/8532 branch from 0b08c25 to 44fe283 Compare March 13, 2026 01:28

kube force-pushed the cf/fe-512-create-filterablelistsubview-component branch from 39823b5 to ae532f6 Compare March 13, 2026 01:28

kube changed the base branch from graphite-base/8532 to main March 13, 2026 01:28

github-actions bot added the area/deps Relates to third-party dependencies (area) label Mar 13, 2026

kube changed the title ~~Show chevron on hover in VerticalSubViewsContainer Header~~ FE-512: Create FilterableListSubView with keyboard navigation and search Mar 13, 2026

vercel bot deployed to Preview – petrinaut March 13, 2026 01:32 View deployment

cursor bot reviewed Mar 13, 2026

View reviewed changes

libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/parameters-list.tsx Show resolved Hide resolved

vercel bot had a problem deploying to Preview – hash March 13, 2026 02:14 Failure

vercel bot deployed to Preview – petrinaut March 13, 2026 10:09 View deployment

cursor bot reviewed Mar 13, 2026

View reviewed changes

vercel bot had a problem deploying to Preview – hash March 13, 2026 10:19 Failure

graphite-app bot reviewed Mar 13, 2026

View reviewed changes

...intel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/differential-equations-list.tsx Outdated Show resolved Hide resolved

libs/@hashintel/petrinaut/src/views/Editor/panels/LeftSideBar/subviews/search-panel.tsx Show resolved Hide resolved

kube and others added 15 commits March 14, 2026 14:55

Fix bottom border + top padding on content in VerticalSubViewsContainer

5d2b5c7

Update shadow on ScrollableContent

7487b6a

Adjust content padding: px:4 default, px:3 for filterable lists

91dfb8d

Increase default panel content horizontal padding to 4 and use negative margin on FilterableListSubView to reduce its effective padding to 3. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Hide header bottom border when sub-view is collapsed

d22d3e4

Convert headerRowStyle to cva with isCollapsed variant that sets borderBottomColor to transparent, avoiding visual double-borders between collapsed sections. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Use token-based height for sub-view header rows

3fc423b

Replace raw [44px] with token value for consistent sizing. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Reset focused/anchor state when filterable list loses focus

742f241

Clear focusedIndex and anchorIndex on blur when focus moves outside the list container, so stale keyboard state doesn't persist. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Make TopBar title input fill available space

9ac2cc0

Replace fixed minWidth with flex: 1 so the title input expands to use all remaining space in the left section. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Update ui-subviews

1f4fa9b

kube force-pushed the cf/fe-512-create-filterablelistsubview-component branch from 4531039 to e2322e2 Compare March 14, 2026 13:55

vercel bot had a problem deploying to Preview – petrinaut March 14, 2026 13:57 Failure

vercel bot had a problem deploying to Preview – hash March 14, 2026 13:58 Failure

cursor bot reviewed Mar 14, 2026

View reviewed changes

libs/@hashintel/petrinaut/src/views/Editor/components/BottomBar/use-keyboard-shortcuts.ts Show resolved Hide resolved

kube and others added 3 commits March 14, 2026 19:30

Clip overflow on editor root to hide menus when collapsed

981a51a

Adds overflow: hidden to editorRootStyle so portalled menus and tooltips don't render outside the component boundary. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

vercel bot had a problem deploying to Preview – petrinaut March 14, 2026 19:04 Failure

cursor bot reviewed Mar 14, 2026

View reviewed changes

graphite-app bot reviewed Mar 14, 2026

View reviewed changes

vercel bot deployed to Preview – hash March 14, 2026 19:15 View deployment

This was referenced Mar 14, 2026

FE-502: Improve SDCPN file import/export with Zod validation and layout fix #8536

Open

FE-514: Compile TypeScript expressions to SymPy #8541

Draft

FE-514: Add SymPy → JavaScript compilation pipeline via Pyodide #8548

Draft

kube requested a review from CiaranMn March 14, 2026 19:59

Conversation

kube commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🌟 What is the purpose of this PR?

🔗 Related links

🔍 What does this change?

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

📜 Does this require a change to the docs?

🕸️ Does this require a change to the Turbo Graph?

❓ How to test this?

Uh oh!

vercel bot commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kube commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cursor bot commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Summary

Uh oh!

Uh oh!

augmentcode bot commented Mar 13, 2026

Uh oh!

augmentcode bot left a comment

Choose a reason for hiding this comment

Uh oh!

augmentcode bot Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

kube Mar 14, 2026

Choose a reason for hiding this comment

Uh oh!

augmentcode bot Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

kube Mar 14, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor bot Mar 13, 2026

Choose a reason for hiding this comment

Simulation parameter value editing feature lost in refactor

Uh oh!

kube Mar 14, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Mar 14, 2026

Choose a reason for hiding this comment

Duplicate use(EditorContext) call in SearchContent component

Uh oh!

graphite-app bot Mar 14, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

1 participant

kube commented Mar 12, 2026 •

edited

Loading

vercel bot commented Mar 12, 2026 •

edited

Loading

kube commented Mar 12, 2026 •

edited

Loading

cursor bot commented Mar 13, 2026 •

edited

Loading

Duplicate `use(EditorContext)` call in SearchContent component