@dxos/app-graph 0.6.2-next.5b5129c → 0.6.3-main.0308ae2

package/src/node.ts

@@ -8,16 +8,21 @@ import { type MaybePromise, type MakeOptional } from '@dxos/util';
  * Represents a node in the graph.
  */
 // TODO(wittjosiah): Use Effect Schema.
-export type NodeBase<TData = any, TProperties extends Record<string, any> = Record<string, any>> = {
+export type Node<TData = any, TProperties extends Record<string, any> = Record<string, any>> = Readonly<{
   /**
    * Globally unique ID.
    */
   id: string;
 
+  /**
+   * Typename of the data the node represents.
+   */
+  type: string;
+
   /**
    * Properties of the node relevant to displaying the node.
    */
-  properties: TProperties;
+  properties: Readonly<TProperties>;
 
   /**
    * Data the node represents.
@@ -25,46 +30,14 @@ export type NodeBase<TData = any, TProperties extends Record<string, any> = Reco
   // TODO(burdon): Type system (e.g., minimally provide identifier string vs. TypedObject vs. Graph mixin type system)?
   //  type field would prevent convoluted sniffing of object properties. And allow direct pass-through for ECHO TypedObjects.
   data: TData;
-};
+}>;
 
 export type NodeFilter<T = any, U extends Record<string, any> = Record<string, any>> = (
   node: Node<unknown, Record<string, any>>,
   connectedNode: Node,
 ) => node is Node<T, U>;
 
-export type EdgeDirection = 'outbound' | 'inbound';
-
-export type ConnectedNodes = {
-  /**
-   * Edges that this node is connected to in default order.
-   */
-  edges(params?: { direction?: EdgeDirection }): Readonly<string[]>;
-
-  /**
-   * Nodes that this node is connected to in default order.
-   */
-  nodes<T = any, U extends Record<string, any> = Record<string, any>>(params?: {
-    direction?: EdgeDirection;
-    filter?: NodeFilter<T, U>;
-  }): Node<T>[];
-
-  /**
-   * Get a specific connected node by id.
-   */
-  node(id: string): Node | undefined;
-};
-
-export type ConnectedActions = {
-  /**
-   * Actions or action groups that this node is connected to in default order.
-   */
-  actions(): ActionLike[];
-};
-
-export type Node<TData = any, TProperties extends Record<string, any> = Record<string, any>> = Readonly<
-  Omit<NodeBase<TData, TProperties>, 'properties'> & { properties: Readonly<TProperties> } & ConnectedNodes &
-    ConnectedActions
->;
+export type Relation = 'outbound' | 'inbound';
 
 export const isGraphNode = (data: unknown): data is Node =>
   data && typeof data === 'object' && 'id' in data && 'properties' in data && data.properties
@@ -72,14 +45,14 @@ export const isGraphNode = (data: unknown): data is Node =>
     : false;
 
 export type NodeArg<TData, TProperties extends Record<string, any> = Record<string, any>> = MakeOptional<
-  NodeBase<TData, TProperties>,
+  Node<TData, TProperties>,
   'data' | 'properties'
 > & {
   /** Will automatically add nodes with an edge from this node to each. */
   nodes?: NodeArg<unknown>[];
 
   /** Will automatically add specified edges. */
-  edges?: [string, EdgeDirection][];
+  edges?: [string, Relation][];
 };
 
 //
@@ -96,9 +69,9 @@ export type InvokeParams = {
 export type ActionData = (params: InvokeParams) => MaybePromise<void>;
 
 export type Action<TProperties extends Record<string, any> = Record<string, any>> = Readonly<
-  Omit<NodeBase<ActionData, TProperties>, 'properties'> & {
+  Omit<Node<ActionData, TProperties>, 'properties'> & {
     properties: Readonly<TProperties>;
-  } & ConnectedNodes
+  }
 >;
 
 export const isAction = (data: unknown): data is Action =>
@@ -107,9 +80,9 @@ export const isAction = (data: unknown): data is Action =>
 export const actionGroupSymbol = Symbol('ActionGroup');
 
 export type ActionGroup = Readonly<
-  Omit<NodeBase<typeof actionGroupSymbol, Record<string, any>>, 'properties'> & {
+  Omit<Node<typeof actionGroupSymbol, Record<string, any>>, 'properties'> & {
     properties: Readonly<Record<string, any>>;
-  } & ConnectedActions
+  }
 >;
 
 export const isActionGroup = (data: unknown): data is ActionGroup =>

package/src/stories/EchoGraph.stories.tsx

@@ -5,15 +5,21 @@
 import '@dxosTheme';
 
 import { Pause, Play, Plus, Timer } from '@phosphor-icons/react';
-import { effect } from '@preact/signals-core';
 import React, { useEffect, useState } from 'react';
 
-import { EventSubscriptions } from '@dxos/async';
-import { create, type EchoReactiveObject } from '@dxos/echo-schema';
+import { type EchoReactiveObject, create } from '@dxos/echo-schema';
 import { registerSignalRuntime } from '@dxos/echo-signals';
 import { faker } from '@dxos/random';
 import { Client } from '@dxos/react-client';
-import { type Space, SpaceState } from '@dxos/react-client/echo';
+import {
+  type Space,
+  SpaceState,
+  isSpace,
+  type Echo,
+  type FilterSource,
+  type QueryOptions,
+  type Query,
+} from '@dxos/react-client/echo';
 import { ClientRepeater, TestBuilder } from '@dxos/react-client/testing';
 import { Button, DensityProvider, Input, Select } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
@@ -21,8 +27,8 @@ import { withTheme } from '@dxos/storybook-utils';
 import { safeParseInt } from '@dxos/util';
 
 import { Tree } from './Tree';
-import { type Graph } from '../graph';
-import { GraphBuilder } from '../graph-builder';
+import { GraphBuilder, cleanup, createExtension, memoize, toSignal } from '../graph-builder';
+import { type Node } from '../node';
 
 export default {
   title: 'app-graph/EchoGraph',
@@ -39,89 +45,72 @@ await client.halo.createIdentity();
 await client.spaces.create();
 await client.spaces.create();
 
-const spaceBuilderExtension = (graph: Graph) => {
-  const subscriptions = new EventSubscriptions();
-  const { unsubscribe } = client.spaces.subscribe((spaces) => {
-    subscriptions.clear();
-    spaces.forEach((space) => {
-      subscriptions.add(
-        effect(() => {
-          if (space.state.get() === SpaceState.READY) {
-            graph.addNodes({ id: space.key.toHex(), properties: { label: space.properties.name }, data: space });
-            graph.addEdge({ source: 'root', target: space.key.toHex() });
-          } else {
-            graph.removeNode(space.key.toHex());
-          }
-        }),
-      );
-
-      const query = space.db.query();
-      subscriptions.add(query.subscribe());
-      subscriptions.add(
-        effect(() => {
-          query.objects.forEach((object) => {
-            graph.addEdge({ source: space.key.toHex(), target: object.id });
-          });
-        }),
-      );
-    });
-  });
-
-  return () => {
-    unsubscribe();
-    subscriptions.clear();
-  };
-};
+const EMPTY_ARRAY: never[] = [];
+
+// TODO(wittjosiah): Factor out.
+const memoizeQuery = <T extends EchoReactiveObject<any>>(
+  spaceOrEcho?: Space | Echo,
+  filter?: FilterSource<T>,
+  options?: QueryOptions,
+): T[] => {
+  const key = isSpace(spaceOrEcho) ? spaceOrEcho.id : undefined;
+  const query = memoize(
+    () =>
+      isSpace(spaceOrEcho)
+        ? spaceOrEcho.db.query(filter, options)
+        : (spaceOrEcho?.query(filter, options) as Query<T> | undefined),
+    key,
+  );
+  const unsubscribe = memoize(() => query?.subscribe(), key);
+  cleanup(() => unsubscribe?.());
 
-// TODO(wittjosiah): Hypergraph query isn't working.
-// const objectBuilderExtension = (graph: Graph) => {
-//   const query = client.spaces.query({ type: 'test' });
-//   let previousObjects: Expando[] = [];
-//   return effect(() => {
-//     const removedObjects = previousObjects.filter((object) => !query.objects.includes(object));
-//     previousObjects = query.objects;
-
-//     removedObjects.forEach((object) => graph.removeNode(object.id));
-//     query.objects.forEach((object) => {
-//       console.log('add object');
-//       graph.addNodes({ id: object.id, properties: { label: object.name }, data: object });
-//     });
-//   });
-// };
-
-const objectBuilderExtension = (graph: Graph) => {
-  const subscriptions = new EventSubscriptions();
-  const { unsubscribe } = client.spaces.subscribe((spaces) => {
-    subscriptions.clear();
-    spaces.forEach((space) => {
-      const query = space.db.query({ type: 'test' });
-      subscriptions.add(query.subscribe());
-      let previousObjects: EchoReactiveObject<any>[] = [];
-      subscriptions.add(
-        effect(() => {
-          const removedObjects = previousObjects.filter((object) => !query.objects.includes(object));
-          previousObjects = query.objects;
-
-          removedObjects.forEach((object) => graph.removeNode(object.id));
-          query.objects.forEach((object) => {
-            console.log('add object');
-            graph.addNodes({ id: object.id, properties: { label: object.name }, data: object });
-          });
-        }),
-      );
-    });
-  });
-
-  return () => {
-    unsubscribe();
-    subscriptions.clear();
-  };
+  return query?.objects ?? EMPTY_ARRAY;
 };
 
-const graph = new GraphBuilder()
-  .addExtension('space', spaceBuilderExtension)
-  .addExtension('object', objectBuilderExtension)
-  .build();
+const spaceBuilderExtension = createExtension({
+  id: 'space',
+  filter: (node): node is Node<null> => node.id === 'root',
+  connector: ({ node }) => {
+    const spaces = toSignal(
+      (onChange) => client.spaces.subscribe(() => onChange()).unsubscribe,
+      () => client.spaces.get(),
+    );
+    if (!spaces) {
+      return;
+    }
+
+    return spaces
+      .filter((space) => space.state.get() === SpaceState.SPACE_READY)
+      .map((space) => ({
+        id: space.id,
+        type: 'dxos.org/type/Space',
+        properties: { label: space.properties.name },
+        data: space,
+      }));
+  },
+});
+
+const objectBuilderExtension = createExtension({
+  id: 'object',
+  filter: (node): node is Node<Space> => isSpace(node.data),
+  connector: ({ node }) => {
+    const objects = memoizeQuery(node.data, { type: 'test' });
+    return objects.map((object) => ({
+      id: object.id,
+      type: 'dxos.org/type/test',
+      properties: { label: object.name },
+      data: object,
+    }));
+  },
+});
+
+const graph = new GraphBuilder().addExtension(spaceBuilderExtension).addExtension(objectBuilderExtension).graph;
+
+graph.subscribeTraverse({
+  visitor: (node) => {
+    void graph.expand(node);
+  },
+});
 
 enum Action {
   CREATE_SPACE = 'CREATE_SPACE',
@@ -149,32 +138,31 @@ const randomAction = () => {
   return actionDistribution[Math.floor(Math.random() * actionDistribution.length)];
 };
 
-const getSpace = (): Space | undefined => {
-  const spaces = client.spaces.get().filter((space) => space.state.get() === SpaceState.READY);
-  return spaces[Math.floor(Math.random() * spaces.length)];
+const getRandomSpace = (): Space | undefined => {
+  const spaces = client.spaces.get().filter((space) => space.state.get() === SpaceState.SPACE_READY);
+  const space = spaces[Math.floor(Math.random() * spaces.length)];
+  return space;
 };
 
-const getSpaceWithObjects = (): Space | undefined => {
-  const spaces = client.spaces
-    .get()
-    .filter((space) => space.state.get() === SpaceState.READY)
-    .filter((space) => space.db.query({ type: 'test' }).objects.length > 0);
-
+const getSpaceWithObjects = async (): 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({ type: 'test' }).run()));
+  const spaces = readySpaces.filter((space, index) => spaceQueries[index].objects.length > 0);
   return spaces[Math.floor(Math.random() * spaces.length)];
 };
 
-const runAction = (action: Action) => {
+const runAction = async (action: Action) => {
   switch (action) {
     case Action.CREATE_SPACE:
       void client.spaces.create();
       break;
 
     case Action.CLOSE_SPACE:
-      void getSpace()?.close();
+      void getRandomSpace()?.close();
       break;
 
     case Action.RENAME_SPACE: {
-      const space = getSpace();
+      const space = getRandomSpace();
       if (space) {
         space.properties.name = faker.commerce.productName();
       }
@@ -182,22 +170,22 @@ const runAction = (action: Action) => {
     }
 
     case Action.ADD_OBJECT:
-      getSpace()?.db.add(create({ type: 'test', name: faker.commerce.productName() }));
+      getRandomSpace()?.db.add(create({ type: 'test', name: faker.commerce.productName() }));
       break;
 
     case Action.REMOVE_OBJECT: {
-      const space = getSpaceWithObjects();
+      const space = await getSpaceWithObjects();
       if (space) {
-        const objects = space.db.query({ type: 'test' }).objects;
+        const { objects } = await space.db.query({ type: 'test' }).run();
         space.db.remove(objects[Math.floor(Math.random() * objects.length)]);
       }
       break;
     }
 
     case Action.RENAME_OBJECT: {
-      const space = getSpaceWithObjects();
+      const space = await getSpaceWithObjects();
       if (space) {
-        const objects = space.db.query({ type: 'test' }).objects;
+        const { objects } = await space.db.query({ type: 'test' }).run();
         objects[Math.floor(Math.random() * objects.length)].name = faker.commerce.productName();
       }
       break;

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

@@ -1,12 +0,0 @@
-import { type Graph } from './graph';
-import { type Node, type NodeArg } from './node';
-/**
- * If the condition is true, adds the nodes to the graph, otherwise removes the nodes from the graph.
- */
-export declare const manageNodes: <TData = null, TProperties extends Record<string, any> = Record<string, any>>({ graph, condition, nodes, removeEdges, }: {
-    graph: Graph;
-    condition: boolean;
-    nodes: NodeArg<TData, TProperties>[];
-    removeEdges?: boolean;
-}) => Node<TData, TProperties>[] | void;
-//# sourceMappingURL=helpers.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/helpers.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,KAAK,IAAI,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEjD;;GAEG;AACH,eAAO,MAAM,WAAW,2HAKrB;IACD,KAAK,EAAE,KAAK,CAAC;IACb,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,QAAQ,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,KAAG,KAAK,KAAK,EAAE,WAAW,CAAC,EAAE,GAAG,IAMhC,CAAC"}

package/src/helpers.ts

@@ -1,27 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { type Graph } from './graph';
-import { type Node, type NodeArg } from './node';
-
-/**
- * If the condition is true, adds the nodes to the graph, otherwise removes the nodes from the graph.
- */
-export const manageNodes = <TData = null, TProperties extends Record<string, any> = Record<string, any>>({
-  graph,
-  condition,
-  nodes,
-  removeEdges,
-}: {
-  graph: Graph;
-  condition: boolean;
-  nodes: NodeArg<TData, TProperties>[];
-  removeEdges?: boolean;
-}): Node<TData, TProperties>[] | void => {
-  if (condition) {
-    return graph.addNodes(...nodes);
-  } else {
-    nodes.forEach(({ id }) => graph.removeNode(id, removeEdges));
-  }
-};