@dxos/plugin-explorer 0.8.3 → 0.8.4-main.1068cf700f

package/src/components/Graph/ForceGraph.stories.tsx

@@ -2,24 +2,27 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
 
-import { type Meta } from '@storybook/react';
-import React, { useEffect, useState } from 'react';
-
-import { Obj } from '@dxos/echo';
+import { Type } from '@dxos/echo';
 import { faker } from '@dxos/random';
 import { useClient } from '@dxos/react-client';
 import { type Space } from '@dxos/react-client/echo';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { DataType } from '@dxos/schema';
+import { useAsyncEffect } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { View } from '@dxos/schema';
 import { type ValueGenerator } from '@dxos/schema/testing';
-import { withLayout, withTheme, render } from '@dxos/storybook-utils';
+import { withRegistry } from '@dxos/storybook-utils';
+import { render } from '@dxos/storybook-utils';
+import { HasRelationship, Organization, Person, Pipeline } from '@dxos/types';
+
+import { useGraphModel } from '../../hooks';
+import { Graph } from '../../types';
 
 import { ForceGraph } from './ForceGraph';
 import { generate } from './testing';
-import { useGraphModel } from '../../hooks';
-import { ViewType } from '../../types';
 
 const generator = faker as any as ValueGenerator;
 
@@ -28,37 +31,53 @@ faker.seed(1);
 const DefaultStory = () => {
   const client = useClient();
   const [space, setSpace] = useState<Space>();
-  const [view, setView] = useState<ViewType>();
-  useEffect(() => {
+  const [graph, setGraph] = useState<Graph.Graph>();
+
+  useAsyncEffect(async () => {
     const space = client.spaces.default;
     void generate(space, generator);
-    const view = space.db.add(Obj.make(ViewType, { name: '', type: '' }));
+    const { view } = await View.makeFromDatabase({ db: space.db, typename: Type.getTypename(Graph.Graph) });
+    const graph = Graph.make({ name: 'Test', view });
+    space.db.add(graph);
     setSpace(space);
-    setView(view);
-  }, []);
+    setGraph(graph);
+  }, [client]);
 
   const model = useGraphModel(space);
-  if (!model || !space || !view) {
+  if (!model || !space || !graph) {
     return null;
   }
 
   return <ForceGraph model={model} />;
 };
 
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-explorer/ForceGraph',
   component: ForceGraph,
   render: render(DefaultStory),
   decorators: [
+    withRegistry,
+    withTheme(),
+    withLayout(),
     withClientProvider({
       createSpace: true,
-      types: [ViewType, DataType.HasRelationship, DataType.Organization, DataType.Project, DataType.Person],
+      types: [
+        Graph.Graph,
+        View.View,
+        HasRelationship.HasRelationship,
+        Organization.Organization,
+        Pipeline.Pipeline,
+        Person.Person,
+      ],
     }),
-    withTheme,
-    withLayout({ fullscreen: true }),
   ],
-};
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof ForceGraph>;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Graph/ForceGraph.tsx

@@ -7,7 +7,7 @@ import NativeForceGraph from 'force-graph';
 import React, { type FC, useEffect, useRef, useState } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
-import { filterObjectsSync, type SearchResult } from '@dxos/plugin-search';
+import { type SearchResult, filterObjectsSync } from '@dxos/plugin-search';
 import { type SpaceGraphModel } from '@dxos/schema';
 
 import { GraphAdapter } from './adapter';
@@ -20,9 +20,9 @@ export type ForceGraphProps = {
 export const ForceGraph: FC<ForceGraphProps> = ({ model, match }) => {
   const { ref, width, height } = useResizeDetector({ refreshRate: 200 });
   const rootRef = useRef<HTMLDivElement>(null);
-  const forceGraph = useRef<NativeForceGraph>();
+  const forceGraph = useRef<NativeForceGraph>(null);
 
-  const filteredRef = useRef<SearchResult[]>();
+  const filteredRef = useRef<SearchResult[]>([]);
   filteredRef.current = filterObjectsSync(model?.objects ?? [], match);
 
   const [data, setData] = useState<GraphAdapter>();
@@ -39,7 +39,7 @@ export const ForceGraph: FC<ForceGraphProps> = ({ model, match }) => {
       forceGraph.current = new NativeForceGraph(rootRef.current)
         // https://github.com/vasturiano/force-graph?tab=readme-ov-file#node-styling
         .nodeRelSize(6)
-        .nodeLabel((node: any) => (node.type === 'schema' ? node.data.typename : node.data.label ?? node.id))
+        .nodeLabel((node: any) => (node.type === 'schema' ? node.data.typename : (node.data.label ?? node.id)))
         .nodeAutoColorBy((node: any) => (node.type === 'schema' ? 'schema' : node.data.typename))
 
         // https://github.com/vasturiano/force-graph?tab=readme-ov-file#link-styling
@@ -48,7 +48,7 @@ export const ForceGraph: FC<ForceGraphProps> = ({ model, match }) => {
 
     return () => {
       forceGraph.current?.pauseAnimation().graphData({ nodes: [], links: [] });
-      forceGraph.current = undefined;
+      forceGraph.current = null;
     };
   }, []);
 

package/src/components/Graph/adapter.ts

@@ -25,19 +25,25 @@ export class GraphAdapter implements GraphData {
   private readonly _nodes: GraphNode[] = [];
   private readonly _links: GraphLink[] = [];
 
-  constructor(private readonly graph: Graph) {
-    this._nodes = graph.nodes.map((node) => ({
+  constructor(private readonly graph: Graph.Any) {
+    this._nodes = graph.nodes.map((node: Graph.Node.Any) => ({
       id: node.id,
       type: node.type,
       data: node.data,
     }));
 
-    this._links = graph.edges.map((edge) => ({
-      type: edge.type,
-      source: edge.source,
-      target: edge.target,
-      data: edge.data,
-    }));
+    // Build a set of node IDs for efficient lookup.
+    const nodeIds = new Set(this._nodes.map((node) => node.id));
+
+    // Filter out edges where source or target node doesn't exist.
+    this._links = graph.edges
+      .filter((edge: Graph.Edge.Any) => nodeIds.has(edge.source) && nodeIds.has(edge.target))
+      .map((edge: Graph.Edge.Any) => ({
+        type: edge.type,
+        source: edge.source,
+        target: edge.target,
+        data: edge.data,
+      }));
   }
 
   get nodes() {

package/src/components/Graph/testing.ts

@@ -3,17 +3,17 @@
 //
 
 import { type Space } from '@dxos/client/echo';
-import { Query, Relation, type Obj } from '@dxos/echo';
-import { DataType } from '@dxos/schema';
-import { createObjectFactory, type ValueGenerator, type TypeSpec } from '@dxos/schema/testing';
+import { type Obj, Query, Relation } from '@dxos/echo';
+import { type TypeSpec, type ValueGenerator, createObjectFactory } from '@dxos/schema/testing';
+import { HasRelationship, Organization, Person, Pipeline } from '@dxos/types';
 import { range } from '@dxos/util';
 
-const getObject = (objects: Obj.Any[]) => objects[Math.floor(Math.random() * objects.length)];
+const getObject = (objects: Obj.Unknown[]) => 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 },
+  { type: Organization.Organization, count: 5 },
+  { type: Pipeline.Pipeline, count: 5 },
+  { type: Person.Person, count: 10 },
 ];
 
 export type GenerateOptions = {
@@ -24,7 +24,10 @@ export type GenerateOptions = {
   };
 };
 
-const defaultRelations: GenerateOptions['relations'] = { kind: 'friend', count: 10 };
+const defaultRelations: GenerateOptions['relations'] = {
+  kind: 'friend',
+  count: 10,
+};
 
 /**
  * @deprecated Use @dxos/schema.
@@ -38,13 +41,13 @@ export const generate = async (
   await createObjects(spec);
 
   // Add relations between objects.
-  const { objects: contacts } = await space.db.query(Query.type(DataType.Person)).run();
+  const contacts = await space.db.query(Query.type(Person.Person)).run();
   for (const _ of range(relations.count)) {
     const source = getObject(contacts);
     const target = getObject(contacts);
     if (source.id !== target.id) {
       space.db.add(
-        Relation.make(DataType.HasRelationship, {
+        Relation.make(HasRelationship.HasRelationship, {
           [Relation.Source]: source,
           [Relation.Target]: target,
           kind: relations.kind,

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

@@ -2,25 +2,26 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta } from '@storybook/react';
-import React, { type FC, useEffect, useState } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useEffect, useState } from 'react';
 
 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 { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { withRegistry } from '@dxos/storybook-utils';
 
 import { Tree, type TreeComponentProps } from './Tree';
-import { TreeType, Tree as TreeModel } from './types';
+import { Tree as TreeModel, TreeType } from './types';
 
 // TODO(burdon): Storybook for Graph/Tree/Plot (generics); incl. GraphModel.
 // TODO(burdon): Type for all Explorer components (Space, Object, Query, etc.) incl.
 
 faker.seed(1);
 
-const Story: FC<ClientRepeatedComponentProps & { type?: TreeComponentProps<any>['variant'] }> = ({ type }) => {
+type ComponentProps = ClientRepeatedComponentProps & { type?: TreeComponentProps<any>['variant'] };
+
+const Component = ({ type }: ComponentProps) => {
   const client = useClient();
   const space = client.spaces.default;
   const [object, setObject] = useState<TreeType>();
@@ -38,32 +39,38 @@ const Story: FC<ClientRepeatedComponentProps & { type?: TreeComponentProps<any>[
   return <Tree space={space} selected={object?.id} variant={type} />;
 };
 
-export const Tidy = {
+const DefaultStory = () => {
+  return <ClientRepeater component={Component} types={[TreeType]} createSpace />;
+};
+
+const meta = {
+  title: 'plugins/plugin-explorer/Tree',
+  component: Tree as any,
+  render: DefaultStory,
+  decorators: [withRegistry, withTheme(), withLayout()],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Tidy: Story = {
   args: {
     type: 'tidy',
   },
 };
 
-export const Radial = {
+export const Radial: Story = {
   args: {
     type: 'radial',
   },
 };
 
-export const Edge = {
+export const Edge: Story = {
   args: {
     type: 'edge',
   },
 };
-
-const meta: Meta = {
-  title: 'plugins/plugin-explorer/Tree',
-  component: Tree,
-  render: () => <ClientRepeater component={Story} types={[TreeType]} createSpace />,
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  parameters: {
-    layout: 'fullscreen',
-  },
-};
-
-export default meta;

package/src/components/Tree/Tree.tsx

@@ -2,7 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { useEffect, useRef, useState } from 'react';
+import { RegistryContext } from '@effect-atom/atom-react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 
 import { type Space } from '@dxos/client/echo';
 import { useAsyncState } from '@dxos/react-ui';
@@ -10,7 +11,7 @@ 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 { type TreeNode, mapGraphToTreeData } from './types';
 
 // TODO(burdon): Create dge bundling graph using d3.hierarchy.
 // https://observablehq.com/@d3/hierarchical-edge-bundling?intent=fork
@@ -62,7 +63,11 @@ 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) : undefined), [space, selected]);
+  const registry = useContext(RegistryContext);
+  const [model] = useAsyncState(
+    async () => (space ? new SpaceGraphModel(registry).open(space.db) : undefined),
+    [space, selected, registry],
+  );
 
   const [tree, setTree] = useState<TreeNode>();
   useEffect(() => {
@@ -75,8 +80,8 @@ export const Tree = <N,>({ space, selected, variant = 'tidy', onNodeClick }: Tre
   const context = useRef<SVGContext>(null);
 
   useEffect(() => {
-    if (context.current) {
-      const { width, height } = context.current.size!;
+    if (context.current?.size) {
+      const { width, height } = context.current.size;
       const size = Math.min(width, height);
       const radius = size * 0.4;
       const options = {
@@ -100,7 +105,7 @@ export const Tree = <N,>({ space, selected, variant = 'tidy', onNodeClick }: Tre
   }, [context.current, tree]);
 
   return (
-    <div onClick={() => onNodeClick?.()}>
+    <div className='grow' onClick={() => onNodeClick?.()}>
       <SVG.Root ref={context} />
     </div>
   );

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

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Key } from '@dxos/echo';
+import { Key, Obj } from '@dxos/echo';
 import { range } from '@dxos/util';
 
 import { Tree, type TreeNodeType } from '../types';
@@ -16,7 +16,9 @@ const random = (min: number, max: number) => Math.floor(Math.random() * (max - m
  */
 export const createTree = (spec: NumberOrNumberArray[] = [], createText?: () => string): Tree => {
   const tree = new Tree();
-  tree.root.data = { text: 'root' };
+  Obj.change(tree.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;

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

@@ -6,11 +6,12 @@ import { describe, test } from 'vitest';
 
 import { Obj, Ref } from '@dxos/echo';
 import { faker } from '@dxos/random';
-import { DataType } from '@dxos/schema';
+import { Task } from '@dxos/types';
 
-import { type Tree } from './tree';
 import { createTree } from '../testing';
 
+import { type Tree } from './tree';
+
 faker.seed(0);
 
 const print = (tree: Tree) => {
@@ -123,11 +124,13 @@ describe('tree', () => {
   });
 
   test('task', ({ expect }) => {
-    const task = Obj.make(DataType.Task, { text: 'Test task.' });
-    expect(task.text).to.eq('Test task.');
+    const task = Obj.make(Task.Task, { title: 'Test task.' });
+    expect(task.title).to.eq('Test task.');
 
     const tree = createTree();
     const node = tree.addNode(tree.root);
-    node.ref = Ref.make(task);
+    Obj.change(tree.tree, () => {
+      node.ref = Ref.make(task);
+    });
   });
 });

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

@@ -2,9 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 import { Key, Obj, Type } from '@dxos/echo';
+import { TestSchema } from '@dxos/echo/testing';
 import { invariant } from '@dxos/invariant';
 
 // TODO(burdon): Reconcile with @dxos/graph (i.e., common types).
@@ -13,7 +14,7 @@ export const TreeNodeType = Schema.Struct({
   id: Key.ObjectId,
   children: Schema.mutable(Schema.Array(Key.ObjectId)),
   data: Schema.mutable(Schema.Record({ key: Schema.String, value: Schema.Any })),
-  ref: Schema.optional(Type.Ref(Type.Expando)),
+  ref: Schema.optional(Type.Ref(TestSchema.Expando)),
 }).pipe(Schema.mutable);
 
 export interface TreeNodeType extends Schema.Schema.Type<typeof TreeNodeType> {}
@@ -22,7 +23,7 @@ export const TreeType = Schema.Struct({
   root: Key.ObjectId,
   nodes: Schema.mutable(Schema.Record({ key: Key.ObjectId, value: TreeNodeType })),
 }).pipe(
-  Type.Obj({
+  Type.object({
     typename: 'dxos.org/type/Tree',
     version: '0.1.0',
   }),
@@ -184,9 +185,11 @@ export class Tree {
   clear(): void {
     const root = this._tree.nodes[this._tree.root];
     root.children.length = 0;
-    this._tree.nodes = {
-      [root.id]: root,
-    };
+    Obj.change(this._tree, (t) => {
+      t.nodes = {
+        [root.id]: root,
+      };
+    });
   }
 
   /**
@@ -198,8 +201,11 @@ export class Tree {
       node = { id, children: [], data: { text: '' } }; // TODO(burdon): Generic.
     }
 
-    this._tree.nodes[node.id] = node;
-    parent.children.splice(index ?? parent.children.length, 0, node.id);
+    const nodeToAdd = node;
+    Obj.change(this._tree, (t) => {
+      t.nodes[nodeToAdd.id] = nodeToAdd;
+      parent.children.splice(index ?? parent.children.length, 0, nodeToAdd.id);
+    });
     return node;
   }
 
@@ -212,10 +218,14 @@ export class Tree {
       return undefined;
     }
 
-    delete this._tree.nodes[node.id];
+    Obj.change(this._tree, (t) => {
+      delete t.nodes[node.id];
+    });
     const idx = parent.children.findIndex((child) => child === id);
     if (idx !== -1) {
-      parent.children.splice(idx, 1);
+      Obj.change(this._tree, () => {
+        parent.children.splice(idx, 1);
+      });
     }
 
     return node;
@@ -232,8 +242,10 @@ export class Tree {
     }
 
     const child = node.children[from];
-    node.children.splice(from, 1);
-    node.children.splice(to, 0, child);
+    Obj.change(this._tree, () => {
+      node.children.splice(from, 1);
+      node.children.splice(to, 0, child);
+    });
     return this.getNode(child);
   }
 
@@ -252,8 +264,10 @@ export class Tree {
     }
 
     const previous = this.getNode(parent.children[idx - 1]);
-    parent.children.splice(idx, 1);
-    previous.children.push(node.id);
+    Obj.change(this._tree, () => {
+      parent.children.splice(idx, 1);
+      previous.children.push(node.id);
+    });
   }
 
   /**
@@ -270,16 +284,23 @@ export class Tree {
       return;
     }
 
-    // Remove node from parent.
+    // Remove node from parent and get following siblings.
     const nodeIdx = parent.children.findIndex((id) => id === node.id);
-    const [_, ...rest] = parent.children.splice(nodeIdx, parent.children.length - nodeIdx);
-    parent.children.splice(nodeIdx, parent.children.length - nodeIdx);
+    let rest: Key.ObjectId[] = [];
+    Obj.change(this._tree, () => {
+      const removed = parent.children.splice(nodeIdx, parent.children.length - nodeIdx);
+      rest = removed.slice(1); // Skip the node itself.
+    });
 
     // Add to ancestor.
     const parentIdx = this.getChildNodes(ancestor).findIndex((n) => n.id === parent.id);
-    ancestor.children.splice(parentIdx + 1, 0, node.id);
+    Obj.change(this._tree, () => {
+      ancestor.children.splice(parentIdx + 1, 0, node.id);
+    });
 
     // Transplant following siblings to current node.
-    node.children.push(...rest);
+    Obj.change(this._tree, () => {
+      node.children.push(...rest);
+    });
   }
 }

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

@@ -10,7 +10,7 @@ export type TreeNode = {
   children?: TreeNode[];
 };
 
-export const mapGraphToTreeData = (model: GraphModel, maxDepth = 8): TreeNode | undefined => {
+export const mapGraphToTreeData = (model: GraphModel.GraphModel, maxDepth = 8): TreeNode | undefined => {
   // TODO(burdon): Convert to common/graph.
   // const mapNode = (node: N, depth = 0): TreeNode => {
   //   const treeNode: TreeNode = {

package/src/components/index.ts

@@ -2,11 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
-
-export const ExplorerContainer = lazy(() => import('./ExplorerContainer'));
+import { type ComponentType, lazy } from 'react';
 
 export * from './Chart';
 export * from './Globe';
 export * from './Graph';
 export * from './Tree';
+
+export const ExplorerContainer: ComponentType<any> = lazy(() => import('./ExplorerContainer'));

package/src/hooks/useGraphModel.ts

@@ -4,7 +4,9 @@
 
 import { useEffect, useState } from 'react';
 
-import { type Filter, type Space } from '@dxos/client/echo';
+import { Capabilities } from '@dxos/app-framework';
+import { useCapability } from '@dxos/app-framework/ui';
+import { type Filter, type Queue, type Space } from '@dxos/client/echo';
 import { SpaceGraphModel, type SpaceGraphModelOptions } from '@dxos/schema';
 
 // TODO(burdon): Factor out.
@@ -12,7 +14,9 @@ export const useGraphModel = (
   space: Space | undefined,
   filter?: Filter.Any | undefined,
   options?: SpaceGraphModelOptions,
+  queue?: Queue,
 ): SpaceGraphModel | undefined => {
+  const registry = useCapability(Capabilities.AtomRegistry);
   const [model, setModel] = useState<SpaceGraphModel | undefined>(undefined);
   useEffect(() => {
     if (!space) {
@@ -22,14 +26,14 @@ export const useGraphModel = (
     }
 
     // TODO(burdon): Does this need to be a dependency?
-    if (!model) {
-      const model = new SpaceGraphModel().setFilter(filter).setOptions(options);
-      void model.open(space);
+    if (!model || model.queue !== queue) {
+      const model = new SpaceGraphModel(registry).setFilter(filter).setOptions(options);
+      void model.open(space.db, queue);
       setModel(model);
     } else {
       model.setFilter(filter).setOptions(options);
     }
-  }, [space, filter, options]);
+  }, [space, filter, options, queue, registry]);
 
   return model;
 };

package/src/meta.ts

@@ -2,15 +2,18 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type PluginMeta } from '@dxos/app-framework';
+import { type Plugin } from '@dxos/app-framework';
+import { trim } from '@dxos/util';
 
-export const EXPLORER_PLUGIN = 'dxos.org/plugin/explorer';
-
-export const meta: PluginMeta = {
-  id: EXPLORER_PLUGIN,
+export const meta: Plugin.Meta = {
+  id: 'dxos.org/plugin/explorer',
   name: 'Explorer',
-  description: 'Install this plugin to view a hypergraph of all objects inside of your Space.',
+  description: trim`
+    Interactive hypergraph visualization that reveals relationships between objects in your workspace.
+    Navigate complex data structures and discover connections through a dynamic network view.
+  `,
   icon: 'ph--graph--regular',
+  iconHue: 'green',
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/plugin-explorer',
   tags: ['labs'],
   screenshots: ['https://dxos.network/plugin-details-explorer-dark.png'],