updated AutoResizeTextArea

ui/src/components/PipelineEditor/IOListPane.js

@@ -116,9 +116,10 @@ function valueEdited(value, valueKey, io, setter) {
     if(previousIO.nodeId === io.nodeId
       && previousIO.inputId === io.inputId
       && previousIO.outputId === io.outputId) {
+        console.log('Match found:', io);
         newIO[valueKey] = value
       }
-
+      console.log('New IO:', newIO)
       return newIO
   }))
 }

ui/src/components/PipelineEditor/PipelineEditor.js

@@ -324,15 +324,12 @@ export default function PipelineEditor(props) {
     (allNodes, allEdges) => {
       if (allNodes.length === 0)
         return
-      console.log('in refreshInputList')
       setInputList((previousInputs) => {
         let newUserInputs = [];
 
         allNodes.forEach((node) => {
           if (node.data) {
-            console.log('in refreshInputList node: ',node)
             if (node.type === "userInput") {
-              console.log('in refreshInputList userInput: ',node)
               const previousInput = previousInputs.find(
                 (prev) => prev.nodeId === node.id
               );
@@ -341,7 +338,6 @@ export default function PipelineEditor(props) {
                 newUserInputs.push(previousInput);
               } else {
                 // No existing input, add a new one
-                console.log('in refreshInputList, no existing input, add a new one: ',node)
                 let toAdd = {
                   label: "Label missing",
                   description: "Description missing",
@@ -414,7 +410,6 @@ export default function PipelineEditor(props) {
             }
           }
         });
-        console.log('newUserInputs: ',newUserInputs)
         return newUserInputs;
       });
     },
@@ -443,7 +438,6 @@ export default function PipelineEditor(props) {
         const connectedEdges = getConnectedEdges([node], edges); //returns all edges connected to the output node
         connectedEdges.forEach((edge) => {
           const sourceNode = allNodes.find((n) => n.id === edge.source); // Always 1, you get the source node
-          console.log('edge: ',edge)
           // outputDescription may be null if stepDescription not yet available.
           // This is ok when loading since we rely on the saved description anyways.
           const stepDescription = getStepDescription(
@@ -458,9 +452,7 @@ export default function PipelineEditor(props) {
             let newNode = {};
             if (sourceNode.type === 'userInput') {
               // look for node in inputList
-              console.log('userInput: ',sourceNode)
               const input = inputList.find((input) => input.nodeId === sourceNode.id);
-              console.log('input: ',input)
               newNode = {
                 description: input.description,
                 label: input.label,
@@ -473,7 +465,6 @@ export default function PipelineEditor(props) {
             }
 
             else if (sourceNode.type === 'constant') { // change this to 'else if'
-              console.log('constant: ',sourceNode)
               newNode = {
                 description: 'A constant has no description',
                 label: 'a constant has no label',
@@ -495,7 +486,6 @@ export default function PipelineEditor(props) {
                   : output
               );
             });
-            console.log('updateOutputList: ',updateOutputList)
             setOutputList(updateOutputList);
           }
           else {
@@ -518,7 +508,6 @@ export default function PipelineEditor(props) {
             prev.nodeId === newOutput.nodeId &&
             prev.outputId === newOutput.outputId
         );
-        console.log('previousOutput: ',previousOutput)
         // The label and description of previous outputs might have been modified, so we keep them as is.
         return previousOutput && previousOutput.label
           ? previousOutput
@@ -872,3 +861,7 @@ export default function PipelineEditor(props) {
     </div>
   );
 }
+// modal function
+// when no name type, cancel save
+// add the filenname as default in the textarea when clicked on save to server
+// for modal, when you click in emotuy space, remive modal

ui/src/components/form/AutoResizeTextArea.js

@@ -1,27 +1,38 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
-export default function AutoResizeTextArea({defaultValue, keepWidth, className, ...props}) {
+export default function AutoResizeTextArea({ defaultValue, keepWidth, className, ...props }) {
 
-  const textAreaRef = useRef(null)
+  const textAreaRef = useRef(null);
+  const [value, setValue] = useState(defaultValue || ''); // Initialize with defaultValue prop
 
   useEffect(() => {
-    resize(textAreaRef.current)
-  }, [defaultValue, resize])
+    setValue(defaultValue || ''); // Update value when defaultValue prop changes
+  }, [defaultValue]);
+
+  useEffect(() => {
+    resize(textAreaRef.current);
+  }, [value, resize]);
 
-  /**
-   * Automatic horizontal and vertical resizing of textarea
-   * @param {textarea} input
-   */
   function resize(input) {
     input.style.height = 0;
     input.style.height = input.scrollHeight + "px";
 
-    if(!keepWidth) {
+    if (!keepWidth) {
       input.style.width = "auto";
       input.style.width = input.scrollWidth + "px";
     }
   }
 
-  return <textarea className={(className ? className + ' ' : '') + 'autoResize'} ref={textAreaRef} defaultValue={defaultValue} {...props} 
-    onChange={(e) => resize(e.target)} />;
+  return (
+    <textarea
+      className={(className ? className + ' ' : '') + 'autoResize'}
+      ref={textAreaRef}
+      value={value} // Use value instead of defaultValue
+      onChange={(e) => {
+        setValue(e.target.value); // Update state when the value changes
+        resize(e.target);
+      }}
+      {...props}
+    />
+  );
 }