@dxos/app-graph 0.6.13 → 0.6.14-main.1366248

package/src/graph.ts

@@ -7,9 +7,10 @@ import { batch, effect, untracked } from '@preact/signals-core';
 import { asyncTimeout, Trigger } from '@dxos/async';
 import { type ReactiveObject, create } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
+import { log } from '@dxos/log';
 import { nonNullable } from '@dxos/util';
 
-import { type Relation, type Node, type NodeArg, type NodeFilter, isActionLike } from './node';
+import { type Relation, type Node, type NodeArg, type NodeFilter, isActionLike, actionGroupSymbol } from './node';
 
 const graphSymbol = Symbol('graph');
 type DeepWriteable<T> = { -readonly [K in keyof T]: DeepWriteable<T[K]> };
@@ -64,6 +65,15 @@ export type GraphTraversalOptions = {
   expansion?: boolean;
 };
 
+export type GraphParams = {
+  // TODO(wittjosiah): Make data optional instead of omitting.
+  nodes?: Omit<Node, 'data'>[];
+  edges?: Record<string, string[]>;
+  onInitialNode?: Graph['_onInitialNode'];
+  onInitialNodes?: Graph['_onInitialNodes'];
+  onRemoveNode?: Graph['_onRemoveNode'];
+};
+
 /**
  * The Graph represents the structure of the application constructed via plugins.
  */
@@ -85,20 +95,38 @@ export class Graph {
    */
   readonly _edges: Record<string, ReactiveObject<{ inbound: string[]; outbound: string[] }>> = {};
 
-  constructor({
-    onInitialNode,
-    onInitialNodes,
-    onRemoveNode,
-  }: {
-    onInitialNode?: Graph['_onInitialNode'];
-    onInitialNodes?: Graph['_onInitialNodes'];
-    onRemoveNode?: Graph['_onRemoveNode'];
-  } = {}) {
+  constructor({ nodes, edges, onInitialNode, onInitialNodes, onRemoveNode }: GraphParams = {}) {
+    this._nodes[ROOT_ID] = this._constructNode({ id: ROOT_ID, type: ROOT_TYPE, properties: {}, data: null });
+    if (nodes) {
+      nodes.forEach((node) => {
+        if (node.type === ACTION_TYPE) {
+          this._addNode({ ...node, data: () => log.warn('Pickled action invocation') });
+        } else if (node.type === ACTION_GROUP_TYPE) {
+          this._addNode({ ...node, data: actionGroupSymbol });
+        } else {
+          this._addNode(node);
+        }
+      });
+    }
+
+    this._edges[ROOT_ID] = create({ inbound: [], outbound: [] });
+    if (edges) {
+      Object.entries(edges).forEach(([source, edges]) => {
+        edges.forEach((target) => {
+          this._addEdge({ source, target });
+        });
+        this._sortEdges(source, 'outbound', edges);
+      });
+    }
+
     this._onInitialNode = onInitialNode;
     this._onInitialNodes = onInitialNodes;
     this._onRemoveNode = onRemoveNode;
-    this._nodes[ROOT_ID] = this._constructNode({ id: ROOT_ID, type: ROOT_TYPE, properties: {}, data: null });
-    this._edges[ROOT_ID] = create({ inbound: [], outbound: [] });
+  }
+
+  static from(pickle: string, options: Omit<GraphParams, 'nodes' | 'edges'> = {}) {
+    const { nodes, edges } = JSON.parse(pickle);
+    return new Graph({ nodes, edges, ...options });
   }
 
   /**
@@ -138,15 +166,33 @@ export class Graph {
     return toJSON(root);
   }
 
+  pickle() {
+    const nodes = Object.values(this._nodes).map((node) => {
+      return {
+        id: node.id,
+        type: node.type,
+        properties: node.properties,
+      };
+    });
+
+    const edges = Object.fromEntries(
+      Object.entries(this._edges)
+        .map(([id, { outbound }]): [string, string[]] => [id, outbound])
+        .toSorted(([a], [b]) => a.localeCompare(b)),
+    );
+
+    return JSON.stringify({ nodes, edges });
+  }
+
   /**
    * Find the node with the given id in the graph.
    *
    * If a node is not found within the graph and an `onInitialNode` callback is provided,
    * it is called with the id and type of the node, potentially initializing the node.
    */
-  findNode(id: string): Node | undefined {
+  findNode(id: string, expansion = true): Node | undefined {
     const existingNode = this._nodes[id];
-    if (!existingNode) {
+    if (!existingNode && expansion) {
       void this._onInitialNode?.(id);
     }
 

package/src/stories/EchoGraph.stories.tsx

@@ -7,21 +7,21 @@ import '@dxos-theme';
 import { Pause, Play, Plus, Timer } from '@phosphor-icons/react';
 import React, { useEffect, useState } from 'react';
 
-import { type EchoReactiveObject, create } from '@dxos/echo-schema';
-import { registerSignalRuntime } from '@dxos/echo-signals';
-import { faker } from '@dxos/random';
-import { type Client, useClient } from '@dxos/react-client';
 import {
+  create,
+  type Echo,
+  type EchoReactiveObject,
+  type FilterSource,
   type Space,
   SpaceState,
   isSpace,
-  type Echo,
-  type FilterSource,
   type QueryOptions,
   type Query,
-} from '@dxos/react-client/echo';
+} from '@dxos/client/echo';
+import { faker } from '@dxos/random';
+import { type Client, useClient } from '@dxos/react-client';
 import { withClientProvider } from '@dxos/react-client/testing';
-import { Button, DensityProvider, Input, Select, useAsyncEffect } from '@dxos/react-ui';
+import { Button, Input, Select, useAsyncEffect } from '@dxos/react-ui';
 import { getSize, mx } from '@dxos/react-ui-theme';
 import { withTheme } from '@dxos/storybook-utils';
 import { safeParseInt } from '@dxos/util';
@@ -35,8 +35,6 @@ const DEFAULT_PERIOD = 500;
 
 const EMPTY_ARRAY: never[] = [];
 
-registerSignalRuntime();
-
 enum Action {
   CREATE_SPACE = 'CREATE_SPACE',
   CLOSE_SPACE = 'CLOSE_SPACE',
@@ -185,7 +183,7 @@ const runAction = async (client: Client, action: Action) => {
   }
 };
 
-const Story = () => {
+const DefaultStory = () => {
   const [generating, setGenerating] = useState(false);
   const [actionInterval, setActionInterval] = useState(String(DEFAULT_PERIOD));
   const [action, setAction] = useState<Action>();
@@ -211,44 +209,40 @@ const Story = () => {
   return (
     <>
       <div className='flex shrink-0 p-2 space-x-2'>
-        <DensityProvider density='fine'>
-          <Button onClick={() => setGenerating((generating) => !generating)}>
-            {generating ? <Pause /> : <Play />}
-          </Button>
-          <div className='relative' title='mutation period'>
-            <Input.Root>
-              <Input.TextInput
-                autoComplete='off'
-                size={5}
-                classNames='w-[100px] text-right pie-[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))} />
-          </div>
-          <Button onClick={() => action && runAction(client, action)}>
-            <Plus />
-          </Button>
-          <Select.Root value={action?.toString()} onValueChange={(action) => setAction(action as unknown as Action)}>
-            <Select.TriggerButton placeholder='Select value' />
-            <Select.Portal>
-              <Select.Content>
-                <Select.ScrollUpButton />
-                <Select.Viewport>
-                  {Object.keys(actionWeights).map((action) => (
-                    <Select.Option key={action} value={action}>
-                      {action}
-                    </Select.Option>
-                  ))}
-                </Select.Viewport>
-                <Select.ScrollDownButton />
-                <Select.Arrow />
-              </Select.Content>
-            </Select.Portal>
-          </Select.Root>
-        </DensityProvider>
+        <Button onClick={() => setGenerating((generating) => !generating)}>{generating ? <Pause /> : <Play />}</Button>
+        <div className='relative' title='mutation period'>
+          <Input.Root>
+            <Input.TextInput
+              autoComplete='off'
+              size={5}
+              classNames='w-[100px] text-right pie-[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))} />
+        </div>
+        <Button onClick={() => action && runAction(client, action)}>
+          <Plus />
+        </Button>
+        <Select.Root value={action?.toString()} onValueChange={(action) => setAction(action as unknown as Action)}>
+          <Select.TriggerButton placeholder='Select value' />
+          <Select.Portal>
+            <Select.Content>
+              <Select.ScrollUpButton />
+              <Select.Viewport>
+                {Object.keys(actionWeights).map((action) => (
+                  <Select.Option key={action} value={action}>
+                    {action}
+                  </Select.Option>
+                ))}
+              </Select.Viewport>
+              <Select.ScrollDownButton />
+              <Select.Arrow />
+            </Select.Content>
+          </Select.Portal>
+        </Select.Root>
       </div>
       {graph && <Tree data={graph.toJSON()} />}
     </>
@@ -256,7 +250,8 @@ const Story = () => {
 };
 
 export default {
-  title: 'app-graph/EchoGraph',
+  title: 'sdk/app-graph/EchoGraph',
+  render: DefaultStory,
   decorators: [
     withTheme,
     withClientProvider({
@@ -267,7 +262,6 @@ export default {
       },
     }),
   ],
-  render: Story,
 };
 
 export const Default = {};

package/src/stories/Tree.tsx

@@ -10,7 +10,7 @@ import { mx } from '@dxos/react-ui-theme';
 
 export const Tree: FC<{ data?: object }> = ({ data }) => {
   return (
-    <div className='flex overflow-auto ml-2 border-l-2 border-blue-500'>
+    <div className='flex overflow-auto ml-2 border-l-4 border-blue-500'>
       <Node data={data} root />
     </div>
   );
@@ -23,18 +23,18 @@ export const Node: FC<{ data?: any; root?: boolean }> = ({ data, root }) => {
 
   if (Array.isArray(data)) {
     return (
-      <div className='flex flex-col space-y-2'>
+      <div className='flex flex-col space-y-1'>
         {data.map((value, index) => (
-          <KeyValue key={index} label={String(index)} data={value} className='bg-teal-50' />
+          <KeyValue key={index} label={String(index)} data={value} className='' />
         ))}
       </div>
     );
   }
 
   return (
-    <div className='flex flex-col space-y-2'>
+    <div className='flex flex-col space-y-1'>
       {Object.entries(data).map(([key, value]) => (
-        <KeyValue key={key} label={key} data={value} className='bg-blue-50' />
+        <KeyValue key={key} label={key} data={value} className='' />
       ))}
     </div>
   );
@@ -49,7 +49,7 @@ export const KeyValue: FC<{ label: string; data?: any; className?: string }> = (
   return (
     <div className='flex'>
       <Box
-        className={mx('border-blue-200 text-sm select-none cursor-pointer', className)}
+        className={mx('border-blue-500 text-sm select-none cursor-pointer min-w-[6rem]', className)}
         onClick={() => setOpen((open) => !open)}
       >
         {label}
@@ -61,7 +61,7 @@ export const KeyValue: FC<{ label: string; data?: any; className?: string }> = (
 
 const Scalar: FC<{ value: any }> = ({ value }) => {
   return (
-    <Box className='bg-green-50 border-green-200 rounded-r text-sm font-thin'>
+    <Box className='border-green-500 text-sm font-thin'>
       {(value === undefined && 'undefined') ||
         (value === null && 'null') ||
         (typeof value === 'string' && value) ||