arqlet 0.1.0 → 0.2.0

package/README.md

@@ -28,6 +28,25 @@ example. `renderSvg(svgElement, scene)` draws a scene; `toReactFlow(scene)` maps
 React Flow nodes and edges. Types for snapshots and scenes come from
 `@arqlet/contracts`.
 
+### Cluster overview
+
+For a whole graph (tens of thousands of nodes), the `overview` operation lays it out as nested discs, and the WebGL
+renderer draws it; a cluster can then be shown structured, as its layered layout in place:
+
+```js
+import {loadEngine, overviewModel, resolvedEdgeIds, createOverviewRenderer, bindOverviewNavigation, viewOf} from 'arqlet';
+
+const run = await loadEngine();
+const {overview} = run({op: 'overview', graph});                // nodes with parentId form the clusters
+const model = overviewModel(overview, resolvedEdgeIds(graph));
+const renderer = createOverviewRenderer(canvas, model, {labels: labelCanvas});
+renderer.view = viewOf(model, -1, canvas.clientWidth, canvas.clientHeight);
+renderer.resize();
+bindOverviewNavigation(canvas, renderer, {onClick: i => console.log(overview.ids[i])});
+```
+
+See `apps/playground/overview.js` in the repository for collapsing, structuring in place and animated changes.
+
 Arqlet reads graphs in the JSON form [ELK](https://eclipse.dev/elk/) uses. It is not a
 1:1 ELK, contains no ELK code and is not affiliated with the Eclipse Foundation.
 

package/index.d.ts

@@ -7,4 +7,6 @@ export * from '@arqlet/viewer/scene.js';
 export * from '@arqlet/viewer/react-flow.js';
 export * from '@arqlet/viewer/navigation.js';
 export * from '@arqlet/viewer/routes.js';
+export * from '@arqlet/viewer/overview.js';
+export * from '@arqlet/viewer/overview-gl.js';
 export type * from '@arqlet/contracts';

package/index.js

@@ -8,3 +8,5 @@ export {checkScene, routePath} from '@arqlet/viewer/scene.js';
 export {toReactFlow} from '@arqlet/viewer/react-flow.js';
 export {bindNavigation, zoomAnchor} from '@arqlet/viewer/navigation.js';
 export {bendsOf, pathLength, crosses, routeDetails, drawingOf, routeConflictsOf} from '@arqlet/viewer/routes.js';
+export {overviewModel, overviewBuffers, pickNode, pickExpanded, placeScene, frameOf, clipToFrame, ownersOf, labelsOf, viewOf, subtreeOf, structuredExcerpt, resolvedEdgeIds, BORDER_PREFIX, representationsOf, REPRESENTATIONS, flowDirectionOf, displayName, COMMUNITY_PREFIX, clusterColour} from '@arqlet/viewer/overview.js';
+export {createOverviewRenderer, bindOverviewNavigation} from '@arqlet/viewer/overview-gl.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arqlet",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Incremental graph layout for nested graphs with ports, in the browser and Node via WebAssembly: one entry point for the Arqlet engine, its ELK-style call and the SVG and React Flow viewers. Prototype; the API is provisional.",
   "keywords": [
     "graph",
@@ -42,9 +42,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@arqlet/contracts": "^0.1.0",
-    "@arqlet/engine-client": "^0.1.0",
-    "@arqlet/viewer": "^0.1.0"
+    "@arqlet/contracts": "^0.2.0",
+    "@arqlet/engine-client": "^0.2.0",
+    "@arqlet/viewer": "^0.2.0"
   },
   "devDependencies": {
     "typescript": "7.0.2"