@dxos/app-graph 0.6.3-main.9e4e207 → 0.6.3-next.2f65b78

package/src/node.ts

@@ -8,21 +8,16 @@ import { type MaybePromise, type MakeOptional } from '@dxos/util';
  * Represents a node in the graph.
  */
 // TODO(wittjosiah): Use Effect Schema.
-export type Node<TData = any, TProperties extends Record<string, any> = Record<string, any>> = Readonly<{
+export type NodeBase<TData = any, TProperties extends Record<string, any> = Record<string, any>> = {
   /**
    * Globally unique ID.
    */
   id: string;
 
-  /**
-   * Typename of the data the node represents.
-   */
-  type: string;
-
   /**
    * Properties of the node relevant to displaying the node.
    */
-  properties: Readonly<TProperties>;
+  properties: TProperties;
 
   /**
    * Data the node represents.
@@ -30,14 +25,46 @@ export type Node<TData = any, TProperties extends Record<string, any> = Record<s
   // 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 Relation = 'outbound' | 'inbound';
+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 const isGraphNode = (data: unknown): data is Node =>
   data && typeof data === 'object' && 'id' in data && 'properties' in data && data.properties
@@ -45,14 +72,14 @@ export const isGraphNode = (data: unknown): data is Node =>
     : false;
 
 export type NodeArg<TData, TProperties extends Record<string, any> = Record<string, any>> = MakeOptional<
-  Node<TData, TProperties>,
+  NodeBase<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, Relation][];
+  edges?: [string, EdgeDirection][];
 };
 
 //
@@ -69,9 +96,9 @@ export type InvokeParams = {
 export type ActionData = (params: InvokeParams) => MaybePromise<void>;
 
 export type Action<TProperties extends Record<string, any> = Record<string, any>> = Readonly<
-  Omit<Node<ActionData, TProperties>, 'properties'> & {
+  Omit<NodeBase<ActionData, TProperties>, 'properties'> & {
     properties: Readonly<TProperties>;
-  }
+  } & ConnectedNodes
 >;
 
 export const isAction = (data: unknown): data is Action =>
@@ -80,9 +107,9 @@ export const isAction = (data: unknown): data is Action =>
 export const actionGroupSymbol = Symbol('ActionGroup');
 
 export type ActionGroup = Readonly<
-  Omit<Node<typeof actionGroupSymbol, Record<string, any>>, 'properties'> & {
+  Omit<NodeBase<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,21 +5,15 @@
 import '@dxosTheme';
 
 import { Pause, Play, Plus, Timer } from '@phosphor-icons/react';
+import { effect } from '@preact/signals-core';
 import React, { useEffect, useState } from 'react';
 
-import { type EchoReactiveObject, create } from '@dxos/echo-schema';
+import { EventSubscriptions } from '@dxos/async';
+import { create, type EchoReactiveObject } 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,
-  isSpace,
-  type Echo,
-  type FilterSource,
-  type QueryOptions,
-  type Query,
-} from '@dxos/react-client/echo';
+import { type Space, SpaceState } 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';
@@ -27,8 +21,8 @@ import { withTheme } from '@dxos/storybook-utils';
 import { safeParseInt } from '@dxos/util';
 
 import { Tree } from './Tree';
-import { GraphBuilder, cleanup, createExtension, memoize, toSignal } from '../graph-builder';
-import { type Node } from '../node';
+import { type Graph } from '../graph';
+import { GraphBuilder } from '../graph-builder';
 
 export default {
   title: 'app-graph/EchoGraph',
@@ -45,66 +39,89 @@ await client.halo.createIdentity();
 await client.spaces.create();
 await client.spaces.create();
 
-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?.());
+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 query?.objects ?? EMPTY_ARRAY;
+  return () => {
+    unsubscribe();
+    subscriptions.clear();
+  };
 };
 
-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;
-    }
+// 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;
 
-    return spaces
-      .filter((space) => space.state.get() === SpaceState.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;
+          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();
+  };
+};
+
+const graph = new GraphBuilder()
+  .addExtension('space', spaceBuilderExtension)
+  .addExtension('object', objectBuilderExtension)
+  .build();
 
 enum Action {
   CREATE_SPACE = 'CREATE_SPACE',
@@ -132,31 +149,32 @@ const randomAction = () => {
   return actionDistribution[Math.floor(Math.random() * actionDistribution.length)];
 };
 
-const getRandomSpace = (): Space | undefined => {
+const getSpace = (): Space | undefined => {
   const spaces = client.spaces.get().filter((space) => space.state.get() === SpaceState.READY);
-  const space = spaces[Math.floor(Math.random() * spaces.length)];
-  return space;
+  return spaces[Math.floor(Math.random() * spaces.length)];
 };
 
-const getSpaceWithObjects = async (): Promise<Space | undefined> => {
-  const readySpaces = client.spaces.get().filter((space) => space.state.get() === SpaceState.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);
+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);
+
   return spaces[Math.floor(Math.random() * spaces.length)];
 };
 
-const runAction = async (action: Action) => {
+const runAction = (action: Action) => {
   switch (action) {
     case Action.CREATE_SPACE:
       void client.spaces.create();
       break;
 
     case Action.CLOSE_SPACE:
-      void getRandomSpace()?.close();
+      void getSpace()?.close();
       break;
 
     case Action.RENAME_SPACE: {
-      const space = getRandomSpace();
+      const space = getSpace();
       if (space) {
         space.properties.name = faker.commerce.productName();
       }
@@ -164,22 +182,22 @@ const runAction = async (action: Action) => {
     }
 
     case Action.ADD_OBJECT:
-      getRandomSpace()?.db.add(create({ type: 'test', name: faker.commerce.productName() }));
+      getSpace()?.db.add(create({ type: 'test', name: faker.commerce.productName() }));
       break;
 
     case Action.REMOVE_OBJECT: {
-      const space = await getSpaceWithObjects();
+      const space = getSpaceWithObjects();
       if (space) {
-        const { objects } = await space.db.query({ type: 'test' }).run();
+        const objects = space.db.query({ type: 'test' }).objects;
         space.db.remove(objects[Math.floor(Math.random() * objects.length)]);
       }
       break;
     }
 
     case Action.RENAME_OBJECT: {
-      const space = await getSpaceWithObjects();
+      const space = getSpaceWithObjects();
       if (space) {
-        const { objects } = await space.db.query({ type: 'test' }).run();
+        const objects = space.db.query({ type: 'test' }).objects;
         objects[Math.floor(Math.random() * objects.length)].name = faker.commerce.productName();
       }
       break;
@@ -243,7 +261,7 @@ const EchoGraphStory = () => {
           </Select.Root>
         </DensityProvider>
       </div>
-      <Tree data={graph.toJSON({ onlyLoaded: false })} />
+      <Tree data={graph.toJSON()} />
     </>
   );
 };

package/dist/types/src/graph-builder.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=graph-builder.test.d.ts.map

package/dist/types/src/graph-builder.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"graph-builder.test.d.ts","sourceRoot":"","sources":["../../../src/graph-builder.test.ts"],"names":[],"mappings":""}