generated from coulomb/repo-seed
116 lines
3.8 KiB
Markdown
116 lines
3.8 KiB
Markdown
---
|
|
id: RAIL-FAB-WP-0023
|
|
type: workplan
|
|
title: "Improve zone labels and dragging"
|
|
domain: railiance
|
|
repo: railiance-fabric
|
|
status: finished
|
|
owner: codex
|
|
topic_slug: railiance-fabric
|
|
created: "2026-05-25"
|
|
updated: "2026-06-05"
|
|
state_hub_workstream_id: "f02e14c5-e60f-4950-b1a2-682c38b30431"
|
|
---
|
|
|
|
# Improve Zone Labels And Dragging
|
|
|
|
## Context
|
|
|
|
RAIL-FAB-WP-0021 introduced zone boundary rectangles and RAIL-FAB-WP-0022
|
|
promoted zones to first-class graph explorer view entities. The current zone
|
|
labels still look like small framed buttons with a white background. That makes
|
|
the overlay read more like controls than like labels printed on a drawing
|
|
surface.
|
|
|
|
The next interaction step is to let the operator grab a zone and move it around,
|
|
dragging all currently attached visible nodes with it. This makes zones behave
|
|
more like the intended "piece of paper" view entity while keeping the underlying
|
|
Fabric graph unchanged.
|
|
|
|
## Task 1: Simplify Zone Labels
|
|
|
|
```task
|
|
id: RAIL-FAB-WP-0023-T01
|
|
status: done
|
|
priority: high
|
|
state_hub_task_id: "cb31f964-9e25-483d-b2b3-c4acc7a1033a"
|
|
```
|
|
|
|
Change zone labels from framed button badges to plain text in the upper-left
|
|
corner of the zone rectangle.
|
|
|
|
The label should:
|
|
|
|
- have no frame;
|
|
- have no white background;
|
|
- remain readable against the zone fill;
|
|
- still be keyboard-focusable/clickable enough to open zone details;
|
|
- avoid adding visual clutter to dense graph views.
|
|
|
|
Expected result: graph explorer zone labels look like text drawn on the zone
|
|
surface rather than separate UI controls.
|
|
|
|
Result: Updated graph explorer zone labels to render as transparent, unframed
|
|
text in the upper-left corner of each zone rectangle. Labels remain
|
|
keyboard-focusable and clickable, and the visual smoke screenshot confirms the
|
|
labels read as text on the zone surface.
|
|
|
|
## Task 2: Drag Zones With Member Nodes
|
|
|
|
```task
|
|
id: RAIL-FAB-WP-0023-T02
|
|
status: done
|
|
priority: high
|
|
state_hub_task_id: "84de3a0d-2ab9-4775-b026-87646ea14176"
|
|
```
|
|
|
|
Add a zone drag interaction that moves all currently attached visible member
|
|
nodes with the zone.
|
|
|
|
The interaction should:
|
|
|
|
- start from the zone label or zone boundary affordance;
|
|
- move assigned visible nodes by the drag delta;
|
|
- keep Cytoscape node positions and overlay bounds in sync;
|
|
- update zone details and labels during/after the drag;
|
|
- avoid mutating the underlying Fabric payload;
|
|
- not interfere with normal node dragging more than necessary.
|
|
|
|
Expected result: grabbing a zone lets the operator reposition the visible zone
|
|
subgraph as a unit.
|
|
|
|
Result: Added a view-only zone drag interaction using the plain zone label as
|
|
the grab handle. Dragging translates the currently assigned visible zone member
|
|
nodes by the pointer delta, recomputes overlay bounds, refreshes zone details,
|
|
and leaves the Fabric graph payload unchanged.
|
|
|
|
## Task 3: Verify Interaction Behavior
|
|
|
|
```task
|
|
id: RAIL-FAB-WP-0023-T03
|
|
status: done
|
|
priority: medium
|
|
state_hub_task_id: "8793e982-8991-4cda-8259-3f981bbb9201"
|
|
```
|
|
|
|
Verify the visual and interaction behavior with focused tests and a browser
|
|
smoke check.
|
|
|
|
The verification should cover:
|
|
|
|
- static UI test assertions for the new label/drag helpers;
|
|
- JavaScript syntax validation;
|
|
- graph explorer focused tests;
|
|
- a visual smoke screenshot showing plain labels;
|
|
- manual or scripted confirmation that zone dragging moves member nodes.
|
|
|
|
Expected result: the UI renders clean labels and the zone drag interaction works
|
|
without breaking existing graph explorer behavior.
|
|
|
|
Result: Static UI assertions, JavaScript syntax validation, focused graph tests,
|
|
full test suite, Fabric CLI validation, and a headless Edge visual smoke pass.
|
|
The scripted drag smoke ran against the registry-backed graph explorer in
|
|
disposable Edge via CDP, dragged the `dev-tegwick` zone label, confirmed 25
|
|
rendered nodes moved together, and observed the UI status text
|
|
`Moved zone "dev-tegwick".`
|