@dxos/plugin-explorer 0.8.0 → 0.8.1-main.013e445

package/src/components/Graph/Graph.tsx

@@ -4,100 +4,37 @@
 
 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
+      // https://github.com/vasturiano/3d-force-graph
       forceGraph.current = new ForceGraph(rootRef.current)
         .nodeRelSize(6)
         .nodeLabel((node: any) => {
@@ -117,7 +54,6 @@ export const Graph: FC<GraphProps> = ({ space, match, grid, svg }) => {
     };
   }, []);
 
-  // Update.
   useEffect(() => {
     if (forceGraph.current && width && height && model) {
       forceGraph.current
@@ -125,7 +61,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 +70,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 +82,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/Tree.stories.tsx

@@ -7,59 +7,26 @@ import '@dxos-theme';
 import { type Meta } from '@storybook/react';
 import React, { type FC, useEffect, useState } from 'react';
 
-import { create, makeRef } from '@dxos/live-object';
-import { TreeItemType, TreeType } from '@dxos/plugin-outliner/types';
+import { TreeType, Tree as TreeModel } from '@dxos/plugin-outliner/types';
 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 { range } from '@dxos/util';
 
 import { Tree, type TreeComponentProps } from './Tree';
 
 // TODO(burdon): Storybook for Graph/Tree/Plot (generics); incl. GraphModel.
 // TODO(burdon): Type for all Explorer components (Space, Object, Query, etc.) incl.
-// TODO(burdon): Factor out to gem?
 
 faker.seed(1);
 
-const makeTreeItems = <T extends number>(count: T, items: TreeItemType[] = []) => {
-  return range(count, () => create(TreeItemType, { content: '', items: items.map((item) => makeRef(item)) }));
-};
-
 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 = create(TreeType, {
-        root: makeRef(
-          makeTreeItems(1, [
-            ...makeTreeItems(7),
-            ...makeTreeItems(1, [
-              ...makeTreeItems(1),
-              ...makeTreeItems(1, [
-                ...makeTreeItems(3),
-                ...makeTreeItems(1, makeTreeItems(2)),
-                ...makeTreeItems(2),
-                ...makeTreeItems(1, makeTreeItems(2)),
-                ...makeTreeItems(2),
-              ]),
-              ...makeTreeItems(1),
-            ]),
-            ...makeTreeItems(2),
-            ...makeTreeItems(1, [
-              ...makeTreeItems(1),
-              ...makeTreeItems(1, [...makeTreeItems(2), ...makeTreeItems(1, makeTreeItems(2))]),
-              ...makeTreeItems(1),
-            ]),
-            ...makeTreeItems(2),
-          ])[0],
-        ),
-      });
-
-      space.db.add(tree);
+      const tree = space.db.add(TreeModel.create());
       setObject(tree);
     });
   }, []);
@@ -92,7 +59,7 @@ export const Edge = {
 const meta: Meta = {
   title: 'plugins/plugin-explorer/Tree',
   component: Tree,
-  render: () => <ClientRepeater component={Story} types={[TreeType, TreeItemType]} createSpace />,
+  render: () => <ClientRepeater component={Story} types={[TreeType]} createSpace />,
   decorators: [withTheme, withLayout({ fullscreen: true })],
   parameters: {
     layout: 'fullscreen',

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;

package/src/meta.ts

@@ -6,7 +6,7 @@ import { type PluginMeta } from '@dxos/app-framework';
 
 export const EXPLORER_PLUGIN = 'dxos.org/plugin/explorer';
 
-export const meta = {
+export const meta: PluginMeta = {
   id: EXPLORER_PLUGIN,
   name: 'Explorer',
   description: 'Install this plugin to view a hypergraph of all objects inside of your Space.',
@@ -14,4 +14,4 @@ export const meta = {
   source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/experimental/plugin-explorer',
   tags: ['experimental'],
   screenshots: ['https://dxos.network/plugin-details-explorer-dark.png'],
-} satisfies PluginMeta;
+};

package/src/translations.ts

@@ -10,12 +10,11 @@ export default [
     'en-US': {
       [ViewType.typename]: {
         'typename label': 'Explorer',
+        'object name placeholder': 'New explorer',
       },
       [EXPLORER_PLUGIN]: {
         'plugin name': 'Explorer',
         'object title label': 'Title',
-        'object title placeholder': 'New explorer',
-        'create object label': 'Create explorer',
       },
     },
   },

package/dist/lib/browser/chunk-QOKAZK4V.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const EXPLORER_PLUGIN = 'dxos.org/plugin/explorer';\n\nexport const meta = {\n  id: EXPLORER_PLUGIN,\n  name: 'Explorer',\n  description: 'Install this plugin to view a hypergraph of all objects inside of your Space.',\n  icon: 'ph--graph--regular',\n  source: 'https://github.com/dxos/dxos/tree/main/packages/plugins/experimental/plugin-explorer',\n  tags: ['experimental'],\n  screenshots: ['https://dxos.network/plugin-details-explorer-dark.png'],\n} satisfies PluginMeta;\n"],
-  "mappings": ";AAMO,IAAMA,kBAAkB;AAExB,IAAMC,OAAO;EAClBC,IAAIF;EACJG,MAAM;EACNC,aAAa;EACbC,MAAM;EACNC,QAAQ;EACRC,MAAM;IAAC;;EACPC,aAAa;IAAC;;AAChB;",
-  "names": ["EXPLORER_PLUGIN", "meta", "id", "name", "description", "icon", "source", "tags", "screenshots"]
-}