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

flowfile/web/static/assets/ManualInput-3702e677.css

@@ -0,0 +1,293 @@
+
+.settings-section[data-v-933b703f] {
+  padding: var(--spacing-4);
+  background: var(--color-background-primary);
+  border-radius: var(--border-radius-lg);
+}
+
+/* Controls Section */
+.controls-section[data-v-933b703f] {
+  margin-bottom: var(--spacing-3);
+}
+.controls-top[data-v-933b703f] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-2);
+}
+.button-group[data-v-933b703f] {
+  display: flex;
+  gap: var(--spacing-2);
+  flex-wrap: wrap;
+}
+.table-info[data-v-933b703f] {
+  display: flex;
+  gap: var(--spacing-2);
+}
+.info-badge[data-v-933b703f] {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+  background: var(--color-background-muted);
+  padding: var(--spacing-1) var(--spacing-2);
+  border-radius: var(--border-radius-sm);
+}
+
+/* Table Container */
+.table-container[data-v-933b703f] {
+  max-height: 350px;
+  overflow: auto;
+  border: 1px solid var(--color-border-light);
+  border-radius: var(--border-radius-md);
+  background: var(--color-background-secondary);
+}
+
+/* Modern Table */
+.modern-table[data-v-933b703f] {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+
+/* Header Row */
+.header-row[data-v-933b703f] {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--color-background-muted);
+}
+.row-number-header[data-v-933b703f] {
+  width: 40px;
+  min-width: 40px;
+  max-width: 40px;
+  text-align: center;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+  border-bottom: 2px solid var(--color-border-light);
+  border-right: 1px solid var(--color-border-light);
+  background: var(--color-background-muted);
+  position: sticky;
+  left: 0;
+  z-index: 11;
+}
+.column-header-cell[data-v-933b703f] {
+  min-width: 140px;
+  width: 140px;
+  padding: 0;
+  border-bottom: 2px solid var(--color-border-light);
+  border-right: 1px solid var(--color-border-light);
+  vertical-align: top;
+}
+.column-header[data-v-933b703f] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.header-top[data-v-933b703f] {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: var(--spacing-2);
+  padding-bottom: var(--spacing-1);
+}
+.input-header[data-v-933b703f] {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  padding: var(--spacing-1);
+  border-radius: var(--border-radius-sm);
+  outline: none;
+}
+.input-header[data-v-933b703f]:focus {
+  background: var(--color-background-primary);
+  box-shadow: 0 0 0 1px var(--color-primary);
+}
+.input-header[data-v-933b703f]::placeholder {
+  color: var(--color-text-muted);
+}
+.delete-column-btn[data-v-933b703f] {
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-muted);
+  border-radius: var(--border-radius-sm);
+  transition: all var(--transition-fast);
+  flex-shrink: 0;
+}
+.delete-column-btn[data-v-933b703f]:hover {
+  color: var(--color-danger);
+  background: var(--color-danger-bg, rgba(239, 68, 68, 0.1));
+}
+.delete-column-btn i[data-v-933b703f] {
+  font-size: 10px;
+}
+.header-type[data-v-933b703f] {
+  padding: 0 var(--spacing-2) var(--spacing-2);
+}
+.type-select[data-v-933b703f] {
+  width: 100%;
+}
+.type-select[data-v-933b703f] .el-input__wrapper {
+  background: var(--color-background-primary);
+  box-shadow: none;
+  border: 1px solid var(--color-border-light);
+}
+.type-select[data-v-933b703f] .el-input__inner {
+  font-size: var(--font-size-xs);
+  height: 24px;
+}
+.type-select[data-v-933b703f] .el-select__caret {
+  font-size: 10px;
+}
+.actions-header[data-v-933b703f] {
+  width: 36px;
+  min-width: 36px;
+  max-width: 36px;
+  border-bottom: 2px solid var(--color-border-light);
+  background: var(--color-background-muted);
+}
+
+/* Data Rows */
+.data-row[data-v-933b703f] {
+  transition: background var(--transition-fast);
+}
+.data-row[data-v-933b703f]:hover {
+  background: var(--color-background-hover);
+}
+.data-row:hover .row-number[data-v-933b703f] {
+  background: var(--color-background-hover);
+}
+.row-number[data-v-933b703f] {
+  width: 40px;
+  min-width: 40px;
+  max-width: 40px;
+  text-align: center;
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+  border-bottom: 1px solid var(--color-border-light);
+  border-right: 1px solid var(--color-border-light);
+  background: var(--color-background-muted);
+  position: sticky;
+  left: 0;
+  z-index: 5;
+}
+.data-cell[data-v-933b703f] {
+  min-width: 140px;
+  width: 140px;
+  padding: 0;
+  border-bottom: 1px solid var(--color-border-light);
+  border-right: 1px solid var(--color-border-light);
+}
+.input-cell[data-v-933b703f] {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: transparent;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-primary);
+  padding: var(--spacing-2);
+  outline: none;
+}
+.input-cell[data-v-933b703f]:focus {
+  background: var(--color-background-primary);
+  box-shadow: inset 0 0 0 2px var(--color-primary);
+}
+.row-actions[data-v-933b703f] {
+  width: 36px;
+  min-width: 36px;
+  max-width: 36px;
+  text-align: center;
+  border-bottom: 1px solid var(--color-border-light);
+  padding: var(--spacing-1);
+}
+.delete-row-btn[data-v-933b703f] {
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-muted);
+  border-radius: var(--border-radius-sm);
+  transition: all var(--transition-fast);
+  opacity: 0;
+}
+.data-row:hover .delete-row-btn[data-v-933b703f] {
+  opacity: 1;
+}
+.delete-row-btn[data-v-933b703f]:hover {
+  color: var(--color-danger);
+  background: var(--color-danger-bg, rgba(239, 68, 68, 0.1));
+}
+.delete-row-btn i[data-v-933b703f] {
+  font-size: 10px;
+}
+
+/* Raw Data Section */
+.raw-data-section[data-v-933b703f] {
+  margin-top: var(--spacing-4);
+  padding: var(--spacing-4);
+  background: var(--color-background-muted);
+  border-radius: var(--border-radius-lg);
+  border: 1px solid var(--color-border-light);
+}
+.raw-data-header[data-v-933b703f] {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-2);
+  margin-bottom: var(--spacing-3);
+}
+.raw-data-title[data-v-933b703f] {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+}
+.raw-data-hint[data-v-933b703f] {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-muted);
+}
+.json-editor[data-v-933b703f] .el-textarea__inner {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-xs);
+  line-height: 1.5;
+  background: var(--color-background-primary);
+}
+.raw-data-controls[data-v-933b703f] {
+  margin-top: var(--spacing-3);
+  display: flex;
+  justify-content: flex-end;
+}
+
+/* Custom Scrollbar */
+.table-container[data-v-933b703f]::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.table-container[data-v-933b703f]::-webkit-scrollbar-track {
+  background: var(--color-background-muted);
+  border-radius: 4px;
+}
+.table-container[data-v-933b703f]::-webkit-scrollbar-thumb {
+  background-color: var(--color-gray-400);
+  border-radius: 4px;
+}
+.table-container[data-v-933b703f]::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-gray-500);
+}
+.table-container[data-v-933b703f]::-webkit-scrollbar-corner {
+  background: var(--color-background-muted);
+}

flowfile/web/static/assets/{ManualInput-34639209.js → ManualInput-9b6f3224.js}

@@ -1,7 +1,9 @@
-import { r as ref, d as defineComponent, l as computed, m as watch, b as resolveComponent, c as openBlock, e as createElementBlock, f as createVNode, w as withCtx, p as createBaseVNode, F as Fragment, q as renderList, a8 as withDirectives, a9 as vModelText, u as unref, h as createBlock, g as createTextVNode, s as normalizeClass, t as toDisplayString, i as createCommentVNode, E as ElNotification, _ as _export_sfc } from "./index-5429bbf8.js";
-import { u as useNodeStore } from "./vue-codemirror.esm-41b0e0d7.js";
-import { G as GenericNodeSettings } from "./genericNodeSettings-4fe5f36b.js";
-import "./designer-9633482a.js";
+import { r as ref, d as defineComponent, B as computed, C as watch, m as resolveComponent, o as openBlock, c as createElementBlock, p as createVNode, q as withCtx, a as createBaseVNode, f as createTextVNode, n as normalizeClass, t as toDisplayString, G as Fragment, H as renderList, i as withDirectives, v as vModelText, x as unref, y as createBlock, e as createCommentVNode, E as ElNotification, g as _export_sfc } from "./index-387a6f18.js";
+import { u as useNodeStore } from "./PopOver-862d7e28.js";
+import { G as GenericNodeSettings } from "./genericNodeSettings-14eac1c3.js";
+import "./DesignerView-f64749fb.js";
+import "./index-f0a6e5a5.js";
+import "./vue-codemirror.esm-31ba0e0b.js";
 const createManualInput = (flowId = -1, nodeId = -1, pos_x = 0, pos_y = 0) => {
   const nodeManualInput = ref({
     flow_id: flowId,
@@ -17,20 +19,28 @@ const createManualInput = (flowId = -1, nodeId = -1, pos_x = 0, pos_y = 0) => {
 };
 const _hoisted_1 = { key: 0 };
 const _hoisted_2 = { class: "settings-section" };
-const _hoisted_3 = { class: "table-container" };
-const _hoisted_4 = { class: "modern-table" };
-const _hoisted_5 = ["onClick"];
-const _hoisted_6 = { class: "column-header" };
-const _hoisted_7 = ["onUpdate:modelValue"];
-const _hoisted_8 = ["onUpdate:modelValue"];
-const _hoisted_9 = ["onClick"];
-const _hoisted_10 = { class: "controls-section" };
-const _hoisted_11 = { class: "button-group" };
-const _hoisted_12 = {
+const _hoisted_3 = { class: "controls-section controls-top" };
+const _hoisted_4 = { class: "button-group" };
+const _hoisted_5 = { class: "table-info" };
+const _hoisted_6 = { class: "info-badge" };
+const _hoisted_7 = { class: "info-badge" };
+const _hoisted_8 = { class: "table-container" };
+const _hoisted_9 = { class: "modern-table" };
+const _hoisted_10 = { class: "header-row" };
+const _hoisted_11 = { class: "column-header" };
+const _hoisted_12 = { class: "header-top" };
+const _hoisted_13 = ["onUpdate:modelValue", "placeholder"];
+const _hoisted_14 = ["onClick"];
+const _hoisted_15 = { class: "header-type" };
+const _hoisted_16 = { class: "row-number" };
+const _hoisted_17 = ["onUpdate:modelValue", "onKeydown"];
+const _hoisted_18 = { class: "row-actions" };
+const _hoisted_19 = ["onClick"];
+const _hoisted_20 = {
   key: 0,
   class: "raw-data-section"
 };
-const _hoisted_13 = { class: "raw-data-controls" };
+const _hoisted_21 = { class: "raw-data-controls" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "ManualInput",
   setup(__props, { expose: __expose }) {
@@ -175,6 +185,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const toggleRawData = () => {
       showRawData.value = !showRawData.value;
     };
+    const selectAll = (event) => {
+      const target = event.target;
+      target.select();
+    };
+    const handleCellKeydown = (event, row, col) => {
+      if (event.key === "Tab" && !event.shiftKey) {
+        const colIndex = columns.value.findIndex((c) => c.id === col.id);
+        const rowIndex = rows.value.findIndex((r) => r.id === row.id);
+        if (colIndex === columns.value.length - 1 && rowIndex === rows.value.length - 1) {
+          event.preventDefault();
+          addRow();
+          setTimeout(() => {
+            const newRowCells = document.querySelectorAll(".data-row:last-child .input-cell");
+            if (newRowCells.length > 0) {
+              newRowCells[0].focus();
+            }
+          }, 0);
+        }
+      }
+    };
     const updateTableFromRawData = () => {
       try {
         const newData = JSON.parse(rawDataString.value);
@@ -215,165 +245,189 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       pushNodeData
     });
     return (_ctx, _cache) => {
+      const _component_el_button = resolveComponent("el-button");
       const _component_el_option = resolveComponent("el-option");
       const _component_el_select = resolveComponent("el-select");
-      const _component_el_button = resolveComponent("el-button");
       const _component_el_input = resolveComponent("el-input");
       const _component_el_collapse_transition = resolveComponent("el-collapse-transition");
       return dataLoaded.value && nodeManualInput.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
         createVNode(GenericNodeSettings, {
           modelValue: nodeManualInput.value,
-          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => nodeManualInput.value = $event)
+          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => nodeManualInput.value = $event)
         }, {
           default: withCtx(() => [
             createBaseVNode("div", _hoisted_2, [
               createBaseVNode("div", _hoisted_3, [
-                createBaseVNode("table", _hoisted_4, [
-                  createBaseVNode("thead", null, [
-                    createBaseVNode("tr", null, [
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (col) => {
-                        return openBlock(), createElementBlock("td", {
-                          key: "delete-" + col.id
-                        }, [
-                          createBaseVNode("button", {
-                            class: "delete-button",
-                            onClick: ($event) => deleteColumn(col.id)
-                          }, null, 8, _hoisted_5)
-                        ]);
-                      }), 128))
-                    ]),
-                    createBaseVNode("tr", null, [
-                      (openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (col) => {
-                        return openBlock(), createElementBlock("th", {
-                          key: col.id
-                        }, [
-                          createBaseVNode("div", _hoisted_6, [
-                            withDirectives(createBaseVNode("input", {
-                              "onUpdate:modelValue": ($event) => col.name = $event,
-                              class: "input-header",
-                              type: "text"
-                            }, null, 8, _hoisted_7), [
-                              [vModelText, col.name]
-                            ]),
-                            createVNode(_component_el_select, {
-                              modelValue: col.dataType,
-                              "onUpdate:modelValue": ($event) => col.dataType = $event,
-                              size: "small",
-                              class: "type-select"
-                            }, {
-                              default: withCtx(() => [
-                                (openBlock(true), createElementBlock(Fragment, null, renderList(unref(dataTypes), (dtype) => {
-                                  return openBlock(), createBlock(_component_el_option, {
-                                    key: dtype,
-                                    label: dtype,
-                                    value: dtype
-                                  }, null, 8, ["label", "value"]);
-                                }), 128))
-                              ]),
-                              _: 2
-                            }, 1032, ["modelValue", "onUpdate:modelValue"])
-                          ])
-                        ]);
-                      }), 128))
-                    ])
-                  ]),
-                  createBaseVNode("tbody", null, [
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (row) => {
-                      return openBlock(), createElementBlock("tr", {
-                        key: row.id
-                      }, [
-                        (openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (col) => {
-                          return openBlock(), createElementBlock("td", {
-                            key: col.id
-                          }, [
-                            withDirectives(createBaseVNode("input", {
-                              "onUpdate:modelValue": ($event) => row.values[col.id] = $event,
-                              class: "input-cell",
-                              type: "text"
-                            }, null, 8, _hoisted_8), [
-                              [vModelText, row.values[col.id]]
-                            ])
-                          ]);
-                        }), 128)),
-                        createBaseVNode("td", null, [
-                          createBaseVNode("button", {
-                            class: "delete-button",
-                            onClick: ($event) => deleteRow(row.id)
-                          }, null, 8, _hoisted_9)
-                        ])
-                      ]);
-                    }), 128))
-                  ])
-                ])
-              ]),
-              createBaseVNode("div", _hoisted_10, [
-                createBaseVNode("div", _hoisted_11, [
+                createBaseVNode("div", _hoisted_4, [
                   createVNode(_component_el_button, {
                     type: "primary",
                     size: "small",
                     onClick: addColumn
                   }, {
-                    icon: withCtx(() => _cache[2] || (_cache[2] = [
+                    icon: withCtx(() => _cache[4] || (_cache[4] = [
                       createBaseVNode("i", { class: "fas fa-plus" }, null, -1)
                     ])),
                     default: withCtx(() => [
-                      _cache[3] || (_cache[3] = createTextVNode(" Add Column "))
+                      _cache[5] || (_cache[5] = createTextVNode(" Add Column "))
                     ]),
                     _: 1,
-                    __: [3]
+                    __: [5]
                   }),
                   createVNode(_component_el_button, {
                     type: "primary",
                     size: "small",
                     onClick: addRow
                   }, {
-                    icon: withCtx(() => _cache[4] || (_cache[4] = [
+                    icon: withCtx(() => _cache[6] || (_cache[6] = [
                       createBaseVNode("i", { class: "fas fa-plus" }, null, -1)
                     ])),
                     default: withCtx(() => [
-                      _cache[5] || (_cache[5] = createTextVNode(" Add Row "))
+                      _cache[7] || (_cache[7] = createTextVNode(" Add Row "))
                     ]),
                     _: 1,
-                    __: [5]
+                    __: [7]
                   }),
                   createVNode(_component_el_button, {
-                    type: "primary",
                     size: "small",
                     onClick: toggleRawData
                   }, {
                     icon: withCtx(() => [
                       createBaseVNode("i", {
-                        class: normalizeClass(showRawData.value ? "fas fa-eye-slash" : "fas fa-eye")
+                        class: normalizeClass(showRawData.value ? "fas fa-eye-slash" : "fas fa-code")
                       }, null, 2)
                     ]),
                     default: withCtx(() => [
-                      createTextVNode(" " + toDisplayString(showRawData.value ? "Hide" : "Show") + " Raw Data ", 1)
+                      createTextVNode(" " + toDisplayString(showRawData.value ? "Hide JSON" : "Edit JSON"), 1)
                     ]),
                     _: 1
                   })
+                ]),
+                createBaseVNode("div", _hoisted_5, [
+                  createBaseVNode("span", _hoisted_6, toDisplayString(columns.value.length) + " columns", 1),
+                  createBaseVNode("span", _hoisted_7, toDisplayString(rows.value.length) + " rows", 1)
+                ])
+              ]),
+              createBaseVNode("div", _hoisted_8, [
+                createBaseVNode("table", _hoisted_9, [
+                  createBaseVNode("thead", null, [
+                    createBaseVNode("tr", _hoisted_10, [
+                      _cache[9] || (_cache[9] = createBaseVNode("th", { class: "row-number-header" }, "#", -1)),
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (col) => {
+                        return openBlock(), createElementBlock("th", {
+                          key: col.id,
+                          class: "column-header-cell"
+                        }, [
+                          createBaseVNode("div", _hoisted_11, [
+                            createBaseVNode("div", _hoisted_12, [
+                              withDirectives(createBaseVNode("input", {
+                                "onUpdate:modelValue": ($event) => col.name = $event,
+                                class: "input-header",
+                                type: "text",
+                                placeholder: `Column ${col.id}`,
+                                onFocus: _cache[0] || (_cache[0] = ($event) => selectAll($event))
+                              }, null, 40, _hoisted_13), [
+                                [vModelText, col.name]
+                              ]),
+                              createBaseVNode("button", {
+                                class: "delete-column-btn",
+                                title: "Delete column",
+                                onClick: ($event) => deleteColumn(col.id)
+                              }, _cache[8] || (_cache[8] = [
+                                createBaseVNode("i", { class: "fas fa-times" }, null, -1)
+                              ]), 8, _hoisted_14)
+                            ]),
+                            createBaseVNode("div", _hoisted_15, [
+                              createVNode(_component_el_select, {
+                                modelValue: col.dataType,
+                                "onUpdate:modelValue": ($event) => col.dataType = $event,
+                                size: "small",
+                                class: "type-select",
+                                teleported: false
+                              }, {
+                                default: withCtx(() => [
+                                  (openBlock(true), createElementBlock(Fragment, null, renderList(unref(dataTypes), (dtype) => {
+                                    return openBlock(), createBlock(_component_el_option, {
+                                      key: dtype,
+                                      label: dtype,
+                                      value: dtype
+                                    }, null, 8, ["label", "value"]);
+                                  }), 128))
+                                ]),
+                                _: 2
+                              }, 1032, ["modelValue", "onUpdate:modelValue"])
+                            ])
+                          ])
+                        ]);
+                      }), 128)),
+                      _cache[10] || (_cache[10] = createBaseVNode("th", { class: "actions-header" }, null, -1))
+                    ])
+                  ]),
+                  createBaseVNode("tbody", null, [
+                    (openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (row, rowIndex) => {
+                      return openBlock(), createElementBlock("tr", {
+                        key: row.id,
+                        class: "data-row"
+                      }, [
+                        createBaseVNode("td", _hoisted_16, toDisplayString(rowIndex + 1), 1),
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(columns.value, (col) => {
+                          return openBlock(), createElementBlock("td", {
+                            key: col.id,
+                            class: "data-cell"
+                          }, [
+                            withDirectives(createBaseVNode("input", {
+                              "onUpdate:modelValue": ($event) => row.values[col.id] = $event,
+                              class: "input-cell",
+                              type: "text",
+                              onFocus: _cache[1] || (_cache[1] = ($event) => selectAll($event)),
+                              onKeydown: ($event) => handleCellKeydown($event, row, col)
+                            }, null, 40, _hoisted_17), [
+                              [vModelText, row.values[col.id]]
+                            ])
+                          ]);
+                        }), 128)),
+                        createBaseVNode("td", _hoisted_18, [
+                          createBaseVNode("button", {
+                            class: "delete-row-btn",
+                            title: "Delete row",
+                            onClick: ($event) => deleteRow(row.id)
+                          }, _cache[11] || (_cache[11] = [
+                            createBaseVNode("i", { class: "fas fa-times" }, null, -1)
+                          ]), 8, _hoisted_19)
+                        ])
+                      ]);
+                    }), 128))
+                  ])
                 ])
               ]),
               createVNode(_component_el_collapse_transition, null, {
                 default: withCtx(() => [
-                  showRawData.value ? (openBlock(), createElementBlock("div", _hoisted_12, [
+                  showRawData.value ? (openBlock(), createElementBlock("div", _hoisted_20, [
+                    _cache[14] || (_cache[14] = createBaseVNode("div", { class: "raw-data-header" }, [
+                      createBaseVNode("span", { class: "raw-data-title" }, "JSON Editor"),
+                      createBaseVNode("span", { class: "raw-data-hint" }, "Edit the data as JSON array")
+                    ], -1)),
                     createVNode(_component_el_input, {
                       modelValue: rawDataString.value,
-                      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => rawDataString.value = $event),
+                      "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => rawDataString.value = $event),
                       type: "textarea",
-                      rows: 8,
-                      placeholder: JSON.stringify({ column1: "value1" }, null, 2)
+                      rows: 10,
+                      placeholder: JSON.stringify([{ column1: "value1" }], null, 2),
+                      class: "json-editor"
                     }, null, 8, ["modelValue", "placeholder"]),
-                    createBaseVNode("div", _hoisted_13, [
+                    createBaseVNode("div", _hoisted_21, [
                       createVNode(_component_el_button, {
                         type: "primary",
                         size: "small",
                         onClick: updateTableFromRawData
                       }, {
-                        default: withCtx(() => _cache[6] || (_cache[6] = [
-                          createTextVNode(" Update Table ")
+                        icon: withCtx(() => _cache[12] || (_cache[12] = [
+                          createBaseVNode("i", { class: "fas fa-sync" }, null, -1)
                         ])),
+                        default: withCtx(() => [
+                          _cache[13] || (_cache[13] = createTextVNode(" Apply JSON to Table "))
+                        ]),
                         _: 1,
-                        __: [6]
+                        __: [13]
                       })
                     ])
                   ])) : createCommentVNode("", true)
@@ -388,8 +442,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ManualInput_vue_vue_type_style_index_0_scoped_3b48a5f1_lang = "";
-const ManualInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-3b48a5f1"]]);
+const ManualInput_vue_vue_type_style_index_0_scoped_933b703f_lang = "";
+const ManualInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-933b703f"]]);
 export {
   ManualInput as default
 };

flowfile/web/static/assets/{MultiSelect-0e8724a3.js → MultiSelect-ef28e19e.js}

@@ -1,5 +1,5 @@
-import { _ as _sfc_main } from "./MultiSelect.vue_vue_type_script_setup_true_lang-b0e538c2.js";
-import "./index-5429bbf8.js";
+import { _ as _sfc_main } from "./MultiSelect.vue_vue_type_script_setup_true_lang-83b3bbfd.js";
+import "./index-387a6f18.js";
 export {
   _sfc_main as default
 };