H-5976: Fix display of tooltips for readonly inputs #8285

kube · 2026-01-22T01:12:22Z

🌟 What is the purpose of this PR?

Improve UX in simulation/read-only mode by ensuring disabled/readonly controls display explanatory tooltips when hovered.
Define previously native components, as custom components in src/components to prepare future migration to the Design System.
Define withTooltip HoC as discussed with @lunelson to have a "standardized" way to compose Tooltips with other components. (Components from the Design System won't be aware of tooltips)

This does not work for CodeEditor which is a special case.

🔗 Related links

H-5976 (internal)

🚫 Blocked by

Nothing

🔍 What does this change?

Tooltip Component Refactoring

Added display prop with two variants:
- "block" (default): For full-width elements like inputs and selects
- "inline": For buttons and inline elements in flex containers
Introduced withTooltip HoC to reduce boilerplate when adding tooltip support to components

New Reusable Form Components

All components use the withTooltip HoC for automatic tooltip support:

Input: Text input with monospace and hasError variants
NumberInput: Numeric input with monospace font
Slider: Range input slider
Button: Button with default and ghost variants
IconButton: Icon-only button with size (sm/md/lg) and variant (default/danger) options
Select: Dropdown select

CodeEditor Component

New wrapper around Monaco Editor with standardized options and read-only tooltip support
Shows tooltip on hover in read-only mode AND when user attempts to edit via onDidAttemptReadOnlyEdit listener
Uses isEditorMounted state to properly register listeners after Monaco mounts
Properly cleans up timeout on unmount to prevent memory leaks

Properties Panel Refactoring

Replaced native HTML form elements with new reusable components across all properties panels:

parameter-properties.tsx
transition-properties.tsx
place-properties.tsx
sortable-arc-item.tsx - Added tooltip support for arc weight inputs
type-properties.tsx
differential-equation-properties.tsx
place-initial-state.tsx

This removes redundant inline style definitions and ensures consistent tooltip behavior.

Component Updates

SegmentGroup: Now uses withTooltip HoC with disabled state styling
Switch: Now uses withTooltip HoC for consistent tooltip behavior

Read-Only Mode Enforcement

useIsReadOnly hook now treats Complete simulation state as read-only
Disabled add/delete buttons in sidebar lists (parameters, types, differential equations)
Disabled delete buttons in properties panels during simulation
Prevented Delete/Backspace keyboard deletion on canvas in read-only mode
Added tooltip explanations for all disabled controls

New UI Messages

Added DYNAMICS_REQUIRES_TYPE message for the Dynamics toggle when no type is selected

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

⚠️ Known issues

None

🐾 Next steps

`disabled` vs `aria-disabled`

This PR adds a span inside Tooltip component.

Not the best solution, but works with disabled: true on the child component.

One possible next step is to remove usage of disabled and rely instead on aria-disabled, which will remove the need for a wrapper.

🛡 What tests cover this?

No automated tests yet

❓ How to test this?

Checkout the branch
Run the petrinaut editor with yarn dev
Start a simulation
Verify that all disabled controls (buttons, inputs, selects, switches) show explanatory tooltips on hover
Verify that hovering over the CodeEditor in read-only mode shows a tooltip
Verify that attempting to edit the CodeEditor in read-only mode briefly shows a tooltip
Verify that Input/Output Arc weight inputs show tooltips in read-only mode
Verify that Delete/Backspace keys don't delete elements when in read-only mode

📹 Demo

N/A

vercel · 2026-01-22T01:12:28Z

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

3 Skipped Deployments

Project	Deployment	Review	Updated (UTC)
ds-theme	Ignored	Preview	Jan 28, 2026 6:02pm
hashdotdesign	Ignored	Preview	Jan 28, 2026 6:02pm
hashdotdesign-tokens	Ignored	Preview	Jan 28, 2026 6:02pm

kube · 2026-01-22T01:12:48Z

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

cursor · 2026-01-23T00:37:02Z

PR Summary

Medium Risk
Broad UI refactor touching many editor controls and read-only gating; while mostly UX, it can subtly change interaction/disable behavior across the editor and should be smoke-tested in edit vs simulation states.

Overview
Fixes read-only/simulation UX by making tooltips reliably appear on disabled controls (via a Tooltip trigger wrapper and standardized display modes) and by propagating tooltips through a new withTooltip HOC.

Introduces reusable form controls (Button, IconButton, Input, NumberInput, Select, Slider) plus a CodeEditor wrapper, and replaces ad-hoc HTML controls/DisabledTooltip usage throughout editor properties panels and sidebar lists to ensure consistent disabling + explanatory tooltips.

Tightens read-only enforcement by extending useIsReadOnly to include simulation Complete, disabling add/delete actions in lists and properties, and blocking Delete/Backspace canvas deletion when read-only; adds UI_MESSAGES.DYNAMICS_REQUIRES_TYPE for clearer Dynamics toggle feedback.

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

augmentcode · 2026-01-23T00:42:08Z

🤖 Augment PR Summary

Summary: This PR improves read-only UX during Petrinaut simulation by ensuring disabled/readonly controls can still display explanatory tooltips.

Changes:

Removed the <DisabledTooltip> wrapper pattern and made Tooltip accept optional content.
Introduced a CodeEditor wrapper around Monaco with tooltip support for read-only explanations.
Extended Switch with a tooltip prop and event-forwarding via ark.span to support tooltips on disabled states.
Extended SegmentGroup with disabled/tooltip props using ArkTooltip.Trigger (asChild) for disabled-state explanations.
Added a new UI message for “dynamics requires type” and applied it to the Dynamics switch when no type is selected.
Disabled delete/add actions across places, transitions, and sidebar lists while in read-only mode, and added tooltips explaining why.
Updated useIsReadOnly to treat the simulation Complete state as read-only.
Prevented Delete/Backspace keyboard deletion when the canvas is read-only.

Technical Notes: Read-only state is now centralized via useIsReadOnly and reused across editor panels, lists, and the SDCPN canvas.

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

augmentcode

Review completed. 1 suggestions posted.

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

libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/parameter-properties.tsx

libs/@hashintel/petrinaut/src/components/tooltip.tsx

libs/@hashintel/petrinaut/src/components/code-editor.tsx

libs/@hashintel/petrinaut/src/components/tooltip.tsx

libs/@hashintel/petrinaut/src/components/code-editor.tsx

Using inline-flex caused block-level children like CodeEditor to lose their width. Using flex ensures the wrapper takes full width while still properly wrapping both block and inline elements. Co-Authored-By: Claude Opus 4.5 <[email protected]>

Ensure the flex wrapper takes full width of its parent container so block-level children like CodeEditor don't collapse. Co-Authored-By: Claude Opus 4.5 <[email protected]>

Block-level div elements properly contain block-level children like CodeEditor. The span element wasn't correctly handling the width inheritance for Monaco Editor containers. Co-Authored-By: Claude Opus 4.5 <[email protected]>

The previous fix using flex with width: 100% was breaking the dimensions of input elements. This change uses inline-flex instead, which preserves the natural dimensions of input elements while still enabling tooltips on disabled elements. The inline-flex display mode ensures that: 1. Input elements maintain their intended width 2. Tooltips still work on disabled elements 3. The wrapper doesn't force unwanted width constraints 4. Alignment is preserved with align-items: center Fixes issue with Tooltip wrapper breaking dimensions of inputs.

- Tooltip now accepts a `display` prop ("block" | "inline") to control wrapper element behavior, preventing layout issues - Block mode (default): For full-width elements like inputs/selects - Inline mode: For buttons and inline elements in flex containers - Simplified SegmentGroup and Switch components to use shared Tooltip - CodeEditor now shows tooltip on edit attempts in readonly mode via Monaco's onDidAttemptReadOnlyEdit event - Added missing `display="inline"` to button tooltips throughout the app Co-Authored-By: Claude Opus 4.5 <[email protected]>

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Introduces a reusable `withTooltip` higher-order component that adds `tooltip` and `tooltipDisplay` props to any component. Refactors SegmentGroup and Switch to use this HoC instead of inline tooltip handling. Co-Authored-By: Claude Opus 4.5 <[email protected]>

- Create Input, NumberInput, Slider, Button, IconButton, and Select components - All components use withTooltip HoC for automatic tooltip support - Replace native form elements with new components across: - parameter-properties.tsx - transition-properties.tsx - place-properties.tsx - sortable-arc-item.tsx - type-properties.tsx - differential-equation-properties.tsx - place-initial-state.tsx - Remove redundant inline style definitions (inputStyle, deleteButtonStyle, etc.) Co-Authored-By: Claude Opus 4.5 <[email protected]>

Use type aliases instead of interfaces for component props to follow project conventions. Co-Authored-By: Claude Opus 4.5 <[email protected]>

- Fix memory leak by adding cleanup useEffect for timeout - Fix edit listener not registering when readOnly changes dynamically by storing editor ref and using useEffect to manage listener lifecycle - Fix tooltip not showing on hover in read-only mode by combining isHovering and showReadOnlyTooltip states - Rename 'editor' variable to 'editorElement' to avoid shadowing - Add display="inline" to AI menu tooltip in transition-properties Co-Authored-By: Claude Opus 4.5 <[email protected]>

- Fix CodeEditor duplicate listener by using isEditorMounted state to trigger useEffect after Monaco mounts, removing registration from handleMount callback - Add tooltip prop to SortableArcItem for read-only mode feedback - Pass read-only tooltip to Input/Output Arc weight inputs Co-Authored-By: Claude Opus 4.5 <[email protected]>

libs/@hashintel/petrinaut/src/views/Editor/subviews/place-initial-state.tsx

lunelson

The parts related to Tooltip seem okay to me 👍🏼

CiaranMn

Almost everything looks good and tooltips work well – a couple of issues in the DE section:

If a type is not selected, the dropdown doesn't appear correctly (in readonly mode it's the same but also has no width in addition to no height)

In readonly mode, the code editor does not show

If populated, the dropdown appearance (with type selected) has changed in a different way in readonly and non-readonly mode

a. in readonly, it is content width only

b. in not readonly it is full width and centre justified.

Previously, it was always full width and left justified.

- Add placeholder text and empty state for type dropdown in differential equation properties - Simplify CodeEditor tooltip by using standard Tooltip component with className support - Add className prop to Tooltip component using cx helper - Update button styles with disabled variant styling for type properties - Add read-only tooltip to place initial state number input Co-Authored-By: Claude Opus 4.5 <[email protected]>

cursor

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

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

cursor · 2026-01-28T18:14:33Z

libs/@hashintel/petrinaut/src/components/slider.tsx

+  />
+);
+
+export const Slider = withTooltip(SliderBase, "inline");


Unused Slider component is dead code

Low Severity

The entire Slider component file is dead code. While the PR description lists it as a "New Reusable Form Component," it is never imported or used anywhere in the codebase. There's also an existing sliderStyle in simulation-controls.tsx with nearly identical styling that doesn't use this new component. This unused component adds maintenance burden without providing value.

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

vercel bot deployed to Preview – hashdotdesign January 22, 2026 01:15 View deployment

vercel bot deployed to Preview – ds-theme January 22, 2026 01:15 View deployment

vercel bot deployed to Preview – petrinaut January 22, 2026 01:16 View deployment

vercel bot deployed to Preview – hash January 22, 2026 01:20 View deployment

vilkinsons assigned kube Jan 22, 2026

kube changed the title ~~Remove DisabledTooltip wrapper and inline tooltip logic~~ H-5976: Fix display of tooltips for readonly inputs Jan 22, 2026

kube force-pushed the cf/h-5976-fix-readonly-tooltips branch from 2ede0e8 to c89a1ba Compare January 22, 2026 12:15

vercel bot deployed to Preview – petrinaut January 22, 2026 12:19 View deployment

vercel bot deployed to Preview – hash January 22, 2026 12:23 View deployment

vercel bot deployed to Preview – petrinaut January 22, 2026 16:02 View deployment

vercel bot deployed to Preview – petrinaut January 23, 2026 00:16 View deployment

kube marked this pull request as ready for review January 23, 2026 00:36

This comment was marked as outdated.

Sign in to view

augmentcode bot reviewed Jan 23, 2026

View reviewed changes

libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/parameter-properties.tsx Outdated Show resolved Hide resolved

github-actions bot added the area/infra Relates to version control, CI, CD or IaC (area) label Jan 23, 2026

vercel bot deployed to Preview – petrinaut January 23, 2026 09:40 View deployment

vercel bot deployed to Preview – hash January 23, 2026 09:41 View deployment

vercel bot deployed to Preview – petrinaut January 23, 2026 09:48 View deployment

vercel bot deployed to Preview – petrinaut January 23, 2026 09:55 View deployment

cursor bot reviewed Jan 23, 2026

View reviewed changes

libs/@hashintel/petrinaut/src/components/tooltip.tsx Outdated Show resolved Hide resolved

libs/@hashintel/petrinaut/src/components/code-editor.tsx Outdated Show resolved Hide resolved

vercel bot deployed to Preview – petrinaut January 24, 2026 12:42 View deployment

cursor bot reviewed Jan 24, 2026

View reviewed changes

libs/@hashintel/petrinaut/src/components/tooltip.tsx Outdated Show resolved Hide resolved

libs/@hashintel/petrinaut/src/components/code-editor.tsx Show resolved Hide resolved

vercel bot deployed to Preview – petrinaut January 26, 2026 12:07 View deployment

cursor bot reviewed Jan 26, 2026

View reviewed changes

libs/@hashintel/petrinaut/src/components/code-editor.tsx Show resolved Hide resolved

libs/@hashintel/petrinaut/src/components/code-editor.tsx Show resolved Hide resolved

kube and others added 11 commits January 27, 2026 12:27

Add width: 100% to Tooltip wrapper for block elements

24e3357

Ensure the flex wrapper takes full width of its parent container so block-level children like CodeEditor don't collapse. Co-Authored-By: Claude Opus 4.5 <[email protected]>

Use div instead of span for Tooltip wrapper

e0e8032

Block-level div elements properly contain block-level children like CodeEditor. The span element wasn't correctly handling the width inheritance for Monaco Editor containers. Co-Authored-By: Claude Opus 4.5 <[email protected]>

Remove unused mode variable from SDCPNView

401ea89

Co-Authored-By: Claude Opus 4.5 <[email protected]>

Replace interface with type in form component props

9b44186

Use type aliases instead of interfaces for component props to follow project conventions. Co-Authored-By: Claude Opus 4.5 <[email protected]>

kube force-pushed the cf/h-5976-fix-readonly-tooltips branch from 2eb875f to 1f85b90 Compare January 27, 2026 16:41

vercel bot deployed to Preview – petrinaut January 27, 2026 16:46 View deployment

cursor bot reviewed Jan 27, 2026

View reviewed changes

libs/@hashintel/petrinaut/src/views/Editor/subviews/place-initial-state.tsx Show resolved Hide resolved

vercel bot deployed to Preview – hash January 27, 2026 16:49 View deployment

kube requested review from CiaranMn and lunelson January 27, 2026 16:52

This was referenced Jan 27, 2026

H-5763: Add simple MiniMap #8286

Merged

H-5770: Add PlaybackContext for real-time simulation playback #8295

Draft

lunelson reviewed Jan 28, 2026

View reviewed changes

CiaranMn reviewed Jan 28, 2026

View reviewed changes

vercel bot deployed to Preview – petrinaut January 28, 2026 18:06 View deployment

cursor bot reviewed Jan 28, 2026

View reviewed changes

CiaranMn approved these changes Jan 28, 2026

View reviewed changes

kube added this pull request to the merge queue Jan 28, 2026

Merged via the queue into main with commit 673ece2 Jan 28, 2026
44 checks passed

kube deleted the cf/h-5976-fix-readonly-tooltips branch January 28, 2026 18:32

hashdotai mentioned this pull request Jan 28, 2026

Version Packages #8336

Open

H-5976: Fix display of tooltips for readonly inputs #8285

H-5976: Fix display of tooltips for readonly inputs #8285

Uh oh!

Conversation

kube commented Jan 22, 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

🚫 Blocked by

🔍 What does this change?

Tooltip Component Refactoring

New Reusable Form Components

CodeEditor Component

Properties Panel Refactoring

Component Updates

Read-Only Mode Enforcement

New UI Messages

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?

⚠️ Known issues

🐾 Next steps

disabled vs aria-disabled

🛡 What tests cover this?

❓ How to test this?

📹 Demo

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

PR Summary

Uh oh!

This comment was marked as outdated.

Uh oh!

augmentcode bot commented Jan 23, 2026

Uh oh!

augmentcode bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lunelson left a comment

Choose a reason for hiding this comment

Uh oh!

CiaranMn left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Jan 28, 2026

Choose a reason for hiding this comment

Unused Slider component is dead code

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

4 participants

kube commented Jan 22, 2026 •

edited

Loading

`disabled` vs `aria-disabled`

vercel bot commented Jan 22, 2026 •

edited

Loading

kube commented Jan 22, 2026 •

edited

Loading

cursor bot commented Jan 23, 2026 •

edited

Loading