@dxos/plugin-explorer 0.8.3 → 0.8.4-main.03d5cd7b56

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

@@ -2,68 +2,82 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React from 'react';
 
-import { type Meta } from '@storybook/react';
-import React, { type FC, 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 { 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 { 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 { 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.
+import { TreeType } from './types';
 
-faker.seed(1);
+random.seed(1);
 
-const Story: FC<ClientRepeatedComponentProps & { type?: TreeComponentProps<any>['variant'] }> = ({ type }) => {
-  const client = useClient();
-  const space = client.spaces.default;
-  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} />;
+  return <Tree space={space} selected={tree.id} variant={variant} />;
 };
 
-export const Tidy = {
-  args: {
-    type: 'tidy',
+const meta = {
+  title: 'plugins/plugin-explorer/components/Tree',
+  component: Tree as any,
+  render: DefaultStory,
+  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',
   },
-};
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Radial = {
+export const Tidy: Story = {
   args: {
-    type: 'radial',
+    variant: 'tidy',
   },
 };
 
-export const Edge = {
+export const Radial: Story = {
   args: {
-    type: 'edge',
+    variant: 'radial',
   },
 };
 
-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 const Edge: Story = {
+  args: {
+    variant: 'edge',
   },
 };
-
-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.update(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

@@ -5,13 +5,13 @@
 import { describe, test } from 'vitest';
 
 import { Obj, Ref } from '@dxos/echo';
-import { faker } from '@dxos/random';
-import { DataType } from '@dxos/schema';
+import { random } from '@dxos/random';
+import { Task } from '@dxos/types';
 
-import { type Tree } from './tree';
 import { createTree } from '../testing';
+import { type Tree } from './tree';
 
-faker.seed(0);
+random.seed(0);
 
 const print = (tree: Tree) => {
   let count = 0;
@@ -123,11 +123,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.update(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 { Key, Obj, Ref, 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(Ref.Ref(TestSchema.Expando)),
 }).pipe(Schema.mutable);
 
 export interface TreeNodeType extends Schema.Schema.Type<typeof TreeNodeType> {}
@@ -22,8 +23,8 @@ export const TreeType = Schema.Struct({
   root: Key.ObjectId,
   nodes: Schema.mutable(Schema.Record({ key: Key.ObjectId, value: TreeNodeType })),
 }).pipe(
-  Type.Obj({
-    typename: 'dxos.org/type/Tree',
+  Type.object({
+    typename: 'org.dxos.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.update(this._tree, (obj) => {
+      obj.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.update(this._tree, (obj) => {
+      obj.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.update(this._tree, (obj) => {
+      delete obj.nodes[node.id];
+    });
     const idx = parent.children.findIndex((child) => child === id);
     if (idx !== -1) {
-      parent.children.splice(idx, 1);
+      Obj.update(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.update(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.update(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.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);
-    ancestor.children.splice(parentIdx + 1, 0, node.id);
+    Obj.update(this._tree, () => {
+      ancestor.children.splice(parentIdx + 1, 0, node.id);
+    });
 
     // Transplant following siblings to current node.
-    node.children.push(...rest);
+    Obj.update(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,10 +2,6 @@
 // Copyright 2023 DXOS.org
 //
 
-import { lazy } from 'react';
-
-export const ExplorerContainer = lazy(() => import('./ExplorerContainer'));
-
 export * from './Chart';
 export * from './Globe';
 export * from './Graph';

package/src/containers/ExplorerContainer/ExplorerContainer.tsx

@@ -0,0 +1,51 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+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 { QueryBuilder } from '@dxos/echo-query';
+import { getSpace, useObject } from '@dxos/react-client/echo';
+import { Panel, Toolbar } from '@dxos/react-ui';
+import { QueryEditor, type QueryEditorProps } from '@dxos/react-ui-components';
+
+import { ForceGraph } from '#components';
+import { useGraphModel } from '#hooks';
+
+export type ExplorerContainerProps = AppSurface.ObjectArticleProps<View.View>;
+
+export const ExplorerContainer = ({ role, subject, attendableId: _attendableId }: ExplorerContainerProps) => {
+  const [view] = useObject(subject);
+  const space = view && getSpace(view);
+  const [filter, setFilter] = useState<Filter.Any>();
+  const model = useGraphModel(space, filter);
+
+  const builder = useMemo(() => new QueryBuilder(), []);
+  const handleChange = useCallback<NonNullable<QueryEditorProps['onChange']>>((value) => {
+    setFilter(builder.build(value).filter);
+  }, []);
+
+  const showToolbar = role === 'article';
+
+  if (!space || !model) {
+    return null;
+  }
+
+  return (
+    <Panel.Root role={role}>
+      {showToolbar && (
+        <Panel.Toolbar asChild>
+          <Toolbar.Root>
+            <QueryEditor db={space.db} onChange={handleChange} />
+          </Toolbar.Root>
+        </Panel.Toolbar>
+      )}
+      <Panel.Content asChild>
+        <ForceGraph model={model} />
+      </Panel.Content>
+    </Panel.Root>
+  );
+};

package/src/containers/ExplorerContainer/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export { ExplorerContainer as default } from './ExplorerContainer';

package/src/containers/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type ComponentType, lazy } from 'react';
+
+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,24 +14,30 @@ 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) {
-      void model?.close();
       setModel(undefined);
       return;
     }
 
-    // TODO(burdon): Does this need to be a dependency?
-    if (!model) {
-      const model = new SpaceGraphModel().setFilter(filter).setOptions(options);
-      void model.open(space);
-      setModel(model);
-    } else {
-      model.setFilter(filter).setOptions(options);
-    }
-  }, [space, filter, options]);
+    const newModel = new SpaceGraphModel(registry);
+    void newModel.open(space.db, queue);
+    setModel(newModel);
+
+    return () => {
+      setModel(undefined);
+      void newModel.close();
+    };
+  }, [space, registry, queue]);
+
+  useEffect(() => {
+    model?.setFilter(filter).setOptions(options);
+  }, [model, filter, options]);
 
   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';

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: 'org.dxos.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'],

package/src/plugin.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { Plugin } from '@dxos/app-framework';
+
+import { meta } from './meta';
+
+export const ExplorerPlugin = Plugin.lazy(meta, () => import('#plugin'));

package/src/translations.ts

@@ -3,24 +3,31 @@
 //
 
 import { Type } from '@dxos/echo';
+import { type Resource } from '@dxos/react-ui';
+import { translations as componentsTranslations } from '@dxos/react-ui-components/translations';
 
-import { EXPLORER_PLUGIN } from './meta';
-import { ViewType } from './types';
+import { meta } from '#meta';
+import { Graph } from '#types';
 
-export default [
+export const translations = [
   {
     'en-US': {
-      [Type.getTypename(ViewType)]: {
-        'typename label': 'Explorer',
-        'typename label_zero': 'Explorers',
-        'typename label_one': 'Explorer',
-        'typename label_other': 'Explorers',
-        'object name placeholder': 'New explorer',
+      [Type.getTypename(Graph.Graph)]: {
+        'typename.label': 'Explorer',
+        'typename.label_zero': 'Explorers',
+        'typename.label_one': 'Explorer',
+        'typename.label_other': 'Explorers',
+        'object-name.placeholder': 'New explorer',
+        'add-object.label': 'Add explorer',
+        'rename-object.label': 'Rename explorer',
+        'delete-object.label': 'Delete explorer',
+        'object-deleted.label': 'Explorer deleted',
       },
-      [EXPLORER_PLUGIN]: {
-        'plugin name': 'Explorer',
-        'object title label': 'Title',
+      [meta.id]: {
+        'plugin.name': 'Explorer',
+        'object-title.label': 'Title',
       },
     },
   },
-];
+  ...componentsTranslations,
+] as const satisfies Resource[];

package/src/types/ExplorerAction.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import * as Schema from 'effect/Schema';
+
+import { TypeInputOptionsAnnotation } from '@dxos/plugin-space';
+
+export const GraphProps = Schema.Struct({
+  name: Schema.optional(Schema.String),
+  // TODO(wittjosiah): This should be a query input instead.
+  typename: Schema.String.pipe(
+    Schema.annotations({ title: 'Select type' }),
+    TypeInputOptionsAnnotation.set({
+      location: ['database', 'runtime'],
+      kind: ['user'],
+    }),
+    Schema.optional,
+  ),
+});