Resolve conflicts using files from Stirling-2.0

2026-09-14 12:42:08 +02:00 · 2025-06-24 12:51:39 +01:00
parent 16e56e3208
commit a51960b199
691 changed files with 168291 additions and 0 deletions
@@ -0,0 +1,768 @@
+document.getElementById("validateButton").addEventListener("click", function (event) {
+  event.preventDefault();
+  validatePipeline();
+});
+function validatePipeline() {
+  let pipelineListItems = document.getElementById("pipelineList").children;
+  let isValid = true;
+  let containsAddPassword = false;
+  for (let i = 0; i < pipelineListItems.length - 1; i++) {
+    let currentOperation = pipelineListItems[i].querySelector(".operationName").textContent;
+    let nextOperation = pipelineListItems[i + 1].querySelector(".operationName").textContent;
+    if (currentOperation === "/add-password") {
+      containsAddPassword = true;
+    }
+
+    let currentOperationDescription = apiDocs[currentOperation]?.post?.description || "";
+    let nextOperationDescription = apiDocs[nextOperation]?.post?.description || "";
+
+    // Strip off 'ZIP-' prefix
+    currentOperationDescription = currentOperationDescription.replace("ZIP-", "");
+    nextOperationDescription = nextOperationDescription.replace("ZIP-", "");
+
+    let currentOperationOutput = currentOperationDescription.match(/Output:([A-Z\/]*)/)?.[1] || "";
+    let nextOperationInput = nextOperationDescription.match(/Input:([A-Z\/]*)/)?.[1] || "";
+
+    // Splitting in case of multiple possible output/input
+    let currentOperationOutputArr = currentOperationOutput.split("/");
+    let nextOperationInputArr = nextOperationInput.split("/");
+
+    if (currentOperationOutput !== "ANY" && nextOperationInput !== "ANY") {
+      let intersection = currentOperationOutputArr.filter((value) => nextOperationInputArr.includes(value));
+      console.log(`Intersection: ${intersection}`);
+
+      if (intersection.length === 0) {
+        updateValidateButton(false);
+        isValid = false;
+        console.log(
+          `Incompatible operations: The output of operation '${currentOperation}' (${currentOperationOutput}) is not compatible with the input of the following operation '${nextOperation}' (${nextOperationInput}).`,
+        );
+        alert(
+          `Incompatible operations: The output of operation '${currentOperation}' (${currentOperationOutput}) is not compatible with the input of the following operation '${nextOperation}' (${nextOperationInput}).`,
+        );
+        break;
+      }
+    }
+  }
+  if (
+    containsAddPassword &&
+    pipelineListItems[pipelineListItems.length - 1].querySelector(".operationName").textContent !== "/add-password"
+  ) {
+    updateValidateButton(false);
+    alert('The "add-password" operation should be at the end of the operations sequence. Please adjust the operations order.');
+    return false;
+  }
+  if (isValid) {
+    console.log("Pipeline is valid");
+    // Continue with the pipeline operation
+  } else {
+    console.error("Pipeline is not valid");
+    // Stop operation, maybe display an error to the user
+  }
+  updateValidateButton(isValid);
+  return isValid;
+}
+
+function updateValidateButton(isValid) {
+  var validateButton = document.getElementById("validateButton");
+  if (isValid) {
+    validateButton.classList.remove("btn-danger");
+    validateButton.classList.add("btn-success");
+  } else {
+    validateButton.classList.remove("btn-success");
+    validateButton.classList.add("btn-danger");
+  }
+}
+
+document.getElementById("submitConfigBtn").addEventListener("click", function () {
+  if (validatePipeline() === false) {
+    return;
+  }
+  let selectedOperation = document.getElementById("operationsDropdown").value;
+
+  var pipelineName = document.getElementById("pipelineName").value;
+
+
+  let pipelineList = document.getElementById("pipelineList").children;
+  let pipelineConfig = {
+    name: pipelineName,
+    pipeline: [],
+    _examples: {
+      outputDir: "{outputFolder}/{folderName}",
+      outputFileName: "{filename}-{pipelineName}-{date}-{time}",
+    },
+    outputDir: "httpWebRequest",
+    outputFileName: "{filename}",
+  };
+
+  for (let i = 0; i < pipelineList.length; i++) {
+    let operationName = pipelineList[i].querySelector(".operationName").textContent;
+    let parameters = operationSettings[operationName] || {};
+    pipelineConfig.pipeline.push({
+      operation: operationName,
+      parameters: parameters,
+    });
+  }
+
+  let pipelineConfigJson = JSON.stringify(pipelineConfig, null, 2);
+  let formData = new FormData();
+
+  let fileInput = document.getElementById("fileInput-input");
+  let files = fileInput.files;
+
+  for (let i = 0; i < files.length; i++) {
+    console.log("files[i]", files[i].name);
+    formData.append("fileInput", files[i], files[i].name);
+  }
+
+  console.log("pipelineConfigJson", pipelineConfigJson);
+  formData.append("json", pipelineConfigJson);
+  console.log("formData", formData);
+
+  fetchWithCsrf("api/v1/pipeline/handleData", {
+    method: "POST",
+    body: formData,
+  })
+    .then((response) => {
+      // Save the response to use it later
+      const responseToUseLater = response;
+
+      return response.blob().then((blob) => {
+        let url = window.URL.createObjectURL(blob);
+        let a = document.createElement("a");
+        a.href = url;
+
+        // Use responseToUseLater instead of response
+        const contentDisposition = responseToUseLater.headers.get("Content-Disposition");
+        let filename = "download";
+        if (contentDisposition && contentDisposition.indexOf("attachment") !== -1) {
+          filename = decodeURIComponent(contentDisposition.split("filename=")[1].replace(/"/g, "")).trim();
+        }
+        a.download = filename;
+
+        document.body.appendChild(a);
+        a.click();
+        a.remove();
+      });
+    })
+    .catch((error) => {
+      console.error("Error:", error);
+    });
+});
+
+let apiDocs = {};
+let apiSchemas = {};
+let operationSettings = {};
+let operationStatus = {};
+
+fetchWithCsrf("v1/api-docs")
+  .then((response) => response.json())
+  .then((data) => {
+    apiDocs = data.paths;
+    apiSchemas = data.components.schemas;
+    return fetchWithCsrf("api/v1/settings/get-endpoints-status")
+      .then((response) => response.json())
+      .then((data) => {
+        operationStatus = data;
+      })
+      .catch((error) => {
+        console.error("Error:", error);
+      });
+  })
+  .then(() => {
+    const ignoreOperations = ["/api/v1/pipeline/handleData", "/api/v1/pipeline/operationToIgnore"]; // Add the operations you want to ignore here
+    let operationsDropdown = document.getElementById("operationsDropdown");
+    operationsDropdown.innerHTML = "";
+
+    let operationsByTag = {};
+
+    // Group operations by tags
+    Object.keys(apiDocs).forEach((operationPath) => {
+      let operation = apiDocs[operationPath].post;
+      if (!operation || !operation.description) {
+        console.log(operationPath);
+      }
+      //!operation.description.includes("Type:MISO")
+      if (operation && !ignoreOperations.includes(operationPath)) {
+        let operationTag = operation.tags[0]; // This assumes each operation has exactly one tag
+        if (!operationsByTag[operationTag]) {
+          operationsByTag[operationTag] = [];
+        }
+        operationsByTag[operationTag].push(operationPath);
+      }
+    });
+
+    // Sort operations within each tag alphabetically
+    Object.keys(operationsByTag).forEach((tag) => {
+      operationsByTag[tag].sort();
+    });
+
+    // Specify the order of tags
+    let tagOrder = ["General", "Security", "Convert", "Misc", "Filter"];
+
+    // Create dropdown options
+    tagOrder.forEach((tag) => {
+      if (operationsByTag[tag]) {
+        let group = document.createElement("optgroup");
+        group.label = tag;
+
+        operationsByTag[tag].forEach((operationPath) => {
+          let option = document.createElement("option");
+
+          let operationPathDisplay = operationPath;
+          operationPathDisplay = operationPath.replace(new RegExp("api/v1/" + tag.toLowerCase() + "/", "i"), "");
+
+          if (operationPath.includes("/convert")) {
+            operationPathDisplay = operationPathDisplay.replace(/^\//, "").replaceAll("/", " to ");
+          } else {
+            operationPathDisplay = operationPathDisplay.replace(/\//g, ""); // Remove slashes
+          }
+          operationPathDisplay = operationPathDisplay.replaceAll(" ", "-");
+          option.textContent = operationPathDisplay;
+
+          if (!(operationPathDisplay in operationStatus)) {
+            option.value = operationPath; // Keep the value with slashes for querying
+            group.appendChild(option);
+          }
+        });
+
+        operationsDropdown.appendChild(group);
+      }
+    });
+  })
+  .catch((error) => {
+    console.error("Error:", error);
+  });
+
+document.getElementById('deletePipelineBtn').addEventListener('click', function(event) {
+    event.preventDefault();
+    let pipelineName = document.getElementById('pipelineName').value;
+
+    if (confirm(deletePipelineText + pipelineName)) {
+        removePipelineFromUI(pipelineName);
+        let key = "#Pipeline-" + pipelineName;
+        if (localStorage.getItem(key)) {
+            localStorage.removeItem(key);
+        }
+        let pipelineSelect = document.getElementById("pipelineSelect");
+        let modal = document.getElementById('pipelineSettingsModal');
+        if (modal.style.display !== 'none') {
+            $('#pipelineSettingsModal').modal('hide');
+        }
+
+        if (pipelineSelect.options.length > 0) {
+            pipelineSelect.selectedIndex = 0;
+            pipelineSelect.dispatchEvent(new Event('change'));
+        }
+    }
+});
+
+function removePipelineFromUI(pipelineName) {
+    let pipelineSelect = document.getElementById("pipelineSelect");
+    for (let i = 0; i < pipelineSelect.options.length; i++) {
+        console.log(pipelineSelect.options[i])
+        console.log("list " + pipelineSelect.options[i].innerText + " vs " + pipelineName)
+        if (pipelineSelect.options[i].innerText === pipelineName) {
+            pipelineSelect.remove(i);
+            break;
+        }
+    }
+}
+
+
+document.getElementById("addOperationBtn").addEventListener("click", function () {
+  let selectedOperation = document.getElementById("operationsDropdown").value;
+  let pipelineList = document.getElementById("pipelineList");
+
+  let listItem = document.createElement("li");
+  listItem.className = "list-group-item";
+  let hasSettings = false;
+  if (apiDocs[selectedOperation] && apiDocs[selectedOperation].post) {
+    const postMethod = apiDocs[selectedOperation].post;
+
+    // Check if parameters exist
+    if (postMethod.parameters && postMethod.parameters.length > 0) {
+      hasSettings = true;
+    } else if (postMethod.requestBody && postMethod.requestBody.content["multipart/form-data"]) {
+      // Extract the reference key
+      const refKey = postMethod.requestBody.content["multipart/form-data"].schema["$ref"].split("/").pop();
+      // Check if the referenced schema exists and has properties more than just its input file
+      if (apiSchemas[refKey]) {
+        const properties = apiSchemas[refKey].properties;
+        const propertyKeys = Object.keys(properties);
+
+        // Check if there's more than one property or if there's exactly one property and its format is not 'binary'
+        if (propertyKeys.length > 1 || (propertyKeys.length === 1 && properties[propertyKeys[0]].format !== "binary")) {
+          hasSettings = true;
+        }
+      }
+    }
+  }
+
+  let containerDiv = document.createElement("div");
+  containerDiv.className = "d-flex justify-content-between align-items-center w-100";
+
+  let operationNameDiv = document.createElement("div");
+  operationNameDiv.className = "operationName";
+  operationNameDiv.textContent = selectedOperation;
+  containerDiv.appendChild(operationNameDiv);
+
+  let arrowsDiv = document.createElement("div");
+  arrowsDiv.className = "arrows d-flex";
+
+  let moveUpButton = document.createElement("button");
+  moveUpButton.className = "btn btn-secondary move-up ms-1";
+  moveUpButton.innerHTML = '<span class="material-symbols-rounded">arrow_upward</span>';
+  arrowsDiv.appendChild(moveUpButton);
+
+  let moveDownButton = document.createElement("button");
+  moveDownButton.className = "btn btn-secondary move-down ms-1";
+  moveDownButton.innerHTML = '<span class="material-symbols-rounded">arrow_downward</span>';
+  arrowsDiv.appendChild(moveDownButton);
+
+  let settingsButton = document.createElement("button");
+  settingsButton.className = `btn ${hasSettings ? "btn-warning" : "btn-secondary"} pipelineSettings ms-1`;
+  if (!hasSettings) {
+    settingsButton.disabled = true;
+  }
+  settingsButton.innerHTML = '<span class="material-symbols-rounded">settings</span>';
+  arrowsDiv.appendChild(settingsButton);
+
+  let removeButton = document.createElement("button");
+  removeButton.className = "btn btn-danger remove ms-1";
+  removeButton.innerHTML = '<span class="material-symbols-rounded">close</span>';
+  arrowsDiv.appendChild(removeButton);
+
+  containerDiv.appendChild(arrowsDiv);
+  listItem.appendChild(containerDiv);
+
+  pipelineList.appendChild(listItem);
+
+  listItem.querySelector(".move-up").addEventListener("click", function (event) {
+    event.preventDefault();
+    if (listItem.previousElementSibling) {
+      pipelineList.insertBefore(listItem, listItem.previousElementSibling);
+      updateConfigInDropdown();
+    }
+  });
+
+  listItem.querySelector(".move-down").addEventListener("click", function (event) {
+    event.preventDefault();
+    if (listItem.nextElementSibling) {
+      pipelineList.insertBefore(listItem.nextElementSibling, listItem);
+      updateConfigInDropdown();
+    }
+  });
+
+  listItem.querySelector(".remove").addEventListener("click", function (event) {
+    event.preventDefault();
+    pipelineList.removeChild(listItem);
+    hideOrShowPipelineHeader();
+    updateConfigInDropdown();
+  });
+
+  listItem.querySelector(".pipelineSettings").addEventListener("click", function (event) {
+    event.preventDefault();
+    showpipelineSettingsModal(selectedOperation);
+    hideOrShowPipelineHeader();
+  });
+
+  function showpipelineSettingsModal(operation) {
+    let pipelineSettingsModal = document.getElementById("pipelineSettingsModal");
+    let pipelineSettingsContent = document.getElementById("pipelineSettingsContent");
+    let operationData = apiDocs[operation].post.parameters || [];
+
+    // Resolve the $ref reference to get actual schema properties
+    let refKey = apiDocs[operation].post.requestBody.content["multipart/form-data"].schema["$ref"].split("/").pop();
+    let requestBodyData = apiSchemas[refKey].properties || {};
+
+    // Combine operationData and requestBodyData into a single array
+    operationData = operationData.concat(
+      Object.keys(requestBodyData).map((key) => ({
+        name: key,
+        schema: requestBodyData[key],
+      })),
+    );
+
+    pipelineSettingsContent.innerHTML = "";
+
+    operationData.forEach((parameter) => {
+      // If the parameter name is 'fileInput', return early to skip the rest of this iteration
+      if (parameter.name === "fileInput") return;
+
+      let parameterDiv = document.createElement("div");
+      parameterDiv.className = "mb-3";
+
+      let parameterLabel = document.createElement("label");
+      parameterLabel.textContent = `${parameter.name} (${parameter.schema.type}): `;
+      parameterLabel.title = parameter.schema.description;
+      parameterLabel.setAttribute("for", parameter.name);
+      parameterDiv.appendChild(parameterLabel);
+
+      let defaultValue = parameter.schema.example;
+      if (defaultValue === undefined) defaultValue = parameter.schema.default;
+
+      let parameterInput;
+
+      // check if enum exists in schema
+      if (parameter.schema.enum) {
+        // if enum exists, create a select element
+        parameterInput = document.createElement("select");
+        parameterInput.className = "form-control";
+
+        // iterate over each enum value and create an option for it
+        parameter.schema.enum.forEach((value) => {
+          let option = document.createElement("option");
+          option.value = value;
+          option.text = value;
+          parameterInput.appendChild(option);
+        });
+      } else {
+        // switch-case statement for handling non-enum types
+        switch (parameter.schema.type) {
+          case "string":
+            if (parameter.schema.format === "binary") {
+              // This is a file input
+
+              //parameterInput = document.createElement('input');
+              //parameterInput.type = 'file';
+              //parameterInput.className = "form-control";
+
+              parameterInput = document.createElement("input");
+              parameterInput.type = "text";
+              parameterInput.className = "form-control";
+              parameterInput.value = "FileInputPathToBeInputtedManuallyForOffline";
+            } else {
+              parameterInput = document.createElement("input");
+              parameterInput.type = "text";
+              parameterInput.className = "form-control";
+              if (defaultValue !== undefined) parameterInput.value = defaultValue;
+            }
+            break;
+          case "number":
+          case "integer":
+            parameterInput = document.createElement("input");
+            parameterInput.type = "number";
+            parameterInput.className = "form-control";
+            if (defaultValue !== undefined) parameterInput.value = defaultValue;
+            break;
+          case "boolean":
+            parameterInput = document.createElement("input");
+            parameterInput.type = "checkbox";
+            if (defaultValue === true) parameterInput.checked = true;
+            break;
+          case "array":
+            // If parameter.schema.format === 'binary' is to be checked, it should be checked here
+            parameterInput = document.createElement("textarea");
+            parameterInput.placeholder = 'Enter a JSON formatted array, e.g., ["item1", "item2", "item3"]';
+            parameterInput.className = "form-control";
+            break;
+          case "object":
+            parameterInput = document.createElement("textarea");
+            parameterInput.placeholder = 'Enter a JSON formatted object, e.g., {"key": "value"}  If this is a fileInput, it is not currently supported';
+            parameterInput.className = "form-control";
+            break;
+          default:
+            parameterInput = document.createElement("input");
+            parameterInput.type = "text";
+            parameterInput.className = "form-control";
+            if (defaultValue !== undefined) parameterInput.value = defaultValue;
+        }
+      }
+      parameterInput.id = parameter.name;
+
+      console.log("defaultValue", defaultValue);
+      console.log("parameterInput", parameterInput);
+      if (operationSettings[operation] && operationSettings[operation][parameter.name] !== undefined) {
+        let savedValue = operationSettings[operation][parameter.name];
+
+        switch (parameter.schema.type) {
+          case "number":
+          case "integer":
+            parameterInput.value = savedValue.toString();
+            break;
+          case "boolean":
+            parameterInput.checked = savedValue;
+            break;
+          case "array":
+          case "object":
+            parameterInput.value = JSON.stringify(savedValue);
+            break;
+          default:
+            parameterInput.value = savedValue;
+        }
+      }
+      console.log("parameterInput2", parameterInput);
+      parameterDiv.appendChild(parameterInput);
+
+      pipelineSettingsContent.appendChild(parameterDiv);
+    });
+
+    if (hasSettings) {
+      let saveButton = document.createElement("button");
+      saveButton.textContent = saveSettings;
+      saveButton.className = "btn btn-primary";
+      saveButton.addEventListener("click", function (event) {
+        event.preventDefault();
+        let settings = {};
+        operationData.forEach((parameter) => {
+          if (parameter.name !== "fileInput") {
+            let value = document.getElementById(parameter.name).value;
+            switch (parameter.schema.type) {
+              case "number":
+              case "integer":
+                settings[parameter.name] = Number(value);
+                break;
+              case "boolean":
+                settings[parameter.name] = document.getElementById(parameter.name).checked;
+                break;
+              case "array":
+              case "object":
+                  if (value === null || value === "") {
+                    settings[parameter.name] = "";
+                  } else {
+                    try {
+                      const parsedValue = JSON.parse(value);
+                      if (Array.isArray(parsedValue)) {
+                        settings[parameter.name] = parsedValue;
+                      } else {
+                        settings[parameter.name] = value;
+                      }
+                    } catch (e) {
+                      settings[parameter.name] = value;
+                    }
+                }
+                break;
+              default:
+                settings[parameter.name] = value;
+            }
+          }
+        });
+        operationSettings[operation] = settings;
+        //pipelineSettingsModal.style.display = "none";
+      });
+      pipelineSettingsContent.appendChild(saveButton);
+      saveButton.click();
+    }
+    //pipelineSettingsModal.style.display = "block";
+
+    //pipelineSettingsModal.getElementsByClassName("close")[0].onclick = function() {
+    //  pipelineSettingsModal.style.display = "none";
+    //}
+
+    //window.onclick = function(event) {
+    //  if (event.target == pipelineSettingsModal) {
+    //    pipelineSettingsModal.style.display = "none";
+    //  }
+    //}
+  }
+  showpipelineSettingsModal(selectedOperation);
+  updateConfigInDropdown();
+  hideOrShowPipelineHeader();
+});
+
+function loadBrowserPipelinesIntoDropdown() {
+  let pipelineSelect = document.getElementById("pipelineSelect");
+
+  // Retrieve the current set of option values for comparison
+  let existingOptions = new Set();
+  for (let option of pipelineSelect.options) {
+    existingOptions.add(option.value);
+  }
+
+   // Iterate over all items in localStorage
+  for (let i = 0; i < localStorage.length; i++) {
+    let key = localStorage.key(i);
+    if (key.startsWith("#Pipeline-")) {
+      let pipelineData = localStorage.getItem(key);
+      // Check if the data is already in the dropdown
+      if (!existingOptions.has(pipelineData)) {
+        let pipelineName = key.replace("#Pipeline-", ""); // Extract pipeline name from the key
+        let option = new Option(pipelineName, pipelineData); // Use pipeline data as the option value
+        pipelineSelect.appendChild(option);
+      }
+    }
+  }
+}
+loadBrowserPipelinesIntoDropdown();
+
+function updateConfigInDropdown() {
+  let pipelineSelect = document.getElementById("pipelineSelect");
+  let selectedOption = pipelineSelect.options[pipelineSelect.selectedIndex];
+
+  // Get the current configuration as JSON
+  let pipelineConfigJson = configToJson();
+  console.log("pipelineConfigJson", pipelineConfigJson);
+  if (!pipelineConfigJson) {
+    console.error("Failed to update configuration: Invalid configuration");
+    return;
+  }
+
+  // Update the value of the selected option with the new configuration
+  selectedOption.value = pipelineConfigJson;
+}
+
+var saveBtn = document.getElementById("savePipelineBtn");
+var saveBrowserBtn = document.getElementById("saveBrowserPipelineBtn");
+// Remove any existing event listeners
+saveBtn.removeEventListener("click", savePipeline);
+saveBrowserBtn.removeEventListener("click", savePipelineToBrowser);
+// Add the event listener
+saveBtn.addEventListener("click", savePipeline);
+saveBrowserBtn.addEventListener("click", savePipelineToBrowser);
+
+function configToJson() {
+  if (!validatePipeline()) {
+    return null; // Return null if validation fails
+  }
+
+  var pipelineName = document.getElementById("pipelineName").value;
+  let pipelineList = document.getElementById("pipelineList").children;
+  let pipelineConfig = {
+    name: pipelineName,
+    pipeline: [],
+    _examples: {
+      outputDir: "{outputFolder}/{folderName}",
+      outputFileName: "{filename}-{pipelineName}-{date}-{time}",
+    },
+    outputDir: "{outputFolder}",
+    outputFileName: "{filename}",
+  };
+
+  for (let i = 0; i < pipelineList.length; i++) {
+    let operationName = pipelineList[i].querySelector(".operationName").textContent;
+    let parameters = operationSettings[operationName] || {};
+
+    parameters["fileInput"] = "automated";
+
+    pipelineConfig.pipeline.push({
+      operation: operationName,
+      parameters: parameters,
+    });
+  }
+  return JSON.stringify(pipelineConfig, null, 2);
+}
+
+function savePipelineToBrowser() {
+  let pipelineConfigJson = configToJson();
+  if (!pipelineConfigJson) {
+    console.error("Failed to save pipeline: Invalid configuration");
+    return;
+  }
+
+  let pipelineName = document.getElementById("pipelineName").value;
+  if (!pipelineName) {
+    console.error("Failed to save pipeline: Pipeline name is required");
+    return;
+  }
+  localStorage.setItem("#Pipeline-" +pipelineName, pipelineConfigJson);
+  console.log("Pipeline configuration saved to localStorage");
+}
+function savePipeline() {
+  let pipelineConfigJson = configToJson();
+  if (!pipelineConfigJson) {
+    console.error("Failed to save pipeline: Invalid configuration");
+    return;
+  }
+
+  let pipelineName = document.getElementById("pipelineName").value;
+  console.log("Downloading...");
+  let a = document.createElement("a");
+  a.href = URL.createObjectURL(new Blob([pipelineConfigJson], { type: "application/json" }));
+  a.download = pipelineName + ".json";
+  a.style.display = "none";
+
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+}
+
+async function processPipelineConfig(configString) {
+  console.log("configString", configString);
+  let pipelineConfig = JSON.parse(configString);
+  let pipelineList = document.getElementById("pipelineList");
+
+  while (pipelineList.firstChild) {
+    pipelineList.removeChild(pipelineList.firstChild);
+  }
+  document.getElementById("pipelineName").value = pipelineConfig.name;
+  for (const operationConfig of pipelineConfig.pipeline) {
+    let operationsDropdown = document.getElementById("operationsDropdown");
+    operationsDropdown.value = operationConfig.operation;
+    operationSettings[operationConfig.operation] = operationConfig.parameters;
+
+    // assuming addOperation is async
+    await new Promise((resolve) => {
+      document.getElementById("addOperationBtn").addEventListener("click", resolve, { once: true });
+      document.getElementById("addOperationBtn").click();
+    });
+
+    let lastOperation = pipelineList.lastChild;
+
+    Object.keys(operationConfig.parameters).forEach((parameterName) => {
+      let input = document.getElementById(parameterName);
+      if (input) {
+        switch (input.type) {
+          case "checkbox":
+            input.checked = operationConfig.parameters[parameterName];
+            break;
+          case "number":
+            input.value = operationConfig.parameters[parameterName].toString();
+            break;
+          case "file":
+            if (parameterName !== "fileInput") {
+              // Create a new file input element
+              let newInput = document.createElement("input");
+              newInput.type = "file";
+              newInput.id = parameterName;
+
+              // Add the new file input to the main page (change the selector according to your needs)
+              document.querySelector("#main").appendChild(newInput);
+            }
+            break;
+          case "text":
+          case "textarea":
+          default:
+            var value = operationConfig.parameters[parameterName]
+            if (typeof value !== 'string') {
+                input.value = JSON.stringify(value) ;
+            } else {
+              input.value = value;
+            }
+
+        }
+      }
+    });
+  }
+}
+
+document.getElementById("uploadPipelineBtn").addEventListener("click", function () {
+  document.getElementById("uploadPipelineInput").click();
+});
+
+document.getElementById("uploadPipelineInput").addEventListener("change", function (e) {
+  let reader = new FileReader();
+  reader.onload = function (event) {
+    processPipelineConfig(event.target.result);
+  };
+  reader.readAsText(e.target.files[0]);
+  hideOrShowPipelineHeader();
+});
+
+document.getElementById("pipelineSelect").addEventListener("change", function (e) {
+  let selectedPipelineJson = e.target.value; // assuming the selected value is the JSON string of the pipeline config
+  processPipelineConfig(selectedPipelineJson);
+});
+
+function hideOrShowPipelineHeader() {
+  var pipelineHeader = document.getElementById("pipelineHeader");
+  var pipelineList = document.getElementById("pipelineList");
+
+  if (pipelineList.children.length === 0) {
+    // Hide the pipeline header if there are no items in the pipeline list
+    pipelineHeader.style.display = "none";
+  } else {
+    // Show the pipeline header if there are items in the pipeline list
+    pipelineHeader.style.display = "block";
+  }
+}