@dxos/plugin-explorer 0.8.2-staging.7ac8446 → 0.8.2

package/src/components/Graph/testing.ts

@@ -0,0 +1,57 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type AnyLiveObject, live, type Space } from '@dxos/client/echo';
+import { Query, RelationSourceId, RelationTargetId } from '@dxos/echo-schema';
+import { DataType } from '@dxos/schema';
+import { createObjectFactory, type ValueGenerator, type TypeSpec } from '@dxos/schema/testing';
+import { range } from '@dxos/util';
+
+const getObject = (objects: AnyLiveObject[]) => objects[Math.floor(Math.random() * objects.length)];
+
+const defaultTypes: TypeSpec[] = [
+  { type: DataType.Organization, count: 5 },
+  { type: DataType.Project, count: 5 },
+  { type: DataType.Person, count: 10 },
+];
+
+export type GenerateOptions = {
+  spec?: TypeSpec[];
+  relations?: {
+    count: number;
+    kind: string;
+  };
+};
+
+const defaultRelations: GenerateOptions['relations'] = { count: 10, kind: 'friend' };
+
+/**
+ * @deprecated Use @dxos/schema.
+ */
+export const generate = async (
+  space: Space,
+  generator: ValueGenerator,
+  { spec = defaultTypes, relations = defaultRelations }: GenerateOptions = {},
+) => {
+  const createObjects = createObjectFactory(space.db, generator);
+  await createObjects(spec);
+
+  // Add relations between objects.
+  const { objects: contacts } = await space.db.query(Query.type(DataType.Person)).run();
+  for (const _ of range(relations.count)) {
+    const source = getObject(contacts);
+    const target = getObject(contacts);
+    if (source.id === target.id) {
+      continue;
+    }
+
+    space.db.add(
+      live(DataType.HasRelationship, {
+        kind: relations.kind,
+        [RelationSourceId]: source,
+        [RelationTargetId]: target,
+      }),
+    );
+  }
+};

package/src/components/Tree/Tree.stories.tsx

@@ -7,13 +7,13 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React, { type FC, useEffect, useState } from 'react';
 
-import { TreeType, Tree as TreeModel } from '@dxos/plugin-outliner/types';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
 import { type ClientRepeatedComponentProps, ClientRepeater } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { Tree, type TreeComponentProps } from './Tree';
+import { TreeType, Tree as TreeModel } from './types';
 
 // TODO(burdon): Storybook for Graph/Tree/Plot (generics); incl. GraphModel.
 // TODO(burdon): Type for all Explorer components (Space, Object, Query, etc.) incl.

package/src/components/Tree/Tree.tsx

@@ -2,16 +2,15 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { useEffect, useState } from 'react';
-import { useResizeDetector } from 'react-resize-detector';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { type Space } from '@dxos/client/echo';
-import { createSvgContext, SVG, SVGRoot } from '@dxos/gem-core';
 import { useAsyncState } from '@dxos/react-ui';
+import { SVG, type SVGContext } from '@dxos/react-ui-graph';
+import { SpaceGraphModel } from '@dxos/schema';
 
 import { HierarchicalEdgeBundling, RadialTree, TidyTree } from './layout';
 import { mapGraphToTreeData, type TreeNode } from './types';
-import { SpaceGraphModel } from '../Graph';
 
 // TODO(burdon): Create dge bundling graph using d3.hierarchy.
 // https://observablehq.com/@d3/hierarchical-edge-bundling?intent=fork
@@ -63,10 +62,7 @@ export type TreeComponentProps<N = unknown> = {
 
 // TODO(burdon): Label accessor.
 export const Tree = <N,>({ space, selected, variant = 'tidy', onNodeClick }: TreeComponentProps<N>) => {
-  const [model] = useAsyncState(
-    async () => (space ? new SpaceGraphModel().open(space, selected) : undefined),
-    [space, selected],
-  );
+  const [model] = useAsyncState(async () => (space ? new SpaceGraphModel().open(space) : undefined), [space, selected]);
 
   const [tree, setTree] = useState<TreeNode>();
   useEffect(() => {
@@ -76,11 +72,11 @@ export const Tree = <N,>({ space, selected, variant = 'tidy', onNodeClick }: Tre
     }, true);
   }, [model]);
 
-  const context = createSvgContext();
-  const { ref, width = 0, height = 0 } = useResizeDetector();
+  const context = useRef<SVGContext>(null);
 
   useEffect(() => {
-    if (width && height) {
+    if (context.current) {
+      const { width, height } = context.current.size!;
       const size = Math.min(width, height);
       const radius = size * 0.4;
       const options = {
@@ -98,17 +94,14 @@ export const Tree = <N,>({ space, selected, variant = 'tidy', onNodeClick }: Tre
 
       if (tree) {
         const renderer = renderers.get(variant);
-        renderer?.(context.ref.current!, tree, options);
+        renderer?.(context.current!.svg, tree, options);
       }
     }
-  }, [tree, width, height]);
+  }, [context.current, tree]);
 
-  // TODO(burdon): Provider should expand.
   return (
-    <div ref={ref} className='flex grow overflow-hidden' onClick={() => onNodeClick?.()}>
-      <SVGRoot context={context}>
-        <SVG />
-      </SVGRoot>
+    <div onClick={() => onNodeClick?.()}>
+      <SVG.Root ref={context} />
     </div>
   );
 };

package/src/components/Tree/layout/HierarchicalEdgeBundling.ts

@@ -3,7 +3,7 @@
 // Copyright 2022 Observable, Inc.
 //
 
-import * as d3 from 'd3';
+import { cluster, curveBundle, hierarchy, lineRadial, select } from 'd3';
 import { type HierarchyNode } from 'd3-hierarchy';
 
 import { type TreeOptions } from '../Tree';
@@ -17,16 +17,16 @@ const getId = (node: HierarchyNode<TreeNode>): string =>
 // https://github.com/d3/d3-hierarchy
 // https://observablehq.com/@d3/hierarchical-edge-bundling?intent=fork
 const HierarchicalEdgeBundling = (s: SVGSVGElement, data: TreeNode, options: TreeOptions) => {
-  const svg = d3.select(s);
+  const svg = select(s);
   svg.selectAll('*').remove();
 
   const { radius = 600, padding = 100, slots } = options;
 
   // https://d3js.org/d3-hierarchy/hierarchy
-  const root = d3.hierarchy(flatten(data));
-  // .sort((a, b) => d3.ascending(a.height, b.height) || d3.ascending(getName(a.data), getName(b.data)));
+  const root = hierarchy(flatten(data));
+  // .sort((a, b) => ascending(a.height, b.height) || ascending(getName(a.data), getName(b.data)));
 
-  const tree = d3.cluster<TreeNode>().size([2 * Math.PI, radius - padding]);
+  const tree = cluster<TreeNode>().size([2 * Math.PI, radius - padding]);
   const layout = tree(addLinks(root));
 
   // eslint-disable-next-line unused-imports/no-unused-vars
@@ -54,9 +54,8 @@ const HierarchicalEdgeBundling = (s: SVGSVGElement, data: TreeNode, options: Tre
     );
 
   // https://d3js.org/d3-shape/radial-line
-  const line = d3
-    .lineRadial()
-    .curve(d3.curveBundle.beta(0.85))
+  const line = lineRadial()
+    .curve(curveBundle.beta(0.85))
     .radius((d: any) => d.y)
     .angle((d: any) => d.x);
 
@@ -77,30 +76,30 @@ const HierarchicalEdgeBundling = (s: SVGSVGElement, data: TreeNode, options: Tre
 
   // function overed(event: any, d: X) {
   //   link.style('mix-blend-mode', null);
-  // d3.select(this).attr('font-weight', 'bold');
-  // d3.selectAll(d.incoming.map((d) => d.path))
+  // select(this).attr('font-weight', 'bold');
+  // selectAll(d.incoming.map((d) => d.path))
   //   .attr('stroke', color.in)
   //   .raise();
-  // d3.selectAll((d as any).incoming.map(([d]) => d.text))
+  // selectAll((d as any).incoming.map(([d]) => d.text))
   //   .attr('fill', color.in)
   //   .attr('font-weight', 'bold');
-  // d3.selectAll(d.outgoing.map((d) => d.path))
+  // selectAll(d.outgoing.map((d) => d.path))
   //   .attr('stroke', color.out)
   //   .raise();
-  // d3.selectAll(d.outgoing.map(([, d]) => d.text))
+  // selectAll(d.outgoing.map(([, d]) => d.text))
   //   .attr('fill', color.out)
   //   .attr('font-weight', 'bold');
   // }
 
   // function outed(event: any, d: HierarchyNode<Datum>) {
   //   // @ts-ignore
-  //   d3.select(this).attr('font-weight', null);
-  //   d3.selectAll(d.incoming.map((d) => d.path)).attr('stroke', null);
-  //   d3.selectAll(d.incoming.map(([d]) => d.text))
+  //   select(this).attr('font-weight', null);
+  //   selectAll(d.incoming.map((d) => d.path)).attr('stroke', null);
+  //   selectAll(d.incoming.map(([d]) => d.text))
   //     .attr('fill', null)
   //     .attr('font-weight', null);
-  //   d3.selectAll(d.outgoing.map((d) => d.path)).attr('stroke', null);
-  //   d3.selectAll(d.outgoing.map(([, d]) => d.text))
+  //   selectAll(d.outgoing.map((d) => d.path)).attr('stroke', null);
+  //   selectAll(d.outgoing.map(([, d]) => d.text))
   //     .attr('fill', null)
   //     .attr('font-weight', null);
   // }
@@ -119,7 +118,6 @@ const addLinks = (root: HierarchyNode<TreeNode>) => {
 
   for (const d of root.leaves()) {
     // (d as any).incoming = [];
-
     const parent = parents.get(d.data.id);
     if (parent) {
       // Skip the first node which is a placeholder created by flatten().

package/src/components/Tree/layout/RadialTree.ts

@@ -3,7 +3,7 @@
 // Copyright 2022 Observable, Inc.
 //
 
-import * as d3 from 'd3';
+import { hierarchy, linkRadial, select, tree } from 'd3';
 
 import { type TreeOptions } from '../Tree';
 
@@ -11,7 +11,7 @@ import { type TreeOptions } from '../Tree';
 // https://observablehq.com/@d3/radial-tree
 // https://observablehq.com/@d3/tree
 const RadialTree = (s: SVGSVGElement, data: any, options: TreeOptions) => {
-  const svg = d3.select(s);
+  const svg = select(s);
   svg.selectAll('*').remove();
 
   const {
@@ -23,7 +23,7 @@ const RadialTree = (s: SVGSVGElement, data: any, options: TreeOptions) => {
 
   const arc = 2 * Math.PI;
 
-  const root = d3.hierarchy(data);
+  const root = hierarchy(data);
 
   // Sort the nodes.
   // if (sort) {
@@ -35,8 +35,7 @@ const RadialTree = (s: SVGSVGElement, data: any, options: TreeOptions) => {
   const getLabel = label === null ? null : descendants.map((d) => label(d.data));
 
   // Compute the layout.
-  const layout = d3
-    .tree()
+  const layout = tree()
     .size([arc, radius])
     .separation((a: any, b: any) => (a.parent === b.parent ? 1 : 2) / a.depth);
   layout(root);
@@ -50,8 +49,7 @@ const RadialTree = (s: SVGSVGElement, data: any, options: TreeOptions) => {
     .attr('class', slots?.path ?? '')
     .attr(
       'd',
-      d3
-        .linkRadial()
+      linkRadial()
         .angle((d: any) => d.x + Math.PI / 2)
         .radius((d: any) => d.y) as any,
     );

package/src/components/Tree/layout/TidyTree.ts

@@ -3,19 +3,19 @@
 // Copyright 2021 Observable, Inc.
 //
 
-import * as d3 from 'd3';
+import { curveBumpX, hierarchy, link, select, tree } from 'd3';
 
 import { type TreeOptions } from '../Tree';
 
 // Released under the ISC license.
 // https://observablehq.com/@d3/tree
 const TidyTree = (s: SVGSVGElement, data: any, options: TreeOptions) => {
-  const svg = d3.select(s);
+  const svg = select(s);
   svg.selectAll('*').remove();
 
   const { label, width, height, r = 4, padding = 4, margin = 60, slots } = options;
 
-  const root = d3.hierarchy(data);
+  const root = hierarchy(data);
 
   // Compute labels and titles.
   const descendants = root.descendants();
@@ -24,7 +24,7 @@ const TidyTree = (s: SVGSVGElement, data: any, options: TreeOptions) => {
   // Compute the layout.
   const dx = 16;
   const dy = width / (root.height + padding);
-  const layout = d3.tree().nodeSize([dx, dy]);
+  const layout = tree().nodeSize([dx, dy]);
   layout(root);
 
   // Center the tree.
@@ -61,8 +61,7 @@ const TidyTree = (s: SVGSVGElement, data: any, options: TreeOptions) => {
     .attr('class', slots?.path ?? '')
     .attr(
       'd',
-      d3
-        .link(d3.curveBumpX)
+      link(curveBumpX)
         .x((d: any) => d.y + oy)
         .y((d: any) => d.x * sx) as any,
     );

package/src/components/Tree/testing/generator.ts

@@ -0,0 +1,46 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { ObjectId } from '@dxos/echo-schema';
+import { range } from '@dxos/util';
+
+import { Tree, type TreeNodeType } from '../types';
+
+type NumberOrNumberArray = number | number[];
+
+const random = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1)) + min;
+
+/**
+ * Create hierarchical tree.
+ */
+export const createTree = (spec: NumberOrNumberArray[] = [], createText?: () => string): Tree => {
+  const tree = new Tree();
+  tree.root.data = { text: 'root' };
+
+  const createNodes = (parent: TreeNodeType, spec: NumberOrNumberArray = 0): TreeNodeType[] => {
+    const count = Array.isArray(spec) ? random(spec[0], spec[1]) : spec;
+    return range(count, (i) => ({
+      id: ObjectId.random(),
+      children: [],
+      data: {
+        text: createText?.() ?? [parent.data.text, i + 1].join('.'),
+      },
+    }));
+  };
+
+  const createChildNodes = (parent: TreeNodeType, [count = 0, ...rest]: NumberOrNumberArray[]): TreeNodeType => {
+    const nodes = createNodes(parent, count);
+    nodes.forEach((n) => tree.addNode(parent, n));
+    if (rest.length) {
+      for (const node of nodes) {
+        createChildNodes(node, rest);
+      }
+    }
+
+    return parent;
+  };
+
+  createChildNodes(tree.root, spec);
+  return tree;
+};

package/src/components/Tree/testing/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './generator';

package/src/components/Tree/types/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './tree';
+export * from './types';

package/src/components/Tree/types/tree.test.ts

@@ -0,0 +1,133 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { live, makeRef } from '@dxos/live-object';
+import { faker } from '@dxos/random';
+import { DataType } from '@dxos/schema';
+
+import { type Tree } from './tree';
+import { createTree } from '../testing';
+
+faker.seed(0);
+
+const print = (tree: Tree) => {
+  let count = 0;
+  tree.tranverse((node, i) => {
+    console.log(''.padStart(i * 2, ' '), node.data);
+    count++;
+  });
+
+  return count;
+};
+
+describe('tree', () => {
+  test('tree', ({ expect }) => {
+    {
+      const tree = createTree();
+      let count = 0;
+      tree.tranverse(() => {
+        count++;
+      });
+      expect(count).to.eq(tree.size);
+      expect(count).to.eq(1);
+    }
+    {
+      const tree = createTree([10]);
+      let count = 0;
+      tree.tranverse(() => {
+        count++;
+      });
+      expect(count).to.eq(tree.size);
+      expect(count).to.eq(1 + 10);
+    }
+    {
+      const tree = createTree([10, 3, 1]);
+      let count = 0;
+      tree.tranverse(() => {
+        count++;
+      });
+      expect(count).to.eq(tree.size);
+      expect(count).to.eq(1 + 10 * (1 + 3 * (1 + 1))); // 71
+    }
+  });
+
+  test('tree navigation', ({ expect }) => {
+    const tree = createTree([2, 3, 1]);
+    expect(tree.getParent(tree.root)).to.be.null;
+
+    const nodes = tree.getChildNodes(tree.root);
+    expect(nodes).to.have.length(2);
+
+    const first = nodes[0];
+    expect(first.children).to.have.length(3);
+    const parent = tree.getParent(first);
+    expect(parent).to.eq(tree.root);
+
+    const [c1, c2, c3] = tree.getChildNodes(first);
+    expect(tree.getParent(c1)).to.eq(first);
+    expect(tree.getParent(c2)).to.eq(first);
+    expect(tree.getParent(c3)).to.eq(first);
+
+    const [g1] = tree.getChildNodes(c1);
+    expect(tree.getParent(g1)).to.eq(c1);
+  });
+
+  /**
+   *  root                       root                        root
+   *   └── 1                      └── 1                       └── 1
+   *       ├── 1.1                    ├── 1.1                     ├── 1.1
+   *       ├── 1.2 <- indent          │   ├── 1.2 <- unindent     ├── 1.2
+   *       ├── 1.3 <- indent          │   └── 1.3                 │   └── 1.3
+   *       ├── 1.4                    ├── 1.4                     ├── 1.4
+   *       └── 1.5                    └── 1.5                     └── 1.5
+   */
+  test('indent and unindent', async ({ expect }) => {
+    const tree = createTree([1, 5]);
+    const parent = tree.getNode(tree.root.children[0]);
+
+    {
+      const count = print(tree);
+      expect(count).to.eq(1 + 1 * (1 + 5));
+    }
+
+    // Indent
+    {
+      const child = tree.getChildNodes(parent);
+      tree.indentNode(child[1]);
+      tree.indentNode(child[2]);
+      expect(parent.children).to.have.length(3);
+      expect(child[0].children).to.have.length(2);
+    }
+
+    {
+      const count = print(tree);
+      expect(count).to.eq(1 + 1 * (1 + 5));
+    }
+
+    // Unindent
+    {
+      const child = tree.getChildNodes(parent);
+      const grandchild = tree.getChildNodes(child[0]);
+      tree.unindentNode(grandchild[0]);
+      expect(grandchild[0].children).to.have.length(1);
+      expect(parent.children).to.have.length(4);
+    }
+
+    {
+      const count = print(tree);
+      expect(count).to.eq(1 + 1 * (1 + 5));
+    }
+  });
+
+  test('task', ({ expect }) => {
+    const task = live(DataType.Task, { text: 'Test task.' });
+    expect(task.text).to.eq('Test task.');
+
+    const tree = createTree();
+    const node = tree.addNode(tree.root);
+    node.ref = makeRef(task);
+  });
+});