@dxos/plugin-explorer 0.8.0 → 0.8.1-main.ae460ac

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

@@ -4,100 +4,36 @@
 
 import { forceLink, forceManyBody } from 'd3';
 import ForceGraph from 'force-graph';
-import React, { type FC, useEffect, useMemo, useRef, useState } from 'react';
+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 { useAsyncState, useThemeContext } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-import '@dxos/gem-spore/styles';
+import { useAsyncState } from '@dxos/react-ui';
 
-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;
-  svg?: boolean;
 };
 
-export const Graph: FC<GraphProps> = ({ space, match, grid, svg }) => {
-  const { themeMode } = useThemeContext();
-  const [selected, setSelected] = useState<string>();
+export const Graph: FC<GraphProps> = ({ space, match }) => {
+  const { ref, width, height } = useResizeDetector({ refreshRate: 200 });
+  const rootRef = useRef<HTMLDivElement>(null);
+  const forceGraph = useRef<ForceGraph>();
 
   const [model] = useAsyncState(
     async () => (space ? new SpaceGraphModel({ schema: true }).open(space) : undefined),
     [space],
   );
 
-  const context = createSvgContext();
-  const projector = useMemo(
-    () =>
-      new GraphForceProjector<EchoGraphNode>(context, {
-        forces: {
-          manyBody: {
-            strength: -100,
-          },
-          link: {
-            distance: 100,
-          },
-          radial: {
-            radius: 150,
-            strength: 0.05,
-          },
-        },
-        attributes: {
-          radius: (node: GraphLayoutNode<EchoGraphNode>) => (node.data?.type === 'schema' ? 12 : 8),
-        },
-      }),
-    [],
-  );
-
   const filteredRef = useRef<SearchResult[]>();
   filteredRef.current = filterObjectsSync(model?.objects ?? [], match);
-  useEffect(() => {
-    void projector.start();
-  }, [match]);
-
-  const [colorMap] = useState(new Map<string, string>());
-
-  // https://github.com/vasturiano/force-graph
-  const { ref, width, height } = useResizeDetector();
-  const rootRef = useRef<HTMLDivElement>(null);
-  const forceGraph = useRef<ForceGraph>();
 
   useEffect(() => {
     if (rootRef.current) {
+      // https://github.com/vasturiano/force-graph
       forceGraph.current = new ForceGraph(rootRef.current)
         .nodeRelSize(6)
         .nodeLabel((node: any) => {
@@ -117,7 +53,6 @@ export const Graph: FC<GraphProps> = ({ space, match, grid, svg }) => {
     };
   }, []);
 
-  // Update.
   useEffect(() => {
     if (forceGraph.current && width && height && model) {
       forceGraph.current
@@ -125,7 +60,7 @@ export const Graph: FC<GraphProps> = ({ space, match, grid, svg }) => {
         .width(width)
         .height(height)
         .onEngineStop(() => {
-          forceGraph.current?.zoomToFit(400, 40);
+          handleZoomToFit();
         })
 
         // https://github.com/vasturiano/force-graph?tab=readme-ov-file#force-engine-d3-force-configuration
@@ -134,11 +69,10 @@ export const Graph: FC<GraphProps> = ({ space, match, grid, svg }) => {
         .d3Force('charge', forceManyBody().strength(-30))
         // .d3AlphaDecay(0.0228)
         // .d3VelocityDecay(0.4)
-        .warmupTicks(100)
-        // .cooldownTime(1000)
 
-        //
         .graphData(model.graph)
+        .warmupTicks(100)
+        .cooldownTime(1000)
         .resumeAnimation();
     }
   }, [model, width, height]);
@@ -147,70 +81,9 @@ export const Graph: FC<GraphProps> = ({ space, match, grid, svg }) => {
     forceGraph.current?.zoomToFit(400, 40);
   };
 
-  if (!svg) {
-    return (
-      <div ref={ref} className='relative grow' onClick={handleZoomToFit}>
-        <div ref={rootRef} className='absolute inset-0' />
-      </div>
-    );
-  }
-
-  if (selected) {
-    return <Tree space={space} selected={selected} variant='tidy' onNodeClick={() => setSelected(undefined)} />;
-  }
-
   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

@@ -21,6 +21,8 @@ export type SpaceGraphModelOptions = {
   schema?: boolean;
 };
 
+// TODO(burdon): Convert to common/graph.
+
 type SchemaGraphNode = {
   id: string;
   type: 'schema';

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;