@dxos/react-ui-canvas-compute 0.8.1-main.ae460ac → 0.8.1-main.ba2dec9

package/src/compute.stories.tsx

@@ -10,7 +10,6 @@ import React, { type PropsWithChildren, useEffect, useMemo, useRef, useState } f
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { capabilities, createEdgeServices } from '@dxos/artifact-testing';
 import { OllamaClient } from '@dxos/assistant';
-import { type UnsubscribeCallback } from '@dxos/async';
 import { EdgeGpt, type ComputeGraphModel, type ComputeNode, type GraphDiagnostic } from '@dxos/conductor';
 import { withClientProvider } from '@dxos/react-client/testing';
 import { Select, Toolbar } from '@dxos/react-ui';
@@ -23,7 +22,7 @@ import { withLayout, withTheme } from '@dxos/storybook-utils';
 import { DiagnosticOverlay } from './components';
 import { ComputeShapeLayout } from './compute-layout';
 import { type ComputeGraphController } from './graph';
-import { ComputeContext, useGraphMonitor } from './hooks';
+import { ComputeContext, useComputeGraphController, useGraphMonitor } from './hooks';
 import { computeShapes } from './registry';
 import { type ComputeShape } from './shapes';
 import {
@@ -43,35 +42,24 @@ import {
 
 const sidebarTypes: NonNullable<RenderProps['sidebar']>[] = ['canvas', 'compute', 'controller', 'selected'] as const;
 
-// TODO(burdon): Move to async/context?
-const combine = (...cbs: UnsubscribeCallback[]) => {
-  return () => {
-    for (const cb of cbs) {
-      cb();
-    }
-  };
-};
-
 type RenderProps = EditorRootProps<ComputeShape> &
   PropsWithChildren<{
     init?: boolean;
     sidebar?: 'canvas' | 'compute' | 'controller' | 'selected';
     computeGraph?: ComputeGraphModel;
-    controller?: ComputeGraphController;
+    controller?: ComputeGraphController | null;
   }>;
 
 const Render = ({
   id = 'test',
   children,
   graph,
-  controller,
+  controller = null,
   init,
   sidebar: _sidebar,
   registry,
   ...props
 }: RenderProps) => {
-  const [, forceUpdate] = useState({});
-
   const editorRef = useRef<EditorController>(null);
 
   // Selection.
@@ -102,41 +90,7 @@ const Render = ({
   }, [graph, controller, sidebar, selected]);
 
   // Controller.
-  useEffect(() => {
-    if (!controller || !graph) {
-      return;
-    }
-
-    void controller.open();
-    const off = combine(
-      controller.update.on(() => {
-        void editorRef.current?.update();
-        forceUpdate({});
-      }),
-
-      // TODO(burdon): Every node is called on every update.
-      controller.output.on(({ nodeId, property, value }) => {
-        if (value.type === 'not-executed') {
-          // If the node didn't execute, don't trigger.
-          return;
-        }
-
-        const edge = graph.edges.find((edge) => {
-          const source = graph.getNode(edge.source);
-          return (source as ComputeShape).node === nodeId && edge.output === property;
-        });
-
-        if (edge) {
-          void editorRef.current?.action?.({ type: 'trigger', edges: [edge] });
-        }
-      }),
-    );
-
-    return () => {
-      void controller.close();
-      off();
-    };
-  }, [graph, controller]);
+  useComputeGraphController({ controller, graph, editorRef });
 
   // Sync monitor.
   const graphMonitor = useGraphMonitor(controller?.graph);

package/src/hooks/index.ts

@@ -3,5 +3,6 @@
 //
 
 export * from './compute-context';
+export * from './useComputeGraphController';
 export * from './useComputeNodeState';
 export * from './useGraphMonitor';

package/src/hooks/useComputeGraphController.ts

@@ -0,0 +1,65 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type RefObject, useEffect, useState } from 'react';
+
+import { type UnsubscribeCallback } from '@dxos/async';
+import { type EditorRootProps, type EditorController } from '@dxos/react-ui-canvas-editor';
+
+import { type ComputeGraphController } from '../graph';
+import { type ComputeShape } from '../shapes';
+
+// TODO(burdon): Move to async/context?
+const combine = (...cbs: UnsubscribeCallback[]) => {
+  return () => {
+    for (const cb of cbs) {
+      cb();
+    }
+  };
+};
+
+export type UseComputeGraphControllerOptions = Pick<EditorRootProps<ComputeShape>, 'graph'> & {
+  controller: ComputeGraphController | null;
+  editorRef: RefObject<EditorController>;
+};
+
+export const useComputeGraphController = ({ controller, graph, editorRef }: UseComputeGraphControllerOptions) => {
+  const [, forceUpdate] = useState({});
+
+  useEffect(() => {
+    if (!controller || !graph) {
+      return;
+    }
+
+    void controller.open();
+    const off = combine(
+      controller.update.on(() => {
+        void editorRef.current?.update();
+        forceUpdate({});
+      }),
+
+      // TODO(burdon): Every node is called on every update.
+      controller.output.on(({ nodeId, property, value }) => {
+        if (value.type === 'not-executed') {
+          // If the node didn't execute, don't trigger.
+          return;
+        }
+
+        const edge = graph.edges.find((edge) => {
+          const source = graph.getNode(edge.source);
+          return (source as ComputeShape).node === nodeId && edge.output === property;
+        });
+
+        if (edge) {
+          void editorRef.current?.action?.({ type: 'trigger', edges: [edge] });
+        }
+      }),
+    );
+
+    return () => {
+      void controller.close();
+      off();
+    };
+  }, [graph, controller]);
+};

package/src/shapes/Function.tsx

@@ -6,7 +6,7 @@ import React, { useCallback, useRef } from 'react';
 
 import { AnyOutput, FunctionInput } from '@dxos/conductor';
 import { getSnapshot, S } from '@dxos/echo-schema';
-import { FunctionType, ScriptType } from '@dxos/functions';
+import { FunctionType, ScriptType } from '@dxos/functions/types';
 import { useClient } from '@dxos/react-client';
 import { Filter, makeRef, parseId } from '@dxos/react-client/echo';
 import {

package/src/shapes/Trigger.tsx

@@ -22,7 +22,7 @@ import {
   TriggerKind,
   type TriggerType,
   type WebhookTrigger,
-} from '@dxos/functions';
+} from '@dxos/functions/types';
 import { DXN, SpaceId } from '@dxos/keys';
 import { create, makeRef, useSpace } from '@dxos/react-client/echo';
 import { Select, type SelectRootProps } from '@dxos/react-ui';

package/src/testing/circuits.ts

@@ -37,7 +37,10 @@ import {
   createTemplate,
 } from '../shapes';
 
-export const createComputeGraphController = (graph?: CanvasGraphModel<ComputeShape>, services?: Partial<Services>) => {
+export const createComputeGraphController = (
+  graph = CanvasGraphModel.create<ComputeShape>(),
+  services?: Partial<Services>,
+) => {
   const computeGraph = createComputeGraph(graph);
   const controller = new ComputeGraphController(computeGraph);
   controller.setServices(services ?? {});