@dxos/plugin-explorer 0.8.4-main.abd8ff62ef → 0.8.4-main.bc2380dfbc

package/src/components/Graph/CanvasForceGraph.tsx

@@ -0,0 +1,124 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { forceLink, forceManyBody } from 'd3';
+import NativeForceGraph from 'force-graph';
+import React, {
+  type ComponentPropsWithoutRef,
+  type Ref,
+  RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+
+import { type SpaceGraphModel } from '@dxos/schema';
+import { composable, composableProps } from '@dxos/ui-theme';
+
+import { GraphAdapter } from './graph-adapter';
+
+export type CanvasForceGraphProps = {
+  model?: SpaceGraphModel;
+  match?: RegExp;
+};
+
+/**
+ * More performance optimized version of the ForceGraph.
+ */
+export const CanvasForceGraph = composable<HTMLDivElement, CanvasForceGraphProps>(
+  ({ model, match, onClick, ...props }, forwardedRef) => {
+    const { ref: resizeRef, width, height } = useResizeDetector({ refreshRate: 200 });
+    const setRef = useCallback(
+      (node: HTMLDivElement | null) => {
+        resizeRef(node);
+        assignRef(forwardedRef, node);
+      },
+      [resizeRef, forwardedRef],
+    );
+
+    const rootRef = useRef<HTMLDivElement>(null);
+    const forceGraph = useRef<NativeForceGraph>(null);
+
+    const [data, setData] = useState<GraphAdapter>();
+    useEffect(() => {
+      return model?.subscribe((model) => setData(new GraphAdapter(model.graph)));
+    }, [model]);
+
+    useEffect(() => {
+      if (rootRef.current) {
+        // https://github.com/vasturiano/force-graph
+        // https://github.com/vasturiano/3d-force-graph
+        forceGraph.current = new NativeForceGraph(rootRef.current)
+          // https://github.com/vasturiano/force-graph?tab=readme-ov-file#node-styling
+          .nodeRelSize(6)
+          .nodeLabel((node: any) => (node.type === 'schema' ? node.data.typename : (node.data.label ?? node.id)))
+          .nodeAutoColorBy((node: any) => (node.type === 'schema' ? 'schema' : node.data.typename))
+
+          // https://github.com/vasturiano/force-graph?tab=readme-ov-file#link-styling
+          .linkAutoColorBy((link: any) => link.type);
+      }
+
+      return () => {
+        forceGraph.current?.pauseAnimation().graphData({ nodes: [], links: [] });
+        forceGraph.current = null;
+      };
+    }, []);
+
+    useEffect(() => {
+      if (!data || !width || !height || !forceGraph.current) {
+        return;
+      }
+
+      // https://github.com/vasturiano/force-graph?tab=readme-ov-file#container-layout
+      forceGraph.current
+        .pauseAnimation()
+        .width(width)
+        .height(height)
+        .onEngineStop(() => handleZoomToFit())
+        .onNodeClick((node: any) => {
+          forceGraph.current?.emitParticle(node);
+        })
+
+        // 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))
+
+        .graphData(data)
+        .warmupTicks(100)
+        .cooldownTime(1_000)
+        .resumeAnimation();
+    }, [data, width, height]);
+
+    const handleZoomToFit = () => {
+      forceGraph.current?.zoomToFit(400, 40);
+    };
+
+    const handleClick = useCallback<NonNullable<ComponentPropsWithoutRef<'div'>['onClick']>>(
+      (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          handleZoomToFit();
+        }
+      },
+      [onClick],
+    );
+
+    return (
+      <div {...composableProps(props, { classNames: 'relative grow' })} onClick={handleClick} ref={setRef}>
+        <div ref={rootRef} className='absolute inset-0' />
+      </div>
+    );
+  },
+);
+
+const assignRef = <T,>(ref: Ref<T> | undefined, value: T | null): void => {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref) {
+    (ref as RefObject<T | null>).current = value;
+  }
+};

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

@@ -3,52 +3,69 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React, { useState } from 'react';
+import * as Effect from 'effect/Effect';
+import React, { useCallback, useMemo } from 'react';
 
-import { Type } from '@dxos/echo';
-import { View } from '@dxos/echo';
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Obj, Type, View } from '@dxos/echo';
+import { SelectionModel } from '@dxos/graph';
+import { ClientPlugin } from '@dxos/plugin-client/testing';
+import { initializeIdentity } from '@dxos/plugin-client/testing';
+import { PreviewPlugin } from '@dxos/plugin-preview/testing';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { random } from '@dxos/random';
-import { useClient } from '@dxos/react-client';
-import { type Space } from '@dxos/react-client/echo';
-import { withClientProvider } from '@dxos/react-client/testing';
-import { useAsyncEffect } from '@dxos/react-ui';
+import { useSpaces } from '@dxos/react-client/echo';
+import { DxAnchorActivate } from '@dxos/react-ui';
+import { type GraphProps, type GraphLayoutNode } from '@dxos/react-ui-graph';
 import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
-import { ViewModel } from '@dxos/schema';
+import { type SpaceGraphEdge, type SpaceGraphNode, ViewModel } from '@dxos/schema';
 import { type ValueGenerator } from '@dxos/schema/testing';
-import { withRegistry } from '@dxos/storybook-utils';
 import { HasRelationship, Organization, Person, Pipeline } from '@dxos/types';
 
 import { useGraphModel } from '#hooks';
 import { Graph } from '#types';
 
+import { generate } from '../Tree/testing';
 import { ForceGraph } from './ForceGraph';
-import { generate } from './testing';
 
 const generator = random as any as ValueGenerator;
 
 random.seed(1);
 
 const DefaultStory = () => {
-  const client = useClient();
-  const [space, setSpace] = useState<Space>();
-  const [graph, setGraph] = useState<Graph.Graph>();
+  const [space] = useSpaces();
+  const model = useGraphModel(space?.db);
 
-  useAsyncEffect(async () => {
-    const space = client.spaces.get()[0];
-    void generate(space, generator);
-    const { view } = await ViewModel.makeFromDatabase({ db: space.db, typename: Type.getTypename(Graph.Graph) });
-    const graph = Graph.make({ name: 'Test', view });
-    space.db.add(graph);
-    setSpace(space);
-    setGraph(graph);
-  }, [client]);
+  const selection = useMemo(() => new SelectionModel({ mode: 'single' }), []);
 
-  const model = useGraphModel(space);
-  if (!model || !space || !graph) {
-    return <Loading data={{ model: !!model, space: !!space, graph: !!graph }} />;
+  const handleInspect = useCallback<NonNullable<GraphProps<SpaceGraphNode, SpaceGraphEdge>['onInspect']>>(
+    (node: GraphLayoutNode<SpaceGraphNode>, event) => {
+      const obj = node.data?.data?.object;
+      if (!obj) {
+        return;
+      }
+      const dxn = Obj.getDXN(obj)?.toString();
+      if (!dxn) {
+        return;
+      }
+      const target = event.target as HTMLElement;
+      target.dispatchEvent(
+        new DxAnchorActivate({
+          dxn,
+          label: Obj.getLabel(obj) ?? dxn,
+          trigger: target,
+          kind: 'card',
+        }),
+      );
+    },
+    [],
+  );
+
+  if (!space || !model) {
+    return <Loading data={{ space: !!space, model: !!model }} />;
   }
 
-  return <ForceGraph model={model} />;
+  return <ForceGraph model={model} selection={selection} onInspect={handleInspect} />;
 };
 
 const meta = {
@@ -56,18 +73,33 @@ const meta = {
   component: ForceGraph,
   render: DefaultStory,
   decorators: [
-    withRegistry,
     withTheme(),
-    withLayout(),
-    withClientProvider({
-      createSpace: true,
-      types: [
-        Graph.Graph,
-        View.View,
-        HasRelationship.HasRelationship,
-        Organization.Organization,
-        Pipeline.Pipeline,
-        Person.Person,
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        StorybookPlugin({}),
+        ClientPlugin({
+          types: [
+            Graph.Graph,
+            View.View,
+            HasRelationship.HasRelationship,
+            Organization.Organization,
+            Pipeline.Pipeline,
+            Person.Person,
+          ],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              const { personalSpace } = yield* initializeIdentity(client);
+              yield* Effect.promise(() => generate(personalSpace, generator));
+              const { view } = yield* Effect.promise(() =>
+                ViewModel.makeFromDatabase({ db: personalSpace.db, typename: Type.getTypename(Graph.Graph) }),
+              );
+              personalSpace.db.add(Graph.make({ name: 'Test', view }));
+              yield* Effect.promise(() => personalSpace.db.flush({ indexes: true }));
+            }),
+        }),
+        PreviewPlugin(),
       ],
     }),
   ],

package/src/components/Graph/ForceGraph.tsx

@@ -2,91 +2,110 @@
 // Copyright 2023 DXOS.org
 //
 
-import { forceLink, forceManyBody } from 'd3';
-import NativeForceGraph from 'force-graph';
-import React, { type FC, useEffect, useRef, useState } from 'react';
-import { useResizeDetector } from 'react-resize-detector';
-
-import { type SearchResult, filterObjectsSync } from '@dxos/plugin-search';
-import { type SpaceGraphModel } from '@dxos/schema';
-
-import { GraphAdapter } from './adapter';
+import { Atom, useAtomValue } from '@effect-atom/atom-react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { Obj } from '@dxos/echo';
+import { SelectionModel } from '@dxos/graph';
+import {
+  type GraphController,
+  GraphForceProjector,
+  type GraphLayoutNode,
+  type GraphProps,
+  SVG,
+  type SVGContext,
+} from '@dxos/react-ui-graph';
+import { type SpaceGraphEdge, type SpaceGraphModel, type SpaceGraphNode } from '@dxos/schema';
+import { composable, composableProps, getHashStyles } from '@dxos/ui-theme';
+import '@dxos/react-ui-graph/styles/graph.css';
+
+const EMPTY_ATOM = Atom.make<{ nodes: SpaceGraphNode[]; edges: SpaceGraphEdge[] }>({ nodes: [], edges: [] });
 
 export type ForceGraphProps = {
   model?: SpaceGraphModel;
-  match?: RegExp;
-};
-
-export const ForceGraph: FC<ForceGraphProps> = ({ model, match }) => {
-  const { ref, width, height } = useResizeDetector({ refreshRate: 200 });
-  const rootRef = useRef<HTMLDivElement>(null);
-  const forceGraph = useRef<NativeForceGraph>(null);
-
-  const filteredRef = useRef<SearchResult[]>([]);
-  filteredRef.current = filterObjectsSync(model?.objects ?? [], match);
-
-  const [data, setData] = useState<GraphAdapter>();
-  useEffect(() => {
-    return model?.subscribe((model) => {
-      setData(new GraphAdapter(model.graph));
-    });
-  }, [model]);
-
-  useEffect(() => {
-    if (rootRef.current) {
-      // https://github.com/vasturiano/force-graph
-      // https://github.com/vasturiano/3d-force-graph
-      forceGraph.current = new NativeForceGraph(rootRef.current)
-        // https://github.com/vasturiano/force-graph?tab=readme-ov-file#node-styling
-        .nodeRelSize(6)
-        .nodeLabel((node: any) => (node.type === 'schema' ? node.data.typename : (node.data.label ?? node.id)))
-        .nodeAutoColorBy((node: any) => (node.type === 'schema' ? 'schema' : node.data.typename))
-
-        // https://github.com/vasturiano/force-graph?tab=readme-ov-file#link-styling
-        .linkAutoColorBy((link: any) => link.type);
-    }
-
-    return () => {
-      forceGraph.current?.pauseAnimation().graphData({ nodes: [], links: [] });
-      forceGraph.current = null;
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!data || !width || !height || !forceGraph.current) {
-      return;
-    }
-
-    // https://github.com/vasturiano/force-graph?tab=readme-ov-file#container-layout
-    forceGraph.current
-      .pauseAnimation()
-      .width(width)
-      .height(height)
-      .onEngineStop(() => {
-        handleZoomToFit();
-      })
-      .onNodeClick((node: any) => {
-        forceGraph.current?.emitParticle(node);
-      })
-
-      // 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))
-
-      .graphData(data)
-      .warmupTicks(100)
-      .cooldownTime(1_000)
-      .resumeAnimation();
-  }, [data, width, height, forceGraph.current]);
-
-  const handleZoomToFit = () => {
-    forceGraph.current?.zoomToFit(400, 40);
-  };
-
-  return (
-    <div ref={ref} className='relative grow' onClick={handleZoomToFit}>
-      <div ref={rootRef} className='absolute inset-0' />
-    </div>
-  );
-};
+  grid?: boolean;
+  selection?: SelectionModel;
+  onInspect?: GraphProps<SpaceGraphNode, SpaceGraphEdge>['onInspect'];
+} & Pick<GraphProps, 'drag'>;
+
+export const ForceGraph = composable<HTMLDivElement, ForceGraphProps>(
+  ({ model, selection: selectionProp, grid, drag, onInspect, ...props }, forwardedRef) => {
+    // TODO(wittjosiah): This should go into Graph.tsx but for some reason doesn't work.
+    useAtomValue(model?.graphAtom ?? EMPTY_ATOM);
+
+    const graph = useRef<GraphController>(null);
+    const selection = useMemo(() => selectionProp ?? new SelectionModel(), [selectionProp]);
+    useEffect(() => {
+      const unsubscribe = selection.subscribe(() => graph.current?.repaint());
+      return unsubscribe;
+    }, [selection]);
+
+    const svgRef = useRef<SVGContext>(null);
+    const [projector, setProjector] = useState<GraphForceProjector>();
+    useEffect(() => {
+      if (svgRef.current) {
+        setProjector(
+          new GraphForceProjector(svgRef.current, {
+            attributes: {
+              // TODO(burdon): Check type (currently assumes Employee property).
+              // Edge shouldn't contribute to force if it's not active.
+              linkForce: (edge) => edge.data?.object?.active !== false,
+            },
+            forces: {
+              point: {
+                strength: 0.01,
+              },
+            },
+          }),
+        );
+      }
+      // SVG.Graph owns projector start/stop; nothing to clean up here.
+    }, []);
+
+    const handleSelect = useCallback<NonNullable<GraphProps['onSelect']>>(
+      (node) => {
+        if (selection.contains(node.id)) {
+          selection.remove(node.id);
+        } else {
+          selection.add(node.id);
+        }
+      },
+      [selection],
+    );
+
+    return (
+      <div {...composableProps(props, { classNames: 'dx-container' })} ref={forwardedRef}>
+        <SVG.Root ref={svgRef}>
+          <SVG.Markers />
+          {grid && <SVG.Grid axis />}
+          <SVG.Zoom extent={[1 / 2, 2]}>
+            <SVG.Graph<SpaceGraphNode, SpaceGraphEdge>
+              ref={graph}
+              drag={drag}
+              model={model}
+              projector={projector}
+              labels={{
+                text: (node) => node.data?.data.label ?? node.id,
+              }}
+              attributes={{
+                node: (node: GraphLayoutNode<SpaceGraphNode>) => {
+                  const obj = node.data?.data.object;
+                  return {
+                    data: {
+                      color: getHashStyles(obj && Obj.getTypename(obj))?.hue,
+                    },
+                    classes: {
+                      'dx-selected': selection.contains(node.id),
+                    },
+                  };
+                },
+              }}
+              onSelect={handleSelect}
+              onInspect={onInspect}
+            />
+          </SVG.Zoom>
+        </SVG.Root>
+      </div>
+    );
+  },
+);

package/src/components/Graph/index.ts

@@ -2,5 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './D3ForceGraph';
+export * from './CanvasForceGraph';
 export * from './ForceGraph';

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

@@ -0,0 +1,144 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Effect from 'effect/Effect';
+import React, { useEffect, useMemo, useState } from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { Query } from '@dxos/echo';
+import { ClientPlugin, initializeIdentity } from '@dxos/plugin-client/testing';
+import { corePlugins } from '@dxos/plugin-testing';
+import { random } from '@dxos/random';
+import { useSpaces } from '@dxos/react-client/echo';
+import { Loading, withLayout, withTheme } from '@dxos/react-ui/testing';
+import { type ValueGenerator } from '@dxos/schema/testing';
+import { HasConnection, Organization, Person } from '@dxos/types';
+
+import { buildOrgHierarchy, connectionsToEdges, generateConnectedOrgs } from './testing';
+import { Tree, type TreeComponentProps } from './Tree';
+import { type TreeNode } from './types';
+
+const generator = random as any as ValueGenerator;
+
+random.seed(42);
+
+const DefaultStory = ({ variant = 'edge', tension }: { variant?: TreeComponentProps['variant']; tension?: number }) => {
+  const [space] = useSpaces();
+  const [{ data, edges }, setState] = useState<{ data?: TreeNode; edges: TreeComponentProps['edges'] }>({
+    data: undefined,
+    edges: [],
+  });
+  const [hovered, setHovered] = useState<TreeNode | null>(null);
+
+  useEffect(() => {
+    if (!space) {
+      return;
+    }
+    let cancelled = false;
+    void (async () => {
+      const orgs = await space.db.query(Query.type(Organization.Organization)).run();
+      if (cancelled || !orgs.length) {
+        return;
+      }
+      const connections = await space.db.query(Query.type(HasConnection.HasConnection)).run();
+      if (cancelled) {
+        return;
+      }
+      setState({
+        data: buildOrgHierarchy(orgs as any),
+        edges: connectionsToEdges(connections as any),
+      });
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [space]);
+
+  const slots = useMemo<TreeComponentProps['slots']>(
+    () => ({
+      node: 'fill-neutral-700 dark:fill-neutral-300',
+      path: 'stroke-orange-400/40 dark:stroke-orange-500/40',
+      text: 'fill-neutral-700 dark:fill-neutral-200 text-xs',
+    }),
+    [],
+  );
+
+  if (!space || !data) {
+    return <Loading data={{ space: !!space, data: !!data }} />;
+  }
+
+  return (
+    <div className='relative flex h-full w-full'>
+      <Tree
+        data={data}
+        edges={edges}
+        variant={variant}
+        slots={slots}
+        onNodeHover={setHovered}
+        // Pass-through; only `edge` variant uses `edges`/`onNodeHover`.
+      />
+      {hovered && (
+        <div className='pointer-events-none absolute left-2 top-2 rounded bg-neutral-900/80 px-2 py-1 text-xs text-white dark:bg-white/80 dark:text-neutral-900'>
+          {hovered.label ?? hovered.id}
+        </div>
+      )}
+    </div>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-explorer/components/EdgeBundling',
+  component: Tree as any,
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      plugins: [
+        ...corePlugins(),
+        ClientPlugin({
+          types: [Organization.Organization, Person.Person, HasConnection.HasConnection],
+          onClientInitialized: ({ client }) =>
+            Effect.gen(function* () {
+              const { personalSpace } = yield* initializeIdentity(client);
+              yield* Effect.promise(() =>
+                generateConnectedOrgs(personalSpace, generator, {
+                  organizationCount: 16,
+                  personCount: 24,
+                  connectionCount: 22,
+                }),
+              );
+              yield* Effect.promise(() => personalSpace.db.flush({ indexes: true }));
+            }),
+        }),
+      ],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    variant: 'edge',
+  },
+};
+
+export const Tidy: Story = {
+  args: {
+    variant: 'tidy',
+  },
+};
+
+export const Radial: Story = {
+  args: {
+    variant: 'radial',
+  },
+};