Edit pipeline io

README.md

@@ -257,7 +257,9 @@ Pipelines also have inputs and outputs. In order to run, a pipeline needs to spe
 ### Pipeline editor
 The pipeline editor allows you to create pipelines by plugging steps together.
 
-The left pane shows the available steps, the right pane shows the canvas.
+The left pane shows the available steps, the main section shows the canvas.
+
+On the right side, a collapsible pane allows to edit the labels and descriptions of the pipeline inputs and outputs.
 
 **To add a step:** drag and drop from the left pane to the canvas. Steps that are single scripts will display with a single border, while steps that are pipelines will display with a double border.
 
@@ -302,6 +304,11 @@ Add an **output** node linked to a step output to specify that this output is an
 
 ![image](https://user-images.githubusercontent.com/6223744/181108988-97d988ca-8f4b-45b1-b4a3-32e90821b68b.png)
 
+Pipeline inputs and outputs then appear in a collapsible pane on the right of the canvas, where their descriptions and labels can be edited.
+
+<img src="https://github.com/GEO-BON/biab-2.0/assets/6223744/215b75db-7198-486d-880d-87c0b340668b" height="218">
+
+
 
 ### Saving and loading
 The editor _does not_ allow you to edit files live on the server. Files need to be committed to the github repo using git.

script-server/gradlew.bat

@@ -1,91 +1,91 @@
-@rem
-@rem Copyright 2015 the original author or authors.
-@rem
-@rem Licensed under the Apache License, Version 2.0 (the "License");
-@rem you may not use this file except in compliance with the License.
-@rem You may obtain a copy of the License at
-@rem
-@rem      https://www.apache.org/licenses/LICENSE-2.0
-@rem
-@rem Unless required by applicable law or agreed to in writing, software
-@rem distributed under the License is distributed on an "AS IS" BASIS,
-@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-@rem See the License for the specific language governing permissions and
-@rem limitations under the License.
-@rem
-
-@if "%DEBUG%"=="" @echo off
-@rem ##########################################################################
-@rem
-@rem  Gradle startup script for Windows
-@rem
-@rem ##########################################################################
-
-@rem Set local scope for the variables with windows NT shell
-if "%OS%"=="Windows_NT" setlocal
-
-set DIRNAME=%~dp0
-if "%DIRNAME%"=="" set DIRNAME=.
-set APP_BASE_NAME=%~n0
-set APP_HOME=%DIRNAME%
-
-@rem Resolve any "." and ".." in APP_HOME to make it shorter.
-for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
-
-@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
-set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
-
-@rem Find java.exe
-if defined JAVA_HOME goto findJavaFromJavaHome
-
-set JAVA_EXE=java.exe
-%JAVA_EXE% -version >NUL 2>&1
-if %ERRORLEVEL% equ 0 goto execute
-
-echo.
-echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
-
-goto fail
-
-:findJavaFromJavaHome
-set JAVA_HOME=%JAVA_HOME:"=%
-set JAVA_EXE=%JAVA_HOME%/bin/java.exe
-
-if exist "%JAVA_EXE%" goto execute
-
-echo.
-echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
-echo.
-echo Please set the JAVA_HOME variable in your environment to match the
-echo location of your Java installation.
-
-goto fail
-
-:execute
-@rem Setup the command line
-
-set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
-
-
-@rem Execute Gradle
-"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
-
-:end
-@rem End local scope for the variables with windows NT shell
-if %ERRORLEVEL% equ 0 goto mainEnd
-
-:fail
-rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
-rem the _cmd.exe /c_ return code!
-set EXIT_CODE=%ERRORLEVEL%
-if %EXIT_CODE% equ 0 set EXIT_CODE=1
-if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
-exit /b %EXIT_CODE%
-
-:mainEnd
-if "%OS%"=="Windows_NT" endlocal
-
-:omega
+@rem
+@rem Copyright 2015 the original author or authors.
+@rem
+@rem Licensed under the Apache License, Version 2.0 (the "License");
+@rem you may not use this file except in compliance with the License.
+@rem You may obtain a copy of the License at
+@rem
+@rem      https://www.apache.org/licenses/LICENSE-2.0
+@rem
+@rem Unless required by applicable law or agreed to in writing, software
+@rem distributed under the License is distributed on an "AS IS" BASIS,
+@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+@rem See the License for the specific language governing permissions and
+@rem limitations under the License.
+@rem
+
+@if "%DEBUG%"=="" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+set DIRNAME=%~dp0
+if "%DIRNAME%"=="" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Resolve any "." and ".." in APP_HOME to make it shorter.
+for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if %ERRORLEVEL% equ 0 goto execute
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto execute
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+
+:end
+@rem End local scope for the variables with windows NT shell
+if %ERRORLEVEL% equ 0 goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+set EXIT_CODE=%ERRORLEVEL%
+if %EXIT_CODE% equ 0 set EXIT_CODE=1
+if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
+exit /b %EXIT_CODE%
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

ui/src/components/PipelineEditor/Editor.css

@@ -250,13 +250,49 @@ aside.stepChooser .description {
   overflow-y: auto;
   overflow-x: hidden;
   height: 100%;
-  padding-left: 1em;
-  padding-right: 1em;
+  padding-left: 10px;
+  padding-right: 20px;
+}
+
+.ioList h3 {
+  padding-left: 6px;
+}
+
+.ioList .label {
+  font-weight: bold;
 }
 
 .ioList .description {
   font-size: small;
-  color: gray;
+}
+
+.ioList textarea {
+  width: 100%;
+  background-color: transparent;
+  border: none;
+  resize: none;
+  font-family: inherit;
+  padding: 3px 6px;
+}
+
+.ioList textarea:hover {
+  background: url("../../img/pen.svg");
+  background-repeat: no-repeat;
+  background-position: right;
+  background-size: 1.5em;
+  border: 1px solid  #bbb;
+  padding: 2px 5px;
+}
+
+.ioList textarea:focus {
+  border:1px solid #0c947b;
+  background-color: unset;
+  resize: both;
+  padding: 2px 5px;
+}
+
+.ioList textarea:hover:focus {
+  background: none;
 }
 
 .collapseTab {

ui/src/components/PipelineEditor/IOList.js

@@ -0,0 +1,105 @@
+import React, { useState } from "react";
+import AutoResizeTextArea from "../form/AutoResizeTextArea";
+
+/**
+ * @returns rendered view of the pipeline inputs and outputs
+ */
+export const IOList = ({
+  inputList,
+  setInputList, 
+  outputList, 
+  setOutputList, 
+  selectedNodes
+}) => {
+  const [collapsedPane, setCollapsedPane] = useState(false);
+  return (
+    <div className={`ioList ${collapsedPane ? "paneCollapsed" : "paneOpen"}`}>
+      <div className="collapseTab" onClick={() => setCollapsedPane(!collapsedPane)}>
+        {collapsedPane ?
+          <>
+            &lt;&lt;
+            <span className="topToBottomText">
+              &nbsp;&nbsp;
+              {inputList.length < 10 && <>&nbsp;</>}
+              {inputList.length}&nbsp;Inputs,&nbsp;
+              {outputList.length < 10 && <>&nbsp;</>}
+              {outputList.length}&nbsp;Outputs
+            </span>
+          </>
+          : ">>"}
+      </div>
+      <div className="ioListInner">
+        <h3>User inputs</h3>
+        {inputList.length === 0
+          ? "No inputs"
+          : inputList.map((input, i) => {
+            return (
+              <div
+                key={i}
+                className={selectedNodes.find((node) => node.id === input.nodeId)
+                  ? "selected"
+                  : ""}
+              >
+                <p>
+                <AutoResizeTextArea className="label" keepWidth={true}
+                    onBlur={e => valueEdited(e.target, "label", input, setInputList)}
+                    onInput={preventNewLines}
+                    defaultValue={input.label}></AutoResizeTextArea>
+
+                  <br />
+                  <AutoResizeTextArea className="description" keepWidth={true}
+                    onBlur={e => valueEdited(e.target, "description", input, setInputList)}
+                    defaultValue={input.description}></AutoResizeTextArea>
+                </p>
+              </div>
+            );
+          })}
+        <h3>Pipeline outputs</h3>
+        {outputList.length === 0 ? (
+          <p className="error">
+            At least one output is needed for the pipeline to run
+          </p>
+        ) : (
+          outputList.map((output, i) => {
+            return (
+              <div
+                key={i}
+                className={selectedNodes.find((node) => node.id === output.nodeId)
+                  ? "selected"
+                  : ""}
+              >
+                <p>
+                <AutoResizeTextArea className="label" keepWidth={true}
+                    onBlur={e => valueEdited(e.target, "label", output, setOutputList)}
+                    onInput={preventNewLines}
+                    defaultValue={output.label}></AutoResizeTextArea>
+                  <br />
+                  <AutoResizeTextArea className="description" keepWidth={true}
+                    onBlur={e => valueEdited(e.target, "description", output, setOutputList)}
+                    defaultValue={output.description}></AutoResizeTextArea>
+                </p>
+              </div>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+};
+
+function valueEdited(subject, valueKey, io, setter) {
+  setter(previousValues => previousValues.map(previousIO => {
+    let newIO = {...previousIO}
+    if(previousIO.nodeId === io.nodeId
+      && previousIO.inputId === io.inputId
+      && previousIO.outputId === io.outputId) {
+        newIO[valueKey] = subject.value
+      }
+
+      return newIO
+  }))
+}
+
+function preventNewLines(event){
+  event.target.value = event.target.value.replaceAll("\n", "")
+}