@dxos/app-graph 0.8.3 → 0.8.4-main.1c7ec43d41

package/src/stories/EchoGraph.stories.tsx

@@ -2,40 +2,30 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Registry, RegistryContext, Rx, useRxValue } from '@effect-rx/rx-react';
-import { Pause, Play, Plus, Timer } from '@phosphor-icons/react';
-import { Option, pipe } from 'effect';
-import React, { type PropsWithChildren, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-
-import {
-  live,
-  isSpace,
-  Query,
-  type QueryResult,
-  type Space,
-  SpaceState,
-  Expando,
-  type Live,
-  Filter,
-} from '@dxos/client/echo';
-import { Obj, Type } from '@dxos/echo';
-import { faker } from '@dxos/random';
+import { Atom, type Registry, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
+import React, { type PropsWithChildren, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+
+import { Filter, type Space, SpaceState, isSpace } from '@dxos/client/echo';
+import { Obj, Query } from '@dxos/echo';
+import { AtomObj, AtomQuery } from '@dxos/echo-atom';
+import { TestSchema } from '@dxos/echo/testing';
+import { random } from '@dxos/random';
 import { type Client, useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { Button, Input, Select } from '@dxos/react-ui';
-import { Path, Tree } from '@dxos/react-ui-list';
-import { Tabs } from '@dxos/react-ui-tabs';
-import { getSize, mx } from '@dxos/react-ui-theme';
-import { withTheme } from '@dxos/storybook-utils';
-import { byPosition, isNonNullable, safeParseInt } from '@dxos/util';
-
+import { Icon, IconButton, Input, Select } from '@dxos/react-ui';
+import { Path, Tree, type TreeModel } from '@dxos/react-ui-list';
+import { withTheme } from '@dxos/react-ui/testing';
+import { getSize, mx } from '@dxos/ui-theme';
+import { safeParseInt } from '@dxos/util';
+
+import * as CreateAtom from '../atoms';
+import * as Graph from '../graph';
+import * as GraphBuilder from '../graph-builder';
+import * as Node from '../node';
 import { JsonTree } from './Tree';
-import { type ExpandableGraph, ROOT_ID } from '../graph';
-import { GraphBuilder, createExtension, rxFromObservable, rxFromSignal } from '../graph-builder';
-import { type Node } from '../node';
-import { rxFromQuery } from '../testing';
 
 const DEFAULT_PERIOD = 500;
 
@@ -57,46 +47,47 @@ const actionWeights = {
   [Action.RENAME_OBJECT]: 4,
 };
 
-const createGraph = (client: Client, registry: Registry.Registry): ExpandableGraph => {
-  const spaceBuilderExtension = createExtension({
+const createGraph = (client: Client, registry: Registry.Registry): Graph.ExpandableGraph => {
+  const spaceBuilderExtension = GraphBuilder.createExtensionRaw({
     id: 'space',
     connector: (node) =>
-      Rx.make((get) =>
-        pipe(
+      Atom.make((get) =>
+        Function.pipe(
           get(node),
-          Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
+          Option.flatMap((node) => (node.id === Node.RootId ? Option.some(node) : Option.none())),
           Option.map(() => {
-            const spaces = get(rxFromObservable(client.spaces)) ?? [];
+            const spaces = get(CreateAtom.fromObservable(client.spaces)) ?? [];
             return spaces
-              .filter((space) => get(rxFromObservable(space.state)) === SpaceState.SPACE_READY)
-              .map((space) => ({
-                id: space.id,
-                type: 'dxos.org/type/Space',
-                properties: { label: get(rxFromSignal(() => space.properties.name)) },
-                data: space,
-              }));
+              .filter((space: any) => get(CreateAtom.fromObservable(space.state)) === SpaceState.SPACE_READY)
+              .map((space) => {
+                const propertiesSnapshot = get(AtomObj.make(space.properties));
+                return {
+                  id: space.id,
+                  type: 'org.dxos.type.space',
+                  properties: {
+                    label: propertiesSnapshot.name,
+                  },
+                  data: space,
+                };
+              });
           }),
           Option.getOrElse(() => []),
         ),
       ),
   });
 
-  const objectBuilderExtension = createExtension({
+  const objectBuilderExtension = GraphBuilder.createExtensionRaw({
     id: 'object',
     connector: (node) => {
-      let query: QueryResult<Live<Expando>> | undefined;
-      return Rx.make((get) =>
-        pipe(
+      return Atom.make((get) =>
+        Function.pipe(
           get(node),
           Option.flatMap((node) => (isSpace(node.data) ? Option.some(node.data) : Option.none())),
           Option.map((space) => {
-            if (!query) {
-              query = space.db.query(Query.type(Expando, { type: 'test' }));
-            }
-            const objects = get(rxFromQuery(query));
+            const objects = get(AtomQuery.make(space.db, Query.type(TestSchema.Expando, { type: 'test' })));
             return objects.map((object) => ({
               id: object.id,
-              type: 'dxos.org/type/test',
+              type: 'org.dxos.type.test',
               properties: { label: object.name },
               data: object,
             }));
@@ -107,15 +98,15 @@ const createGraph = (client: Client, registry: Registry.Registry): ExpandableGra
     },
   });
 
-  const graph = new GraphBuilder({ registry })
-    .addExtension(spaceBuilderExtension)
-    .addExtension(objectBuilderExtension).graph;
+  const builder = GraphBuilder.make({ registry });
+  GraphBuilder.addExtension(builder, spaceBuilderExtension);
+  GraphBuilder.addExtension(builder, objectBuilderExtension);
+  const graph = builder.graph;
   graph.onNodeChanged.on(({ id }) => {
-    graph.expand(id);
+    Graph.expand(graph, id, 'child');
   });
-  graph.expand(ROOT_ID);
+  Graph.expand(graph, Node.RootId, 'child');
   (window as any).graph = graph;
-
   return graph;
 };
 
@@ -135,9 +126,9 @@ const getRandomSpace = (client: Client): Space | undefined => {
 const getSpaceWithObjects = async (client: Client): Promise<Space | undefined> => {
   const readySpaces = client.spaces.get().filter((space) => space.state.get() === SpaceState.SPACE_READY);
   const spaceQueries = await Promise.all(
-    readySpaces.map((space) => space.db.query(Filter.type(Expando, { type: 'test' })).run()),
+    readySpaces.map((space) => space.db.query(Filter.type(TestSchema.Expando, { type: 'test' })).run()),
   );
-  const spaces = readySpaces.filter((space, index) => spaceQueries[index].objects.length > 0);
+  const spaces = readySpaces.filter((space, index) => spaceQueries[index].length > 0);
   return spaces[Math.floor(Math.random() * spaces.length)];
 };
 
@@ -154,19 +145,26 @@ const runAction = async (client: Client, action: Action) => {
     case Action.RENAME_SPACE: {
       const space = getRandomSpace(client);
       if (space) {
-        space.properties.name = faker.commerce.productName();
+        Obj.update(space.properties, (obj) => {
+          obj.name = random.commerce.productName();
+        });
       }
       break;
     }
 
     case Action.ADD_OBJECT:
-      getRandomSpace(client)?.db.add(Obj.make(Type.Expando, { type: 'test', name: faker.commerce.productName() }));
+      getRandomSpace(client)?.db.add(
+        Obj.make(TestSchema.Expando, {
+          type: 'test',
+          name: random.commerce.productName(),
+        }),
+      );
       break;
 
     case Action.REMOVE_OBJECT: {
       const space = await getSpaceWithObjects(client);
       if (space) {
-        const { objects } = await space.db.query(Filter.type(Expando, { type: 'test' })).run();
+        const objects = await space.db.query(Filter.type(TestSchema.Expando, { type: 'test' })).run();
         space.db.remove(objects[Math.floor(Math.random() * objects.length)]);
       }
       break;
@@ -175,8 +173,11 @@ const runAction = async (client: Client, action: Action) => {
     case Action.RENAME_OBJECT: {
       const space = await getSpaceWithObjects(client);
       if (space) {
-        const { objects } = await space.db.query(Filter.type(Expando, { type: 'test' })).run();
-        objects[Math.floor(Math.random() * objects.length)].name = faker.commerce.productName();
+        const objects = await space.db.query(Filter.type(TestSchema.Expando, { type: 'test' })).run();
+        const object = objects[Math.floor(Math.random() * objects.length)];
+        Obj.update(object, (object) => {
+          object.name = random.commerce.productName();
+        });
       }
       break;
     }
@@ -205,23 +206,24 @@ const Controls = ({ children }: PropsWithChildren) => {
   return (
     <>
       <div className='flex shrink-0 p-2 space-x-2'>
-        <Button onClick={() => setGenerating((generating) => !generating)}>{generating ? <Pause /> : <Play />}</Button>
+        <IconButton
+          icon={generating ? 'ph--pause--regular' : 'ph--play--regular'}
+          label={generating ? 'Pause' : 'Play'}
+          onClick={() => setGenerating((generating) => !generating)}
+        />
         <div className='relative' title='mutation period'>
           <Input.Root>
             <Input.TextInput
               autoComplete='off'
-              size={5}
-              classNames='w-[100px] text-right pie-[22px]'
+              classNames='w-[100px] text-right pe-[22px]'
               placeholder='Interval'
               value={actionInterval}
               onChange={({ target: { value } }) => setActionInterval(value)}
             />
           </Input.Root>
-          <Timer className={mx('absolute inline-end-1 block-start-1 mt-[6px]', getSize(3))} />
+          <Icon icon='ph--timer--regular' classNames={mx('absolute right-1 top-1 mt-[6px]', getSize(3))} />
         </div>
-        <Button onClick={() => action && runAction(client, action)}>
-          <Plus />
-        </Button>
+        <IconButton icon='ph--plus--regular' label='Add' onClick={() => action && runAction(client, action)} />
         <Select.Root value={action?.toString()} onValueChange={(action) => setAction(action as unknown as Action)}>
           <Select.TriggerButton placeholder='Select value' />
           <Select.Portal>
@@ -245,26 +247,31 @@ const Controls = ({ children }: PropsWithChildren) => {
   );
 };
 
-export default {
+const meta = {
   title: 'sdk/app-graph/EchoGraph',
   decorators: [
-    withTheme,
+    withTheme(),
     withClientProvider({
       createIdentity: true,
-      onIdentityCreated: async ({ client }) => {
+      types: [TestSchema.Expando],
+      onCreateIdentity: async ({ client }) => {
         await client.spaces.create();
         await client.spaces.create();
       },
     }),
   ],
-};
+} satisfies Meta;
+
+export default meta;
 
-export const JsonView = {
+type Story = StoryObj<typeof meta>;
+
+export const JsonView: Story = {
   render: () => {
     const client = useClient();
     const registry = useContext(RegistryContext);
     const graph = useMemo(() => createGraph(client, registry), [client, registry]);
-    const data = useRxValue(graph.json());
+    const data = useAtomValue(graph.json());
 
     return (
       <>
@@ -275,218 +282,134 @@ export const JsonView = {
   },
 };
 
-export const TreeView = {
+export const TreeView: Story = {
   render: () => {
     const client = useClient();
     const registry = useContext(RegistryContext);
     const graph = useMemo(() => createGraph(client, registry), [client, registry]);
-    const state = useMemo(() => new Map<string, Live<{ open: boolean; current: boolean }>>(), []);
-
-    const useItems = useCallback(
-      (node?: Node, options?: { disposition?: string; sort?: boolean }) => {
-        const connections = useRxValue(graph.connections(node?.id ?? ROOT_ID));
-        return options?.sort ? connections.toSorted((a, b) => byPosition(a.properties, b.properties)) : connections;
-      },
-      [graph],
-    );
-
-    const getProps = useCallback(
-      (node: Node, path: string[]) => {
-        const children = graph
-          .getConnections(node.id, 'outbound')
-          .map((n) => {
-            // Break cycles.
-            const nextPath = [...path, node.id];
-            return nextPath.includes(n.id) ? undefined : (n as Node);
-          })
-          .filter(isNonNullable) as Node[];
-        const parentOf =
-          children.length > 0 ? children.map(({ id }) => id) : node.properties.role === 'branch' ? [] : undefined;
-        return {
-          id: node.id,
-          label: node.id,
-          icon: node.type === 'dxos.org/type/Space' ? 'ph--planet--regular' : 'ph--placeholder--regular',
-          parentOf,
-        };
-      },
-      [graph],
-    );
-
-    const isOpen = useCallback(
-      (_path: string[]) => {
-        const path = Path.create(..._path);
-        const object = state.get(path) ?? live({ open: true, current: false });
-        if (!state.has(path)) {
-          state.set(path, object);
+    const stateRef = useRef(new Map<string, Atom.Writable<{ open: boolean; current: boolean }>>());
+
+    const getOrCreateState = useMemo(
+      () => (pathKey: string) => {
+        let atom = stateRef.current.get(pathKey);
+        if (!atom) {
+          atom = Atom.make({ open: true, current: false }).pipe(Atom.keepAlive);
+          stateRef.current.set(pathKey, atom);
         }
-
-        return object.open;
-      },
-      [state],
-    );
-
-    const isCurrent = useCallback(
-      (_path: string[]) => {
-        const path = Path.create(..._path);
-        const object = state.get(path) ?? live({ open: false, current: false });
-        if (!state.has(path)) {
-          state.set(path, object);
-        }
-
-        return object.current;
-      },
-      [state],
-    );
-
-    const onOpenChange = useCallback(
-      ({ path: _path, open }: { path: string[]; open: boolean }) => {
-        const path = Path.create(..._path);
-        const object = state.get(path);
-        object!.open = open;
-      },
-      [state],
-    );
-
-    const onSelect = useCallback(
-      ({ path: _path, current }: { path: string[]; current: boolean }) => {
-        const path = Path.create(..._path);
-        const object = state.get(path);
-        object!.current = current;
+        return atom;
       },
-      [state],
+      [],
     );
 
-    return (
-      <>
-        <Controls />
-        <Tree
-          id={ROOT_ID}
-          useItems={useItems}
-          getProps={getProps}
-          isOpen={isOpen}
-          isCurrent={isCurrent}
-          onOpenChange={onOpenChange}
-          onSelect={onSelect}
-        />
-      </>
+    const childIdsFamily = useMemo(
+      () =>
+        Atom.family((id: string) =>
+          Atom.make((get) => {
+            const connections = get(graph.connections(id, 'child'));
+            return connections.map((connection) => connection.id);
+          }),
+        ),
+      [graph],
     );
-  },
-};
-
-// TODO(wittjosiah): Remove.
-export const TabTreeView = {
-  render: () => {
-    const client = useClient();
-    const registry = useContext(RegistryContext);
-    const graph = useMemo(() => createGraph(client, registry), [client, registry]);
-    const state = useMemo(() => new Map<string, Live<{ open: boolean; current: boolean }>>(), []);
 
-    const useItems = useCallback(
-      (node?: Node, options?: { disposition?: string; sort?: boolean }) => {
-        const connections = useRxValue(graph.connections(node?.id ?? ROOT_ID));
-        return options?.sort ? connections.toSorted((a, b) => byPosition(a.properties, b.properties)) : connections;
-      },
+    const itemFamily = useMemo(
+      () =>
+        Atom.family((id: string) =>
+          Atom.make((get) => {
+            const node = get(graph.node(id));
+            return Option.isSome(node) ? node.value : undefined;
+          }),
+        ),
       [graph],
     );
 
-    const getProps = useCallback(
-      (node: Node, path: string[]) => {
-        const children = graph
-          .getConnections(node.id, 'outbound')
-          .map((n) => {
-            // Break cycles.
-            const nextPath = [...path, node.id];
-            return nextPath.includes(n.id) ? undefined : (n as Node);
-          })
-          .filter(isNonNullable) as Node[];
-        const parentOf =
-          children.length > 0 ? children.map(({ id }) => id) : node.properties.role === 'branch' ? [] : undefined;
-        return {
-          id: node.id,
-          label: node.id,
-          icon: node.type === 'dxos.org/type/Space' ? 'ph--planet--regular' : 'ph--placeholder--regular',
-          parentOf,
-        };
-      },
+    const itemPropsFamily = useMemo(
+      () =>
+        Atom.family((pathKey: string) => {
+          const path = pathKey.split('~');
+          const id = path[path.length - 1];
+          return Atom.make((get) => {
+            const nodeOpt = get(graph.node(id));
+            const node = Option.isSome(nodeOpt) ? nodeOpt.value : undefined;
+            if (!node) {
+              return { id, label: id };
+            }
+            const connections = get(graph.connections(node.id, 'child'));
+            const safeChildren = connections.filter((n) => !path.includes(n.id));
+            const parentOf =
+              safeChildren.length > 0
+                ? safeChildren.map(({ id }) => id)
+                : node.properties.role === 'branch'
+                  ? []
+                  : undefined;
+            return {
+              id: node.id,
+              label: node.id,
+              icon: node.type === 'org.dxos.type.space' ? 'ph--planet--regular' : 'ph--placeholder--regular',
+              parentOf,
+            };
+          });
+        }),
       [graph],
     );
 
-    const isOpen = useCallback(
-      (_path: string[]) => {
-        const path = Path.create(..._path);
-        const object = state.get(path) ?? live({ open: true, current: false });
-        if (!state.has(path)) {
-          state.set(path, object);
-        }
-
-        return object.open;
-      },
-      [state],
+    const itemOpenFamily = useMemo(
+      () =>
+        Atom.family((pathKey: string) => {
+          const stateAtom = getOrCreateState(pathKey);
+          return Atom.make((get) => get(stateAtom).open);
+        }),
+      [getOrCreateState],
     );
 
-    const isCurrent = useCallback(
-      (_path: string[]) => {
-        const path = Path.create(..._path);
-        const object = state.get(path) ?? live({ open: false, current: false });
-        if (!state.has(path)) {
-          state.set(path, object);
-        }
+    const itemCurrentFamily = useMemo(
+      () =>
+        Atom.family((pathKey: string) => {
+          const stateAtom = getOrCreateState(pathKey);
+          return Atom.make((get) => get(stateAtom).current);
+        }),
+      [getOrCreateState],
+    );
 
-        return object.current;
-      },
-      [state],
+    const model: TreeModel<Node.Node> = useMemo(
+      () => ({
+        childIds: (parentId?: string) => childIdsFamily(parentId ?? Node.RootId),
+        item: (id: string) => itemFamily(id),
+        itemProps: (path: string[]) => itemPropsFamily(path.join('~')),
+        itemOpen: (path: string[]) => itemOpenFamily(Path.create(...path)),
+        itemCurrent: (path: string[]) => itemCurrentFamily(Path.create(...path)),
+      }),
+      [childIdsFamily, itemFamily, itemPropsFamily, itemOpenFamily, itemCurrentFamily],
     );
 
     const onOpenChange = useCallback(
       ({ path: _path, open }: { path: string[]; open: boolean }) => {
         const path = Path.create(..._path);
-        const object = state.get(path);
-        object!.open = open;
+        const atom = stateRef.current.get(path);
+        if (atom) {
+          const prev = registry.get(atom);
+          registry.set(atom, { ...prev, open });
+        }
       },
-      [state],
+      [registry],
     );
 
     const onSelect = useCallback(
       ({ path: _path, current }: { path: string[]; current: boolean }) => {
         const path = Path.create(..._path);
-        const object = state.get(path);
-        object!.current = current;
+        const atom = stateRef.current.get(path);
+        if (atom) {
+          const prev = registry.get(atom);
+          registry.set(atom, { ...prev, current });
+        }
       },
-      [state],
+      [registry],
     );
 
-    const spaces = useItems(graph.root);
-
     return (
       <>
         <Controls />
-        <Tabs.Root defaultValue={spaces[0].id}>
-          <Tabs.Tablist>
-            {spaces.map((space) => {
-              return (
-                <Tabs.Tab key={space.id} value={space.id}>
-                  {space.id}
-                </Tabs.Tab>
-              );
-            })}
-          </Tabs.Tablist>
-          {spaces.map((space) => {
-            return (
-              <Tabs.Tabpanel key={space.id} value={space.id}>
-                <Tree
-                  id={space.id}
-                  root={space}
-                  useItems={useItems}
-                  getProps={getProps}
-                  isOpen={isOpen}
-                  isCurrent={isCurrent}
-                  onOpenChange={onOpenChange}
-                  onSelect={onSelect}
-                />
-              </Tabs.Tabpanel>
-            );
-          })}
-        </Tabs.Root>
+        <Tree model={model} id={Node.RootId} onOpenChange={onOpenChange} onSelect={onSelect} />
       </>
     );
   },

package/src/stories/Tree.tsx

@@ -4,7 +4,7 @@
 
 import React, { type FC, type HTMLAttributes, useState } from 'react';
 
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 // TODO(burdon): Copied form devtools.
 

package/src/testing/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './setup-graph-builder';

package/src/testing/setup-graph-builder.ts

@@ -0,0 +1,41 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { Registry } from '@effect-atom/atom-react';
+import * as Option from 'effect/Option';
+
+import * as Graph from '../graph';
+import * as GraphBuilder from '../graph-builder';
+import * as Node from '../node';
+
+export type SetupGraphBuilderOptions = {
+  registry?: Registry.Registry;
+  extensions?: GraphBuilder.BuilderExtensions;
+};
+
+export const setupGraphBuilder = ({ registry = Registry.make(), extensions }: SetupGraphBuilderOptions = {}) => {
+  const builder = GraphBuilder.make({ registry });
+  const graph = builder.graph;
+
+  if (extensions) {
+    GraphBuilder.addExtension(builder, extensions);
+  }
+
+  return {
+    registry,
+    builder,
+    graph,
+    addExtensions: (nextExtensions: GraphBuilder.BuilderExtensions) => {
+      GraphBuilder.addExtension(builder, nextExtensions);
+    },
+    expand: async (id: string, relation: Node.RelationInput = 'child') => {
+      Graph.expand(graph, id, relation);
+      await GraphBuilder.flush(builder);
+    },
+    flush: () => GraphBuilder.flush(builder),
+    getConnections: (id: string, relation: Node.RelationInput = 'child') =>
+      registry.get(graph.connections(id, relation)),
+    getNode: (id: string) => Graph.getNode(graph, id).pipe(Option.getOrNull),
+  };
+};