From 7a3c79af3547ecf1cc6203cebe1569cdd9f864c2 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 14 Oct 2024 18:53:49 +0200
Subject: [PATCH] add tool form to node inspector

---
 .../components/Common/DraggableSeparator.vue  | 15 ++++-
 client/src/components/Panels/FlexPanel.vue    |  8 ---
 .../src/components/Workflow/Editor/Index.vue  | 13 ++--
 .../Workflow/Editor/NodeInspector.vue         | 59 ++++++++++++++++---
 4 files changed, 75 insertions(+), 20 deletions(-)

diff --git a/client/src/components/Common/DraggableSeparator.vue b/client/src/components/Common/DraggableSeparator.vue
index 3778da1c413a..f63aa8f397a9 100644
--- a/client/src/components/Common/DraggableSeparator.vue
+++ b/client/src/components/Common/DraggableSeparator.vue
@@ -14,12 +14,14 @@ const props = withDefaults(
         showDelay?: number;
         keyboardStepSize?: number;
         side: "left" | "right";
+        inner?: boolean;
     }>(),
     {
         showDelay: 100,
         keyboardStepSize: 50,
         min: 0,
         max: Infinity,
+        inner: false,
     }
 );
 
@@ -106,7 +108,7 @@ const style = computed(() => ({
     <button
         ref="draggable"
         class="drag-handle"
-        :class="[`side-${props.side}`, { show: showHover }]"
+        :class="[`side-${props.side}`, { show: showHover, inner: props.inner }]"
         :style="style"
         @mouseenter="hoverDraggable = true"
         @focusin="hoverDraggable = true"
@@ -134,6 +136,7 @@ $border-width: 6px;
     padding: 0;
     height: 100%;
     z-index: 10000;
+    top: 0;
 
     --hover-expand: 4px;
 
@@ -144,11 +147,21 @@ $border-width: 6px;
 
     &.side-left {
         left: var(--position);
+
+        &.inner {
+            left: min(var(--position), calc(100% + 1px));
+        }
+
         margin-left: -$border-width;
     }
 
     &.side-right {
         right: var(--position);
+
+        &.inner {
+            right: min(var(--position), calc(100% + 1px));
+        }
+
         margin-right: -$border-width;
     }
 
diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
index 299ee1e70e3c..1dd518b66ed9 100644
--- a/client/src/components/Panels/FlexPanel.vue
+++ b/client/src/components/Panels/FlexPanel.vue
@@ -138,14 +138,6 @@ $border-width: 6px;
         background-color: $border-color;
     }
 
-    &.show-hover {
-        border-color: $brand-info;
-
-        &::after {
-            background-color: $brand-info;
-        }
-    }
-
     &.left {
         border-right-style: solid;
 
diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index 164552cdc141..403f36ae4c0d 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -149,7 +149,15 @@
                     @onChange="onChange"
                     @onRemove="onRemove"
                     @onUpdateStepPosition="onUpdateStepPosition">
-                    <NodeInspector v-if="activeStep" :step="activeStep"></NodeInspector>
+                    <NodeInspector
+                        v-if="activeStep"
+                        :step="activeStep"
+                        :datatypes="datatypes"
+                        @postJobActionsChanged="onChangePostJobActions"
+                        @annotationChanged="onAnnotation"
+                        @labelChanged="onLabel"
+                        @dataChanged="onSetData"
+                        @stepUpdated="updateStep"></NodeInspector>
                 </WorkflowGraph>
             </div>
             <!--FlexPanel side="right">
@@ -536,9 +544,6 @@ export default {
         hasActiveNodeDefault() {
             return this.activeStep && this.activeStep?.type != "tool";
         },
-        hasActiveNodeTool() {
-            return this.activeStep?.type == "tool";
-        },
     },
     watch: {
         id(newId, oldId) {
diff --git a/client/src/components/Workflow/Editor/NodeInspector.vue b/client/src/components/Workflow/Editor/NodeInspector.vue
index 4b506626242f..e646f8f02972 100644
--- a/client/src/components/Workflow/Editor/NodeInspector.vue
+++ b/client/src/components/Workflow/Editor/NodeInspector.vue
@@ -1,18 +1,54 @@
 <script setup lang="ts">
+import { computed, ref } from "vue";
+
 import type { Step } from "@/stores/workflowStepStore";
 
-import Heading from "@/components/Common/Heading.vue";
+import FormTool from "./Forms/FormTool.vue";
+import DraggableSeparator from "@/components/Common/DraggableSeparator.vue";
 
 const props = defineProps<{
     step: Step;
+    datatypes: string[];
+}>();
+
+const emit = defineEmits<{
+    (e: "postJobActionsChanged", id: string, postJobActions: unknown): void;
+    (e: "annotationChanged", id: string, annotation: string): void;
+    (e: "labelChanged", id: string, label: string): void;
+    (e: "dataChanged", id: string, data: unknown): void;
+    (e: "stepUpdated", id: string, step: Step): void;
 }>();
+
+const width = ref(300);
+
+const cssVars = computed(() => ({
+    "--width": `${width.value}px`,
+}));
+
+const isTool = computed(() => props.step.type === "tool");
 </script>
 
 <template>
-    <section class="tool-inspector">
-        <Heading h2 size="md">
-            {{ props.step.name }}
-        </Heading>
+    <section class="tool-inspector" :style="cssVars">
+        <DraggableSeparator
+            inner
+            :position="width"
+            side="right"
+            :min="100"
+            :max="1200"
+            @positionChanged="(v) => (width = v)"></DraggableSeparator>
+
+        <div class="inspector-content">
+            <FormTool
+                v-if="isTool"
+                :step="props.step"
+                :datatypes="props.datatypes"
+                @onSetData="(id, d) => emit('dataChanged', id, d)"
+                @onUpdateStep="(id, s) => emit('stepUpdated', id, s)"
+                @onChangePostJobActions="(id, a) => emit('postJobActionsChanged', id, a)"
+                @onAnnotation="(id, a) => emit('annotationChanged', id, a)"
+                @onLabel="(id, l) => emit('labelChanged', id, l)"></FormTool>
+        </div>
     </section>
 </template>
 
@@ -27,7 +63,11 @@ const props = defineProps<{
     right: 0;
     top: var(--clearance);
     bottom: var(--clearance);
-    width: var(--width);
+    // add border width to node draggable separators width
+    width: calc(var(--width) + 1px);
+    max-width: calc(100% - var(--clearance));
+
+    overflow: hidden;
 
     background-color: $white;
 
@@ -36,6 +76,11 @@ const props = defineProps<{
     border-width: 1px;
     border-style: solid;
     border-radius: 0.5rem 0 0 0.5rem;
-    padding: 0.25rem 0.5rem;
+
+    .inspector-content {
+        overflow-y: auto;
+        height: 100%;
+        padding: 0.5rem 0.5rem;
+    }
 }
 </style>