Flowfile 0.3.9__py3-none-any.whl → 0.5.1__py3-none-any.whl

flowfile/web/static/assets/{designer-6c322d8e.js → designer-9633482a.js}

@@ -1,5 +1,11 @@
-import { a as axios, d as defineComponent, r as ref, o as onUnmounted, b as resolveComponent, c as openBlock, e as createElementBlock, f as createVNode, w as withCtx, g as createTextVNode, u as unref, h as createBlock, i as createCommentVNode, E as ElNotification, _ as _export_sfc, j as defineStore, k as getDefaultExportFromCjs, l as computed$1, m as watch$1, n as onMounted, p as createBaseVNode, t as toDisplayString, F as Fragment, q as renderList, s as normalizeClass, v as withModifiers, x as withKeys, y as _imports_1, z as ElMessage, A as ElMessageBox, B as inject, C as effectScope, D as provide, G as getCurrentInstance, H as getCurrentScope, I as onScopeDispose, J as createPropsRestProxy, K as toRef, L as renderSlot, M as reactive, N as useSlots, O as isRef, P as toRefs$1, Q as customRef, R as nextTick, S as onBeforeMount, T as normalizeStyle, U as onBeforeUnmount, V as isMemoSame, W as toValue$1, X as shallowRef, Y as h, Z as markRaw$1, $ as readonly, a0 as useAttrs, a1 as mergeProps, a2 as resolveDynamicComponent, a3 as watchEffect, a4 as normalizeProps, a5 as withDirectives, a6 as vModelText, a7 as Teleport, a8 as guardReactiveProps, a9 as __vitePreload, aa as render, ab as vShow, ac as authService, ad as flowfileCorebaseURL } from "./index-683fc198.js";
-import { u as useNodeStore, P as PopOver, a as Parser, N as NodeSet, b as NodeType, D as DefaultBufferLength, c as NodeProp, T as Tree, I as IterMode, s as styleTags, t as tags, L as LanguageSupport, d as syntaxTree, i as ifNotIn, e as LRLanguage, f as indentNodeProp, g as delimitedIndent, h as foldNodeProp, j as foldInside, k as completeFromList, l as NodeWeakMap, m as snippetCompletion, H as HighlightStyle, n as syntaxHighlighting, E as EditorView, o as T } from "./vue-codemirror.esm-dc5e3348.js";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { a as axios, r as ref, o as onUnmounted, E as ElNotification, d as defineComponent, b as resolveComponent, c as openBlock, e as createElementBlock, f as createVNode, w as withCtx, g as createTextVNode, u as unref, h as createBlock, i as createCommentVNode, _ as _export_sfc, j as defineStore, k as getDefaultExportFromCjs, l as computed$1, m as watch$1, n as onMounted, p as createBaseVNode, t as toDisplayString, F as Fragment, q as renderList, s as normalizeClass, v as withModifiers, x as withKeys, y as _imports_1, z as ElMessage, A as ElMessageBox, B as inject, C as effectScope, D as provide, G as getCurrentInstance, H as getCurrentScope, I as onScopeDispose, J as createPropsRestProxy, K as toRef, L as renderSlot, M as reactive, N as useSlots, O as isRef, P as toRefs$1, Q as customRef, R as nextTick, S as onBeforeMount, T as normalizeStyle, U as onBeforeUnmount, V as isMemoSame, W as toValue$1, X as shallowRef, Y as h, Z as markRaw$1, $ as readonly, a0 as useAttrs, a1 as mergeProps, a2 as resolveDynamicComponent, a3 as watchEffect, a4 as normalizeProps, a5 as defineAsyncComponent, a6 as onErrorCaptured, a7 as __vitePreload, a8 as withDirectives, a9 as vModelText, aa as Teleport, ab as guardReactiveProps, ac as Transition$2, ad as createStaticVNode, ae as render, af as vShow, ag as authService, ah as flowfileCorebaseURL } from "./index-5429bbf8.js";
+import { u as useNodeStore, P as PopOver, a as Parser, N as NodeSet, b as NodeType, D as DefaultBufferLength, c as NodeProp, T as Tree, I as IterMode, s as styleTags, t as tags, L as LanguageSupport, d as syntaxTree, i as ifNotIn, e as LRLanguage, f as indentNodeProp, g as delimitedIndent, h as foldNodeProp, j as foldInside, k as completeFromList, l as NodeWeakMap, m as snippetCompletion, H as HighlightStyle, n as syntaxHighlighting, E as EditorView, o as T } from "./vue-codemirror.esm-41b0e0d7.js";
 const saveFlow = async (flowId, flowPath) => {
   try {
     await axios.get("/save_flow", {
@@ -15,14 +21,16 @@ const saveFlow = async (flowId, flowPath) => {
     console.error("There was an error saving the flow:", error);
   }
 };
-async function createFlow(flowPath) {
-  console.log("Creating flow", flowPath);
+async function createFlow(flowPath = null, name = null) {
   const response = await axios.post(
     "/editor/create_flow",
     {},
     {
       headers: { accept: "application/json" },
-      params: { flow_path: flowPath }
+      params: {
+        flow_path: flowPath,
+        name
+      }
     }
   );
   if (response.status === 200) {
@@ -72,8 +80,291 @@ const updateRunStatus = async (flowId, nodeStore, showRunResults = true) => {
   }
   return response;
 };
-const _hoisted_1$h = { class: "button-group" };
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _FlowExecutionState = class _FlowExecutionState {
+  constructor() {
+    __publicField(this, "pollingIntervals", /* @__PURE__ */ new Map());
+    __publicField(this, "activeExecutions", /* @__PURE__ */ new Map());
+  }
+  static getInstance() {
+    if (!_FlowExecutionState.instance) {
+      _FlowExecutionState.instance = new _FlowExecutionState();
+    }
+    return _FlowExecutionState.instance;
+  }
+  setPollingInterval(key, interval2) {
+    this.pollingIntervals.set(key, interval2);
+  }
+  getPollingInterval(key) {
+    return this.pollingIntervals.get(key) || null;
+  }
+  clearPollingInterval(key) {
+    const interval2 = this.pollingIntervals.get(key);
+    if (interval2) {
+      clearInterval(interval2);
+      this.pollingIntervals.delete(key);
+    }
+  }
+  setExecutionState(key, state2) {
+    this.activeExecutions.set(key, state2);
+  }
+  getExecutionState(key) {
+    return this.activeExecutions.get(key) || false;
+  }
+  clearAll() {
+    this.pollingIntervals.forEach((interval2) => clearInterval(interval2));
+    this.pollingIntervals.clear();
+    this.activeExecutions.clear();
+  }
+};
+__publicField(_FlowExecutionState, "instance");
+let FlowExecutionState = _FlowExecutionState;
+function useFlowExecution(flowId, pollingConfig = {
+  interval: 2e3,
+  enabled: true,
+  maxAttempts: Infinity
+}, options = {}) {
+  const nodeStore = useNodeStore();
+  const state2 = FlowExecutionState.getInstance();
+  const localPollingInterval = ref(null);
+  const isExecuting = ref(false);
+  const getFlowId = () => {
+    return typeof flowId === "number" ? flowId : flowId.value;
+  };
+  const getPollingKey = (suffix = "") => {
+    const customKey = options.pollingKey || `flow_${getFlowId()}`;
+    return suffix ? `${customKey}_${suffix}` : customKey;
+  };
+  const freezeFlow = () => {
+    const vueFlowElement = nodeStore.vueFlowInstance;
+    if (vueFlowElement) {
+      vueFlowElement.nodesDraggable.value = false;
+      vueFlowElement.nodesConnectable.value = false;
+      vueFlowElement.elementsSelectable.value = false;
+    }
+  };
+  const unFreezeFlow = () => {
+    const vueFlowElement = nodeStore.vueFlowInstance;
+    if (vueFlowElement) {
+      vueFlowElement.nodesDraggable.value = true;
+      vueFlowElement.nodesConnectable.value = true;
+      vueFlowElement.elementsSelectable.value = true;
+    }
+  };
+  const showNotification = (title, message, type, dangerouslyUseHTMLString) => {
+    ElNotification({
+      title,
+      message,
+      type,
+      position: "top-left",
+      dangerouslyUseHTMLString
+    });
+  };
+  const startPolling = (checkFn, pollingKeySuffix = "") => {
+    const key = getPollingKey(pollingKeySuffix);
+    if (options.persistPolling) {
+      const existingInterval = state2.getPollingInterval(key);
+      if (existingInterval === null && pollingConfig.enabled) {
+        const interval2 = setInterval(checkFn, pollingConfig.interval || 2e3);
+        state2.setPollingInterval(key, interval2);
+      }
+    } else {
+      if (localPollingInterval.value === null && pollingConfig.enabled) {
+        localPollingInterval.value = setInterval(
+          checkFn,
+          pollingConfig.interval || 2e3
+        );
+      }
+    }
+  };
+  const stopPolling = (pollingKeySuffix = "") => {
+    if (options.persistPolling) {
+      const key = getPollingKey(pollingKeySuffix);
+      state2.clearPollingInterval(key);
+    } else {
+      if (localPollingInterval.value !== null) {
+        clearInterval(localPollingInterval.value);
+        localPollingInterval.value = null;
+      }
+    }
+  };
+  const isPollingActive = (pollingKeySuffix = "") => {
+    if (options.persistPolling) {
+      const key = getPollingKey(pollingKeySuffix);
+      return state2.getPollingInterval(key) !== null;
+    }
+    return localPollingInterval.value !== null;
+  };
+  const createNotificationConfig = (runInfo) => ({
+    title: runInfo.success ? "Success" : "Error",
+    message: runInfo.success ? "The operation has completed successfully" : "There were issues with the operation, check the logging for more information",
+    type: runInfo.success ? "success" : "error"
+  });
+  const checkRunStatus = async (customSuccessMessage, pollingKeySuffix = "") => {
+    try {
+      const response = await updateRunStatus(getFlowId(), nodeStore);
+      if (response.status === 200) {
+        stopPolling(pollingKeySuffix);
+        unFreezeFlow();
+        nodeStore.isRunning = false;
+        isExecuting.value = false;
+        state2.setExecutionState(getPollingKey(pollingKeySuffix), false);
+        console.log("response data", response.data);
+        const notificationConfig = createNotificationConfig(response.data);
+        if (customSuccessMessage && response.data.success) {
+          notificationConfig.message = customSuccessMessage;
+        }
+        showNotification(
+          notificationConfig.title,
+          notificationConfig.message,
+          notificationConfig.type
+        );
+      } else if (response.status === 404) {
+        stopPolling(pollingKeySuffix);
+        unFreezeFlow();
+        nodeStore.isRunning = false;
+        isExecuting.value = false;
+        state2.setExecutionState(getPollingKey(pollingKeySuffix), false);
+        nodeStore.runResults = {};
+      }
+    } catch (error) {
+      console.error("Error checking run status:", error);
+      stopPolling(pollingKeySuffix);
+      unFreezeFlow();
+      nodeStore.isRunning = false;
+      isExecuting.value = false;
+      state2.setExecutionState(getPollingKey(pollingKeySuffix), false);
+    }
+  };
+  const escapeHtml = (text) => {
+    const div = document.createElement("div");
+    div.textContent = text;
+    return div.innerHTML;
+  };
+  const runFlow = async () => {
+    const flowSettings = await getFlowSettings(getFlowId());
+    if (!flowSettings) {
+      throw new Error("Failed to retrieve flow settings");
+    }
+    freezeFlow();
+    nodeStore.resetNodeResult();
+    isExecuting.value = true;
+    nodeStore.isRunning = true;
+    nodeStore.hideLogViewerForThisRun = false;
+    state2.setExecutionState(getPollingKey(), true);
+    const executionLocationText = flowSettings.execution_location === "local" ? "Local" : "Remote";
+    const escapedFlowName = escapeHtml(flowSettings.name);
+    const notificationMessage = `
+      <div style="line-height: 1.4;">
+        <div><strong>Flow:</strong> "${escapedFlowName}"</div>
+        <div><strong>Mode:</strong> ${flowSettings.execution_mode}</div>
+        <div><strong>Location:</strong> ${executionLocationText}</div>
+      </div>
+    `;
+    showNotification("🚀 Flow Started", notificationMessage, void 0, true);
+    try {
+      await axios.post("/flow/run/", null, {
+        params: { flow_id: getFlowId() },
+        headers: { accept: "application/json" }
+      });
+      nodeStore.showLogViewer();
+      startPolling(() => checkRunStatus());
+    } catch (error) {
+      console.error("Error starting run:", error);
+      unFreezeFlow();
+      nodeStore.isRunning = false;
+      isExecuting.value = false;
+      state2.setExecutionState(getPollingKey(), false);
+      showNotification("Error", "Failed to start the flow", "error");
+    }
+  };
+  const triggerNodeFetch = async (nodeId) => {
+    var _a, _b;
+    const pollingKeySuffix = `node_${nodeId}`;
+    if (isPollingActive(pollingKeySuffix)) {
+      console.log(`Node ${nodeId} fetch already in progress`);
+      return;
+    }
+    freezeFlow();
+    nodeStore.resetNodeResult();
+    isExecuting.value = true;
+    nodeStore.isRunning = true;
+    state2.setExecutionState(getPollingKey(pollingKeySuffix), true);
+    showNotification(
+      "📊 Fetching Node Data",
+      `Starting data fetch for node ${nodeId}...`,
+      void 0,
+      false
+    );
+    try {
+      await axios.post("/node/trigger_fetch_data", null, {
+        params: {
+          flow_id: getFlowId(),
+          node_id: nodeId
+        },
+        headers: { accept: "application/json" }
+      });
+      nodeStore.showLogViewer();
+      startPolling(
+        () => checkRunStatus("Node data has been fetched successfully", pollingKeySuffix),
+        pollingKeySuffix
+      );
+    } catch (error) {
+      console.error("Error triggering node fetch:", error);
+      unFreezeFlow();
+      nodeStore.isRunning = false;
+      isExecuting.value = false;
+      state2.setExecutionState(getPollingKey(pollingKeySuffix), false);
+      const errorMessage = ((_b = (_a = error.response) == null ? void 0 : _a.data) == null ? void 0 : _b.detail) || "Failed to fetch node data";
+      showNotification("Error", errorMessage, "error");
+      throw error;
+    }
+  };
+  const cancelFlow = async () => {
+    try {
+      await axios.post("/flow/cancel/", null, {
+        params: { flow_id: getFlowId() },
+        headers: { accept: "application/json" }
+      });
+      showNotification("Cancelling", "The operation is being cancelled");
+      unFreezeFlow();
+      nodeStore.isRunning = false;
+      isExecuting.value = false;
+      stopPolling();
+      if (options.persistPolling) {
+        for (let i2 = 0; i2 < 100; i2++) {
+          state2.clearPollingInterval(getPollingKey(`node_${i2}`));
+        }
+      }
+    } catch (error) {
+      console.error("Error cancelling run:", error);
+      showNotification("Error", "Failed to cancel the operation", "error");
+    }
+  };
+  onUnmounted(() => {
+    if (!options.persistPolling && localPollingInterval.value !== null) {
+      clearInterval(localPollingInterval.value);
+      localPollingInterval.value = null;
+    }
+  });
+  return {
+    // State
+    isExecuting,
+    // Methods
+    runFlow,
+    triggerNodeFetch,
+    cancelFlow,
+    showNotification,
+    startPolling,
+    stopPolling,
+    checkRunStatus,
+    isPollingActive,
+    // Expose flow control if needed
+    freezeFlow,
+    unFreezeFlow
+  };
+}
+const _hoisted_1$k = { class: "button-group" };
+const _sfc_main$n = /* @__PURE__ */ defineComponent({
   __name: "run",
   props: {
     flowId: { type: Number, required: true },
@@ -84,133 +375,20 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
         enabled: true,
         maxAttempts: Infinity
       })
+    },
+    persistPolling: {
+      type: Boolean,
+      default: false
+      // RunButton doesn't need persistent polling by default
     }
   },
   emits: ["logs-start", "logs-stop"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const nodeStore = useNodeStore();
-    const pollingInterval = ref(null);
     const props2 = __props;
-    const freezeFlow = () => {
-      let vueFlowElement = nodeStore.vueFlowInstance;
-      if (vueFlowElement) {
-        vueFlowElement.nodesDraggable.value = false;
-        vueFlowElement.nodesConnectable.value = false;
-        vueFlowElement.elementsSelectable.value = false;
-      }
-    };
-    const unFreezeFlow = () => {
-      let vueFlowElement = nodeStore.vueFlowInstance;
-      if (vueFlowElement) {
-        vueFlowElement.nodesDraggable.value = true;
-        vueFlowElement.nodesConnectable.value = true;
-        vueFlowElement.elementsSelectable.value = true;
-      }
-    };
-    const showNotification = (title, message, type, dangerouslyUseHTMLString) => {
-      ElNotification({
-        title,
-        message,
-        type,
-        position: "top-left",
-        dangerouslyUseHTMLString
-      });
-    };
-    const startPolling = (checkFn) => {
-      if (pollingInterval.value === null && props2.pollingConfig.enabled) {
-        pollingInterval.value = setInterval(checkFn, props2.pollingConfig.interval);
-      }
-    };
-    const stopPolling = () => {
-      if (pollingInterval.value !== null) {
-        clearInterval(pollingInterval.value);
-        pollingInterval.value = null;
-      }
-    };
-    const createNotificationConfig = (runInfo) => ({
-      title: runInfo.success ? "Success" : "Error",
-      message: runInfo.success ? "The flow has completed" : "There were issues with the flow run, check the logging for more information",
-      type: runInfo.success ? "success" : "error"
-    });
-    const checkRunStatus = async () => {
-      try {
-        const response = await updateRunStatus(props2.flowId, nodeStore);
-        if (response.status === 200) {
-          stopPolling();
-          unFreezeFlow();
-          nodeStore.isRunning = false;
-          const notificationConfig = createNotificationConfig(response.data);
-          showNotification(
-            notificationConfig.title,
-            notificationConfig.message,
-            notificationConfig.type
-          );
-        } else if (response.status === 404) {
-          stopPolling();
-          unFreezeFlow();
-          nodeStore.isRunning = false;
-          nodeStore.runResults = {};
-        }
-      } catch (error) {
-        console.error("Error checking run status:", error);
-        stopPolling();
-        unFreezeFlow();
-        nodeStore.isRunning = false;
-      }
-    };
-    const runFlow = async () => {
-      const flowSettings = await getFlowSettings(nodeStore.flow_id);
-      if (!flowSettings) {
-        throw new Error("Failed to retrieve flow settings");
-      }
-      const escapeHtml = (text) => {
-        const div = document.createElement("div");
-        div.textContent = text;
-        return div.innerHTML;
-      };
-      freezeFlow();
-      nodeStore.resetNodeResult();
-      const executionLocationText = flowSettings.execution_location === "local" ? "Local" : "Remote";
-      const escapedFlowName = escapeHtml(flowSettings.name);
-      const notificationMessage = `
-    <div style="line-height: 1.4;">
-      <div><strong>Flow:</strong> "${escapedFlowName}"</div>
-      <div><strong>Mode:</strong> ${flowSettings.execution_mode}</div>
-      <div><strong>Location:</strong> ${executionLocationText}</div>
-    </div>
-  `;
-      showNotification("🚀 Flow Started", notificationMessage, void 0, true);
-      try {
-        await axios.post("/flow/run/", null, {
-          params: { flow_id: props2.flowId },
-          headers: { accept: "application/json" }
-        });
-        nodeStore.isRunning = true;
-        nodeStore.showLogViewer();
-        startPolling(checkRunStatus);
-      } catch (error) {
-        console.error("Error starting run:", error);
-        unFreezeFlow();
-        nodeStore.isRunning = false;
-      }
-    };
-    const cancelFlow = async () => {
-      try {
-        await axios.post("/flow/cancel/", null, {
-          params: { flow_id: props2.flowId },
-          headers: { accept: "application/json" }
-        });
-        showNotification("Cancelling", "The flow is being cancelled");
-        unFreezeFlow();
-        nodeStore.isRunning = false;
-        stopPolling();
-      } catch (error) {
-        console.error("Error cancelling run:", error);
-        showNotification("Error", "Failed to cancel the flow", "error");
-      }
-    };
-    onUnmounted(() => {
-      stopPolling();
+    const { runFlow, cancelFlow, showNotification, startPolling, stopPolling, checkRunStatus } = useFlowExecution(props2.flowId, props2.pollingConfig, {
+      persistPolling: props2.persistPolling,
+      pollingKey: `run_button_${props2.flowId}`
     });
     __expose({
       startPolling,
@@ -222,12 +400,12 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_el_button = resolveComponent("el-button");
-      return openBlock(), createElementBlock("div", _hoisted_1$h, [
+      return openBlock(), createElementBlock("div", _hoisted_1$k, [
         createVNode(_component_el_button, {
           size: "small",
           disabled: unref(nodeStore).isRunning,
           round: "",
-          onClick: _cache[0] || (_cache[0] = ($event) => runFlow())
+          onClick: _cache[0] || (_cache[0] = ($event) => unref(runFlow)())
         }, {
           default: withCtx(() => _cache[2] || (_cache[2] = [
             createTextVNode(" Run ")
@@ -239,7 +417,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           key: 0,
           size: "small",
           round: "",
-          onClick: _cache[1] || (_cache[1] = ($event) => cancelFlow())
+          onClick: _cache[1] || (_cache[1] = ($event) => unref(cancelFlow)())
         }, {
           default: withCtx(() => _cache[3] || (_cache[3] = [
             createTextVNode(" Cancel ")
@@ -251,8 +429,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const run_vue_vue_type_style_index_0_scoped_e9cba087_lang = "";
-const RunButton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-e9cba087"]]);
+const run_vue_vue_type_style_index_0_scoped_c0f9acc7_lang = "";
+const RunButton = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-c0f9acc7"]]);
 const _imports_0 = "/images/sheets.png";
 const useFileBrowserStore = defineStore("fileBrowser", {
   state: () => ({
@@ -275,7 +453,7 @@ const useFileBrowserStore = defineStore("fileBrowser", {
     }
   }
 });
-const handleApiError = (error) => {
+const handleApiError$1 = (error) => {
   var _a, _b, _c;
   throw {
     message: ((_b = (_a = error.response) == null ? void 0 : _a.data) == null ? void 0 : _b.detail) || "An unknown error occurred",
@@ -287,7 +465,7 @@ const getCurrentDirectoryContents = async (params) => {
     const response = await axios.get("files/current_directory_contents/", { params });
     return response.data;
   } catch (error) {
-    return handleApiError(error);
+    return handleApiError$1(error);
   }
 };
 const navigateUp = async () => {
@@ -295,7 +473,7 @@ const navigateUp = async () => {
     const response = await axios.post("files/navigate_up/");
     return response.data;
   } catch (error) {
-    return handleApiError(error);
+    return handleApiError$1(error);
   }
 };
 const navigateInto = async (directoryName) => {
@@ -305,7 +483,7 @@ const navigateInto = async (directoryName) => {
     });
     return response.data;
   } catch (error) {
-    return handleApiError(error);
+    return handleApiError$1(error);
   }
 };
 const navigateTo = async (directoryPath) => {
@@ -315,7 +493,7 @@ const navigateTo = async (directoryPath) => {
     });
     return response.data;
   } catch (error) {
-    return handleApiError(error);
+    return handleApiError$1(error);
   }
 };
 const getCurrentPath = async () => {
@@ -323,9 +501,12 @@ const getCurrentPath = async () => {
     const response = await axios.get("files/current_path/");
     return response.data;
   } catch (error) {
-    return handleApiError(error);
+    return handleApiError$1(error);
   }
 };
+const FLOWFILE_EXTENSIONS = ["flowfile", "yml", "yaml", "test"];
+const DATA_FILE_EXTENSIONS = ["xlsx", "parquet", "csv", "txt"];
+const ALLOWED_SAVE_EXTENSIONS = ["yaml", "yml"];
 function assertPath(path2) {
   if (typeof path2 !== "string") {
     throw new TypeError("Path must be a string. Received " + JSON.stringify(path2));
@@ -749,16 +930,16 @@ var posix = {
 posix.posix = posix;
 var pathBrowserify = posix;
 const path = /* @__PURE__ */ getDefaultExportFromCjs(pathBrowserify);
-const _hoisted_1$g = { class: "file-browser" };
-const _hoisted_2$d = { class: "browser-content" };
-const _hoisted_3$c = { class: "browser-toolbar" };
-const _hoisted_4$9 = { class: "path-navigation" };
-const _hoisted_5$7 = ["disabled"];
-const _hoisted_6$6 = { class: "current-path" };
-const _hoisted_7$3 = { class: "controls-row" };
-const _hoisted_8$1 = { class: "search-container" };
-const _hoisted_9 = { class: "sort-controls" };
-const _hoisted_10 = { class: "material-icons" };
+const _hoisted_1$j = { class: "file-browser" };
+const _hoisted_2$h = { class: "browser-content" };
+const _hoisted_3$g = { class: "browser-toolbar" };
+const _hoisted_4$b = { class: "path-navigation" };
+const _hoisted_5$8 = ["disabled"];
+const _hoisted_6$7 = { class: "current-path" };
+const _hoisted_7$5 = { class: "controls-row" };
+const _hoisted_8$3 = { class: "search-container" };
+const _hoisted_9$2 = { class: "sort-controls" };
+const _hoisted_10$1 = { class: "material-icons" };
 const _hoisted_11 = { class: "show-hidden-toggle" };
 const _hoisted_12 = { class: "browser-main" };
 const _hoisted_13 = {
@@ -787,8 +968,16 @@ const _hoisted_19 = {
 const _hoisted_20 = { class: "file-details" };
 const _hoisted_21 = { class: "file-info" };
 const _hoisted_22 = { class: "browser-actions" };
-const _hoisted_23 = { class: "dialog-footer" };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _hoisted_23 = {
+  key: 0,
+  class: "form-hint"
+};
+const _hoisted_24 = {
+  key: 0,
+  class: "auto-extension-hint"
+};
+const _hoisted_25 = { class: "dialog-footer" };
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "fileBrowser",
   props: {
     allowedFileTypes: { default: () => [] },
@@ -842,18 +1031,18 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     const showCreateDialog = ref(false);
     const newFileName = ref("");
     const fileNameError = ref("");
-    const fileNameInput = ref(null);
     const selectedFile = ref(null);
-    const DATA_FILE_TYPES = ["xlsx", "parquet", "csv", "txt"];
     const isDataFile = (file) => {
       if (file.is_directory)
         return false;
-      return DATA_FILE_TYPES.some((type) => file.name.toLowerCase().endsWith(`.${type.toLowerCase()}`));
+      const name = file.name.toLowerCase();
+      return DATA_FILE_EXTENSIONS.some((ext) => name.endsWith(`.${ext}`));
     };
     const isFlowfile = (file) => {
       if (file.is_directory)
         return false;
-      return file.name.toLowerCase().endsWith(".flowfile");
+      const name = file.name.toLowerCase();
+      return FLOWFILE_EXTENSIONS.some((ext) => name.endsWith(`.${ext}`));
     };
     const formatFileSize = (bytes) => {
       if (bytes < 1024)
@@ -961,10 +1150,25 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       }
       return true;
     };
+    const hasValidExtension = computed$1(() => {
+      const name = newFileName.value.trim().toLowerCase();
+      const validExtensions = props2.allowedFileTypes.length > 0 ? props2.allowedFileTypes : ALLOWED_SAVE_EXTENSIONS;
+      return validExtensions.some((ext) => name.endsWith(`.${ext}`));
+    });
+    const previewFileName = computed$1(() => {
+      const name = newFileName.value.trim();
+      if (!name)
+        return "";
+      if (hasValidExtension.value)
+        return name;
+      const defaultExt = props2.allowedFileTypes.length > 0 ? props2.allowedFileTypes[0] : "yaml";
+      return `${name}.${defaultExt}`;
+    });
     const handleCreateFile = () => {
       if (validateFileName(newFileName.value)) {
-        const newFilePath = path.join(currentPath.value, newFileName.value);
-        emit("createFile", newFilePath, currentPath.value, newFileName.value);
+        const fileName = previewFileName.value;
+        const newFilePath = path.join(currentPath.value, fileName);
+        emit("createFile", newFilePath, currentPath.value, fileName);
         showCreateDialog.value = false;
       }
     };
@@ -1069,16 +1273,16 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
       const _component_el_form_item = resolveComponent("el-form-item");
       const _component_el_form = resolveComponent("el-form");
       const _component_el_dialog = resolveComponent("el-dialog");
-      return openBlock(), createElementBlock("div", _hoisted_1$g, [
+      return openBlock(), createElementBlock("div", _hoisted_1$j, [
         _cache[17] || (_cache[17] = createBaseVNode("div", { class: "browser-header" }, [
           createBaseVNode("div", { class: "browser-title" }, [
             createBaseVNode("span", { class: "material-icons" }, "folder"),
             createBaseVNode("span", null, "File Browser")
           ])
         ], -1)),
-        createBaseVNode("div", _hoisted_2$d, [
-          createBaseVNode("div", _hoisted_3$c, [
-            createBaseVNode("div", _hoisted_4$9, [
+        createBaseVNode("div", _hoisted_2$h, [
+          createBaseVNode("div", _hoisted_3$g, [
+            createBaseVNode("div", _hoisted_4$b, [
               createBaseVNode("button", {
                 class: "nav-button",
                 disabled: loading.value,
@@ -1086,11 +1290,11 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
               }, _cache[7] || (_cache[7] = [
                 createBaseVNode("span", { class: "material-icons" }, "arrow_upward", -1),
                 createBaseVNode("span", null, "Up", -1)
-              ]), 8, _hoisted_5$7),
-              createBaseVNode("div", _hoisted_6$6, toDisplayString(currentPath.value), 1)
+              ]), 8, _hoisted_5$8),
+              createBaseVNode("div", _hoisted_6$7, toDisplayString(currentPath.value), 1)
             ]),
-            createBaseVNode("div", _hoisted_7$3, [
-              createBaseVNode("div", _hoisted_8$1, [
+            createBaseVNode("div", _hoisted_7$5, [
+              createBaseVNode("div", _hoisted_8$3, [
                 createVNode(_component_el_input, {
                   modelValue: searchTerm.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchTerm.value = $event),
@@ -1103,7 +1307,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                   _: 1
                 }, 8, ["modelValue"])
               ]),
-              createBaseVNode("div", _hoisted_9, [
+              createBaseVNode("div", _hoisted_9$2, [
                 createVNode(_component_el_select, {
                   modelValue: sortBy.value,
                   "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => sortBy.value = $event),
@@ -1137,7 +1341,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                   onClick: toggleSortDirection
                 }, {
                   default: withCtx(() => [
-                    createBaseVNode("span", _hoisted_10, toDisplayString(sortDirection.value === "asc" ? "arrow_upward" : "arrow_downward"), 1)
+                    createBaseVNode("span", _hoisted_10$1, toDisplayString(sortDirection.value === "asc" ? "arrow_upward" : "arrow_downward"), 1)
                   ]),
                   _: 1
                 })
@@ -1253,21 +1457,6 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
               ])),
               _: 1,
               __: [13]
-            }, 8, ["disabled"])) : createCommentVNode("", true),
-            _ctx.mode === "open" && selectedFile.value && !selectedFile.value.is_directory ? (openBlock(), createBlock(_component_el_button, {
-              key: 3,
-              type: "primary",
-              disabled: loading.value,
-              size: "small",
-              style: { "background-color": "rgb(92, 92, 92)", "color": "white" },
-              onClick: handleOpenFile
-            }, {
-              default: withCtx(() => _cache[14] || (_cache[14] = [
-                createBaseVNode("span", { class: "material-icons" }, "open_in_new", -1),
-                createTextVNode(" Open File ")
-              ])),
-              _: 1,
-              __: [14]
             }, 8, ["disabled"])) : createCommentVNode("", true)
           ])
         ]),
@@ -1280,7 +1469,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
           onClosed: handleDialogClosed
         }, {
           footer: withCtx(() => [
-            createBaseVNode("span", _hoisted_23, [
+            createBaseVNode("span", _hoisted_25, [
               createVNode(_component_el_button, {
                 onClick: _cache[5] || (_cache[5] = ($event) => showCreateDialog.value = false)
               }, {
@@ -1314,13 +1503,17 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
                 }, {
                   default: withCtx(() => [
                     createVNode(_component_el_input, {
-                      ref_key: "fileNameInput",
-                      ref: fileNameInput,
+                      ref: "fileNameInput",
                       modelValue: newFileName.value,
                       "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => newFileName.value = $event),
-                      placeholder: "Enter file name",
+                      placeholder: "Enter file name (e.g., my_flow)",
                       onKeyup: withKeys(handleCreateFile, ["enter"])
-                    }, null, 8, ["modelValue"])
+                    }, null, 8, ["modelValue"]),
+                    newFileName.value.trim() ? (openBlock(), createElementBlock("div", _hoisted_23, [
+                      _cache[14] || (_cache[14] = createBaseVNode("span", { class: "preview-label" }, "Will be saved as:", -1)),
+                      createBaseVNode("code", null, toDisplayString(previewFileName.value), 1),
+                      !hasValidExtension.value ? (openBlock(), createElementBlock("span", _hoisted_24, " (.yaml added automatically) ")) : createCommentVNode("", true)
+                    ])) : createCommentVNode("", true)
                   ]),
                   _: 1
                 }, 8, ["error"])
@@ -1334,15 +1527,19 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const fileBrowser_vue_vue_type_style_index_0_scoped_d5bb1173_lang = "";
-const FileBrowser = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-d5bb1173"]]);
-const _hoisted_1$f = { class: "action-buttons" };
-const _hoisted_2$c = { key: 0 };
-const _hoisted_3$b = { class: "settings-modal-content" };
-const _hoisted_4$8 = { class: "form-group" };
-const _hoisted_5$6 = { class: "form-group" };
-const _hoisted_6$5 = { class: "form-group" };
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const fileBrowser_vue_vue_type_style_index_0_scoped_11a74179_lang = "";
+const FileBrowser = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-11a74179"]]);
+const _hoisted_1$i = { class: "action-buttons" };
+const _hoisted_2$g = { class: "quick-create-modal" };
+const _hoisted_3$f = { class: "form-group" };
+const _hoisted_4$a = { class: "preview-text" };
+const _hoisted_5$7 = { class: "dialog-footer" };
+const _hoisted_6$6 = { key: 0 };
+const _hoisted_7$4 = { class: "settings-modal-content" };
+const _hoisted_8$2 = { class: "form-group" };
+const _hoisted_9$1 = { class: "form-group" };
+const _hoisted_10 = { class: "form-group" };
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "HeaderButtons",
   emits: ["openFlow", "refreshFlow", "logs-start", "logs-stop"],
   setup(__props, { expose: __expose, emit: __emit }) {
@@ -1350,16 +1547,38 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     const modalVisibleForOpen = ref(false);
     const modalVisibleForSave = ref(false);
     const modalVisibleForCreate = ref(false);
+    const modalVisibleForQuickCreate = ref(false);
     const modalVisibleForSettings = ref(false);
     const flowSettings = ref(null);
     const savePath = ref(void 0);
     const runButton = ref(null);
+    const quickCreateName = ref("");
     const executionModes = ref(["Development", "Performance"]);
     const executionLocationOptions = ref([
       { key: "local", label: "Local" },
       { key: "remote", label: "Remote" }
     ]);
     const emit = __emit;
+    const isValidSaveExtension = (filePath) => {
+      const name = filePath.toLowerCase();
+      return ALLOWED_SAVE_EXTENSIONS.some((ext) => name.endsWith(`.${ext}`));
+    };
+    const generateDefaultFileName = () => {
+      const now2 = /* @__PURE__ */ new Date();
+      const year = now2.getFullYear();
+      const month = String(now2.getMonth() + 1).padStart(2, "0");
+      const day = String(now2.getDate()).padStart(2, "0");
+      const hours = String(now2.getHours()).padStart(2, "0");
+      const minutes = String(now2.getMinutes()).padStart(2, "0");
+      const seconds = String(now2.getSeconds()).padStart(2, "0");
+      return `${year}${month}${day}_${hours}${minutes}${seconds}_flow`;
+    };
+    const getPreviewFileName = () => {
+      if (quickCreateName.value.trim()) {
+        return quickCreateName.value.trim();
+      }
+      return generateDefaultFileName();
+    };
     const loadFlowSettings = async () => {
       if (!(nodeStore.flow_id && nodeStore.flow_id > 0))
         return;
@@ -1387,8 +1606,30 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
     const fileBrowserRef = ref(null);
     const saveFlowAction = async (flowPath, _1, _2) => {
-      await saveFlow(nodeStore.flow_id, flowPath);
-      modalVisibleForSave.value = false;
+      if (flowPath.toLowerCase().endsWith(".flowfile")) {
+        ElMessage.error({
+          message: "The .flowfile format is deprecated. Please use .yaml or .yml instead.",
+          duration: 5e3
+        });
+        return;
+      }
+      if (!isValidSaveExtension(flowPath)) {
+        ElMessage.error({
+          message: "Invalid file extension. Please use .yaml or .yml",
+          duration: 5e3
+        });
+        return;
+      }
+      try {
+        await saveFlow(nodeStore.flow_id, flowPath);
+        ElMessage.success("Flow saved successfully");
+        modalVisibleForSave.value = false;
+      } catch (error) {
+        ElMessage.error({
+          message: error.message || "Failed to save flow",
+          duration: 5e3
+        });
+      }
     };
     function openFlowAction(inputSelectedFile) {
       if (inputSelectedFile) {
@@ -1419,14 +1660,31 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       nodeStore.toggleCodeGenerator();
     };
     const handleCreateAction = async (flowPath, _1, _2) => {
-      const pathWithoutExtension = flowPath.replace(/\.[^/.]+$/, "");
-      const normalizedPath = `${pathWithoutExtension}.flowfile`;
-      const createdFlowId = await createFlow(normalizedPath);
-      await saveFlow(createdFlowId, normalizedPath);
+      if (!isValidSaveExtension(flowPath)) {
+        ElMessage.error({
+          message: "Invalid file extension. Please use .yaml or .yml",
+          duration: 5e3
+        });
+        return;
+      }
+      const createdFlowId = await createFlow(flowPath);
       modalVisibleForCreate.value = false;
       nodeStore.flow_id = createdFlowId;
       emit("refreshFlow");
     };
+    const handleQuickCreateAction = async () => {
+      const fileName = getPreviewFileName();
+      console.log("Creating flow with name:", fileName);
+      try {
+        const createdFlowId = await createFlow(null, fileName);
+        modalVisibleForQuickCreate.value = false;
+        quickCreateName.value = "";
+        nodeStore.flow_id = createdFlowId;
+        emit("refreshFlow");
+      } catch (error) {
+        console.error("Failed to create quick flow:", error);
+      }
+    };
     const openSettingsModal = () => {
       modalVisibleForSettings.value = true;
     };
@@ -1441,6 +1699,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     __expose({
       loadFlowSettings,
       openCreateDialog: () => modalVisibleForCreate.value = true,
+      handleQuickCreateAction,
       openOpenDialog: () => modalVisibleForOpen.value = true,
       openSaveModal: () => modalVisibleForSave.value = true,
       runFlow
@@ -1452,36 +1711,45 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       const _component_el_dialog = resolveComponent("el-dialog");
+      const _component_el_input = resolveComponent("el-input");
+      const _component_el_button = resolveComponent("el-button");
       const _component_el_option = resolveComponent("el-option");
       const _component_el_select = resolveComponent("el-select");
       const _component_el_checkbox = resolveComponent("el-checkbox");
       return openBlock(), createElementBlock(Fragment, null, [
-        createBaseVNode("div", _hoisted_1$f, [
+        createBaseVNode("div", _hoisted_1$i, [
           createBaseVNode("button", {
             class: "action-btn",
             onClick: openSaveModal
-          }, _cache[9] || (_cache[9] = [
+          }, _cache[13] || (_cache[13] = [
             createBaseVNode("span", { class: "material-icons btn-icon" }, "save", -1),
             createBaseVNode("span", { class: "btn-text" }, "Save", -1)
           ])),
           createBaseVNode("button", {
             class: "action-btn",
             onClick: _cache[0] || (_cache[0] = ($event) => modalVisibleForOpen.value = true)
-          }, _cache[10] || (_cache[10] = [
+          }, _cache[14] || (_cache[14] = [
             createBaseVNode("span", { class: "material-icons btn-icon" }, "folder_open", -1),
             createBaseVNode("span", { class: "btn-text" }, "Open", -1)
           ])),
           createBaseVNode("button", {
             class: "action-btn",
             onClick: _cache[1] || (_cache[1] = ($event) => modalVisibleForCreate.value = true)
-          }, _cache[11] || (_cache[11] = [
+          }, _cache[15] || (_cache[15] = [
             createBaseVNode("span", { class: "material-icons btn-icon" }, "add_circle_outline", -1),
             createBaseVNode("span", { class: "btn-text" }, "Create", -1)
           ])),
+          createBaseVNode("button", {
+            class: "action-btn",
+            onClick: _cache[2] || (_cache[2] = ($event) => modalVisibleForQuickCreate.value = true)
+          }, _cache[16] || (_cache[16] = [
+            createBaseVNode("span", { class: "material-icons btn-icon" }, "flash_on", -1),
+            createBaseVNode("span", { class: "btn-text" }, "Quick Create", -1)
+          ])),
           createBaseVNode("button", {
             class: "action-btn",
             onClick: openSettingsModal
-          }, _cache[12] || (_cache[12] = [
+          }, _cache[17] || (_cache[17] = [
             createBaseVNode("span", { class: "material-icons btn-icon" }, "settings", -1),
             createBaseVNode("span", { class: "btn-text" }, "Settings", -1)
           ])),
@@ -1494,29 +1762,29 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             class: normalizeClass(["action-btn", { active: unref(nodeStore).showCodeGenerator }]),
             title: "Generate Python Code (Ctrl+G)",
             onClick: toggleCodeGenerator
-          }, _cache[13] || (_cache[13] = [
+          }, _cache[18] || (_cache[18] = [
             createBaseVNode("span", { class: "material-icons btn-icon" }, "code", -1),
             createBaseVNode("span", { class: "btn-text" }, "Generate code", -1)
           ]), 2)
         ]),
         createVNode(_component_el_dialog, {
           modelValue: modalVisibleForOpen.value,
-          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => modalVisibleForOpen.value = $event),
+          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => modalVisibleForOpen.value = $event),
           title: "Select or Enter a Flow File",
           width: "70%"
         }, {
           default: withCtx(() => [
             createVNode(FileBrowser, {
-              "allowed-file-types": ["flowfile"],
+              "allowed-file-types": unref(FLOWFILE_EXTENSIONS),
               mode: "open",
               onFileSelected: openFlowAction
-            })
+            }, null, 8, ["allowed-file-types"])
           ]),
           _: 1
         }, 8, ["modelValue"]),
         createVNode(_component_el_dialog, {
           modelValue: modalVisibleForSave.value,
-          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => modalVisibleForSave.value = $event),
+          "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => modalVisibleForSave.value = $event),
           title: "Select save location",
           width: "70%"
         }, {
@@ -1524,45 +1792,95 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
             createVNode(FileBrowser, {
               ref_key: "fileBrowserRef",
               ref: fileBrowserRef,
-              "allowed-file-types": ["flowfile"],
+              "allowed-file-types": unref(ALLOWED_SAVE_EXTENSIONS),
               mode: "create",
               "initial-file-path": savePath.value,
               onCreateFile: saveFlowAction,
               onOverwriteFile: saveFlowAction
-            }, null, 8, ["initial-file-path"])
+            }, null, 8, ["allowed-file-types", "initial-file-path"])
           ]),
           _: 1
         }, 8, ["modelValue"]),
         createVNode(_component_el_dialog, {
           modelValue: modalVisibleForCreate.value,
-          "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => modalVisibleForCreate.value = $event),
+          "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => modalVisibleForCreate.value = $event),
           title: "Select save location",
           width: "70%"
         }, {
           default: withCtx(() => [
             createVNode(FileBrowser, {
-              "allowed-file-types": ["flowfile"],
+              "allowed-file-types": unref(ALLOWED_SAVE_EXTENSIONS),
               mode: "create",
               onCreateFile: handleCreateAction,
               onOverwriteFile: handleCreateAction
-            })
+            }, null, 8, ["allowed-file-types"])
+          ]),
+          _: 1
+        }, 8, ["modelValue"]),
+        createVNode(_component_el_dialog, {
+          modelValue: modalVisibleForQuickCreate.value,
+          "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => modalVisibleForQuickCreate.value = $event),
+          title: "Create New Flow",
+          width: "400px"
+        }, {
+          footer: withCtx(() => [
+            createBaseVNode("span", _hoisted_5$7, [
+              createVNode(_component_el_button, {
+                onClick: _cache[7] || (_cache[7] = ($event) => modalVisibleForQuickCreate.value = false)
+              }, {
+                default: withCtx(() => _cache[22] || (_cache[22] = [
+                  createTextVNode("Cancel")
+                ])),
+                _: 1,
+                __: [22]
+              }),
+              createVNode(_component_el_button, {
+                type: "primary",
+                onClick: handleQuickCreateAction
+              }, {
+                default: withCtx(() => _cache[23] || (_cache[23] = [
+                  createTextVNode("Create Flow")
+                ])),
+                _: 1,
+                __: [23]
+              })
+            ])
+          ]),
+          default: withCtx(() => [
+            createBaseVNode("div", _hoisted_2$g, [
+              createBaseVNode("div", _hoisted_3$f, [
+                _cache[19] || (_cache[19] = createBaseVNode("label", { for: "flow-name" }, "Flow Name (optional):", -1)),
+                createVNode(_component_el_input, {
+                  id: "flow-name",
+                  modelValue: quickCreateName.value,
+                  "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => quickCreateName.value = $event),
+                  placeholder: "Leave empty for auto-generated name",
+                  clearable: ""
+                }, null, 8, ["modelValue"])
+              ]),
+              createBaseVNode("div", _hoisted_4$a, [
+                _cache[20] || (_cache[20] = createBaseVNode("strong", null, "File will be created as:", -1)),
+                _cache[21] || (_cache[21] = createBaseVNode("br", null, null, -1)),
+                createBaseVNode("code", null, toDisplayString(getPreviewFileName()), 1)
+              ])
+            ])
           ]),
           _: 1
         }, 8, ["modelValue"]),
         createVNode(_component_el_dialog, {
           modelValue: modalVisibleForSettings.value,
-          "onUpdate:modelValue": _cache[8] || (_cache[8] = ($event) => modalVisibleForSettings.value = $event),
+          "onUpdate:modelValue": _cache[12] || (_cache[12] = ($event) => modalVisibleForSettings.value = $event),
           title: "Execution Settings",
           width: "30%"
         }, {
           default: withCtx(() => [
-            flowSettings.value ? (openBlock(), createElementBlock("div", _hoisted_2$c, [
-              createBaseVNode("div", _hoisted_3$b, [
-                createBaseVNode("div", _hoisted_4$8, [
-                  _cache[14] || (_cache[14] = createBaseVNode("label", null, "Execution Mode:", -1)),
+            flowSettings.value ? (openBlock(), createElementBlock("div", _hoisted_6$6, [
+              createBaseVNode("div", _hoisted_7$4, [
+                createBaseVNode("div", _hoisted_8$2, [
+                  _cache[24] || (_cache[24] = createBaseVNode("label", null, "Execution Mode:", -1)),
                   createVNode(_component_el_select, {
                     modelValue: flowSettings.value.execution_mode,
-                    "onUpdate:modelValue": _cache[5] || (_cache[5] = ($event) => flowSettings.value.execution_mode = $event),
+                    "onUpdate:modelValue": _cache[9] || (_cache[9] = ($event) => flowSettings.value.execution_mode = $event),
                     size: "small",
                     placeholder: "Select run mode",
                     style: { "width": "100%" },
@@ -1580,11 +1898,11 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                     _: 1
                   }, 8, ["modelValue"])
                 ]),
-                createBaseVNode("div", _hoisted_5$6, [
-                  _cache[15] || (_cache[15] = createBaseVNode("label", null, "Execution location:", -1)),
+                createBaseVNode("div", _hoisted_9$1, [
+                  _cache[25] || (_cache[25] = createBaseVNode("label", null, "Execution location:", -1)),
                   createVNode(_component_el_select, {
                     modelValue: flowSettings.value.execution_location,
-                    "onUpdate:modelValue": _cache[6] || (_cache[6] = ($event) => flowSettings.value.execution_location = $event),
+                    "onUpdate:modelValue": _cache[10] || (_cache[10] = ($event) => flowSettings.value.execution_location = $event),
                     size: "small",
                     placeholder: "Select the execution location",
                     style: { "width": "100%" },
@@ -1602,10 +1920,10 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
                     _: 1
                   }, 8, ["modelValue"])
                 ]),
-                createBaseVNode("div", _hoisted_6$5, [
+                createBaseVNode("div", _hoisted_10, [
                   createVNode(_component_el_checkbox, {
                     modelValue: flowSettings.value.show_detailed_progress,
-                    "onUpdate:modelValue": _cache[7] || (_cache[7] = ($event) => flowSettings.value.show_detailed_progress = $event),
+                    "onUpdate:modelValue": _cache[11] || (_cache[11] = ($event) => flowSettings.value.show_detailed_progress = $event),
                     label: "Show details during execution",
                     size: "small",
                     onChange: pushFlowSettings
@@ -1620,8 +1938,385 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const HeaderButtons_vue_vue_type_style_index_0_scoped_bc5487da_lang = "";
-const HeaderButtons = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["__scopeId", "data-v-bc5487da"]]);
+const HeaderButtons_vue_vue_type_style_index_0_scoped_3359ec07_lang = "";
+const HeaderButtons = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-3359ec07"]]);
+const useItemStore = defineStore("itemStore", () => {
+  const items = ref({});
+  const initialItemStates = ref({});
+  const groups = ref({});
+  const inResizing = ref(false);
+  const idItemClicked = ref(null);
+  const idItemVisible = ref(null);
+  const layoutPresets = {
+    sidePanel: { width: 400, height: "100%" },
+    bottomPanel: { width: "100%", height: 300 },
+    dataView: { width: 600, height: 400 },
+    logView: { width: 600, height: 400 }
+  };
+  const getGroupItems = computed$1(() => (groupName) => {
+    if (!groups.value[groupName])
+      return [];
+    return groups.value[groupName].map((id2) => items.value[id2]).filter(Boolean);
+  });
+  const registerInitialState = (id2, initialState) => {
+    if (!initialItemStates.value[id2]) {
+      initialItemStates.value[id2] = { ...initialState };
+    }
+  };
+  const bringToFront = (id2) => {
+    if (!items.value[id2]) {
+      console.warn(`Item ${id2} not found`);
+      return;
+    }
+    if (items.value[id2].fullScreen)
+      return;
+    let maxZIndex = 99;
+    Object.entries(items.value).forEach(([itemId, item]) => {
+      if (!item.fullScreen && itemId !== id2) {
+        maxZIndex = Math.max(maxZIndex, item.zIndex);
+      }
+    });
+    items.value[id2].zIndex = maxZIndex + 1;
+    saveItemState(id2);
+  };
+  const setItemState = (id2, state2) => {
+    if (!items.value[id2]) {
+      items.value[id2] = {
+        width: 400,
+        height: 300,
+        left: 100,
+        top: 100,
+        stickynessPosition: "free",
+        fullWidth: false,
+        fullHeight: false,
+        zIndex: 100,
+        fullScreen: false,
+        clicked: false
+      };
+    }
+    const oldGroup = items.value[id2].group;
+    Object.assign(items.value[id2], state2);
+    if (state2.group !== void 0) {
+      if (oldGroup && groups.value[oldGroup]) {
+        groups.value[oldGroup] = groups.value[oldGroup].filter((itemId) => itemId !== id2);
+      }
+      if (state2.group) {
+        if (!groups.value[state2.group]) {
+          groups.value[state2.group] = [];
+        }
+        if (!groups.value[state2.group].includes(id2)) {
+          groups.value[state2.group].push(id2);
+        }
+        if (state2.syncDimensions) {
+          syncGroupDimensions(state2.group, id2);
+        }
+      }
+    }
+  };
+  const syncGroupDimensions = (groupName, sourceId) => {
+    const groupItems = groups.value[groupName];
+    if (!groupItems || groupItems.length < 2)
+      return;
+    const referenceId = sourceId || groupItems[0];
+    const reference = items.value[referenceId];
+    if (!reference)
+      return;
+    groupItems.forEach((id2) => {
+      var _a;
+      if (id2 !== referenceId && ((_a = items.value[id2]) == null ? void 0 : _a.syncDimensions)) {
+        items.value[id2].width = reference.width;
+        items.value[id2].height = reference.height;
+        saveItemState(id2);
+      }
+    });
+  };
+  const arrangeItems = (arrangement) => {
+    const visibleItems = Object.entries(items.value).filter(([, item]) => !item.fullScreen).sort((a3, b2) => a3[1].zIndex - b2[1].zIndex);
+    switch (arrangement) {
+      case "cascade": {
+        let offset = 0;
+        visibleItems.forEach(([id2, item]) => {
+          item.left = 100 + offset;
+          item.top = 100 + offset;
+          item.stickynessPosition = "free";
+          offset += 30;
+          saveItemState(id2);
+        });
+        break;
+      }
+      case "tile": {
+        const screenWidth = window.innerWidth;
+        const screenHeight = window.innerHeight;
+        const itemCount = visibleItems.length;
+        const cols = Math.ceil(Math.sqrt(itemCount));
+        const rows = Math.ceil(itemCount / cols);
+        const itemWidth = Math.floor(screenWidth / cols) - 20;
+        const itemHeight = Math.floor(screenHeight / rows) - 20;
+        visibleItems.forEach(([id2, item], index) => {
+          const col = index % cols;
+          const row = Math.floor(index / cols);
+          item.left = col * (itemWidth + 10) + 10;
+          item.top = row * (itemHeight + 10) + 10;
+          item.width = itemWidth;
+          item.height = itemHeight;
+          item.stickynessPosition = "free";
+          saveItemState(id2);
+        });
+        break;
+      }
+      case "stack": {
+        visibleItems.forEach(([id2, item]) => {
+          item.left = 100;
+          item.top = 100;
+          item.stickynessPosition = "free";
+          saveItemState(id2);
+        });
+        break;
+      }
+    }
+  };
+  const preventOverlap = (id2) => {
+    const item = items.value[id2];
+    if (!item || item.stickynessPosition !== "free")
+      return;
+    const threshold = 50;
+    let adjusted = false;
+    Object.entries(items.value).forEach(([otherId, otherItem]) => {
+      if (otherId === id2 || otherItem.fullScreen)
+        return;
+      const horizontalOverlap = item.left < otherItem.left + otherItem.width && item.left + item.width > otherItem.left;
+      const verticalOverlap = item.top < otherItem.top + otherItem.height && item.top + item.height > otherItem.top;
+      if (horizontalOverlap && verticalOverlap) {
+        item.left = otherItem.left + otherItem.width + threshold;
+        if (item.left + item.width > window.innerWidth) {
+          item.left = 100;
+          item.top = otherItem.top + otherItem.height + threshold;
+        }
+        adjusted = true;
+      }
+    });
+    if (adjusted) {
+      saveItemState(id2);
+    }
+  };
+  const saveItemState = (id2) => {
+    const itemState = items.value[id2];
+    localStorage.setItem(`overlayPositionAndSize_${id2}`, JSON.stringify(itemState));
+    if (itemState.group) {
+      const groupData = { groups: groups.value };
+      localStorage.setItem("overlayGroups", JSON.stringify(groupData));
+    }
+  };
+  const loadItemState = (id2) => {
+    const savedState = localStorage.getItem(`overlayPositionAndSize_${id2}`);
+    if (savedState) {
+      const state2 = JSON.parse(savedState);
+      setItemState(id2, state2);
+    }
+    const savedGroups = localStorage.getItem("overlayGroups");
+    if (savedGroups) {
+      const groupData = JSON.parse(savedGroups);
+      groups.value = groupData.groups || {};
+    }
+  };
+  const applyPreset = (id2, presetName) => {
+    const preset = layoutPresets[presetName];
+    const updates = {};
+    if (preset.width === "100%") {
+      updates.width = window.innerWidth;
+      updates.fullWidth = true;
+    } else {
+      updates.width = preset.width;
+      updates.fullWidth = false;
+    }
+    if (preset.height === "100%") {
+      updates.height = window.innerHeight;
+      updates.fullHeight = true;
+    } else {
+      updates.height = preset.height;
+      updates.fullHeight = false;
+    }
+    setItemState(id2, updates);
+    saveItemState(id2);
+  };
+  const toggleFullScreen = (id2) => {
+    if (!items.value[id2])
+      return;
+    setFullScreen(id2, !items.value[id2].fullScreen);
+  };
+  const setFullScreen = (id2, fullScreen) => {
+    if (!items.value[id2])
+      return;
+    if (items.value[id2].fullScreen !== fullScreen) {
+      if (fullScreen) {
+        Object.keys(items.value).forEach((otherId) => {
+          if (otherId !== id2) {
+            items.value[otherId].zIndex = 1;
+          }
+        });
+        items.value[id2].fullScreen = true;
+        items.value[id2].prevWidth = items.value[id2].width;
+        items.value[id2].prevHeight = items.value[id2].height;
+        items.value[id2].prevLeft = items.value[id2].left;
+        items.value[id2].prevTop = items.value[id2].top;
+        items.value[id2].width = window.innerWidth;
+        items.value[id2].height = window.innerHeight;
+        items.value[id2].left = 0;
+        items.value[id2].top = 0;
+        items.value[id2].zIndex = 9999;
+      } else {
+        items.value[id2].fullScreen = false;
+        items.value[id2].width = items.value[id2].prevWidth || 400;
+        items.value[id2].height = items.value[id2].prevHeight || 300;
+        items.value[id2].left = items.value[id2].prevLeft || 100;
+        items.value[id2].top = items.value[id2].prevTop || 100;
+        items.value[id2].zIndex = 1e3;
+        Object.keys(items.value).forEach((otherId) => {
+          if (otherId !== id2) {
+            items.value[otherId].zIndex = 100;
+          }
+        });
+      }
+      saveItemState(id2);
+      clickOnItem(id2);
+    }
+  };
+  const resetLayout = () => {
+    Object.keys(items.value).forEach((id2) => {
+      localStorage.removeItem(`overlayPositionAndSize_${id2}`);
+    });
+    localStorage.removeItem("overlayGroups");
+    groups.value = {};
+    Object.keys(initialItemStates.value).forEach((id2) => {
+      const initialState = initialItemStates.value[id2];
+      if (!initialState)
+        return;
+      const resetState = {
+        width: initialState.width || 400,
+        height: initialState.height || 300,
+        left: initialState.left || 100,
+        top: initialState.top || 100,
+        stickynessPosition: initialState.stickynessPosition || "free",
+        fullWidth: initialState.fullWidth || false,
+        fullHeight: initialState.fullHeight || false,
+        zIndex: 100,
+        fullScreen: false,
+        clicked: false,
+        group: initialState.group,
+        syncDimensions: initialState.syncDimensions
+      };
+      items.value[id2] = resetState;
+      if (resetState.group) {
+        if (!groups.value[resetState.group]) {
+          groups.value[resetState.group] = [];
+        }
+        if (!groups.value[resetState.group].includes(id2)) {
+          groups.value[resetState.group].push(id2);
+        }
+      }
+    });
+    setTimeout(() => {
+      window.dispatchEvent(
+        new CustomEvent("layout-reset", {
+          detail: { initialStates: initialItemStates.value }
+        })
+      );
+    }, 0);
+  };
+  const resetSingleItem = (id2) => {
+    var _a;
+    const initialState = initialItemStates.value[id2];
+    if (!initialState) {
+      console.warn(`No initial state found for item ${id2}`);
+      return;
+    }
+    localStorage.removeItem(`overlayPositionAndSize_${id2}`);
+    const resetState = {
+      width: initialState.width || 400,
+      height: initialState.height || 300,
+      left: initialState.left || 100,
+      top: initialState.top || 100,
+      stickynessPosition: initialState.stickynessPosition || "free",
+      fullWidth: initialState.fullWidth || false,
+      fullHeight: initialState.fullHeight || false,
+      zIndex: ((_a = items.value[id2]) == null ? void 0 : _a.zIndex) || 100,
+      fullScreen: false,
+      clicked: false,
+      group: initialState.group,
+      syncDimensions: initialState.syncDimensions
+    };
+    items.value[id2] = resetState;
+  };
+  const clickOnItem = (id2) => {
+    if (!items.value[id2] || items.value[id2].fullScreen)
+      return;
+    let maxZIndex = 99;
+    Object.values(items.value).forEach((item) => {
+      if (!item.fullScreen) {
+        maxZIndex = Math.max(maxZIndex, item.zIndex);
+      }
+    });
+    if (items.value[id2].zIndex <= maxZIndex) {
+      items.value[id2].zIndex = maxZIndex + 1;
+      saveItemState(id2);
+    }
+    idItemClicked.value = id2;
+  };
+  const setResizing = (resizing) => {
+    inResizing.value = resizing;
+  };
+  const getResizing = () => {
+    return inResizing.value;
+  };
+  const scrollOnItem = (id2) => {
+    const itemElement = document.getElementById(id2);
+    if (!itemElement)
+      return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            idItemVisible.value = id2;
+            items.value[id2].zIndex = 1e3;
+          } else if (idItemVisible.value === id2) {
+            items.value[id2].zIndex = 100;
+            idItemVisible.value = null;
+          }
+        });
+      },
+      {
+        threshold: 0.5
+      }
+    );
+    observer.observe(itemElement);
+  };
+  return {
+    inResizing,
+    items,
+    groups,
+    layoutPresets,
+    initialItemStates,
+    registerInitialState,
+    setItemState,
+    saveItemState,
+    loadItemState,
+    setResizing,
+    getResizing,
+    clickOnItem,
+    scrollOnItem,
+    idItemVisible,
+    toggleFullScreen,
+    setFullScreen,
+    arrangeItems,
+    preventOverlap,
+    syncGroupDimensions,
+    applyPreset,
+    getGroupItems,
+    resetLayout,
+    resetSingleItem,
+    bringToFront
+  };
+});
 /*! Element Plus Icons Vue v2.3.1 */
 var arrow_down_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
   name: "ArrowDown",
@@ -1719,13 +2414,14 @@ var warning_filled_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
   }
 });
 var warning_filled_default = warning_filled_vue_vue_type_script_setup_true_lang_default;
-const _hoisted_1$e = { class: "status-wrapper" };
-const _hoisted_2$b = { class: "flow-card" };
-const _hoisted_3$a = ["title"];
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _hoisted_1$h = { class: "status-wrapper" };
+const _hoisted_2$f = { class: "flow-card" };
+const _hoisted_3$e = ["title"];
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "status",
   setup(__props) {
     const nodeStore = useNodeStore();
+    const draggableItemStore = useItemStore();
     const lastStatusChange = ref(/* @__PURE__ */ new Date());
     const isRunning = computed$1(() => nodeStore.isRunning);
     const showFlowResult = computed$1(() => nodeStore.showFlowResult);
@@ -1761,17 +2457,21 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     const toggleResults = () => {
       nodeStore.showFlowResult = !nodeStore.showFlowResult;
       nodeStore.isShowingLogViewer = nodeStore.showFlowResult;
+      if (nodeStore.isShowingLogViewer) {
+        draggableItemStore.bringToFront("logViewer");
+        draggableItemStore.bringToFront("flowresults");
+      }
     };
     return (_ctx, _cache) => {
       const _component_el_icon = resolveComponent("el-icon");
-      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+      return openBlock(), createElementBlock("div", _hoisted_1$h, [
         createVNode(PopOver, {
           content: tooltipContent.value,
           title: isRunning.value ? "Processing Flow" : "Flow Idle",
           placement: "left"
         }, {
           default: withCtx(() => [
-            createBaseVNode("div", _hoisted_2$b, [
+            createBaseVNode("div", _hoisted_2$f, [
               (openBlock(), createElementBlock("svg", {
                 viewBox: "0 0 100 100",
                 class: normalizeClass(["flow-animation", { "is-flowing": isRunning.value }])
@@ -1860,7 +2560,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               })) : createCommentVNode("", true)
-            ], 10, _hoisted_3$a)
+            ], 10, _hoisted_3$e)
           ]),
           _: 1
         })
@@ -1868,8 +2568,8 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const status_vue_vue_type_style_index_0_scoped_88e0f447_lang = "";
-const Status = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-88e0f447"]]);
+const status_vue_vue_type_style_index_0_scoped_4aa2388b_lang = "";
+const Status = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-4aa2388b"]]);
 function tryOnScopeDispose(fn) {
   if (getCurrentScope()) {
     onScopeDispose(fn);
@@ -8475,7 +9175,7 @@ const __default__$f = {
   name: "Handle",
   compatConfig: { MODE: 3 }
 };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$f$1 = /* @__PURE__ */ defineComponent({
   ...__default__$f,
   props: {
     id: { default: null },
@@ -8636,9 +9336,9 @@ const DefaultNode = function({
 }) {
   const label = data.label || _label;
   return [
-    h(_sfc_main$f, { type: "target", position: targetPosition, connectable, isValidConnection: isValidTargetPos }),
+    h(_sfc_main$f$1, { type: "target", position: targetPosition, connectable, isValidConnection: isValidTargetPos }),
     typeof label !== "string" && label ? h(label) : h(Fragment, [label]),
-    h(_sfc_main$f, { type: "source", position: sourcePosition, connectable, isValidConnection: isValidSourcePos })
+    h(_sfc_main$f$1, { type: "source", position: sourcePosition, connectable, isValidConnection: isValidSourcePos })
   ];
 };
 DefaultNode.props = ["sourcePosition", "targetPosition", "label", "isValidTargetPos", "isValidSourcePos", "connectable", "data"];
@@ -8654,7 +9354,7 @@ const OutputNode = function({
 }) {
   const label = data.label || _label;
   return [
-    h(_sfc_main$f, { type: "target", position: targetPosition, connectable, isValidConnection: isValidTargetPos }),
+    h(_sfc_main$f$1, { type: "target", position: targetPosition, connectable, isValidConnection: isValidTargetPos }),
     typeof label !== "string" && label ? h(label) : h(Fragment, [label])
   ];
 };
@@ -8672,7 +9372,7 @@ const InputNode = function({
   const label = data.label || _label;
   return [
     typeof label !== "string" && label ? h(label) : h(Fragment, [label]),
-    h(_sfc_main$f, { type: "source", position: sourcePosition, connectable, isValidConnection: isValidSourcePos })
+    h(_sfc_main$f$1, { type: "source", position: sourcePosition, connectable, isValidConnection: isValidSourcePos })
   ];
 };
 InputNode.props = ["sourcePosition", "label", "isValidSourcePos", "connectable", "data"];
@@ -8686,7 +9386,7 @@ const __default__$e = {
   name: "EdgeText",
   compatConfig: { MODE: 3 }
 };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _sfc_main$e$1 = /* @__PURE__ */ defineComponent({
   ...__default__$e,
   props: {
     x: {},
@@ -8802,7 +9502,7 @@ const _sfc_main$d$1 = /* @__PURE__ */ defineComponent({
           "stroke-opacity": 0,
           class: "vue-flow__edge-interaction"
         }, null, 8, _hoisted_2$1$1)) : createCommentVNode("", true),
-        _ctx.label && _ctx.labelX && _ctx.labelY ? (openBlock(), createBlock(_sfc_main$e, {
+        _ctx.label && _ctx.labelX && _ctx.labelY ? (openBlock(), createBlock(_sfc_main$e$1, {
           key: 1,
           ref_key: "labelEl",
           ref: labelEl,
@@ -10248,8 +10948,8 @@ const _sfc_main$8$1 = /* @__PURE__ */ defineComponent({
   }
 });
 const _hoisted_1$5$1 = ["id"];
-const _hoisted_2$a = ["id"];
-const _hoisted_3$9 = ["id"];
+const _hoisted_2$e = ["id"];
+const _hoisted_3$d = ["id"];
 const __default__$7 = {
   name: "A11yDescriptions",
   compatConfig: { MODE: 3 }
@@ -10267,14 +10967,14 @@ const _sfc_main$7$1 = /* @__PURE__ */ defineComponent({
         createBaseVNode("div", {
           id: `${unref(ARIA_EDGE_DESC_KEY)}-${unref(id2)}`,
           style: { "display": "none" }
-        }, " Press enter or space to select an edge. You can then press delete to remove it or press escape to cancel. ", 8, _hoisted_2$a),
+        }, " Press enter or space to select an edge. You can then press delete to remove it or press escape to cancel. ", 8, _hoisted_2$e),
         !unref(disableKeyboardA11y) ? (openBlock(), createElementBlock("div", {
           key: 0,
           id: `${unref(ARIA_LIVE_MESSAGE)}-${unref(id2)}`,
           "aria-live": "assertive",
           "aria-atomic": "true",
           style: { "position": "absolute", "width": "1px", "height": "1px", "margin": "-1px", "border": "0", "padding": "0", "overflow": "hidden", "clip": "rect(0px, 0px, 0px, 0px)", "clip-path": "inset(100%)" }
-        }, toDisplayString(unref(ariaLiveMessage)), 9, _hoisted_3$9)) : createCommentVNode("", true)
+        }, toDisplayString(unref(ariaLiveMessage)), 9, _hoisted_3$d)) : createCommentVNode("", true)
       ], 64);
     };
   }
@@ -11321,7 +12021,7 @@ function useStylesLoadedWarning() {
     }
   });
 }
-const _hoisted_1$d = /* @__PURE__ */ createBaseVNode("div", { class: "vue-flow__edge-labels" }, null, -1);
+const _hoisted_1$g = /* @__PURE__ */ createBaseVNode("div", { class: "vue-flow__edge-labels" }, null, -1);
 const __default__$1$1 = {
   name: "VueFlow",
   compatConfig: { MODE: 3 }
@@ -11414,7 +12114,7 @@ const _sfc_main$1$2 = /* @__PURE__ */ defineComponent({
         createVNode(_sfc_main$8$1, null, {
           default: withCtx(() => [
             createVNode(_sfc_main$4$1),
-            _hoisted_1$d,
+            _hoisted_1$g,
             createVNode(_sfc_main$2$1),
             renderSlot(_ctx.$slots, "zoom-pane")
           ]),
@@ -11430,7 +12130,7 @@ const __default__$3 = {
   name: "Panel",
   compatConfig: { MODE: 3 }
 };
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   ...__default__$3,
   props: {
     position: {}
@@ -14172,14 +14872,14 @@ const _sfc_main$1$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$c = ["width", "height", "viewBox", "aria-labelledby"];
-const _hoisted_2$9 = ["id"];
-const _hoisted_3$8 = ["d", "fill", "stroke", "stroke-width"];
+const _hoisted_1$f = ["width", "height", "viewBox", "aria-labelledby"];
+const _hoisted_2$d = ["id"];
+const _hoisted_3$c = ["d", "fill", "stroke", "stroke-width"];
 const __default__ = {
   name: "MiniMap",
   compatConfig: { MODE: 3 }
 };
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: {
     nodeColor: { type: [String, Function], default: "#e2e2e2" },
@@ -14342,7 +15042,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       emit("nodeMouseleave", param);
     }
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$g), {
+      return openBlock(), createBlock(unref(_sfc_main$j), {
         position: _ctx.position,
         class: normalizeClass(["vue-flow__minimap", { pannable: _ctx.pannable, zoomable: _ctx.zoomable }])
       }, {
@@ -14360,7 +15060,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             _ctx.ariaLabel ? (openBlock(), createElementBlock("title", {
               key: 0,
               id: `vue-flow__minimap-${unref(id2)}`
-            }, toDisplayString(_ctx.ariaLabel), 9, _hoisted_2$9)) : createCommentVNode("", true),
+            }, toDisplayString(_ctx.ariaLabel), 9, _hoisted_2$d)) : createCommentVNode("", true),
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getNodesInitialized), (node) => {
               return openBlock(), createBlock(_sfc_main$1$1, {
                 id: node.id,
@@ -14392,8 +15092,8 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
               stroke: _ctx.maskStrokeColor,
               "stroke-width": _ctx.maskStrokeWidth,
               "fill-rule": "evenodd"
-            }, null, 8, _hoisted_3$8)
-          ], 8, _hoisted_1$c))
+            }, null, 8, _hoisted_3$c)
+          ], 8, _hoisted_1$f))
         ]),
         _: 1
       }, 8, ["position", "class"]);
@@ -14408,16 +15108,327 @@ function toSnakeCase(str) {
     return str;
   return str.replace(/([A-Z])/g, "_$1").replace(/^_/, "").toLowerCase();
 }
-const _hoisted_1$b = { class: "description-text" };
-const _hoisted_2$8 = {
+const __vite_glob_0_0 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAApCAYAAACoYAD2AAACO0lEQVR4nN2Yz0vbYBjHv29NbZUy0B43QUG9zNPEHUT05NCTiu6o0NbDLk5a/RMERaonkSrO8zw4alFQtBsMBG96kJ5EUTcRh78QRGvsu4O8MSk1fdMmaeLnlL7p++ST53kfkjeADSCKX5GI4Ci+XQCl3uwzKXUkyYD4ZWjXKDnpUuxA+BbeBEij9hD0SgwMl+kplY5McoLmHEVMNYi06E/eNs4iEQf/zjEyonDRR9IAxMCQ5OYopIgawlz4gR1bVhKECJgPvwOsLAlAoIgAFpdMgXgAQFD704M/ZI4NAOf85IvnLJ1Jhi0kVcvNUCtFvvAsKVtk0haSXOU2s8sz8XoyqWfjsKpMJ3bQUVmNt6WerHNMzSQT/ByPYXDrJyq/z+Li/i7rPK5M6gET7NqIYvloXxovd7mzzjW1cdrXFrHx91BzXNPKnS6Y1HDjhjYOy1TnelQp6Aum7QDVMSyTTLAnHsPK8fMaTPqCIESLokGScsGlwz1pPBdBgLPciR4fd8CaN0+72871qDKD/pCmEsvhkmQX5qVtdRHxE2WT5CoI6Ng4/to6zDR9wlRiWymosUkyoduaHG1oBgAEt35JY7muwXR0eeJ4BCfKXW78Pn36iDH+sQXBuno9QgPglIy1dqme97pLAAA752eGvNZxSbZXVHEF+/r+Q14yL2GL90lbSKqW28hdohYsnUkCeglYXPKx2NkHyCQpJT8Kp5MJmkTv4A0gk3zsD3WnQMYKJyWHXouBYVehLV4f/wHit6c8llKODwAAAABJRU5ErkJggg==";
+const __vite_glob_0_1 = "/assets/airbyte-292aa232.png";
+const __vite_glob_0_2 = "/assets/cloud_storage_reader-aa1415d6.png";
+const __vite_glob_0_3 = "data:image/png;base64,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";
+const __vite_glob_0_4 = "/assets/cross_join-d30c0290.png";
+const __vite_glob_0_5 = "/assets/database_reader-ce1e55f3.svg";
+const __vite_glob_0_6 = "/assets/database_writer-b4ad0753.svg";
+const __vite_glob_0_7 = "/assets/explore_data-8a0a2861.png";
+const __vite_glob_0_8 = "data:image/png;base64,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";
+const __vite_glob_0_9 = "/assets/filter-d7708bda.png";
+const __vite_glob_0_10 = "/assets/formula-eeeb1611.png";
+const __vite_glob_0_11 = "/assets/fuzzy_match-40c161b2.png";
+const __vite_glob_0_12 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAIAklEQVR4nO2dS4wcRxmAv7+qZ8a7tuN1jMkD24hIIQjERjxixYTISRQUcMgJFg4cOCCCECAhccjRuzd8QByMAgHlBOJgRxyQYsMlxEJcbKQolgyCQxCK7UgkaxOvd3dmerp+Dj0zO+t9Tbdnq8tMfavRSrvd1T31db3+qaoRyqIIggJw5uhXcXybdnYYxxRSOtXtxlGzhnfmL3H1+heZu3KZGSynyaq+sR7lsq4n49SjdzNZ+wViZnAKqYLqiG9xhChgjPKf94T3Ft6gNvllXvjH1ZCkmMJnKMLsceGlz0xSq73CRDLDUsfRylzQMnoIQstlWPkUtP7AiYfu5zQZM9iqbw3KCDk9Y5ibc9w78UN2J09yvd3GiEGkeFpVIWJZdhnCJ6F9JiQpRassAZQzh++iXbuEMfeTKpQRWwUKWANvvwvXFsCYjIaxqF5EdnwphOqrWEZqV2Cn/gjGHKDlpHAaIWGwNF2GyDSudTaEklIsM2eP5sc78yFqBgS3HTfllZ4UwzRavZRyT7eoIJTto4VHv6RUL+XOrW5GzSopzcqkRCGDDLYp2jrLiYPepUQht2KwtFwnb1PMWU76LSlRyHoICcsuw8g0i37blChkIwy9waPXhj4K2YzBht75aeijkK3oSbHipaREIcOwqqRsr5QoZFjEz4g+CimCh8FjFFKUNYPH0UqJQsqwjbGvKKQs2yQlCrkdtqFNiUJuF4ul1Q2zaHMl9nW8XN6OrxDV/CNd1dt7OQWwLGd5SbnZzKPEc7j+J6wFSEb+Ru8EjEBi89foZspYUs3YYafBnuWljz8Hf3t71fy1IRgvIQI4B/fshQ9ObccVLJCyJ5lmKfsCwsscP5rAuc6wCYyXkB5GYNtmLakBcSQ2LXP2eAqBbZxhqaAYnJaacTC+jXqgRCGBEYUERhQSGFFIYEQhgRGFBEYUEhhRSGB4HqnfqdPl/S3V8ytEU+QOWIY4iAog/rLJy5UEQbMWJx7+AY/tm6btOhgJu7Q4Veom4S/zF3nhzZOIbaAeSoof9SKgjof3fJTH9k17ueSouNlpgrrue/h/EQIgsJy1cOpoqcMGvmg3U0dDDMtZy2vT57UNMSIYMRjADAhxJZ+8jaq9UaSn5Pfou2qt/PMQAeol33TG2v7PqNPzTaVCBEg14583L+NwFKkbBPjw5H3ssI1+JgrQzFr8e+mdghmrGAwf2XWAmthKpVQmRFEShCvNa3zu9e+wmC5ixG7ZkxHAARblz0/8ks/u/RhtzVdn18Xw9xv/4vHXnydDMGz9xAuC04ydtZ28+fSvOTSxn7RCJZVXWYqSakaqWf8vw9BB15WnKC3NCszAEehe30e3disqFwJgkP7P1k90d4eMTY6xCBnSP3bz9ARFMIFEEYIQoqxk3DDP6ODxPtLzSdiDgTEkiBIi3d2d8h2etm7U898bHyfSqwSHuHa3Ygtld6kKe1nd36q0O0touoQay1ZCev/toOsOAJ0qnc4SmysbTE/AZbRF0G56Y9nt7XVf9zem+N2RE3RcJ48XDX2+8uDuQ/nopXueAx7cfYjff/6nxeY5q5KYhP2Nqf5oqCopFQrJ93aasA2O3XukVBqu++pVTg6Yqu3iufseH0F61SipvA1xQKrltt0ysrazmt1GeiEEPCsXAhsHCbdivbPkNtILgcqFCJCUHJRtFFwcZXq+qTy4mKnjanO+v9xo2JG6APsbe6mb2qrgYtulvNu63j9m2PQMwj079mHFjGcvqxdcvNqc55HXvsXNztLQwUUFrCqvHf0Zn5566Jbg4ls8de77ZDJ86MRpxq5kkgtPvczBcQ8uOpQbnSWW00WQrcchKyiddRrvjjre7ywyfCg/Dy667r1UTeVCABKxSPc1dAnZYKQh3fSKBRfzc0IgCCHaD6WvH1JfezybHjeYynCj9eGu64PqO96RVQRRQqyY/vbxw1ZZhpUR+ur/S7dzMGwvS1A0iEEhBBJcXGgv4Ao26g4l07VbtGeakbZvULRRX1AXg4sO2NfYw28Pz5FqViiCJMADuw6sCS4+sOsAvzny40LpKFATy77Gnhhc3Gl38PWDT5dKQ8lH14PBxQ/U9/CNQ8+USi8GF1kJLmqJjUFM94OoQfLPSYoFF/P2RoJoR7wK0Vt+euTBwLLfvrT2STYlM3YwrfXu0wdehSRiEYSa2Oq/ymYLjNj+INMnHoUIC50lFrImy1k7iOphMzJ1TNg6C92Pg33hRYiqA1Pne2/8hB9dPFl6MrRvjAjNrA2mnr8HD3hcjiBca78/sNbC25XLIeTrQcR0x0d+8NqGiCSD83jCp3uPPht2772syOaE3bKOIVFIYEQhgRGFBEYUEhhRSGBEIYERhQRGFBIYUUhgRCGBEYUERhQSGFFIYEQhgRGFBEYUEhhRSGCUnFEmveUckVvp5YuUm6ZSTMjsufwixl0hdflGbJHVKIbUgZUrwEqeDUmxDO1tH5K0L+D0Mg2j5NNzIzmOhlGcXkZafwWG3XKlT9EnXDk1Yzl2/gZWXmQyMbh1FmmMK04zJhODlRc5dv4Gp2aKrGIFysyOUoTZ48In/tiglrzKXbUnudZ2CASzx5FvVPMFvHvrhsXOn2ilz3LpmRazc1q0hJSdcp6vBDv16N3srP0czNdwCql62f05KESgJvl3IyqnmV/6Lt+8ME/Bb/jsJ1f6RgYv+OoTX0H1edrZYRxTd8SsxFGggNH/UrfnMfIrjp17pfv3UjIA/gfTxH0PcLL3jAAAAABJRU5ErkJggg==";
+const __vite_glob_0_13 = "/assets/graph_solver-8b7888b8.png";
+const __vite_glob_0_14 = "/assets/group_by-80561fc3.png";
+const __vite_glob_0_15 = "/assets/input_data-ab2eb678.png";
+const __vite_glob_0_16 = "/assets/join-349043ae.png";
+const __vite_glob_0_17 = "/assets/manual_input-ae98f31d.png";
+const __vite_glob_0_18 = "/assets/old_join-5d0eb604.png";
+const __vite_glob_0_19 = "/assets/output-06ec0371.png";
+const __vite_glob_0_20 = "/assets/pivot-9660df51.png";
+const __vite_glob_0_21 = "/assets/polars_code-05ce5dc6.png";
+const __vite_glob_0_22 = "/assets/record_count-dab44eb5.png";
+const __vite_glob_0_23 = "/assets/record_id-0b15856b.png";
+const __vite_glob_0_24 = "/assets/sample-693a88b5.png";
+const __vite_glob_0_25 = "/assets/select-b0d0437a.png";
+const __vite_glob_0_26 = "/assets/sort-2aa579f0.png";
+const __vite_glob_0_27 = "/assets/summarize-2a099231.png";
+const __vite_glob_0_28 = "/assets/text_to_rows-859b29ea.png";
+const __vite_glob_0_29 = "/assets/union-2d8609f4.png";
+const __vite_glob_0_30 = "/assets/unique-1958b98a.png";
+const __vite_glob_0_31 = "/assets/unpivot-d3cb4b5b.png";
+const __vite_glob_0_32 = "/assets/user-defined-icon-0ae16c90.png";
+const __vite_glob_0_33 = "/assets/view-7a0f0be1.png";
+const getImageUrl = (name) => {
+  return new URL((/* @__PURE__ */ Object.assign({ "./assets/icons/Output2.png": __vite_glob_0_0, "./assets/icons/airbyte.png": __vite_glob_0_1, "./assets/icons/cloud_storage_reader.png": __vite_glob_0_2, "./assets/icons/cloud_storage_writer.png": __vite_glob_0_3, "./assets/icons/cross_join.png": __vite_glob_0_4, "./assets/icons/database_reader.svg": __vite_glob_0_5, "./assets/icons/database_writer.svg": __vite_glob_0_6, "./assets/icons/explore_data.png": __vite_glob_0_7, "./assets/icons/external_source.png": __vite_glob_0_8, "./assets/icons/filter.png": __vite_glob_0_9, "./assets/icons/formula.png": __vite_glob_0_10, "./assets/icons/fuzzy_match.png": __vite_glob_0_11, "./assets/icons/google_sheet.png": __vite_glob_0_12, "./assets/icons/graph_solver.png": __vite_glob_0_13, "./assets/icons/group_by.png": __vite_glob_0_14, "./assets/icons/input_data.png": __vite_glob_0_15, "./assets/icons/join.png": __vite_glob_0_16, "./assets/icons/manual_input.png": __vite_glob_0_17, "./assets/icons/old_join.png": __vite_glob_0_18, "./assets/icons/output.png": __vite_glob_0_19, "./assets/icons/pivot.png": __vite_glob_0_20, "./assets/icons/polars_code.png": __vite_glob_0_21, "./assets/icons/record_count.png": __vite_glob_0_22, "./assets/icons/record_id.png": __vite_glob_0_23, "./assets/icons/sample.png": __vite_glob_0_24, "./assets/icons/select.png": __vite_glob_0_25, "./assets/icons/sort.png": __vite_glob_0_26, "./assets/icons/summarize.png": __vite_glob_0_27, "./assets/icons/text_to_rows.png": __vite_glob_0_28, "./assets/icons/union.png": __vite_glob_0_29, "./assets/icons/unique.png": __vite_glob_0_30, "./assets/icons/unpivot.png": __vite_glob_0_31, "./assets/icons/user-defined-icon.png": __vite_glob_0_32, "./assets/icons/view.png": __vite_glob_0_33 }))[`./assets/icons/${name}`], self.location).href;
+};
+const fetchNodes = async () => {
+  const response = await axios.get("/node_list");
+  const listNodes = response.data;
+  return listNodes;
+};
+const _hoisted_1$e = { class: "component-wrapper" };
+const _hoisted_2$c = { class: "tooltip-text" };
+const _hoisted_3$b = ["src", "alt"];
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  __name: "nodeButton",
+  props: {
+    nodeId: {},
+    imageSrc: {},
+    title: {},
+    drawerComponent: {},
+    drawerProps: {},
+    nodeTitleInfo: {}
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const description = ref("");
+    const mouseX = ref(0);
+    const mouseY = ref(0);
+    const nodeStore = useNodeStore();
+    const props2 = __props;
+    const isSelected = computed$1(() => {
+      return nodeStore.node_id == props2.nodeId;
+    });
+    computed$1(() => {
+      const overlayWidth = 400;
+      const overlayHeight = 200;
+      const buffer = 100;
+      let left = mouseX.value + buffer;
+      let top = mouseY.value + buffer;
+      if (left + overlayWidth > window.innerWidth) {
+        left -= overlayWidth + 2 * buffer;
+      }
+      if (top + overlayHeight > window.innerHeight) {
+        top -= overlayHeight + 2 * buffer;
+      }
+      left = Math.max(left, buffer);
+      top = Math.max(top, buffer);
+      return {
+        top: `${top}px`,
+        left: `${left}px`
+      };
+    });
+    const nodeResult = computed$1(() => {
+      const nodeResult2 = nodeStore.getNodeResult(props2.nodeId);
+      const nodeValidation = nodeStore.getNodeValidation(props2.nodeId);
+      if (nodeResult2 && nodeResult2.is_running) {
+        return {
+          success: void 0,
+          statusIndicator: "running",
+          hasRun: false,
+          error: void 0
+        };
+      }
+      if (nodeResult2 && !nodeResult2.is_running) {
+        if (nodeValidation) {
+          if (nodeResult2.success === true && !nodeValidation.isValid && nodeValidation.validationTime > nodeResult2.start_timestamp) {
+            return {
+              success: true,
+              statusIndicator: "warning",
+              error: nodeValidation.error,
+              hasRun: true
+            };
+          }
+          if (nodeResult2.success === true && nodeValidation.isValid) {
+            return {
+              success: true,
+              statusIndicator: "success",
+              error: nodeResult2.error || nodeValidation.error,
+              hasRun: true
+            };
+          }
+          if (nodeResult2.success === false && nodeValidation.isValid && nodeValidation.validationTime > nodeResult2.start_timestamp) {
+            return {
+              success: false,
+              statusIndicator: "unknown",
+              error: nodeResult2.error || nodeValidation.error,
+              hasRun: true
+            };
+          }
+          if (nodeResult2.success === false && (!nodeValidation.isValid || !nodeValidation.validationTime)) {
+            return {
+              success: false,
+              statusIndicator: "failure",
+              error: nodeResult2.error || nodeValidation.error,
+              hasRun: true
+            };
+          }
+        }
+        return {
+          success: nodeResult2.success ?? false,
+          statusIndicator: nodeResult2.success ? "success" : "failure",
+          error: nodeResult2.error,
+          hasRun: true
+        };
+      }
+      if (nodeValidation) {
+        if (!nodeValidation.isValid) {
+          return {
+            success: false,
+            statusIndicator: "warning",
+            error: nodeValidation.error,
+            hasRun: false
+          };
+        }
+        if (nodeValidation.isValid) {
+          return {
+            success: true,
+            statusIndicator: "unknown",
+            error: nodeValidation.error,
+            hasRun: false
+          };
+        }
+      }
+      return void 0;
+    });
+    const tooltipContent = computed$1(() => {
+      var _a, _b, _c;
+      switch ((_a = nodeResult.value) == null ? void 0 : _a.statusIndicator) {
+        case "success":
+          return "Operation successful";
+        case "failure":
+          return "Operation failed: \n" + (((_b = nodeResult.value) == null ? void 0 : _b.error) || "No error message available");
+        case "warning":
+          return "Operation warning: \n" + (((_c = nodeResult.value) == null ? void 0 : _c.error) || "No warning message available");
+        case "running":
+          return "Operation in progress...";
+        case "unknown":
+        default:
+          return "Status unknown";
+      }
+    });
+    const getNodeDescription = async () => {
+      description.value = await nodeStore.getNodeDescription(props2.nodeId);
+    };
+    watch$1(
+      () => nodeStore.node_id,
+      (newNodeId, oldNodeId) => {
+        if (String(newNodeId) === String(props2.nodeId) && props2.drawerComponent) {
+          nodeStore.openDrawer(props2.drawerComponent, props2.nodeTitleInfo);
+        }
+      },
+      { immediate: true }
+    );
+    onMounted(() => {
+      watch$1(
+        () => props2.nodeId,
+        async (newVal) => {
+          if (newVal !== -1) {
+            await nextTick();
+            getNodeDescription();
+          }
+        }
+      );
+    });
+    return (_ctx, _cache) => {
+      var _a;
+      return openBlock(), createElementBlock("div", _hoisted_1$e, [
+        createBaseVNode("div", {
+          class: normalizeClass(["status-indicator", (_a = nodeResult.value) == null ? void 0 : _a.statusIndicator])
+        }, [
+          createBaseVNode("span", _hoisted_2$c, toDisplayString(tooltipContent.value), 1)
+        ], 2),
+        createBaseVNode("button", {
+          class: normalizeClass(["node-button", { selected: isSelected.value }]),
+          onClick: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => _ctx.onClick && _ctx.onClick(...args))
+        }, [
+          createBaseVNode("img", {
+            src: unref(getImageUrl)(props2.imageSrc),
+            alt: props2.title,
+            width: "50"
+          }, null, 8, _hoisted_3$b)
+        ], 2)
+      ]);
+    };
+  }
+});
+const nodeButton_vue_vue_type_style_index_0_scoped_8ef0b204_lang = "";
+const NodeButton = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-8ef0b204"]]);
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
+  __name: "GenericNode",
+  props: {
+    nodeId: {},
+    nodeData: {}
+  },
+  setup(__props) {
+    const drawerModules = /* @__PURE__ */ Object.assign({ "./elements/cloudStorageReader/CloudStorageReader.vue": () => __vitePreload(() => import("./CloudStorageReader-d5b1b6c9.js"), true ? ["assets/CloudStorageReader-d5b1b6c9.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-content-loader.es-2c8e608f.js","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/api-c1bad5ca.js","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css","assets/CloudStorageReader-29d14fcc.css"] : void 0), "./elements/cloudStorageWriter/CloudStorageWriter.vue": () => __vitePreload(() => import("./CloudStorageWriter-00d87aad.js"), true ? ["assets/CloudStorageWriter-00d87aad.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-content-loader.es-2c8e608f.js","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/api-c1bad5ca.js","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css","assets/CloudStorageWriter-b0ee067f.css"] : void 0), "./elements/crossJoin/CrossJoin.vue": () => __vitePreload(() => import("./CrossJoin-702a3edd.js"), true ? ["assets/CrossJoin-702a3edd.js","assets/vue-content-loader.es-2c8e608f.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/selectDynamic-92e25ee3.js","assets/UnavailableFields-a03f512c.js","assets/UnavailableFields-5edd5322.css","assets/selectDynamic-aa913ff4.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css","assets/CrossJoin-1119d18e.css"] : void 0), "./elements/customNode/CustomNode.vue": () => __vitePreload(() => import("./CustomNode-b1519993.js"), true ? ["assets/CustomNode-b1519993.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css","assets/MultiSelect.vue_vue_type_script_setup_true_lang-b0e538c2.js","assets/ToggleSwitch.vue_vue_type_script_setup_true_lang-38478c20.js","assets/TextInput.vue_vue_type_script_setup_true_lang-5896c375.js","assets/NumericInput.vue_vue_type_script_setup_true_lang-e0edeccc.js","assets/SliderInput-7cb93e62.js","assets/SliderInput-b8fb6a8c.css","assets/SingleSelect.vue_vue_type_script_setup_true_lang-33e3ff9b.js","assets/ColumnSelector-4685e75d.js","assets/ColumnSelector-47996a16.css","assets/CustomNode-74a37f74.css"] : void 0), "./elements/customNode/components/ColumnSelector.vue": () => __vitePreload(() => import("./ColumnSelector-4685e75d.js"), true ? ["assets/ColumnSelector-4685e75d.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/ColumnSelector-47996a16.css"] : void 0), "./elements/customNode/components/MultiSelect.vue": () => __vitePreload(() => import("./MultiSelect-0e8724a3.js"), true ? ["assets/MultiSelect-0e8724a3.js","assets/MultiSelect.vue_vue_type_script_setup_true_lang-b0e538c2.js","assets/index-5429bbf8.js","assets/index-50508d4d.css"] : void 0), "./elements/customNode/components/NumericInput.vue": () => __vitePreload(() => import("./NumericInput-3d63a470.js"), true ? ["assets/NumericInput-3d63a470.js","assets/NumericInput.vue_vue_type_script_setup_true_lang-e0edeccc.js","assets/index-5429bbf8.js","assets/index-50508d4d.css"] : void 0), "./elements/customNode/components/SingleSelect.vue": () => __vitePreload(() => import("./SingleSelect-6c777aac.js"), true ? ["assets/SingleSelect-6c777aac.js","assets/SingleSelect.vue_vue_type_script_setup_true_lang-33e3ff9b.js","assets/index-5429bbf8.js","assets/index-50508d4d.css"] : void 0), "./elements/customNode/components/SliderInput.vue": () => __vitePreload(() => import("./SliderInput-7cb93e62.js"), true ? ["assets/SliderInput-7cb93e62.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/SliderInput-b8fb6a8c.css"] : void 0), "./elements/customNode/components/TextInput.vue": () => __vitePreload(() => import("./TextInput-d9a40c11.js"), true ? ["assets/TextInput-d9a40c11.js","assets/TextInput.vue_vue_type_script_setup_true_lang-5896c375.js","assets/index-5429bbf8.js","assets/index-50508d4d.css"] : void 0), "./elements/customNode/components/ToggleSwitch.vue": () => __vitePreload(() => import("./ToggleSwitch-4ef91d19.js"), true ? ["assets/ToggleSwitch-4ef91d19.js","assets/ToggleSwitch.vue_vue_type_script_setup_true_lang-38478c20.js","assets/index-5429bbf8.js","assets/index-50508d4d.css"] : void 0), "./elements/databaseReader/DatabaseConnectionSettings.vue": () => __vitePreload(() => import("./DatabaseConnectionSettings-6f3e4ea5.js"), true ? ["assets/DatabaseConnectionSettings-6f3e4ea5.js","assets/secretApi-68435402.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/DatabaseConnectionSettings-0c04b2e5.css"] : void 0), "./elements/databaseReader/DatabaseReader.vue": () => __vitePreload(() => import("./DatabaseReader-d38c7295.js"), true ? ["assets/DatabaseReader-d38c7295.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-content-loader.es-2c8e608f.js","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/api-cf1221f0.js","assets/DatabaseConnectionSettings-6f3e4ea5.js","assets/secretApi-68435402.js","assets/DatabaseConnectionSettings-0c04b2e5.css","assets/SQLQueryComponent-df51adbe.js","assets/SQLQueryComponent-36cef432.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css","assets/DatabaseReader-ae61773c.css"] : void 0), "./elements/databaseReader/SQLQueryComponent.vue": () => __vitePreload(() => import("./SQLQueryComponent-df51adbe.js"), true ? ["assets/SQLQueryComponent-df51adbe.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/SQLQueryComponent-36cef432.css"] : void 0), "./elements/databaseWriter/DatabaseWriter.vue": () => __vitePreload(() => import("./DatabaseWriter-b04ef46a.js"), true ? ["assets/DatabaseWriter-b04ef46a.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-content-loader.es-2c8e608f.js","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/api-cf1221f0.js","assets/DatabaseConnectionSettings-6f3e4ea5.js","assets/secretApi-68435402.js","assets/DatabaseConnectionSettings-0c04b2e5.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css","assets/DatabaseWriter-2f570e53.css"] : void 0), "./elements/exploreData/ExploreData.vue": () => __vitePreload(() => import("./ExploreData-5fa10ed8.js"), true ? ["assets/ExploreData-5fa10ed8.js","assets/vue-content-loader.es-2c8e608f.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/VueGraphicWalker-e51b9924.js","assets/VueGraphicWalker-ed5ab88b.css","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/ExploreData-2d0cf4db.css"] : void 0), "./elements/exploreData/vueGraphicWalker/VueGraphicWalker.vue": () => __vitePreload(() => import("./VueGraphicWalker-e51b9924.js"), true ? ["assets/VueGraphicWalker-e51b9924.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/VueGraphicWalker-ed5ab88b.css"] : void 0), "./elements/externalSource/ExternalSource.vue": () => __vitePreload(() => import("./ExternalSource-d39af878.js"), true ? ["assets/ExternalSource-d39af878.js","assets/vue-content-loader.es-2c8e608f.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css","assets/ExternalSource-e37b6275.css"] : void 0), "./elements/filter/Filter.vue": () => __vitePreload(() => import("./Filter-9b6d08db.js"), true ? ["assets/Filter-9b6d08db.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-content-loader.es-2c8e608f.js","assets/dropDown-614b998d.js","assets/dropDown-35135ba8.css","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/fullEditor-f7971590.js","assets/fullEditor-178376bb.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css","assets/Filter-f62091b3.css"] : void 0), "./elements/formula/Formula.vue": () => __vitePreload(() => import("./Formula-6b04fb1d.js"), true ? ["assets/Formula-6b04fb1d.js","assets/vue-content-loader.es-2c8e608f.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/fullEditor-f7971590.js","assets/fullEditor-178376bb.css","assets/dropDown-614b998d.js","assets/dropDown-35135ba8.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css","assets/Formula-bb96803d.css"] : void 0), "./elements/fuzzyMatch/FuzzyMatch.vue": () => __vitePreload(() => import("./FuzzyMatch-999521f4.js"), true ? ["assets/FuzzyMatch-999521f4.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/dropDown-614b998d.js","assets/dropDown-35135ba8.css","assets/selectDynamic-92e25ee3.js","assets/UnavailableFields-a03f512c.js","assets/UnavailableFields-5edd5322.css","assets/selectDynamic-aa913ff4.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css","assets/vue-content-loader.es-2c8e608f.js","assets/FuzzyMatch-1010f966.css"] : void 0), "./elements/graphSolver/ContextMenu.vue": () => __vitePreload(() => import("./ContextMenu-70ae0c79.js"), true ? ["assets/ContextMenu-70ae0c79.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/ContextMenu-63cfa99b.css"] : void 0), "./elements/graphSolver/GraphSolver.vue": () => __vitePreload(() => import("./GraphSolver-17dd2198.js"), true ? ["assets/GraphSolver-17dd2198.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/ContextMenu-70ae0c79.js","assets/ContextMenu-63cfa99b.css","assets/SettingsSection-7ded385d.js","assets/SettingsSection-5c696bee.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css","assets/GraphSolver-f0cb7bfb.css"] : void 0), "./elements/graphSolver/PivotValidation.vue": () => __vitePreload(() => import("./PivotValidation-de9f43fe.js"), true ? ["assets/PivotValidation-de9f43fe.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/PivotValidation-891ddfb0.css"] : void 0), "./elements/graphSolver/SettingsSection.vue": () => __vitePreload(() => import("./SettingsSection-7ded385d.js"), true ? ["assets/SettingsSection-7ded385d.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/SettingsSection-5c696bee.css"] : void 0), "./elements/groupBy/GroupBy.vue": () => __vitePreload(() => import("./GroupBy-6b039e18.js"), true ? ["assets/GroupBy-6b039e18.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-content-loader.es-2c8e608f.js","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css","assets/GroupBy-b9505323.css"] : void 0), "./elements/join/Join.vue": () => __vitePreload(() => import("./Join-24d0f113.js"), true ? ["assets/Join-24d0f113.js","assets/vue-content-loader.es-2c8e608f.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/dropDown-614b998d.js","assets/dropDown-35135ba8.css","assets/selectDynamic-92e25ee3.js","assets/UnavailableFields-a03f512c.js","assets/UnavailableFields-5edd5322.css","assets/selectDynamic-aa913ff4.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css","assets/Join-fd79b451.css"] : void 0), "./elements/manualInput/ManualInput.vue": () => __vitePreload(() => import("./ManualInput-34639209.js"), true ? ["assets/ManualInput-34639209.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css","assets/ManualInput-3246a08d.css"] : void 0), "./elements/output/Output.vue": () => __vitePreload(() => import("./Output-edea9802.js"), true ? ["assets/Output-edea9802.js","assets/nodeInput-5d0d6b79.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/outputCsv-076b85ab.js","assets/outputCsv-9cc59e0b.css","assets/outputExcel-0fd17dbe.js","assets/outputExcel-b41305c0.css","assets/outputParquet-b61e0847.js","assets/outputParquet-cf8cf3f2.css","assets/Output-283fe388.css"] : void 0), "./elements/output/outputCsv.vue": () => __vitePreload(() => import("./outputCsv-076b85ab.js"), true ? ["assets/outputCsv-076b85ab.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/outputCsv-9cc59e0b.css"] : void 0), "./elements/output/outputExcel.vue": () => __vitePreload(() => import("./outputExcel-0fd17dbe.js"), true ? ["assets/outputExcel-0fd17dbe.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/outputExcel-b41305c0.css"] : void 0), "./elements/output/outputParquet.vue": () => __vitePreload(() => import("./outputParquet-b61e0847.js"), true ? ["assets/outputParquet-b61e0847.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/outputParquet-cf8cf3f2.css"] : void 0), "./elements/pivot/ContextMenu.vue": () => __vitePreload(() => import("./ContextMenu-f149cf7c.js"), true ? ["assets/ContextMenu-f149cf7c.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/ContextMenu-4c74eef1.css"] : void 0), "./elements/pivot/Pivot.vue": () => __vitePreload(() => import("./Pivot-61d19301.js"), true ? ["assets/Pivot-61d19301.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/ContextMenu-f149cf7c.js","assets/ContextMenu-4c74eef1.css","assets/SettingsSection-e1e9c953.js","assets/SettingsSection-71e6b7e3.css","assets/PivotValidation-f97fec5b.js","assets/PivotValidation-c46cd420.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css","assets/Pivot-cf333e3d.css"] : void 0), "./elements/pivot/PivotValidation.vue": () => __vitePreload(() => import("./PivotValidation-f97fec5b.js"), true ? ["assets/PivotValidation-f97fec5b.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/PivotValidation-c46cd420.css"] : void 0), "./elements/pivot/SettingsSection.vue": () => __vitePreload(() => import("./SettingsSection-e1e9c953.js"), true ? ["assets/SettingsSection-e1e9c953.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/SettingsSection-71e6b7e3.css"] : void 0), "./elements/polarsCode/PolarsCode.vue": () => __vitePreload(() => import("./PolarsCode-bc3c9984.js"), true ? ["assets/PolarsCode-bc3c9984.js","assets/vue-content-loader.es-2c8e608f.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css","assets/PolarsCode-650322d1.css"] : void 0), "./elements/read/Read.vue": () => __vitePreload(() => import("./Read-64a3f259.js"), true ? ["assets/Read-64a3f259.js","assets/vue-content-loader.es-2c8e608f.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/readExcel-67b4aee0.js","assets/dropDown-614b998d.js","assets/dropDown-35135ba8.css","assets/readExcel-806d2826.css","assets/readCsv-a8bb8b61.js","assets/readCsv-c767cb37.css","assets/readParquet-92ce1dbc.js","assets/readParquet-48c81530.css","assets/nodeInput-5d0d6b79.js","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/Read-e808b239.css"] : void 0), "./elements/read/readCsv.vue": () => __vitePreload(() => import("./readCsv-a8bb8b61.js"), true ? ["assets/readCsv-a8bb8b61.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/readCsv-c767cb37.css"] : void 0), "./elements/read/readExcel.vue": () => __vitePreload(() => import("./readExcel-67b4aee0.js"), true ? ["assets/readExcel-67b4aee0.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/dropDown-614b998d.js","assets/dropDown-35135ba8.css","assets/vue-content-loader.es-2c8e608f.js","assets/readExcel-806d2826.css"] : void 0), "./elements/read/readParquet.vue": () => __vitePreload(() => import("./readParquet-92ce1dbc.js"), true ? ["assets/readParquet-92ce1dbc.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/readParquet-48c81530.css"] : void 0), "./elements/recordCount/RecordCount.vue": () => __vitePreload(() => import("./RecordCount-3d5039be.js"), true ? ["assets/RecordCount-3d5039be.js","assets/vue-codemirror.esm-41b0e0d7.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css"] : void 0), "./elements/recordId/RecordId.vue": () => __vitePreload(() => import("./RecordId-597510e0.js"), true ? ["assets/RecordId-597510e0.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/ContextMenu-f149cf7c.js","assets/ContextMenu-4c74eef1.css","assets/SettingsSection-e1e9c953.js","assets/SettingsSection-71e6b7e3.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css"] : void 0), "./elements/sample/Sample.vue": () => __vitePreload(() => import("./Sample-4be0a507.js"), true ? ["assets/Sample-4be0a507.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css"] : void 0), "./elements/select/Select.vue": () => __vitePreload(() => import("./Select-9b72f201.js"), true ? ["assets/Select-9b72f201.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-content-loader.es-2c8e608f.js","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/selectDynamic-92e25ee3.js","assets/UnavailableFields-a03f512c.js","assets/UnavailableFields-5edd5322.css","assets/selectDynamic-aa913ff4.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css"] : void 0), "./elements/sort/Sort.vue": () => __vitePreload(() => import("./Sort-6cbde21a.js"), true ? ["assets/Sort-6cbde21a.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/vue-content-loader.es-2c8e608f.js","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css","assets/Sort-3643d625.css"] : void 0), "./elements/textToRows/TextToRows.vue": () => __vitePreload(() => import("./TextToRows-c4fcbf4d.js"), true ? ["assets/TextToRows-c4fcbf4d.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/dropDown-614b998d.js","assets/dropDown-35135ba8.css","assets/UnavailableFields-a03f512c.js","assets/UnavailableFields-5edd5322.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css","assets/vue-content-loader.es-2c8e608f.js","assets/TextToRows-5d2c1190.css"] : void 0), "./elements/union/Union.vue": () => __vitePreload(() => import("./Union-bfe9b996.js"), true ? ["assets/Union-bfe9b996.js","assets/vue-codemirror.esm-41b0e0d7.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css","assets/Union-af6c3d9b.css"] : void 0), "./elements/unique/Unique.vue": () => __vitePreload(() => import("./Unique-5d023a27.js"), true ? ["assets/Unique-5d023a27.js","assets/nodeInput-5d0d6b79.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-content-loader.es-2c8e608f.js","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/selectDynamic-92e25ee3.js","assets/UnavailableFields-a03f512c.js","assets/UnavailableFields-5edd5322.css","assets/selectDynamic-aa913ff4.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css","assets/Unique-f9fb0809.css"] : void 0), "./elements/unpivot/ContextMenu.vue": () => __vitePreload(() => import("./ContextMenu-23e909da.js"), true ? ["assets/ContextMenu-23e909da.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/ContextMenu-c13f91d0.css"] : void 0), "./elements/unpivot/SettingsSection.vue": () => __vitePreload(() => import("./SettingsSection-f0f75a42.js"), true ? ["assets/SettingsSection-f0f75a42.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/SettingsSection-2e4d03c4.css"] : void 0), "./elements/unpivot/Unpivot.vue": () => __vitePreload(() => import("./Unpivot-91cc5354.js"), true ? ["assets/Unpivot-91cc5354.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/vue-codemirror.esm-41b0e0d7.js","assets/vue-codemirror-bccfde04.css","assets/ContextMenu-23e909da.js","assets/ContextMenu-c13f91d0.css","assets/SettingsSection-f0f75a42.js","assets/SettingsSection-2e4d03c4.css","assets/genericNodeSettings-4fe5f36b.js","assets/genericNodeSettings-924759c7.css","assets/Unpivot-1e422df3.css"] : void 0), "./elements/unpivot/UnpivotValidation.vue": () => __vitePreload(() => import("./UnpivotValidation-7ee2de44.js"), true ? ["assets/UnpivotValidation-7ee2de44.js","assets/index-5429bbf8.js","assets/index-50508d4d.css","assets/UnpivotValidation-0d240eeb.css"] : void 0) });
+    const props2 = __props;
+    const drawerComponent = shallowRef(null);
+    onMounted(() => {
+      loadDrawerComponent();
+    });
+    const toCamelCase = (str) => {
+      return str.replace(/_([a-z])/g, (_2, letter) => letter.toUpperCase());
+    };
+    const loadDrawerComponent = () => {
+      try {
+        let componentName;
+        let folderName;
+        if (props2.nodeData.custom_node) {
+          componentName = "CustomNode";
+          folderName = "customNode";
+        } else {
+          componentName = toTitleCase(props2.nodeData.item);
+          folderName = toCamelCase(props2.nodeData.item.toLowerCase());
+        }
+        const componentPath = `./elements/${folderName}/${componentName}.vue`;
+        const componentLoader = drawerModules[componentPath];
+        if (!componentLoader) {
+          console.error(`Component not found at path: ${componentPath}`);
+          console.log(
+            "Available paths:",
+            Object.keys(drawerModules).filter((path2) => path2.includes(`/${folderName}/`))
+          );
+          return;
+        }
+        drawerComponent.value = markRaw$1(
+          defineAsyncComponent({
+            loader: componentLoader,
+            errorComponent: void 0,
+            timeout: 3e3,
+            onError(error, retry, fail, attempts) {
+              console.error(`Failed to load drawer component for ${props2.nodeData.item}:`, error);
+              if (attempts <= 3) {
+                retry();
+              } else {
+                fail();
+              }
+            }
+          })
+        );
+      } catch (error) {
+        console.error(`Error setting up drawer component for ${props2.nodeData.item}:`, error);
+      }
+    };
+    const imageSrc = computed$1(() => {
+      var _a;
+      return ((_a = props2.nodeData) == null ? void 0 : _a.image) || "default.png";
+    });
+    const nodeTitle = computed$1(() => {
+      var _a, _b;
+      const displayName = ((_a = props2.nodeData) == null ? void 0 : _a.label) || ((_b = props2.nodeData) == null ? void 0 : _b.name) || "Node";
+      return `${props2.nodeId}: ${displayName}`;
+    });
+    const nodeTitleInfo = computed$1(() => {
+      var _a, _b;
+      return {
+        title: ((_a = props2.nodeData) == null ? void 0 : _a.drawer_title) || "Node Configuration",
+        intro: ((_b = props2.nodeData) == null ? void 0 : _b.drawer_intro) || "Configure node settings"
+      };
+    });
+    onErrorCaptured((error) => {
+      console.error("Error in GenericNode component:", error);
+      return false;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(NodeButton, {
+        ref: "nodeButton",
+        "node-id": _ctx.nodeId,
+        "image-src": imageSrc.value,
+        title: nodeTitle.value,
+        "drawer-component": drawerComponent.value,
+        "node-title-info": nodeTitleInfo.value
+      }, null, 8, ["node-id", "image-src", "title", "drawer-component", "node-title-info"]);
+    };
+  }
+});
+const GenericNode_vue_vue_type_style_index_0_scoped_00eceaf3_lang = "";
+const GenericNode = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-00eceaf3"]]);
+const _hoisted_1$d = { class: "description-text" };
+const _hoisted_2$b = {
   key: 0,
   class: "truncated-indicator",
   title: "Click to see full description"
 };
-const _hoisted_3$7 = ["id"];
-const _hoisted_4$7 = ["id"];
+const _hoisted_3$a = ["id"];
+const _hoisted_4$9 = ["id"];
 const CHAR_LIMIT = 100;
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "CustomNode",
   props: {
     data: {
@@ -14435,6 +15446,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     const showMenu = ref(false);
     const contextMenuX = ref(0);
     const contextMenuY = ref(0);
+    const props2 = __props;
     const onTitleClick = (event) => {
       toggleEditMode(true);
       mouseX.value = event.clientX;
@@ -14483,22 +15495,25 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       window.removeEventListener("click", handleClickOutsideMenu);
     };
     const copyNode2 = () => {
+      var _a, _b, _c, _d, _e;
       const nodeCopyValue = {
         nodeIdToCopyFrom: props2.data.id,
-        type: props2.data.component.__name || "unknown",
+        type: ((_a = props2.data.nodeTemplate) == null ? void 0 : _a.item) || ((_b = props2.data.component) == null ? void 0 : _b.__name) || "unknown",
         label: props2.data.label,
         description: description.value,
         numberOfInputs: props2.data.inputs.length,
         numberOfOutputs: props2.data.outputs.length,
-        typeSnakeCase: toSnakeCase(props2.data.component.__name || "unknown"),
-        flowIdToCopyFrom: nodeStore.flow_id
+        typeSnakeCase: ((_c = props2.data.nodeTemplate) == null ? void 0 : _c.item) || toSnakeCase(((_d = props2.data.component) == null ? void 0 : _d.__name) || "unknown"),
+        flowIdToCopyFrom: nodeStore.flow_id,
+        multi: (_e = props2.data.nodeTemplate) == null ? void 0 : _e.multi,
+        nodeTemplate: props2.data.nodeTemplate
       };
       localStorage.setItem("copiedNode", JSON.stringify(nodeCopyValue));
       console.log("Node copied:", nodeCopyValue);
       closeContextMenu();
     };
     const deleteNode2 = () => {
-      console.log("Paste node functionality will be implemented in the next step");
+      console.log("Deleting node");
       if (nodeStore.vueFlowInstance) {
         let vueFlow = nodeStore.vueFlowInstance;
         vueFlow.removeNodes(props2.data.id.toLocaleString(), true);
@@ -14601,7 +15616,6 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
       }
       return description.value;
     });
-    const props2 = __props;
     function getHandleStyle(index, total) {
       const topMargin = 30;
       const bottomMargin = 25;
@@ -14645,19 +15659,23 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
         createBaseVNode("div", {
           class: "custom-node-header",
           data: "description_display",
-          onContextmenu: onTitleClick
+          onContextmenu: onTitleClick,
+          onClick: _cache[6] || (_cache[6] = withModifiers(() => {
+          }, ["stop"]))
         }, [
           createBaseVNode("div", null, [
             !editMode.value ? (openBlock(), createElementBlock("div", {
               key: 0,
               class: "description-display",
-              style: normalizeStyle(descriptionTextStyle.value)
+              style: normalizeStyle(descriptionTextStyle.value),
+              onClick: _cache[1] || (_cache[1] = withModifiers(() => {
+              }, ["stop"]))
             }, [
               createBaseVNode("div", {
                 class: "edit-icon",
                 title: "Edit description",
                 onClick: _cache[0] || (_cache[0] = withModifiers(($event) => toggleEditMode(true), ["stop"]))
-              }, _cache[3] || (_cache[3] = [
+              }, _cache[7] || (_cache[7] = [
                 createBaseVNode("svg", {
                   width: "12",
                   height: "12",
@@ -14672,25 +15690,29 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
                   createBaseVNode("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" })
                 ], -1)
               ])),
-              createBaseVNode("pre", _hoisted_1$b, toDisplayString(descriptionSummary.value), 1),
-              isTruncated.value ? (openBlock(), createElementBlock("span", _hoisted_2$8, "...")) : createCommentVNode("", true)
+              createBaseVNode("pre", _hoisted_1$d, toDisplayString(descriptionSummary.value), 1),
+              isTruncated.value ? (openBlock(), createElementBlock("span", _hoisted_2$b, "...")) : createCommentVNode("", true)
             ], 4)) : (openBlock(), createElementBlock("div", {
               key: 1,
               id: props2.data.id.toLocaleString(),
               class: "custom-node-header",
               style: normalizeStyle(overlayStyle.value),
-              data: "description_input"
+              data: "description_input",
+              onClick: _cache[5] || (_cache[5] = withModifiers(() => {
+              }, ["stop"]))
             }, [
               withDirectives(createBaseVNode("textarea", {
                 id: props2.data.id.toLocaleString(),
-                "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => description.value = $event),
+                "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => description.value = $event),
                 class: "description-input",
                 data: "description_input",
-                onBlur: _cache[2] || (_cache[2] = ($event) => toggleEditMode(false))
-              }, null, 40, _hoisted_4$7), [
+                onBlur: _cache[3] || (_cache[3] = ($event) => toggleEditMode(false)),
+                onClick: _cache[4] || (_cache[4] = withModifiers(() => {
+                }, ["stop"]))
+              }, null, 40, _hoisted_4$9), [
                 [vModelText, description.value]
               ])
-            ], 12, _hoisted_3$7))
+            ], 12, _hoisted_3$a))
           ])
         ], 32),
         createBaseVNode("div", {
@@ -14699,16 +15721,21 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           class: "custom-node",
           onContextmenu: withModifiers(showContextMenu, ["prevent"])
         }, [
-          (openBlock(), createBlock(resolveDynamicComponent(__props.data.component), {
+          __props.data.nodeTemplate ? (openBlock(), createBlock(GenericNode, {
+            key: 0,
+            "node-id": __props.data.id,
+            "node-data": { ...__props.data.nodeTemplate, id: __props.data.id, label: __props.data.label }
+          }, null, 8, ["node-id", "node-data"])) : __props.data.component ? (openBlock(), createBlock(resolveDynamicComponent(__props.data.component), {
+            key: 1,
             "node-id": __props.data.id
-          }, null, 8, ["node-id"])),
+          }, null, 8, ["node-id"])) : createCommentVNode("", true),
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.data.inputs, (input, index) => {
             return openBlock(), createElementBlock("div", {
               key: input.id,
               class: "handle-input",
               style: normalizeStyle(getHandleStyle(index, __props.data.inputs.length))
             }, [
-              createVNode(unref(_sfc_main$f), {
+              createVNode(unref(_sfc_main$f$1), {
                 id: input.id,
                 type: "target",
                 position: input.position
@@ -14721,7 +15748,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               class: "handle-output",
               style: normalizeStyle(getHandleStyle(index, __props.data.outputs.length))
             }, [
-              createVNode(unref(_sfc_main$f), {
+              createVNode(unref(_sfc_main$f$1), {
                 id: output.id,
                 type: "source",
                 position: output.position
@@ -14729,7 +15756,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             ], 4);
           }), 128)),
           showMenu.value ? (openBlock(), createBlock(Teleport, {
-            key: 0,
+            key: 2,
             to: "body"
           }, [
             createBaseVNode("div", {
@@ -14741,7 +15768,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               createBaseVNode("div", {
                 class: "context-menu-item",
                 onClick: copyNode2
-              }, _cache[4] || (_cache[4] = [
+              }, _cache[8] || (_cache[8] = [
                 createBaseVNode("svg", {
                   width: "14",
                   height: "14",
@@ -14767,7 +15794,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
               createBaseVNode("div", {
                 class: "context-menu-item",
                 onClick: deleteNode2
-              }, _cache[5] || (_cache[5] = [
+              }, _cache[9] || (_cache[9] = [
                 createBaseVNode("svg", {
                   width: "14",
                   height: "14",
@@ -14797,36 +15824,82 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CustomNode_vue_vue_type_style_index_0_scoped_74411a9e_lang = "";
-const CustomNode = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-74411a9e"]]);
-const __variableDynamicImportRuntimeHelper = (glob, path2) => {
-  const v = glob[path2];
-  if (v) {
-    return typeof v === "function" ? v() : Promise.resolve(v);
-  }
-  return new Promise((_2, reject) => {
-    (typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(reject.bind(null, new Error("Unknown variable dynamic import: " + path2)));
-  });
-};
-const componentCache = {};
-function getComponent(name) {
-  if (!componentCache[name]) {
-    componentCache[name] = __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../../nodes/CloudStorageReader.vue": () => __vitePreload(() => import("./CloudStorageReader-f1ff509e.js"), true ? ["assets/CloudStorageReader-f1ff509e.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-content-loader.es-ba94b82f.js","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/api-cb00cce6.js","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/CloudStorageReader-29d14fcc.css"] : void 0), "../../nodes/CloudStorageWriter.vue": () => __vitePreload(() => import("./CloudStorageWriter-034f8b78.js"), true ? ["assets/CloudStorageWriter-034f8b78.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-content-loader.es-ba94b82f.js","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/api-cb00cce6.js","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/CloudStorageWriter-49c9a4b2.css"] : void 0), "../../nodes/CrossJoin.vue": () => __vitePreload(() => import("./CrossJoin-9e156ebe.js"), true ? ["assets/CrossJoin-9e156ebe.js","assets/vue-content-loader.es-ba94b82f.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/selectDynamic-de91449a.js","assets/UnavailableFields-8b0cb48e.js","assets/UnavailableFields-5edd5322.css","assets/selectDynamic-b062bc9b.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/CrossJoin-41efa4cb.css"] : void 0), "../../nodes/DatabaseReader.vue": () => __vitePreload(() => import("./DatabaseReader-0b10551e.js"), true ? ["assets/DatabaseReader-0b10551e.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-content-loader.es-ba94b82f.js","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/api-023d1733.js","assets/DatabaseConnectionSettings-d5c625b3.js","assets/secretApi-baceb6f9.js","assets/DatabaseConnectionSettings-0c04b2e5.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/DatabaseReader-f50c6558.css"] : void 0), "../../nodes/DatabaseWriter.vue": () => __vitePreload(() => import("./DatabaseWriter-c17c6916.js"), true ? ["assets/DatabaseWriter-c17c6916.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-content-loader.es-ba94b82f.js","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/api-023d1733.js","assets/DatabaseConnectionSettings-d5c625b3.js","assets/secretApi-baceb6f9.js","assets/DatabaseConnectionSettings-0c04b2e5.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/DatabaseWriter-2f570e53.css"] : void 0), "../../nodes/ExploreData.vue": () => __vitePreload(() => import("./ExploreData-18a4fe52.js"), true ? ["assets/ExploreData-18a4fe52.js","assets/vue-content-loader.es-ba94b82f.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/ExploreData-5bdae813.css"] : void 0), "../../nodes/ExternalSource.vue": () => __vitePreload(() => import("./ExternalSource-3a66556c.js"), true ? ["assets/ExternalSource-3a66556c.js","assets/vue-content-loader.es-ba94b82f.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/ExternalSource-e37b6275.css"] : void 0), "../../nodes/Filter.vue": () => __vitePreload(() => import("./Filter-91ad87e7.js"), true ? ["assets/Filter-91ad87e7.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-content-loader.es-ba94b82f.js","assets/dropDown-0b46dd77.js","assets/dropDown-35135ba8.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/fullEditor-ec4e4f95.js","assets/fullEditor-178376bb.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/Filter-a9d08ba1.css"] : void 0), "../../nodes/Formula.vue": () => __vitePreload(() => import("./Formula-3c395ab1.js"), true ? ["assets/Formula-3c395ab1.js","assets/vue-content-loader.es-ba94b82f.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/fullEditor-ec4e4f95.js","assets/fullEditor-178376bb.css","assets/dropDown-0b46dd77.js","assets/dropDown-35135ba8.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/Formula-29f19d21.css"] : void 0), "../../nodes/FuzzyMatch.vue": () => __vitePreload(() => import("./FuzzyMatch-2df0d230.js"), true ? ["assets/FuzzyMatch-2df0d230.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/dropDown-0b46dd77.js","assets/dropDown-35135ba8.css","assets/selectDynamic-de91449a.js","assets/UnavailableFields-8b0cb48e.js","assets/UnavailableFields-5edd5322.css","assets/selectDynamic-b062bc9b.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/vue-content-loader.es-ba94b82f.js","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/FuzzyMatch-6857de82.css"] : void 0), "../../nodes/GraphSolver.vue": () => __vitePreload(() => import("./GraphSolver-d285877f.js"), true ? ["assets/GraphSolver-d285877f.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/GraphSolver-17fd26db.css"] : void 0), "../../nodes/GroupBy.vue": () => __vitePreload(() => import("./GroupBy-0bd1cc6b.js"), true ? ["assets/GroupBy-0bd1cc6b.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-content-loader.es-ba94b82f.js","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/GroupBy-ab1ea74b.css"] : void 0), "../../nodes/Join.vue": () => __vitePreload(() => import("./Join-5a78a203.js"), true ? ["assets/Join-5a78a203.js","assets/vue-content-loader.es-ba94b82f.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/dropDown-0b46dd77.js","assets/dropDown-35135ba8.css","assets/selectDynamic-de91449a.js","assets/UnavailableFields-8b0cb48e.js","assets/UnavailableFields-5edd5322.css","assets/selectDynamic-b062bc9b.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/Join-f45eff22.css"] : void 0), "../../nodes/ManualInput.vue": () => __vitePreload(() => import("./ManualInput-93aef9d6.js"), true ? ["assets/ManualInput-93aef9d6.js","assets/nodeTitle-a16db7c3.js","assets/vue-codemirror.esm-dc5e3348.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror-bccfde04.css","assets/nodeTitle-f4b12bcb.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/ManualInput-a71b52c6.css"] : void 0), "../../nodes/Output.vue": () => __vitePreload(() => import("./Output-411ecaee.js"), true ? ["assets/Output-411ecaee.js","assets/vue-codemirror.esm-dc5e3348.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror-bccfde04.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/Output-48f81019.css"] : void 0), "../../nodes/Pivot.vue": () => __vitePreload(() => import("./Pivot-89db4b04.js"), true ? ["assets/Pivot-89db4b04.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/SettingsSection-695ac487.js","assets/SettingsSection-9c836ecc.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/Pivot-f415e85f.css"] : void 0), "../../nodes/PolarsCode.vue": () => __vitePreload(() => import("./PolarsCode-a9f974f8.js"), true ? ["assets/PolarsCode-a9f974f8.js","assets/vue-content-loader.es-ba94b82f.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/PolarsCode-650322d1.css"] : void 0), "../../nodes/Read.vue": () => __vitePreload(() => import("./Read-c3b1929c.js"), true ? ["assets/Read-c3b1929c.js","assets/vue-content-loader.es-ba94b82f.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/dropDown-0b46dd77.js","assets/dropDown-35135ba8.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/Read-80dc1675.css"] : void 0), "../../nodes/RecordCount.vue": () => __vitePreload(() => import("./RecordCount-4e95f98e.js"), true ? ["assets/RecordCount-4e95f98e.js","assets/vue-codemirror.esm-dc5e3348.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css"] : void 0), "../../nodes/RecordId.vue": () => __vitePreload(() => import("./RecordId-55ae7d36.js"), true ? ["assets/RecordId-55ae7d36.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/SettingsSection-695ac487.js","assets/SettingsSection-9c836ecc.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css"] : void 0), "../../nodes/Sample.vue": () => __vitePreload(() => import("./Sample-b4a18476.js"), true ? ["assets/Sample-b4a18476.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css"] : void 0), "../../nodes/Select.vue": () => __vitePreload(() => import("./Select-727688dc.js"), true ? ["assets/Select-727688dc.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-content-loader.es-ba94b82f.js","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/selectDynamic-de91449a.js","assets/UnavailableFields-8b0cb48e.js","assets/UnavailableFields-5edd5322.css","assets/selectDynamic-b062bc9b.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css"] : void 0), "../../nodes/Sort.vue": () => __vitePreload(() => import("./Sort-be3339a8.js"), true ? ["assets/Sort-be3339a8.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/vue-content-loader.es-ba94b82f.js","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/Sort-7ccfa0fe.css"] : void 0), "../../nodes/TextToRows.vue": () => __vitePreload(() => import("./TextToRows-7b8998da.js"), true ? ["assets/TextToRows-7b8998da.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/dropDown-0b46dd77.js","assets/dropDown-35135ba8.css","assets/UnavailableFields-8b0cb48e.js","assets/UnavailableFields-5edd5322.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/vue-content-loader.es-ba94b82f.js","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/TextToRows-c92d1ec2.css"] : void 0), "../../nodes/Union.vue": () => __vitePreload(() => import("./Union-89fd73dc.js"), true ? ["assets/Union-89fd73dc.js","assets/vue-codemirror.esm-dc5e3348.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/Union-8d9ac7f9.css"] : void 0), "../../nodes/Unique.vue": () => __vitePreload(() => import("./Unique-af5a80b4.js"), true ? ["assets/Unique-af5a80b4.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-content-loader.es-ba94b82f.js","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/selectDynamic-de91449a.js","assets/UnavailableFields-8b0cb48e.js","assets/UnavailableFields-5edd5322.css","assets/selectDynamic-b062bc9b.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/Unique-b5615727.css"] : void 0), "../../nodes/Unpivot.vue": () => __vitePreload(() => import("./Unpivot-5195d411.js"), true ? ["assets/Unpivot-5195d411.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/Unpivot-246e9bbd.css"] : void 0) }), `../../nodes/${toTitleCase(name)}.vue`).then((module) => {
-      const component = markRaw$1(module.default);
-      return component;
-    });
-  }
-  return componentCache[name];
+const CustomNode_vue_vue_type_style_index_0_scoped_0887a495_lang = "";
+const CustomNode = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-0887a495"]]);
+const componentCache = /* @__PURE__ */ new Map();
+function getComponent(nodeOrItem) {
+  const cacheKey = "generic-node";
+  if (componentCache.has(cacheKey)) {
+    return componentCache.get(cacheKey);
+  }
+  const componentPromise = Promise.resolve(markRaw$1(GenericNode));
+  componentCache.set(cacheKey, componentPromise);
+  return componentPromise;
 }
 function getComponentRaw(name) {
-  if (!componentCache[name]) {
-    componentCache[name] = __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "../../nodes/CloudStorageReader.vue": () => __vitePreload(() => import("./CloudStorageReader-f1ff509e.js"), true ? ["assets/CloudStorageReader-f1ff509e.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-content-loader.es-ba94b82f.js","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/api-cb00cce6.js","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/CloudStorageReader-29d14fcc.css"] : void 0), "../../nodes/CloudStorageWriter.vue": () => __vitePreload(() => import("./CloudStorageWriter-034f8b78.js"), true ? ["assets/CloudStorageWriter-034f8b78.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-content-loader.es-ba94b82f.js","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/api-cb00cce6.js","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/CloudStorageWriter-49c9a4b2.css"] : void 0), "../../nodes/CrossJoin.vue": () => __vitePreload(() => import("./CrossJoin-9e156ebe.js"), true ? ["assets/CrossJoin-9e156ebe.js","assets/vue-content-loader.es-ba94b82f.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/selectDynamic-de91449a.js","assets/UnavailableFields-8b0cb48e.js","assets/UnavailableFields-5edd5322.css","assets/selectDynamic-b062bc9b.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/CrossJoin-41efa4cb.css"] : void 0), "../../nodes/DatabaseReader.vue": () => __vitePreload(() => import("./DatabaseReader-0b10551e.js"), true ? ["assets/DatabaseReader-0b10551e.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-content-loader.es-ba94b82f.js","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/api-023d1733.js","assets/DatabaseConnectionSettings-d5c625b3.js","assets/secretApi-baceb6f9.js","assets/DatabaseConnectionSettings-0c04b2e5.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/DatabaseReader-f50c6558.css"] : void 0), "../../nodes/DatabaseWriter.vue": () => __vitePreload(() => import("./DatabaseWriter-c17c6916.js"), true ? ["assets/DatabaseWriter-c17c6916.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-content-loader.es-ba94b82f.js","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/api-023d1733.js","assets/DatabaseConnectionSettings-d5c625b3.js","assets/secretApi-baceb6f9.js","assets/DatabaseConnectionSettings-0c04b2e5.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/DatabaseWriter-2f570e53.css"] : void 0), "../../nodes/ExploreData.vue": () => __vitePreload(() => import("./ExploreData-18a4fe52.js"), true ? ["assets/ExploreData-18a4fe52.js","assets/vue-content-loader.es-ba94b82f.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/ExploreData-5bdae813.css"] : void 0), "../../nodes/ExternalSource.vue": () => __vitePreload(() => import("./ExternalSource-3a66556c.js"), true ? ["assets/ExternalSource-3a66556c.js","assets/vue-content-loader.es-ba94b82f.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/ExternalSource-e37b6275.css"] : void 0), "../../nodes/Filter.vue": () => __vitePreload(() => import("./Filter-91ad87e7.js"), true ? ["assets/Filter-91ad87e7.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-content-loader.es-ba94b82f.js","assets/dropDown-0b46dd77.js","assets/dropDown-35135ba8.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/fullEditor-ec4e4f95.js","assets/fullEditor-178376bb.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/Filter-a9d08ba1.css"] : void 0), "../../nodes/Formula.vue": () => __vitePreload(() => import("./Formula-3c395ab1.js"), true ? ["assets/Formula-3c395ab1.js","assets/vue-content-loader.es-ba94b82f.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/fullEditor-ec4e4f95.js","assets/fullEditor-178376bb.css","assets/dropDown-0b46dd77.js","assets/dropDown-35135ba8.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/Formula-29f19d21.css"] : void 0), "../../nodes/FuzzyMatch.vue": () => __vitePreload(() => import("./FuzzyMatch-2df0d230.js"), true ? ["assets/FuzzyMatch-2df0d230.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/dropDown-0b46dd77.js","assets/dropDown-35135ba8.css","assets/selectDynamic-de91449a.js","assets/UnavailableFields-8b0cb48e.js","assets/UnavailableFields-5edd5322.css","assets/selectDynamic-b062bc9b.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/vue-content-loader.es-ba94b82f.js","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/FuzzyMatch-6857de82.css"] : void 0), "../../nodes/GraphSolver.vue": () => __vitePreload(() => import("./GraphSolver-d285877f.js"), true ? ["assets/GraphSolver-d285877f.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/GraphSolver-17fd26db.css"] : void 0), "../../nodes/GroupBy.vue": () => __vitePreload(() => import("./GroupBy-0bd1cc6b.js"), true ? ["assets/GroupBy-0bd1cc6b.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-content-loader.es-ba94b82f.js","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/GroupBy-ab1ea74b.css"] : void 0), "../../nodes/Join.vue": () => __vitePreload(() => import("./Join-5a78a203.js"), true ? ["assets/Join-5a78a203.js","assets/vue-content-loader.es-ba94b82f.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/dropDown-0b46dd77.js","assets/dropDown-35135ba8.css","assets/selectDynamic-de91449a.js","assets/UnavailableFields-8b0cb48e.js","assets/UnavailableFields-5edd5322.css","assets/selectDynamic-b062bc9b.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/Join-f45eff22.css"] : void 0), "../../nodes/ManualInput.vue": () => __vitePreload(() => import("./ManualInput-93aef9d6.js"), true ? ["assets/ManualInput-93aef9d6.js","assets/nodeTitle-a16db7c3.js","assets/vue-codemirror.esm-dc5e3348.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror-bccfde04.css","assets/nodeTitle-f4b12bcb.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/ManualInput-a71b52c6.css"] : void 0), "../../nodes/Output.vue": () => __vitePreload(() => import("./Output-411ecaee.js"), true ? ["assets/Output-411ecaee.js","assets/vue-codemirror.esm-dc5e3348.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror-bccfde04.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/Output-48f81019.css"] : void 0), "../../nodes/Pivot.vue": () => __vitePreload(() => import("./Pivot-89db4b04.js"), true ? ["assets/Pivot-89db4b04.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/SettingsSection-695ac487.js","assets/SettingsSection-9c836ecc.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/Pivot-f415e85f.css"] : void 0), "../../nodes/PolarsCode.vue": () => __vitePreload(() => import("./PolarsCode-a9f974f8.js"), true ? ["assets/PolarsCode-a9f974f8.js","assets/vue-content-loader.es-ba94b82f.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/PolarsCode-650322d1.css"] : void 0), "../../nodes/Read.vue": () => __vitePreload(() => import("./Read-c3b1929c.js"), true ? ["assets/Read-c3b1929c.js","assets/vue-content-loader.es-ba94b82f.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/dropDown-0b46dd77.js","assets/dropDown-35135ba8.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/Read-80dc1675.css"] : void 0), "../../nodes/RecordCount.vue": () => __vitePreload(() => import("./RecordCount-4e95f98e.js"), true ? ["assets/RecordCount-4e95f98e.js","assets/vue-codemirror.esm-dc5e3348.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css"] : void 0), "../../nodes/RecordId.vue": () => __vitePreload(() => import("./RecordId-55ae7d36.js"), true ? ["assets/RecordId-55ae7d36.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/SettingsSection-695ac487.js","assets/SettingsSection-9c836ecc.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css"] : void 0), "../../nodes/Sample.vue": () => __vitePreload(() => import("./Sample-b4a18476.js"), true ? ["assets/Sample-b4a18476.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css"] : void 0), "../../nodes/Select.vue": () => __vitePreload(() => import("./Select-727688dc.js"), true ? ["assets/Select-727688dc.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-content-loader.es-ba94b82f.js","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/selectDynamic-de91449a.js","assets/UnavailableFields-8b0cb48e.js","assets/UnavailableFields-5edd5322.css","assets/selectDynamic-b062bc9b.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css"] : void 0), "../../nodes/Sort.vue": () => __vitePreload(() => import("./Sort-be3339a8.js"), true ? ["assets/Sort-be3339a8.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/vue-content-loader.es-ba94b82f.js","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/Sort-7ccfa0fe.css"] : void 0), "../../nodes/TextToRows.vue": () => __vitePreload(() => import("./TextToRows-7b8998da.js"), true ? ["assets/TextToRows-7b8998da.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/dropDown-0b46dd77.js","assets/dropDown-35135ba8.css","assets/UnavailableFields-8b0cb48e.js","assets/UnavailableFields-5edd5322.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/vue-content-loader.es-ba94b82f.js","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/TextToRows-c92d1ec2.css"] : void 0), "../../nodes/Union.vue": () => __vitePreload(() => import("./Union-89fd73dc.js"), true ? ["assets/Union-89fd73dc.js","assets/vue-codemirror.esm-dc5e3348.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/Union-8d9ac7f9.css"] : void 0), "../../nodes/Unique.vue": () => __vitePreload(() => import("./Unique-af5a80b4.js"), true ? ["assets/Unique-af5a80b4.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-content-loader.es-ba94b82f.js","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/selectDynamic-de91449a.js","assets/UnavailableFields-8b0cb48e.js","assets/UnavailableFields-5edd5322.css","assets/selectDynamic-b062bc9b.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/Unique-b5615727.css"] : void 0), "../../nodes/Unpivot.vue": () => __vitePreload(() => import("./Unpivot-5195d411.js"), true ? ["assets/Unpivot-5195d411.js","assets/index-683fc198.js","assets/index-681a3ed0.css","assets/vue-codemirror.esm-dc5e3348.js","assets/vue-codemirror-bccfde04.css","assets/genericNodeSettings-def5879b.js","assets/genericNodeSettings-924759c7.css","assets/nodeTitle-a16db7c3.js","assets/nodeTitle-f4b12bcb.css","assets/Unpivot-246e9bbd.css"] : void 0) }), `../../nodes/${name}.vue`).then((module) => {
-      const component = markRaw$1(module.default);
-      return component;
-    });
+  return getComponent();
+}
+let nodeTemplatesCache = null;
+let cachePromise = null;
+async function fetchNodeTemplates() {
+  if (nodeTemplatesCache !== null) {
+    return nodeTemplatesCache;
+  }
+  if (cachePromise !== null) {
+    return cachePromise;
+  }
+  cachePromise = axios.get("/node_list").then((response) => {
+    const allNodes = response.data;
+    nodeTemplatesCache = allNodes.filter((node) => node.prod_ready);
+    return nodeTemplatesCache;
+  }).catch((error) => {
+    console.error("Failed to fetch node templates:", error);
+    cachePromise = null;
+    throw error;
+  });
+  return cachePromise;
+}
+function clearNodeTemplatesCache() {
+  nodeTemplatesCache = null;
+  cachePromise = null;
+}
+async function getNodeTemplateByItem(item) {
+  try {
+    const allNodes = await fetchNodeTemplates();
+    return allNodes.find((node) => node.item === item);
+  } catch (error) {
+    console.error(`Failed to get node template for item ${item}:`, error);
+    return void 0;
   }
-  return componentCache[name];
 }
+const useNodes = () => {
+  const nodes = ref([]);
+  const loading = ref(false);
+  const error = ref(null);
+  const fetchNodes2 = async () => {
+    loading.value = true;
+    error.value = null;
+    try {
+      nodes.value = await fetchNodeTemplates();
+    } catch (err) {
+      error.value = err;
+      nodes.value = [];
+    } finally {
+      loading.value = false;
+    }
+  };
+  onMounted(fetchNodes2);
+  return {
+    nodes,
+    loading,
+    error,
+    refetch: fetchNodes2,
+    clearCache: () => {
+      clearNodeTemplatesCache();
+      return fetchNodes2();
+    }
+  };
+};
 const connectNode = async (flowId, nodeConnection) => {
   console.log("Connecting node where it should happen", nodeConnection);
   try {
@@ -15035,7 +16108,9 @@ function useDragAndDrop() {
           outputs: Array.from({ length: node.numberOfOutputs }, (_2, i2) => ({
             id: `output-${i2}`,
             position: Position.Right
-          }))
+          })),
+          // Include nodeTemplate if available
+          nodeTemplate: node.nodeTemplate
         }
       };
       const nodePromise = {
@@ -15057,7 +16132,8 @@ function useDragAndDrop() {
   };
   async function getNodeToAdd(node) {
     const numberOfInputs = node.multi ? 1 : node.input;
-    const component = await getComponent(node.item);
+    const nodeTemplate = await getNodeTemplateByItem(node.item);
+    const component = await getComponent(nodeTemplate || node.item);
     const newNode = {
       id: String(node.id),
       type: "custom-node",
@@ -15076,7 +16152,9 @@ function useDragAndDrop() {
         outputs: Array.from({ length: node.output }, (_2, i2) => ({
           id: `output-${i2}`,
           position: Position.Right
-        }))
+        })),
+        // IMPORTANT: Include the complete NodeTemplate
+        nodeTemplate
       }
     };
     return newNode;
@@ -15107,21 +16185,17 @@ function useDragAndDrop() {
     if (!event.dataTransfer)
       return;
     const nodeData = JSON.parse(event.dataTransfer.getData("application/vueflow"));
-    console.log("nodeData:", nodeData);
     const nodeId = getId();
-    getComponent(nodeData.item).then((component) => {
+    getComponent().then((component) => {
       const numberOfInputs = nodeData.multi ? 1 : nodeData.input;
-      console.log("logging", numberOfInputs);
       const newNode = {
         id: String(nodeId),
         type: "custom-node",
         position,
         data: {
           id: nodeId,
-          // Pass nodeId here
           label: nodeData.name,
           component: markRaw$1(component),
-          // Pass component directly
           inputs: Array.from({ length: numberOfInputs }, (_2, i2) => ({
             id: `input-${i2}`,
             position: Position.Left
@@ -15130,7 +16204,8 @@ function useDragAndDrop() {
             id: `output-${i2}`,
             position: Position.Right
           })),
-          nodeItem: nodeData.item
+          // IMPORTANT: Pass the complete NodeTemplate data
+          nodeTemplate: nodeData
         }
       };
       const { off } = onNodesInitialized(() => {
@@ -15145,9 +16220,7 @@ function useDragAndDrop() {
         });
         off();
       });
-      console.log("nodeData", nodeData);
       insertNode(flowId, nodeId, nodeData.item);
-      console.log(newNode);
       addNodes(newNode);
     }).catch((error) => {
       console.error(`Error importing component for ${nodeData.item}`, error);
@@ -17723,11 +18796,11 @@ const oneDarkHighlightStyle = /* @__PURE__ */ HighlightStyle.define([
   }
 ]);
 const oneDark = [oneDarkTheme, /* @__PURE__ */ syntaxHighlighting(oneDarkHighlightStyle)];
-const _hoisted_1$a = { class: "code-container" };
-const _hoisted_2$7 = { class: "code-header" };
-const _hoisted_3$6 = { class: "header-actions" };
-const _hoisted_4$6 = ["disabled"];
-const _hoisted_5$5 = {
+const _hoisted_1$c = { class: "code-container" };
+const _hoisted_2$a = { class: "code-header" };
+const _hoisted_3$9 = { class: "header-actions" };
+const _hoisted_4$8 = ["disabled"];
+const _hoisted_5$6 = {
   key: 0,
   width: "16",
   height: "16",
@@ -17736,11 +18809,11 @@ const _hoisted_5$5 = {
   stroke: "currentColor",
   "stroke-width": "2"
 };
-const _hoisted_6$4 = {
+const _hoisted_6$5 = {
   key: 1,
   class: "spinner"
 };
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "CodeGenerator",
   setup(__props) {
     const code = ref("");
@@ -17807,23 +18880,23 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
       URL.revokeObjectURL(url);
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1$a, [
-        createBaseVNode("div", _hoisted_2$7, [
+      return openBlock(), createElementBlock("div", _hoisted_1$c, [
+        createBaseVNode("div", _hoisted_2$a, [
           _cache[3] || (_cache[3] = createBaseVNode("h4", null, "Generated code", -1)),
-          createBaseVNode("div", _hoisted_3$6, [
+          createBaseVNode("div", _hoisted_3$9, [
             createBaseVNode("button", {
               class: "refresh-button",
               disabled: loading.value,
               onClick: refreshCode
             }, [
-              !loading.value ? (openBlock(), createElementBlock("svg", _hoisted_5$5, _cache[1] || (_cache[1] = [
+              !loading.value ? (openBlock(), createElementBlock("svg", _hoisted_5$6, _cache[1] || (_cache[1] = [
                 createBaseVNode("path", { d: "M23 4v6h-6" }, null, -1),
                 createBaseVNode("path", { d: "M1 20v-6h6" }, null, -1),
                 createBaseVNode("path", { d: "M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" }, null, -1)
               ]))) : createCommentVNode("", true),
-              loading.value ? (openBlock(), createElementBlock("span", _hoisted_6$4)) : createCommentVNode("", true),
+              loading.value ? (openBlock(), createElementBlock("span", _hoisted_6$5)) : createCommentVNode("", true),
               createTextVNode(" " + toDisplayString(loading.value ? "Loading..." : "Refresh"), 1)
-            ], 8, _hoisted_4$6),
+            ], 8, _hoisted_4$8),
             createBaseVNode("button", {
               class: "export-button",
               onClick: exportCode
@@ -17860,69 +18933,18 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 const CodeGenerator_vue_vue_type_style_index_0_scoped_8bafe064_lang = "";
-const CodeGenerator = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-8bafe064"]]);
-const __vite_glob_0_0 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAApCAYAAACoYAD2AAACO0lEQVR4nN2Yz0vbYBjHv29NbZUy0B43QUG9zNPEHUT05NCTiu6o0NbDLk5a/RMERaonkSrO8zw4alFQtBsMBG96kJ5EUTcRh78QRGvsu4O8MSk1fdMmaeLnlL7p++ST53kfkjeADSCKX5GI4Ci+XQCl3uwzKXUkyYD4ZWjXKDnpUuxA+BbeBEij9hD0SgwMl+kplY5McoLmHEVMNYi06E/eNs4iEQf/zjEyonDRR9IAxMCQ5OYopIgawlz4gR1bVhKECJgPvwOsLAlAoIgAFpdMgXgAQFD704M/ZI4NAOf85IvnLJ1Jhi0kVcvNUCtFvvAsKVtk0haSXOU2s8sz8XoyqWfjsKpMJ3bQUVmNt6WerHNMzSQT/ByPYXDrJyq/z+Li/i7rPK5M6gET7NqIYvloXxovd7mzzjW1cdrXFrHx91BzXNPKnS6Y1HDjhjYOy1TnelQp6Aum7QDVMSyTTLAnHsPK8fMaTPqCIESLokGScsGlwz1pPBdBgLPciR4fd8CaN0+72871qDKD/pCmEsvhkmQX5qVtdRHxE2WT5CoI6Ng4/to6zDR9wlRiWymosUkyoduaHG1oBgAEt35JY7muwXR0eeJ4BCfKXW78Pn36iDH+sQXBuno9QgPglIy1dqme97pLAAA752eGvNZxSbZXVHEF+/r+Q14yL2GL90lbSKqW28hdohYsnUkCeglYXPKx2NkHyCQpJT8Kp5MJmkTv4A0gk3zsD3WnQMYKJyWHXouBYVehLV4f/wHit6c8llKODwAAAABJRU5ErkJggg==";
-const __vite_glob_0_1 = "/assets/airbyte-292aa232.png";
-const __vite_glob_0_2 = "/assets/cloud_storage_reader-aa1415d6.png";
-const __vite_glob_0_3 = "data:image/png;base64,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";
-const __vite_glob_0_4 = "/assets/cross_join-d30c0290.png";
-const __vite_glob_0_5 = "/assets/database_reader-ce1e55f3.svg";
-const __vite_glob_0_6 = "/assets/database_writer-b4ad0753.svg";
-const __vite_glob_0_7 = "/assets/explore_data-8a0a2861.png";
-const __vite_glob_0_8 = "data:image/png;base64,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";
-const __vite_glob_0_9 = "/assets/filter-d7708bda.png";
-const __vite_glob_0_10 = "/assets/formula-eeeb1611.png";
-const __vite_glob_0_11 = "/assets/fuzzy_match-40c161b2.png";
-const __vite_glob_0_12 = "data:image/png;base64,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";
-const __vite_glob_0_13 = "/assets/graph_solver-8b7888b8.png";
-const __vite_glob_0_14 = "/assets/group_by-80561fc3.png";
-const __vite_glob_0_15 = "/assets/input_data-ab2eb678.png";
-const __vite_glob_0_16 = "/assets/join-349043ae.png";
-const __vite_glob_0_17 = "/assets/manual_input-ae98f31d.png";
-const __vite_glob_0_18 = "/assets/old_join-5d0eb604.png";
-const __vite_glob_0_19 = "/assets/output-06ec0371.png";
-const __vite_glob_0_20 = "/assets/pivot-9660df51.png";
-const __vite_glob_0_21 = "/assets/polars_code-05ce5dc6.png";
-const __vite_glob_0_22 = "/assets/record_count-dab44eb5.png";
-const __vite_glob_0_23 = "/assets/record_id-0b15856b.png";
-const __vite_glob_0_24 = "/assets/sample-693a88b5.png";
-const __vite_glob_0_25 = "/assets/select-b0d0437a.png";
-const __vite_glob_0_26 = "/assets/sort-2aa579f0.png";
-const __vite_glob_0_27 = "/assets/summarize-2a099231.png";
-const __vite_glob_0_28 = "/assets/text_to_rows-859b29ea.png";
-const __vite_glob_0_29 = "/assets/union-2d8609f4.png";
-const __vite_glob_0_30 = "/assets/unique-1958b98a.png";
-const __vite_glob_0_31 = "/assets/unpivot-d3cb4b5b.png";
-const __vite_glob_0_32 = "/assets/view-7a0f0be1.png";
-const getImageUrl = (name) => {
-  return new URL((/* @__PURE__ */ Object.assign({ "./assets/icons/Output2.png": __vite_glob_0_0, "./assets/icons/airbyte.png": __vite_glob_0_1, "./assets/icons/cloud_storage_reader.png": __vite_glob_0_2, "./assets/icons/cloud_storage_writer.png": __vite_glob_0_3, "./assets/icons/cross_join.png": __vite_glob_0_4, "./assets/icons/database_reader.svg": __vite_glob_0_5, "./assets/icons/database_writer.svg": __vite_glob_0_6, "./assets/icons/explore_data.png": __vite_glob_0_7, "./assets/icons/external_source.png": __vite_glob_0_8, "./assets/icons/filter.png": __vite_glob_0_9, "./assets/icons/formula.png": __vite_glob_0_10, "./assets/icons/fuzzy_match.png": __vite_glob_0_11, "./assets/icons/google_sheet.png": __vite_glob_0_12, "./assets/icons/graph_solver.png": __vite_glob_0_13, "./assets/icons/group_by.png": __vite_glob_0_14, "./assets/icons/input_data.png": __vite_glob_0_15, "./assets/icons/join.png": __vite_glob_0_16, "./assets/icons/manual_input.png": __vite_glob_0_17, "./assets/icons/old_join.png": __vite_glob_0_18, "./assets/icons/output.png": __vite_glob_0_19, "./assets/icons/pivot.png": __vite_glob_0_20, "./assets/icons/polars_code.png": __vite_glob_0_21, "./assets/icons/record_count.png": __vite_glob_0_22, "./assets/icons/record_id.png": __vite_glob_0_23, "./assets/icons/sample.png": __vite_glob_0_24, "./assets/icons/select.png": __vite_glob_0_25, "./assets/icons/sort.png": __vite_glob_0_26, "./assets/icons/summarize.png": __vite_glob_0_27, "./assets/icons/text_to_rows.png": __vite_glob_0_28, "./assets/icons/union.png": __vite_glob_0_29, "./assets/icons/unique.png": __vite_glob_0_30, "./assets/icons/unpivot.png": __vite_glob_0_31, "./assets/icons/view.png": __vite_glob_0_32 }))[`./assets/icons/${name}`], self.location).href;
-};
-const fetchNodes = async () => {
-  const response = await axios.get("/node_list");
-  const listNodes = response.data;
-  return listNodes;
-};
-const useNodes = () => {
-  const nodes = ref([]);
-  const fetchNodes2 = async () => {
-    const response = await axios.get("/node_list");
-    const allNodes = response.data;
-    nodes.value = allNodes.filter((node) => node.prod_ready);
-  };
-  onMounted(fetchNodes2);
-  return { nodes };
-};
-const _hoisted_1$9 = { class: "nodes-wrapper" };
-const _hoisted_2$6 = ["onClick"];
-const _hoisted_3$5 = { class: "category-title" };
-const _hoisted_4$5 = {
+const CodeGenerator = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-8bafe064"]]);
+const _hoisted_1$b = { class: "nodes-wrapper" };
+const _hoisted_2$9 = ["onClick"];
+const _hoisted_3$8 = { class: "category-title" };
+const _hoisted_4$7 = {
   key: 0,
   class: "category-content"
 };
-const _hoisted_5$4 = ["onDragstart"];
-const _hoisted_6$3 = ["src", "alt"];
-const _hoisted_7$2 = { class: "node-name" };
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _hoisted_5$5 = ["onDragstart"];
+const _hoisted_6$4 = ["src", "alt"];
+const _hoisted_7$3 = { class: "node-name" };
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "NodeList",
   emits: ["dragstart"],
   setup(__props) {
@@ -17932,7 +18954,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
       transform: { name: "Transformations", isOpen: true },
       combine: { name: "Combine Operations", isOpen: true },
       aggregate: { name: "Aggregations", isOpen: true },
-      output: { name: "Output Operations", isOpen: true }
+      output: { name: "Output Operations", isOpen: true },
+      custom: { name: "User Defined Operations", isOpen: true }
     };
     const openCategories = ref(
       Object.fromEntries(
@@ -17972,7 +18995,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       const _component_el_icon = resolveComponent("el-icon");
-      return openBlock(), createElementBlock("div", _hoisted_1$9, [
+      return openBlock(), createElementBlock("div", _hoisted_1$b, [
         withDirectives(createBaseVNode("input", {
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => searchQuery.value = $event),
           type: "text",
@@ -17990,15 +19013,15 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
               class: "category-header",
               onClick: ($event) => toggleCategory(category)
             }, [
-              createBaseVNode("span", _hoisted_3$5, toDisplayString(categoryInfo.name), 1),
+              createBaseVNode("span", _hoisted_3$8, toDisplayString(categoryInfo.name), 1),
               createVNode(_component_el_icon, { class: "category-icon" }, {
                 default: withCtx(() => [
                   openCategories.value[category] ? (openBlock(), createBlock(unref(arrow_down_default), { key: 0 })) : (openBlock(), createBlock(unref(arrow_right_default), { key: 1 }))
                 ]),
                 _: 2
               }, 1024)
-            ], 8, _hoisted_2$6),
-            openCategories.value[category] && filteredNodes.value[category] ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
+            ], 8, _hoisted_2$9),
+            openCategories.value[category] && filteredNodes.value[category] ? (openBlock(), createElementBlock("div", _hoisted_4$7, [
               (openBlock(true), createElementBlock(Fragment, null, renderList(filteredNodes.value[category], (node) => {
                 return openBlock(), createElementBlock("div", {
                   key: node.item,
@@ -18010,9 +19033,9 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
                     src: unref(getImageUrl)(node.image),
                     alt: node.name,
                     class: "node-image"
-                  }, null, 8, _hoisted_6$3),
-                  createBaseVNode("span", _hoisted_7$2, toDisplayString(node.name), 1)
-                ], 40, _hoisted_5$4);
+                  }, null, 8, _hoisted_6$4),
+                  createBaseVNode("span", _hoisted_7$3, toDisplayString(node.name), 1)
+                ], 40, _hoisted_5$5);
               }), 128))
             ])) : createCommentVNode("", true)
           ]);
@@ -18021,129 +19044,126 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const NodeList_vue_vue_type_style_index_0_scoped_a8d4b46b_lang = "";
-const NodeList = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-a8d4b46b"]]);
-const useItemStore = defineStore("itemStore", () => {
-  const items = ref({});
-  const setItemState = (id2, state2) => {
-    if (!items.value[id2]) {
-      items.value[id2] = {
-        width: 400,
-        height: 300,
-        left: 100,
-        top: 100,
-        stickynessPosition: "free",
-        fullWidth: false,
-        fullHeight: false,
-        zIndex: 100,
-        fullScreen: false,
-        clicked: false
-      };
-    }
-    Object.assign(items.value[id2], state2);
-  };
-  const saveItemState = (id2) => {
-    const itemState = items.value[id2];
-    localStorage.setItem(`overlayPositionAndSize_${id2}`, JSON.stringify(itemState));
-  };
-  const loadItemState = (id2) => {
-    const savedState = localStorage.getItem(`overlayPositionAndSize_${id2}`);
-    if (savedState) {
-      items.value[id2] = JSON.parse(savedState);
+const NodeList_vue_vue_type_style_index_0_scoped_63142f09_lang = "";
+const NodeList = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-63142f09"]]);
+const _hoisted_1$a = { class: "listbox-wrapper" };
+const _hoisted_2$8 = { class: "listbox-title" };
+const _hoisted_3$7 = { class: "intro-content" };
+const _hoisted_4$6 = {
+  key: 1,
+  class: "title"
+};
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  __name: "nodeTitle",
+  props: {
+    title: {
+      type: String,
+      required: true
+    },
+    intro: {
+      type: String,
+      required: false,
+      default: ""
+      // Add default value to resolve warning
     }
-  };
-  const toggleFullScreen = (id2) => {
-    if (!items.value[id2])
-      return;
-    setFullScreen(id2, !items.value[id2].fullScreen);
-  };
-  const setFullScreen = (id2, fullScreen) => {
-    if (!items.value[id2])
-      return;
-    if (items.value[id2].fullScreen !== fullScreen) {
-      if (fullScreen) {
-        items.value[id2].fullScreen = true;
-        items.value[id2].prevWidth = items.value[id2].width;
-        items.value[id2].prevHeight = items.value[id2].height;
-        items.value[id2].prevLeft = items.value[id2].left;
-        items.value[id2].prevTop = items.value[id2].top;
-        items.value[id2].width = window.innerWidth;
-        items.value[id2].height = window.innerHeight;
-        items.value[id2].left = 0;
-        items.value[id2].top = 0;
-      } else {
-        items.value[id2].fullScreen = false;
-        items.value[id2].width = items.value[id2].prevWidth || 400;
-        items.value[id2].height = items.value[id2].prevHeight || 300;
-        items.value[id2].left = items.value[id2].prevLeft || 100;
-        items.value[id2].top = items.value[id2].prevTop || 100;
+  },
+  setup(__props) {
+    const props2 = __props;
+    return (_ctx, _cache) => {
+      const _component_el_collapse_item = resolveComponent("el-collapse-item");
+      const _component_el_collapse = resolveComponent("el-collapse");
+      return openBlock(), createElementBlock("div", _hoisted_1$a, [
+        props2.intro ? (openBlock(), createBlock(_component_el_collapse, {
+          key: 0,
+          class: "listbox-expandable"
+        }, {
+          default: withCtx(() => [
+            createVNode(_component_el_collapse_item, null, {
+              title: withCtx(() => [
+                createBaseVNode("div", _hoisted_2$8, toDisplayString(props2.title), 1)
+              ]),
+              default: withCtx(() => [
+                createBaseVNode("div", _hoisted_3$7, toDisplayString(props2.intro), 1)
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })) : (openBlock(), createElementBlock("div", _hoisted_4$6, toDisplayString(props2.title), 1))
+      ]);
+    };
+  }
+});
+const nodeTitle_vue_vue_type_style_index_0_scoped_0db5c358_lang = "";
+const NodeTitle = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-0db5c358"]]);
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "NodeSettingsDrawer",
+  setup(__props) {
+    const nodeStore = useNodeStore();
+    const drawerComponentInstance = ref(null);
+    ref("");
+    ref("");
+    const lastExecutedState = ref({
+      nodeId: -1,
+      componentInstance: null
+    });
+    const executeCleanup = async () => {
+      if (lastExecutedState.value.componentInstance) {
+        console.log(`executing cleanup for node ${lastExecutedState.value.nodeId}`);
+        await nodeStore.executeDrawCloseFunction();
       }
-      saveItemState(id2);
-      clickOnItem(id2);
-    }
-  };
-  const inResizing = ref(false);
-  const idItemClicked = ref(null);
-  const idItemVisible = ref(null);
-  const clickOnItem = (id2) => {
-    if (idItemClicked.value === id2)
-      return;
-    if (idItemClicked.value) {
-      items.value[idItemClicked.value].zIndex = 100;
-    }
-    items.value[id2].zIndex = 1e3;
-    idItemClicked.value = id2;
-  };
-  const setResizing = (resizing) => {
-    inResizing.value = resizing;
-  };
-  const getResizing = () => {
-    return inResizing.value;
-  };
-  const scrollOnItem = (id2) => {
-    const itemElement = document.getElementById(id2);
-    if (!itemElement)
-      return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            idItemVisible.value = id2;
-            items.value[id2].zIndex = 1e3;
-          } else if (idItemVisible.value === id2) {
-            items.value[id2].zIndex = 100;
-            idItemVisible.value = null;
-          }
-        });
-      },
-      {
-        threshold: 0.5
-        // Trigger when 50% of the item is visible
+    };
+    const setupNewNode = () => {
+      var _a;
+      if (((_a = drawerComponentInstance.value) == null ? void 0 : _a.loadNodeData) && nodeStore.node_id !== -1) {
+        drawerComponentInstance.value.loadNodeData(nodeStore.node_id);
+        nodeStore.setCloseFunction(drawerComponentInstance.value.pushNodeData);
+        lastExecutedState.value = {
+          nodeId: nodeStore.node_id,
+          componentInstance: drawerComponentInstance.value
+        };
       }
+    };
+    watch$1(
+      [() => drawerComponentInstance.value, () => nodeStore.node_id],
+      async ([newInstance, newNodeId], [oldInstance, oldNodeId]) => {
+        const nodeIdChanged = newNodeId !== oldNodeId;
+        if (nodeIdChanged && oldNodeId !== -1 && lastExecutedState.value.componentInstance) {
+          await executeCleanup();
+          lastExecutedState.value = {
+            nodeId: -1,
+            componentInstance: null
+          };
+        }
+        if (newNodeId === -1) {
+          nodeStore.isDrawerOpen = false;
+          return;
+        }
+        if (newInstance) {
+          await nextTick();
+          setupNewNode();
+        }
+      },
+      { immediate: true }
     );
-    observer.observe(itemElement);
-  };
-  return {
-    inResizing,
-    items,
-    setItemState,
-    saveItemState,
-    loadItemState,
-    setResizing,
-    getResizing,
-    clickOnItem,
-    scrollOnItem,
-    idItemVisible,
-    // Exposing the visible item
-    toggleFullScreen,
-    // Toggle fullscreen state
-    setFullScreen
-    // Set fullscreen state with boolean parameter
-  };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createVNode(NodeTitle, {
+          title: unref(nodeStore).drawerProps.title,
+          intro: unref(nodeStore).drawerProps.intro
+        }, null, 8, ["title", "intro"]),
+        (openBlock(), createBlock(resolveDynamicComponent(unref(nodeStore).activeDrawerComponent), mergeProps(unref(nodeStore).drawerProps, {
+          ref_key: "drawerComponentInstance",
+          ref: drawerComponentInstance
+        }), null, 16))
+      ], 64);
+    };
+  }
 });
-const _hoisted_1$8 = ["title"];
-const _hoisted_2$5 = { class: "icon" };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$9 = ["id"];
+const _hoisted_2$7 = ["title"];
+const _hoisted_3$6 = { class: "icon" };
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "DraggableItem",
   props: {
     id: {
@@ -18166,6 +19186,10 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       type: Boolean,
       default: false
     },
+    showPresets: {
+      type: Boolean,
+      default: false
+    },
     initialPosition: {
       type: String,
       default: "free"
@@ -18178,7 +19202,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       type: Number,
       default: null
     },
-    initalLeft: {
+    initialLeft: {
       type: Number,
       default: null
     },
@@ -18205,9 +19229,49 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     allowFullScreen: {
       type: Boolean,
       default: false
+    },
+    group: {
+      type: String,
+      default: null
+    },
+    syncDimensions: {
+      type: Boolean,
+      default: false
+    },
+    preventOverlap: {
+      type: Boolean,
+      default: false
     }
   },
   setup(__props, { expose: __expose }) {
+    const props2 = __props;
+    const itemStore = useItemStore();
+    const itemState = ref(
+      itemStore.items[props2.id] || {
+        width: props2.initialWidth || 400,
+        height: props2.initialHeight || 300,
+        left: props2.initialLeft || 100,
+        // Used corrected prop
+        top: props2.initialTop || 100,
+        group: props2.group,
+        syncDimensions: props2.syncDimensions,
+        zIndex: 100
+      }
+    );
+    const isDragging = ref(false);
+    const isResizing = ref(false);
+    const startX = ref(0);
+    const startY = ref(0);
+    const startWidth = ref(0);
+    const startHeight = ref(0);
+    const startLeft = ref(0);
+    const startTop = ref(0);
+    const isMinimized = ref(false);
+    const instance = getCurrentInstance();
+    const activeLine = ref(null);
+    let resizeTimeout;
+    const resizeDirection = ref(null);
+    const initialGroupStates = ref({});
     const resizeDelay = ref(null);
     const resizeOnEnter = (e2, position) => {
       if (resizeDelay.value)
@@ -18231,31 +19295,51 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         }
       }, 200);
     };
-    const props2 = __props;
-    const itemStore = useItemStore();
-    const itemState = ref(
-      itemStore.items[props2.id] || {
-        width: props2.initialWidth,
-        height: props2.initialHeight,
-        left: 100,
-        top: 100
-      }
-    );
-    const isDragging = ref(false);
-    const isResizing = ref(false);
-    const startX = ref(0);
-    const startY = ref(0);
-    const startWidth = ref(0);
-    const startHeight = ref(0);
-    const startLeft = ref(0);
-    const startTop = ref(0);
-    const isMinimized = ref(false);
-    const instance = getCurrentInstance();
-    const activeLine = ref(null);
-    let resizeTimeout;
     const savePositionAndSize = () => {
-      itemStore.setItemState(props2.id, itemState.value);
+      itemStore.setItemState(props2.id, {
+        width: itemState.value.width,
+        height: itemState.value.height,
+        left: itemState.value.left,
+        top: itemState.value.top,
+        stickynessPosition: itemState.value.stickynessPosition,
+        fullWidth: itemState.value.fullWidth,
+        fullHeight: itemState.value.fullHeight,
+        zIndex: itemState.value.zIndex,
+        fullScreen: itemState.value.fullScreen,
+        group: itemState.value.group,
+        syncDimensions: itemState.value.syncDimensions
+      });
       itemStore.saveItemState(props2.id);
+      if (itemState.value.group && itemState.value.syncDimensions && isResizing.value) {
+        const groupItems = itemStore.groups[itemState.value.group];
+        if (groupItems) {
+          const initialActiveState = initialGroupStates.value[props2.id];
+          if (!initialActiveState)
+            return;
+          const deltaX = itemState.value.left - initialActiveState.left;
+          const deltaY = itemState.value.top - initialActiveState.top;
+          groupItems.forEach((itemId) => {
+            var _a;
+            if (itemId === props2.id)
+              return;
+            const initialItemState = initialGroupStates.value[itemId];
+            if (((_a = itemStore.items[itemId]) == null ? void 0 : _a.syncDimensions) && initialItemState) {
+              const updates = {
+                width: itemState.value.width,
+                height: itemState.value.height
+              };
+              if (resizeDirection.value === "top") {
+                updates.top = initialItemState.top + deltaY;
+              }
+              if (resizeDirection.value === "left") {
+                updates.left = initialItemState.left + deltaX;
+              }
+              itemStore.setItemState(itemId, updates);
+              itemStore.saveItemState(itemId);
+            }
+          });
+        }
+      }
     };
     const loadPositionAndSize = () => {
       itemStore.loadItemState(props2.id);
@@ -18276,28 +19360,33 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       itemStore.inResizing = true;
     };
     const toggleFullScreen = () => {
-      if (itemState.value.fullScreen) {
-        itemState.value.fullScreen = false;
-        itemState.value.width = itemState.value.prevWidth || 300;
-        itemState.value.height = itemState.value.prevHeight || 300;
-        itemState.value.left = itemState.value.prevLeft || 100;
-        itemState.value.top = itemState.value.prevTop || 100;
-      } else {
-        itemState.value.fullScreen = true;
-        itemState.value.prevWidth = itemState.value.width;
-        itemState.value.prevHeight = itemState.value.height;
-        itemState.value.prevLeft = itemState.value.left;
-        itemState.value.prevTop = itemState.value.top;
-        itemState.value.width = window.innerWidth;
-        itemState.value.height = window.innerHeight;
-        itemState.value.left = 0;
-        itemState.value.top = 0;
+      itemStore.toggleFullScreen(props2.id);
+      loadPositionAndSize();
+    };
+    const captureGroupInitialStates = () => {
+      if (itemState.value.group && itemState.value.syncDimensions) {
+        initialGroupStates.value = {};
+        const groupItems = itemStore.groups[itemState.value.group];
+        if (groupItems) {
+          groupItems.forEach((id2) => {
+            const item = itemStore.items[id2];
+            if (item) {
+              initialGroupStates.value[id2] = {
+                top: item.top,
+                left: item.left,
+                width: item.width,
+                height: item.height
+              };
+            }
+          });
+        }
       }
-      savePositionAndSize();
     };
     const startResizeRight = (e2) => {
       e2.preventDefault();
       handleReziging(e2);
+      resizeDirection.value = "right";
+      captureGroupInitialStates();
       startX.value = e2.clientX;
       startWidth.value = itemState.value.width;
       document.addEventListener("mousemove", onResizeWidth);
@@ -18307,7 +19396,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       if (isResizing.value) {
         const deltaX = e2.clientX - startX.value;
         const newWidth = startWidth.value + deltaX;
-        if (newWidth > 100 && newWidth < window.innerWidth - 0) {
+        if (newWidth > 100 && newWidth < window.innerWidth) {
           itemState.value.width = newWidth;
           savePositionAndSize();
         }
@@ -18316,6 +19405,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const startResizeBottom = (e2) => {
       e2.preventDefault();
       handleReziging(e2);
+      resizeDirection.value = "bottom";
+      captureGroupInitialStates();
       startY.value = e2.clientY;
       startHeight.value = itemState.value.height;
       document.addEventListener("mousemove", onResizeHeight);
@@ -18334,6 +19425,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const startResizeTop = (e2) => {
       e2.preventDefault();
       handleReziging(e2);
+      resizeDirection.value = "top";
+      captureGroupInitialStates();
       startY.value = e2.clientY;
       startTop.value = itemState.value.top;
       startHeight.value = itemState.value.height;
@@ -18345,7 +19438,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         const deltaY = e2.clientY - startY.value;
         const newTop = startTop.value + deltaY;
         const newHeight = startHeight.value - deltaY;
-        if (newHeight > 100 && newHeight < window.innerHeight - 100) {
+        if (newHeight > 100 && newHeight < window.innerHeight - 100 && newTop >= 0) {
           itemState.value.top = newTop;
           itemState.value.height = newHeight;
           savePositionAndSize();
@@ -18355,6 +19448,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const startResizeLeft = (e2) => {
       e2.preventDefault();
       handleReziging(e2);
+      resizeDirection.value = "left";
+      captureGroupInitialStates();
       startX.value = e2.clientX;
       startLeft.value = itemState.value.left;
       startWidth.value = itemState.value.width;
@@ -18374,15 +19469,19 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       }
     };
     const stopResize = () => {
-      isResizing.value = false;
-      if (activeLine.value) {
-        activeLine.value.classList.remove("resizing-highlight-line");
+      if (isResizing.value) {
+        isResizing.value = false;
+        resizeDirection.value = null;
+        initialGroupStates.value = {};
+        if (activeLine.value) {
+          activeLine.value.classList.remove("resizing-highlight-line");
+        }
+        itemStore.inResizing = false;
+        document.removeEventListener("mousemove", onResizeWidth);
+        document.removeEventListener("mousemove", onResizeHeight);
+        document.removeEventListener("mousemove", onResizeTop);
+        document.removeEventListener("mousemove", onResizeLeft);
       }
-      itemStore.inResizing = false;
-      document.removeEventListener("mousemove", onResizeWidth);
-      document.removeEventListener("mousemove", onResizeHeight);
-      document.removeEventListener("mousemove", onResizeTop);
-      document.removeEventListener("mousemove", onResizeLeft);
     };
     const startMove = (e2) => {
       registerClick();
@@ -18406,13 +19505,19 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
         const deltaY = e2.clientY - startY.value;
         itemState.value.left = startLeft.value + deltaX;
         itemState.value.top = startTop.value + deltaY;
-        savePositionAndSize();
       }
     };
     const stopMove = () => {
-      isDragging.value = false;
-      document.removeEventListener("mousemove", onMove);
-      document.removeEventListener("mouseup", stopMove);
+      if (isDragging.value) {
+        isDragging.value = false;
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", stopMove);
+        savePositionAndSize();
+        if (props2.preventOverlap) {
+          itemStore.preventOverlap(props2.id);
+          loadPositionAndSize();
+        }
+      }
     };
     const moveToRight = () => {
       var _a;
@@ -18433,11 +19538,11 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       const parentElement = (_a = instance == null ? void 0 : instance.parent) == null ? void 0 : _a.vnode.el;
       if (parentElement) {
         const parentBottom = parentElement.offsetTop + parentElement.offsetHeight;
-        itemState.value.left = parentElement.offsetLeft;
-        itemState.value.top = parentBottom - itemState.value.height;
+        itemState.value.left = parentElement.offsetLeft + props2.initialLeft;
+        itemState.value.top = parentBottom - (itemState.value.height + props2.initialTop);
         itemState.value.stickynessPosition = "bottom";
         if (itemState.value.fullWidth) {
-          itemState.value.width = parentElement.offsetWidth;
+          itemState.value.width = parentElement.offsetWidth - props2.initialLeft;
         }
         savePositionAndSize();
       }
@@ -18469,27 +19574,50 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       }
     };
     const applyStickyPosition = () => {
+      var _a;
+      const parentElement = (_a = instance == null ? void 0 : instance.parent) == null ? void 0 : _a.vnode.el;
+      if (!parentElement) {
+        console.warn(`No parent element found for ${props2.id}`);
+        return;
+      }
       switch (itemState.value.stickynessPosition) {
         case "top":
-          moveToTop();
+          itemState.value.left = parentElement.offsetLeft;
+          itemState.value.top = parentElement.offsetTop;
+          if (itemState.value.fullWidth) {
+            itemState.value.width = parentElement.offsetWidth;
+          }
           break;
         case "bottom":
-          moveToBottom();
+          itemState.value.left = parentElement.offsetLeft + (props2.initialLeft || 0);
+          itemState.value.top = parentElement.offsetTop + parentElement.offsetHeight - itemState.value.height - (props2.initialTop || 0);
+          if (itemState.value.fullWidth) {
+            itemState.value.width = parentElement.offsetWidth - (props2.initialLeft || 0);
+          }
           break;
         case "left":
-          moveToLeft();
+          itemState.value.left = parentElement.offsetLeft;
+          itemState.value.top = parentElement.offsetTop + (props2.initialTop || 0);
+          if (itemState.value.fullHeight) {
+            itemState.value.height = parentElement.offsetHeight - (props2.initialTop || 0);
+          }
           break;
         case "right":
-          moveToRight();
+          itemState.value.left = parentElement.offsetLeft + parentElement.offsetWidth - itemState.value.width;
+          itemState.value.top = parentElement.offsetTop + (props2.initialTop || 0);
+          if (itemState.value.fullHeight) {
+            itemState.value.height = parentElement.offsetHeight - (props2.initialTop || 0);
+          }
           break;
       }
+      savePositionAndSize();
     };
     const calculateWidth = () => {
       var _a, _b;
       if (props2.initialWidth) {
         return props2.initialWidth;
       } else if (props2.initialPosition === "top" || props2.initialPosition === "bottom") {
-        return ((_b = (_a = instance == null ? void 0 : instance.parent) == null ? void 0 : _a.vnode.el) == null ? void 0 : _b.offsetWidth) || 300;
+        return ((_b = (_a = instance == null ? void 0 : instance.parent) == null ? void 0 : _a.vnode.el) == null ? void 0 : _b.offsetWidth) - props2.initialLeft || 300;
       } else
         return 300;
     };
@@ -18498,7 +19626,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       if (props2.initialHeight) {
         return props2.initialHeight;
       } else if (props2.initialPosition === "left" || props2.initialPosition === "right") {
-        return ((_b = (_a = instance == null ? void 0 : instance.parent) == null ? void 0 : _a.vnode.el) == null ? void 0 : _b.offsetHeight) || 300;
+        return ((_b = (_a = instance == null ? void 0 : instance.parent) == null ? void 0 : _a.vnode.el) == null ? void 0 : _b.offsetHeight) - props2.initialHeight || 300;
       } else
         return 300;
     };
@@ -18520,74 +19648,117 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
       itemStore.clickOnItem(props2.id);
     };
     const setFullScreen = (makeFull) => {
-      if (itemState.value.fullScreen !== makeFull) {
-        toggleFullScreen();
-      }
+      itemStore.setFullScreen(props2.id, makeFull);
+      loadPositionAndSize();
     };
+    watch$1(
+      () => itemStore.items[props2.id],
+      (newState) => {
+        if (newState) {
+          if (isDragging.value || isResizing.value) {
+            itemState.value.zIndex = newState.zIndex;
+          } else {
+            itemState.value = { ...newState };
+          }
+        }
+      },
+      { deep: true }
+    );
+    watch$1(
+      () => ({ group: props2.group, syncDimensions: props2.syncDimensions }),
+      ({ group, syncDimensions }) => {
+        itemStore.setItemState(props2.id, {
+          group,
+          syncDimensions
+        });
+        itemState.value.group = group;
+        itemState.value.syncDimensions = syncDimensions;
+      }
+    );
+    nextTick().then(() => {
+      observeParentResize();
+    });
     onMounted(() => {
-      if (!itemStore.items[props2.id]) {
+      const initialWidth = calculateWidth();
+      const initialHeight = calculateHeight();
+      const initialLeft = props2.initialLeft || 100;
+      const initialTop = props2.initialTop || 100;
+      itemStore.registerInitialState(props2.id, {
+        width: initialWidth,
+        height: initialHeight,
+        left: initialLeft,
+        top: initialTop,
+        stickynessPosition: props2.initialPosition,
+        fullWidth: !props2.initialWidth,
+        fullHeight: !props2.initialHeight,
+        group: props2.group,
+        syncDimensions: props2.syncDimensions
+      });
+      const hasSavedState = localStorage.getItem(`overlayPositionAndSize_${props2.id}`) !== null;
+      if (!hasSavedState) {
         itemStore.setItemState(props2.id, {
-          width: calculateWidth(),
-          height: calculateHeight(),
-          left: props2.initalLeft || 100,
-          top: props2.initialTop || 100,
+          width: initialWidth,
+          height: initialHeight,
+          left: initialLeft,
+          top: initialTop,
           fullHeight: !props2.initialHeight,
-          fullWidth: !props2.initialWidth
+          fullWidth: !props2.initialWidth,
+          stickynessPosition: props2.initialPosition,
+          group: props2.group,
+          syncDimensions: props2.syncDimensions
         });
         itemState.value = itemStore.items[props2.id];
-        itemState.value.stickynessPosition = props2.initialPosition;
-        if (itemState.value.stickynessPosition !== "free") {
-          applyStickyPosition();
+        if (props2.initialPosition !== "free") {
+          nextTick(() => {
+            applyStickyPosition();
+          });
         }
       } else {
         loadPositionAndSize();
+        if (itemState.value.stickynessPosition && itemState.value.stickynessPosition !== "free") {
+          nextTick(() => {
+            applyStickyPosition();
+          });
+        }
       }
+      const handleLayoutReset = (event) => {
+        itemState.value = { ...itemStore.items[props2.id] };
+        if (itemState.value.stickynessPosition && itemState.value.stickynessPosition !== "free") {
+          nextTick(() => {
+            applyStickyPosition();
+          });
+        }
+      };
+      window.addEventListener("layout-reset", handleLayoutReset);
       document.addEventListener("mouseup", stopResize);
-      document.addEventListener("mouseup", stopMove);
+      window[`resetHandler_${props2.id}`] = handleLayoutReset;
     });
-    nextTick().then(() => {
-      observeParentResize();
+    __expose({
+      setFullScreen
     });
     onBeforeUnmount(() => {
+      const handler = window[`resetHandler_${props2.id}`];
+      if (handler) {
+        window.removeEventListener("layout-reset", handler);
+        delete window[`resetHandler_${props2.id}`];
+      }
       document.removeEventListener("mouseup", stopResize);
+      document.removeEventListener("mousemove", onMove);
       document.removeEventListener("mouseup", stopMove);
-    });
-    __expose({
-      width: itemState.value.width,
-      height: itemState.value.height,
-      isDragging,
-      isResizing,
-      startX,
-      startY,
-      startWidth,
-      startHeight,
-      startLeft,
-      startTop,
-      left: itemState.value.left,
-      top: itemState.value.top,
-      startResizeRight,
-      onResizeWidth,
-      startResizeBottom,
-      onResizeHeight,
-      startResizeTop,
-      onResizeTop,
-      startResizeLeft,
-      onResizeLeft,
-      stopResize,
-      startMove,
-      onMove,
-      stopMove,
-      moveToRight,
-      moveToBottom,
-      moveToLeft,
-      moveToTop,
-      setHeight: (value) => itemState.value.height = value,
-      setWitdh: (value) => itemState.value.width = value,
-      setFullScreen
+      document.removeEventListener("mousemove", onResizeWidth);
+      document.removeEventListener("mousemove", onResizeHeight);
+      document.removeEventListener("mousemove", onResizeTop);
+      document.removeEventListener("mousemove", onResizeLeft);
     });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["overlay", { "no-transition": isResizing.value, minimized: isMinimized.value }]),
+        id: props2.id,
+        class: normalizeClass(["overlay", {
+          "no-transition": isResizing.value,
+          minimized: isMinimized.value,
+          "in-group": itemState.value.group,
+          synced: itemState.value.syncDimensions
+        }]),
         style: normalizeStyle({
           width: isMinimized.value ? "auto" : itemState.value.width + "px",
           height: isMinimized.value ? "auto" : itemState.value.height + "px",
@@ -18603,14 +19774,16 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           __props.allowMinimizing ? (openBlock(), createElementBlock("button", {
             key: 0,
             class: "minimal-button",
+            "data-tooltip": "true",
             title: isMinimized.value ? "Maximize" : "Minimize",
             onClick: toggleMinimize
           }, [
-            createBaseVNode("span", _hoisted_2$5, toDisplayString(isMinimized.value ? "+" : "−"), 1)
-          ], 8, _hoisted_1$8)) : createCommentVNode("", true),
+            createBaseVNode("span", _hoisted_3$6, toDisplayString(isMinimized.value ? "+" : "−"), 1)
+          ], 8, _hoisted_2$7)) : createCommentVNode("", true),
           __props.showRight && itemState.value.stickynessPosition !== "right" ? (openBlock(), createElementBlock("button", {
             key: 1,
             class: "minimal-button",
+            "data-tooltip": "true",
             title: "Move to Right",
             onClick: moveToRight
           }, _cache[4] || (_cache[4] = [
@@ -18619,6 +19792,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           __props.showBottom && itemState.value.stickynessPosition !== "bottom" ? (openBlock(), createElementBlock("button", {
             key: 2,
             class: "minimal-button",
+            "data-tooltip": "true",
             title: "Move to Bottom",
             onClick: moveToBottom
           }, _cache[5] || (_cache[5] = [
@@ -18627,6 +19801,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           __props.showLeft && itemState.value.stickynessPosition !== "left" ? (openBlock(), createElementBlock("button", {
             key: 3,
             class: "minimal-button",
+            "data-tooltip": "true",
             title: "Move to Left",
             onClick: moveToLeft
           }, _cache[6] || (_cache[6] = [
@@ -18635,6 +19810,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           __props.showTop && itemState.value.stickynessPosition !== "top" ? (openBlock(), createElementBlock("button", {
             key: 4,
             class: "minimal-button",
+            "data-tooltip": "true",
             title: "Move to Top",
             onClick: moveToTop
           }, _cache[7] || (_cache[7] = [
@@ -18643,7 +19819,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           __props.allowFullScreen && !itemState.value.fullScreen ? (openBlock(), createElementBlock("button", {
             key: 5,
             class: "minimal-button",
-            title: "Toggle Full Screen",
+            "data-tooltip": "true",
+            "data-tooltip-text": "Toggle Full Screen",
             onClick: toggleFullScreen
           }, _cache[8] || (_cache[8] = [
             createBaseVNode("span", { class: "icon" }, "⬜", -1)
@@ -18651,12 +19828,16 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           __props.allowFullScreen && itemState.value.fullScreen ? (openBlock(), createElementBlock("button", {
             key: 6,
             class: "minimal-button",
-            title: "To Small Screen",
+            "data-tooltip": "true",
+            "data-tooltip-text": "Exit Full Screen",
             onClick: toggleFullScreen
           }, _cache[9] || (_cache[9] = [
             createBaseVNode("span", { class: "icon" }, "❐", -1)
           ]))) : createCommentVNode("", true),
-          createTextVNode(" " + toDisplayString(__props.title), 1)
+          createBaseVNode("span", {
+            class: "group-badge",
+            onMousedown: startMove
+          }, toDisplayString(__props.title), 33)
         ], 32),
         createBaseVNode("div", {
           class: "content",
@@ -18684,12 +19865,214 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
           onMousedown: withModifiers(startResizeLeft, ["stop"]),
           onMouseenter: _cache[3] || (_cache[3] = ($event) => resizeOnEnter($event, "left"))
         }, null, 32)
-      ], 6);
+      ], 14, _hoisted_1$9);
+    };
+  }
+});
+const DraggableItem_vue_vue_type_style_index_0_scoped_47a34251_lang = "";
+const DraggableItem = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-47a34251"]]);
+const _hoisted_1$8 = { class: "panel-header" };
+const _hoisted_2$6 = { class: "panel-body" };
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  __name: "layoutControls",
+  emits: ["reset-layout-graph"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const itemStore = useItemStore();
+    const isOpen = ref(false);
+    const position = ref({ x: window.innerWidth - 80, y: window.innerHeight - 80 });
+    const isDragging = ref(false);
+    const hasDragged = ref(false);
+    const dragStart = ref({ x: 0, y: 0 });
+    const initialPosition = ref({ x: 0, y: 0 });
+    const handleViewportResize = () => {
+      const buttonSize = 45;
+      const boundaryMargin = 10;
+      position.value.x = Math.max(
+        boundaryMargin,
+        Math.min(window.innerWidth - buttonSize - boundaryMargin, position.value.x)
+      );
+      position.value.y = Math.max(
+        boundaryMargin,
+        Math.min(window.innerHeight - buttonSize - boundaryMargin, position.value.y)
+      );
+    };
+    const panelStyle = computed$1(() => {
+      const style = {};
+      const isRightHalf = position.value.x > window.innerWidth / 2;
+      const isBottomHalf = position.value.y > window.innerHeight / 2;
+      if (isRightHalf) {
+        style.right = "60px";
+      } else {
+        style.left = "60px";
+      }
+      if (isBottomHalf) {
+        style.bottom = "0px";
+      } else {
+        style.top = "0px";
+      }
+      return style;
+    });
+    onMounted(() => {
+      const savedPosition = localStorage.getItem("layoutControlsPosition");
+      if (savedPosition) {
+        const parsed = JSON.parse(savedPosition);
+        position.value = parsed;
+        handleViewportResize();
+      }
+      window.addEventListener("resize", handleViewportResize);
+    });
+    const savePosition = () => {
+      localStorage.setItem("layoutControlsPosition", JSON.stringify(position.value));
+    };
+    const handleMouseDown = (e2) => {
+      e2.preventDefault();
+      hasDragged.value = false;
+      if (isOpen.value) {
+        return;
+      }
+      isDragging.value = true;
+      dragStart.value = {
+        x: e2.clientX,
+        y: e2.clientY
+      };
+      initialPosition.value = {
+        x: position.value.x,
+        y: position.value.y
+      };
+      document.addEventListener("mousemove", onDrag);
+      document.addEventListener("mouseup", stopDrag);
+    };
+    const handleClick = (e2) => {
+      e2.preventDefault();
+      e2.stopPropagation();
+      if (!hasDragged.value) {
+        isOpen.value = !isOpen.value;
+      }
+    };
+    const onDrag = (e2) => {
+      if (!isDragging.value)
+        return;
+      const deltaX = e2.clientX - dragStart.value.x;
+      const deltaY = e2.clientY - dragStart.value.y;
+      if (Math.abs(deltaX) > 5 || Math.abs(deltaY) > 5) {
+        hasDragged.value = true;
+      }
+      if (hasDragged.value) {
+        let newX = initialPosition.value.x + deltaX;
+        let newY = initialPosition.value.y + deltaY;
+        const buttonSize = 45;
+        const boundaryMargin = 10;
+        newX = Math.max(
+          boundaryMargin,
+          Math.min(window.innerWidth - buttonSize - boundaryMargin, newX)
+        );
+        newY = Math.max(
+          boundaryMargin,
+          Math.min(window.innerHeight - buttonSize - boundaryMargin, newY)
+        );
+        position.value = { x: newX, y: newY };
+      }
+    };
+    const stopDrag = () => {
+      if (isDragging.value) {
+        isDragging.value = false;
+        if (hasDragged.value) {
+          savePosition();
+        }
+        document.removeEventListener("mousemove", onDrag);
+        document.removeEventListener("mouseup", stopDrag);
+      }
+    };
+    const runAction = (action, ...args) => {
+      action(...args);
+      isOpen.value = false;
+    };
+    const arrangeLayout = (layout) => {
+      itemStore.arrangeItems(layout);
+    };
+    const resetLayout = () => {
+      itemStore.resetLayout();
+    };
+    const resetLayoutGraph = () => {
+      emit("reset-layout-graph");
+    };
+    onBeforeUnmount(() => {
+      document.removeEventListener("mousemove", onDrag);
+      document.removeEventListener("mouseup", stopDrag);
+      window.removeEventListener("resize", handleViewportResize);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: "layout-widget-wrapper",
+        style: normalizeStyle({
+          left: position.value.x + "px",
+          top: position.value.y + "px"
+        })
+      }, [
+        createVNode(Transition$2, { name: "panel-fade" }, {
+          default: withCtx(() => [
+            isOpen.value ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: "panel",
+              style: normalizeStyle(panelStyle.value)
+            }, [
+              createBaseVNode("div", _hoisted_1$8, [
+                _cache[5] || (_cache[5] = createBaseVNode("span", { class: "panel-title" }, "Layout Controls", -1)),
+                createBaseVNode("button", {
+                  class: "close-btn",
+                  title: "Close",
+                  onClick: _cache[0] || (_cache[0] = ($event) => isOpen.value = false)
+                }, "✕")
+              ]),
+              createBaseVNode("div", _hoisted_2$6, [
+                createBaseVNode("button", {
+                  class: "control-btn",
+                  onClick: _cache[1] || (_cache[1] = ($event) => runAction(arrangeLayout, "tile"))
+                }, _cache[6] || (_cache[6] = [
+                  createBaseVNode("span", { class: "icon" }, "⊞", -1),
+                  createTextVNode(" Tile Layout ")
+                ])),
+                createBaseVNode("button", {
+                  class: "control-btn",
+                  onClick: _cache[2] || (_cache[2] = ($event) => runAction(arrangeLayout, "cascade"))
+                }, _cache[7] || (_cache[7] = [
+                  createBaseVNode("span", { class: "icon" }, "◫", -1),
+                  createTextVNode(" Cascade ")
+                ])),
+                createBaseVNode("button", {
+                  class: "control-btn",
+                  onClick: _cache[3] || (_cache[3] = ($event) => runAction(resetLayout))
+                }, _cache[8] || (_cache[8] = [
+                  createBaseVNode("span", { class: "icon" }, "↺", -1),
+                  createTextVNode(" Reset window Layout ")
+                ])),
+                createBaseVNode("button", {
+                  class: "control-btn accent",
+                  onClick: _cache[4] || (_cache[4] = ($event) => runAction(resetLayoutGraph))
+                }, _cache[9] || (_cache[9] = [
+                  createBaseVNode("span", { class: "icon" }, "⟲", -1),
+                  createTextVNode(" Reset Layout Graph ")
+                ]))
+              ])
+            ], 4)) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }),
+        createBaseVNode("button", {
+          class: normalizeClass(["trigger-btn", { "is-open": isOpen.value }]),
+          title: "Layout Controls",
+          onMousedown: handleMouseDown,
+          onClick: handleClick
+        }, _cache[10] || (_cache[10] = [
+          createStaticVNode('<svg class="layout-icon" viewBox="0 0 24 24" width="24" height="24" data-v-0bdaa52f><rect x="2" y="2" width="8" height="6" fill="currentColor" opacity="0.9" data-v-0bdaa52f></rect><rect x="12" y="2" width="8" height="6" fill="currentColor" opacity="0.7" data-v-0bdaa52f></rect><rect x="2" y="10" width="8" height="10" fill="currentColor" opacity="0.7" data-v-0bdaa52f></rect><rect x="12" y="10" width="8" height="10" fill="currentColor" opacity="0.9" data-v-0bdaa52f></rect></svg>', 1)
+        ]), 34)
+      ], 4);
     };
   }
 });
-const DraggableItem_vue_vue_type_style_index_0_scoped_e3b23979_lang = "";
-const DraggableItem = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-e3b23979"]]);
+const layoutControls_vue_vue_type_style_index_0_scoped_0bdaa52f_lang = "";
+const layoutControls = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-0bdaa52f"]]);
 var __defProp$2 = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
@@ -67227,15 +68610,15 @@ var __defProp$1 = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __spreadValues = (a3, b2) => {
   for (var prop in b2 || (b2 = {}))
     if (__hasOwnProp.call(b2, prop))
-      __defNormalProp(a3, prop, b2[prop]);
+      __defNormalProp2(a3, prop, b2[prop]);
   if (__getOwnPropSymbols)
     for (var prop of __getOwnPropSymbols(b2)) {
       if (__propIsEnum.call(b2, prop))
-        __defNormalProp(a3, prop, b2[prop]);
+        __defNormalProp2(a3, prop, b2[prop]);
     }
   return a3;
 };
@@ -67705,7 +69088,7 @@ var AgGridVue = defineComponent({
   * @license MIT
   **)
 */
-var __defProp = Object.defineProperty;
+var __defProp2 = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
@@ -67713,7 +69096,7 @@ var __decorateClass = (decorators, target, key, kind) => {
     if (decorator = decorators[i2])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp(target, key, result);
+    __defProp2(target, key, result);
   return result;
 };
 var _ClientSideNodeManager = class _ClientSideNodeManager2 {
@@ -69431,6 +70814,18 @@ const _hoisted_1$7 = {
   key: 0,
   class: "spinner-overlay"
 };
+const _hoisted_2$5 = { class: "table-container" };
+const _hoisted_3$5 = {
+  key: 0,
+  class: "outdated-data-banner"
+};
+const _hoisted_4$5 = {
+  key: 1,
+  class: "fetch-data-section"
+};
+const _hoisted_5$4 = ["disabled"];
+const _hoisted_6$3 = { key: 0 };
+const _hoisted_7$2 = { key: 1 };
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "dataPreview",
   props: {
@@ -69451,6 +70846,31 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     const columnLength = ref(0);
     const gridApi = ref(null);
     const columnDefs = ref([{}]);
+    const showFetchButton = ref(false);
+    const currentNodeId = ref(null);
+    const showOutdatedDataBanner = ref(false);
+    const props2 = __props;
+    const { triggerNodeFetch, isPollingActive } = useFlowExecution(
+      props2.flowId || nodeStore.flow_id,
+      { interval: 2e3, enabled: true },
+      {
+        persistPolling: true,
+        // Keep polling even when component unmounts
+        pollingKey: `table_flow_${props2.flowId || nodeStore.flow_id}`
+      }
+    );
+    const gridHeightComputed = computed$1(() => {
+      if (showFetchButton.value) {
+        return "80px";
+      }
+      return gridHeight.value || "100%";
+    });
+    const overlayNoRowsTemplate = computed$1(() => {
+      if (showFetchButton.value) {
+        return "<span></span>";
+      }
+      return void 0;
+    });
     const defaultColDef = {
       editable: true,
       filter: true,
@@ -69459,8 +70879,17 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
     const onGridReady = (params) => {
       gridApi.value = params.api;
+      if (showFetchButton.value) {
+        gridApi.value.hideOverlay();
+      }
     };
-    const props2 = __props;
+    function dismissOutdatedBanner() {
+      showOutdatedDataBanner.value = false;
+    }
+    async function handleRefresh() {
+      showOutdatedDataBanner.value = false;
+      await handleFetchData();
+    }
     const calculateGridHeight = () => {
       const otherElementsHeight = 300;
       const availableHeight = window.innerHeight - otherElementsHeight;
@@ -69470,39 +70899,81 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     async function downloadData(nodeId) {
       try {
         isLoading.value = true;
+        showFetchButton.value = false;
+        showOutdatedDataBanner.value = false;
+        currentNodeId.value = nodeId;
         let resp = await nodeStore.getTableExample(nodeStore.flow_id, nodeId);
         if (resp) {
           dataPreview.value = resp;
+          showOutdatedDataBanner.value = !resp.has_run_with_current_setup && resp.has_example_data;
           const _cd = [];
           const _columns = dataPreview.value.table_schema;
           if (props2.showFileStats) {
             _columns == null ? void 0 : _columns.forEach((item) => {
-              _cd.push({ field: item.name, resizable: true });
+              _cd.push({
+                field: item.name,
+                headerName: item.name,
+                resizable: true
+              });
               schema_dict[item.name] = item;
             });
           } else {
             _columns == null ? void 0 : _columns.forEach((item) => {
-              _cd.push({ field: item.name, resizable: true });
+              _cd.push({
+                field: item.name,
+                headerName: item.name,
+                resizable: true
+              });
             });
           }
           columnDefs.value = _cd;
-          if (dataPreview.value) {
-            rowData.value = dataPreview.value.data;
-            dataLength.value = dataPreview.value.number_of_records;
-            columnLength.value = dataPreview.value.number_of_columns;
+          if (resp.has_example_data === false) {
+            showFetchButton.value = true;
+            rowData.value = [];
+            showTable.value = true;
+            dataAvailable.value = false;
+          } else {
+            if (dataPreview.value) {
+              rowData.value = dataPreview.value.data;
+              dataLength.value = dataPreview.value.number_of_records;
+              columnLength.value = dataPreview.value.number_of_columns;
+            }
+            showTable.value = true;
+            dataAvailable.value = true;
+            showFetchButton.value = false;
           }
-          showTable.value = true;
-          dataAvailable.value = true;
         }
       } finally {
         isLoading.value = false;
       }
     }
+    async function handleFetchData() {
+      if (currentNodeId.value !== null) {
+        try {
+          if (isPollingActive(`node_${currentNodeId.value}`)) {
+            console.log("Fetch already in progress for this node");
+            return;
+          }
+          await triggerNodeFetch(currentNodeId.value);
+          const checkInterval = setInterval(async () => {
+            if (!isPollingActive(`node_${currentNodeId.value}`)) {
+              clearInterval(checkInterval);
+              await downloadData(currentNodeId.value);
+            }
+          }, 1e3);
+          setTimeout(() => clearInterval(checkInterval), 6e4);
+        } catch (error) {
+          console.error("Error fetching data:", error);
+        }
+      }
+    }
     function removeData() {
       rowData.value = [];
       showTable.value = false;
       dataAvailable.value = false;
       columnDefs.value = [{}];
+      showFetchButton.value = false;
+      currentNodeId.value = null;
     }
     ref(null);
     onMounted(() => {
@@ -69518,13 +70989,41 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_1$7, _cache[0] || (_cache[0] = [
           createBaseVNode("div", { class: "spinner" }, null, -1)
         ]))) : createCommentVNode("", true),
-        withDirectives(createVNode(unref(AgGridVue), {
-          "default-col-def": defaultColDef,
-          "column-defs": columnDefs.value,
-          class: "ag-theme-balham",
-          "row-data": rowData.value,
-          onGridReady
-        }, null, 8, ["column-defs", "row-data"]), [
+        withDirectives(createBaseVNode("div", _hoisted_2$5, [
+          showOutdatedDataBanner.value ? (openBlock(), createElementBlock("div", _hoisted_3$5, [
+            createBaseVNode("p", null, [
+              _cache[1] || (_cache[1] = createTextVNode(" Displayed data might be outdated. ")),
+              createBaseVNode("button", {
+                class: "refresh-link-button",
+                onClick: handleRefresh
+              }, "Refresh now")
+            ]),
+            createBaseVNode("button", {
+              class: "dismiss-button",
+              "aria-label": "Dismiss notification",
+              onClick: dismissOutdatedBanner
+            }, " × ")
+          ])) : createCommentVNode("", true),
+          createVNode(unref(AgGridVue), {
+            "default-col-def": defaultColDef,
+            "column-defs": columnDefs.value,
+            class: "ag-theme-balham",
+            "row-data": rowData.value,
+            style: normalizeStyle({ width: "100%", height: gridHeightComputed.value }),
+            "overlay-no-rows-template": overlayNoRowsTemplate.value,
+            onGridReady
+          }, null, 8, ["column-defs", "row-data", "style", "overlay-no-rows-template"]),
+          showFetchButton.value ? (openBlock(), createElementBlock("div", _hoisted_4$5, [
+            _cache[2] || (_cache[2] = createBaseVNode("p", null, "Step has not stored any data yet. Click here to trigger a run for this node", -1)),
+            createBaseVNode("button", {
+              class: "fetch-data-button",
+              disabled: unref(nodeStore).isRunning,
+              onClick: handleFetchData
+            }, [
+              !unref(nodeStore).isRunning ? (openBlock(), createElementBlock("span", _hoisted_6$3, "Fetch Data")) : (openBlock(), createElementBlock("span", _hoisted_7$2, "Fetching..."))
+            ], 8, _hoisted_5$4)
+          ])) : createCommentVNode("", true)
+        ], 512), [
           [vShow, !isLoading.value]
         ])
       ], 64);
@@ -71059,7 +72558,7 @@ const _hoisted_4$4 = { class: "node-title" };
 const _hoisted_5$3 = { class: "node-description" };
 const _hoisted_6$2 = { key: 1 };
 const _hoisted_7$1 = { class: "node-details" };
-const _hoisted_8 = {
+const _hoisted_8$1 = {
   key: 0,
   class: "failure"
 };
@@ -71186,7 +72685,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
                                     })
                                   }, toDisplayString(node.success === null ? "Running" : node.success ? "Success" : "Failure"), 3)
                                 ]),
-                                node.success === false ? (openBlock(), createElementBlock("p", _hoisted_8, "Error: " + toDisplayString(node.error), 1)) : createCommentVNode("", true)
+                                node.success === false ? (openBlock(), createElementBlock("p", _hoisted_8$1, "Error: " + toDisplayString(node.error), 1)) : createCommentVNode("", true)
                               ])
                             ]),
                             _: 2
@@ -71256,7 +72755,6 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       connectionRetries.value = 0;
       errorMessage.value = null;
       connectionStatus.value = "disconnected";
-      console.log("Starting log streaming");
       try {
         const token = await authService.getToken();
         if (!token) {
@@ -71288,7 +72786,6 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
           if (!hasReceivedMessage && nodeStore.isRunning) {
             if (connectionRetries.value < maxRetries) {
               connectionRetries.value++;
-              console.log(`Retrying log connection (${connectionRetries.value}/${maxRetries})...`);
               errorMessage.value = `Connection failed. Retrying (${connectionRetries.value}/${maxRetries})...`;
               connectionStatus.value = "error";
               stopStreamingLogs();
@@ -71432,8 +72929,8 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const LogViewer_vue_vue_type_style_index_0_scoped_51d5bb55_lang = "";
-const LogViewer = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-51d5bb55"]]);
+const LogViewer_vue_vue_type_style_index_0_scoped_9b3bdb24_lang = "";
+const LogViewer = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-9b3bdb24"]]);
 const _hoisted_1$4 = { class: "context-menu-header" };
 const _hoisted_2$2 = { class: "context-menu-items" };
 const _hoisted_3$2 = ["onClick"];
@@ -71535,11 +73032,32 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
 });
 const ContextMenu_vue_vue_type_style_index_0_scoped_7db4e6fc_lang = "";
 const ContextMenu = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-7db4e6fc"]]);
+const handleApiError = (error) => {
+  var _a, _b, _c;
+  throw {
+    message: ((_b = (_a = error.response) == null ? void 0 : _a.data) == null ? void 0 : _b.detail) || "An unknown error occurred",
+    status: ((_c = error.response) == null ? void 0 : _c.status) || 500
+  };
+};
+const applyStandardLayout = async (flowId) => {
+  const url = "/flow/apply_standard_layout/";
+  try {
+    const response = await axios.post(url, null, {
+      params: {
+        flow_id: flowId
+      }
+    });
+    return response.data;
+  } catch (error) {
+    return handleApiError(error);
+  }
+};
 const _hoisted_1$3 = { class: "container" };
 const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "CanvasFlow",
   emits: ["save", "run"],
   setup(__props, { expose: __expose, emit: __emit }) {
+    const itemStore = useItemStore();
     const availableHeight = ref(0);
     const nodeStore = useNodeStore();
     const rawCustomNode = markRaw$1(CustomNode);
@@ -71563,14 +73081,23 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const contextMenuTarget = ref({ type: "pane", id: "" });
     const emit = __emit;
     const handleCanvasClick = (event) => {
-      nodeStore.closeDrawer();
       showTablePreview.value = false;
+      nodeStore.node_id = -1;
+      nodeStore.activeDrawerComponent = null;
       nodeStore.hideLogViewer();
       clickedPosition.value = {
         x: event.x,
         y: event.y
       };
     };
+    const handleNodeSettingsClose = (event) => {
+      nodeStore.node_id = -1;
+      nodeStore.activeDrawerComponent = null;
+      clickedPosition.value = {
+        x: event.x,
+        y: event.y
+      };
+    };
     const toggleShowTablePreview = () => {
       showTablePreview.value = !showTablePreview.value;
     };
@@ -71589,7 +73116,6 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         setNodeTableView(nodeId);
       });
       fitView({ nodes: [nodeId.toString()] });
-      nodeStore.node_id = nodeId;
     };
     async function onConnect(params) {
       if (params.target && params.source) {
@@ -71613,6 +73139,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     const nodeClick = (mouseEvent) => {
       showTablePreview.value = true;
       nextTick().then(() => {
+        nodeStore.node_id = parseInt(mouseEvent.node.id);
+        itemStore.bringToFront("tablePreview");
+        itemStore.bringToFront("nodeSettings");
         if (mouseEvent.node.id && !NodeIsSelected(mouseEvent.node.id) || dataPreview.value && dataPreview.value.dataLength == 0 && dataPreview.value.columnLength == 0) {
           setNodeTableView(mouseEvent.node.id);
         }
@@ -71620,7 +73149,6 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       });
     };
     const setNodeTableView = (nodeId) => {
-      console.log(dataPreview.value);
       if (dataPreview.value) {
         dataPreview.value.downloadData(nodeId);
       }
@@ -71651,13 +73179,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         console.log("Edge changes length is 2 so coming from a node change event");
         return;
       }
-      console.log("Edge changes", edgeChanges);
       for (const edgeChange of edgeChanges) {
-        if (edgeChange.type === "add") {
-          console.log("This edge change does not work");
-        } else if (edgeChange.type === "remove") {
+        if (edgeChange.type === "remove") {
           const nodeConnection = convertEdgeChangeToNodeConnection(edgeChange);
-          console.log("Removing connection", nodeConnection);
           deleteConnection(nodeStore.flow_id, nodeConnection);
         }
       }
@@ -71696,6 +73220,14 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         copyValue(position.x, position.y);
       }
     };
+    const handleResetLayoutGraph = async () => {
+      await applyStandardLayout(nodeStore.flow_id);
+      loadFlow();
+    };
+    const hideLogViewer = () => {
+      nodeStore.hideLogViewerForThisRun = true;
+      nodeStore.hideLogViewer();
+    };
     const handleKeyDown = (event) => {
       let eventKeyClicked = event.ctrlKey || event.metaKey;
       if (eventKeyClicked && event.key === "v" && event.target) {
@@ -71778,7 +73310,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             onClick: closeContextMenu
           }, {
             default: withCtx(() => [
-              createVNode(unref(_sfc_main$d))
+              createVNode(unref(_sfc_main$i))
             ]),
             _: 1
           }, 8, ["nodes", "edges", "connection-mode"]),
@@ -71798,7 +73330,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           "initial-width": 200,
           "initial-position": "left",
           title: "Data actions",
-          "allow-free-move": true
+          "allow-free-move": true,
+          "prevent-overlap": false
         }, {
           default: withCtx(() => [
             createVNode(NodeList, { onDragstart: unref(onDragStart) }, null, 8, ["onDragstart"])
@@ -71812,13 +73345,17 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           title: "Log overview",
           "allow-full-screen": true,
           "initial-position": "bottom",
-          "on-minize": unref(nodeStore).toggleLogViewer
+          "initial-left": 200,
+          "on-minize": hideLogViewer,
+          group: "bottomPanels",
+          "sync-dimensions": true,
+          "prevent-overlap": false
         }, {
           default: withCtx(() => [
-            createVNode(LogViewer, { "flow-id": 1 })
+            createVNode(LogViewer)
           ]),
           _: 1
-        }, 8, ["on-minize"])) : createCommentVNode("", true),
+        })) : createCommentVNode("", true),
         unref(nodeStore).showFlowResult ? (openBlock(), createBlock(DraggableItem, {
           key: 1,
           id: "flowresults",
@@ -71826,7 +73363,8 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           title: "flow results",
           "initial-position": "right",
           "initial-width": 400,
-          "initial-top": -50
+          group: "rightPanels",
+          "prevent-overlap": false
         }, {
           default: withCtx(() => [
             createVNode(FlowResults, { "on-click": selectNodeExternally })
@@ -71841,7 +73379,11 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           title: "Table Preview",
           "initial-position": "bottom",
           "on-minize": toggleShowTablePreview,
-          "initial-height": tablePreviewHeight.value
+          "initial-height": tablePreviewHeight.value,
+          "initial-left": 200,
+          group: "bottomPanels",
+          "sync-dimensions": true,
+          "prevent-overlap": false
         }, {
           default: withCtx(() => [
             createVNode(_sfc_main$8, {
@@ -71862,22 +73404,18 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           id: "nodeSettings",
           "show-right": true,
           "initial-position": "right",
-          "initial-top": 0,
           "initial-width": 800,
           "initial-height": nodeSettingsHeight.value,
           title: "Node Settings",
-          "on-minize": unref(nodeStore).closeDrawer,
-          "allow-full-screen": true
+          "on-minize": handleNodeSettingsClose,
+          "allow-full-screen": true,
+          "prevent-overlap": false
         }, {
-          default: withCtx(() => _cache[2] || (_cache[2] = [
-            createBaseVNode("div", {
-              id: "nodesettings",
-              class: "content"
-            }, null, -1)
-          ])),
-          _: 1,
-          __: [2]
-        }, 8, ["initial-height", "on-minize"])) : createCommentVNode("", true),
+          default: withCtx(() => [
+            createVNode(_sfc_main$b)
+          ]),
+          _: 1
+        }, 8, ["initial-height"])) : createCommentVNode("", true),
         unref(nodeStore).showCodeGenerator ? (openBlock(), createBlock(DraggableItem, {
           key: 4,
           id: "generatedCode",
@@ -71886,13 +73424,15 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           "initial-position": "right",
           "allow-free-move": true,
           "allow-full-screen": true,
-          "on-minize": () => unref(nodeStore).setCodeGeneratorVisibility(false)
+          "on-minize": () => unref(nodeStore).setCodeGeneratorVisibility(false),
+          "prevent-overlap": false
         }, {
           default: withCtx(() => [
             createVNode(CodeGenerator)
           ]),
           _: 1
-        }, 8, ["on-minize"])) : createCommentVNode("", true)
+        }, 8, ["on-minize"])) : createCommentVNode("", true),
+        createVNode(layoutControls, { onResetLayoutGraph: handleResetLayoutGraph })
       ]);
     };
   }
@@ -71952,6 +73492,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
       }
     };
     const handleSaveFlow = async (flowPath) => {
+      console.log("Saving flow to path:", flowPath);
       try {
         await saveFlow(props2.flowId, flowPath);
         isVisible2.value = false;
@@ -71984,12 +73525,12 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           createVNode(FileBrowser, {
             ref_key: "fileBrowserRef",
             ref: fileBrowserRef,
-            "allowed-file-types": ["flowfile"],
+            "allowed-file-types": unref(ALLOWED_SAVE_EXTENSIONS),
             mode: "create",
             "initial-file-path": initialPath.value,
             onCreateFile: handleSaveFlow,
             onOverwriteFile: handleSaveFlow
-          }, null, 8, ["initial-file-path"])
+          }, null, 8, ["allowed-file-types", "initial-file-path"])
         ]),
         _: 1
       }, 8, ["modelValue"]);
@@ -72261,18 +73802,20 @@ const _hoisted_1 = {
   key: 0,
   class: "header"
 };
-const _hoisted_2 = { class: "left-section" };
-const _hoisted_3 = { class: "middle-section" };
-const _hoisted_4 = { class: "right-section" };
-const _hoisted_5 = {
+const _hoisted_2 = { class: "header-top" };
+const _hoisted_3 = { class: "left-section" };
+const _hoisted_4 = { class: "header-bottom" };
+const _hoisted_5 = { class: "middle-section" };
+const _hoisted_6 = { class: "right-section" };
+const _hoisted_7 = {
   key: 1,
   class: "loading-state"
 };
-const _hoisted_6 = {
+const _hoisted_8 = {
   key: 2,
   class: "empty-state"
 };
-const _hoisted_7 = { class: "empty-state-content" };
+const _hoisted_9 = { class: "empty-state-content" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "designer",
   setup(__props) {
@@ -72386,6 +73929,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         headerButtons.value.openOpenDialog();
       }
     };
+    const openQuickCreateDialog = () => {
+      if (headerButtons.value) {
+        console.log("Opening quick create dialog");
+        headerButtons.value.handleQuickCreateAction();
+      }
+    };
     const initialSetup = async () => {
       if (initialLoadComplete.value) {
         console.log("Initial setup already completed");
@@ -72431,34 +73980,38 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock(Fragment, null, [
         !isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
           createBaseVNode("div", _hoisted_2, [
-            createVNode(HeaderButtons, {
-              ref_key: "headerButtons",
-              ref: headerButtons,
-              onOpenFlow: openFlow,
-              onRefreshFlow: refreshFlow
-            }, null, 512)
-          ]),
-          createBaseVNode("div", _hoisted_3, [
-            createVNode(FlowSelector, {
-              ref_key: "flowSelector",
-              ref: flowSelector,
-              onFlowChanged: handleFlowChange,
-              onCloseTab: handleCloseFlow
-            }, null, 512)
+            createBaseVNode("div", _hoisted_3, [
+              createVNode(HeaderButtons, {
+                ref_key: "headerButtons",
+                ref: headerButtons,
+                onOpenFlow: openFlow,
+                onRefreshFlow: refreshFlow
+              }, null, 512)
+            ])
           ]),
           createBaseVNode("div", _hoisted_4, [
-            createVNode(Status)
+            createBaseVNode("div", _hoisted_5, [
+              createVNode(FlowSelector, {
+                ref_key: "flowSelector",
+                ref: flowSelector,
+                onFlowChanged: handleFlowChange,
+                onCloseTab: handleCloseFlow
+              }, null, 512)
+            ]),
+            createBaseVNode("div", _hoisted_6, [
+              createVNode(Status)
+            ])
           ])
         ])) : createCommentVNode("", true),
-        isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_5, _cache[2] || (_cache[2] = [
+        isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_7, _cache[2] || (_cache[2] = [
           createBaseVNode("div", { class: "loading-state-content" }, [
             createBaseVNode("p", null, "Loading flows...")
           ], -1)
-        ]))) : !isLoading.value && flowsActive.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_6, [
-          createBaseVNode("div", _hoisted_7, [
-            _cache[5] || (_cache[5] = createBaseVNode("span", { class: "material-icons empty-icon" }, "account_tree", -1)),
-            _cache[6] || (_cache[6] = createBaseVNode("h2", null, "No Active Flows", -1)),
-            _cache[7] || (_cache[7] = createBaseVNode("p", null, "There are currently no active flows in the system.", -1)),
+        ]))) : !isLoading.value && flowsActive.value.length === 0 ? (openBlock(), createElementBlock("div", _hoisted_8, [
+          createBaseVNode("div", _hoisted_9, [
+            _cache[6] || (_cache[6] = createBaseVNode("span", { class: "material-icons empty-icon" }, "account_tree", -1)),
+            _cache[7] || (_cache[7] = createBaseVNode("h2", null, "No Active Flows", -1)),
+            _cache[8] || (_cache[8] = createBaseVNode("p", null, "There are currently no active flows in the system.", -1)),
             createVNode(_component_el_button, {
               type: "primary",
               class: "action-button",
@@ -72482,6 +74035,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ])),
               _: 1,
               __: [4]
+            }),
+            createVNode(_component_el_button, {
+              type: "primary",
+              class: "action-button",
+              onClick: openQuickCreateDialog
+            }, {
+              default: withCtx(() => _cache[5] || (_cache[5] = [
+                createBaseVNode("span", { class: "material-icons" }, "folder_open", -1),
+                createTextVNode(" Quick create ")
+              ])),
+              _: 1,
+              __: [5]
             })
           ])
         ])) : (openBlock(), createBlock(_sfc_main$4, {
@@ -72502,8 +74067,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const designer_vue_vue_type_style_index_0_scoped_cc07b037_lang = "";
-const designer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cc07b037"]]);
+const designer_vue_vue_type_style_index_0_scoped_24dbaac4_lang = "";
+const designer = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-24dbaac4"]]);
 const designer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: designer
@@ -72511,7 +74076,6 @@ const designer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.definePr
 export {
   FileBrowser as F,
   designer$1 as d,
-  getImageUrl as g,
   info_filled_default as i,
   oneDark as o,
   python as p,