@fusion.dev/helix-docs 0.129.1 → 0.131.0

package/content/graphs.mdx

@@ -179,6 +179,33 @@ Set a default for every note with the driver's options, such as
 `sigmaDriver(sigma, { material: 'glass', shape: 'circle' })`. cosmos.gl draws a
 note's `shape` and not its `emphasis` or `material`.
 
+## Show a legend
+
+Set `legend` to name the groups over the drawing, each in its color. Each name
+is a button that shows or hides the group's notes, in the drawing and in the
+list:
+
+```html
+<helix-graph label="Company notes" legend>
+  <div></div>
+</helix-graph>
+```
+
+`hiddenGroups` holds the names of the groups turned off. Set it to start with
+some hidden. A press sends `helix-graph-filter` first, with every group that
+would be hidden. Cancel it to keep the groups as they were, or to keep them in
+your own state and set `hiddenGroups` yourself:
+
+```ts
+frame.addEventListener('helix-graph-filter', (event) => {
+  event.preventDefault()
+  frame.hiddenGroups = event.detail.hidden
+})
+```
+
+The legend is drawn where the notes have two groups or more. On a frame
+narrower than 40rem it is one row, which scrolls.
+
 ## Select a note
 
 Pressing a note selects it, and pressing where no note is clears the selection.
@@ -205,6 +232,16 @@ for a graph too large to read at once:
 </helix-graph>
 ```
 
+The selected note lights the notes it links to and from. Pass `reach` to
+`connectGraph` to light more: `upstream` lights every note a path of links
+leads from to the selected one, and `downstream` every note a path leads to
+from it. Where each link runs from what a note was derived from to the note,
+`upstream` lights everything the note came from:
+
+```ts
+connectGraph(frame, sigmaDriver(sigma), { reach: 'upstream' })
+```
+
 ## Draw the notes in a shape
 
 Pass a `stencil` and the connector places the notes in its shape from the first
@@ -230,7 +267,9 @@ connectGraph(frame, driver, {
 
 With three.js, place the notes on the surface of a 3D model.
 `shapeFromModel` reads a `.glb` or `.gltf` file, and is in its own entry,
-`@fusion.dev/helix-graph/model`, since it loads three.js:
+`@fusion.dev/helix-graph/model`, since it loads three.js. It reads a model
+compressed with meshopt, as `gltfpack` writes one, which is often a third of
+the size:
 
 ```js
 import { shapeFromModel } from '@fusion.dev/helix-graph/model'