@dxos/react-ui-canvas-compute 0.7.5-labs.071a3e2

package/src/hooks/useGraphMonitor.ts

@@ -0,0 +1,133 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { useMemo } from 'react';
+
+import { type ComputeEdge, ComputeGraphModel, type ComputeNode, DEFAULT_INPUT, DEFAULT_OUTPUT } from '@dxos/conductor';
+import { ObjectId } from '@dxos/echo-schema';
+import { invariant } from '@dxos/invariant';
+import { DXN } from '@dxos/keys';
+import { getSpace } from '@dxos/react-client/echo';
+import { type GraphMonitor, type CanvasGraphModel, type Connection } from '@dxos/react-ui-canvas-editor';
+import { nonNullable } from '@dxos/util';
+
+import { createComputeNode, isValidComputeNode } from '../graph';
+import { type ComputeShape, type TriggerShape } from '../shapes';
+
+/**
+ * Map canvas edge to compute edge.
+ */
+export const mapEdge = (
+  graph: CanvasGraphModel,
+  { source, target, output = DEFAULT_OUTPUT, input = DEFAULT_INPUT }: Connection,
+): ComputeEdge => {
+  const sourceNode = graph.findNode(source) as ComputeShape;
+  const targetNode = graph.findNode(target) as ComputeShape;
+  invariant(sourceNode?.node);
+  invariant(targetNode?.node);
+
+  return {
+    id: ObjectId.random(),
+    source: sourceNode.node,
+    target: targetNode.node,
+    output,
+    input,
+  };
+};
+
+/**
+ * Listens for changes to the graph and updates the compute graph.
+ * @param model Compute graph to update on change.
+ */
+// TODO(burdon): Generalize into sync function.
+export const useGraphMonitor = (model?: ComputeGraphModel): GraphMonitor<ComputeShape> => {
+  return useMemo<GraphMonitor<ComputeShape>>(() => {
+    return {
+      onCreate: ({ node }) => {
+        if (!model) {
+          return;
+        }
+
+        // Ignore shapes that don't have a corresponding node factory.
+        invariant(node.type);
+        if (!isValidComputeNode(node.type)) {
+          return;
+        }
+
+        const computeNode = createComputeNode(node);
+        if (node.type === 'trigger') {
+          linkTriggerToCompute(model, computeNode, node as TriggerShape);
+        }
+        model.addNode(computeNode);
+        node.node = computeNode.id;
+      },
+
+      onLink: ({ graph, edge }) => {
+        if (model) {
+          model.addEdge(mapEdge(graph, edge));
+        }
+      },
+
+      onDelete: ({ subgraph }) => {
+        if (model) {
+          const nodeIds = subgraph.nodes.map((shape) => (shape as ComputeShape).node) as string[];
+
+          // NOTE(ZaymonFC): Based on the information we have, this is O(edges to remove * compute edges).
+          const edgeIds = subgraph.edges
+            .map(({ source, target, output = DEFAULT_OUTPUT, input = DEFAULT_INPUT }) => {
+              return model.edges.find((computeEdge) => computeEdge.input === input && computeEdge.output === output)
+                ?.id;
+            })
+            .filter(nonNullable);
+
+          model.removeNodes(nodeIds);
+          model.removeEdges(edgeIds);
+
+          deleteTriggerObjects(model, subgraph);
+        }
+      },
+    };
+  }, [model]);
+};
+
+export const createComputeGraph = (graph?: CanvasGraphModel<ComputeShape>) => {
+  const computeGraph = ComputeGraphModel.create();
+
+  if (graph) {
+    for (const shape of graph.nodes) {
+      if (isValidComputeNode(shape.type)) {
+        const node = createComputeNode(shape);
+        computeGraph.addNode(node);
+        shape.node = node.id;
+      }
+    }
+
+    for (const edge of graph.edges) {
+      computeGraph.addEdge(mapEdge(graph, edge));
+    }
+  }
+
+  return computeGraph;
+};
+
+const linkTriggerToCompute = (graph: ComputeGraphModel, computeNode: ComputeNode, triggerData: TriggerShape) => {
+  const functionTrigger = triggerData.functionTrigger?.target;
+  invariant(functionTrigger);
+  functionTrigger.function = DXN.fromLocalObjectId(graph.root.id).toString();
+  functionTrigger.meta ??= {};
+  functionTrigger.meta.computeNodeId = computeNode.id;
+};
+
+const deleteTriggerObjects = (computeGraph: ComputeGraphModel, deleted: CanvasGraphModel) => {
+  const space = getSpace(computeGraph.root);
+  if (!space) {
+    return;
+  }
+  for (const node of deleted.nodes) {
+    if (node.type === 'trigger') {
+      const trigger = node as TriggerShape;
+      space.db.remove(trigger.functionTrigger!.target!);
+    }
+  }
+};

package/src/index.ts

@@ -0,0 +1,9 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './graph';
+export * from './hooks';
+export * from './registry';
+export * from './shapes';
+export * from './compute-layout';

package/src/json.test.ts

@@ -0,0 +1,35 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { S } from '@dxos/echo-schema';
+import { BaseGraphEdge, BaseGraphNode } from '@dxos/graph';
+
+import { createGptCircuit } from './testing';
+
+export const Shape = S.extend(
+  BaseGraphNode,
+  S.Struct({
+    text: S.optional(S.String),
+    guide: S.optional(S.Boolean),
+    classNames: S.optional(S.String),
+  }),
+);
+
+export const Connection = S.extend(
+  BaseGraphEdge,
+  S.Struct({
+    input: S.optional(S.String),
+    output: S.optional(S.String),
+  }),
+);
+
+describe('Compute Graph JSON encoding', () => {
+  test('compute graph toJSON', async ({ expect }) => {
+    const model = createGptCircuit({ db: true, artifact: true, cot: true });
+    const json = JSON.stringify(model.graph, null, 2);
+    expect(json).to.exist;
+  });
+});

package/src/registry.ts

@@ -0,0 +1,100 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import type { ShapeDef } from '@dxos/react-ui-canvas-editor';
+import { noteShape } from '@dxos/react-ui-canvas-editor';
+
+import {
+  andShape,
+  appendShape,
+  audioShape,
+  beaconShape,
+  chatShape,
+  constantShape,
+  databaseShape,
+  functionShape,
+  gptRealtimeShape,
+  gptShape,
+  ifElseShape,
+  ifShape,
+  jsonShape,
+  jsonTransformShape,
+  notShape,
+  orShape,
+  queueShape,
+  randomShape,
+  reducerShape,
+  scopeShape,
+  surfaceShape,
+  switchShape,
+  templateShape,
+  threadShape,
+  textToImageShape,
+  triggerShape,
+  textShape,
+} from './shapes';
+
+/**
+ * Order used by toolbar.
+ */
+export const computeShapes: { title: string; shapes: ShapeDef[] }[] = [
+  {
+    title: 'Inputs',
+    shapes: [
+      //
+      constantShape,
+      templateShape,
+      chatShape,
+      switchShape,
+      audioShape,
+      triggerShape,
+      randomShape,
+    ],
+  },
+  {
+    title: 'Transform',
+    shapes: [
+      //
+      gptShape,
+      gptRealtimeShape,
+      functionShape,
+      databaseShape,
+      textToImageShape,
+      appendShape,
+    ],
+  },
+  {
+    title: 'Operations',
+    shapes: [
+      //
+      ifShape,
+      ifElseShape,
+      andShape,
+      orShape,
+      notShape,
+      reducerShape,
+      jsonTransformShape,
+    ],
+  },
+  {
+    title: 'Outputs',
+    shapes: [
+      //
+      jsonShape,
+      queueShape,
+      threadShape,
+      textShape,
+      surfaceShape,
+      beaconShape,
+      scopeShape,
+    ],
+  },
+  {
+    title: 'Misc',
+    shapes: [
+      //
+      noteShape,
+    ],
+  },
+];

package/src/schema.test.ts

@@ -0,0 +1,62 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { describe, test } from 'vitest';
+
+import { create } from '@dxos/client/echo';
+import { S } from '@dxos/echo-schema';
+import { BaseGraphNode, Graph } from '@dxos/graph';
+import {
+  Polygon,
+  createEllipse,
+  createPath,
+  createRectangle,
+  isPath,
+  isPolygon,
+  Shape,
+} from '@dxos/react-ui-canvas-editor';
+
+import { createSwitch, ComputeShape, createFunction } from './shapes';
+
+describe('compute', () => {
+  test('model', ({ expect }) => {
+    // const model = CanvasGraphModel.create<ComputeShape>();
+    const node = createSwitch({ id: 'x', center: { x: 0, y: 0 }, size: { width: 80, height: 80 } });
+    console.log(JSON.stringify(node, null, 2));
+    expect(S.is(ComputeShape)(node)).toBe(true);
+    expect(S.is(Polygon)(node)).toBe(true);
+    expect(S.is(Shape)(node)).toBe(true);
+    expect(S.is(BaseGraphNode)(node)).toBe(true);
+
+    const graph = create(Graph, { nodes: [], edges: [] });
+    graph.nodes.push(node); // Throws.
+
+    // model.createNode(node);
+    // console.log(JSON.stringify(model, null, 2));
+  });
+});
+
+describe('schema', () => {
+  test('basic types', ({ expect }) => {
+    const shapes: Shape[] = [];
+    shapes.push(createRectangle({ id: 'shape-1', center: { x: 0, y: 0 }, size: { width: 80, height: 80 } }));
+    shapes.push(createEllipse({ id: 'shape-2', center: { x: 0, y: 0 }, size: { width: 80, height: 80 } }));
+    shapes.push(createFunction({ id: 'shape-3', center: { x: 0, y: 0 } }));
+    shapes.push(
+      createPath({
+        id: 'shape-4',
+        points: [
+          { x: 0, y: 0 },
+          { x: 0, y: 0 },
+        ],
+      }),
+    );
+
+    const polygons = shapes.filter((shape) => isPolygon(shape)).map((shape) => shape.center);
+    expect(polygons).to.have.length(3);
+
+    const paths = shapes.filter((shape) => isPath(shape)).map((shape) => shape.path);
+    expect(paths).to.have.length(1);
+  });
+});

package/src/shapes/Append.tsx

@@ -0,0 +1,43 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { AppendInput } from '@dxos/conductor';
+import { S } from '@dxos/echo-schema';
+import { type ShapeComponentProps, type ShapeDef } from '@dxos/react-ui-canvas-editor';
+
+import { createFunctionAnchors, FunctionBody, getHeight } from './common';
+import { ComputeShape, createShape, type CreateShapeProps } from './defs';
+
+export const AppendShape = S.extend(
+  ComputeShape,
+  S.Struct({
+    type: S.Literal('append'),
+  }),
+);
+
+export type AppendShape = S.Schema.Type<typeof AppendShape>;
+
+export type CreateAppendProps = CreateShapeProps<AppendShape>;
+
+export const createAppend = (props: CreateAppendProps) =>
+  createShape<AppendShape>({
+    type: 'append',
+    size: { width: 128, height: getHeight(AppendInput) },
+    ...props,
+  });
+
+export const AppendComponent = ({ shape }: ShapeComponentProps<AppendShape>) => {
+  return <FunctionBody shape={shape} inputSchema={AppendInput} />;
+};
+
+export const appendShape: ShapeDef<AppendShape> = {
+  type: 'append',
+  name: 'Append',
+  icon: 'ph--list-plus--regular',
+  component: AppendComponent,
+  createShape: createAppend,
+  getAnchors: (shape) => createFunctionAnchors(shape, AppendInput),
+};

package/src/shapes/Array.tsx

@@ -0,0 +1,61 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { ReducerInput, ReducerOutput } from '@dxos/conductor';
+import { S } from '@dxos/echo-schema';
+import { type ShapeComponentProps, type ShapeDef } from '@dxos/react-ui-canvas-editor';
+
+import { createFunctionAnchors, FunctionBody, getHeight } from './common';
+import { ComputeShape, createShape, type CreateShapeProps } from './defs';
+
+//
+// Data
+//
+
+export const ReducerShape = S.extend(
+  ComputeShape,
+  S.Struct({
+    type: S.Literal('reducer'),
+  }),
+);
+
+export type ReducerShape = S.Schema.Type<typeof ReducerShape>;
+
+//
+// Components
+//
+
+export type ReducerComponentProps = ShapeComponentProps<ReducerShape>;
+
+export const ReducerComponent = ({ shape }: ReducerComponentProps) => {
+  return <FunctionBody shape={shape} inputSchema={ReducerInput} outputSchema={ReducerOutput} />;
+};
+
+//
+// Defs
+//
+
+export type CreateReduceProps = CreateShapeProps<ReducerShape> & { reduce?: string };
+
+export const createReducer = ({
+  id,
+  size = { width: 192, height: getHeight(ReducerInput) },
+  ...rest
+}: CreateReduceProps): ReducerShape =>
+  createShape<ReducerShape>({
+    type: 'reducer',
+    size,
+    ...rest,
+  });
+
+export const reducerShape: ShapeDef<ReducerShape> = {
+  type: 'reducer',
+  name: 'Reducer',
+  icon: 'ph--repeat--regular',
+  component: (props) => <ReducerComponent {...props} />,
+  createShape: createReducer,
+  getAnchors: (shape) => createFunctionAnchors(shape, ReducerInput, ReducerOutput),
+};

package/src/shapes/Audio.tsx

@@ -0,0 +1,55 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useEffect, useState } from 'react';
+
+import { S } from '@dxos/echo-schema';
+import { Icon } from '@dxos/react-ui';
+import { createAnchorMap, type ShapeComponentProps, type ShapeDef } from '@dxos/react-ui-canvas-editor';
+
+import { ComputeShape, createAnchorId, createShape, type CreateShapeProps } from './defs';
+import { useComputeNodeState } from '../hooks';
+
+export const AudioShape = S.extend(
+  ComputeShape,
+  S.Struct({
+    type: S.Literal('audio'),
+  }),
+);
+
+export type AudioShape = S.Schema.Type<typeof AudioShape>;
+
+export type CreateAudioProps = CreateShapeProps<AudioShape>;
+
+export const createAudio = (props: CreateAudioProps) =>
+  createShape<AudioShape>({ type: 'audio', size: { width: 64, height: 64 }, ...props });
+
+export const AudioComponent = ({ shape }: ShapeComponentProps<AudioShape>) => {
+  const { node } = useComputeNodeState(shape);
+  const [active, setActive] = useState(false);
+  useEffect(() => {
+    node.value = active;
+  }, [active]);
+
+  // https://docs.pmnd.rs/react-three-fiber/api/canvas#render-props
+  return (
+    <div className='flex w-full justify-center items-center'>
+      <Icon
+        icon={active ? 'ph--microphone--regular' : 'ph--microphone-slash--regular'}
+        classNames={['transition opacity-20 duration-1000', active && 'opacity-100 text-red-500']}
+        size={8}
+        onClick={() => setActive(!active)}
+      />
+    </div>
+  );
+};
+
+export const audioShape: ShapeDef<AudioShape> = {
+  type: 'audio',
+  name: 'Audio',
+  icon: 'ph--microphone--regular',
+  component: AudioComponent,
+  createShape: createAudio,
+  getAnchors: (shape) => createAnchorMap(shape, { [createAnchorId('output')]: { x: 1, y: 0 } }),
+};

package/src/shapes/Beacon.tsx

@@ -0,0 +1,56 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { DEFAULT_INPUT, isTruthy } from '@dxos/conductor';
+import { S } from '@dxos/echo-schema';
+import { Icon } from '@dxos/react-ui';
+import { createAnchorMap, type ShapeComponentProps, type ShapeDef } from '@dxos/react-ui-canvas-editor';
+import { mx } from '@dxos/react-ui-theme';
+
+import { ComputeShape, createAnchorId, createShape, type CreateShapeProps } from './defs';
+import { useComputeNodeState } from '../hooks';
+
+export const BeaconShape = S.extend(
+  ComputeShape,
+  S.Struct({
+    type: S.Literal('beacon'),
+  }),
+);
+
+export type BeaconShape = S.Schema.Type<typeof BeaconShape>;
+
+export type CreateBeaconProps = CreateShapeProps<BeaconShape>;
+
+export const createBeacon = (props: CreateBeaconProps) =>
+  createShape<BeaconShape>({ type: 'beacon', size: { width: 64, height: 64 }, ...props });
+
+export const BeaconComponent = ({ shape }: ShapeComponentProps<BeaconShape>) => {
+  const { runtime } = useComputeNodeState(shape);
+  const input = runtime.inputs[DEFAULT_INPUT];
+  const value = input?.type === 'executed' ? input.value : false;
+
+  return (
+    <div className='flex w-full justify-center items-center'>
+      <Icon
+        icon='ph--sun--regular'
+        classNames={mx('transition opacity-20 duration-1000', isTruthy(value) && 'opacity-100 text-yellow-500')}
+        size={8}
+      />
+    </div>
+  );
+};
+
+export const beaconShape: ShapeDef<BeaconShape> = {
+  type: 'beacon',
+  name: 'Beacon',
+  icon: 'ph--sun--regular',
+  component: BeaconComponent,
+  createShape: createBeacon,
+  getAnchors: (shape) =>
+    createAnchorMap(shape, {
+      [createAnchorId('input')]: { x: -1, y: 0 },
+    }),
+};