@dxos/plugin-explorer 0.7.5-main.b19bfc8 → 0.7.5-main.d9d2d4e

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-explorer",
-  "version": "0.7.5-main.b19bfc8",
+  "version": "0.7.5-main.d9d2d4e",
   "description": "Braneframe data visualization plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -37,25 +37,26 @@
     "@observablehq/plot": "^0.6.11",
     "@preact/signals-core": "^1.6.0",
     "d3": "^7.9.0",
+    "force-graph": "1.49.3",
     "lodash.defaultsdeep": "^4.6.1",
     "lodash.get": "^4.4.2",
     "react-resize-detector": "^11.0.1",
     "topojson-client": "^3.1.0",
-    "@dxos/app-framework": "0.7.5-main.b19bfc8",
-    "@dxos/async": "0.7.5-main.b19bfc8",
-    "@dxos/echo-schema": "0.7.5-main.b19bfc8",
-    "@dxos/gem-core": "0.7.5-main.b19bfc8",
-    "@dxos/client": "0.7.5-main.b19bfc8",
-    "@dxos/gem-spore": "0.7.5-main.b19bfc8",
-    "@dxos/live-object": "0.7.5-main.b19bfc8",
-    "@dxos/log": "0.7.5-main.b19bfc8",
-    "@dxos/plugin-client": "0.7.5-main.b19bfc8",
-    "@dxos/plugin-search": "0.7.5-main.b19bfc8",
-    "@dxos/plugin-space": "0.7.5-main.b19bfc8",
-    "@dxos/react-client": "0.7.5-main.b19bfc8",
-    "@dxos/plugin-graph": "0.7.5-main.b19bfc8",
-    "@dxos/react-ui-stack": "0.7.5-main.b19bfc8",
-    "@dxos/util": "0.7.5-main.b19bfc8"
+    "@dxos/app-framework": "0.7.5-main.d9d2d4e",
+    "@dxos/client": "0.7.5-main.d9d2d4e",
+    "@dxos/async": "0.7.5-main.d9d2d4e",
+    "@dxos/echo-schema": "0.7.5-main.d9d2d4e",
+    "@dxos/gem-spore": "0.7.5-main.d9d2d4e",
+    "@dxos/gem-core": "0.7.5-main.d9d2d4e",
+    "@dxos/live-object": "0.7.5-main.d9d2d4e",
+    "@dxos/log": "0.7.5-main.d9d2d4e",
+    "@dxos/plugin-graph": "0.7.5-main.d9d2d4e",
+    "@dxos/plugin-search": "0.7.5-main.d9d2d4e",
+    "@dxos/plugin-client": "0.7.5-main.d9d2d4e",
+    "@dxos/plugin-space": "0.7.5-main.d9d2d4e",
+    "@dxos/react-client": "0.7.5-main.d9d2d4e",
+    "@dxos/util": "0.7.5-main.d9d2d4e",
+    "@dxos/react-ui-stack": "0.7.5-main.d9d2d4e"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -70,19 +71,19 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-generator": "0.7.5-main.b19bfc8",
-    "@dxos/plugin-outliner": "0.7.5-main.b19bfc8",
-    "@dxos/random": "0.7.5-main.b19bfc8",
-    "@dxos/react-ui": "0.7.5-main.b19bfc8",
-    "@dxos/react-ui-theme": "0.7.5-main.b19bfc8",
-    "@dxos/storybook-utils": "0.7.5-main.b19bfc8"
+    "@dxos/echo-generator": "0.7.5-main.d9d2d4e",
+    "@dxos/plugin-outliner": "0.7.5-main.d9d2d4e",
+    "@dxos/random": "0.7.5-main.d9d2d4e",
+    "@dxos/react-ui": "0.7.5-main.d9d2d4e",
+    "@dxos/storybook-utils": "0.7.5-main.d9d2d4e",
+    "@dxos/react-ui-theme": "0.7.5-main.d9d2d4e"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.7.5-main.b19bfc8",
-    "@dxos/react-ui-theme": "0.7.5-main.b19bfc8"
+    "@dxos/react-ui": "0.7.5-main.d9d2d4e",
+    "@dxos/react-ui-theme": "0.7.5-main.d9d2d4e"
   },
   "publishConfig": {
     "access": "public"

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

@@ -47,8 +47,6 @@ const Story = () => {
   return <Graph space={space} />;
 };
 
-export const Default = {};
-
 const meta: Meta = {
   title: 'plugins/plugin-explorer/Graph',
   component: Graph,
@@ -60,3 +58,5 @@ const meta: Meta = {
 };
 
 export default meta;
+
+export const Default = {};

package/src/components/Graph/Graph.tsx

@@ -2,148 +2,88 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type FC, useEffect, useMemo, useRef, useState } from 'react';
+import { forceLink, forceManyBody } from 'd3';
+import ForceGraph from 'force-graph';
+import React, { type FC, useEffect, useRef } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
 
-import { getTypename, type ReactiveEchoObject, type Space } from '@dxos/client/echo';
-import { createSvgContext, defaultGridStyles, Grid, SVG, SVGRoot, Zoom } from '@dxos/gem-core';
-import {
-  defaultStyles,
-  Graph as GraphComponent,
-  GraphForceProjector,
-  type GraphLayoutNode,
-  Markers,
-} from '@dxos/gem-spore';
+import { type Space } from '@dxos/client/echo';
 import { filterObjectsSync, type SearchResult } from '@dxos/plugin-search';
-import { useThemeContext } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { useAsyncState } from '@dxos/react-ui';
 
-import '@dxos/gem-spore/styles';
-
-import { type EchoGraphNode, SpaceGraphModel } from './graph-model';
-import { Tree } from '../Tree';
-
-type Slots = {
-  root?: { className?: string };
-  grid?: { className?: string };
-};
-
-const slots: Slots = {};
-
-const colors = [
-  '[&>circle]:!fill-black-300   [&>circle]:!stroke-black-600',
-  '[&>circle]:!fill-slate-300   [&>circle]:!stroke-slate-600',
-  '[&>circle]:!fill-green-300   [&>circle]:!stroke-green-600',
-  '[&>circle]:!fill-sky-300     [&>circle]:!stroke-sky-600',
-  '[&>circle]:!fill-cyan-300    [&>circle]:!stroke-cyan-600',
-  '[&>circle]:!fill-rose-300    [&>circle]:!stroke-rose-600',
-  '[&>circle]:!fill-purple-300  [&>circle]:!stroke-purple-600',
-  '[&>circle]:!fill-orange-300  [&>circle]:!stroke-orange-600',
-  '[&>circle]:!fill-teal-300    [&>circle]:!stroke-teal-600',
-  '[&>circle]:!fill-indigo-300  [&>circle]:!stroke-indigo-600',
-];
+import { SpaceGraphModel } from './graph-model';
 
 export type GraphProps = {
   space: Space;
   match?: RegExp;
-  grid?: boolean;
 };
 
-export const Graph: FC<GraphProps> = ({ space, match, grid }) => {
-  const model = useMemo(() => (space ? new SpaceGraphModel({ schema: true }).open(space) : undefined), [space]);
-  const [selected, setSelected] = useState<string>();
-  const { themeMode } = useThemeContext();
+export const Graph: FC<GraphProps> = ({ space, match }) => {
+  const { ref, width, height } = useResizeDetector({ refreshRate: 200 });
+  const rootRef = useRef<HTMLDivElement>(null);
+  const forceGraph = useRef<ForceGraph>();
 
-  const context = createSvgContext();
-  const projector = useMemo(
-    () =>
-      new GraphForceProjector<EchoGraphNode>(context, {
-        forces: {
-          manyBody: {
-            strength: -100,
-          },
-          link: {
-            distance: 120,
-          },
-          radial: {
-            radius: 150,
-            strength: 0.05,
-          },
-        },
-        attributes: {
-          radius: (node: GraphLayoutNode<EchoGraphNode>) => (node.data?.type === 'schema' ? 12 : 8),
-        },
-      }),
-    [],
+  const [model] = useAsyncState(
+    async () => (space ? new SpaceGraphModel({ schema: true }).open(space) : undefined),
+    [space],
   );
 
   const filteredRef = useRef<SearchResult[]>();
   filteredRef.current = filterObjectsSync(model?.objects ?? [], match);
-  useEffect(() => {
-    void projector.start();
-  }, [match]);
 
-  const [colorMap] = useState(new Map<string, string>());
-
-  if (!model) {
-    return null;
-  }
+  useEffect(() => {
+    if (rootRef.current) {
+      // https://github.com/vasturiano/force-graph
+      forceGraph.current = new ForceGraph(rootRef.current)
+        .nodeRelSize(6)
+        .nodeLabel((node: any) => {
+          if (node.type === 'schema') {
+            return node.data.typename;
+          }
+
+          return node.id;
+        })
+        .nodeAutoColorBy((node: any) => (node.type === 'schema' ? 'schema' : node.data.typename))
+        .linkColor(() => 'rgba(255,255,255,0.25)');
+    }
+
+    return () => {
+      forceGraph.current?.pauseAnimation().graphData({ nodes: [], links: [] });
+      forceGraph.current = undefined;
+    };
+  }, []);
 
-  if (selected) {
-    return <Tree space={space} selected={selected} variant='tidy' onNodeClick={() => setSelected(undefined)} />;
-  }
+  useEffect(() => {
+    if (forceGraph.current && width && height && model) {
+      forceGraph.current
+        .pauseAnimation()
+        .width(width)
+        .height(height)
+        .onEngineStop(() => {
+          handleZoomToFit();
+        })
+
+        // 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))
+        // .d3AlphaDecay(0.0228)
+        // .d3VelocityDecay(0.4)
+
+        .graphData(model.graph)
+        .warmupTicks(100)
+        .cooldownTime(1000)
+        .resumeAnimation();
+    }
+  }, [model, width, height]);
+
+  const handleZoomToFit = () => {
+    forceGraph.current?.zoomToFit(400, 40);
+  };
 
   return (
-    <SVGRoot context={context}>
-      <SVG className={mx(defaultStyles, slots?.root?.className)}>
-        <Markers arrowSize={6} />
-        {grid && <Grid className={slots?.grid?.className ?? defaultGridStyles(themeMode)} />}
-        <Zoom extent={[1 / 2, 4]}>
-          <GraphComponent
-            model={model}
-            projector={projector}
-            drag
-            arrows
-            onSelect={(node) => setSelected(node?.data?.id)}
-            labels={{
-              text: (node: GraphLayoutNode<ReactiveEchoObject<any>>) => {
-                if (filteredRef.current?.length && !filteredRef.current.some((object) => object.id === node.data?.id)) {
-                  return undefined;
-                }
-
-                // TODO(burdon): Use schema.
-                return node.data?.label ?? node.data?.title ?? node.data?.name ?? node.data?.id.slice(0, 8);
-              },
-            }}
-            attributes={{
-              node: (node: GraphLayoutNode<ReactiveEchoObject<any>>) => {
-                let className: string | undefined;
-                if (node.data) {
-                  const { object } = node.data;
-                  if (object) {
-                    const typename = getTypename(object);
-                    if (typename) {
-                      className = colorMap.get(typename);
-                      if (!className) {
-                        className = colors[colorMap.size % colors.length];
-                        colorMap.set(typename, className);
-                      }
-                    }
-                  }
-                }
-
-                const selected = filteredRef.current?.some((object) => object.id === node.data?.id);
-                const blur = !selected && !!filteredRef.current?.length;
-                return {
-                  class: mx(className, blur && 'opacity-70'),
-                };
-              },
-              link: () => ({
-                class: '[&>path]:!stroke-neutral-300 dark:[&>path]:!stroke-neutral-700',
-              }),
-            }}
-          />
-        </Zoom>
-      </SVG>
-    </SVGRoot>
+    <div ref={ref} className='relative grow' onClick={handleZoomToFit}>
+      <div ref={rootRef} className='absolute inset-0' />
+    </div>
   );
 };

package/src/components/Graph/graph-model.ts

@@ -2,26 +2,37 @@
 // Copyright 2023 DXOS.org
 //
 
-import { AST, EchoSchema, ReferenceAnnotationId, type S, SchemaValidator, StoredSchema } from '@dxos/echo-schema';
-import { type GraphData, type GraphLink, GraphModel } from '@dxos/gem-spore';
+import { type UnsubscribeCallback } from '@dxos/async';
+import {
+  getSchema,
+  getSchemaDXN,
+  AST,
+  type EchoSchema,
+  ReferenceAnnotationId,
+  SchemaValidator,
+  StoredSchema,
+} from '@dxos/echo-schema';
+import { type GraphData, GraphModel } from '@dxos/gem-spore';
 import { log } from '@dxos/log';
 import { CollectionType } from '@dxos/plugin-space/types';
-import { type ReactiveEchoObject, type Space, type Subscription, getSchema, getType } from '@dxos/react-client/echo';
+import { Filter, type ReactiveEchoObject, type Space, type Subscription } from '@dxos/react-client/echo';
 
 export type SpaceGraphModelOptions = {
   schema?: boolean;
 };
 
+// TODO(burdon): Convert to common/graph.
+
 type SchemaGraphNode = {
   id: string;
   type: 'schema';
-  schema: S.Schema<any>;
+  data: { typename: string };
 };
 
 type ObjectGraphNode = {
   id: string;
   type: 'object';
-  object: ReactiveEchoObject<any>;
+  data: { typename: string; object: ReactiveEchoObject<any> };
 };
 
 export type EchoGraphNode = SchemaGraphNode | ObjectGraphNode;
@@ -35,8 +46,10 @@ export class SpaceGraphModel extends GraphModel<EchoGraphNode> {
     links: [],
   };
 
-  private _subscription?: Subscription;
+  private _schema?: EchoSchema[];
+  private _schemaSubscription?: UnsubscribeCallback;
   private _objects?: ReactiveEchoObject<any>[];
+  private _objectsSubscription?: Subscription;
 
   constructor(private readonly _options: SpaceGraphModelOptions = {}) {
     super();
@@ -50,80 +63,119 @@ export class SpaceGraphModel extends GraphModel<EchoGraphNode> {
     return this._objects ?? [];
   }
 
-  open(space: Space, objectId?: string) {
-    if (!this._subscription) {
-      // TODO(burdon): Filter.
-      const query = space.db.query((object: ReactiveEchoObject<any>) => !(object instanceof CollectionType));
-
-      this._subscription = query.subscribe(
-        ({ objects }) => {
-          this._objects = objects;
-
-          // TODO(burdon): Normalize schema.
-          this._graph.nodes = objects.map((object) => {
-            if (object instanceof StoredSchema) {
-              const effectSchema = space.db.schemaRegistry.getSchemaById(object.id)!;
-              return { type: 'schema', id: object.id, schema: effectSchema.schema };
-            }
-
-            return { type: 'object', id: object.id, object };
-          });
-
-          this._graph.links = objects.reduce<GraphLink[]>((links, object) => {
-            const objectSchema = getSchema(object);
-            const typename = getType(object)?.objectId;
-            if (objectSchema == null || typename == null) {
-              log.info('no schema for object:', { id: object.id.slice(0, 8) });
-              return links;
-            }
-
-            if (!(objectSchema instanceof EchoSchema)) {
-              const idx = objects.findIndex((obj) => obj.id === typename);
-              if (idx === -1) {
+  // TODO(burdon): Alternative diagram types:
+  // - https://observablehq.com/@d3/radial-tree/2
+  // - https://observablehq.com/@d3/disjoint-force-directed-graph/2
+  // - https://observablehq.com/@mbostock/tadpoles
+  // - https://observablehq.com/@d3/psr-b1919-21
+  // - https://vasturiano.github.io/react-force-graph/example/basic (3D)
+
+  async open(space: Space, objectId?: string) {
+    // TODO(burdon): Factor out graph builder to lib (use common/graph abstraction).
+    if (!this._schemaSubscription) {
+      // TODO(burdon): Normalize unsubscribe callbacks and merge handlers.
+      // TODO(burdon): Trigger initial subscription update.
+      // TODO(burdon): Normalize subscription cb for objects, schema, etc.
+
+      const schemaaQuery = space.db.schemaRegistry.query({});
+      const schemas = await schemaaQuery.run();
+      const onSchemaUpdate = ({ results }: { results: EchoSchema[] }) => (this._schema = results);
+      this._schemaSubscription = schemaaQuery.subscribe(onSchemaUpdate);
+      onSchemaUpdate({ results: schemas });
+
+      this._objectsSubscription = space.db
+        // TODO(burdon): ERROR: Cannot mix type and or filters.
+        .query(Filter.not(Filter.or(Filter.schema(StoredSchema), Filter.schema(CollectionType))))
+        .subscribe(
+          ({ objects }) => {
+            this._objects = objects;
+
+            // Merge with current nodes.
+            const currentNodes = this._graph.nodes;
+
+            this._graph.nodes = [];
+            this._graph.links = [];
+
+            const addSchema = (typename: string) => {
+              const current = currentNodes.find((node) => node.id === typename);
+              if (typename) {
                 this._graph.nodes.push({
+                  ...current,
                   id: typename,
                   type: 'schema',
-                  schema: objectSchema,
+                  data: { typename },
                 });
               }
-            }
-
-            // Link to schema.
-            if (this._options.schema) {
-              links.push({
-                id: `${object.id}-${typename}`,
-                source: object.id,
-                target: typename,
-              });
-            }
-
-            // Parse schema to follow referenced objects.
-            AST.getPropertySignatures(objectSchema.ast).forEach((prop) => {
-              if (!SchemaValidator.hasTypeAnnotation(objectSchema, prop.name.toString(), ReferenceAnnotationId)) {
-                return;
+            };
+
+            // Runtime schema.
+            space.db.graph.schemaRegistry.schemas.forEach((schema) => {
+              const typename = getSchemaDXN(schema)?.toTypename();
+              if (typename) {
+                addSchema(typename);
+              }
+            });
+
+            // Database Schema.
+            this._schema?.forEach((schema) => {
+              const typename = getSchemaDXN(schema)?.toTypename();
+              if (typename) {
+                addSchema(typename);
               }
-              const value = object[String(prop.name)];
-              if (value) {
-                const refs = Array.isArray(value) ? value : [value];
-                for (const ref of refs) {
-                  if (objects.findIndex((obj) => obj.id === ref.id) !== -1) {
-                    links.push({
-                      id: `${object.id}-${String(prop.name)}-${ref.id}`,
+            });
+
+            // Database Objects.
+            this._objects.forEach((object) => {
+              const schema = getSchema(object);
+              if (schema) {
+                const typename = getSchemaDXN(schema)?.toTypename();
+                if (typename) {
+                  const current = currentNodes.find((node) => node.id === object.id);
+                  this._graph.nodes.push({ ...current, id: object.id, type: 'object', data: { typename, object } });
+
+                  // Link to schema.
+                  const schemaNode = this._graph.nodes.find(
+                    (node) => node.type === 'schema' && node.data.typename === typename,
+                  );
+                  if (schemaNode) {
+                    this._graph.links.push({
+                      id: `${object.id}-${schemaNode.id}`,
                       source: object.id,
-                      target: ref.id,
+                      target: schemaNode.id,
                     });
+                  } else {
+                    log.info('schema node not found', { typename });
                   }
+
+                  // Link ot refs.
+                  // TODO(burdon): This isn't working.
+                  AST.getPropertySignatures(schema.ast).forEach((prop) => {
+                    if (!SchemaValidator.hasTypeAnnotation(schema, prop.name.toString(), ReferenceAnnotationId)) {
+                      return;
+                    }
+
+                    const value = object[String(prop.name)];
+                    if (value) {
+                      const refs = Array.isArray(value) ? value : [value];
+                      for (const ref of refs) {
+                        if (objects.findIndex((obj) => obj.id === ref.id) !== -1) {
+                          this._graph.links.push({
+                            id: `${object.id}-${String(prop.name)}-${ref.id}`,
+                            source: object.id,
+                            target: ref.id,
+                          });
+                        }
+                      }
+                    }
+                  });
                 }
               }
             });
 
-            return links;
-          }, []);
-
-          this.triggerUpdate();
-        },
-        { fire: true },
-      );
+            this.triggerUpdate();
+          },
+          { fire: true },
+        );
     }
 
     this.setSelected(objectId);
@@ -131,10 +183,10 @@ export class SpaceGraphModel extends GraphModel<EchoGraphNode> {
   }
 
   close() {
-    if (this._subscription) {
-      this._subscription();
-      this._subscription = undefined;
-    }
+    this._schemaSubscription?.();
+    this._schemaSubscription = undefined;
+    this._objectsSubscription?.();
+    this._objectsSubscription = undefined;
 
     return this;
   }

package/src/components/Tree/Tree.tsx

@@ -2,11 +2,12 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
 import { type Space } from '@dxos/client/echo';
 import { createSvgContext, SVG, SVGRoot } from '@dxos/gem-core';
+import { useAsyncState } from '@dxos/react-ui';
 
 import { HierarchicalEdgeBundling, RadialTree, TidyTree } from './layout';
 import { mapGraphToTreeData, type TreeNode } from './types';
@@ -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 = useMemo(() => (space ? new SpaceGraphModel().open(space, selected) : undefined), [space, selected]);
+  const [model] = useAsyncState(
+    async () => (space ? new SpaceGraphModel().open(space, selected) : undefined),
+    [space, selected],
+  );
+
   const [tree, setTree] = useState<TreeNode>();
   useEffect(() => {
     return model?.subscribe(() => {

package/src/components/Tree/types.ts

@@ -2,7 +2,8 @@
 // Copyright 2023 DXOS.org
 //
 
-import type { GraphModel } from '@dxos/gem-spore';
+// TODO(burdon): Convert to common/graph.
+import { type GraphModel } from '@dxos/gem-spore';
 
 export type TreeNode = {
   id: string;