equinor / equinor/prisma-decision-web
Utility node and utility table
- Dominant language
- TypeScript
- Stars
- 3
- Forks
- 0
- Avg merge
- 3d 5h
- Merged PRs (30d)
- 19
Description
Context
Enable users to add utility nodes to the influence diagram, name them, and view a context-sensitive utility table.
Design source of truth
Figma: [link to design file](https://www.figma.com/design/iJr3w56fyMClNAn7xuIop3/Nexum-Design?node-id=1442-128592&t=PAVhaiARAgNVgsrH-4)
Figma prototype: [Prototype](https://www.figma.com/make/3dP3yu2Uv1AxEqowqMdAoG/Interactive-Utility-Node-Prototype?node-id=0-1&t=W76X2diumcU3SURr-1)
Version: v1.0 (December 2025)
Behavior & interactions
Node placement flow
- User clicks the “+” button in the toolbar to open the add menu.
- Selecting “Add Utility Node” spawns a semi-transparent node that follows the cursor.
- Clicking anywhere on the canvas permanently places the node at that location.
- Immediately after placement, a name dialog appears; user can set a custom name or keep the default “New Utility”.
Node states
Utility nodes have three visual states:
1. Cursor-following (pre-placement): 50% opacity, follows mouse, shows default title.
2. Insufficient parents (0–1 connections): Solid node with orange warning text “Connect 2+ parents to enable table and solver” displayed inside the node.
3. Valid (2+ connections): Solid node.
Naming & editing
- Double-clicking a utility node with 0–1 parents opens the unpopulated utility table. (Even with one parent the table the users should not be able to edit.)
- Double-clicking a utility node with 2+ parents opens the utility table.
Utility table
- The table always reflects the first valid utility node according to the existing canvas ordering (simple heuristic is acceptable for this iteration).
- Table structure adapts to the number of parents:
- 2 parents: Simple grid layout (one parent on columns, one on rows).
- 3+ parents: Nested column structure with dynamic row heights.
- Parent name rows and utility title rows use full-width background fills.
- Value input cells align vertically with their corresponding parent row heights.
Empty & error states
- Utility node with <2 parents: Orange warning message is displayed inside the node; table is unpopulated when opened.
- When edge deletion reduces parents below 2: Warning reappears in the node and the table clears.
Scope
✅ In scope
- Utility node placement workflow (cursor-follow → click-to-place → name).
- Node naming via dialog.
- Orange warning state for utility nodes with insufficient parents.
- Dynamic utility table that adapts to 2+ parent configurations.
- “Add Utility Node” menu option.
Implementation checklist
Each section below is intended to be split into its own implementation subissue if needed.
- [ ] Toolbar “+” button
- [ ] Bottom-right floating “+” button with hover state.
- [ ] Click opens menu with three options (“Add Utility Node”, "Add decision node" and "Add uncertainty node").
- [ ] Menu closes when an option is selected or when clicking outside.
- [ ] Node placement interaction
- [ ] Cursor-following ghost node on “Add Utility Node” selection.
- [ ] Click-to-place behavior with permanent placement.
- [ ] Cursor visibly indicates placement mode.
- [ ] Naming system
- [ ] Name dialog appears immediately after initial placement.
- [ ] Input field auto-focuses and selects existing text.
- [ ] Enter submits; ESC/Cancel closes and preserves the current name.
- [x] Node state management & warning display
- [x] Track parent count per utility node.
- [x] Display orange warning text when parent count <2.
- [x] Dynamic utility table
- [x] 2-parent grid layout implemented as per design.
- [x] 3+ parent nested column layout with dynamic row heights implemented as per design.
- [x] Full-width backgrounds applied to parent and title rows.
- [x] Value input fields capture and persist user edits per utility node.
- [x] Table clears when parent count drops below 2.
Acceptance criteria
- [ ] User can place utility nodes anywhere on the canvas using the cursor-following workflow.
- [ ] Utility nodes with 0–1 parent connections show the orange warning message.
- [ ] When a utility node reaches 2+ parents, the warning disappears.
- [ ] Double-clicking utility nodes opens the runpopulated utility tabke if parent count <2, or the utility table editor if parent count ≥2.
- [ ] The table layout correctly adapts between 2-parent and 3+ parent configurations without layout breakage.
- [ ] Utility values persist per utility node when switching between nodes and across typical canvas interactions (e.g., zoom/pan).
- [ ] Visual design matches the Figma reference within reasonable spacing and typography tolerances.
Contributor guide
Research direction
Start at the toolbar “+” control and the canvas node-placement interaction described in the issue, then compare each state and dialog flow with the linked Figma source of truth. Done means the unchecked placement, naming, menu, and acceptance-criteria flows work, while the already checked utility-node states and table behavior remain intact.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100