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

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

🌟 What is the purpose of this PR?

Fixes read-only tooltips that don't always show during simulation mode. Components now receive a tooltip property directly instead of being wrapped in a <DisabledTooltip> component, ensuring tooltips display correctly on disabled elements.

🔗 Related links

H-5976

🔍 What does this change?

Removed <DisabledTooltip> wrapper component and inlined tooltip logic
Created CodeEditor component wrapping Monaco Editor with tooltip support
Added tooltip prop to Switch component with proper event forwarding via ark.span
Added disabled and tooltip props to SegmentGroup component using ArkTooltip.Trigger with asChild
Disabled delete buttons in PlaceProperties and TransitionProperties during simulation
Added tooltip to Dynamics switch when no type is selected
Disabled Visualizer toggle during simulation
Updated useIsReadOnly hook to include "Complete" simulation state
Prevented Delete/Backspace keyboard deletion in read-only mode
Used useIsReadOnly hook consistently in SDCPN canvas view
Disabled add/delete buttons in sidebar lists (Types, Differential Equations, Parameters) during read-only mode

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

🛡 What tests cover this?

Manual testing of tooltip behavior during simulation mode

❓ How to test this?

Checkout the branch
Open Petrinaut and load a simulation
Start or complete a simulation
Verify that:
- All disabled controls show the read-only tooltip on hover
- Delete buttons are disabled with tooltips
- Keyboard Delete/Backspace doesn't delete elements
- Add buttons in sidebar are disabled
- Canvas is not editable

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 24, 2026 0:39am
hashdotdesign	Ignored	Preview	Jan 24, 2026 0:39am
hashdotdesign-tokens	Ignored	Preview	Jan 24, 2026 0:39am

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

H-5976: Fix display of tooltips for readonly inputs #8285 👈 (View in Graphite)
main

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

- Create CodeEditor component wrapping Monaco Editor with tooltip support - Add tooltip prop to Switch component - Update Tooltip component to optionally render based on content - Refactor property panels to use inline tooltip pattern: `<Tooltip content={isReadOnly ? UI_MESSAGES.READ_ONLY_MODE : undefined}>` - Delete disabled-tooltip.tsx as it's no longer needed This ensures tooltips show reliably on disabled elements by having the Tooltip wrapper handle hover events instead of relying on disabled elements. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

The ArkSwitch.Root is a label element that doesn't forward all props needed by Tooltip. Wrap the switch in an ark.span container when a tooltip is provided to ensure event handlers are properly forwarded. Also refactored styles to use Panda CSS data attribute patterns (_disabled, _enabled) instead of inline conditional cursor styles. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

- Add disabled prop that passes through to ArkSegmentGroup.Root - Add tooltip prop with ark.span wrapper for proper event forwarding - Add disabled styling (opacity, cursor: not-allowed) - Update transition-properties.tsx to use new props directly instead of external wrapper and Tooltip Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

…wrapper Instead of wrapping with ark.span (which breaks dimensions), use Ark UI's ID composition pattern: the Tooltip and SegmentGroup container share an ID via `ids={{ trigger: triggerId }}`, allowing the tooltip to attach without wrapper elements. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

The display:contents CSS property makes the wrapper element invisible to layout (its children are laid out as if they were direct children of the grandparent) while still allowing it to forward tooltip events. This fixes both the tooltip functionality and the layout. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Use ArkTooltip.Trigger with asChild to merge event handlers directly with the ark.div container element. This avoids wrapper elements while properly forwarding tooltip trigger events. The key is that ArkTooltip.Trigger's asChild prop merges its props (including event handlers) with the child ark.div, which can properly receive them. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

The delete buttons for places and transitions are now disabled when in read-only mode (during simulation), showing the read-only tooltip. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Shows a tooltip explaining that a token type must be selected to enable dynamics on the place. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

The editor should remain read-only not just during running/paused simulations, but also when a simulation has completed. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Consolidates read-only state logic by using the shared hook instead of duplicating the simulation state checks locally. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Uses useIsReadOnly hook consistently across types, differential equations, and parameters lists. Both add and delete buttons are now disabled with tooltips when in read-only mode. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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

PR Summary

Standardizes tooltip and read-only behavior throughout Petrinaut and prevents edits during simulation.

Adds CodeEditor wrapper around Monaco with tooltip support and read-only styling
Replaces DisabledTooltip usage with inline Tooltip props across inputs, selects, switches, and lists; deletes DisabledTooltip
Enhances Switch and SegmentGroup with disabled/tooltip props and proper tooltip triggers
Extends useIsReadOnly to include Complete state; applies it consistently (properties panels, sidebar lists, SDCPN canvas)
Disables destructive actions (delete buttons, add buttons) and shows tooltips in read-only mode; blocks Delete/Backspace canvas deletions
Adds UI_MESSAGES.DYNAMICS_REQUIRES_TYPE and read-only tooltips for dynamics/visualizer toggles

^{Written by Cursor Bugbot for commit 0b6a30c. 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.

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

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

      <div>
        <div className={fieldLabelStyle}>Name</div>
-        <DisabledTooltip disabled={isDisabled}>
+        <Tooltip content={isDisabled ? UI_MESSAGES.READ_ONLY_MODE : undefined}>


Tooltip uses ArkTooltip.Trigger asChild, so if the child is a native disabled control (<input disabled>, <button disabled>, etc.) it won’t receive pointer events and the tooltip typically won’t appear. Several of the new read-only tooltips are attached to disabled native controls, so the original “tooltip on readonly hover” issue may persist in those spots.

Other Locations

libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/differential-equation-properties.tsx:312

libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/differential-equation-properties.tsx:333

libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/place-properties.tsx:402

libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/transition-properties.tsx:322

libs/@hashintel/petrinaut/src/views/Editor/panels/PropertiesPanel/type-properties.tsx:407

libs/@hashintel/petrinaut/src/views/Editor/subviews/differential-equations-list.tsx:157

libs/@hashintel/petrinaut/src/views/Editor/subviews/parameters-list.tsx:247

libs/@hashintel/petrinaut/src/views/Editor/subviews/types-list.tsx:210

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

Move cursor style to container and remove tooltip overlay that was blocking mouse interactions including scroll wheel events. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Move ArkTooltip.Trigger to wrap the entire SegmentGroup.Root instead of being nested inside it. This ensures proper component hierarchy and context distribution. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Add a wrapper span around the tooltip trigger children to ensure tooltips work on disabled native elements (like buttons). Disabled elements don't receive pointer events, but the wrapper span does. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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 <noreply@anthropic.com>

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 <noreply@anthropic.com>

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 <noreply@anthropic.com>

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

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

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.

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

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

cursor · 2026-01-24T12:47:28Z

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

+const triggerWrapperStyle = css({
+  display: "inline-flex",
+  alignItems: "center",
+});


Tooltip wrapper breaks full-width layout of inputs

Medium Severity

The new triggerWrapperStyle uses display: "inline-flex" which doesn't stretch to fill parent width. When Tooltip wraps elements styled with width: 100% (like inputs in parameter-properties.tsx, differential-equation-properties.tsx, type-properties.tsx), those elements won't be full-width anymore because an inline-flex container sizes to content rather than stretching. This causes visible layout shrinking in read-only mode compared to edit mode where no wrapper is applied.

cursor · 2026-01-24T12:47:28Z

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

+      false: {},
+    },
+  },
+});


CodeEditor missing flex properties for vertical fill

Medium Severity

The new CodeEditor component's containerStyle is missing flex: 1 and minHeight: 0 properties that were present in the old editorContainerStyle in differential-equation-properties.tsx. When CodeEditor is used with height="100%" inside a flex column container (like codeContainerStyle), it won't properly fill the remaining vertical space because height: 100% doesn't work correctly in flex containers without proper flex properties. The differential equations code editor will render with collapsed or incorrect height.

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 and others added 7 commits January 22, 2026 13:13

Disable delete buttons in properties panels during simulation

c89a1ba

The delete buttons for places and transitions are now disabled when in read-only mode (during simulation), showing the read-only tooltip. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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

kube and others added 4 commits January 22, 2026 16:24

Add tooltip to Dynamics switch when no type is selected

a63fc44

Shows a tooltip explaining that a token type must be selected to enable dynamics on the place. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Disable Visualizer toggle during simulation

38ee953

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Keep editor read-only when simulation is complete

bfc3ed0

The editor should remain read-only not just during running/paused simulations, but also when a simulation has completed. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Prevent Delete/Backspace keyboard deletion in read-only mode

90d7a7a

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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

kube and others added 2 commits January 23, 2026 01:03

Use useIsReadOnly hook in SDCPN canvas view

ee929e5

Consolidates read-only state logic by using the shared hook instead of duplicating the simulation state checks locally. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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

Add changeset for read-only tooltips fix

c28996e

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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

kube and others added 3 commits January 23, 2026 10:30

Fix CodeEditor overlay blocking scroll in read-only mode

4667771

Move cursor style to container and remove tooltip overlay that was blocking mouse interactions including scroll wheel events. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Fix SegmentGroup tooltip nesting structure

27480df

Move ArkTooltip.Trigger to wrap the entire SegmentGroup.Root instead of being nested inside it. This ensures proper component hierarchy and context distribution. Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

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

kube and others added 2 commits January 23, 2026 10:50

Add width: 100% to Tooltip wrapper for block elements

63ce55e

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 <noreply@anthropic.com>

Use div instead of span for Tooltip wrapper

40084d9

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 <noreply@anthropic.com>

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 Show resolved Hide resolved

libs/@hashintel/petrinaut/src/components/code-editor.tsx 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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Uh oh!

kube commented Jan 22, 2026 •

edited

Loading

Uh oh!

vercel bot commented Jan 22, 2026 •

edited

Loading

Uh oh!

kube commented Jan 22, 2026

Uh oh!

cursor bot commented Jan 23, 2026 •

edited

Loading

Uh oh!

This comment was marked as outdated.

Uh oh!

augmentcode bot commented Jan 23, 2026

Uh oh!

augmentcode bot left a comment

Uh oh!

augmentcode bot Jan 23, 2026

Uh oh!

Uh oh!

Uh oh!

cursor bot left a comment

Uh oh!

cursor bot Jan 24, 2026

Uh oh!

cursor bot Jan 24, 2026

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

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

Are you sure you want to change the base?

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

🔍 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?

🛡 What tests cover this?

❓ How to test this?

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

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!

augmentcode bot Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor bot Jan 24, 2026

Choose a reason for hiding this comment

Tooltip wrapper breaks full-width layout of inputs

Uh oh!

cursor bot Jan 24, 2026

Choose a reason for hiding this comment

CodeEditor missing flex properties for vertical fill

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

2 participants

kube commented Jan 22, 2026 •

edited

Loading

vercel bot commented Jan 22, 2026 •

edited

Loading

cursor bot commented Jan 23, 2026 •

edited

Loading