be able to inspect last execution of json-node and show input/output (not yet attached to timeline store)

Author: devhelpr

apps/vps-web/src/main.tsx

@@ -47,7 +47,9 @@ if (url.pathname === '/run-flow') {
             container = document.getElementById(
               `${formId}_${formField.fieldName}__html`
             );
-            const popupContainer = document.getElementById('textAreaContainer');
+            const popupContainer = document.querySelector(
+              `[id='${formId}_${formField.fieldName}'].code-editor`
+            );
             if (!container || !popupContainer) return;
 
             // with a node that contains a button below the editor in the node-type, the new grid css setup

apps/vps-web/src/styles.css

@@ -727,17 +727,19 @@ html:active-view-transition-type(normal) {
 
 .code-editor {
   width: 100%;
-  height: 320px;
+  height: auto;
   min-height: 320px;
   transition: height var(--popup-fullscreen-duration)
     var(--popup-fullscreen-timing-function);
   /*height: 100%;*/
 
   display: grid;
-  grid-template-rows: auto 1fr;
+  grid-template-rows: auto 320px;
+  grid-template-columns: 100%;
 }
 .fullscreen .code-editor {
   height: calc(100vh - 110px);
+  grid-template-rows: auto 1fr;
 }
 .code-editor .editor-instance {
   /* height: 40rem; */

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

@@ -25,8 +25,8 @@
         },
         {
           "id": "3cf44538-9913-4aa2-aade-a7c619910f45",
-          "x": 2883.462127419976,
-          "y": 1083.5811430954288,
+          "x": 2888.3560355256773,
+          "y": 1088.3988411546893,
           "width": 178.5078125,
           "height": 80,
           "nodeType": "Shape",
@@ -430,8 +430,8 @@
           "id": "3601f5bf-09f9-401d-b7de-28d1be639fb5",
           "x": 2614.0830229763683,
           "y": 1116.511744316569,
-          "endX": 2883.462127419976,
-          "endY": 1123.5811430954288,
+          "endX": 2888.3560355256773,
+          "endY": 1128.3988411546893,
           "startNodeId": "6631fbab-1a06-4f8e-9abc-ee8ac2c3f923",
           "endNodeId": "3cf44538-9913-4aa2-aade-a7c619910f45",
           "startThumbName": "output",
@@ -443,8 +443,8 @@
         },
         {
           "id": "993273ac-60cc-4c0b-9f50-31b62d6ec3f0",
-          "x": 3061.969939919976,
-          "y": 1123.5811430954288,
+          "x": 3066.8638480256773,
+          "y": 1128.3988411546893,
           "endX": 3287.94780194177,
           "endY": 1118.0470007342954,
           "startNodeId": "3cf44538-9913-4aa2-aade-a7c619910f45",

libs/web-flow-executor/src/nodes/raw-json.tsx

@@ -52,7 +52,8 @@ export const getRawJsonNode: NodeTaskFactory<NodeInfo> = (
   let canvasAppInstance: IFlowCanvasBase<NodeInfo> | undefined = undefined;
   let setErrorMessage: undefined | ((message: string) => void) = undefined;
   let clearErrorMessage: undefined | (() => void) = undefined;
-
+  let currentOutput: any = undefined;
+  let currentSerializedInput: any = undefined;
   const initializeCompute = () => {
     return;
   };
@@ -88,6 +89,8 @@ export const getRawJsonNode: NodeTaskFactory<NodeInfo> = (
         canvasAppInstance
       );
 
+      currentSerializedInput = payloadForExpression;
+
       const json = JSON.parse(
         node.nodeInfo.formValues['json'].replace('[openai-key]', openAIKey)
       );
@@ -99,6 +102,8 @@ export const getRawJsonNode: NodeTaskFactory<NodeInfo> = (
         payloadForExpression
       );
 
+      currentOutput = transformedJson;
+
       console.log('transformedJson', transformedJson);
 
       return {
@@ -192,6 +197,26 @@ export const getRawJsonNode: NodeTaskFactory<NodeInfo> = (
 }`,
         };
       }
+      if (node.nodeInfo) {
+        node.nodeInfo.meta = [
+          {
+            type: 'json',
+            propertyName: 'input',
+            displayName: 'Input',
+            getData: () => {
+              return currentSerializedInput;
+            },
+          },
+          {
+            type: 'json',
+            propertyName: 'output',
+            displayName: 'Output',
+            getData: () => {
+              return currentOutput;
+            },
+          },
+        ];
+      }
     },
     {
       category: 'data',