reqlanOverviewIdeasFilesCode filesClustersAttributesGraphPrint
Ideas/graph_label_modes

Idea detail

graph_label_modes

reqlan rq/extension/library/graph.rq:82

block done

Summary

Every interactive graph should provide a Labels control that cycles auto ( default ), on, and off without changing graph membership.
On forces full opacity; off hides all labels; auto follows graph_label_auto.
Reset / default restore auto.
Ideas Summary: control in GraphControls.svelte, mode persisted via graph_ui_persistence.
HTML export: control in html-export-template.ts / html-export-assets.ts.
Driven by the same viewport zoom as view_controls.

Jump to outbound references

Jump to inbound references

Navigation

Source file

reqlan rq/extension/library/graph.rq

community 19

community cluster

graph.rq

file cluster

reqlan rq/extension/library

folder cluster

status: done

status cluster

tag: Not present

tag cluster

Printable page

Static print-friendly idea sheet.

Attributes

KeyValue
status done
implementation graph-cy-controller.ts, GraphControls.svelte, graph-ui-state.ts, html-export-assets.ts, html-export-template.ts
tests graph-ui-state.test.ts, export-html.test.ts

Browse all attributes

Ancestor context

graph_label_auto

In Labels auto mode, visibility follows viewport zoom continuously rather than a hard cut. Below a low zoom threshold labels are fully hidden; above a slightly higher threshold they are fully opaque; between those thresholds opacity ramps briefly through a muted / semi-transparent phase ( GRAPH_LABEL_FADE_START → GRAPH_LABEL_FADE_END ). Hovered or dragged nodes remain fully opaque even when ambient auto opacity is low or zero. Zoom and Fit from [view_controls] / [reframe_view] must update this opacity on each paint or zoom event. Applies to Ideas Summary GraphCyController and HTML export canvas graph alike.

view_controls

pan, zoom, and drag repositioning are supported on the canvas. zoom range is wide rather than tightly capped so users can inspect fine detail or see the whole neighbourhood. [reframe_view] fits and centres the camera on the graph bounding box without changing node positions or restarting layout / physics. Zoom and Fit must continuously drive [graph_label_auto] opacity when Labels is in auto mode.

reframe_view

Shared viewport behaviour for every surface that mounts GraphCyController ( Ideas Summary graph tab, activity bar mini graph, and future consumers ). Implementation: reframeGraphToViewport and GraphCyController. reframeToViewport in ["../../../packages/extension/webviews/shared/graph/graph-cy-controller.ts"]. [manual_reframe] [auto_reframe] [reframe_animation] Constants: GRAPH_VIEWPORT_PADDING ( 36 px padding around the element bounding box ), GRAPH_REFRAME_ANIMATION_MS ( 400 ms animated transition ). Reframes resize the cytoscape container first, then fit all elements and centre the camera. Does not clear selection, centreId, user-pinned drag positions, or live physics state — viewport only.

manual_reframe

Users can explicitly reframe the viewport when pan / zoom has moved the graph off-screen or they want to see the whole neighbourhood again. - " Fit to view " control in ["../../../packages/extension/webviews/ideas-summary/components/GraphControls.svelte"] dispatches to GraphView → GraphCyController. reframeToViewport ( ). - " Fit to view " control in ["../../../packages/extension/webviews/activity-bar/components/MiniGraphCanvas.svelte"] calls the same API on the mini-graph controller. Every graph surface that mounts GraphCyController should expose this control.

auto_reframe

The graph should automatically fit to the viewport when the loaded node set changes — without requiring the user to click " Fit to view ". After each successful syncSlice, GraphCyController compares the sorted node-id set of the incoming slice with fittedNodeSetKey ( the set the viewport was last fitted to ). When they differ, finishRender triggers an automatic reframe via reframeToViewport. Triggers when any node is added or removed from the slice ( new neighbourhood, focus change, filter change that changes membership ). Does not trigger for metadata-only updates on the same node ids ( label, colour, isCenter flag, etc. ) — those keep the user's current pan / zoom. Does not trigger on requestLayout relayout when the node-id set is unchanged.

reframe_animation

The first reframe on a controller mount is instant ( synchronous cy. fit + cy. center ) so the graph appears immediately on first paint. Every subsequent reframe — automatic ( [auto_reframe] ) or manual ( [manual_reframe] ) — animates pan and zoom smoothly over GRAPH_REFRAME_ANIMATION_MS using cytoscape. animate ( { fit, easing: ' ease-out-cubic ' } ). Callers may pass `reframeToViewport({ animate: false })` to force an instant reframe. Initial batch layouts use fit: false ( see [graph_cytoscape] ) so the controller owns the first fit and later animated handoffs are not double-applied.

graph_cytoscape

builds cytoscape elements and stylesheet from a generic node / edge slice. registers batch layout options ( fcose, cola, breadthfirst, circle, concentric, grid, random ) and seeds positions for new nodes. exposes CompoundBasis ( single-membership folder tree ) and GroupBasis ( flat multi-membership ) as grouping inputs. per ["../../../packages/extension/webviews/shared/graph/graph-cytoscape.ts"] and ["../../../packages/extension/webviews/shared/graph/graph-theme.ts"]. getLayoutConfig sets fit: false for initial ( mode = = = ' initial' ) batch layouts so [auto_reframe] owns the first viewport fit; relayout modes may still fit via the layout algorithm.

Outbound references

KindIdeaPathSnippet
file_reference ../../../packages/analytical/src/export/html-export-assets.ts packages/analytical/src/export/html-export-assets.ts html-export-assets.ts
file_reference ../../../packages/analytical/src/export/html-export-template.ts packages/analytical/src/export/html-export-template.ts html-export-template.ts
file_reference ../../../packages/analytical/test/export-html.test.ts packages/analytical/test/export-html.test.ts export-html.test.ts
file_reference ../../../packages/extension/src/webview_module/shared/graph-ui-state.ts packages/extension/src/webview_module/shared/graph-ui-state.ts graph-ui-state.ts
file_reference ../../../packages/extension/test/graph-ui-state.test.ts packages/extension/test/graph-ui-state.test.ts graph-ui-state.test.ts
file_reference ../../../packages/extension/webviews/ideas-summary/components/GraphControls.svelte packages/extension/webviews/ideas-summary/components/GraphControls.svelte GraphControls.svelte
file_reference ../../../packages/extension/webviews/shared/graph/graph-cy-controller.ts packages/extension/webviews/shared/graph/graph-cy-controller.ts graph-cy-controller.ts
references graph_label_auto reqlan rq/extension/library/graph.rq graph_label_auto
references view_controls reqlan rq/extension/library/graph.rq view_controls

Inbound references

KindIdeaPathSnippet
references graph_cy_controller reqlan rq/extension/library/graph.rq graph_label_modes
references graph_labels reqlan rq/extension/library/graph.rq graph_label_modes

Unresolved references

KindIdeaPathSnippet
references graph_ui_persistence graph_ui_persistence

Local graph

Initialising graph…