tweaks : fetch node provides more visual feedback .. user-text-input disables button while flow is run

Author: devhelpr

apps/vps-web/src/styles.css

@@ -147,6 +147,18 @@ rect-node:has(.hover) > .shape-circle,
   animation: simple-loader-rotation 1s linear infinite;
 }
 
+.simple-loader.text-black {
+  border: 2px solid #000;
+  border-bottom-color: transparent;
+}
+
+.simple-loader--break::before {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 0;
+}
+
 @keyframes simple-loader-rotation {
   0% {
     transform: rotate(0deg);

examples-test-flows/openai-fetch-completion-as-stream-with-toolcall.json

@@ -2056,7 +2056,8 @@ export class FlowAppElement extends AppElement<NodeInfo> {
 
   createRunCounterContext = (
     isRunViaRunButton = false,
-    shouldResetConnectionSlider = true
+    shouldResetConnectionSlider = true,
+    onFlowFinished?: () => void
   ) => {
     console.log(
       'createRunCounterContext',
@@ -2080,6 +2081,9 @@ export class FlowAppElement extends AppElement<NodeInfo> {
           'max',
           (connectionExecuteHistory.length * 1000).toString()
         );
+        if (onFlowFinished) {
+          onFlowFinished();
+        }
       } else {
         console.log(
           'setRunCounterResetHandler: runCounter.runCounter > 0',

libs/app-canvas/src/app/flow-app.element.tsx

@@ -47,6 +47,7 @@ export type FormField = (
       fieldType: 'Button';
       value: string;
       caption: string;
+      customLoader?: boolean;
       onButtonClick?: () => Promise<void> | void;
       onChange?: (value: string, formComponent: IFormsComponent) => void;
     }

libs/visual-programming-system/src/forms/FormField.ts

@@ -444,6 +444,7 @@ export class FormsComponent
           settings,
           setValue: this.setValue,
           onButtonClick: formControl.onButtonClick,
+          customLoader: formControl.customLoader,
           isLast: index === this.props.formElements.length - 1,
         });
         this.components.push(formControlComponent);

libs/visual-programming-system/src/forms/form-component.ts

@@ -14,6 +14,7 @@ export interface ButtonFieldProps extends BaseFormFieldProps {
   settings?: {
     showLabel?: boolean;
   };
+  customLoader?: boolean;
   onButtonClick?: (formContext: FormContext) => Promise<void> | void;
 }
 
@@ -74,20 +75,26 @@ export class ButtonFieldChildComponent extends FormFieldComponent<ButtonFieldPro
     this.isMounted = false;
   }
 
-  onButtonClick = async (_event: Event) => {
+  onButtonClick = async (event: Event) => {
     if (this.props.onButtonClick) {
       if (!this.button) return;
-      this.button.disabled = true;
-      this.simpleLoader?.classList.remove('hidden');
+      event?.preventDefault();
+      if (!this.props.customLoader) {
+        this.button.disabled = true;
+        this.simpleLoader?.classList.remove('hidden');
+      }
       try {
         await this.props.onButtonClick({
           setFormFieldValue: this.props.setValue,
         });
       } catch (error) {
         console.error(error);
       }
-      this.simpleLoader?.classList.add('hidden');
-      this.button.disabled = false;
+      if (!this.props.customLoader) {
+        this.simpleLoader?.classList.add('hidden');
+        this.button.disabled = false;
+      }
+      return false;
     }
   };
   override render() {

libs/visual-programming-system/src/forms/form-fields/button.ts

@@ -235,7 +235,8 @@ export const getNodeFactoryNames = () => {
 export const setupCanvasNodeTaskRegistry = (
   createRunCounterContext: (
     isRunViaRunButton: boolean,
-    shouldResetConnectionSlider: boolean
+    shouldResetConnectionSlider: boolean,
+    onFlowFinished?: () => void
   ) => RunCounter,
   registerExternalNodes?: (
     registerNodeFactory: RegisterNodeFactoryFunction

libs/web-flow-executor/src/node-task-registry/canvas-node-task-registry.ts

@@ -9,6 +9,7 @@ import {
   NodeTaskFactory,
   ThumbConnectionType,
   ThumbType,
+  IDOMElement,
 } from '@devhelpr/visual-programming-system';
 import { NodeInfo } from '../types/node-info';
 import { RunCounter } from '../follow-path/run-counter';
@@ -24,6 +25,20 @@ export const getFetch: NodeTaskFactory<NodeInfo> = (
   let node: IRectNodeComponent<NodeInfo>;
   let errorNode: INodeComponent<NodeInfo>;
   let canvasAppInstance: IFlowCanvasBase<NodeInfo> | undefined = undefined;
+  let loader: IDOMElement | undefined = undefined;
+
+  function showLoader() {
+    if (loader && loader.domElement) {
+      (loader.domElement as HTMLElement).classList.remove('hidden');
+    }
+  }
+
+  function hideLoader() {
+    if (loader && loader.domElement) {
+      (loader.domElement as HTMLElement).classList.add('hidden');
+    }
+  }
+
   const initializeCompute = () => {
     return;
   };
@@ -54,6 +69,7 @@ export const getFetch: NodeTaskFactory<NodeInfo> = (
       }
       function sendEndStream() {
         return new Promise<void>((resolve) => {
+          hideLoader();
           runNodeFromThumb(
             node.thumbConnectors![3],
             canvasAppInstance!,
@@ -83,6 +99,7 @@ export const getFetch: NodeTaskFactory<NodeInfo> = (
         );
       }
       function sendError(error: string) {
+        hideLoader();
         runNodeFromThumb(
           node.thumbConnectors![1],
           canvasAppInstance!,
@@ -143,6 +160,7 @@ export const getFetch: NodeTaskFactory<NodeInfo> = (
         if (responseType === 'json') {
           headers.append('Content-Type', 'application/json');
         }
+        showLoader();
         fetch(url, {
           method: httpMethod,
           headers,
@@ -194,6 +212,7 @@ export const getFetch: NodeTaskFactory<NodeInfo> = (
                             dummyEndpoint: true,
                           });
                         });
+                        hideLoader();
                       } catch (error) {
                         isFullJson = false;
                       }
@@ -327,12 +346,25 @@ export const getFetch: NodeTaskFactory<NodeInfo> = (
           class: `inner-node rounded p-4
                   bg-amber-400  text-black 
                   font-bold
-                  flex flex-row justify-center items-center justify-start`,
+                  flex flex-col justify-center items-center justify-start`,
         },
         undefined,
         `Fetch ${text}`.trim()
       ) as unknown as INodeComponent<NodeInfo>;
-
+      const loaderWrapper = createElement(
+        'div',
+        {
+          class: `w-full flex justify-center `,
+        },
+        jsxComponentWrapper.domElement
+      );
+      loader = createElement(
+        'div',
+        {
+          class: `simple-loader hidden text-black mt-2`,
+        },
+        loaderWrapper?.domElement
+      );
       const rect = canvasApp.createRect(
         x,
         y,

libs/web-flow-executor/src/nodes/fetch.ts

@@ -187,6 +187,7 @@ export const getIFrameHtmlNode = (updated: () => void): NodeTask<NodeInfo> => {
   const initializeCompute = () => {
     currentInput = '';
     variables = {};
+    setHTML(currentInput);
   };
 
   const compute = (input: string) => {

libs/web-flow-executor/src/nodes/iframe-html-node.ts

@@ -22,20 +22,25 @@ import {
 import { getVariablePayloadInputUtils } from './variable-payload-input-utils.ts/variable-payload-input-utils';
 
 function handleExpression(expression: string, payload: any) {
-  const compiledExpression = compileExpressionAsInfo(expression);
-  const expressionFunction = (
-    new Function('payload', `${compiledExpression.script}`) as unknown as (
-      payload?: any
-    ) => any
-  ).bind(compiledExpression.bindings);
+  try {
+    const compiledExpression = compileExpressionAsInfo(expression);
+    const expressionFunction = (
+      new Function('payload', `${compiledExpression.script}`) as unknown as (
+        payload?: any
+      ) => any
+    ).bind(compiledExpression.bindings);
 
-  const result = runExpression(
-    expressionFunction,
-    payload,
-    false,
-    compiledExpression.payloadProperties
-  );
-  return Boolean(result);
+    const result = runExpression(
+      expressionFunction,
+      payload,
+      false,
+      compiledExpression.payloadProperties
+    );
+    return Boolean(result);
+  } catch (error) {
+    console.error('Split-by-case: Error in handleExpression', error);
+    return false;
+  }
 }
 
 export const getSplitByCase = (updated: () => void): NodeTask<NodeInfo> => {