@dxos/plugin-explorer 0.8.0 → 0.8.1-main.303c73a

package/dist/types/src/components/Tree/Tree.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { type Space } from '@dxos/client/echo';
 export type LayoutVariant = 'tidy' | 'radial' | 'edge';
 export type TreeLayoutSlots = {
@@ -22,5 +23,5 @@ export type TreeComponentProps<N = unknown> = {
     variant?: LayoutVariant;
     onNodeClick?: (node?: N) => void;
 };
-export declare const Tree: <N>({ space, selected, variant, onNodeClick }: TreeComponentProps<N>) => import("react/jsx-runtime").JSX.Element;
+export declare const Tree: <N>({ space, selected, variant, onNodeClick }: TreeComponentProps<N>) => React.JSX.Element;
 //# sourceMappingURL=Tree.d.ts.map

package/dist/types/src/components/Tree/Tree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/Tree.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAa/C,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAGvD,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,MAAM,CAAC;IAE1B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,eAIpC,CAAC;AAQF,MAAM,MAAM,kBAAkB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC5C,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;CAClC,CAAC;AAGF,eAAO,MAAM,IAAI,GAAI,CAAC,6CAAuD,kBAAkB,CAAC,CAAC,CAAC,4CAiDjG,CAAC"}
+{"version":3,"file":"Tree.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/Tree.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAa/C,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;AAGvD,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,MAAM,CAAC;IAE1B,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,CAAC,CAAC,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,eAIpC,CAAC;AAQF,MAAM,MAAM,kBAAkB,CAAC,CAAC,GAAG,OAAO,IAAI;IAC5C,KAAK,EAAE,KAAK,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;CAClC,CAAC;AAGF,eAAO,MAAM,IAAI,GAAI,CAAC,6CAAuD,kBAAkB,CAAC,CAAC,CAAC,sBAiDjG,CAAC"}

package/dist/types/src/components/Tree/types.d.ts

@@ -1,4 +1,4 @@
-import type { GraphModel } from '@dxos/gem-spore';
+import { type GraphModel } from '@dxos/gem-spore';
 export type TreeNode = {
     id: string;
     label?: string;

package/dist/types/src/components/Tree/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/types.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,wBAAiB,QAAQ,GAAG,SA0BrF,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/components/Tree/types.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,CAAC,SAAS,UAAU,CAAC,CAAC,CAAC,wBAAiB,QAAQ,GAAG,SA0BrF,CAAC"}

package/dist/types/src/components/index.d.ts

@@ -1,7 +1,7 @@
 export declare const ExplorerContainer: import("react").LazyExoticComponent<({ view, role }: {
     view: import("../types").ViewType;
     role: string;
-}) => import("react/jsx-runtime").JSX.Element | null>;
+}) => import("react").JSX.Element | null>;
 export * from './Chart';
 export * from './Globe';
 export * from './Graph';

package/dist/types/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,iBAAiB;;;qDAA4C,CAAC;AAE3E,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,iBAAiB;;;yCAA4C,CAAC;AAE3E,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-explorer",
-  "version": "0.8.0",
+  "version": "0.8.1-main.303c73a",
   "description": "Braneframe data visualization plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -33,7 +33,6 @@
     "src"
   ],
   "dependencies": {
-    "@effect/schema": "^0.75.5",
     "@observablehq/plot": "^0.6.11",
     "@preact/signals-core": "^1.6.0",
     "d3": "^7.9.0",
@@ -42,21 +41,21 @@
     "lodash.get": "^4.4.2",
     "react-resize-detector": "^11.0.1",
     "topojson-client": "^3.1.0",
-    "@dxos/echo-schema": "0.8.0",
-    "@dxos/app-framework": "0.8.0",
-    "@dxos/async": "0.8.0",
-    "@dxos/gem-spore": "0.8.0",
-    "@dxos/gem-core": "0.8.0",
-    "@dxos/client": "0.8.0",
-    "@dxos/live-object": "0.8.0",
-    "@dxos/log": "0.8.0",
-    "@dxos/plugin-client": "0.8.0",
-    "@dxos/plugin-search": "0.8.0",
-    "@dxos/plugin-space": "0.8.0",
-    "@dxos/plugin-graph": "0.8.0",
-    "@dxos/react-client": "0.8.0",
-    "@dxos/react-ui-stack": "0.8.0",
-    "@dxos/util": "0.8.0"
+    "@dxos/app-framework": "0.8.1-main.303c73a",
+    "@dxos/async": "0.8.1-main.303c73a",
+    "@dxos/echo-schema": "0.8.1-main.303c73a",
+    "@dxos/client": "0.8.1-main.303c73a",
+    "@dxos/live-object": "0.8.1-main.303c73a",
+    "@dxos/gem-spore": "0.8.1-main.303c73a",
+    "@dxos/gem-core": "0.8.1-main.303c73a",
+    "@dxos/log": "0.8.1-main.303c73a",
+    "@dxos/plugin-client": "0.8.1-main.303c73a",
+    "@dxos/plugin-search": "0.8.1-main.303c73a",
+    "@dxos/plugin-graph": "0.8.1-main.303c73a",
+    "@dxos/plugin-space": "0.8.1-main.303c73a",
+    "@dxos/react-client": "0.8.1-main.303c73a",
+    "@dxos/react-ui-stack": "0.8.1-main.303c73a",
+    "@dxos/util": "0.8.1-main.303c73a"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -71,19 +70,19 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-generator": "0.8.0",
-    "@dxos/plugin-outliner": "0.8.0",
-    "@dxos/random": "0.8.0",
-    "@dxos/react-ui": "0.8.0",
-    "@dxos/react-ui-theme": "0.8.0",
-    "@dxos/storybook-utils": "0.8.0"
+    "@dxos/echo-generator": "0.8.1-main.303c73a",
+    "@dxos/plugin-outliner": "0.8.1-main.303c73a",
+    "@dxos/react-ui-theme": "0.8.1-main.303c73a",
+    "@dxos/storybook-utils": "0.8.1-main.303c73a",
+    "@dxos/react-ui": "0.8.1-main.303c73a",
+    "@dxos/random": "0.8.1-main.303c73a"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.0",
-    "@dxos/react-ui": "0.8.0"
+    "@dxos/react-ui": "0.8.1-main.303c73a",
+    "@dxos/react-ui-theme": "0.8.1-main.303c73a"
   },
   "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

@@ -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;