@dxos/plugin-explorer 0.8.4-main.422d1c7879 → 0.8.4-main.4f23b4e393

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

@@ -3,19 +3,23 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useState } from 'react';
+import * as Effect from 'effect/Effect';
+import React, { useCallback, useMemo } from 'react';
 
-import { Type } from '@dxos/echo';
-import { View } from '@dxos/echo';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Obj, Type, View } from '@dxos/echo';
+import { SelectionModel } from '@dxos/graph';
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { PreviewPlugin } from '@dxos/plugin-preview/testing';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { random } 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 { useAsyncEffect } from '@dxos/react-ui';
+import { useSpaces } from '@dxos/react-client/echo';
+import { DxAnchorActivate } from '@dxos/react-ui';
+import { type GraphProps, type GraphLayoutNode } from '@dxos/react-ui-graph';
 import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
-import { ViewModel } from '@dxos/schema';
+import { type SpaceGraphEdge, type SpaceGraphNode, ViewModel } from '@dxos/schema';
 import { type ValueGenerator } from '@dxos/schema/testing';
-import { withRegistry } from '@dxos/storybook-utils';
 import { HasRelationship, Organization, Person, Pipeline } from '@dxos/types';
 
 import { useGraphModel } from '#hooks';
@@ -29,26 +33,39 @@ const generator = random as any as ValueGenerator;
 random.seed(1);
 
 const DefaultStory = () => {
-  const client = useClient();
-  const [space, setSpace] = useState<Space>();
-  const [graph, setGraph] = useState<Graph.Graph>();
+  const [space] = useSpaces();
+  const model = useGraphModel(space?.db);
 
-  useAsyncEffect(async () => {
-    const space = client.spaces.get()[0];
-    void generate(space, generator);
-    const { view } = await ViewModel.makeFromDatabase({ db: space.db, typename: Type.getTypename(Graph.Graph) });
-    const graph = Graph.make({ name: 'Test', view });
-    space.db.add(graph);
-    setSpace(space);
-    setGraph(graph);
-  }, [client]);
+  const selection = useMemo(() => new SelectionModel({ mode: 'single' }), []);
 
-  const model = useGraphModel(space);
-  if (!model || !space || !graph) {
-    return <Loading data={{ model: !!model, space: !!space, graph: !!graph }} />;
+  const handleInspect = useCallback<NonNullable<GraphProps<SpaceGraphNode, SpaceGraphEdge>['onInspect']>>(
+    (node: GraphLayoutNode<SpaceGraphNode>, event) => {
+      const obj = node.data?.data?.object;
+      if (!obj) {
+        return;
+      }
+      const dxn = Obj.getDXN(obj)?.toString();
+      if (!dxn) {
+        return;
+      }
+      const target = event.target as HTMLElement;
+      target.dispatchEvent(
+        new DxAnchorActivate({
+          dxn,
+          label: Obj.getLabel(obj) ?? dxn,
+          trigger: target,
+          kind: 'card',
+        }),
+      );
+    },
+    [],
+  );
+
+  if (!space || !model) {
+    return <Loading data={{ space: !!space, model: !!model }} />;
   }
 
-  return <ForceGraph model={model} />;
+  return <ForceGraph model={model} selection={selection} onInspect={handleInspect} />;
 };
 
 const meta = {
@@ -56,18 +73,33 @@ const meta = {
   component: ForceGraph,
   render: DefaultStory,
   decorators: [
-    withRegistry,
     withTheme(),
-    withLayout(),
-    withClientProvider({
-      createSpace: true,
-      types: [
-        Graph.Graph,
-        View.View,
-        HasRelationship.HasRelationship,
-        Organization.Organization,
-        Pipeline.Pipeline,
-        Person.Person,
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        StorybookPlugin({}),
+        ClientPlugin({
+          types: [
+            Graph.Graph,
+            View.View,
+            HasRelationship.HasRelationship,
+            Organization.Organization,
+            Pipeline.Pipeline,
+            Person.Person,
+          ],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              const { personalSpace } = yield* initializeIdentity(client);
+              yield* Effect.promise(() => generate(personalSpace, generator));
+              const { view } = yield* Effect.promise(() =>
+                ViewModel.makeFromDatabase({ db: personalSpace.db, typename: Type.getTypename(Graph.Graph) }),
+              );
+              personalSpace.db.add(Graph.make({ name: 'Test', view }));
+              yield* Effect.promise(() => personalSpace.db.flush({ indexes: true }));
+            }),
+        }),
+        PreviewPlugin(),
       ],
     }),
   ],

package/src/components/Graph/ForceGraph.tsx

@@ -2,91 +2,110 @@
 // Copyright 2023 DXOS.org
 //
 
-import { forceLink, forceManyBody } from 'd3';
-import NativeForceGraph from 'force-graph';
-import React, { type FC, useEffect, useRef, useState } from 'react';
-import { useResizeDetector } from 'react-resize-detector';
-
-import { type SearchResult, filterObjectsSync } from '@dxos/plugin-search';
-import { type SpaceGraphModel } from '@dxos/schema';
-
-import { GraphAdapter } from './adapter';
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { Obj } from '@dxos/echo';
+import { SelectionModel } from '@dxos/graph';
+import {
+  type GraphController,
+  GraphForceProjector,
+  type GraphLayoutNode,
+  type GraphProps,
+  SVG,
+  type SVGContext,
+} from '@dxos/react-ui-graph';
+import { type SpaceGraphEdge, type SpaceGraphModel, type SpaceGraphNode } from '@dxos/schema';
+import { composable, composableProps, getHashStyles } from '@dxos/ui-theme';
+import '@dxos/react-ui-graph/styles/graph.css';
+
+const EMPTY_ATOM = Atom.make<{ nodes: SpaceGraphNode[]; edges: SpaceGraphEdge[] }>({ nodes: [], edges: [] });
 
 export type ForceGraphProps = {
   model?: SpaceGraphModel;
-  match?: RegExp;
-};
-
-export const ForceGraph: FC<ForceGraphProps> = ({ model, match }) => {
-  const { ref, width, height } = useResizeDetector({ refreshRate: 200 });
-  const rootRef = useRef<HTMLDivElement>(null);
-  const forceGraph = useRef<NativeForceGraph>(null);
-
-  const filteredRef = useRef<SearchResult[]>([]);
-  filteredRef.current = filterObjectsSync(model?.objects ?? [], match);
-
-  const [data, setData] = useState<GraphAdapter>();
-  useEffect(() => {
-    return model?.subscribe((model) => {
-      setData(new GraphAdapter(model.graph));
-    });
-  }, [model]);
-
-  useEffect(() => {
-    if (rootRef.current) {
-      // https://github.com/vasturiano/force-graph
-      // https://github.com/vasturiano/3d-force-graph
-      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)))
-        .nodeAutoColorBy((node: any) => (node.type === 'schema' ? 'schema' : node.data.typename))
-
-        // https://github.com/vasturiano/force-graph?tab=readme-ov-file#link-styling
-        .linkAutoColorBy((link: any) => link.type);
-    }
-
-    return () => {
-      forceGraph.current?.pauseAnimation().graphData({ nodes: [], links: [] });
-      forceGraph.current = null;
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!data || !width || !height || !forceGraph.current) {
-      return;
-    }
-
-    // https://github.com/vasturiano/force-graph?tab=readme-ov-file#container-layout
-    forceGraph.current
-      .pauseAnimation()
-      .width(width)
-      .height(height)
-      .onEngineStop(() => {
-        handleZoomToFit();
-      })
-      .onNodeClick((node: any) => {
-        forceGraph.current?.emitParticle(node);
-      })
-
-      // https://github.com/vasturiano/force-graph?tab=readme-ov-file#force-engine-d3-force-configuration
-      // .d3Force('center', forceCenter().strength(0.9))
-      .d3Force('link', forceLink().distance(160).strength(0.5))
-      .d3Force('charge', forceManyBody().strength(-30))
-
-      .graphData(data)
-      .warmupTicks(100)
-      .cooldownTime(1_000)
-      .resumeAnimation();
-  }, [data, width, height, forceGraph.current]);
-
-  const handleZoomToFit = () => {
-    forceGraph.current?.zoomToFit(400, 40);
-  };
-
-  return (
-    <div ref={ref} className='relative grow' onClick={handleZoomToFit}>
-      <div ref={rootRef} className='absolute inset-0' />
-    </div>
-  );
-};
+  grid?: boolean;
+  selection?: SelectionModel;
+  onInspect?: GraphProps<SpaceGraphNode, SpaceGraphEdge>['onInspect'];
+} & Pick<GraphProps, 'drag'>;
+
+export const ForceGraph = composable<HTMLDivElement, ForceGraphProps>(
+  ({ model, selection: selectionProp, grid, drag, onInspect, ...props }, forwardedRef) => {
+    // TODO(wittjosiah): This should go into Graph.tsx but for some reason doesn't work.
+    useAtomValue(model?.graphAtom ?? EMPTY_ATOM);
+
+    const graph = useRef<GraphController>(null);
+    const selection = useMemo(() => selectionProp ?? new SelectionModel(), [selectionProp]);
+    useEffect(() => {
+      const unsubscribe = selection.subscribe(() => graph.current?.repaint());
+      return unsubscribe;
+    }, [selection]);
+
+    const svgRef = useRef<SVGContext>(null);
+    const [projector, setProjector] = useState<GraphForceProjector>();
+    useEffect(() => {
+      if (svgRef.current) {
+        setProjector(
+          new GraphForceProjector(svgRef.current, {
+            attributes: {
+              // TODO(burdon): Check type (currently assumes Employee property).
+              // Edge shouldn't contribute to force if it's not active.
+              linkForce: (edge) => edge.data?.object?.active !== false,
+            },
+            forces: {
+              point: {
+                strength: 0.01,
+              },
+            },
+          }),
+        );
+      }
+      // SVG.Graph owns projector start/stop; nothing to clean up here.
+    }, []);
+
+    const handleSelect = useCallback<NonNullable<GraphProps['onSelect']>>(
+      (node) => {
+        if (selection.contains(node.id)) {
+          selection.remove(node.id);
+        } else {
+          selection.add(node.id);
+        }
+      },
+      [selection],
+    );
+
+    return (
+      <div {...composableProps(props, { classNames: 'dx-container' })} ref={forwardedRef}>
+        <SVG.Root ref={svgRef}>
+          <SVG.Markers />
+          {grid && <SVG.Grid axis />}
+          <SVG.Zoom extent={[1 / 2, 2]}>
+            <SVG.Graph<SpaceGraphNode, SpaceGraphEdge>
+              drag={drag}
+              ref={graph}
+              model={model}
+              projector={projector}
+              labels={{
+                text: (node) => node.data?.data.label ?? node.id,
+              }}
+              attributes={{
+                node: (node: GraphLayoutNode<SpaceGraphNode>) => {
+                  const obj = node.data?.data.object;
+                  return {
+                    data: {
+                      color: getHashStyles(obj && Obj.getTypename(obj))?.hue,
+                    },
+                    classes: {
+                      'dx-selected': selection.contains(node.id),
+                    },
+                  };
+                },
+              }}
+              onSelect={handleSelect}
+              onInspect={onInspect}
+            />
+          </SVG.Zoom>
+        </SVG.Root>
+      </div>
+    );
+  },
+);

package/src/components/Graph/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './D3ForceGraph';
+export * from './CanvasForceGraph';
 export * from './ForceGraph';

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

@@ -3,53 +3,58 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useEffect, useState } from 'react';
-
-import { invariant } from '@dxos/invariant';
+import * as Effect from 'effect/Effect';
+import React from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Filter } from '@dxos/echo';
+import { ClientPlugin } from '@dxos/plugin-client/plugin';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
-import { useClient } from '@dxos/react-client';
-import { type ClientRepeatedComponentProps, ClientRepeater } from '@dxos/react-client/testing';
-import { withLayout, withTheme } from '@dxos/react-ui/testing';
-import { withRegistry } from '@dxos/storybook-utils';
+import { useQuery, useSpaces } from '@dxos/react-client/echo';
+import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
 
+import { createTree } from './testing';
 import { Tree, type TreeComponentProps } from './Tree';
-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.
+import { TreeType } from './types';
 
 random.seed(1);
 
-type ComponentProps = ClientRepeatedComponentProps & { type?: TreeComponentProps<any>['variant'] };
-
-const Component = ({ type }: ComponentProps) => {
-  const client = useClient();
-  const space = client.spaces.get()[0];
-  invariant(space, 'Tree story requires at least one space');
-  const [object, setObject] = useState<TreeType>();
-  useEffect(() => {
-    setTimeout(() => {
-      const tree = space.db.add(TreeModel.create());
-      setObject(tree);
-    });
-  }, []);
+type StoryArgs = { variant?: TreeComponentProps<any>['variant'] };
 
-  if (!object) {
-    return null;
+const DefaultStory = ({ variant }: StoryArgs) => {
+  const [space] = useSpaces();
+  const [tree] = useQuery(space?.db, Filter.type(TreeType));
+  if (!space || !tree) {
+    return <Loading data={{ space: !!space, tree: !!tree }} />;
   }
 
-  return <Tree space={space} selected={object?.id} variant={type} />;
-};
-
-const DefaultStory = () => {
-  return <ClientRepeater component={Component} types={[TreeType]} createSpace />;
+  return <Tree space={space} selected={tree.id} variant={variant} />;
 };
 
 const meta = {
   title: 'plugins/plugin-explorer/components/Tree',
   component: Tree as any,
   render: DefaultStory,
-  decorators: [withRegistry, withTheme(), withLayout()],
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          types: [TreeType],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              const { personalSpace } = yield* initializeIdentity(client);
+              const tree = createTree([3, [2, 4], [1, 3]]).tree;
+              personalSpace.db.add(tree);
+            }),
+        }),
+      ],
+    }),
+  ],
   parameters: {
     layout: 'fullscreen',
   },
@@ -61,18 +66,18 @@ type Story = StoryObj<typeof meta>;
 
 export const Tidy: Story = {
   args: {
-    type: 'tidy',
+    variant: 'tidy',
   },
 };
 
 export const Radial: Story = {
   args: {
-    type: 'radial',
+    variant: 'radial',
   },
 };
 
 export const Edge: Story = {
   args: {
-    type: 'edge',
+    variant: 'edge',
   },
 };

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

@@ -16,7 +16,7 @@ const random = (min: number, max: number) => Math.floor(Math.random() * (max - m
  */
 export const createTree = (spec: NumberOrNumberArray[] = [], createText?: () => string): Tree => {
   const tree = new Tree();
-  Obj.change(tree.tree, () => {
+  Obj.update(tree.tree, () => {
     tree.root.data = { text: 'root' };
   });
 

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

@@ -128,7 +128,7 @@ describe('tree', () => {
 
     const tree = createTree();
     const node = tree.addNode(tree.root);
-    Obj.change(tree.tree, () => {
+    Obj.update(tree.tree, () => {
       node.ref = Ref.make(task);
     });
   });

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

@@ -185,7 +185,7 @@ export class Tree {
   clear(): void {
     const root = this._tree.nodes[this._tree.root];
     root.children.length = 0;
-    Obj.change(this._tree, (obj) => {
+    Obj.update(this._tree, (obj) => {
       obj.nodes = {
         [root.id]: root,
       };
@@ -202,7 +202,7 @@ export class Tree {
     }
 
     const nodeToAdd = node;
-    Obj.change(this._tree, (obj) => {
+    Obj.update(this._tree, (obj) => {
       obj.nodes[nodeToAdd.id] = nodeToAdd;
       parent.children.splice(index ?? parent.children.length, 0, nodeToAdd.id);
     });
@@ -218,12 +218,12 @@ export class Tree {
       return undefined;
     }
 
-    Obj.change(this._tree, (obj) => {
+    Obj.update(this._tree, (obj) => {
       delete obj.nodes[node.id];
     });
     const idx = parent.children.findIndex((child) => child === id);
     if (idx !== -1) {
-      Obj.change(this._tree, () => {
+      Obj.update(this._tree, () => {
         parent.children.splice(idx, 1);
       });
     }
@@ -242,7 +242,7 @@ export class Tree {
     }
 
     const child = node.children[from];
-    Obj.change(this._tree, () => {
+    Obj.update(this._tree, () => {
       node.children.splice(from, 1);
       node.children.splice(to, 0, child);
     });
@@ -264,7 +264,7 @@ export class Tree {
     }
 
     const previous = this.getNode(parent.children[idx - 1]);
-    Obj.change(this._tree, () => {
+    Obj.update(this._tree, () => {
       parent.children.splice(idx, 1);
       previous.children.push(node.id);
     });
@@ -287,19 +287,19 @@ export class Tree {
     // Remove node from parent and get following siblings.
     const nodeIdx = parent.children.findIndex((id) => id === node.id);
     let rest: Key.ObjectId[] = [];
-    Obj.change(this._tree, () => {
+    Obj.update(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);
-    Obj.change(this._tree, () => {
+    Obj.update(this._tree, () => {
       ancestor.children.splice(parentIdx + 1, 0, node.id);
     });
 
     // Transplant following siblings to current node.
-    Obj.change(this._tree, () => {
+    Obj.update(this._tree, () => {
       node.children.push(...rest);
     });
   }

package/src/containers/ExplorerContainer/ExplorerContainer.tsx

@@ -5,25 +5,22 @@
 import React, { useCallback, useMemo, useState } from 'react';
 
 import { type AppSurface } from '@dxos/app-toolkit/ui';
-import { type Filter } from '@dxos/echo';
-import { type View } from '@dxos/echo';
+import { type Filter, Obj, type View } from '@dxos/echo';
 import { QueryBuilder } from '@dxos/echo-query';
-import { useGlobalSearch } from '@dxos/plugin-search';
-import { getSpace, useObject } from '@dxos/react-client/echo';
+import { useObject } from '@dxos/react-client/echo';
 import { Panel, Toolbar } from '@dxos/react-ui';
 import { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';
 
-import { D3ForceGraph } from '#components';
+import { ForceGraph } from '#components';
 import { useGraphModel } from '#hooks';
 
 export type ExplorerContainerProps = AppSurface.ObjectArticleProps<View.View>;
 
-export const ExplorerContainer = ({ role, subject: view, attendableId: _attendableId }: ExplorerContainerProps) => {
-  useObject(view);
-  const space = view && getSpace(view);
+export const ExplorerContainer = ({ role, subject, attendableId: _attendableId }: ExplorerContainerProps) => {
+  const [view] = useObject(subject);
+  const db = view && Obj.getDatabase(view);
   const [filter, setFilter] = useState<Filter.Any>();
-  const model = useGraphModel(space, filter);
-  const { match } = useGlobalSearch();
+  const model = useGraphModel(db, filter);
 
   const builder = useMemo(() => new QueryBuilder(), []);
   const handleChange = useCallback<NonNullable<QueryEditorProps['onChange']>>((value) => {
@@ -32,7 +29,7 @@ export const ExplorerContainer = ({ role, subject: view, attendableId: _attendab
 
   const showToolbar = role === 'article';
 
-  if (!space || !model) {
+  if (!db || !model) {
     return null;
   }
 
@@ -41,12 +38,12 @@ export const ExplorerContainer = ({ role, subject: view, attendableId: _attendab
       {showToolbar && (
         <Panel.Toolbar asChild>
           <Toolbar.Root>
-            <QueryEditor db={space.db} onChange={handleChange} />
+            <QueryEditor db={db} onChange={handleChange} />
           </Toolbar.Root>
         </Panel.Toolbar>
       )}
       <Panel.Content asChild>
-        <D3ForceGraph model={model} match={match} />
+        <ForceGraph model={model} />
       </Panel.Content>
     </Panel.Root>
   );

package/src/hooks/useGraphModel.ts

@@ -6,38 +6,42 @@ import { useEffect, useState } from 'react';
 
 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 { type Database, type Entity, type Filter } from '@dxos/echo';
 import { SpaceGraphModel, type SpaceGraphModelOptions } from '@dxos/schema';
 
 // TODO(burdon): Factor out.
 export const useGraphModel = (
-  space: Space | undefined,
+  db: Database.Database | undefined,
   filter?: Filter.Any | undefined,
   options?: SpaceGraphModelOptions,
-  queue?: Queue,
+  items?: readonly Entity.Unknown[],
 ): SpaceGraphModel | undefined => {
   const registry = useCapability(Capabilities.AtomRegistry);
   const [model, setModel] = useState<SpaceGraphModel | undefined>(undefined);
 
   useEffect(() => {
-    if (!space) {
+    if (!db) {
       setModel(undefined);
       return;
     }
 
     const newModel = new SpaceGraphModel(registry);
-    void newModel.open(space.db, queue);
+    void newModel.open(db);
     setModel(newModel);
 
     return () => {
       setModel(undefined);
       void newModel.close();
     };
-  }, [space, registry, queue]);
+  }, [db, registry]);
 
   useEffect(() => {
     model?.setFilter(filter).setOptions(options);
   }, [model, filter, options]);
 
+  useEffect(() => {
+    model?.setItems(items);
+  }, [model, items]);
+
   return model;
 };

package/src/index.ts

@@ -2,8 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './components';
-export * from './hooks';
 export * from './meta';
-
-export * from './ExplorerPlugin';
+export * from './types';