@dxos/react-ui-canvas-compute 0.7.5-labs.8a82073 → 0.7.5-labs.c0e040f

package/src/hooks/useGraphMonitor.ts

@@ -10,7 +10,7 @@ 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 { isNonNullable } from '@dxos/util';
 
 import { createComputeNode, isValidComputeNode } from '../graph';
 import { type ComputeShape, type TriggerShape } from '../shapes';
@@ -79,7 +79,7 @@ export const useGraphMonitor = (model?: ComputeGraphModel): GraphMonitor<Compute
               return model.edges.find((computeEdge) => computeEdge.input === input && computeEdge.output === output)
                 ?.id;
             })
-            .filter(nonNullable);
+            .filter(isNonNullable);
 
           model.removeNodes(nodeIds);
           model.removeEdges(edgeIds);

package/src/shapes/Function.tsx

@@ -2,14 +2,24 @@
 // Copyright 2024 DXOS.org
 //
 
-import React from 'react';
+import React, { useCallback, useRef } from 'react';
 
 import { AnyOutput, FunctionInput } from '@dxos/conductor';
-import { S } from '@dxos/echo-schema';
-import { type ShapeComponentProps, type ShapeDef } from '@dxos/react-ui-canvas-editor';
+import { getSnapshot, S } from '@dxos/echo-schema';
+import { FunctionType, ScriptType } from '@dxos/functions';
+import { useClient } from '@dxos/react-client';
+import { Filter, makeRef, parseId } from '@dxos/react-client/echo';
+import {
+  TextBox,
+  type TextBoxControl,
+  type TextBoxProps,
+  type ShapeComponentProps,
+  type ShapeDef,
+} from '@dxos/react-ui-canvas-editor';
 
-import { createFunctionAnchors, FunctionBody, getHeight } from './common';
+import { Box, createFunctionAnchors } from './common';
 import { ComputeShape, createShape, type CreateShapeProps } from './defs';
+import { useComputeNodeState } from '../hooks';
 
 export const FunctionShape = S.extend(
   ComputeShape,
@@ -23,18 +33,82 @@ export type FunctionShape = S.Schema.Type<typeof FunctionShape>;
 export type CreateFunctionProps = CreateShapeProps<FunctionShape>;
 
 export const createFunction = (props: CreateFunctionProps) =>
-  createShape<FunctionShape>({ type: 'function', size: { width: 192, height: getHeight(FunctionInput) }, ...props });
+  createShape<FunctionShape>({ type: 'function', size: { width: 256, height: 192 }, ...props });
 
-export const FunctionComponent = ({ shape }: ShapeComponentProps<FunctionShape>) => {
-  return <FunctionBody shape={shape} inputSchema={FunctionInput} outputSchema={AnyOutput} />;
+//
+// Component
+//
+
+type TextInputComponentProps = ShapeComponentProps<FunctionShape> & TextBoxProps & { title?: string };
+
+const TextInputComponent = ({ shape, title, ...props }: TextInputComponentProps) => {
+  const client = useClient();
+  const { node, runtime } = useComputeNodeState(shape);
+  const inputRef = useRef<TextBoxControl>(null);
+
+  const handleEnter = useCallback(
+    async (text: string) => {
+      const value = text.trim();
+      const { spaceId, objectId } = parseId(value);
+      if (!spaceId || !objectId) {
+        return;
+      }
+
+      const space = client.spaces.get(spaceId);
+      const object = space?.db.getObjectById(objectId);
+      if (!space || !(object instanceof ScriptType)) {
+        return;
+      }
+
+      const {
+        objects: [fn],
+      } = await space.db.query(Filter.schema(FunctionType, { source: object })).run();
+      if (!fn) {
+        return;
+      }
+
+      node.value = value;
+      node.function = makeRef(fn);
+      node.inputSchema = getSnapshot(fn.inputSchema);
+      node.outputSchema = getSnapshot(fn.outputSchema);
+    },
+    [client, node],
+  );
+
+  const handleAction = useCallback(
+    (action: 'run' | 'open' | 'close') => {
+      if (action !== 'run') {
+        return;
+      }
+
+      runtime.evalNode();
+    },
+    [runtime],
+  );
+
+  return (
+    <Box shape={shape} title='Function' onAction={handleAction}>
+      <TextBox
+        {...props}
+        ref={inputRef}
+        value={node.value}
+        language={node.valueType === 'object' ? 'json' : undefined}
+        onBlur={handleEnter}
+        onEnter={handleEnter}
+      />
+    </Box>
+  );
 };
 
+//
+// Defs
+//
+
 export const functionShape: ShapeDef<FunctionShape> = {
   type: 'function',
   name: 'Function',
   icon: 'ph--function--regular',
-  component: FunctionComponent,
+  component: TextInputComponent,
   createShape: createFunction,
-  // TODO(burdon): Get dynamic schema.
   getAnchors: (shape) => createFunctionAnchors(shape, FunctionInput, AnyOutput),
 };

package/src/shapes/common/FunctionBody.tsx

@@ -24,6 +24,7 @@ export type FunctionBodyProps = {
   outputSchema?: S.Schema.Any;
 } & Pick<BoxProps, 'status'>;
 
+// TODO(wittjosiah): Rename, not used for functions.
 export const FunctionBody = ({
   shape,
   name,