You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Read only the files needed for the task. If you load one reference, read it completely. Do NOT load unrelated reference files just because they are nearby; keep answers grounded in the chosen route.
32
+
33
+
| User intent or keywords | Read | Do NOT load by default|
| Standalone demo page, runnable HTML demo, previewable structure diagram, knowledge map showcase, code tab |`references/examples/demo-html-page.md`, plus the relevant graph/layout/behavior references below | All examples not used by the selected graph family |
37
+
| Graph vs TreeGraph vs GraphStructure |`references/knowledge/01-graph-treegraph.md`, then `references/type/graph-options.md`| React/editor examples |
38
+
| Data, nodes, edges, groups, TreeData, GraphData |`references/knowledge/02-data-model.md`| Layout examples unless layout is part of the question |
39
+
| Node, edge, group style, state, custom shape, anchors |`references/knowledge/03-node-edge-group.md`, then `references/type/model-options.md`| Demo page reference |
40
+
| Layout, dag, force, tree, compactBox, mindMap, nestedDag, pipeline |`references/knowledge/04-layouts.md`, then `references/examples/tree-graph.md` for tree tasks | React/editor references |
41
+
| Behavior, interaction, drag, panZoom, brush select, events |`references/knowledge/05-behaviors-events.md`, then `references/type/event-types.md`, then `references/examples/events-behaviors.md` for code | Layout/debug references unless needed |
42
+
| React node, Viewer, hooks, tooltip, context menu |`references/knowledge/06-react-integration.md`, then `references/examples/react-viewer.md`| Standalone HTML demo reference |
43
+
| Editor, stack, node mover, edge editor, minimap, grid |`references/knowledge/07-components-editor.md`| React Viewer example unless DOM nodes are requested |
Do not load all references by default. For simple code-generation requests, one knowledge file plus one example file is usually enough.
47
47
@@ -76,7 +76,9 @@ For simple examples, API usage, configuration help, or debugging answers, prefer
76
76
77
77
A standard demo page should include a `Demo` tab for the live VGraph canvas and a `Code` tab for the core runnable TypeScript/JavaScript. The Code tab should be a fixed-size panel with internal scrolling (`overflow: auto`) so long examples do not expand the whole page or hide the live demo. Include a copy-code action when practical.
78
78
79
-
For large trees, knowledge maps, organization charts, or any graph that can overwhelm the viewport, add readability controls by default. Use `panZoom` and `dragCanvas`, start from a conservative overview when it helps users understand the top-level structure, and provide controls such as "expand all", "collapse details", search, filter, group focus, or fit-to-view. Implement tree collapse by keeping source data immutable, deriving visible `children` from a collapsed-ID set, and refreshing the graph with `graph.data(visibleTree)`. For non-tree Graph/DAG demos, do not force tree-collapse patterns onto edge-list data; prefer viewport, filtering, grouping, highlighting, or progressive disclosure controls.
79
+
For large trees, knowledge maps, organization charts, or any graph that can overwhelm the viewport, add readability controls by default. Use `panZoom` and `dragCanvas`, start from a conservative overview when it helps users understand the top-level structure, and provide controls such as "expand all", "collapse details", search, filter, group focus, or fit-to-view. For `TreeGraph` hierarchy expand/collapse, use native `collapse`, `expand`, or `toggleCollapse` first so the interaction stays a visibility/layout operation instead of a full data replacement. For non-tree Graph/DAG demos, do not force tree-collapse patterns onto edge-list data; prefer viewport, filtering, grouping, highlighting, or progressive disclosure controls.
80
+
81
+
For knowledge-system or structure-map demos, preserve semantic shape before visual polish. Decide whether the requested content is a strict hierarchy, a DAG, or a general network. For school-stage or curriculum maps, keep the main levels explicit (for example stage -> subject -> topic -> skill) and avoid turning cross-links into primary parent-child edges. If the user asks for expand/collapse on a hierarchy, use `TreeGraph` native `collapse`, `expand`, or `toggleCollapse` first; do not rebuild a visible tree and call `graph.data(...)` on each click unless the user specifically needs data filtering or virtualization.
80
82
81
83
After creating a standalone HTML demo, verify that it renders without console errors. If the environment supports browser preview, start or reuse a local static/dev server and provide the accessible URL; if browser preview is unavailable, say what validation was skipped and why.
82
84
@@ -93,4 +95,4 @@ After creating a standalone HTML demo, verify that it renders without console er
93
95
94
96
## Verification Habit
95
97
96
-
For generated snippets, make sure the imports exist in the repo exports and the chosen data shape matches the chosen graph class. For debugging, report the smallest falsifiable check first: container size, graph size, data IDs, edge endpoints, layout choice, behavior conflicts, then React lifecycle.
98
+
For generated snippets, make sure the imports exist in `packages/vgraph/src/index.ts` or the relevant package export, and verify non-obvious config fields against source typings or implementation before suggesting them. For debugging, report the smallest falsifiable check first: container size, graph size, data IDs, edge endpoints, layout choice, behavior conflicts, then React lifecycle.
Copy file name to clipboardExpand all lines: skills/vgraph-development-assistant/references/examples/demo-html-page.md
+19-32Lines changed: 19 additions & 32 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -15,6 +15,10 @@ A polished standalone demo should contain:
15
15
- For large tree or hierarchy demos, an initial collapsed view and controls such as `Expand all` and `Collapse details`.
16
16
- For large non-tree Graph/DAG demos, readability controls such as fit-to-view, search/highlight, filtering, grouping, or progressive disclosure. Do not force tree-collapse patterns onto edge-list data.
17
17
18
+
Keep generic HTML/CSS minimal. Spend tokens on VGraph data shape, layout,
19
+
behaviors, interaction controls, and runtime verification rather than decorative
20
+
page chrome.
21
+
18
22
## Minimal HTML shell
19
23
20
24
For a real standalone HTML file, use an executable module script. Prefer a local
@@ -130,7 +134,13 @@ for (const tab of tabs) {
130
134
131
135
## Tree collapse pattern
132
136
133
-
Use `TreeGraph` for nested `children` data. Keep the original full tree immutable, derive a visible tree from collapsed IDs, and call `graph.data(visibleTree)` after each toggle.
137
+
Use `TreeGraph` for nested `children` data. Prefer the native collapse API:
138
+
`graph.collapse(node)`, `graph.expand(node)`, or `graph.toggleCollapse(node)`.
139
+
Do not implement ordinary expand/collapse by deriving a new visible tree and
140
+
calling `graph.data(...)` on every click; that turns a visibility interaction
141
+
into a data update, re-layout, redraw, and possible animation replay. Use the
142
+
visible-tree pattern only when the user needs true data filtering,
@@ -197,26 +187,23 @@ const graph = new TreeGraph({
197
187
})
198
188
});
199
189
200
-
function renderTree() {
201
-
graph.data(cloneVisibleNode(sourceTree));
202
-
}
203
-
204
190
graph.addBehavior(panZoom, { sensitivity: 4 });
205
191
graph.addBehavior(dragCanvas);
206
192
207
193
graph.on("node:click", ev=> {
208
194
const id =ev?.target?.get?.("id");
209
195
if (!id||!nodeMap.get(id)?.children?.length) return;
210
196
211
-
if (collapsedIds.has(id)) collapsedIds.delete(id);
212
-
elsecollapsedIds.add(id);
213
-
214
-
renderTree();
197
+
graph.toggleCollapse(ev.target);
215
198
});
216
199
217
-
renderTree();
200
+
graph.data(sourceTree);
218
201
```
219
202
203
+
Set `animate: false` for static knowledge-map demos when repeated expand/collapse
204
+
should feel instant and not replay layout transitions. Keep animation on only
205
+
when the transition itself is part of the requested experience.
206
+
220
207
## Verification
221
208
222
209
After creating the HTML file, open it through a local static/dev server when possible and check the browser console. The expected result is a visible graph in the Demo tab, a scrollable Code tab, working copy-code behavior if included, and no console errors. If browser preview is unavailable, state that runtime validation was skipped instead of implying it passed.
0 commit comments