WIP untested

ui/src/components/PipelinePage.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useReducer } from "react";
+import React, { useState, useEffect, useReducer, useCallback } from "react";
 import { SingleOutputResult, StepResult } from "./StepResult";
 import {
   FoldableOutputWithContext,
@@ -31,42 +31,43 @@ export const api = new BonInABoxScriptService.DefaultApi();
 
 function pipReducer(state, action) {
   switch (action.type) {
-    case "run": {
+    case "run": 
       return {
         lastAction: "run",
         runHash: action.newHash,
         pipeline: state.pipeline,
         runId: state.pipeline + ">" + action.newHash,
       };
-    }
-    case "select": {
+
+    case "select":
       return {
         lastAction: "select",
         runHash: null,
         pipeline: action.newPipeline,
         runId: null,
       };
-    }
-    case "url": {
+
+    case "url":
       return {
         lastAction: "url",
         runHash: action.newHash,
         pipeline: action.newPipeline,
         runId: action.newPipeline + ">" + action.newHash,
       };
-    }
-    case "reset": {
+
+    case "reset":
       return {
         lastAction: "reset",
         runHash: null,
         pipeline: defaultPipeline,
         runId: null,
       };
-    }
+
+      default:
+        throw Error("Unknown action: " + action.type);
   }
-  throw Error("Unknown action: " + action.type);
 }
-
+  
 function pipInitialState(init) {
   let hash = null;
   let pip = defaultPipeline;
@@ -97,7 +98,7 @@ export function PipelinePage() {
   const [inputFileContent, setInputFileContent] = useState({});
 
   const { pipeline, runHash } = useParams();
-  const [pipStates, setPipStates] = useReducer(
+  const [pipStates, setPipStates] = useReducer( 
     pipReducer,
     {pipeline: pipeline, runHash: runHash},
     pipInitialState
@@ -130,6 +131,12 @@ export function PipelinePage() {
     }
   }
 
+  useState(() => {
+    if (timeout && !pipStates.runHash) {
+      clearTimeout(timeout)
+    }
+  }, [timeout, pipStates.runHash])
+
   function loadPipelineMetadata(choice, setExamples = true) {
     choice = choice + ".json";
     var callback = function (error, data, response) {
@@ -191,7 +198,12 @@ export function PipelinePage() {
   }, [runningScripts]);
 
   useEffect(() => {
+    // Clear previous request
+    showHttpError(null);
+    setInputFileContent({})
     setResultsData(null);
+
+    // Perform new request
     switch(pipStates.lastAction) {
       case "reset":
       case "select":
@@ -200,9 +212,13 @@ export function PipelinePage() {
       case "run":
         loadPipelineMetadata(pipStates.pipeline, false);
         break;
+      case "url":
+      default:
+        break;
     }
+
     loadPipelineOutputs();
-  }, [pipStates]);
+  }, [pipStates, setInputFileContent, setResultsData]); // Should we ignore the rest?
 
   useEffect(() => {
     // set by the route

ui/src/components/form/PipelineForm.js

@@ -18,18 +18,12 @@ export function PipelineForm({
   const navigate = useNavigate();
   const [pipelineOptions, setPipelineOptions] = useState([]);
 
-  function clearPreviousRequest() {
-    showHttpError(null);
-    setInputFileContent({});
-  }
-
   const handleSubmit = (event) => {
     event.preventDefault();
     runScript();
   };
 
   const handlePipelineChange = (value) => {
-    clearPreviousRequest();
     setPipStates({
       type: "select",
       newPipeline: value,