@dxos/plugin-explorer 0.8.1 → 0.8.2-main.10c050d

package/dist/types/src/translations.d.ts

@@ -1,15 +1,9 @@
+import { ViewType } from './types';
 declare const _default: {
     'en-US': {
-        [x: string]: {
+        [ViewType.typename]: {
             'typename label': string;
             'object name placeholder': string;
-            'plugin name'?: undefined;
-            'object title label'?: undefined;
-        } | {
-            'plugin name': string;
-            'object title label': string;
-            'typename label'?: undefined;
-            'object name placeholder'?: undefined;
         };
         "dxos.org/plugin/explorer": {
             'plugin name': string;

package/dist/types/src/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAOA,wBAaE"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;;;QAK7B,CAAC,QAAQ,CAAC,QAAQ,CAAC;;;UAGlB;;;;;;;AANP,wBAaE"}

package/dist/types/src/types/schema.d.ts

@@ -1,10 +1,10 @@
-import { S } from '@dxos/echo-schema';
+import { Schema } from 'effect';
 declare const ViewType_base: import("@dxos/echo-schema").TypedObjectPrototype<import("@dxos/echo-schema").TypedObjectFields<{
-    name: S.optional<typeof S.String>;
-    type: typeof S.String;
-}, import("@dxos/echo-schema").TypedObjectOptions>, S.Struct.Encoded<{
-    name: S.optional<typeof S.String>;
-    type: typeof S.String;
+    name: Schema.optional<typeof Schema.String>;
+    type: typeof Schema.String;
+}, import("@dxos/echo-schema").TypedObjectOptions>, Schema.Struct.Encoded<{
+    name: Schema.optional<typeof Schema.String>;
+    type: typeof Schema.String;
 }>>;
 export declare class ViewType extends ViewType_base {
 }

package/dist/types/src/types/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/types/schema.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,CAAC,EAAe,MAAM,mBAAmB,CAAC;;;;;;;;AAGnD,qBAAa,QAAS,SAAQ,aAM5B;CAAG"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../../src/types/schema.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;;;;;;;;AAKhC,qBAAa,QAAS,SAAQ,aAM5B;CAAG"}

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

@@ -1,13 +1,13 @@
-import { S } from '@dxos/echo-schema';
+import { Schema } from 'effect';
 import { ViewType } from './schema';
 export declare namespace ExplorerAction {
-    const Create_base: S.TaggedClass<Create, "dxos.org/plugin/explorer/action/create", {
-        readonly _tag: S.tag<"dxos.org/plugin/explorer/action/create">;
+    const Create_base: Schema.TaggedClass<Create, "dxos.org/plugin/explorer/action/create", {
+        readonly _tag: Schema.tag<"dxos.org/plugin/explorer/action/create">;
     } & {
-        input: S.Struct<{
-            name: S.optional<typeof S.String>;
+        input: Schema.Struct<{
+            name: Schema.optional<typeof Schema.String>;
         }>;
-        output: S.Struct<{
+        output: Schema.Struct<{
             object: typeof ViewType;
         }>;
     }>;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAEtC,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGpC,yBAAiB,cAAc,CAAC;;;;;;;;;;;IAG9B,MAAM,OAAO,MAAO,SAAQ,WAO1B;KAAG;;CACN"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/types/types.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAGpC,yBAAiB,cAAc,CAAC;;;;;;;;;;;IAG9B,MAAM,OAAO,MAAO,SAAQ,WAO1B;KAAG;;CACN"}

package/dist/types/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"version":"5.7.3"}
+{"version":"5.8.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-explorer",
-  "version": "0.8.1",
+  "version": "0.8.2-main.10c050d",
   "description": "Braneframe data visualization plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -35,28 +35,32 @@
   "dependencies": {
     "3d-force-graph": "^1.76.1",
     "@observablehq/plot": "^0.6.11",
-    "@preact/signals-core": "^1.6.0",
+    "@preact-signals/safe-react": "^0.9.0",
+    "@preact/signals-core": "^1.9.0",
     "d3": "^7.9.0",
+    "effect": "^3.13.3",
     "force-graph": "^1.49.4",
     "lodash.defaultsdeep": "^4.6.1",
-    "lodash.get": "^4.4.2",
     "react-resize-detector": "^11.0.1",
     "topojson-client": "^3.1.0",
-    "@dxos/async": "0.8.1",
-    "@dxos/app-framework": "0.8.1",
-    "@dxos/client": "0.8.1",
-    "@dxos/echo-schema": "0.8.1",
-    "@dxos/gem-core": "0.8.1",
-    "@dxos/live-object": "0.8.1",
-    "@dxos/gem-spore": "0.8.1",
-    "@dxos/log": "0.8.1",
-    "@dxos/plugin-graph": "0.8.1",
-    "@dxos/plugin-client": "0.8.1",
-    "@dxos/plugin-search": "0.8.1",
-    "@dxos/plugin-space": "0.8.1",
-    "@dxos/react-client": "0.8.1",
-    "@dxos/react-ui-stack": "0.8.1",
-    "@dxos/util": "0.8.1"
+    "@dxos/app-framework": "0.8.2-main.10c050d",
+    "@dxos/async": "0.8.2-main.10c050d",
+    "@dxos/echo": "0.8.2-main.10c050d",
+    "@dxos/client": "0.8.2-main.10c050d",
+    "@dxos/graph": "0.8.2-main.10c050d",
+    "@dxos/invariant": "0.8.2-main.10c050d",
+    "@dxos/echo-schema": "0.8.2-main.10c050d",
+    "@dxos/live-object": "0.8.2-main.10c050d",
+    "@dxos/plugin-client": "0.8.2-main.10c050d",
+    "@dxos/plugin-graph": "0.8.2-main.10c050d",
+    "@dxos/log": "0.8.2-main.10c050d",
+    "@dxos/plugin-space": "0.8.2-main.10c050d",
+    "@dxos/plugin-search": "0.8.2-main.10c050d",
+    "@dxos/react-ui-graph": "0.8.2-main.10c050d",
+    "@dxos/react-ui-stack": "0.8.2-main.10c050d",
+    "@dxos/schema": "0.8.2-main.10c050d",
+    "@dxos/react-client": "0.8.2-main.10c050d",
+    "@dxos/util": "0.8.2-main.10c050d"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -67,23 +71,22 @@
     "@types/react-dom": "~18.2.0",
     "@types/topojson-client": "^3.1.4",
     "@types/topojson-specification": "^1.0.5",
-    "lodash.get": "^4.4.2",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/echo-generator": "0.8.1",
-    "@dxos/plugin-outliner": "0.8.1",
-    "@dxos/random": "0.8.1",
-    "@dxos/react-ui": "0.8.1",
-    "@dxos/storybook-utils": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1"
+    "@dxos/random": "0.8.2-main.10c050d",
+    "@dxos/echo-generator": "0.8.2-main.10c050d",
+    "@dxos/react-ui-theme": "0.8.2-main.10c050d",
+    "@dxos/storybook-utils": "0.8.2-main.10c050d",
+    "@dxos/react-ui": "0.8.2-main.10c050d"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
+    "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.1",
-    "@dxos/react-ui-theme": "0.8.1"
+    "@dxos/react-ui": "0.8.2-main.10c050d",
+    "@dxos/react-ui-theme": "0.8.2-main.10c050d"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/intent-resolver.ts

@@ -3,7 +3,7 @@
 //
 
 import { contributes, Capabilities, createResolver } from '@dxos/app-framework';
-import { create } from '@dxos/live-object';
+import { live } from '@dxos/live-object';
 
 import { ExplorerAction, ViewType } from '../types';
 
@@ -13,7 +13,7 @@ export default () =>
     createResolver({
       intent: ExplorerAction.Create,
       resolve: ({ name }) => ({
-        data: { object: create(ViewType, { name, type: '' }) },
+        data: { object: live(ViewType, { name, type: '' }) },
       }),
     }),
   );

package/src/components/ExplorerContainer.tsx

@@ -8,20 +8,27 @@ import { useGlobalSearch } from '@dxos/plugin-search';
 import { getSpace } from '@dxos/react-client/echo';
 import { StackItem } from '@dxos/react-ui-stack';
 
-import { Graph } from './Graph';
+import { ForceGraph } from './Graph';
+import { useGraphModel } from '../hooks';
 import { type ViewType } from '../types';
 
-const ExplorerContainer = ({ view, role }: { view: ViewType; role: string }) => {
+type ExplorerContainerProps = {
+  role: string;
+  view: ViewType;
+};
+
+const ExplorerContainer = ({ role, view }: ExplorerContainerProps) => {
   const space = getSpace(view);
   const { match } = useGlobalSearch();
+  const model = useGraphModel(space);
 
-  if (!space) {
+  if (!model || !space) {
     return null;
   }
 
   return (
     <StackItem.Content size={role === 'section' ? 'square' : 'intrinsic'}>
-      <Graph space={space} match={match} />
+      <ForceGraph model={model} match={match} />
     </StackItem.Content>
   );
 };

package/src/components/Globe/Globe.stories.tsx

@@ -4,12 +4,12 @@
 
 import '@dxos-theme';
 
-import * as Plot from '@observablehq/plot';
+import { plot, sphere, geo, graticule, dot } from '@observablehq/plot';
 import { type Meta } from '@storybook/react';
-import * as d3 from 'd3';
+import { geoCircle } from 'd3';
 import React, { useEffect } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
-import * as topojson from 'topojson-client';
+import { feature } from 'topojson-client';
 
 import { ClientRepeater } from '@dxos/react-client/testing';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -37,18 +37,18 @@ const ExtendedStory = () => {
       return;
     }
 
-    const land = topojson.feature(CountriesData as any, CountriesData.objects.land as any);
+    const land = feature(CountriesData as any, CountriesData.objects.land as any);
     const items = CitiesData.features.map((feature: any) => ({
       lat: feature.geometry.coordinates[0],
       lng: feature.geometry.coordinates[1],
     }));
 
     const city = items[0];
-    const circle = d3.geoCircle().center([city.lat, city.lng]).radius(16)();
+    const circle = geoCircle().center([city.lat, city.lng]).radius(16)();
 
     // https://observablehq.com/plot/marks/geo
     // https://observablehq.com/@observablehq/plot-earthquake-globe?intent=fork
-    const plot = Plot.plot({
+    const drawing = plot({
       // https://observablehq.com/plot/features/projections
       projection: { type: 'orthographic', rotate: [-city.lat + 30, -30] },
       // projection: { type: 'equirectangular', rotate: [-140, -30] },
@@ -58,11 +58,11 @@ const ExtendedStory = () => {
         background: 'transparent',
       },
       marks: [
-        Plot.sphere({ fill: 'lightblue', fillOpacity: 0.5 }),
-        Plot.geo(land, { fill: 'green', fillOpacity: 0.3 }),
-        Plot.graticule(),
-        Plot.geo(circle, { stroke: 'black', fill: 'darkblue', fillOpacity: 0.1, strokeWidth: 2 }),
-        Plot.dot(items, {
+        sphere({ fill: 'lightblue', fillOpacity: 0.5 }),
+        geo(land, { fill: 'green', fillOpacity: 0.3 }),
+        graticule(),
+        geo(circle, { stroke: 'black', fill: 'darkblue', fillOpacity: 0.1, strokeWidth: 2 }),
+        dot(items, {
           x: 'lat',
           y: 'lng',
           r: 6,
@@ -73,8 +73,8 @@ const ExtendedStory = () => {
       ],
     });
 
-    containerRef.current!.append(plot);
-    return () => plot?.remove();
+    containerRef.current!.append(drawing);
+    return () => drawing?.remove();
   }, [width, height]);
 
   return <div ref={containerRef} className='grow p-8' />;

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

@@ -0,0 +1,64 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+import React, { useEffect, useState } from 'react';
+
+import { faker } from '@dxos/random';
+import { useClient } from '@dxos/react-client';
+import { live } from '@dxos/react-client/echo';
+import { type Space } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { DataType } from '@dxos/schema';
+import { type ValueGenerator } from '@dxos/schema/testing';
+import { withLayout, withTheme, render } from '@dxos/storybook-utils';
+
+import { D3ForceGraph } from './D3ForceGraph';
+import { generate } from './testing';
+import { useGraphModel } from '../../hooks';
+import { ViewType } from '../../types';
+
+const generator = faker as any as ValueGenerator;
+
+faker.seed(1);
+
+const DefaultStory = () => {
+  const client = useClient();
+  const [space, setSpace] = useState<Space>();
+  const [view, setView] = useState<ViewType>();
+  useEffect(() => {
+    const space = client.spaces.default;
+    void generate(space, generator);
+    const view = space.db.add(live(ViewType, { name: '', type: '' }));
+    setSpace(space);
+    setView(view);
+  }, []);
+
+  const model = useGraphModel(space);
+  if (!model || !space || !view) {
+    return null;
+  }
+
+  return <D3ForceGraph model={model} />;
+};
+
+const meta: Meta = {
+  title: 'plugins/plugin-explorer/D3ForceGraph',
+  component: D3ForceGraph,
+  render: render(DefaultStory),
+  decorators: [
+    withClientProvider({
+      createSpace: true,
+      types: [ViewType, DataType.Organization, DataType.Project, DataType.Person, DataType.HasRelationship],
+    }),
+    withTheme,
+    withLayout({ fullscreen: true }),
+  ],
+};
+
+export default meta;
+
+export const Default = {};

package/src/components/Graph/D3ForceGraph.tsx

@@ -0,0 +1,101 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React, { type FC, useCallback, useEffect, useMemo, useRef } from 'react';
+
+import { getTypename } from '@dxos/echo-schema';
+import { SelectionModel } from '@dxos/graph';
+import { type ThemedClassName } from '@dxos/react-ui';
+import {
+  type GraphController,
+  GraphForceProjector,
+  type GraphLayoutNode,
+  type GraphProps,
+  SVG,
+  type SVGContext,
+} from '@dxos/react-ui-graph';
+import { getHashColor } from '@dxos/react-ui-theme';
+import { type SpaceGraphNode, type SpaceGraphModel, type SpaceGraphEdge } from '@dxos/schema';
+
+import '@dxos/react-ui-graph/styles/graph.css';
+
+export type D3ForceGraphProps = ThemedClassName<
+  {
+    model?: SpaceGraphModel;
+    match?: RegExp;
+    selection?: SelectionModel;
+    grid?: boolean;
+  } & Pick<GraphProps, 'drag'>
+>;
+
+export const D3ForceGraph: FC<D3ForceGraphProps> = ({ classNames, model, selection: _selection, grid, ...props }) => {
+  const context = useRef<SVGContext>(null);
+  const projector = useMemo<GraphForceProjector | undefined>(() => {
+    if (context.current) {
+      return new GraphForceProjector(context.current, {
+        attributes: {
+          linkForce: (edge) => {
+            // TODO(burdon): Check type (currently assumes Employee property).
+            // Edge shouldn't contribute to force if it's not active.
+            return edge.data?.object?.active !== false;
+          },
+        },
+        forces: {
+          point: {
+            strength: 0.01,
+          },
+        },
+      });
+    }
+  }, [context.current]);
+
+  const graph = useRef<GraphController>(null);
+  const selection = useMemo(() => _selection ?? new SelectionModel(), [_selection]);
+  useEffect(() => graph.current?.repaint(), [selection.selected.value]);
+
+  const handleSelect = useCallback<NonNullable<GraphProps['onSelect']>>(
+    (node) => {
+      if (selection.contains(node.id)) {
+        selection.remove(node.id);
+      } else {
+        selection.add(node.id);
+      }
+    },
+    [selection],
+  );
+
+  return (
+    <SVG.Root ref={context} classNames={classNames}>
+      <SVG.Markers />
+      {grid && <SVG.Grid axis />}
+      <SVG.Zoom extent={[1 / 2, 2]}>
+        <SVG.Graph<SpaceGraphNode, SpaceGraphEdge>
+          {...props}
+          ref={graph}
+          model={model}
+          projector={projector}
+          labels={{
+            text: (node) => {
+              return node.data?.data.label ?? node.id;
+            },
+          }}
+          attributes={{
+            node: (node: GraphLayoutNode<SpaceGraphNode>) => {
+              const obj = node.data?.data.object;
+              return {
+                data: {
+                  color: getHashColor(obj && getTypename(obj))?.color,
+                },
+                classes: {
+                  'dx-selected': selection.contains(node.id),
+                },
+              };
+            },
+          }}
+          onSelect={handleSelect}
+        />
+      </SVG.Zoom>
+    </SVG.Root>
+  );
+};

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

@@ -0,0 +1,64 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxos-theme';
+
+import { type Meta } from '@storybook/react';
+import React, { useEffect, useState } from 'react';
+
+import { faker } from '@dxos/random';
+import { useClient } from '@dxos/react-client';
+import { live } from '@dxos/react-client/echo';
+import { type Space } from '@dxos/react-client/echo';
+import { withClientProvider } from '@dxos/react-client/testing';
+import { DataType } from '@dxos/schema';
+import { type ValueGenerator } from '@dxos/schema/testing';
+import { withLayout, withTheme, render } from '@dxos/storybook-utils';
+
+import { ForceGraph } from './ForceGraph';
+import { generate } from './testing';
+import { useGraphModel } from '../../hooks';
+import { ViewType } from '../../types';
+
+const generator = faker as any as ValueGenerator;
+
+faker.seed(1);
+
+const DefaultStory = () => {
+  const client = useClient();
+  const [space, setSpace] = useState<Space>();
+  const [view, setView] = useState<ViewType>();
+  useEffect(() => {
+    const space = client.spaces.default;
+    void generate(space, generator);
+    const view = space.db.add(live(ViewType, { name: '', type: '' }));
+    setSpace(space);
+    setView(view);
+  }, []);
+
+  const model = useGraphModel(space);
+  if (!model || !space || !view) {
+    return null;
+  }
+
+  return <ForceGraph model={model} />;
+};
+
+const meta: Meta = {
+  title: 'plugins/plugin-explorer/ForceGraph',
+  component: ForceGraph,
+  render: render(DefaultStory),
+  decorators: [
+    withClientProvider({
+      createSpace: true,
+      types: [ViewType, DataType.HasRelationship, DataType.Organization, DataType.Project, DataType.Person],
+    }),
+    withTheme,
+    withLayout({ fullscreen: true }),
+  ],
+};
+
+export default meta;
+
+export const Default = {};

package/src/components/Graph/{Graph.tsx → ForceGraph.tsx}

@@ -3,30 +3,24 @@
 //
 
 import { forceLink, forceManyBody } from 'd3';
-import ForceGraph from 'force-graph';
+import NativeForceGraph from 'force-graph';
 import React, { type FC, useEffect, useRef } from 'react';
 import { useResizeDetector } from 'react-resize-detector';
 
-import { type Space } from '@dxos/client/echo';
 import { filterObjectsSync, type SearchResult } from '@dxos/plugin-search';
-import { useAsyncState } from '@dxos/react-ui';
+import { type SpaceGraphModel } from '@dxos/schema';
 
-import { SpaceGraphModel } from './graph-model';
+import { GraphAdapter } from './adapter';
 
-export type GraphProps = {
-  space: Space;
+export type ForceGraphProps = {
+  model?: SpaceGraphModel;
   match?: RegExp;
 };
 
-export const Graph: FC<GraphProps> = ({ space, match }) => {
+export const ForceGraph: FC<ForceGraphProps> = ({ model, 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 forceGraph = useRef<NativeForceGraph>();
 
   const filteredRef = useRef<SearchResult[]>();
   filteredRef.current = filterObjectsSync(model?.objects ?? [], match);
@@ -35,17 +29,14 @@ export const Graph: FC<GraphProps> = ({ space, match }) => {
     if (rootRef.current) {
       // https://github.com/vasturiano/force-graph
       // https://github.com/vasturiano/3d-force-graph
-      forceGraph.current = new ForceGraph(rootRef.current)
+      forceGraph.current = new NativeForceGraph(rootRef.current)
+        // https://github.com/vasturiano/force-graph?tab=readme-ov-file#node-styling
         .nodeRelSize(6)
-        .nodeLabel((node: any) => {
-          if (node.type === 'schema') {
-            return node.data.typename;
-          }
-
-          return node.id;
-        })
+        .nodeLabel((node: any) => (node.type === 'schema' ? node.data.typename : node.data.label ?? node.id))
         .nodeAutoColorBy((node: any) => (node.type === 'schema' ? 'schema' : node.data.typename))
-        .linkColor(() => 'rgba(255,255,255,0.25)');
+
+        // https://github.com/vasturiano/force-graph?tab=readme-ov-file#link-styling
+        .linkAutoColorBy((link: any) => link.type);
     }
 
     return () => {
@@ -56,6 +47,7 @@ export const Graph: FC<GraphProps> = ({ space, match }) => {
 
   useEffect(() => {
     if (forceGraph.current && width && height && model) {
+      // https://github.com/vasturiano/force-graph?tab=readme-ov-file#container-layout
       forceGraph.current
         .pauseAnimation()
         .width(width)
@@ -63,17 +55,18 @@ export const Graph: FC<GraphProps> = ({ space, match }) => {
         .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))
-        // .d3AlphaDecay(0.0228)
-        // .d3VelocityDecay(0.4)
 
-        .graphData(model.graph)
+        .graphData(new GraphAdapter(model))
         .warmupTicks(100)
-        .cooldownTime(1000)
+        .cooldownTime(1_000)
         .resumeAnimation();
     }
   }, [model, width, height]);

package/src/components/Graph/adapter.ts

@@ -0,0 +1,47 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Graph } from '@dxos/graph';
+
+export type GraphNode = {
+  id?: string;
+};
+
+export type GraphLink = {
+  source?: string;
+  target?: string;
+};
+
+export type GraphData = {
+  nodes: GraphNode[];
+  links: GraphLink[];
+};
+
+export class GraphAdapter implements GraphData {
+  private readonly _nodes: GraphNode[] = [];
+  private readonly _links: GraphLink[] = [];
+
+  constructor(private readonly graph: Graph) {
+    this._nodes = graph.nodes.map((node) => ({
+      id: node.id,
+      type: node.type,
+      data: node.data,
+    }));
+
+    this._links = graph.edges.map((edge) => ({
+      type: edge.type,
+      source: edge.source,
+      target: edge.target,
+      data: edge.data,
+    }));
+  }
+
+  get nodes() {
+    return this._nodes;
+  }
+
+  get links() {
+    return this._links;
+  }
+}

package/src/components/Graph/index.ts

@@ -2,6 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './graph-model';
-
-export * from './Graph';
+export * from './D3ForceGraph';
+export * from './ForceGraph';