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

flowfile/web/static/assets/ColumnActionInput-f4189ae0.js

@@ -0,0 +1,330 @@
+import { d as defineComponent, r as ref, B as computed, C as watch, F as onMounted, l as onUnmounted, m as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, t as toDisplayString, p as createVNode, q as withCtx, G as Fragment, H as renderList, y as createBlock, e as createCommentVNode, n as normalizeClass, w as withModifiers, a0 as normalizeStyle, x as unref, at as ElIcon, g as _export_sfc } from "./index-387a6f18.js";
+import { d as delete_default } from "./DesignerView-f64749fb.js";
+import "./PopOver-862d7e28.js";
+import "./index-f0a6e5a5.js";
+import "./vue-codemirror.esm-31ba0e0b.js";
+const _hoisted_1 = { class: "component-container" };
+const _hoisted_2 = { class: "listbox-subtitle" };
+const _hoisted_3 = {
+  key: 0,
+  class: "config-section"
+};
+const _hoisted_4 = {
+  key: 0,
+  class: "config-row"
+};
+const _hoisted_5 = { class: "column-type" };
+const _hoisted_6 = {
+  key: 1,
+  class: "config-row"
+};
+const _hoisted_7 = { class: "column-type" };
+const _hoisted_8 = { class: "column-list-wrapper" };
+const _hoisted_9 = { class: "listbox" };
+const _hoisted_10 = ["onClick", "onContextmenu"];
+const _hoisted_11 = ["onClick"];
+const _hoisted_12 = {
+  key: 2,
+  class: "table-wrapper"
+};
+const _hoisted_13 = { class: "styled-table" };
+const _hoisted_14 = { class: "action-cell" };
+const _hoisted_15 = {
+  key: 3,
+  class: "empty-state"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ColumnActionInput",
+  props: {
+    schema: {
+      type: Object,
+      required: true
+    },
+    modelValue: {
+      type: Object,
+      default: () => ({
+        rows: [],
+        group_by_columns: [],
+        order_by_column: null
+      })
+    },
+    incomingColumns: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const localValue = ref({
+      rows: [],
+      group_by_columns: [],
+      order_by_column: null
+    });
+    const selectedColumns = ref([]);
+    const showContextMenu = ref(false);
+    const contextMenuPosition = ref({ x: 0, y: 0 });
+    const contextMenuRef = ref(null);
+    const firstSelectedIndex = ref(null);
+    const allColumns = computed(() => props.incomingColumns);
+    const filteredColumns = computed(() => {
+      if (!props.schema.data_types || props.schema.data_types === "ALL") {
+        return props.incomingColumns;
+      }
+      if (Array.isArray(props.schema.data_types)) {
+        return props.incomingColumns.filter(
+          (column) => props.schema.data_types.includes(column.data_type)
+        );
+      }
+      return props.incomingColumns;
+    });
+    watch(
+      () => props.modelValue,
+      (newValue) => {
+        if (newValue) {
+          localValue.value = {
+            rows: newValue.rows || [],
+            group_by_columns: newValue.group_by_columns || [],
+            order_by_column: newValue.order_by_column || null
+          };
+        }
+      },
+      { immediate: true, deep: true }
+    );
+    const emitUpdate = () => {
+      emit("update:modelValue", { ...localValue.value });
+    };
+    const generateOutputName = (column, action) => {
+      return props.schema.output_name_template.replace("{column}", column).replace("{action}", action);
+    };
+    const handleColumnClick = (clickedIndex, columnName, event) => {
+      if (event.shiftKey && firstSelectedIndex.value !== null) {
+        const start = Math.min(firstSelectedIndex.value, clickedIndex);
+        const end = Math.max(firstSelectedIndex.value, clickedIndex);
+        selectedColumns.value = filteredColumns.value.slice(start, end + 1).map((col) => col.name);
+      } else {
+        if (selectedColumns.value.length === 1 && selectedColumns.value[0] === columnName) {
+          selectedColumns.value = [];
+          firstSelectedIndex.value = null;
+        } else {
+          firstSelectedIndex.value = clickedIndex;
+          selectedColumns.value = [columnName];
+        }
+      }
+    };
+    const openContextMenu = (columnName, event) => {
+      event.preventDefault();
+      if (!selectedColumns.value.includes(columnName)) {
+        selectedColumns.value = [columnName];
+      }
+      contextMenuPosition.value = { x: event.clientX, y: event.clientY };
+      showContextMenu.value = true;
+    };
+    const addRow = (action) => {
+      selectedColumns.value.forEach((column) => {
+        const newRow = {
+          column,
+          action,
+          output_name: generateOutputName(column, action)
+        };
+        localValue.value.rows.push(newRow);
+      });
+      showContextMenu.value = false;
+      selectedColumns.value = [];
+      emitUpdate();
+    };
+    const removeRow = (index) => {
+      localValue.value.rows.splice(index, 1);
+      emitUpdate();
+    };
+    const updateOutputName = (index) => {
+      const row = localValue.value.rows[index];
+      row.output_name = generateOutputName(row.column, row.action);
+      emitUpdate();
+    };
+    const handleClickOutside = (event) => {
+      var _a;
+      if (!((_a = contextMenuRef.value) == null ? void 0 : _a.contains(event.target))) {
+        showContextMenu.value = false;
+      }
+    };
+    onMounted(() => {
+      window.addEventListener("click", handleClickOutside);
+    });
+    onUnmounted(() => {
+      window.removeEventListener("click", handleClickOutside);
+    });
+    return (_ctx, _cache) => {
+      const _component_el_option = resolveComponent("el-option");
+      const _component_el_select = resolveComponent("el-select");
+      const _component_el_input = resolveComponent("el-input");
+      const _component_el_button = resolveComponent("el-button");
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createBaseVNode("label", _hoisted_2, toDisplayString(__props.schema.label), 1),
+        __props.schema.show_group_by || __props.schema.show_order_by ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          __props.schema.show_group_by ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            _cache[2] || (_cache[2] = createBaseVNode("label", { class: "config-label" }, "Group By (optional)", -1)),
+            createVNode(_component_el_select, {
+              modelValue: localValue.value.group_by_columns,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => localValue.value.group_by_columns = $event),
+              multiple: "",
+              filterable: "",
+              placeholder: "Select columns to group by...",
+              style: { "width": "100%" },
+              onChange: emitUpdate
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(allColumns.value, (column) => {
+                  return openBlock(), createBlock(_component_el_option, {
+                    key: column.name,
+                    label: column.name,
+                    value: column.name
+                  }, {
+                    default: withCtx(() => [
+                      createBaseVNode("span", null, toDisplayString(column.name), 1),
+                      createBaseVNode("span", _hoisted_5, toDisplayString(column.data_type), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["label", "value"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ])) : createCommentVNode("", true),
+          __props.schema.show_order_by ? (openBlock(), createElementBlock("div", _hoisted_6, [
+            _cache[3] || (_cache[3] = createBaseVNode("label", { class: "config-label" }, "Order By (optional)", -1)),
+            createVNode(_component_el_select, {
+              modelValue: localValue.value.order_by_column,
+              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => localValue.value.order_by_column = $event),
+              filterable: "",
+              clearable: "",
+              placeholder: "Select column to order by...",
+              style: { "width": "100%" },
+              onChange: emitUpdate
+            }, {
+              default: withCtx(() => [
+                (openBlock(true), createElementBlock(Fragment, null, renderList(allColumns.value, (column) => {
+                  return openBlock(), createBlock(_component_el_option, {
+                    key: column.name,
+                    label: column.name,
+                    value: column.name
+                  }, {
+                    default: withCtx(() => [
+                      createBaseVNode("span", null, toDisplayString(column.name), 1),
+                      createBaseVNode("span", _hoisted_7, toDisplayString(column.data_type), 1)
+                    ]),
+                    _: 2
+                  }, 1032, ["label", "value"]);
+                }), 128))
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ])) : createCommentVNode("", true)
+        ])) : createCommentVNode("", true),
+        createBaseVNode("div", _hoisted_8, [
+          _cache[4] || (_cache[4] = createBaseVNode("div", { class: "listbox-subtitle" }, "Available Columns", -1)),
+          createBaseVNode("ul", _hoisted_9, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(filteredColumns.value, (column, index) => {
+              return openBlock(), createElementBlock("li", {
+                key: column.name,
+                class: normalizeClass({ "is-selected": selectedColumns.value.includes(column.name) }),
+                onClick: ($event) => handleColumnClick(index, column.name, $event),
+                onContextmenu: withModifiers(($event) => openContextMenu(column.name, $event), ["prevent"])
+              }, toDisplayString(column.name) + " (" + toDisplayString(column.data_type) + ") ", 43, _hoisted_10);
+            }), 128))
+          ])
+        ]),
+        showContextMenu.value ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          ref_key: "contextMenuRef",
+          ref: contextMenuRef,
+          class: "context-menu",
+          style: normalizeStyle({
+            top: contextMenuPosition.value.y + "px",
+            left: contextMenuPosition.value.x + "px"
+          })
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.schema.actions, (action) => {
+            return openBlock(), createElementBlock("button", {
+              key: action.value,
+              onClick: ($event) => addRow(action.value)
+            }, toDisplayString(action.label), 9, _hoisted_11);
+          }), 128))
+        ], 4)) : createCommentVNode("", true),
+        _cache[7] || (_cache[7] = createBaseVNode("div", { class: "listbox-subtitle" }, "Settings", -1)),
+        localValue.value.rows.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_12, [
+          createBaseVNode("table", _hoisted_13, [
+            _cache[5] || (_cache[5] = createBaseVNode("thead", null, [
+              createBaseVNode("tr", null, [
+                createBaseVNode("th", null, "Field"),
+                createBaseVNode("th", null, "Action"),
+                createBaseVNode("th", null, "Output Field Name"),
+                createBaseVNode("th")
+              ])
+            ], -1)),
+            createBaseVNode("tbody", null, [
+              (openBlock(true), createElementBlock(Fragment, null, renderList(localValue.value.rows, (row, index) => {
+                return openBlock(), createElementBlock("tr", { key: index }, [
+                  createBaseVNode("td", null, toDisplayString(row.column), 1),
+                  createBaseVNode("td", null, [
+                    createVNode(_component_el_select, {
+                      modelValue: row.action,
+                      "onUpdate:modelValue": ($event) => row.action = $event,
+                      size: "small",
+                      onChange: ($event) => updateOutputName(index)
+                    }, {
+                      default: withCtx(() => [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.schema.actions, (action) => {
+                          return openBlock(), createBlock(_component_el_option, {
+                            key: action.value,
+                            label: action.label,
+                            value: action.value
+                          }, null, 8, ["label", "value"]);
+                        }), 128))
+                      ]),
+                      _: 2
+                    }, 1032, ["modelValue", "onUpdate:modelValue", "onChange"])
+                  ]),
+                  createBaseVNode("td", null, [
+                    createVNode(_component_el_input, {
+                      modelValue: row.output_name,
+                      "onUpdate:modelValue": ($event) => row.output_name = $event,
+                      size: "small",
+                      onChange: emitUpdate
+                    }, null, 8, ["modelValue", "onUpdate:modelValue"])
+                  ]),
+                  createBaseVNode("td", _hoisted_14, [
+                    createVNode(_component_el_button, {
+                      type: "danger",
+                      circle: "",
+                      onClick: ($event) => removeRow(index)
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(ElIcon), null, {
+                          default: withCtx(() => [
+                            createVNode(unref(delete_default))
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 2
+                    }, 1032, ["onClick"])
+                  ])
+                ]);
+              }), 128))
+            ])
+          ])
+        ])) : (openBlock(), createElementBlock("div", _hoisted_15, _cache[6] || (_cache[6] = [
+          createBaseVNode("p", null, "No rows configured.", -1),
+          createBaseVNode("p", { class: "hint" }, "Right-click on a column above to add a row.", -1)
+        ])))
+      ]);
+    };
+  }
+});
+const ColumnActionInput_vue_vue_type_style_index_0_scoped_d3070256_lang = "";
+const ColumnActionInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d3070256"]]);
+export {
+  ColumnActionInput as default
+};

flowfile/web/static/assets/{ColumnSelector-47996a16.css → ColumnSelector-371637fb.css}

@@ -1,9 +1,9 @@
 
-.required-indicator[data-v-ee9d221e] {
+.required-indicator[data-v-1ae42a66] {
   color: #f56c6c;
   margin-left: 4px;
 }
-.column-type[data-v-ee9d221e] {
+.column-type[data-v-1ae42a66] {
   font-size: 0.75rem;
   color: #909399;
   margin-left: 8px;

flowfile/web/static/assets/{ColumnSelector-4685e75d.js → ColumnSelector-e66b33da.js}

@@ -1,4 +1,4 @@
-import { d as defineComponent, l as computed, b as resolveComponent, c as openBlock, e as createElementBlock, p as createBaseVNode, g as createTextVNode, t as toDisplayString, i as createCommentVNode, f as createVNode, w as withCtx, F as Fragment, q as renderList, h as createBlock, _ as _export_sfc } from "./index-5429bbf8.js";
+import { d as defineComponent, B as computed, m as resolveComponent, o as openBlock, c as createElementBlock, a as createBaseVNode, f as createTextVNode, t as toDisplayString, e as createCommentVNode, p as createVNode, q as withCtx, G as Fragment, H as renderList, y as createBlock, g as _export_sfc } from "./index-387a6f18.js";
 const _hoisted_1 = { class: "component-container" };
 const _hoisted_2 = { class: "listbox-subtitle" };
 const _hoisted_3 = {
@@ -26,8 +26,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props) {
     const props = __props;
     const filteredColumns = computed(() => {
-      console.log("props.schem.data_types", props.schema);
-      console.log("incoming columns", props.incomingColumns);
       if (!props.schema.data_types || props.schema.data_types === "ALL") {
         return props.incomingColumns;
       }
@@ -76,8 +74,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const ColumnSelector_vue_vue_type_style_index_0_scoped_ee9d221e_lang = "";
-const ColumnSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ee9d221e"]]);
+const ColumnSelector_vue_vue_type_style_index_0_scoped_1ae42a66_lang = "";
+const ColumnSelector = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1ae42a66"]]);
 export {
   ColumnSelector as default
 };

flowfile/web/static/assets/ContextMenu-49463352.js

@@ -0,0 +1,9 @@
+import "./index-387a6f18.js";
+import "./DesignerView-f64749fb.js";
+import { _ as _sfc_main } from "./ContextMenu.vue_vue_type_script_setup_true_lang-a1bd6314.js";
+import "./PopOver-862d7e28.js";
+import "./index-f0a6e5a5.js";
+import "./vue-codemirror.esm-31ba0e0b.js";
+export {
+  _sfc_main as default
+};

flowfile/web/static/assets/ContextMenu-dd5f3f25.js

@@ -0,0 +1,9 @@
+import "./index-387a6f18.js";
+import "./DesignerView-f64749fb.js";
+import { _ as _sfc_main } from "./ContextMenu.vue_vue_type_script_setup_true_lang-a1bd6314.js";
+import "./PopOver-862d7e28.js";
+import "./index-f0a6e5a5.js";
+import "./vue-codemirror.esm-31ba0e0b.js";
+export {
+  _sfc_main as default
+};

flowfile/web/static/assets/ContextMenu-f709b884.js

@@ -0,0 +1,9 @@
+import "./index-387a6f18.js";
+import "./DesignerView-f64749fb.js";
+import { _ as _sfc_main } from "./ContextMenu.vue_vue_type_script_setup_true_lang-a1bd6314.js";
+import "./PopOver-862d7e28.js";
+import "./index-f0a6e5a5.js";
+import "./vue-codemirror.esm-31ba0e0b.js";
+export {
+  _sfc_main as default
+};

flowfile/web/static/assets/ContextMenu.vue_vue_type_script_setup_true_lang-a1bd6314.js

@@ -0,0 +1,59 @@
+import { d as defineComponent, r as ref, F as onMounted, l as onUnmounted, o as openBlock, c as createElementBlock, a as createBaseVNode, G as Fragment, H as renderList, n as normalizeClass, t as toDisplayString, a0 as normalizeStyle } from "./index-387a6f18.js";
+const _hoisted_1 = ["onClick"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ContextMenu",
+  props: {
+    position: {},
+    options: {}
+  },
+  emits: ["select", "close"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    const menuRef = ref(null);
+    const selectOption = (option) => {
+      if (option.disabled)
+        return;
+      emit("select", option.action);
+      emit("close");
+    };
+    const handleClickOutside = (event) => {
+      if (menuRef.value && !menuRef.value.contains(event.target)) {
+        emit("close");
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        emit("close");
+      }
+    };
+    onMounted(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleKeyDown);
+    });
+    onUnmounted(() => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "menuRef",
+        ref: menuRef,
+        class: "context-menu",
+        style: normalizeStyle({ top: _ctx.position.y + "px", left: _ctx.position.x + "px" })
+      }, [
+        createBaseVNode("ul", null, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.options, (option) => {
+            return openBlock(), createElementBlock("li", {
+              key: option.action,
+              class: normalizeClass({ disabled: option.disabled, danger: option.danger }),
+              onClick: ($event) => selectOption(option)
+            }, toDisplayString(option.label), 11, _hoisted_1);
+          }), 128))
+        ])
+      ], 4);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

flowfile/web/static/assets/{CrossJoin-702a3edd.js → CrossJoin-24694b8f.js}

@@ -1,10 +1,12 @@
-import { C as CodeLoader } from "./vue-content-loader.es-2c8e608f.js";
-import { u as useNodeStore } from "./vue-codemirror.esm-41b0e0d7.js";
-import { s as selectDynamic } from "./selectDynamic-92e25ee3.js";
-import { G as GenericNodeSettings } from "./genericNodeSettings-4fe5f36b.js";
-import { d as defineComponent, r as ref, c as openBlock, e as createElementBlock, f as createVNode, w as withCtx, p as createBaseVNode, h as createBlock, u as unref, _ as _export_sfc } from "./index-5429bbf8.js";
-import "./UnavailableFields-a03f512c.js";
-import "./designer-9633482a.js";
+import { C as CodeLoader } from "./vue-content-loader.es-4469c8ff.js";
+import { u as useNodeStore } from "./PopOver-862d7e28.js";
+import { d as defineComponent, r as ref, o as openBlock, c as createElementBlock, p as createVNode, q as withCtx, a as createBaseVNode, y as createBlock, x as unref, g as _export_sfc } from "./index-387a6f18.js";
+import { s as selectDynamic } from "./selectDynamic-6b4b0767.js";
+import { G as GenericNodeSettings } from "./genericNodeSettings-14eac1c3.js";
+import "./UnavailableFields-b72a2c72.js";
+import "./DesignerView-f64749fb.js";
+import "./index-f0a6e5a5.js";
+import "./vue-codemirror.esm-31ba0e0b.js";
 const _hoisted_1 = { key: 0 };
 const _hoisted_2 = { class: "listbox-wrapper" };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -65,7 +67,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   "show-title": true,
                   "show-data": true,
                   title: "Right data",
-                  onUpdateSelectInputs: _cache[1] || (_cache[1] = (updatedInputs) => updateSelectInputsHandler(updatedInputs, true))
+                  onUpdateSelectInputs: _cache[1] || (_cache[1] = (updatedInputs) => updateSelectInputsHandler(updatedInputs, false))
                 }, null, 8, ["select-inputs"])
               ])
             ];
@@ -76,8 +78,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const CrossJoin_vue_vue_type_style_index_0_scoped_e594e542_lang = "";
-const CrossJoin = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e594e542"]]);
+const CrossJoin_vue_vue_type_style_index_0_scoped_46e97305_lang = "";
+const CrossJoin = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-46e97305"]]);
 export {
   CrossJoin as default
 };

flowfile/web/static/assets/{CrossJoin-1119d18e.css → CrossJoin-71b4cc10.css}

@@ -1,20 +1,20 @@
 
-.selectors-row[data-v-e594e542] {
+.selectors-row[data-v-46e97305] {
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px; /* Spacing between rows */
 }
-.context-menu[data-v-e594e542] {
+.context-menu[data-v-46e97305] {
   position: fixed;
   z-index: 1000;
   border: 1px solid #ccc;
-  background-color: white;
+  background-color: var(--color-background-primary);
   padding: 8px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
   border-radius: 4px;
   user-select: none;
 }
-.context-menu button[data-v-e594e542] {
+.context-menu button[data-v-46e97305] {
   display: block;
   background: none;
   border: none;
@@ -24,57 +24,57 @@
   cursor: pointer;
   z-index: 100;
 }
-.context-menu button[data-v-e594e542]:hover {
+.context-menu button[data-v-46e97305]:hover {
   background-color: #f0f0f0;
 }
-.table-wrapper[data-v-e594e542] {
+.table-wrapper[data-v-46e97305] {
   max-height: 250px; /* Adjust this value as needed */
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* subtle shadow for depth */
   border-radius: 8px; /* rounded corners */
   overflow: auto; /* ensures the rounded corners are applied to the child elements */
   margin: 5px; /* adds a small margin around the table */
 }
-.context-menu[data-v-e594e542] {
+.context-menu[data-v-46e97305] {
   position: fixed;
   z-index: 1000;
   border: 1px solid #ccc;
-  background-color: white;
+  background-color: var(--color-background-primary);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
   border-radius: 4px;
 }
-.context-menu ul[data-v-e594e542] {
+.context-menu ul[data-v-46e97305] {
   list-style: none;
   padding: 0;
   margin: 0;
 }
-.context-menu li[data-v-e594e542] {
+.context-menu li[data-v-46e97305] {
   padding: 8px 16px;
   cursor: pointer;
 }
-.context-menu li[data-v-e594e542]:hover {
+.context-menu li[data-v-46e97305]:hover {
   background-color: #f0f0f0;
 }
-.selectors-container[data-v-e594e542] {
+.selectors-container[data-v-46e97305] {
   display: flex;
   flex-direction: column;
 }
-.selectors-row[data-v-e594e542] {
+.selectors-row[data-v-46e97305] {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
-.add-button-container[data-v-e594e542] {
+.add-button-container[data-v-46e97305] {
   padding-left: 20px; /* Adjust as needed */
   display: flex;
   align-items: center;
 }
-.action-buttons[data-v-e594e542] {
+.action-buttons[data-v-46e97305] {
   display: flex;
   align-items: center;
   justify-content: flex-end; /* Adjust if needed */
 }
-.remove-join-button[data-v-e594e542],
-.add-join-button[data-v-e594e542] {
+.remove-join-button[data-v-46e97305],
+.add-join-button[data-v-46e97305] {
   cursor: pointer;
   margin-left: 10px; /* Space between buttons */
   padding: 0 6px; /* Adjust padding */
@@ -83,17 +83,17 @@
   min-width: 30px; /* Minimum width to ensure buttons don't shrink */
   text-align: center; /* Ensure the symbols are centered */
 }
-.selectors-header[data-v-e594e542] {
+.selectors-header[data-v-46e97305] {
   display: flex;
   justify-content: space-between;
   padding: 0 15px; /* Adjust padding for finer control */
 }
-.selectors-title[data-v-e594e542] {
+.selectors-title[data-v-46e97305] {
   flex: 1; /* Adjust this based on your needs */
   text-align: center; /* Center the titles */
   padding: 0 10px; /* Add padding to ensure alignment with the columns below */
 }
-.action-buttons[data-v-e594e542] {
+.action-buttons[data-v-46e97305] {
   flex-basis: 60px; /* Adjust according to the width of your buttons */
   display: flex;
   justify-content: center; /* Center the buttons within the action column */