@cyvest/cyvest-vis 5.4.0 → 6.0.0

package/README.md

@@ -1,28 +1,10 @@
 # @cyvest/cyvest-vis
 
-Cytoscape-based React components for rendering Cyvest investigations.
+React components for exploring the observable relationship graph of a Cyvest
+investigation with Cytoscape and `d3-force`.
 
-## Highlights
-
-- Built on `@cyvest/cyvest-js` investigation and graph helpers
-- Two views: observables graph and investigation hierarchy
-- Layouts: ELK `stress` for observables, Dagre `LR` for investigation
-- Professional built-in SVG icons for nodes
-- Label truncation with full-value events
-- Themeable with CSS variables and typed React props
-
-## Install / Build
-
-```bash
-pnpm install
-pnpm --filter @cyvest/cyvest-vis build
-```
-
-Run tests:
-
-```bash
-pnpm --filter @cyvest/cyvest-vis test
-```
+The default design uses a neutral canvas, compact nodes, thin edges, and a
+restrained level palette. Color is limited to security-level contours.
 
 ## Usage
 
@@ -33,43 +15,68 @@ import "@cyvest/cyvest-vis/styles.css";
 <CyvestGraph
   investigation={investigation}
   height={620}
-  initialView="observables"
   onNodeSelect={(event) => {
-    console.log(event.nodeId, event.label, event.nodeType);
+    console.log(event.nodeId, event.label);
   }}
 />
 ```
 
-## Main Exports
+`CyvestGraph` and `CyvestObservablesView` render the same observable graph.
+`CyvestGraph` is the concise public entry point.
 
-- `CyvestGraph`
-- `CyvestObservablesView`
-- `CyvestInvestigationView`
-- `createElkLayout`
-- `truncateLabel`
-- `getObservableIconSvg`
-- `getInvestigationIconSvg`
+Hovering a node isolates its immediate neighborhood. The initial placement is
+deterministic; a live force simulation then settles the graph and is reheated
+while nodes are dragged.
+
+## Force layout
+
+```tsx
+<CyvestGraph
+  investigation={investigation}
+  layout={{
+    linkDistance: 116,
+    chargeStrength: -420,
+    collisionPadding: 30,
+    radialStep: 126,
+  }}
+/>
+```
+
+Set `physics={false}` to keep only the deterministic initial placement.
+
+Available settings include `linkDistance`, `linkStrength`, `chargeStrength`,
+`collisionPadding`, `radialStep`, `radialStrength`, `centerStrength`,
+`iterations`, `padding`, and animation options.
 
 ## Theming
 
-Use the `theme` prop or override CSS variables.
-
-```css
-:root {
-  --cyvest-background: #f4f7fb;
-  --cyvest-grid-color: #d7dfeb;
-  --cyvest-panel-bg: rgba(255, 255, 255, 0.96);
-  --cyvest-panel-border: #d3dae6;
-  --cyvest-panel-text: #172033;
-  --cyvest-panel-muted: #556079;
-  --cyvest-accent: #1f6feb;
-  --cyvest-font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
-}
+```tsx
+<CyvestGraph
+  investigation={investigation}
+  theme={{
+    background: "#ffffff",
+    panelText: "#111827",
+    accent: "#334155",
+    edgeColor: "#d5dbe3",
+  }}
+/>
 ```
 
-## Breaking Changes vs v1
+Use `DARK_CYVEST_THEME` for the built-in dark theme.
+
+## Exports
+
+- `CyvestGraph`
+- `CyvestObservablesView`
+- `computeForcePositions`
+- `createForceLayout`
+- `startForceSimulation`
+- theme, event, icon, label, color, and observable graph data types
+
+## Development
 
-- Rendering engine changed from React Flow to Cytoscape.
-- Events moved to `onNodeSelect` / `onEdgeSelect`.
-- Component names are now `CyvestObservablesView` and `CyvestInvestigationView`.
-- Import stylesheet with `@cyvest/cyvest-vis/styles.css`.
+```bash
+corepack pnpm -C js --filter @cyvest/cyvest-vis test:ci
+corepack pnpm -C js --filter @cyvest/cyvest-vis build
+corepack pnpm -C js --filter @cyvest/cyvest-app dev
+```