railiance-fabric/workplans/RAIL-FAB-WP-0023-zone-drag-interaction.md

id, type, title, domain, repo, status, owner, topic_slug, created, updated, state_hub_workstream_id

id	type	title	domain	repo	status	owner	topic_slug	created	updated	state_hub_workstream_id
RAIL-FAB-WP-0023	workplan	Improve zone labels and dragging	railiance	railiance-fabric	finished	codex	railiance-fabric	2026-05-25	2026-06-05	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

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

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

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".