@dxos/app-graph 0.8.3 → 0.8.4-main.28f8d3d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/app-graph",
-  "version": "0.8.3",
+  "version": "0.8.4-main.28f8d3d",
   "description": "Constructs knowledge graphs for the purpose of building applications on top of",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -10,6 +10,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
@@ -26,44 +27,42 @@
   "dependencies": {
     "@preact/signals-core": "^1.9.0",
     "main-thread-scheduling": "^14.1.1",
-    "@dxos/async": "0.8.3",
-    "@dxos/debug": "0.8.3",
-    "@dxos/echo": "0.8.3",
-    "@dxos/invariant": "0.8.3",
-    "@dxos/echo-signals": "0.8.3",
-    "@dxos/echo-schema": "0.8.3",
-    "@dxos/live-object": "0.8.3",
-    "@dxos/util": "0.8.3",
-    "@dxos/log": "0.8.3"
+    "@dxos/async": "0.8.4-main.28f8d3d",
+    "@dxos/debug": "0.8.4-main.28f8d3d",
+    "@dxos/echo": "0.8.4-main.28f8d3d",
+    "@dxos/echo-schema": "0.8.4-main.28f8d3d",
+    "@dxos/echo-signals": "0.8.4-main.28f8d3d",
+    "@dxos/invariant": "0.8.4-main.28f8d3d",
+    "@dxos/log": "0.8.4-main.28f8d3d",
+    "@dxos/live-object": "0.8.4-main.28f8d3d",
+    "@dxos/util": "0.8.4-main.28f8d3d"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
+    "@effect-rx/rx-react": "0.38.0",
+    "@effect/platform": "0.90.2",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "3.14.21",
+    "effect": "3.17.7",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.8.3",
-    "@dxos/react-client": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-list": "0.8.3",
-    "@dxos/echo-db": "0.8.3",
-    "@dxos/react-ui-tabs": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3"
+    "@dxos/echo-db": "0.8.4-main.28f8d3d",
+    "@dxos/random": "0.8.4-main.28f8d3d",
+    "@dxos/react-client": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-list": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-theme": "0.8.4-main.28f8d3d",
+    "@dxos/storybook-utils": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-tabs": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui": "0.8.4-main.28f8d3d"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
-    "@effect/platform": "0.80.12",
-    "@phosphor-icons/react": "^2.1.5",
+    "@effect/platform": "^0.80.12",
     "effect": "3.14.21",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3"
+    "@dxos/react-ui": "0.8.4-main.28f8d3d",
+    "@dxos/react-ui-theme": "0.8.4-main.28f8d3d"
   },
   "publishConfig": {
     "access": "public"

package/src/graph-builder.test.ts

@@ -6,10 +6,10 @@ import { Registry, Rx } from '@effect-rx/rx-react';
 import { Option, pipe } from 'effect';
 import { describe, expect, onTestFinished, test } from 'vitest';
 
-import { sleep, Trigger } from '@dxos/async';
+import { Trigger, sleep } from '@dxos/async';
 
 import { ROOT_ID } from './graph';
-import { createExtension, GraphBuilder } from './graph-builder';
+import { GraphBuilder, createExtension } from './graph-builder';
 import { type Node } from './node';
 
 const exampleId = (id: number) => `dx:test:${id}`;
@@ -17,6 +17,63 @@ const EXAMPLE_ID = exampleId(1);
 const EXAMPLE_TYPE = 'dxos.org/type/example';
 
 describe('GraphBuilder', () => {
+  describe('resolver', () => {
+    test('works', async () => {
+      const registry = Registry.make();
+      const builder = new GraphBuilder({ registry });
+      const graph = builder.graph;
+
+      {
+        const node = graph.getNode(EXAMPLE_ID).pipe(Option.getOrNull);
+        expect(node).to.be.null;
+      }
+
+      builder.addExtension(
+        createExtension({
+          id: 'resolver',
+          resolver: () => {
+            console.log('resolver');
+            return Rx.make({ id: EXAMPLE_ID, type: EXAMPLE_TYPE, data: 1 });
+          },
+        }),
+      );
+      await graph.initialize(EXAMPLE_ID);
+
+      {
+        const node = graph.getNode(EXAMPLE_ID).pipe(Option.getOrNull);
+        expect(node?.id).to.equal(EXAMPLE_ID);
+        expect(node?.type).to.equal(EXAMPLE_TYPE);
+        expect(node?.data).to.equal(1);
+      }
+    });
+
+    test('updates', async () => {
+      const registry = Registry.make();
+      const builder = new GraphBuilder({ registry });
+      const name = Rx.make('default');
+      builder.addExtension(
+        createExtension({
+          id: 'resolver',
+          resolver: () => Rx.make((get) => ({ id: EXAMPLE_ID, type: EXAMPLE_TYPE, data: get(name) })),
+        }),
+      );
+      const graph = builder.graph;
+      await graph.initialize(EXAMPLE_ID);
+
+      {
+        const node = graph.getNode(EXAMPLE_ID).pipe(Option.getOrNull);
+        expect(node?.data).to.equal('default');
+      }
+
+      registry.set(name, 'updated');
+
+      {
+        const node = graph.getNode(EXAMPLE_ID).pipe(Option.getOrNull);
+        expect(node?.data).to.equal('updated');
+      }
+    });
+  });
+
   describe('connector', () => {
     test('works', () => {
       const registry = Registry.make();

package/src/graph-builder.ts

@@ -4,14 +4,19 @@
 
 import { Registry, Rx } from '@effect-rx/rx-react';
 import { effect } from '@preact/signals-core';
-import { Array, type Option, pipe, Record } from 'effect';
+import { Array, Option, Record, pipe } from 'effect';
 
-import { type MulticastObservable, type CleanupFn } from '@dxos/async';
+import { type CleanupFn, type MulticastObservable, type Trigger } from '@dxos/async';
 import { log } from '@dxos/log';
-import { byPosition, getDebugName, isNode, isNonNullable, type MaybePromise, type Position } from '@dxos/util';
+import { type MaybePromise, type Position, byPosition, getDebugName, isNode, isNonNullable } from '@dxos/util';
 
-import { ACTION_GROUP_TYPE, ACTION_TYPE, Graph, ROOT_ID, type GraphParams, type ExpandableGraph } from './graph';
-import { actionGroupSymbol, type ActionData, type Node, type NodeArg, type Relation } from './node';
+import { ACTION_GROUP_TYPE, ACTION_TYPE, type ExpandableGraph, Graph, type GraphParams, ROOT_ID } from './graph';
+import { type ActionData, type Node, type NodeArg, type Relation, actionGroupSymbol } from './node';
+
+/**
+ * Graph builder extension for adding nodes to the graph based on a node id.
+ */
+export type ResolverExtension = (id: string) => Rx.Rx<NodeArg<any> | null>;
 
 /**
  * Graph builder extension for adding nodes to the graph based on a connection to an existing node.
@@ -49,8 +54,7 @@ export type CreateExtensionOptions = {
   id: string;
   relation?: Relation;
   position?: Position;
-  // TODO(wittjosiah): On initialize to restore state from cache.
-  // resolver?: ResolverExtension;
+  resolver?: ResolverExtension;
   connector?: ConnectorExtension;
   actions?: ActionsExtension;
   actionGroups?: ActionGroupsExtension;
@@ -64,12 +68,16 @@ export const createExtension = (extension: CreateExtensionOptions): BuilderExten
     id,
     position = 'static',
     relation = 'outbound',
+    resolver: _resolver,
     connector: _connector,
     actions: _actions,
     actionGroups: _actionGroups,
   } = extension;
   const getId = (key: string) => `${id}/${key}`;
 
+  const resolver =
+    _resolver && Rx.family((id: string) => _resolver(id).pipe(Rx.withLabel(`graph-builder:_resolver:${id}`)));
+
   const connector =
     _connector &&
     Rx.family((node: Rx.Rx<Option.Option<Node>>) =>
@@ -87,7 +95,7 @@ export const createExtension = (extension: CreateExtensionOptions): BuilderExten
     Rx.family((node: Rx.Rx<Option.Option<Node>>) => _actions(node).pipe(Rx.withLabel(`graph-builder:_actions:${id}`)));
 
   return [
-    // resolver ? { id: getId('resolver'), position, resolver } : undefined,
+    resolver ? { id: getId('resolver'), position, resolver } : undefined,
     connector
       ? ({
           id: getId('connector'),
@@ -157,7 +165,7 @@ export type BuilderExtension = Readonly<{
   id: string;
   position: Position;
   relation?: Relation; // Only for connector.
-  // resolver?: ResolverExtension;
+  resolver?: ResolverExtension;
   connector?: (node: Rx.Rx<Option.Option<Node>>) => Rx.Rx<NodeArg<any>[]>;
 }>;
 
@@ -179,12 +187,12 @@ export const flattenExtensions = (extension: BuilderExtensions, acc: BuilderExte
 //   Should track LRU nodes that are not in the set/radius and remove them beyond a certain threshold.
 export class GraphBuilder {
   // TODO(wittjosiah): Use Context.
-  private readonly _connectorSubscriptions = new Map<string, CleanupFn>();
+  private readonly _subscriptions = new Map<string, CleanupFn>();
   private readonly _extensions = Rx.make(Record.empty<string, BuilderExtension>()).pipe(
     Rx.keepAlive,
     Rx.withLabel('graph-builder:extensions'),
   );
-
+  private readonly _initialized: Record<string, Trigger> = {};
   private readonly _registry: Registry.Registry;
   private readonly _graph: Graph;
 
@@ -194,7 +202,7 @@ export class GraphBuilder {
       ...params,
       registry: this._registry,
       onExpand: (id, relation) => this._onExpand(id, relation),
-      // onInitialize: (id) => this._onInitialize(id),
+      onInitialize: (id) => this._onInitialize(id),
       onRemoveNode: (id) => this._onRemoveNode(id),
     });
   }
@@ -275,10 +283,25 @@ export class GraphBuilder {
   }
 
   destroy(): void {
-    this._connectorSubscriptions.forEach((unsubscribe) => unsubscribe());
-    this._connectorSubscriptions.clear();
+    this._subscriptions.forEach((unsubscribe) => unsubscribe());
+    this._subscriptions.clear();
   }
 
+  private readonly _resolvers = Rx.family<string, Rx.Rx<Option.Option<NodeArg<any>>>>((id) => {
+    return Rx.make((get) => {
+      return pipe(
+        get(this._extensions),
+        Record.values,
+        Array.sortBy(byPosition),
+        Array.map(({ resolver }) => resolver),
+        Array.filter(isNonNullable),
+        Array.map((resolver) => get(resolver(id))),
+        Array.filter(isNonNullable),
+        Array.head,
+      );
+    });
+  });
+
   private readonly _connectors = Rx.family<string, Rx.Rx<NodeArg<any>[]>>((key) => {
     return Rx.make((get) => {
       const [id, relation] = key.split('+');
@@ -341,17 +364,38 @@ export class GraphBuilder {
       { immediate: true },
     );
 
-    this._connectorSubscriptions.set(id, cancel);
+    this._subscriptions.set(id, cancel);
   }
 
-  // TODO(wittjosiah): On initialize to restore state from cache.
-  // private async _onInitialize(id: string) {
-  //   log('onInitialize', { id });
-  // }
+  // TODO(wittjosiah): If the same node is added by a connector, the resolver should probably cancel itself?
+  private async _onInitialize(id: string) {
+    log('onInitialize', { id });
+    const resolver = this._resolvers(id);
+
+    const cancel = this._registry.subscribe(
+      resolver,
+      (node) => {
+        const trigger = this._initialized[id];
+        Option.match(node, {
+          onSome: (node) => {
+            this._graph.addNodes([node]);
+            trigger?.wake();
+          },
+          onNone: () => {
+            trigger?.wake();
+            this._graph.removeNodes([id]);
+          },
+        });
+      },
+      { immediate: true },
+    );
+
+    this._subscriptions.set(id, cancel);
+  }
 
   private _onRemoveNode(id: string): void {
-    this._connectorSubscriptions.get(id)?.();
-    this._connectorSubscriptions.delete(id);
+    this._subscriptions.get(id)?.();
+    this._subscriptions.delete(id);
   }
 }
 

package/src/graph.test.ts

@@ -6,7 +6,7 @@ import { Registry, Rx } from '@effect-rx/rx-react';
 import { Option } from 'effect';
 import { assert, describe, expect, onTestFinished, test } from 'vitest';
 
-import { getGraph, Graph, ROOT_ID, ROOT_TYPE } from './graph';
+import { Graph, ROOT_ID, ROOT_TYPE, getGraph } from './graph';
 import { type Node } from './node';
 
 const exampleId = (id: number) => `dx:test:${id}`;

package/src/graph.ts

@@ -3,15 +3,15 @@
 //
 
 import { Registry, Rx } from '@effect-rx/rx-react';
-import { Option, pipe, Record } from 'effect';
+import { Option, Record, pipe } from 'effect';
 
 import { Event, Trigger } from '@dxos/async';
 import { todo } from '@dxos/debug';
 import { invariant } from '@dxos/invariant';
 import { log } from '@dxos/log';
-import { isNonNullable, type MakeOptional } from '@dxos/util';
+import { type MakeOptional, isNonNullable } from '@dxos/util';
 
-import { type NodeArg, type Node, type Relation, type Action, type ActionGroup } from './node';
+import { type Action, type ActionGroup, type Node, type NodeArg, type Relation } from './node';
 
 const graphSymbol = Symbol('graph');
 type DeepWriteable<T> = { -readonly [K in keyof T]: T[K] extends object ? DeepWriteable<T[K]> : T[K] };
@@ -59,8 +59,7 @@ export type GraphParams = {
   nodes?: MakeOptional<Node, 'data' | 'cacheable'>[];
   edges?: Record<string, Edges>;
   onExpand?: Graph['_onExpand'];
-  // TODO(wittjosiah): On initialize to restore state from cache.
-  // onInitialize?: Graph['_onInitialize'];
+  onInitialize?: Graph['_onInitialize'];
   onRemoveNode?: Graph['_onRemoveNode'];
 };
 
@@ -166,7 +165,7 @@ export interface ExpandableGraph extends ReadableGraph {
    *
    * Fires the `onInitialize` callback to provide initial data for a node.
    */
-  // initialize(id: string): Promise<void>;
+  initialize(id: string): Promise<void>;
 
   /**
    * Expand a node in the graph.
@@ -230,7 +229,7 @@ export class Graph implements WritableGraph {
   readonly onNodeChanged = new Event<{ id: string; node: Option.Option<Node> }>();
 
   private readonly _onExpand?: (id: string, relation: Relation) => void;
-  // private readonly _onInitialize?: (id: string) => Promise<void>;
+  private readonly _onInitialize?: (id: string) => Promise<void>;
   private readonly _onRemoveNode?: (id: string) => void;
 
   private readonly _registry: Registry.Registry;
@@ -309,8 +308,9 @@ export class Graph implements WritableGraph {
     }).pipe(Rx.withLabel(`graph:json:${id}`));
   });
 
-  constructor({ registry, nodes, edges, onExpand, onRemoveNode }: GraphParams = {}) {
+  constructor({ registry, nodes, edges, onInitialize, onExpand, onRemoveNode }: GraphParams = {}) {
     this._registry = registry ?? Registry.make();
+    this._onInitialize = onInitialize;
     this._onExpand = onExpand;
     this._onRemoveNode = onRemoveNode;
 
@@ -379,15 +379,14 @@ export class Graph implements WritableGraph {
     return this._registry.get(this.edges(id));
   }
 
-  // TODO(wittjosiah): On initialize to restore state from cache.
-  // async initialize(id: string) {
-  //   const initialized = Record.get(this._initialized, id).pipe(Option.getOrElse(() => false));
-  //   log('initialize', { id, initialized });
-  //   if (!initialized) {
-  //     await this._onInitialize?.(id);
-  //     Record.set(this._initialized, id, true);
-  //   }
-  // }
+  async initialize(id: string) {
+    const initialized = Record.get(this._initialized, id).pipe(Option.getOrElse(() => false));
+    log('initialize', { id, initialized });
+    if (!initialized) {
+      await this._onInitialize?.(id);
+      Record.set(this._initialized, id, true);
+    }
+  }
 
   expand(id: string, relation: Relation = 'outbound'): void {
     const key = `${id}$${relation}`;

package/src/node.ts

@@ -2,7 +2,9 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type MaybePromise, type MakeOptional } from '@dxos/util';
+import { type MakeOptional, type MaybePromise } from '@dxos/util';
+
+import { ACTION_GROUP_TYPE, ACTION_TYPE } from './graph';
 
 /**
  * Represents a node in the graph.
@@ -84,7 +86,7 @@ export type Action<TProperties extends Record<string, any> = Record<string, any>
 >;
 
 export const isAction = (data: unknown): data is Action =>
-  isGraphNode(data) ? typeof data.data === 'function' : false;
+  isGraphNode(data) ? typeof data.data === 'function' && data.type === ACTION_TYPE : false;
 
 export const actionGroupSymbol = Symbol('ActionGroup');
 
@@ -95,7 +97,7 @@ export type ActionGroup<TProperties extends Record<string, any> = Record<string,
 >;
 
 export const isActionGroup = (data: unknown): data is ActionGroup =>
-  isGraphNode(data) ? data.data === actionGroupSymbol : false;
+  isGraphNode(data) ? data.data === actionGroupSymbol && data.type === ACTION_GROUP_TYPE : false;
 
 export type ActionLike = Action | ActionGroup;
 

package/src/signals-integration.test.ts

@@ -14,7 +14,7 @@ import { registerSignalsRuntime } from '@dxos/echo-signals';
 import { live } from '@dxos/live-object';
 
 import { ROOT_ID } from './graph';
-import { createExtension, GraphBuilder, rxFromSignal } from './graph-builder';
+import { GraphBuilder, createExtension, rxFromSignal } from './graph-builder';
 import { rxFromQuery } from './testing';
 
 registerSignalsRuntime();

package/src/stories/EchoGraph.stories.tsx

@@ -5,38 +5,38 @@
 import '@dxos-theme';
 
 import { type Registry, RegistryContext, Rx, useRxValue } from '@effect-rx/rx-react';
-import { Pause, Play, Plus, Timer } from '@phosphor-icons/react';
+import { type Meta } from '@storybook/react-vite';
 import { Option, pipe } from 'effect';
 import React, { type PropsWithChildren, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 
 import {
-  live,
-  isSpace,
+  Expando,
+  Filter,
+  type Live,
   Query,
   type QueryResult,
   type Space,
   SpaceState,
-  Expando,
-  type Live,
-  Filter,
+  isSpace,
+  live,
 } from '@dxos/client/echo';
 import { Obj, Type } from '@dxos/echo';
 import { faker } 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 { Icon, IconButton, 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 { 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';
 
+import { JsonTree } from './Tree';
+
 const DEFAULT_PERIOD = 500;
 
 enum Action {
@@ -205,7 +205,11 @@ 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
@@ -217,11 +221,9 @@ const Controls = ({ children }: PropsWithChildren) => {
               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 inline-end-1 block-start-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,10 +247,9 @@ const Controls = ({ children }: PropsWithChildren) => {
   );
 };
 
-export default {
+const meta: Meta = {
   title: 'sdk/app-graph/EchoGraph',
   decorators: [
-    withTheme,
     withClientProvider({
       createIdentity: true,
       onIdentityCreated: async ({ client }) => {
@@ -256,9 +257,12 @@ export default {
         await client.spaces.create();
       },
     }),
+    withTheme,
   ],
 };
 
+export default meta;
+
 export const JsonView = {
   render: () => {
     const client = useClient();
@@ -372,122 +376,3 @@ export const TreeView = {
     );
   },
 };
-
-// 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;
-      },
-      [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);
-        }
-
-        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;
-      },
-      [state],
-    );
-
-    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>
-      </>
-    );
-  },
-};