@dxos/react-ui-canvas-compute 0.7.5-labs.ff2ff30 → 0.7.5-staging.2ff1350

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/Trigger.tsx

@@ -6,11 +6,11 @@ import React, { useEffect } from 'react';
 
 import {
   EmailTriggerOutput,
+  QueueTriggerOutput,
   SubscriptionTriggerOutput,
   TimerTriggerOutput,
   VoidInput,
   WebhookTriggerOutput,
-  QueueTriggerOutput,
 } from '@dxos/conductor';
 import { ObjectId, Ref, S } from '@dxos/echo-schema';
 import {
@@ -24,7 +24,7 @@ import {
   type WebhookTrigger,
 } from '@dxos/functions';
 import { DXN, SpaceId } from '@dxos/keys';
-import { create, makeRef } from '@dxos/react-client/echo';
+import { create, makeRef, useSpace } from '@dxos/react-client/echo';
 import { Select, type SelectRootProps } from '@dxos/react-ui';
 import { type ShapeComponentProps, type ShapeDef } from '@dxos/react-ui-canvas-editor';
 
@@ -41,13 +41,14 @@ export const TriggerShape = S.extend(
 export type TriggerShape = S.Schema.Type<typeof TriggerShape>;
 
 export type CreateTriggerProps = CreateShapeProps<Omit<TriggerShape, 'functionTrigger'>> & {
+  spaceId?: SpaceId;
   triggerKind?: TriggerKind;
 };
 
 export const createTrigger = (props: CreateTriggerProps): TriggerShape => {
   const functionTrigger = create(FunctionTrigger, {
     enabled: true,
-    spec: createTriggerSpec(props.triggerKind ?? TriggerKind.Email),
+    spec: createTriggerSpec(props),
   });
   return createShape<TriggerShape>({
     type: 'trigger',
@@ -60,11 +61,12 @@ export const createTrigger = (props: CreateTriggerProps): TriggerShape => {
 export type TriggerComponentProps = ShapeComponentProps<TriggerShape>;
 
 export const TriggerComponent = ({ shape }: TriggerComponentProps) => {
+  const space = useSpace();
   const functionTrigger = shape.functionTrigger?.target;
 
   useEffect(() => {
     if (functionTrigger && !functionTrigger.spec) {
-      functionTrigger.spec = createTriggerSpec(TriggerKind.Email);
+      functionTrigger.spec = createTriggerSpec({ triggerKind: TriggerKind.Email, spaceId: space?.id });
     }
   }, [functionTrigger, functionTrigger?.spec]);
 
@@ -74,7 +76,7 @@ export const TriggerComponent = ({ shape }: TriggerComponentProps) => {
 
   const setKind = (kind: TriggerKind) => {
     if (functionTrigger?.spec?.type !== kind) {
-      functionTrigger!.spec = createTriggerSpec(kind);
+      functionTrigger!.spec = createTriggerSpec({ triggerKind: TriggerKind.Email, spaceId: space?.id });
     }
   };
 
@@ -117,10 +119,11 @@ const TriggerKindSelect = ({ value, onValueChange }: Pick<SelectRootProps, 'valu
   );
 };
 
-const createTriggerSpec = (kind: TriggerKind): TriggerType => {
+const createTriggerSpec = (props: { triggerKind?: TriggerKind; spaceId?: SpaceId }): TriggerType => {
+  const kind = props.triggerKind ?? TriggerKind.Email;
   switch (kind) {
     case TriggerKind.Timer:
-      return { type: TriggerKind.Timer, cron: '0 0 * * *' } satisfies TimerTrigger;
+      return { type: TriggerKind.Timer, cron: '*/10 * * * * *' } satisfies TimerTrigger;
     case TriggerKind.Webhook:
       return { type: TriggerKind.Webhook, method: 'POST' } satisfies WebhookTrigger;
     case TriggerKind.Subscription:
@@ -128,7 +131,7 @@ const createTriggerSpec = (kind: TriggerKind): TriggerType => {
     case TriggerKind.Email:
       return { type: TriggerKind.Email } satisfies EmailTrigger;
     case TriggerKind.Queue: {
-      const dxn = new DXN(DXN.kind.QUEUE, ['data', SpaceId.random(), ObjectId.random()]).toString();
+      const dxn = new DXN(DXN.kind.QUEUE, ['data', props.spaceId ?? SpaceId.random(), ObjectId.random()]).toString();
       return { type: TriggerKind.Queue, queue: dxn } satisfies QueueTrigger;
     }
   }

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,