Editor's Path Properties has a 'Total nodes' display but no 'selected node index' / 'node N of M' — user cycling through nodes (Tab) with a 20-node path doesn't know 'I'm at node 5 of 20' #358

New issue

Closed

opened 2026-10-04 03:57:02 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 03:57:02 +00:00

Owner

Finding

grep -rn 'selectedNodeIndex\|nodeIndex' src/components/editor/EditorRightPanel.tsx returns 0. The right panel shows the path's total nodes but not which node is currently selected.

A user with a 20-node path:

Tabs through nodes (per #194)
Wants to know "I'm at node 5 of 20"
Currently: just sees the selected node's (x, y) in the right panel
Doesn't know the index

The fix is to show the index.

Where

Path Properties / Node Properties: src/components/editor/EditorRightPanel.tsx
No index display: grep -rn 'nodeIndex' src/components/editor/ returns 0

Suggested fix shape

UI: in the Node Properties section, add "Node N of M":

{selectedNodeIds.length === 1 && (
  <div className="text-[11px]" style={{ color: '#6B6560' }}>
    Node {nodeIndex + 1} of {path.nodes.length}
  </div>
)}

Multi-select: when multiple nodes are selected, show "3 nodes selected of 20".
Keyboard hint: "Press Tab to cycle through nodes" (already in the empty state per #273).
Use cases:

The user wants to know "where am I in the path?"
The user is comparing nodes by position
The user is debugging a specific node

Severity

Low. The user can count visually. Power users with complex paths notice.

Discovered by

Gap analysis (2026-10-02) of editor node properties.

#273 (open) — Node empty state. Same surface; the empty state is the "no selection" version.
#305 (open) — Show coordinates. Same surface; the coords are the position.
#311 (open) — Node input. Same surface; the input is the write.

## Finding `grep -rn 'selectedNodeIndex\|nodeIndex' src/components/editor/EditorRightPanel.tsx` returns 0. The right panel shows the path's total nodes but not which node is currently selected. A user with a 20-node path: - Tabs through nodes (per #194) - Wants to know "I'm at node 5 of 20" - Currently: just sees the selected node's (x, y) in the right panel - Doesn't know the index The fix is to show the index. ## Where - Path Properties / Node Properties: `src/components/editor/EditorRightPanel.tsx` - No index display: `grep -rn 'nodeIndex' src/components/editor/` returns 0 ## Suggested fix shape 1. **UI**: in the Node Properties section, add "Node N of M": ```tsx {selectedNodeIds.length === 1 && ( <div className="text-[11px]" style={{ color: '#6B6560' }}> Node {nodeIndex + 1} of {path.nodes.length} </div> )} ``` 2. **Multi-select**: when multiple nodes are selected, show "3 nodes selected of 20". 3. **Keyboard hint**: "Press Tab to cycle through nodes" (already in the empty state per #273). 4. **Use cases**: - The user wants to know "where am I in the path?" - The user is comparing nodes by position - The user is debugging a specific node ## Severity Low. The user can count visually. Power users with complex paths notice. ## Discovered by Gap analysis (2026-10-02) of editor node properties. ## Related - #273 (open) — Node empty state. Same surface; the empty state is the "no selection" version. - #305 (open) — Show coordinates. Same surface; the coords are the position. - #311 (open) — Node input. Same surface; the input is the write.

Mark added the

feature-request

triage-approved

labels

2026-10-04 03:57:02 +00:00

Mark referenced this issue from a commit

2026-10-05 13:13:51 +00:00

feat(#358): 'Node N of M' hint under Selected Nodes header

Mark commented

2026-10-05 13:13:57 +00:00

Author

Owner

Closed by commit 6124331 on main. Adds a sub-line under the Selected Nodes header:

Single-select → Node N of M (1-indexed position of the first selected node in the path)
Multi-select → of M only (count is in the header above)
No selection → no sub-line (the #273 empty-state sibling owns this case)

Test-ids added: selected-nodes-header-{id} and selected-nodes-index-{id}. 5 new tests in issue-358.test.tsx cover: node 5 of 20 (canonical tab-cycle case), node 1 of 20 (no off-by-one), node 20 of 20 (end), multi-select (no Node N prefix), and no-selection (sub-line absent, empty-state sibling present).

Typecheck (tsc -b --noEmit) and lint clean. All 5 new tests pass.

Closed by commit 6124331 on `main`. Adds a sub-line under the Selected Nodes header: - Single-select → `Node N of M` (1-indexed position of the first selected node in the path) - Multi-select → `of M` only (count is in the header above) - No selection → no sub-line (the #273 empty-state sibling owns this case) Test-ids added: `selected-nodes-header-{id}` and `selected-nodes-index-{id}`. 5 new tests in `issue-358.test.tsx` cover: node 5 of 20 (canonical tab-cycle case), node 1 of 20 (no off-by-one), node 20 of 20 (end), multi-select (no `Node N` prefix), and no-selection (sub-line absent, empty-state sibling present). Typecheck (`tsc -b --noEmit`) and lint clean. All 5 new tests pass.

Mark closed this issue

2026-10-05 13:14:03 +00:00