From a2c2bb7d99f0929673aaf6178d8f93ec614a0a72 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 7 Jul 2023 08:02:01 +0200
Subject: [PATCH 01/25] add readonly mode to workflow graph

---
 client/src/components/Workflow/Editor/Draggable.vue  | 10 ++++++++--
 .../src/components/Workflow/Editor/DraggablePan.vue  |  5 +++++
 client/src/components/Workflow/Editor/Node.vue       | 11 ++++++++---
 client/src/components/Workflow/Editor/NodeInput.vue  |  6 +++++-
 client/src/components/Workflow/Editor/NodeOutput.vue | 12 +++++++++++-
 .../src/components/Workflow/Editor/WorkflowGraph.vue |  2 ++
 6 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Workflow/Editor/Draggable.vue b/client/src/components/Workflow/Editor/Draggable.vue
index 6be9f539e40c..d3922e0423f3 100644
--- a/client/src/components/Workflow/Editor/Draggable.vue
+++ b/client/src/components/Workflow/Editor/Draggable.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ZoomTransform } from "d3-zoom";
 import type { Ref } from "vue";
-import { inject, PropType, reactive, ref } from "vue";
+import { computed, inject, PropType, reactive, ref } from "vue";
 
 import { useAnimationFrameSize } from "@/composables/sensors/animationFrameSize";
 import { useAnimationFrameThrottle } from "@/composables/throttle";
@@ -26,6 +26,10 @@ const props = defineProps({
         required: false,
         default: null,
     },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 const emit = defineEmits(["mousedown", "mouseup", "move", "dragstart", "start", "stop"]);
@@ -93,7 +97,9 @@ const onEnd = (position: Position, event: DragEvent) => {
     emit("stop");
 };
 
-useDraggable(draggable, {
+const maybeDraggable = computed(() => (props.disabled ? null : draggable.value));
+
+useDraggable(maybeDraggable, {
     preventDefault: props.preventDefault,
     stopPropagation: props.stopPropagation,
     useCapture: false,
diff --git a/client/src/components/Workflow/Editor/DraggablePan.vue b/client/src/components/Workflow/Editor/DraggablePan.vue
index dafc1759f50f..c4b3204cdf6d 100644
--- a/client/src/components/Workflow/Editor/DraggablePan.vue
+++ b/client/src/components/Workflow/Editor/DraggablePan.vue
@@ -27,6 +27,10 @@ const props = defineProps({
         required: false,
         default: null,
     },
+    disabled: {
+        tyoe: Boolean,
+        default: false,
+    },
 });
 
 type Size = { width: number; height: number };
@@ -148,6 +152,7 @@ function onMouseUp(e: MouseEvent) {
         :prevent-default="preventDefault"
         :stop-propagation="stopPropagation"
         :drag-data="dragData"
+        :disabled="disabled"
         @move="onMove"
         @mouseup="onMouseUp"
         v-on="$listeners">
diff --git a/client/src/components/Workflow/Editor/Node.vue b/client/src/components/Workflow/Editor/Node.vue
index 1c2ce3144148..3b0720fdb8a8 100644
--- a/client/src/components/Workflow/Editor/Node.vue
+++ b/client/src/components/Workflow/Editor/Node.vue
@@ -8,13 +8,14 @@
         :node-label="title"
         :class="classes"
         :style="style"
+        :disabled="readonly"
         @move="onMoveTo"
         @pan-by="onPanBy">
         <div class="node-header unselectable clearfix" @click="makeActive" @keyup.enter="makeActive">
             <b-button-group class="float-right">
                 <LoadingSpan v-if="isLoading" spinner-only />
                 <b-button
-                    v-if="canClone"
+                    v-if="canClone && !readonly"
                     v-b-tooltip.hover
                     class="node-clone py-0"
                     variant="primary"
@@ -25,6 +26,7 @@
                     <i class="fa fa-files-o" />
                 </b-button>
                 <b-button
+                    v-if="!readonly"
                     v-b-tooltip.hover
                     class="node-destroy py-0"
                     variant="primary"
@@ -35,7 +37,7 @@
                     <i class="fa fa-times" />
                 </b-button>
                 <b-button
-                    v-if="isEnabled"
+                    v-if="isEnabled && !readonly"
                     :id="popoverId"
                     class="node-recommendations py-0"
                     variant="primary"
@@ -44,7 +46,7 @@
                     <i class="fa fa-arrow-right" />
                 </b-button>
                 <b-popover
-                    v-if="isEnabled"
+                    v-if="isEnabled && !readonly"
                     :target="popoverId"
                     triggers="hover"
                     placement="bottom"
@@ -84,6 +86,7 @@
                 :scroll="scroll"
                 :scale="scale"
                 :parent-node="elHtml"
+                :readonly="readonly"
                 @onChange="onChange" />
             <div v-if="showRule" class="rule" />
             <NodeOutput
@@ -100,6 +103,7 @@
                 :scale="scale"
                 :datatypes-mapper="datatypesMapper"
                 :parent-node="elHtml"
+                :readonly="readonly"
                 @onDragConnector="onDragConnector"
                 @stopDragging="onStopDragging"
                 @onChange="onChange" />
@@ -152,6 +156,7 @@ const props = defineProps({
     scroll: { type: Object as PropType<UseScrollReturn>, required: true },
     scale: { type: Number, default: 1 },
     highlight: { type: Boolean, default: false },
+    readonly: { type: Boolean, default: false },
 });
 
 const emit = defineEmits([
diff --git a/client/src/components/Workflow/Editor/NodeInput.vue b/client/src/components/Workflow/Editor/NodeInput.vue
index 48fc498ee0a2..3906d75251f9 100644
--- a/client/src/components/Workflow/Editor/NodeInput.vue
+++ b/client/src/components/Workflow/Editor/NodeInput.vue
@@ -10,7 +10,7 @@
             <div :id="iconId" ref="el" v-b-tooltip.manual class="icon" :title="reason" />
         </div>
         <div
-            v-if="showRemove"
+            v-if="showRemove && !readonly"
             v-b-tooltip.hover
             :title="reason"
             class="delete-terminal"
@@ -74,6 +74,10 @@ export default {
             type: HTMLElement,
             default: null,
         },
+        readonly: {
+            type: Boolean,
+            default: false,
+        },
     },
     setup(props) {
         const el = ref(null);
diff --git a/client/src/components/Workflow/Editor/NodeOutput.vue b/client/src/components/Workflow/Editor/NodeOutput.vue
index e5cefe525a1f..def6fe1c7dc9 100644
--- a/client/src/components/Workflow/Editor/NodeOutput.vue
+++ b/client/src/components/Workflow/Editor/NodeOutput.vue
@@ -40,6 +40,7 @@ const props = defineProps<{
     scale: number;
     datatypesMapper: DatatypesMapperModel;
     parentNode: HTMLElement | null;
+    readonly: boolean;
 }>();
 
 const emit = defineEmits(["pan-by", "stopDragging", "onDragConnector"]);
@@ -124,6 +125,10 @@ async function toggleChildComponent() {
 }
 
 function onToggleActive() {
+    if (props.readonly) {
+        return;
+    }
+
     const step = stepStore.getStep(stepId.value);
     assertDefined(step);
     let stepWorkflowOutputs = [...(step.workflow_outputs || [])];
@@ -138,6 +143,10 @@ function onToggleActive() {
 }
 
 function onToggleVisible() {
+    if (props.readonly) {
+        return;
+    }
+
     const actionKey = `HideDatasetAction${props.output.name}`;
     const step = { ...ensureDefined(stepStore.getStep(stepId.value)) };
     if (isVisible.value) {
@@ -338,7 +347,8 @@ const removeTagsAction = computed(() => {
             :prevent-default="false"
             :stop-propagation="true"
             :drag-data="{ stepId: stepId, output: effectiveOutput }"
-            draggable="true"
+            :draggable="!readonly"
+            :disabled="readonly"
             @pan-by="onPanBy"
             @start="isDragging = true"
             @stop="onStopDragging"
diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
index 15d007fcd123..0876fc1d0399 100644
--- a/client/src/components/Workflow/Editor/WorkflowGraph.vue
+++ b/client/src/components/Workflow/Editor/WorkflowGraph.vue
@@ -28,6 +28,7 @@
                     :root-offset="elementBounding"
                     :scroll="scroll"
                     :scale="scale"
+                    :readonly="readonly"
                     @pan-by="panBy"
                     @stopDragging="onStopDragging"
                     @onDragConnector="onDragConnector"
@@ -73,6 +74,7 @@ const props = defineProps({
     datatypesMapper: { type: DatatypesMapperModel, required: true },
     highlightId: { type: null as unknown as PropType<number | null>, default: null },
     scrollToId: { type: null as unknown as PropType<number | null>, default: null },
+    readonly: { type: Boolean, default: false },
 });
 
 const stateStore = useWorkflowStateStore();

From 7508fc15535dd30c8b7461b63c367712037d9f9a Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 27 Jul 2023 08:44:33 +0200
Subject: [PATCH 02/25] modularize workflow styles

---
 .../Workflow/Editor/ConnectionMenu.vue        |   6 +
 .../src/components/Workflow/Editor/Index.vue  |  15 +-
 .../src/components/Workflow/Editor/Node.vue   |  61 ++++-
 .../components/Workflow/Editor/NodeInput.vue  |  14 +-
 .../components/Workflow/Editor/NodeOutput.vue |   6 +-
 .../Workflow/Editor/Recommendations.vue       |  14 +
 .../Workflow/Editor/WorkflowGraph.vue         |  31 ++-
 .../Workflow/Editor/WorkflowMinimap.vue       |  54 +++-
 .../Workflow/Editor/_nodeStyle.scss           | 108 ++++++++
 client/src/style/scss/base.scss               |   1 -
 client/src/style/scss/workflow.scss           | 250 ------------------
 11 files changed, 285 insertions(+), 275 deletions(-)
 create mode 100644 client/src/components/Workflow/Editor/_nodeStyle.scss
 delete mode 100644 client/src/style/scss/workflow.scss

diff --git a/client/src/components/Workflow/Editor/ConnectionMenu.vue b/client/src/components/Workflow/Editor/ConnectionMenu.vue
index 63c7e1bed780..c21f58d0c8ea 100644
--- a/client/src/components/Workflow/Editor/ConnectionMenu.vue
+++ b/client/src/components/Workflow/Editor/ConnectionMenu.vue
@@ -130,3 +130,9 @@ function toggleConnection(inputObject: InputObject) {
     }
 }
 </script>
+
+<style scoped lang="scss">
+#input-choices-menu {
+    color: black;
+}
+</style>
diff --git a/client/src/components/Workflow/Editor/Index.vue b/client/src/components/Workflow/Editor/Index.vue
index 9fd7781babc7..a0b4f33788d6 100644
--- a/client/src/components/Workflow/Editor/Index.vue
+++ b/client/src/components/Workflow/Editor/Index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="isCanvas" id="columns" class="workflow-client d-flex">
+    <div v-if="isCanvas" id="columns" class="d-flex">
         <StateUpgradeModal :state-messages="stateMessages" />
         <StateUpgradeModal
             :state-messages="insertedStateMessages"
@@ -36,7 +36,7 @@
                 @onInsertWorkflow="onInsertWorkflow"
                 @onInsertWorkflowSteps="onInsertWorkflowSteps" />
         </FlexPanel>
-        <div id="center" class="workflow-center overflow-auto w-100">
+        <div id="center" class="workflow-center">
             <div class="unified-panel-header" unselectable="on">
                 <div class="unified-panel-header-inner">
                     <span class="sr-only">Workflow Editor</span>
@@ -63,7 +63,7 @@
             </WorkflowGraph>
         </div>
         <FlexPanel side="right">
-            <div class="unified-panel workflow-panel">
+            <div class="unified-panel bg-white">
                 <div class="unified-panel-header" unselectable="on">
                     <div class="unified-panel-header-inner">
                         <WorkflowOptions
@@ -733,4 +733,13 @@ export default {
     cursor: pointer;
     z-index: 1002;
 }
+
+.workflow-center {
+    z-index: 0;
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    overflow: auto;
+    width: 100%;
+}
 </style>
diff --git a/client/src/components/Workflow/Editor/Node.vue b/client/src/components/Workflow/Editor/Node.vue
index 3b0720fdb8a8..0f769389152b 100644
--- a/client/src/components/Workflow/Editor/Node.vue
+++ b/client/src/components/Workflow/Editor/Node.vue
@@ -2,6 +2,7 @@
     <DraggableWrapper
         :id="idString"
         ref="el"
+        class="workflow-node card"
         :scale="scale"
         :root-offset="rootOffset"
         :name="name"
@@ -11,7 +12,10 @@
         :disabled="readonly"
         @move="onMoveTo"
         @pan-by="onPanBy">
-        <div class="node-header unselectable clearfix" @click="makeActive" @keyup.enter="makeActive">
+        <div
+            class="node-header unselectable clearfix card-header py-1 px-2"
+            @click="makeActive"
+            @keyup.enter="makeActive">
             <b-button-group class="float-right">
                 <LoadingSpan v-if="isLoading" spinner-only />
                 <b-button
@@ -71,10 +75,15 @@
             </span>
             <span class="node-title">{{ title }}</span>
         </div>
-        <b-alert v-if="!!errors" variant="danger" show class="node-error" @click="makeActive">
+        <b-alert
+            v-if="!!errors"
+            variant="danger"
+            show
+            class="node-error m-0 rounded-0 rounded-bottom"
+            @click="makeActive">
             {{ errors }}
         </b-alert>
-        <div v-else class="node-body" @click="makeActive" @keyup.enter="makeActive">
+        <div v-else class="node-body card-body p-0 mx-2" @click="makeActive" @keyup.enter="makeActive">
             <NodeInput
                 v-for="(input, index) in inputs"
                 :key="`in-${index}-${input.name}`"
@@ -205,7 +214,6 @@ const isEnabled = getGalaxyInstance().config.enable_tool_recommendations; // get
 const isActive = computed(() => props.id === props.activeNodeId);
 const classes = computed(() => {
     return {
-        "workflow-node": true,
         "node-on-scroll-to": scrolledTo.value,
         "node-highlight": props.highlight || isActive.value,
         "is-active": isActive.value,
@@ -283,3 +291,48 @@ function makeActive() {
     emit("onActivate", props.id);
 }
 </script>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+
+.workflow-node {
+    position: absolute;
+    z-index: 100;
+    width: $workflow-node-width;
+    border: solid $brand-primary 1px;
+
+    &.node-highlight {
+        z-index: 1001;
+        border: solid $white 1px;
+        box-shadow: 0 0 0 2px $brand-primary;
+    }
+
+    &.node-on-scroll-to {
+        z-index: 1001;
+        border: solid $white 1px;
+        box-shadow: 0 0 0 4px $brand-primary;
+        transition: box-shadow 0.5s ease-in-out;
+    }
+
+    &.node-active {
+        z-index: 1001;
+        border: solid $white 1px;
+        box-shadow: 0 0 0 3px $brand-primary;
+    }
+
+    .node-header {
+        cursor: move;
+        background: $brand-primary;
+        color: $white;
+    }
+
+    .node-body {
+        .rule {
+            height: 0;
+            border: none;
+            border-bottom: dotted $brand-primary 1px;
+            margin: 0 5px;
+        }
+    }
+}
+</style>
diff --git a/client/src/components/Workflow/Editor/NodeInput.vue b/client/src/components/Workflow/Editor/NodeInput.vue
index 3906d75251f9..5bcf6de18581 100644
--- a/client/src/components/Workflow/Editor/NodeInput.vue
+++ b/client/src/components/Workflow/Editor/NodeInput.vue
@@ -1,5 +1,11 @@
 <template>
-    <div :class="rowClass" @mouseleave="leave" @mouseenter="enter" @focusin="enter" @focusout="leave">
+    <div
+        class="workflow-editor-node-terminal"
+        :class="rowClass"
+        @mouseleave="leave"
+        @mouseenter="enter"
+        @focusin="enter"
+        @focusout="leave">
         <div
             :id="id"
             :input-name="input.name"
@@ -228,11 +234,11 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @import "theme/blue.scss";
-@import "~@fortawesome/fontawesome-free/scss/_variables";
+@import "nodeStyle";
 
-.input-required {
+.workflow-editor-node-terminal .input-required {
     margin-top: $margin-v * 0.25;
     margin-bottom: $margin-v * 0.25;
     color: $brand-danger;
diff --git a/client/src/components/Workflow/Editor/NodeOutput.vue b/client/src/components/Workflow/Editor/NodeOutput.vue
index def6fe1c7dc9..c855c2688825 100644
--- a/client/src/components/Workflow/Editor/NodeOutput.vue
+++ b/client/src/components/Workflow/Editor/NodeOutput.vue
@@ -295,7 +295,7 @@ const removeTagsAction = computed(() => {
 </script>
 
 <template>
-    <div class="d-flex" :class="rowClass" :data-output-name="output.name">
+    <div class="d-flex workflow-editor-node-terminal" :class="rowClass" :data-output-name="output.name">
         <div class="d-flex flex-column w-100">
             <div class="d-flex flex-row">
                 <div
@@ -371,3 +371,7 @@ const removeTagsAction = computed(() => {
         </DraggableWrapper>
     </div>
 </template>
+
+<style lang="scss">
+@import "nodeStyle";
+</style>
diff --git a/client/src/components/Workflow/Editor/Recommendations.vue b/client/src/components/Workflow/Editor/Recommendations.vue
index 0c43186059ef..fe14efd13460 100644
--- a/client/src/components/Workflow/Editor/Recommendations.vue
+++ b/client/src/components/Workflow/Editor/Recommendations.vue
@@ -131,3 +131,17 @@ export default {
     },
 };
 </script>
+
+<style scoped lang="scss">
+@import "theme/blue.scss";
+
+.workflow-recommendations {
+    display: block;
+    height: 30rem;
+
+    .header-background {
+        border-bottom: solid 1px $brand-primary;
+        margin-bottom: 0.5rem;
+    }
+}
+</style>
diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
index 0876fc1d0399..c93b95de6824 100644
--- a/client/src/components/Workflow/Editor/WorkflowGraph.vue
+++ b/client/src/components/Workflow/Editor/WorkflowGraph.vue
@@ -1,12 +1,7 @@
 <template>
     <div id="workflow-canvas" class="unified-panel-body workflow-canvas">
         <ZoomControl :zoom-level="scale" :pan="transform" @onZoom="onZoom" @update:pan="panBy" />
-        <div
-            id="canvas-container"
-            ref="canvas"
-            class="canvas-content position-relative"
-            @drop.prevent
-            @dragover.prevent>
+        <div id="canvas-container" ref="canvas" class="canvas-content" @drop.prevent @dragover.prevent>
             <AdaptiveGrid
                 :viewport-bounds="elementBounding"
                 :viewport-bounding-box="viewportBoundingBox"
@@ -158,3 +153,27 @@ const canvasStyle = computed(() => {
     return { transform: `translate(${transform.value.x}px, ${transform.value.y}px) scale(${transform.value.k})` };
 });
 </script>
+
+<style scoped land="scss">
+.workflow-canvas {
+    position: relative;
+
+    .canvas-content {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        left: 0px;
+        top: 0px;
+        overflow: hidden;
+    }
+
+    .node-area {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        transform-origin: 0 0;
+    }
+}
+</style>
diff --git a/client/src/components/Workflow/Editor/WorkflowMinimap.vue b/client/src/components/Workflow/Editor/WorkflowMinimap.vue
index ef17b40c14fe..d2765208a5c6 100644
--- a/client/src/components/Workflow/Editor/WorkflowMinimap.vue
+++ b/client/src/components/Workflow/Editor/WorkflowMinimap.vue
@@ -305,11 +305,53 @@ useDraggable(canvas, {
 @import "~bootstrap/scss/_functions.scss";
 @import "theme/blue.scss";
 
-.workflow-overview-body {
-    --node-color: #{$brand-primary};
-    --error-color: #{$state-danger-bg};
-    --selected-outline-color: #{$brand-primary};
-    --view-color: #{fade-out($brand-dark, 0.8)};
-    --view-outline-color: #{$brand-info};
+.workflow-overview {
+    --workflow-overview-size: 150px;
+    --workflow-overview-min-size: 50px;
+    --workflow-overview-max-size: 300px;
+    --workflow-overview-padding: 7px;
+    --workflow-overview-border: 1px;
+
+    border-top-left-radius: 0.3rem;
+    cursor: nwse-resize;
+    position: absolute;
+    width: var(--workflow-overview-size);
+    height: var(--workflow-overview-size);
+    right: 0px;
+    bottom: 0px;
+    border-top: solid $border-color var(--workflow-overview-border);
+    border-left: solid $border-color var(--workflow-overview-border);
+    background: $workflow-overview-bg no-repeat url("assets/images/resizable.png");
+    z-index: 20000;
+    overflow: hidden;
+    padding: var(--workflow-overview-padding) 0 0 var(--workflow-overview-padding);
+
+    // account for padding and border
+    max-width: calc(
+        var(--workflow-overview-max-size) + var(--workflow-overview-padding) + var(--workflow-overview-border)
+    );
+    max-height: calc(
+        var(--workflow-overview-max-size) + var(--workflow-overview-padding) + var(--workflow-overview-border)
+    );
+    min-width: calc(
+        var(--workflow-overview-min-size) + var(--workflow-overview-padding) + var(--workflow-overview-border)
+    );
+    min-height: calc(
+        var(--workflow-overview-min-size) + var(--workflow-overview-padding) + var(--workflow-overview-border)
+    );
+
+    .workflow-overview-body {
+        cursor: pointer;
+        position: relative;
+        overflow: hidden;
+        width: 100%;
+        height: 100%;
+
+        --node-color: #{$brand-primary};
+        --error-color: #{$state-danger-bg};
+        --selected-outline-color: #{$brand-primary};
+        --view-color: #{fade-out($brand-dark, 0.8)};
+        --view-outline-color: #{$brand-info};
+    }
 }
 </style>
diff --git a/client/src/components/Workflow/Editor/_nodeStyle.scss b/client/src/components/Workflow/Editor/_nodeStyle.scss
new file mode 100644
index 000000000000..2c66d5a61d56
--- /dev/null
+++ b/client/src/components/Workflow/Editor/_nodeStyle.scss
@@ -0,0 +1,108 @@
+@import "~bootstrap/scss/_functions.scss";
+@import "theme/blue.scss";
+@import "~bootstrap/scss/bootstrap.scss";
+
+$fa-font-path: "../../../../../node_modules/@fortawesome/fontawesome-free/webfonts/";
+@import "~@fortawesome/fontawesome-free/scss/fontawesome";
+@import "~@fortawesome/fontawesome-free/scss/brands";
+@import "~@fortawesome/fontawesome-free/scss/regular";
+@import "~@fortawesome/fontawesome-free/scss/solid";
+@import "~@fortawesome/fontawesome-free/scss/v4-shims";
+@import "~@fortawesome/fontawesome-free/scss/_variables";
+
+.workflow-editor-node-terminal {
+    .base-terminal {
+        @extend .fa;
+        @extend .fa-circle;
+        @extend .mt-1;
+        color: $brand-light;
+        position: absolute;
+        .icon {
+            @extend .fa;
+            @extend .fa-chevron-circle-right;
+            color: $brand-primary;
+            position: absolute;
+            left: 0px;
+            top: 0px;
+        }
+    }
+
+    .input-terminal {
+        @extend .base-terminal;
+        left: -0.65rem;
+    }
+
+    .output-terminal {
+        @extend .base-terminal;
+        right: -0.65rem;
+        &:hover > .icon {
+            color: $brand-success;
+        }
+    }
+
+    .input-terminal.multiple {
+        font-size: 1.2rem;
+        left: -0.8rem;
+        top: 3px;
+    }
+
+    .output-terminal.multiple {
+        font-size: 1.2rem;
+        right: -0.8rem;
+        bottom: 6px;
+    }
+
+    .input-terminal-active.can-accept > .icon {
+        color: $brand-success;
+    }
+
+    .input-terminal-active.cannot-accept > .icon {
+        color: $brand-warning;
+    }
+
+    .drag-terminal {
+        @extend .fa;
+        @extend .fa-circle;
+        color: $brand-success;
+        position: absolute;
+    }
+
+    .mark-terminal {
+        @extend .far;
+        @extend .fa-square;
+        color: $brand-primary;
+        cursor: pointer;
+        &.mark-terminal-active {
+            @extend .fa;
+            @extend .fa-check-square;
+        }
+        &.mark-terminal-visible {
+            @extend .fa;
+            @extend .fa-eye;
+        }
+        &.mark-terminal-hidden {
+            @extend .fa;
+            @extend .fa-eye-slash;
+        }
+    }
+
+    .delete-terminal {
+        @extend .btn;
+        @extend .btn-sm;
+        @extend .btn-danger;
+        @extend .fa;
+        @extend .fa-minus-circle;
+        @extend .p-1;
+        @extend .mt-1;
+        cursor: pointer;
+        position: absolute;
+        z-index: 2500;
+        top: 2px;
+        left: -0.8rem;
+    }
+
+    .callout-terminal {
+        @extend .float-left;
+        @extend .mr-1;
+    }
+}
diff --git a/client/src/style/scss/base.scss b/client/src/style/scss/base.scss
index 2a3cb110d1cc..436e3d963829 100644
--- a/client/src/style/scss/base.scss
+++ b/client/src/style/scss/base.scss
@@ -38,7 +38,6 @@ $fa-font-path: "../../../node_modules/@fortawesome/fontawesome-free/webfonts/";
 @import "message.scss";
 @import "markdown.scss";
 @import "toolshed.scss";
-@import "workflow.scss";
 @import "multiselect.scss";
 @import "icon-btn.scss";
 @import "peek-columns.scss";
diff --git a/client/src/style/scss/workflow.scss b/client/src/style/scss/workflow.scss
deleted file mode 100644
index d78e1b4b4002..000000000000
--- a/client/src/style/scss/workflow.scss
+++ /dev/null
@@ -1,250 +0,0 @@
-.canvas-svg {
-    // not sure if hack or not ...
-    overflow: visible;
-    display: block;
-}
-
-.node-area {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    transform-origin: 0 0;
-}
-.workflow-client {
-    .workflow-panel {
-        background: $white;
-    }
-    .workflow-center {
-        z-index: 0;
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        .workflow-recommendations {
-            height: 30rem;
-        }
-        .workflow-node {
-            @extend .card;
-            @extend .position-absolute;
-            z-index: 100;
-            width: $workflow-node-width;
-            border: solid $brand-primary 1px;
-            &.node-highlight {
-                z-index: 1001;
-                border: solid $white 1px;
-                box-shadow: 0 0 0 2px $brand-primary;
-            }
-            &.node-on-scroll-to {
-                z-index: 1001;
-                border: solid $white 1px;
-                box-shadow: 0 0 0 4px $brand-primary;
-                transition: box-shadow 0.5s ease-in-out;
-            }
-            &.node-active {
-                z-index: 1001;
-                border: solid $white 1px;
-                box-shadow: 0 0 0 3px $brand-primary;
-            }
-            .node-header {
-                @extend .card-header;
-                @extend .py-1;
-                @extend .px-2;
-                cursor: move;
-                background: $brand-primary;
-                color: $white;
-            }
-            .node-error {
-                @extend .m-0;
-                @extend .rounded-0;
-                @extend .rounded-bottom;
-            }
-            .node-body {
-                @extend .card-body;
-                @extend .p-0;
-                @extend .mx-2;
-                .rule {
-                    height: 0;
-                    border: none;
-                    border-bottom: dotted $brand-primary 1px;
-                    margin: 0 5px;
-                }
-            }
-        }
-        .workflow-canvas {
-            // Set the position to relative, so that absolute position coordinates are relative to the canvas (and not the top of the iframe)
-            position: relative;
-
-            .canvas-content {
-                width: 100%;
-                height: 100%;
-                position: absolute;
-                left: 0px;
-                top: 0px;
-                overflow: hidden;
-            }
-            .base-terminal {
-                @extend .fa;
-                @extend .fa-circle;
-                @extend .mt-1;
-                color: $brand-light;
-                position: absolute;
-                .icon {
-                    @extend .fa;
-                    @extend .fa-chevron-circle-right;
-                    color: $brand-primary;
-                    position: absolute;
-                    left: 0px;
-                    top: 0px;
-                }
-            }
-            .input-terminal {
-                @extend .base-terminal;
-                left: -0.65rem;
-            }
-            .output-terminal {
-                @extend .base-terminal;
-                right: -0.65rem;
-                &:hover > .icon {
-                    color: $brand-success;
-                }
-            }
-            .input-terminal.multiple {
-                font-size: 1.2rem;
-                left: -0.8rem;
-                top: 3px;
-            }
-            .output-terminal.multiple {
-                font-size: 1.2rem;
-                right: -0.8rem;
-                bottom: 6px;
-            }
-            .input-terminal-active.can-accept > .icon {
-                color: $brand-success;
-            }
-            .input-terminal-active.cannot-accept > .icon {
-                color: $brand-warning;
-            }
-            .drag-terminal {
-                @extend .fa;
-                @extend .fa-circle;
-                color: $brand-success;
-                position: absolute;
-            }
-            .mark-terminal {
-                @extend .far;
-                @extend .fa-square;
-                color: $brand-primary;
-                cursor: pointer;
-                &.mark-terminal-active {
-                    @extend .fa;
-                    @extend .fa-check-square;
-                }
-                &.mark-terminal-visible {
-                    @extend .fa;
-                    @extend .fa-eye;
-                }
-                &.mark-terminal-hidden {
-                    @extend .fa;
-                    @extend .fa-eye-slash;
-                }
-            }
-            .delete-terminal {
-                @extend .btn;
-                @extend .btn-sm;
-                @extend .btn-danger;
-                @extend .fa;
-                @extend .fa-minus-circle;
-                @extend .p-1;
-                @extend .mt-1;
-                cursor: pointer;
-                position: absolute;
-                z-index: 2500;
-                top: 2px;
-                left: -0.8rem;
-            }
-            .callout-terminal {
-                @extend .float-left;
-                @extend .mr-1;
-            }
-            .workflow-overview {
-                --workflow-overview-size: 150px;
-                --workflow-overview-min-size: 50px;
-                --workflow-overview-max-size: 300px;
-                --workflow-overview-padding: 7px;
-                --workflow-overview-border: 1px;
-
-                border-top-left-radius: 0.3rem;
-                cursor: nwse-resize;
-                position: absolute;
-                width: var(--workflow-overview-size);
-                height: var(--workflow-overview-size);
-                right: 0px;
-                bottom: 0px;
-                border-top: solid $border-color var(--workflow-overview-border);
-                border-left: solid $border-color var(--workflow-overview-border);
-                background: $workflow-overview-bg no-repeat url("../../assets/images/resizable.png");
-                z-index: 20000;
-                overflow: hidden;
-                padding: var(--workflow-overview-padding) 0 0 var(--workflow-overview-padding);
-
-                // account for padding and border
-                max-width: calc(
-                    var(--workflow-overview-max-size) + var(--workflow-overview-padding) +
-                        var(--workflow-overview-border)
-                );
-                max-height: calc(
-                    var(--workflow-overview-max-size) + var(--workflow-overview-padding) +
-                        var(--workflow-overview-border)
-                );
-                min-width: calc(
-                    var(--workflow-overview-min-size) + var(--workflow-overview-padding) +
-                        var(--workflow-overview-border)
-                );
-                min-height: calc(
-                    var(--workflow-overview-min-size) + var(--workflow-overview-padding) +
-                        var(--workflow-overview-border)
-                );
-
-                .workflow-overview-body {
-                    cursor: pointer;
-                    position: relative;
-                    overflow: hidden;
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-            #input-choices-menu {
-                color: black;
-            }
-        }
-        .workflow-report-body {
-            display: flex;
-        }
-        #overview-container {
-            position: absolute;
-        }
-        #overview-canvas {
-            width: 100%;
-            height: 100%;
-        }
-        #overview-viewport {
-            @extend .rounded;
-            position: absolute;
-            width: 0px;
-            height: 0px;
-            border: solid $brand-info 3px;
-            background: $white;
-            opacity: 0.8;
-            z-index: 10;
-        }
-    }
-}
-
-.workflow-recommendations {
-    display: block;
-    .header-background {
-        border-bottom: solid 1px $brand-primary;
-        margin-bottom: 0.5rem;
-    }
-}

From 90baa31f64975b76e35dc5dca301ef6c4b285538 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 28 Jul 2023 03:07:51 +0200
Subject: [PATCH 03/25] display activityBar in Published refactor Published to
 composition

---
 client/src/components/Common/Published.vue | 113 +++++++++++----------
 1 file changed, 61 insertions(+), 52 deletions(-)

diff --git a/client/src/components/Common/Published.vue b/client/src/components/Common/Published.vue
index dff84be865ce..9453cbe701ea 100644
--- a/client/src/components/Common/Published.vue
+++ b/client/src/components/Common/Published.vue
@@ -1,5 +1,65 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useRoute } from "vue-router/composables";
+
+import { useUserStore } from "@/stores/userStore";
+
+import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
+import LoadingSpan from "@/components/LoadingSpan.vue";
+import FlexPanel from "@/components/Panels/FlexPanel.vue";
+import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
+import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
+
+const props = defineProps({
+    item: {
+        type: Object,
+        required: true,
+    },
+});
+
+const modelTitle = computed(() => {
+    const modelClass = props.item.model_class ?? "Item";
+    if (modelClass == "StoredWorkflow") {
+        return "Workflow";
+    }
+    return modelClass;
+});
+
+const plural = computed(() => {
+    if (modelTitle.value === "History") {
+        return "Histories";
+    }
+    return `${modelTitle.value}s`;
+});
+
+const gravatarSource = computed(() => `https://secure.gravatar.com/avatar/${props.item.email_hash}?d=identicon`);
+const owner = computed(() => props.item.owner ?? props.item.username ?? "Unavailable");
+const pluralPath = computed(() => plural.value.toLowerCase());
+const publishedByUser = computed(() => `/${pluralPath.value}/list_published?f-username=${owner.value}`);
+const urlAll = computed(() => `/${pluralPath.value}/list_published`);
+
+const userStore = useUserStore();
+const route = useRoute();
+
+const showPanels = computed(() => {
+    const panels = route.query.hide_panels;
+    if (panels !== undefined && panels !== null && typeof panels === "string") {
+        return panels.toLowerCase() != "true";
+    }
+    return true;
+});
+
+const showActivityBar = computed(() => {
+    return userStore.showActivityBar && !userStore.isAnonymous;
+});
+</script>
+
 <template>
     <div id="columns" class="d-flex">
+        <ActivityBar v-if="showPanels && showActivityBar" />
+        <FlexPanel v-if="showPanels && !showActivityBar" side="left">
+            <ToolBox />
+        </FlexPanel>
         <div id="center" class="m-3 w-100 overflow-auto">
             <slot />
         </div>
@@ -8,7 +68,7 @@
                 <h1 class="h-sm">About this {{ modelTitle }}</h1>
                 <h2 class="h-md text-break">{{ item.title || item.name }}</h2>
                 <img :src="gravatarSource" alt="user avatar" />
-                <StatelessTags v-if="item.tags" class="tags mt-2" :value="item.tags" :disabled="true" />
+                <StatelessTags v-if="item.tags" class="tags mt-2" :value="item.tags" disabled />
                 <br />
                 <h2 class="h-sm">Author</h2>
                 <div>{{ owner }}</div>
@@ -26,54 +86,3 @@
         </FlexPanel>
     </div>
 </template>
-
-<script>
-import LoadingSpan from "components/LoadingSpan";
-import { StatelessTags } from "components/Tags";
-
-import FlexPanel from "@/components/Panels/FlexPanel.vue";
-
-export default {
-    components: {
-        FlexPanel,
-        LoadingSpan,
-        StatelessTags,
-    },
-    props: {
-        item: {
-            type: Object,
-            required: true,
-        },
-    },
-    computed: {
-        gravatarSource() {
-            return `https://secure.gravatar.com/avatar/${this.item.email_hash}?d=identicon`;
-        },
-        modelTitle() {
-            const modelClass = this.item ? this.item.model_class : "Item";
-            if (modelClass == "StoredWorkflow") {
-                return "Workflow";
-            }
-            return modelClass;
-        },
-        owner() {
-            return this.item.owner || this.item.username || "Unavailable";
-        },
-        plural() {
-            if (this.modelTitle == "History") {
-                return "Histories";
-            }
-            return `${this.modelTitle}s`;
-        },
-        pluralPath() {
-            return this.plural.toLowerCase();
-        },
-        publishedByUser() {
-            return `/${this.pluralPath}/list_published?f-username=${this.owner}`;
-        },
-        urlAll() {
-            return `/${this.pluralPath}/list_published`;
-        },
-    },
-};
-</script>

From 218d710e220ad49067472a221ecbc55bee929e30 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 28 Jul 2023 03:10:10 +0200
Subject: [PATCH 04/25] add prop types

---
 client/src/components/Common/Published.vue | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/client/src/components/Common/Published.vue b/client/src/components/Common/Published.vue
index 9453cbe701ea..12578d890527 100644
--- a/client/src/components/Common/Published.vue
+++ b/client/src/components/Common/Published.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed, type PropType } from "vue";
 import { useRoute } from "vue-router/composables";
 
 import { useUserStore } from "@/stores/userStore";
@@ -10,9 +10,19 @@ import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 
+interface Item {
+    name: string;
+    model_class?: string;
+    owner?: string;
+    username?: string;
+    email_hash?: string;
+    tags?: string[];
+    title?: string;
+}
+
 const props = defineProps({
     item: {
-        type: Object,
+        type: Object as PropType<Item>,
         required: true,
     },
 });
@@ -66,9 +76,9 @@ const showActivityBar = computed(() => {
         <FlexPanel side="right">
             <div v-if="modelTitle" class="m-3">
                 <h1 class="h-sm">About this {{ modelTitle }}</h1>
-                <h2 class="h-md text-break">{{ item.title || item.name }}</h2>
+                <h2 class="h-md text-break">{{ props.item.title ?? props.item.name }}</h2>
                 <img :src="gravatarSource" alt="user avatar" />
-                <StatelessTags v-if="item.tags" class="tags mt-2" :value="item.tags" disabled />
+                <StatelessTags v-if="props.item.tags" class="tags mt-2" :value="props.item.tags" disabled />
                 <br />
                 <h2 class="h-sm">Author</h2>
                 <div>{{ owner }}</div>

From 92e8761496c998753975a8f66b8f717322328fb1 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 28 Jul 2023 03:13:21 +0200
Subject: [PATCH 05/25] rename Published to PublishedItem

---
 .../Common/{Published.vue => PublishedItem.vue} |  0
 .../src/components/History/HistoryPublished.vue | 11 ++++++-----
 .../src/components/PageDisplay/PageDisplay.vue  | 17 ++++++++---------
 .../Visualizations/VisualizationPublished.vue   | 13 +++++++------
 .../components/Workflow/WorkflowPublished.vue   | 13 +++++++------
 5 files changed, 28 insertions(+), 26 deletions(-)
 rename client/src/components/Common/{Published.vue => PublishedItem.vue} (100%)

diff --git a/client/src/components/Common/Published.vue b/client/src/components/Common/PublishedItem.vue
similarity index 100%
rename from client/src/components/Common/Published.vue
rename to client/src/components/Common/PublishedItem.vue
diff --git a/client/src/components/History/HistoryPublished.vue b/client/src/components/History/HistoryPublished.vue
index 7b0689103714..5571014674cc 100644
--- a/client/src/components/History/HistoryPublished.vue
+++ b/client/src/components/History/HistoryPublished.vue
@@ -1,19 +1,20 @@
 <template>
-    <Published :item="history">
+    <PublishedItem :item="history">
         <template v-slot>
             <HistoryView :id="id" />
         </template>
-    </Published>
+    </PublishedItem>
 </template>
 
 <script>
-import Published from "components/Common/Published";
-import HistoryView from "components/History/HistoryView";
 import { urlData } from "utils/url";
 
+import PublishedItem from "@/components/Common/PublishedItem.vue";
+import HistoryView from "@/components/History/HistoryView.vue";
+
 export default {
     components: {
-        Published,
+        PublishedItem,
         HistoryView,
     },
     props: {
diff --git a/client/src/components/PageDisplay/PageDisplay.vue b/client/src/components/PageDisplay/PageDisplay.vue
index c224f0bdf52c..6b7fb048ee26 100644
--- a/client/src/components/PageDisplay/PageDisplay.vue
+++ b/client/src/components/PageDisplay/PageDisplay.vue
@@ -1,5 +1,5 @@
 <template>
-    <Published :item="page">
+    <PublishedItem :item="page">
         <template v-slot>
             <div v-if="isConfigLoaded">
                 <Markdown
@@ -13,24 +13,23 @@
             </div>
             <b-alert v-else variant="info" show>Unsupported page format.</b-alert>
         </template>
-    </Published>
+    </PublishedItem>
 </template>
 
 <script>
-import Published from "components/Common/Published";
-import Markdown from "components/Markdown/Markdown";
-import { withPrefix } from "utils/redirect";
-import { urlData } from "utils/url";
-
 import { useConfig } from "@/composables/config";
+import { withPrefix } from "@/utils/redirect";
+import { urlData } from "@/utils/url";
 
-import PageHtml from "./PageHtml";
+import PageHtml from "./PageHtml.vue";
+import PublishedItem from "@/components/Common/PublishedItem.vue";
+import Markdown from "@/components/Markdown/Markdown.vue";
 
 export default {
     components: {
         Markdown,
         PageHtml,
-        Published,
+        PublishedItem,
     },
     props: {
         pageId: {
diff --git a/client/src/components/Visualizations/VisualizationPublished.vue b/client/src/components/Visualizations/VisualizationPublished.vue
index 9ed33e20e9e9..1b562347a08d 100644
--- a/client/src/components/Visualizations/VisualizationPublished.vue
+++ b/client/src/components/Visualizations/VisualizationPublished.vue
@@ -1,20 +1,21 @@
 <template>
-    <Published :item="visualization">
+    <PublishedItem :item="visualization">
         <template v-slot>
             <CenterFrame :src="getUrl" />
         </template>
-    </Published>
+    </PublishedItem>
 </template>
 
 <script>
-import Published from "components/Common/Published";
-import CenterFrame from "entry/analysis/modules/CenterFrame";
-import { urlData } from "utils/url";
+import { urlData } from "@/utils/url";
+
+import PublishedItem from "@/components/Common/PublishedItem.vue";
+import CenterFrame from "@/entry/analysis/modules/CenterFrame.vue";
 
 export default {
     components: {
         CenterFrame,
-        Published,
+        PublishedItem,
     },
     props: {
         id: {
diff --git a/client/src/components/Workflow/WorkflowPublished.vue b/client/src/components/Workflow/WorkflowPublished.vue
index a841ebe2ebdc..16bee4d42279 100644
--- a/client/src/components/Workflow/WorkflowPublished.vue
+++ b/client/src/components/Workflow/WorkflowPublished.vue
@@ -1,19 +1,20 @@
 <template>
-    <Published :item="workflow">
+    <PublishedItem :item="workflow">
         <template v-slot>
             <WorkflowDisplay :workflow-id="id" :expanded="true" />
         </template>
-    </Published>
+    </PublishedItem>
 </template>
 
 <script>
-import Published from "components/Common/Published";
-import WorkflowDisplay from "components/Markdown/Elements/Workflow/WorkflowDisplay";
-import { urlData } from "utils/url";
+import { urlData } from "@/utils/url";
+
+import PublishedItem from "@/components/Common/PublishedItem.vue";
+import WorkflowDisplay from "@/components/Markdown/Elements/Workflow/WorkflowDisplay.vue";
 
 export default {
     components: {
-        Published,
+        PublishedItem,
         WorkflowDisplay,
     },
     props: {

From 80f4223211319105cd1f10ef92b75da62f891f36 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 28 Jul 2023 04:20:05 +0200
Subject: [PATCH 06/25] add readonly workflow display

---
 .../src/components/Common/PublishedItem.vue   |  14 +-
 .../components/Workflow/WorkflowPublished.vue | 128 +++++++++++++-----
 client/src/stores/workflowStore.ts            |   2 +-
 3 files changed, 104 insertions(+), 40 deletions(-)

diff --git a/client/src/components/Common/PublishedItem.vue b/client/src/components/Common/PublishedItem.vue
index 12578d890527..ed3c04ffbb22 100644
--- a/client/src/components/Common/PublishedItem.vue
+++ b/client/src/components/Common/PublishedItem.vue
@@ -22,13 +22,13 @@ interface Item {
 
 const props = defineProps({
     item: {
-        type: Object as PropType<Item>,
-        required: true,
+        type: Object as PropType<Item | null>,
+        default: null,
     },
 });
 
 const modelTitle = computed(() => {
-    const modelClass = props.item.model_class ?? "Item";
+    const modelClass = props.item?.model_class ?? "Item";
     if (modelClass == "StoredWorkflow") {
         return "Workflow";
     }
@@ -42,8 +42,8 @@ const plural = computed(() => {
     return `${modelTitle.value}s`;
 });
 
-const gravatarSource = computed(() => `https://secure.gravatar.com/avatar/${props.item.email_hash}?d=identicon`);
-const owner = computed(() => props.item.owner ?? props.item.username ?? "Unavailable");
+const gravatarSource = computed(() => `https://secure.gravatar.com/avatar/${props.item?.email_hash}?d=identicon`);
+const owner = computed(() => props.item?.owner ?? props.item?.username ?? "Unavailable");
 const pluralPath = computed(() => plural.value.toLowerCase());
 const publishedByUser = computed(() => `/${pluralPath.value}/list_published?f-username=${owner.value}`);
 const urlAll = computed(() => `/${pluralPath.value}/list_published`);
@@ -76,9 +76,9 @@ const showActivityBar = computed(() => {
         <FlexPanel side="right">
             <div v-if="modelTitle" class="m-3">
                 <h1 class="h-sm">About this {{ modelTitle }}</h1>
-                <h2 class="h-md text-break">{{ props.item.title ?? props.item.name }}</h2>
+                <h2 class="h-md text-break">{{ props.item?.title ?? props.item?.name }}</h2>
                 <img :src="gravatarSource" alt="user avatar" />
-                <StatelessTags v-if="props.item.tags" class="tags mt-2" :value="props.item.tags" disabled />
+                <StatelessTags v-if="props.item?.tags" class="tags mt-2" :value="props.item.tags" disabled />
                 <br />
                 <h2 class="h-sm">Author</h2>
                 <div>{{ owner }}</div>
diff --git a/client/src/components/Workflow/WorkflowPublished.vue b/client/src/components/Workflow/WorkflowPublished.vue
index 16bee4d42279..62e47b3539ee 100644
--- a/client/src/components/Workflow/WorkflowPublished.vue
+++ b/client/src/components/Workflow/WorkflowPublished.vue
@@ -1,38 +1,102 @@
-<template>
-    <PublishedItem :item="workflow">
-        <template v-slot>
-            <WorkflowDisplay :workflow-id="id" :expanded="true" />
-        </template>
-    </PublishedItem>
-</template>
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import axios, { type AxiosError } from "axios";
+import { ref, watch } from "vue";
 
-<script>
-import { urlData } from "@/utils/url";
+import { useDatatypesMapper } from "@/composables/datatypesMapper";
+import type { Workflow } from "@/stores/workflowStore";
+import { assertDefined } from "@/utils/assertions";
 
+import WorkflowGraph from "./Editor/WorkflowGraph.vue";
+import Heading from "@/components/Common/Heading.vue";
 import PublishedItem from "@/components/Common/PublishedItem.vue";
-import WorkflowDisplay from "@/components/Markdown/Elements/Workflow/WorkflowDisplay.vue";
 
-export default {
-    components: {
-        PublishedItem,
-        WorkflowDisplay,
-    },
-    props: {
-        id: {
-            type: String,
-            required: true,
-        },
-    },
-    data() {
-        return {
-            workflow: {},
-        };
-    },
-    created() {
-        const url = `/api/workflows/${this.id}`;
-        urlData({ url }).then((data) => {
-            this.workflow = data;
-        });
+library.add(faSpinner);
+
+const props = defineProps<{
+    id: string;
+}>();
+
+const workflowInfo = ref<
+    | {
+          name: string;
+          [key: string]: unknown;
+      }
+    | undefined
+>();
+
+const workflow = ref<Workflow | null>(null);
+
+const loading = ref(true);
+const errored = ref(false);
+const errorMessage = ref("");
+
+const { datatypesMapper } = useDatatypesMapper();
+
+watch(
+    () => props.id,
+    async (id) => {
+        workflowInfo.value = undefined;
+        loading.value = true;
+        errored.value = false;
+        errorMessage.value = "";
+
+        try {
+            const [{ data: workflowInfoData }, { data: fullWorkflow }] = await Promise.all([
+                axios.get(`/api/workflows/${id}`),
+                axios.get(`/api/workflows/${id}/download`),
+            ]);
+
+            assertDefined(workflowInfoData.name);
+
+            workflowInfo.value = workflowInfoData;
+            workflow.value = fullWorkflow;
+        } catch (e) {
+            const error = e as AxiosError<{ err_msg?: string }>;
+
+            if (error.response?.data.err_msg) {
+                errorMessage.value = error.response.data.err_msg;
+            }
+
+            errored.value = true;
+        } finally {
+            loading.value = false;
+        }
     },
-};
+    {
+        immediate: true,
+    }
+);
 </script>
+
+<template>
+    <PublishedItem :item="workflowInfo">
+        <template v-slot>
+            <div v-if="loading">
+                <Heading h1 separator>
+                    <FontAwesomeIcon icon="fa-spinner" spin />
+                    Loading Workflow
+                </Heading>
+            </div>
+            <div v-else-if="errored">
+                <Heading h1 separator> Failed to load published Workflow </Heading>
+
+                <b-alert v-if="errorMessage" show variant="danger">
+                    {{ errorMessage }}
+                </b-alert>
+                <b-alert v-else show variant="danger"> Unknown Error </b-alert>
+            </div>
+            <div v-else-if="workflowInfo">
+                <Heading h1 separator>{{ workflowInfo.name }}</Heading>
+
+                <WorkflowGraph
+                    v-if="workflow && datatypesMapper"
+                    :steps="workflow.steps"
+                    :datatypes-mapper="datatypesMapper"
+                    readonly></WorkflowGraph>
+            </div>
+        </template>
+    </PublishedItem>
+</template>
diff --git a/client/src/stores/workflowStore.ts b/client/src/stores/workflowStore.ts
index a890b44749a1..7ee0f1ea16cb 100644
--- a/client/src/stores/workflowStore.ts
+++ b/client/src/stores/workflowStore.ts
@@ -5,7 +5,7 @@ import { computed, ref, set } from "vue";
 import { getAppRoot } from "@/onload/loadConfig";
 import type { Steps } from "@/stores/workflowStepStore";
 
-interface Workflow {
+export interface Workflow {
     [index: string]: any;
     steps: Steps;
 }

From 8a39031435407e2780ab93b18c82cc3ea27fbd4b Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 31 Jul 2023 04:20:21 +0200
Subject: [PATCH 07/25] add workflow stores fix workflow data url

---
 .../src/components/Common/PublishedItem.vue   |  2 +-
 .../Workflow/Editor/WorkflowGraph.vue         |  4 +--
 .../components/Workflow/WorkflowPublished.vue | 25 ++++++++++++++++---
 client/src/stores/workflowStore.ts            |  1 +
 4 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Common/PublishedItem.vue b/client/src/components/Common/PublishedItem.vue
index ed3c04ffbb22..6a38e7a550d2 100644
--- a/client/src/components/Common/PublishedItem.vue
+++ b/client/src/components/Common/PublishedItem.vue
@@ -70,7 +70,7 @@ const showActivityBar = computed(() => {
         <FlexPanel v-if="showPanels && !showActivityBar" side="left">
             <ToolBox />
         </FlexPanel>
-        <div id="center" class="m-3 w-100 overflow-auto">
+        <div id="center" class="m-3 w-100 overflow-auto d-flex flex-column">
             <slot />
         </div>
         <FlexPanel side="right">
diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
index c93b95de6824..3f9b13a41521 100644
--- a/client/src/components/Workflow/Editor/WorkflowGraph.vue
+++ b/client/src/components/Workflow/Editor/WorkflowGraph.vue
@@ -67,8 +67,8 @@ const emit = defineEmits(["transform", "graph-offset", "onRemove", "scrollTo"]);
 const props = defineProps({
     steps: { type: Object as PropType<{ [index: string]: Step }>, required: true },
     datatypesMapper: { type: DatatypesMapperModel, required: true },
-    highlightId: { type: null as unknown as PropType<number | null>, default: null },
-    scrollToId: { type: null as unknown as PropType<number | null>, default: null },
+    highlightId: { type: Number as PropType<number | null>, default: null },
+    scrollToId: { type: Number as PropType<number | null>, default: null },
     readonly: { type: Boolean, default: false },
 });
 
diff --git a/client/src/components/Workflow/WorkflowPublished.vue b/client/src/components/Workflow/WorkflowPublished.vue
index 62e47b3539ee..ac2fff2d07d6 100644
--- a/client/src/components/Workflow/WorkflowPublished.vue
+++ b/client/src/components/Workflow/WorkflowPublished.vue
@@ -3,12 +3,17 @@ import { library } from "@fortawesome/fontawesome-svg-core";
 import { faSpinner } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios, { type AxiosError } from "axios";
-import { ref, watch } from "vue";
+import { onUnmounted, ref, watch } from "vue";
 
 import { useDatatypesMapper } from "@/composables/datatypesMapper";
+import { useConnectionStore } from "@/stores/workflowConnectionStore";
+import { useWorkflowStateStore } from "@/stores/workflowEditorStateStore";
+import { useWorkflowStepStore } from "@/stores/workflowStepStore";
 import type { Workflow } from "@/stores/workflowStore";
 import { assertDefined } from "@/utils/assertions";
 
+import { fromSimple } from "./Editor/modules/model";
+
 import WorkflowGraph from "./Editor/WorkflowGraph.vue";
 import Heading from "@/components/Common/Heading.vue";
 import PublishedItem from "@/components/Common/PublishedItem.vue";
@@ -35,6 +40,16 @@ const errorMessage = ref("");
 
 const { datatypesMapper } = useDatatypesMapper();
 
+const connectionsStore = useConnectionStore();
+const stepStore = useWorkflowStepStore();
+const stateStore = useWorkflowStateStore();
+
+onUnmounted(() => {
+    connectionsStore.$reset();
+    stepStore.$reset();
+    stateStore.$reset();
+});
+
 watch(
     () => props.id,
     async (id) => {
@@ -46,13 +61,15 @@ watch(
         try {
             const [{ data: workflowInfoData }, { data: fullWorkflow }] = await Promise.all([
                 axios.get(`/api/workflows/${id}`),
-                axios.get(`/api/workflows/${id}/download`),
+                axios.get(`/workflow/load_workflow?_=true&id=${id}`),
             ]);
 
             assertDefined(workflowInfoData.name);
 
             workflowInfo.value = workflowInfoData;
             workflow.value = fullWorkflow;
+
+            fromSimple(fullWorkflow);
         } catch (e) {
             const error = e as AxiosError<{ err_msg?: string }>;
 
@@ -88,14 +105,14 @@ watch(
                 </b-alert>
                 <b-alert v-else show variant="danger"> Unknown Error </b-alert>
             </div>
-            <div v-else-if="workflowInfo">
+            <div v-else-if="workflowInfo" class="d-flex flex-column">
                 <Heading h1 separator>{{ workflowInfo.name }}</Heading>
 
                 <WorkflowGraph
                     v-if="workflow && datatypesMapper"
                     :steps="workflow.steps"
                     :datatypes-mapper="datatypesMapper"
-                    readonly></WorkflowGraph>
+                    readonly />
             </div>
         </template>
     </PublishedItem>
diff --git a/client/src/stores/workflowStore.ts b/client/src/stores/workflowStore.ts
index 7ee0f1ea16cb..59f320adb013 100644
--- a/client/src/stores/workflowStore.ts
+++ b/client/src/stores/workflowStore.ts
@@ -6,6 +6,7 @@ import { getAppRoot } from "@/onload/loadConfig";
 import type { Steps } from "@/stores/workflowStepStore";
 
 export interface Workflow {
+    name: string;
     [index: string]: any;
     steps: Steps;
 }

From 22e8ac977d190191c84fec47fce0bb1e2d6cf6ce Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 31 Jul 2023 06:38:11 +0200
Subject: [PATCH 08/25] set d3 initial scale

---
 client/src/components/Workflow/Editor/WorkflowGraph.vue | 5 ++++-
 client/src/components/Workflow/WorkflowPublished.vue    | 2 ++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Workflow/Editor/WorkflowGraph.vue b/client/src/components/Workflow/Editor/WorkflowGraph.vue
index 3f9b13a41521..57f16ce86f9d 100644
--- a/client/src/components/Workflow/Editor/WorkflowGraph.vue
+++ b/client/src/components/Workflow/Editor/WorkflowGraph.vue
@@ -79,7 +79,10 @@ const canvas: Ref<HTMLElement | null> = ref(null);
 
 const elementBounding = useElementBounding(canvas, { windowResize: false, windowScroll: false });
 const scroll = useScroll(canvas);
-const { transform, panBy, setZoom, moveTo } = useD3Zoom(1, minZoom, maxZoom, canvas, scroll, { x: 20, y: 20 });
+const { transform, panBy, setZoom, moveTo } = useD3Zoom(scale.value, minZoom, maxZoom, canvas, scroll, {
+    x: 20,
+    y: 20,
+});
 const { viewportBoundingBox } = useViewportBoundingBox(elementBounding, scale, transform);
 
 const isDragging = ref(false);
diff --git a/client/src/components/Workflow/WorkflowPublished.vue b/client/src/components/Workflow/WorkflowPublished.vue
index ac2fff2d07d6..d814dd5e02a1 100644
--- a/client/src/components/Workflow/WorkflowPublished.vue
+++ b/client/src/components/Workflow/WorkflowPublished.vue
@@ -44,6 +44,8 @@ const connectionsStore = useConnectionStore();
 const stepStore = useWorkflowStepStore();
 const stateStore = useWorkflowStateStore();
 
+stateStore.setScale(0.5);
+
 onUnmounted(() => {
     connectionsStore.$reset();
     stepStore.$reset();

From c970cfd62d0429c27a83b131ae759829b1fd0d79 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 31 Jul 2023 06:44:40 +0200
Subject: [PATCH 09/25] display workflow preview in a box

---
 .../components/Workflow/WorkflowPublished.vue | 22 +++++++++++++------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowPublished.vue b/client/src/components/Workflow/WorkflowPublished.vue
index d814dd5e02a1..99e348d2e07b 100644
--- a/client/src/components/Workflow/WorkflowPublished.vue
+++ b/client/src/components/Workflow/WorkflowPublished.vue
@@ -108,14 +108,22 @@ watch(
                 <b-alert v-else show variant="danger"> Unknown Error </b-alert>
             </div>
             <div v-else-if="workflowInfo" class="d-flex flex-column">
-                <Heading h1 separator>{{ workflowInfo.name }}</Heading>
-
-                <WorkflowGraph
-                    v-if="workflow && datatypesMapper"
-                    :steps="workflow.steps"
-                    :datatypes-mapper="datatypesMapper"
-                    readonly />
+                <Heading h1 separator>Published Workflow</Heading>
+
+                <b-card class="workflow-card">
+                    <WorkflowGraph
+                        v-if="workflow && datatypesMapper"
+                        :steps="workflow.steps"
+                        :datatypes-mapper="datatypesMapper"
+                        readonly />
+                </b-card>
             </div>
         </template>
     </PublishedItem>
 </template>
+
+<style scoped lang="scss">
+.workflow-card {
+    flex-grow: 1;
+}
+</style>

From 17f22f321ac61200c84af774e41b601b90eb780e Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 31 Jul 2023 09:34:05 +0200
Subject: [PATCH 10/25] add workflow info

---
 .../src/components/Common/PublishedItem.vue   |  22 +--
 .../components/Workflow/WorkflowPublished.vue | 160 +++++++++++++++---
 client/src/composables/usePanels.ts           |  26 +++
 .../src/entry/analysis/modules/Analysis.vue   |  31 +---
 4 files changed, 177 insertions(+), 62 deletions(-)
 create mode 100644 client/src/composables/usePanels.ts

diff --git a/client/src/components/Common/PublishedItem.vue b/client/src/components/Common/PublishedItem.vue
index 6a38e7a550d2..49b9e130f2db 100644
--- a/client/src/components/Common/PublishedItem.vue
+++ b/client/src/components/Common/PublishedItem.vue
@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { computed, type PropType } from "vue";
-import { useRoute } from "vue-router/composables";
 
-import { useUserStore } from "@/stores/userStore";
+import { usePanels } from "@/composables/usePanels";
 
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
 import LoadingSpan from "@/components/LoadingSpan.vue";
@@ -48,26 +47,13 @@ const pluralPath = computed(() => plural.value.toLowerCase());
 const publishedByUser = computed(() => `/${pluralPath.value}/list_published?f-username=${owner.value}`);
 const urlAll = computed(() => `/${pluralPath.value}/list_published`);
 
-const userStore = useUserStore();
-const route = useRoute();
-
-const showPanels = computed(() => {
-    const panels = route.query.hide_panels;
-    if (panels !== undefined && panels !== null && typeof panels === "string") {
-        return panels.toLowerCase() != "true";
-    }
-    return true;
-});
-
-const showActivityBar = computed(() => {
-    return userStore.showActivityBar && !userStore.isAnonymous;
-});
+const { showActivityBar, showToolbox } = usePanels();
 </script>
 
 <template>
     <div id="columns" class="d-flex">
-        <ActivityBar v-if="showPanels && showActivityBar" />
-        <FlexPanel v-if="showPanels && !showActivityBar" side="left">
+        <ActivityBar v-if="showActivityBar" />
+        <FlexPanel v-if="showToolbox" side="left">
             <ToolBox />
         </FlexPanel>
         <div id="center" class="m-3 w-100 overflow-auto d-flex flex-column">
diff --git a/client/src/components/Workflow/WorkflowPublished.vue b/client/src/components/Workflow/WorkflowPublished.vue
index 99e348d2e07b..1a21cd65c305 100644
--- a/client/src/components/Workflow/WorkflowPublished.vue
+++ b/client/src/components/Workflow/WorkflowPublished.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faSpinner } from "@fortawesome/free-solid-svg-icons";
+import { faBuilding, faEdit, faPlay, faSpinner, faUser } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios, { type AxiosError } from "axios";
-import { onUnmounted, ref, watch } from "vue";
+import { computed, onUnmounted, ref, watch } from "vue";
 
 import { useDatatypesMapper } from "@/composables/datatypesMapper";
+import { usePanels } from "@/composables/usePanels";
 import { useConnectionStore } from "@/stores/workflowConnectionStore";
 import { useWorkflowStateStore } from "@/stores/workflowEditorStateStore";
 import { useWorkflowStepStore } from "@/stores/workflowStepStore";
@@ -15,10 +16,14 @@ import { assertDefined } from "@/utils/assertions";
 import { fromSimple } from "./Editor/modules/model";
 
 import WorkflowGraph from "./Editor/WorkflowGraph.vue";
+import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
 import Heading from "@/components/Common/Heading.vue";
-import PublishedItem from "@/components/Common/PublishedItem.vue";
+import License from "@/components/License/License.vue";
+import FlexPanel from "@/components/Panels/FlexPanel.vue";
+import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
+import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 
-library.add(faSpinner);
+library.add(faSpinner, faUser, faBuilding, faPlay, faEdit);
 
 const props = defineProps<{
     id: string;
@@ -28,6 +33,8 @@ const workflowInfo = ref<
     | {
           name: string;
           [key: string]: unknown;
+          license?: string;
+          tags?: string[];
       }
     | undefined
 >();
@@ -44,7 +51,7 @@ const connectionsStore = useConnectionStore();
 const stepStore = useWorkflowStepStore();
 const stateStore = useWorkflowStateStore();
 
-stateStore.setScale(0.5);
+stateStore.setScale(0.75);
 
 onUnmounted(() => {
     connectionsStore.$reset();
@@ -88,42 +95,151 @@ watch(
         immediate: true,
     }
 );
+
+const { showActivityBar, showToolbox } = usePanels();
+
+const gravatarSource = computed(
+    () => `https://secure.gravatar.com/avatar/${workflowInfo.value?.email_hash}?d=identicon`
+);
+
+const publishedByUser = computed(() => `/workflows/list_published?f-username=${workflowInfo.value?.owner}`);
 </script>
 
 <template>
-    <PublishedItem :item="workflowInfo">
-        <template v-slot>
+    <div id="columns" class="d-flex">
+        <ActivityBar v-if="showActivityBar" />
+        <FlexPanel v-if="showToolbox" side="left">
+            <ToolBox />
+        </FlexPanel>
+
+        <div id="center" class="m-3 w-100 overflow-auto d-flex flex-column">
             <div v-if="loading">
-                <Heading h1 separator>
+                <Heading h1 separator size="xl">
                     <FontAwesomeIcon icon="fa-spinner" spin />
                     Loading Workflow
                 </Heading>
             </div>
             <div v-else-if="errored">
-                <Heading h1 separator> Failed to load published Workflow </Heading>
+                <Heading h1 separator size="xl"> Failed to load published Workflow </Heading>
 
                 <b-alert v-if="errorMessage" show variant="danger">
                     {{ errorMessage }}
                 </b-alert>
                 <b-alert v-else show variant="danger"> Unknown Error </b-alert>
             </div>
-            <div v-else-if="workflowInfo" class="d-flex flex-column">
-                <Heading h1 separator>Published Workflow</Heading>
-
-                <b-card class="workflow-card">
-                    <WorkflowGraph
-                        v-if="workflow && datatypesMapper"
-                        :steps="workflow.steps"
-                        :datatypes-mapper="datatypesMapper"
-                        readonly />
-                </b-card>
+            <div v-else-if="workflowInfo" class="published-workflow">
+                <div class="workflow-information">
+                    <div class="workflow-preview d-flex flex-column">
+                        <span class="d-flex w-100 flex-gapx-1 align-items-center mb-2">
+                            <Heading h1 separator inline size="xl" class="flex-grow-1 mb-0">Workflow Preview</Heading>
+                            <b-button variant="secondary" size="md">
+                                <FontAwesomeIcon icon="fa-edit" />
+                                Import and Edit
+                            </b-button>
+                            <b-button variant="primary" size="md">
+                                <FontAwesomeIcon icon="fa-play" />
+                                Run
+                            </b-button>
+                        </span>
+
+                        <b-card class="workflow-card">
+                            <WorkflowGraph
+                                v-if="workflow && datatypesMapper"
+                                :steps="workflow.steps"
+                                :datatypes-mapper="datatypesMapper"
+                                readonly />
+                        </b-card>
+                    </div>
+
+                    <aside class="d-flex flex-column align-items-start justify-content-start align-self-start">
+                        <hgroup class="mb-2">
+                            <Heading h2 size="xl" class="mb-0">About This Workflow</Heading>
+                            <span class="ml-2">{{ workflowInfo.name }} - Version {{ workflowInfo.version }}</span>
+                        </hgroup>
+
+                        <div class="mb-2 d-flex flex-column align-items-start">
+                            <hgroup class="mb-2">
+                                <Heading h3 size="md" class="mb-0">Author</Heading>
+                                <span class="ml-2">{{ workflowInfo.owner }}</span>
+                            </hgroup>
+
+                            <img alt="User Avatar" :src="gravatarSource" class="mb-2" />
+                            <router-link :to="publishedByUser">
+                                All published Workflows by {{ workflowInfo.owner }}
+                            </router-link>
+                        </div>
+
+                        <div v-if="workflow?.creator" class="mb-2 d-flex flex-column align-items-start">
+                            <Heading h3 size="md" class="mb-0">Creators</Heading>
+                            <span v-for="(creator, index) in workflow.creator" :key="index">
+                                <FontAwesomeIcon v-if="creator.class === 'Person'" icon="fa-user" />
+                                <FontAwesomeIcon v-if="creator.class === 'Organization'" icon="fa-building" />
+                                {{ creator.name }}
+                            </span>
+                        </div>
+
+                        <div class="mb-2 d-flex flex-column align-items-start">
+                            <Heading h3 size="md" class="mb-0">Description</Heading>
+
+                            <p v-if="workflowInfo.annotation" class="mb-0">
+                                {{ workflowInfo.annotation }}
+                            </p>
+                            <p v-else class="mb-0">This Workflow has no description.</p>
+                        </div>
+
+                        <div v-if="workflowInfo?.tags" class="mb-2 d-flex flex-column align-items-start">
+                            <Heading h3 size="md" class="mb-0">Tags</Heading>
+
+                            <StatelessTags class="tags mt-2" :value="workflowInfo.tags" disabled />
+                        </div>
+
+                        <div class="mb-2 d-flex flex-column align-items-start">
+                            <Heading h3 size="md" class="mb-0">License</Heading>
+
+                            <License v-if="workflowInfo.license" :license-id="workflowInfo.license" />
+                            <span v-else>No License specified</span>
+                        </div>
+                    </aside>
+                </div>
             </div>
-        </template>
-    </PublishedItem>
+        </div>
+    </div>
 </template>
 
 <style scoped lang="scss">
-.workflow-card {
+.published-workflow {
+    display: flex;
     flex-grow: 1;
 }
+
+.workflow-information {
+    display: flex;
+    flex-grow: 1;
+    gap: 1rem;
+
+    .workflow-preview {
+        flex-grow: 1;
+
+        .workflow-card {
+            flex-grow: 1;
+        }
+    }
+
+    aside {
+        flex-grow: 1;
+        max-width: 500px;
+    }
+
+    @media only screen and (max-width: 1100px) {
+        flex-direction: column;
+
+        .workflow-preview {
+            height: 450px;
+        }
+
+        aside {
+            max-width: unset;
+        }
+    }
+}
 </style>
diff --git a/client/src/composables/usePanels.ts b/client/src/composables/usePanels.ts
new file mode 100644
index 000000000000..46f6f334cc68
--- /dev/null
+++ b/client/src/composables/usePanels.ts
@@ -0,0 +1,26 @@
+import { computed } from "vue";
+import { useRoute } from "vue-router/composables";
+
+import { useUserStore } from "@/stores/userStore";
+
+export function usePanels() {
+    const userStore = useUserStore();
+    const route = useRoute();
+
+    const showPanels = computed(() => {
+        const panels = route.query.hide_panels;
+        if (panels !== undefined && panels !== null && typeof panels === "string") {
+            return panels.toLowerCase() != "true";
+        }
+        return true;
+    });
+
+    const showActivityBar = computed(() => showPanels.value && userStore.showActivityBar && !userStore.isAnonymous);
+    const showToolbox = computed(() => showPanels.value && !showActivityBar.value);
+
+    return {
+        showPanels,
+        showActivityBar,
+        showToolbox,
+    };
+}
diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index d904b6069bba..d4ea5f6014fe 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -1,34 +1,19 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref } from "vue";
-import { useRoute, useRouter } from "vue-router/composables";
+import { onMounted, onUnmounted, ref } from "vue";
+import { useRouter } from "vue-router/composables";
 
-import ToolBox from "@/components/Panels/ProviderAwareToolBox";
-import { useUserStore } from "@/stores/userStore";
+import { usePanels } from "@/composables/usePanels";
 
 import CenterFrame from "./CenterFrame.vue";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
 import HistoryIndex from "@/components/History/Index.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
+import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
 import DragAndDropModal from "@/components/Upload/DragAndDropModal.vue";
 
-const route = useRoute();
 const router = useRouter();
-const userStore = useUserStore();
-
 const showCenter = ref(false);
-
-// computed
-const showPanels = computed(() => {
-    const panels = route.query.hide_panels;
-    if (panels !== undefined && panels !== null && typeof panels === "string") {
-        return panels.toLowerCase() != "true";
-    }
-    return true;
-});
-
-const showActivityBar = computed(() => {
-    return userStore.showActivityBar && !userStore.isAnonymous;
-});
+const { showActivityBar, showToolbox } = usePanels();
 
 // methods
 function hideCenter() {
@@ -45,14 +30,16 @@ onMounted(() => {
     // always fires when a route is pushed instead of validating it first.
     router.app.$on("router-push", hideCenter);
 });
+
 onUnmounted(() => {
     router.app.$off("router-push", hideCenter);
 });
 </script>
+
 <template>
     <div id="columns" class="d-flex">
-        <ActivityBar v-if="showPanels && showActivityBar" />
-        <FlexPanel v-if="showPanels && !showActivityBar" side="left">
+        <ActivityBar v-if="showActivityBar" />
+        <FlexPanel v-if="showToolbox" side="left">
             <ToolBox />
         </FlexPanel>
         <div id="center" class="overflow-auto p-3 w-100">

From bb895e96d5d009c90c6b086a77ffbb344b930203 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 31 Jul 2023 09:36:35 +0200
Subject: [PATCH 11/25] fix show history

---
 client/src/entry/analysis/modules/Analysis.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/entry/analysis/modules/Analysis.vue b/client/src/entry/analysis/modules/Analysis.vue
index d4ea5f6014fe..3cfce855a302 100644
--- a/client/src/entry/analysis/modules/Analysis.vue
+++ b/client/src/entry/analysis/modules/Analysis.vue
@@ -13,7 +13,7 @@ import DragAndDropModal from "@/components/Upload/DragAndDropModal.vue";
 
 const router = useRouter();
 const showCenter = ref(false);
-const { showActivityBar, showToolbox } = usePanels();
+const { showActivityBar, showToolbox, showPanels } = usePanels();
 
 // methods
 function hideCenter() {

From 4678f14d79770fecb239753ea02f0d3e7b7f3e0c Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 3 Aug 2023 06:03:20 +0200
Subject: [PATCH 12/25] add last updated clean up html and css

---
 .../components/Workflow/WorkflowPublished.vue | 156 ++++++++++--------
 1 file changed, 86 insertions(+), 70 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowPublished.vue b/client/src/components/Workflow/WorkflowPublished.vue
index 1a21cd65c305..b391a3197459 100644
--- a/client/src/components/Workflow/WorkflowPublished.vue
+++ b/client/src/components/Workflow/WorkflowPublished.vue
@@ -22,6 +22,7 @@ import License from "@/components/License/License.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
+import UtcDate from "@/components/UtcDate.vue";
 
 library.add(faSpinner, faUser, faBuilding, faPlay, faEdit);
 
@@ -35,6 +36,7 @@ const workflowInfo = ref<
           [key: string]: unknown;
           license?: string;
           tags?: string[];
+          update_time: string;
       }
     | undefined
 >();
@@ -128,79 +130,86 @@ const publishedByUser = computed(() => `/workflows/list_published?f-username=${w
                 <b-alert v-else show variant="danger"> Unknown Error </b-alert>
             </div>
             <div v-else-if="workflowInfo" class="published-workflow">
-                <div class="workflow-information">
-                    <div class="workflow-preview d-flex flex-column">
-                        <span class="d-flex w-100 flex-gapx-1 align-items-center mb-2">
-                            <Heading h1 separator inline size="xl" class="flex-grow-1 mb-0">Workflow Preview</Heading>
-                            <b-button variant="secondary" size="md">
-                                <FontAwesomeIcon icon="fa-edit" />
-                                Import and Edit
-                            </b-button>
-                            <b-button variant="primary" size="md">
-                                <FontAwesomeIcon icon="fa-play" />
-                                Run
-                            </b-button>
-                        </span>
-
-                        <b-card class="workflow-card">
-                            <WorkflowGraph
-                                v-if="workflow && datatypesMapper"
-                                :steps="workflow.steps"
-                                :datatypes-mapper="datatypesMapper"
-                                readonly />
-                        </b-card>
-                    </div>
+                <div class="workflow-preview d-flex flex-column">
+                    <span class="d-flex w-100 flex-gapx-1 align-items-center mb-2">
+                        <Heading h1 separator inline size="xl" class="flex-grow-1 mb-0">Workflow Preview</Heading>
+                        <b-button variant="secondary" size="md">
+                            <FontAwesomeIcon icon="fa-edit" />
+                            Import and Edit
+                        </b-button>
+                        <b-button variant="primary" size="md">
+                            <FontAwesomeIcon icon="fa-play" />
+                            Run
+                        </b-button>
+                    </span>
+
+                    <b-card class="workflow-card">
+                        <WorkflowGraph
+                            v-if="workflow && datatypesMapper"
+                            :steps="workflow.steps"
+                            :datatypes-mapper="datatypesMapper"
+                            readonly />
+                    </b-card>
+                </div>
 
-                    <aside class="d-flex flex-column align-items-start justify-content-start align-self-start">
+                <aside class="workflow-information">
+                    <hgroup>
+                        <Heading h2 size="xl" class="mb-0">About This Workflow</Heading>
+                        <span class="ml-2">{{ workflowInfo.name }} - Version {{ workflowInfo.version }}</span>
+                    </hgroup>
+
+                    <div class="workflow-info-box">
                         <hgroup class="mb-2">
-                            <Heading h2 size="xl" class="mb-0">About This Workflow</Heading>
-                            <span class="ml-2">{{ workflowInfo.name }} - Version {{ workflowInfo.version }}</span>
+                            <Heading h3 size="md" class="mb-0">Author</Heading>
+                            <span class="ml-2">{{ workflowInfo.owner }}</span>
                         </hgroup>
 
-                        <div class="mb-2 d-flex flex-column align-items-start">
-                            <hgroup class="mb-2">
-                                <Heading h3 size="md" class="mb-0">Author</Heading>
-                                <span class="ml-2">{{ workflowInfo.owner }}</span>
-                            </hgroup>
-
-                            <img alt="User Avatar" :src="gravatarSource" class="mb-2" />
-                            <router-link :to="publishedByUser">
-                                All published Workflows by {{ workflowInfo.owner }}
-                            </router-link>
-                        </div>
-
-                        <div v-if="workflow?.creator" class="mb-2 d-flex flex-column align-items-start">
-                            <Heading h3 size="md" class="mb-0">Creators</Heading>
-                            <span v-for="(creator, index) in workflow.creator" :key="index">
+                        <img alt="User Avatar" :src="gravatarSource" class="mb-2" />
+                        <router-link :to="publishedByUser">
+                            All published Workflows by {{ workflowInfo.owner }}
+                        </router-link>
+                    </div>
+
+                    <div v-if="workflow?.creator" class="workflow-info-box">
+                        <Heading h3 size="md" class="mb-0">Creators</Heading>
+
+                        <ul class="list-unstyled mb-0">
+                            <li v-for="(creator, index) in workflow.creator" :key="index">
                                 <FontAwesomeIcon v-if="creator.class === 'Person'" icon="fa-user" />
                                 <FontAwesomeIcon v-if="creator.class === 'Organization'" icon="fa-building" />
                                 {{ creator.name }}
-                            </span>
-                        </div>
+                            </li>
+                        </ul>
+                    </div>
 
-                        <div class="mb-2 d-flex flex-column align-items-start">
-                            <Heading h3 size="md" class="mb-0">Description</Heading>
+                    <div class="workflow-info-box">
+                        <Heading h3 size="md" class="mb-0">Description</Heading>
 
-                            <p v-if="workflowInfo.annotation" class="mb-0">
-                                {{ workflowInfo.annotation }}
-                            </p>
-                            <p v-else class="mb-0">This Workflow has no description.</p>
-                        </div>
+                        <p v-if="workflowInfo.annotation" class="mb-0">
+                            {{ workflowInfo.annotation }}
+                        </p>
+                        <p v-else class="mb-0">This Workflow has no description.</p>
+                    </div>
 
-                        <div v-if="workflowInfo?.tags" class="mb-2 d-flex flex-column align-items-start">
-                            <Heading h3 size="md" class="mb-0">Tags</Heading>
+                    <div v-if="workflowInfo?.tags" class="workflow-info-box">
+                        <Heading h3 size="md" class="mb-0">Tags</Heading>
 
-                            <StatelessTags class="tags mt-2" :value="workflowInfo.tags" disabled />
-                        </div>
+                        <StatelessTags class="tags mt-2" :value="workflowInfo.tags" disabled />
+                    </div>
 
-                        <div class="mb-2 d-flex flex-column align-items-start">
-                            <Heading h3 size="md" class="mb-0">License</Heading>
+                    <div class="workflow-info-box">
+                        <Heading h3 size="md" class="mb-0">License</Heading>
 
-                            <License v-if="workflowInfo.license" :license-id="workflowInfo.license" />
-                            <span v-else>No License specified</span>
-                        </div>
-                    </aside>
-                </div>
+                        <License v-if="workflowInfo.license" :license-id="workflowInfo.license" />
+                        <span v-else>No License specified</span>
+                    </div>
+
+                    <div class="workflow-info-box">
+                        <Heading h3 size="md" class="mb-0">Last Updated</Heading>
+
+                        <UtcDate :date="workflowInfo.update_time" mode="pretty" />
+                    </div>
+                </aside>
             </div>
         </div>
     </div>
@@ -210,11 +219,6 @@ const publishedByUser = computed(() => `/workflows/list_published?f-username=${w
 .published-workflow {
     display: flex;
     flex-grow: 1;
-}
-
-.workflow-information {
-    display: flex;
-    flex-grow: 1;
     gap: 1rem;
 
     .workflow-preview {
@@ -225,11 +229,6 @@ const publishedByUser = computed(() => `/workflows/list_published?f-username=${w
         }
     }
 
-    aside {
-        flex-grow: 1;
-        max-width: 500px;
-    }
-
     @media only screen and (max-width: 1100px) {
         flex-direction: column;
 
@@ -242,4 +241,21 @@ const publishedByUser = computed(() => `/workflows/list_published?f-username=${w
         }
     }
 }
+
+.workflow-information {
+    flex-grow: 1;
+    max-width: 500px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: start;
+    justify-content: start;
+    align-self: flex-start;
+
+    .workflow-info-box {
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+    }
+}
 </style>

From 3b41aaef9aa06040fd074a8cd3b95a0a6908bb6f Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 3 Aug 2023 06:49:02 +0200
Subject: [PATCH 13/25] enable load_workflow for published workflow

---
 lib/galaxy/webapps/galaxy/controllers/workflow.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/galaxy/webapps/galaxy/controllers/workflow.py b/lib/galaxy/webapps/galaxy/controllers/workflow.py
index e14a05d3804a..3772a29cd10c 100644
--- a/lib/galaxy/webapps/galaxy/controllers/workflow.py
+++ b/lib/galaxy/webapps/galaxy/controllers/workflow.py
@@ -539,7 +539,7 @@ def load_workflow(self, trans, id, version=None, **kwargs):
         web interface.
         """
         trans.workflow_building_mode = workflow_building_modes.ENABLED
-        stored = self.get_stored_workflow(trans, id, check_ownership=True, check_accessible=False)
+        stored = self.get_stored_workflow(trans, id, check_ownership=False, check_accessible=True)
         workflow_contents_manager = self.app.workflow_contents_manager
         return workflow_contents_manager.workflow_to_dict(trans, stored, style="editor", version=version)
 

From 0d1d81a4f2d625dcb15b5849b6b66d285e17a470 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 3 Aug 2023 06:49:35 +0200
Subject: [PATCH 14/25] add button functions

---
 .../components/Workflow/WorkflowPublished.vue | 69 +++++++++++++++----
 1 file changed, 57 insertions(+), 12 deletions(-)

diff --git a/client/src/components/Workflow/WorkflowPublished.vue b/client/src/components/Workflow/WorkflowPublished.vue
index b391a3197459..16e2fecdf092 100644
--- a/client/src/components/Workflow/WorkflowPublished.vue
+++ b/client/src/components/Workflow/WorkflowPublished.vue
@@ -1,17 +1,19 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faBuilding, faEdit, faPlay, faSpinner, faUser } from "@fortawesome/free-solid-svg-icons";
+import { faBuilding, faDownload, faEdit, faPlay, faSpinner, faUser } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios, { type AxiosError } from "axios";
 import { computed, onUnmounted, ref, watch } from "vue";
 
 import { useDatatypesMapper } from "@/composables/datatypesMapper";
 import { usePanels } from "@/composables/usePanels";
+import { useUserStore } from "@/stores/userStore";
 import { useConnectionStore } from "@/stores/workflowConnectionStore";
 import { useWorkflowStateStore } from "@/stores/workflowEditorStateStore";
 import { useWorkflowStepStore } from "@/stores/workflowStepStore";
 import type { Workflow } from "@/stores/workflowStore";
 import { assertDefined } from "@/utils/assertions";
+import { withPrefix } from "@/utils/redirect";
 
 import { fromSimple } from "./Editor/modules/model";
 
@@ -24,7 +26,7 @@ import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 import UtcDate from "@/components/UtcDate.vue";
 
-library.add(faSpinner, faUser, faBuilding, faPlay, faEdit);
+library.add(faSpinner, faUser, faBuilding, faPlay, faEdit, faDownload);
 
 const props = defineProps<{
     id: string;
@@ -105,6 +107,20 @@ const gravatarSource = computed(
 );
 
 const publishedByUser = computed(() => `/workflows/list_published?f-username=${workflowInfo.value?.owner}`);
+
+const downloadUrl = computed(() => withPrefix(`/api/workflows/${props.id}/download?format=json-download`));
+const importUrl = computed(() => withPrefix(`/workflow/imp?id=${props.id}`));
+const runUrl = computed(() => withPrefix(`/workflows/run?id=${props.id}`));
+
+const userStore = useUserStore();
+
+function logInTitle(title: string) {
+    if (userStore.isAnonymous) {
+        return `Log in to ${title}`;
+    } else {
+        return title;
+    }
+}
 </script>
 
 <template>
@@ -131,16 +147,36 @@ const publishedByUser = computed(() => `/workflows/list_published?f-username=${w
             </div>
             <div v-else-if="workflowInfo" class="published-workflow">
                 <div class="workflow-preview d-flex flex-column">
-                    <span class="d-flex w-100 flex-gapx-1 align-items-center mb-2">
+                    <span class="d-flex w-100 flex-gapx-1 flex-wrap justify-content-center align-items-center mb-2">
                         <Heading h1 separator inline size="xl" class="flex-grow-1 mb-0">Workflow Preview</Heading>
-                        <b-button variant="secondary" size="md">
-                            <FontAwesomeIcon icon="fa-edit" />
-                            Import and Edit
-                        </b-button>
-                        <b-button variant="primary" size="md">
-                            <FontAwesomeIcon icon="fa-play" />
-                            Run
-                        </b-button>
+
+                        <span>
+                            <b-button :to="downloadUrl" title="Download Workflow" variant="secondary" size="md">
+                                <FontAwesomeIcon icon="fa-download" />
+                                Download
+                            </b-button>
+
+                            <b-button
+                                :href="importUrl"
+                                :disabled="userStore.isAnonymous"
+                                :title="logInTitle('Import Workflow')"
+                                target="blank"
+                                variant="secondary"
+                                size="md">
+                                <FontAwesomeIcon icon="fa-edit" />
+                                Import
+                            </b-button>
+
+                            <b-button
+                                :to="runUrl"
+                                :disabled="userStore.isAnonymous"
+                                :title="logInTitle('Run Workflow')"
+                                variant="primary"
+                                size="md">
+                                <FontAwesomeIcon icon="fa-play" />
+                                Run
+                            </b-button>
+                        </span>
                     </span>
 
                     <b-card class="workflow-card">
@@ -165,6 +201,7 @@ const publishedByUser = computed(() => `/workflows/list_published?f-username=${w
                         </hgroup>
 
                         <img alt="User Avatar" :src="gravatarSource" class="mb-2" />
+
                         <router-link :to="publishedByUser">
                             All published Workflows by {{ workflowInfo.owner }}
                         </router-link>
@@ -220,6 +257,7 @@ const publishedByUser = computed(() => `/workflows/list_published?f-username=${w
     display: flex;
     flex-grow: 1;
     gap: 1rem;
+    height: 100%;
 
     .workflow-preview {
         flex-grow: 1;
@@ -229,8 +267,14 @@ const publishedByUser = computed(() => `/workflows/list_published?f-username=${w
         }
     }
 
+    aside {
+        max-width: 500px;
+        height: 100%;
+    }
+
     @media only screen and (max-width: 1100px) {
         flex-direction: column;
+        height: unset;
 
         .workflow-preview {
             height: 450px;
@@ -238,19 +282,20 @@ const publishedByUser = computed(() => `/workflows/list_published?f-username=${w
 
         aside {
             max-width: unset;
+            height: unset;
         }
     }
 }
 
 .workflow-information {
     flex-grow: 1;
-    max-width: 500px;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
     align-items: start;
     justify-content: start;
     align-self: flex-start;
+    overflow-y: scroll;
 
     .workflow-info-box {
         display: flex;

From ec110e9f25a885fbc0c609d3a9db5d928f04e852 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 3 Aug 2023 06:56:48 +0200
Subject: [PATCH 15/25] enable titles for disabled buttons

---
 client/src/style/scss/overrides.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/client/src/style/scss/overrides.scss b/client/src/style/scss/overrides.scss
index dde16959fd41..13b491f7dc28 100644
--- a/client/src/style/scss/overrides.scss
+++ b/client/src/style/scss/overrides.scss
@@ -193,6 +193,10 @@ table.info_data_table th:nth-child(1) {
     border: none;
 }
 
+.btn.disabled {
+    pointer-events: unset !important;
+}
+
 // enable titles on disabled dropdown items
 .dropdown-menu {
     .dropdown-item.disabled {

From ef48c8c76ccea604a5eda0481edc8aad5301c208 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 3 Aug 2023 07:07:44 +0200
Subject: [PATCH 16/25] move WorkflowPublished to sub-folder

---
 .../Workflow/{ => Published}/WorkflowPublished.vue           | 5 ++---
 client/src/entry/analysis/router.js                          | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)
 rename client/src/components/Workflow/{ => Published}/WorkflowPublished.vue (98%)

diff --git a/client/src/components/Workflow/WorkflowPublished.vue b/client/src/components/Workflow/Published/WorkflowPublished.vue
similarity index 98%
rename from client/src/components/Workflow/WorkflowPublished.vue
rename to client/src/components/Workflow/Published/WorkflowPublished.vue
index 16e2fecdf092..98a2d5003dcf 100644
--- a/client/src/components/Workflow/WorkflowPublished.vue
+++ b/client/src/components/Workflow/Published/WorkflowPublished.vue
@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import axios, { type AxiosError } from "axios";
 import { computed, onUnmounted, ref, watch } from "vue";
 
+import { fromSimple } from "@/components/Workflow/Editor/modules/model";
 import { useDatatypesMapper } from "@/composables/datatypesMapper";
 import { usePanels } from "@/composables/usePanels";
 import { useUserStore } from "@/stores/userStore";
@@ -15,9 +16,6 @@ import type { Workflow } from "@/stores/workflowStore";
 import { assertDefined } from "@/utils/assertions";
 import { withPrefix } from "@/utils/redirect";
 
-import { fromSimple } from "./Editor/modules/model";
-
-import WorkflowGraph from "./Editor/WorkflowGraph.vue";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
 import Heading from "@/components/Common/Heading.vue";
 import License from "@/components/License/License.vue";
@@ -25,6 +23,7 @@ import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
 import UtcDate from "@/components/UtcDate.vue";
+import WorkflowGraph from "@/components/Workflow/Editor/WorkflowGraph.vue";
 
 library.add(faSpinner, faUser, faBuilding, faPlay, faEdit, faDownload);
 
diff --git a/client/src/entry/analysis/router.js b/client/src/entry/analysis/router.js
index 68bef4dc8c23..a45d8cd5768f 100644
--- a/client/src/entry/analysis/router.js
+++ b/client/src/entry/analysis/router.js
@@ -47,7 +47,6 @@ import UserInvocations from "components/Workflow/UserInvocations";
 import WorkflowExport from "components/Workflow/WorkflowExport";
 import WorkflowImport from "components/Workflow/WorkflowImport";
 import WorkflowList from "components/Workflow/WorkflowList";
-import WorkflowPublished from "components/Workflow/WorkflowPublished";
 import Analysis from "entry/analysis/modules/Analysis";
 import CenterFrame from "entry/analysis/modules/CenterFrame";
 import Home from "entry/analysis/modules/Home";
@@ -68,6 +67,7 @@ import AboutGalaxy from "@/components/AboutGalaxy.vue";
 import HistoryArchive from "@/components/History/Archiving/HistoryArchive.vue";
 import HistoryArchiveWizard from "@/components/History/Archiving/HistoryArchiveWizard.vue";
 import NotificationsList from "@/components/Notifications/NotificationsList.vue";
+import WorkflowPublished from "@/components/Workflow/Published/WorkflowPublished.vue";
 
 Vue.use(VueRouter);
 

From 6f90a5a20b652b9e41e98e1b998bbe307cb52384 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 3 Aug 2023 07:19:56 +0200
Subject: [PATCH 17/25] separate out workflow information

---
 .../Published/WorkflowInformation.vue         | 113 ++++++++++++++++++
 .../Workflow/Published/WorkflowPublished.vue  |  91 +-------------
 2 files changed, 117 insertions(+), 87 deletions(-)
 create mode 100644 client/src/components/Workflow/Published/WorkflowInformation.vue

diff --git a/client/src/components/Workflow/Published/WorkflowInformation.vue b/client/src/components/Workflow/Published/WorkflowInformation.vue
new file mode 100644
index 000000000000..eaacd889cf23
--- /dev/null
+++ b/client/src/components/Workflow/Published/WorkflowInformation.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faBuilding, faUser } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { computed } from "vue";
+
+import Heading from "@/components/Common/Heading.vue";
+import License from "@/components/License/License.vue";
+import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
+import UtcDate from "@/components/UtcDate.vue";
+
+library.add(faBuilding, faUser);
+
+interface WorkflowInformation {
+    name: string;
+    [key: string]: unknown;
+    license?: string;
+    tags?: string[];
+    update_time: string;
+    creator?: Array<{
+        [key: string]: unknown;
+    }>;
+}
+
+const props = defineProps<{
+    workflowInfo: WorkflowInformation;
+}>();
+
+const gravatarSource = computed(
+    () => `https://secure.gravatar.com/avatar/${props.workflowInfo?.email_hash}?d=identicon`
+);
+
+const publishedByUser = computed(() => `/workflows/list_published?f-username=${props.workflowInfo?.owner}`);
+</script>
+
+<template>
+    <aside class="workflow-information">
+        <hgroup>
+            <Heading h2 size="xl" class="mb-0">About This Workflow</Heading>
+            <span class="ml-2">{{ workflowInfo.name }} - Version {{ workflowInfo.version }}</span>
+        </hgroup>
+
+        <div class="workflow-info-box">
+            <hgroup class="mb-2">
+                <Heading h3 size="md" class="mb-0">Author</Heading>
+                <span class="ml-2">{{ workflowInfo.owner }}</span>
+            </hgroup>
+
+            <img alt="User Avatar" :src="gravatarSource" class="mb-2" />
+
+            <router-link :to="publishedByUser"> All published Workflows by {{ workflowInfo.owner }} </router-link>
+        </div>
+
+        <div v-if="workflowInfo?.creator" class="workflow-info-box">
+            <Heading h3 size="md" class="mb-0">Creators</Heading>
+
+            <ul class="list-unstyled mb-0">
+                <li v-for="(creator, index) in workflowInfo.creator" :key="index">
+                    <FontAwesomeIcon v-if="creator.class === 'Person'" icon="fa-user" />
+                    <FontAwesomeIcon v-if="creator.class === 'Organization'" icon="fa-building" />
+                    {{ creator.name }}
+                </li>
+            </ul>
+        </div>
+
+        <div class="workflow-info-box">
+            <Heading h3 size="md" class="mb-0">Description</Heading>
+
+            <p v-if="workflowInfo.annotation" class="mb-0">
+                {{ workflowInfo.annotation }}
+            </p>
+            <p v-else class="mb-0">This Workflow has no description.</p>
+        </div>
+
+        <div v-if="workflowInfo?.tags" class="workflow-info-box">
+            <Heading h3 size="md" class="mb-0">Tags</Heading>
+
+            <StatelessTags class="tags mt-2" :value="workflowInfo.tags" disabled />
+        </div>
+
+        <div class="workflow-info-box">
+            <Heading h3 size="md" class="mb-0">License</Heading>
+
+            <License v-if="workflowInfo.license" :license-id="workflowInfo.license" />
+            <span v-else>No License specified</span>
+        </div>
+
+        <div class="workflow-info-box">
+            <Heading h3 size="md" class="mb-0">Last Updated</Heading>
+
+            <UtcDate :date="workflowInfo.update_time" mode="pretty" />
+        </div>
+    </aside>
+</template>
+
+<style scoped lang="scss">
+.workflow-information {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: start;
+    justify-content: start;
+    align-self: flex-start;
+    overflow-y: scroll;
+
+    .workflow-info-box {
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+    }
+}
+</style>
diff --git a/client/src/components/Workflow/Published/WorkflowPublished.vue b/client/src/components/Workflow/Published/WorkflowPublished.vue
index 98a2d5003dcf..14fc7448ad4b 100644
--- a/client/src/components/Workflow/Published/WorkflowPublished.vue
+++ b/client/src/components/Workflow/Published/WorkflowPublished.vue
@@ -16,13 +16,11 @@ import type { Workflow } from "@/stores/workflowStore";
 import { assertDefined } from "@/utils/assertions";
 import { withPrefix } from "@/utils/redirect";
 
+import WorkflowInformation from "./WorkflowInformation.vue";
 import ActivityBar from "@/components/ActivityBar/ActivityBar.vue";
 import Heading from "@/components/Common/Heading.vue";
-import License from "@/components/License/License.vue";
 import FlexPanel from "@/components/Panels/FlexPanel.vue";
 import ToolBox from "@/components/Panels/ProviderAwareToolBox.vue";
-import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
-import UtcDate from "@/components/UtcDate.vue";
 import WorkflowGraph from "@/components/Workflow/Editor/WorkflowGraph.vue";
 
 library.add(faSpinner, faUser, faBuilding, faPlay, faEdit, faDownload);
@@ -101,12 +99,6 @@ watch(
 
 const { showActivityBar, showToolbox } = usePanels();
 
-const gravatarSource = computed(
-    () => `https://secure.gravatar.com/avatar/${workflowInfo.value?.email_hash}?d=identicon`
-);
-
-const publishedByUser = computed(() => `/workflows/list_published?f-username=${workflowInfo.value?.owner}`);
-
 const downloadUrl = computed(() => withPrefix(`/api/workflows/${props.id}/download?format=json-download`));
 const importUrl = computed(() => withPrefix(`/workflow/imp?id=${props.id}`));
 const runUrl = computed(() => withPrefix(`/workflows/run?id=${props.id}`));
@@ -187,65 +179,7 @@ function logInTitle(title: string) {
                     </b-card>
                 </div>
 
-                <aside class="workflow-information">
-                    <hgroup>
-                        <Heading h2 size="xl" class="mb-0">About This Workflow</Heading>
-                        <span class="ml-2">{{ workflowInfo.name }} - Version {{ workflowInfo.version }}</span>
-                    </hgroup>
-
-                    <div class="workflow-info-box">
-                        <hgroup class="mb-2">
-                            <Heading h3 size="md" class="mb-0">Author</Heading>
-                            <span class="ml-2">{{ workflowInfo.owner }}</span>
-                        </hgroup>
-
-                        <img alt="User Avatar" :src="gravatarSource" class="mb-2" />
-
-                        <router-link :to="publishedByUser">
-                            All published Workflows by {{ workflowInfo.owner }}
-                        </router-link>
-                    </div>
-
-                    <div v-if="workflow?.creator" class="workflow-info-box">
-                        <Heading h3 size="md" class="mb-0">Creators</Heading>
-
-                        <ul class="list-unstyled mb-0">
-                            <li v-for="(creator, index) in workflow.creator" :key="index">
-                                <FontAwesomeIcon v-if="creator.class === 'Person'" icon="fa-user" />
-                                <FontAwesomeIcon v-if="creator.class === 'Organization'" icon="fa-building" />
-                                {{ creator.name }}
-                            </li>
-                        </ul>
-                    </div>
-
-                    <div class="workflow-info-box">
-                        <Heading h3 size="md" class="mb-0">Description</Heading>
-
-                        <p v-if="workflowInfo.annotation" class="mb-0">
-                            {{ workflowInfo.annotation }}
-                        </p>
-                        <p v-else class="mb-0">This Workflow has no description.</p>
-                    </div>
-
-                    <div v-if="workflowInfo?.tags" class="workflow-info-box">
-                        <Heading h3 size="md" class="mb-0">Tags</Heading>
-
-                        <StatelessTags class="tags mt-2" :value="workflowInfo.tags" disabled />
-                    </div>
-
-                    <div class="workflow-info-box">
-                        <Heading h3 size="md" class="mb-0">License</Heading>
-
-                        <License v-if="workflowInfo.license" :license-id="workflowInfo.license" />
-                        <span v-else>No License specified</span>
-                    </div>
-
-                    <div class="workflow-info-box">
-                        <Heading h3 size="md" class="mb-0">Last Updated</Heading>
-
-                        <UtcDate :date="workflowInfo.update_time" mode="pretty" />
-                    </div>
-                </aside>
+                <WorkflowInformation v-if="workflowInfo" :workflow-info="workflowInfo" />
             </div>
         </div>
     </div>
@@ -266,7 +200,7 @@ function logInTitle(title: string) {
         }
     }
 
-    aside {
+    &:deep(.workflow-information) {
         max-width: 500px;
         height: 100%;
     }
@@ -279,27 +213,10 @@ function logInTitle(title: string) {
             height: 450px;
         }
 
-        aside {
+        &:deep(.workflow-information) {
             max-width: unset;
             height: unset;
         }
     }
 }
-
-.workflow-information {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-    align-items: start;
-    justify-content: start;
-    align-self: flex-start;
-    overflow-y: scroll;
-
-    .workflow-info-box {
-        display: flex;
-        flex-direction: column;
-        align-items: start;
-    }
-}
 </style>

From 1b0c9b0ce49c60c0b4e0ef989b235f233d155959 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 3 Aug 2023 08:02:19 +0200
Subject: [PATCH 18/25] use absolute path for fa font path

---
 client/src/components/Workflow/Editor/_nodeStyle.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/components/Workflow/Editor/_nodeStyle.scss b/client/src/components/Workflow/Editor/_nodeStyle.scss
index 2c66d5a61d56..fb9aa8557d26 100644
--- a/client/src/components/Workflow/Editor/_nodeStyle.scss
+++ b/client/src/components/Workflow/Editor/_nodeStyle.scss
@@ -2,7 +2,7 @@
 @import "theme/blue.scss";
 @import "~bootstrap/scss/bootstrap.scss";
 
-$fa-font-path: "../../../../../node_modules/@fortawesome/fontawesome-free/webfonts/";
+$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
 @import "~@fortawesome/fontawesome-free/scss/fontawesome";
 @import "~@fortawesome/fontawesome-free/scss/brands";
 @import "~@fortawesome/fontawesome-free/scss/regular";

From 7bbc7c3ea715aa33c048b54155d8d6d89f489219 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Mon, 7 Aug 2023 15:08:07 +0200
Subject: [PATCH 19/25] add prefix to get requests

---
 .../src/components/Workflow/Published/WorkflowPublished.vue   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Workflow/Published/WorkflowPublished.vue b/client/src/components/Workflow/Published/WorkflowPublished.vue
index 14fc7448ad4b..fbdd20f224c1 100644
--- a/client/src/components/Workflow/Published/WorkflowPublished.vue
+++ b/client/src/components/Workflow/Published/WorkflowPublished.vue
@@ -70,8 +70,8 @@ watch(
 
         try {
             const [{ data: workflowInfoData }, { data: fullWorkflow }] = await Promise.all([
-                axios.get(`/api/workflows/${id}`),
-                axios.get(`/workflow/load_workflow?_=true&id=${id}`),
+                axios.get(withPrefix(`/api/workflows/${id}`)),
+                axios.get(withPrefix(`/workflow/load_workflow?_=true&id=${id}`)),
             ]);
 
             assertDefined(workflowInfoData.name);

From c82c6a5364ad73f6319c96e3a9691121b0424d75 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 8 Aug 2023 11:10:27 +0200
Subject: [PATCH 20/25] fix test_view selenium test

---
 .../components/Workflow/Published/WorkflowInformation.vue    | 5 ++++-
 .../src/components/Workflow/Published/WorkflowPublished.vue  | 1 +
 client/src/utils/navigation/navigation.yml                   | 2 +-
 lib/galaxy_test/selenium/test_workflow_management.py         | 4 +++-
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Workflow/Published/WorkflowInformation.vue b/client/src/components/Workflow/Published/WorkflowInformation.vue
index eaacd889cf23..ed4db6336a49 100644
--- a/client/src/components/Workflow/Published/WorkflowInformation.vue
+++ b/client/src/components/Workflow/Published/WorkflowInformation.vue
@@ -37,7 +37,10 @@ const publishedByUser = computed(() => `/workflows/list_published?f-username=${p
     <aside class="workflow-information">
         <hgroup>
             <Heading h2 size="xl" class="mb-0">About This Workflow</Heading>
-            <span class="ml-2">{{ workflowInfo.name }} - Version {{ workflowInfo.version }}</span>
+            <span class="ml-2">
+                <span data-description="workflow name"> {{ workflowInfo.name }} </span> - Version
+                {{ workflowInfo.version }}
+            </span>
         </hgroup>
 
         <div class="workflow-info-box">
diff --git a/client/src/components/Workflow/Published/WorkflowPublished.vue b/client/src/components/Workflow/Published/WorkflowPublished.vue
index fbdd20f224c1..fe328035fcbf 100644
--- a/client/src/components/Workflow/Published/WorkflowPublished.vue
+++ b/client/src/components/Workflow/Published/WorkflowPublished.vue
@@ -151,6 +151,7 @@ function logInTitle(title: string) {
                                 :href="importUrl"
                                 :disabled="userStore.isAnonymous"
                                 :title="logInTitle('Import Workflow')"
+                                data-description="workflow import"
                                 target="blank"
                                 variant="secondary"
                                 size="md">
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 7fa348039a9e..5430b24790d8 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -778,7 +778,7 @@ workflow_editor:
 
 workflow_show:
   selectors:
-    _: '.workflow-display'
+    _: '.published-workflow'
     title: '[data-description="workflow name"]'
     import_link: '[data-description="workflow import"]'
 
diff --git a/lib/galaxy_test/selenium/test_workflow_management.py b/lib/galaxy_test/selenium/test_workflow_management.py
index a0925ca8b87d..68cf13354990 100644
--- a/lib/galaxy_test/selenium/test_workflow_management.py
+++ b/lib/galaxy_test/selenium/test_workflow_management.py
@@ -59,7 +59,9 @@ def check_title():
             assert "TestWorkflow1" in title_item.text
 
         check_title()
-        workflow_show._.assert_no_axe_violations_with_impact_of_at_least("moderate")
+        # Since the workflow view now uses the workflow editor, axe violations need to be fixed there first
+        # TODO: fix axe violations in workflow editor
+        # workflow_show._.assert_no_axe_violations_with_impact_of_at_least("moderate")
         import_link = workflow_show.import_link.wait_for_visible()
         assert "Import Workflow" in import_link.get_attribute("title")
         self.screenshot("workflow_manage_view")

From 9e643f777b0d05612cfd3c4fb422343a011ef0de Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Tue, 8 Aug 2023 11:35:55 +0200
Subject: [PATCH 21/25] temporary fix for style specificity leak

---
 client/src/components/Workflow/Editor/_nodeStyle.scss | 2 ++
 client/src/style/scss/overrides.scss                  | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Workflow/Editor/_nodeStyle.scss b/client/src/components/Workflow/Editor/_nodeStyle.scss
index fb9aa8557d26..c39401297eea 100644
--- a/client/src/components/Workflow/Editor/_nodeStyle.scss
+++ b/client/src/components/Workflow/Editor/_nodeStyle.scss
@@ -1,3 +1,5 @@
+// TODO: restructure the nodes to remove scss extends and all these imports
+
 @import "~bootstrap/scss/_functions.scss";
 @import "theme/blue.scss";
 @import "~bootstrap/scss/bootstrap.scss";
diff --git a/client/src/style/scss/overrides.scss b/client/src/style/scss/overrides.scss
index 13b491f7dc28..158575f6ea23 100644
--- a/client/src/style/scss/overrides.scss
+++ b/client/src/style/scss/overrides.scss
@@ -90,7 +90,7 @@ button {
 
 .modal-dialog {
     width: 690px;
-    max-width: 900px; // BS4 sets this to 500px now, so width not respected.
+    max-width: 900px !important; // BS4 sets this to 500px now, so width not respected.
 }
 
 // Scroll modal body.

From 576b407cf4a5c04bb5105cdd0d0af43940e4c903 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 9 Aug 2023 13:49:44 +0200
Subject: [PATCH 22/25] rebuild node terminals to avoid css leaks and
 accessibility concerns

---
 .../components/Workflow/Editor/Draggable.vue  |   3 +-
 .../components/Workflow/Editor/NodeInput.vue  | 505 ++++++++++--------
 .../components/Workflow/Editor/NodeOutput.vue | 153 ++++--
 .../Workflow/Editor/_nodeStyle.scss           | 110 ----
 .../Workflow/Editor/_nodeTerminalStyle.scss   |  36 ++
 .../Workflow/Editor/modules/terminals.ts      |   2 +-
 client/src/stores/workflowStepStore.ts        |   1 +
 client/src/style/scss/overrides.scss          |   2 +-
 client/src/style/scss/ui.scss                 |  15 +
 9 files changed, 442 insertions(+), 385 deletions(-)
 delete mode 100644 client/src/components/Workflow/Editor/_nodeStyle.scss
 create mode 100644 client/src/components/Workflow/Editor/_nodeTerminalStyle.scss

diff --git a/client/src/components/Workflow/Editor/Draggable.vue b/client/src/components/Workflow/Editor/Draggable.vue
index d3922e0423f3..79634948bdcd 100644
--- a/client/src/components/Workflow/Editor/Draggable.vue
+++ b/client/src/components/Workflow/Editor/Draggable.vue
@@ -34,7 +34,7 @@ const props = defineProps({
 
 const emit = defineEmits(["mousedown", "mouseup", "move", "dragstart", "start", "stop"]);
 
-let dragImg: HTMLImageElement | undefined;
+let dragImg: HTMLImageElement | null = null;
 const draggable = ref();
 const size = reactive(useAnimationFrameSize(draggable));
 const transform: Ref<ZoomTransform> | undefined = inject("transform");
@@ -90,6 +90,7 @@ const onMove = (position: Position, event: DragEvent) => {
 const onEnd = (position: Position, event: DragEvent) => {
     if (dragImg) {
         document.body.removeChild(dragImg);
+        dragImg = null;
     }
 
     dragging = false;
diff --git a/client/src/components/Workflow/Editor/NodeInput.vue b/client/src/components/Workflow/Editor/NodeInput.vue
index 5bcf6de18581..00cf6376dd84 100644
--- a/client/src/components/Workflow/Editor/NodeInput.vue
+++ b/client/src/components/Workflow/Editor/NodeInput.vue
@@ -1,27 +1,226 @@
+<script setup lang="ts">
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faChevronCircleRight, faMinusSquare } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import type { UseElementBoundingReturn } from "@vueuse/core";
+import { storeToRefs } from "pinia";
+import {
+    computed,
+    type ComputedRef,
+    inject,
+    onBeforeUnmount,
+    type PropType,
+    type Ref,
+    ref,
+    toRefs,
+    watch,
+    watchEffect,
+} from "vue";
+
+import { DatatypesMapperModel } from "@/components/Datatypes/model";
+import {
+    ConnectionAcceptable,
+    type InputTerminals,
+    type OutputCollectionTerminal,
+    terminalFactory,
+} from "@/components/Workflow/Editor/modules/terminals";
+import { useUid } from "@/composables/utils/uid";
+import { getConnectionId, useConnectionStore } from "@/stores/workflowConnectionStore";
+import { useWorkflowStateStore } from "@/stores/workflowEditorStateStore";
+import type { InputTerminalSource } from "@/stores/workflowStepStore";
+
+import { useRelativePosition } from "./composables/relativePosition";
+import { useTerminal } from "./composables/useTerminal";
+
+library.add(faChevronCircleRight, faMinusSquare);
+
+const props = defineProps({
+    input: {
+        type: Object as PropType<InputTerminalSource>,
+        required: true,
+    },
+    stepId: {
+        type: Number,
+        required: true,
+    },
+    datatypesMapper: {
+        type: DatatypesMapperModel,
+        required: true,
+    },
+    stepPosition: {
+        type: Object,
+        required: true,
+    },
+    rootOffset: {
+        type: Object as PropType<UseElementBoundingReturn>,
+        required: true,
+    },
+    scale: {
+        type: Number,
+        required: true,
+    },
+    scroll: {
+        type: Object,
+        required: true,
+    },
+    parentNode: {
+        type: HTMLElement,
+        default: null,
+    },
+    readonly: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+onBeforeUnmount(() => {
+    stateStore.deleteInputTerminalPosition(props.stepId, props.input.name);
+});
+
+const { stepId, input, datatypesMapper } = toRefs(props);
+
+const id = computed(() => `node-${props.stepId}-input-${props.input.name}`);
+const { terminal, isMappedOver: isMultiple } = useTerminal(stepId, input, datatypesMapper) as {
+    terminal: Ref<InputTerminals>;
+    isMappedOver: ComputedRef<boolean>;
+};
+
+const dropTarget = ref<HTMLDivElement | null>(null);
+const position = useRelativePosition(
+    dropTarget,
+    computed(() => props.parentNode)
+);
+
+const connectionStore = useConnectionStore();
+const hasTerminals = ref(false);
+watchEffect(() => {
+    hasTerminals.value = connectionStore.getOutputTerminalsForInputTerminal(id.value).length > 0;
+});
+
+const connections = computed(() => {
+    return connectionStore.getConnectionsForTerminal(id.value);
+});
+
+const invalidConnectionReasons = computed(() =>
+    connections.value
+        .map((connection) => connectionStore.invalidConnections[getConnectionId(connection)])
+        .filter((reason) => reason)
+);
+
+const stateStore = useWorkflowStateStore();
+const { draggingTerminal } = storeToRefs(stateStore);
+
+const canAccept = computed(() => {
+    if (draggingTerminal.value) {
+        return terminal.value.canAccept(draggingTerminal.value);
+    } else {
+        const firstReason = invalidConnectionReasons.value[0];
+        if (firstReason) {
+            return new ConnectionAcceptable(false, firstReason);
+        }
+    }
+    return null;
+});
+const acceptsInput = computed(() => {
+    if (canAccept.value?.canAccept) {
+        return true;
+    } else {
+        return false;
+    }
+});
+
+const endX = computed(
+    () => position.value.offsetLeft + props.stepPosition.left + (dropTarget.value?.offsetWidth ?? 2) / 2
+);
+const endY = computed(
+    () => position.value.offsetTop + props.stepPosition.top + (dropTarget.value?.offsetHeight ?? 2) / 2
+);
+
+watch([endX, endY], ([x, y]) => {
+    stateStore.setInputTerminalPosition(props.stepId, props.input.name, { endX: x, endY: y });
+});
+
+const isDragging = inject("isDragging");
+const reason = computed(() => canAccept.value?.reason ?? undefined);
+const label = computed(() => props.input.label || props.input.name);
+const hasConnections = computed(() => connections.value.length > 0);
+const rowClass = computed(() => {
+    const classes = ["form-row", "dataRow", "input-data-row"];
+    if (props.input?.valid === false) {
+        classes.push("form-row-error");
+    }
+    return classes;
+});
+
+const showTooltip = ref(false);
+const tooltipTargetId = useUid("tooltip-target-");
+
+function dragEnter(event: DragEvent) {
+    if (reason.value) {
+        showTooltip.value = true;
+    }
+    event.preventDefault();
+}
+
+function dragLeave(_event: DragEvent) {
+    showTooltip.value = false;
+}
+
+function onRemove() {
+    const connections = connectionStore.getConnectionsForTerminal(id.value);
+    connections.forEach((connection) => terminal.value.disconnect(connection));
+}
+
+function onDrop(event: DragEvent) {
+    if (!event.dataTransfer) {
+        return;
+    }
+
+    const stepOut = JSON.parse(event.dataTransfer.getData("text/plain"));
+    const droppedTerminal = terminalFactory(
+        stepOut.stepId,
+        stepOut.output,
+        props.datatypesMapper
+    ) as OutputCollectionTerminal;
+
+    showTooltip.value = false;
+
+    if (terminal.value.canAccept(droppedTerminal).canAccept) {
+        terminal.value.connect(droppedTerminal);
+    }
+}
+</script>
+
 <template>
-    <div
-        class="workflow-editor-node-terminal"
-        :class="rowClass"
-        @mouseleave="leave"
-        @mouseenter="enter"
-        @focusin="enter"
-        @focusout="leave">
+    <div :id="id" class="node-input" :class="rowClass">
+        <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
         <div
-            :id="id"
+            :id="tooltipTargetId"
+            ref="dropTarget"
+            class="input-terminal prevent-zoom"
+            :class="{
+                'input-active': isDragging,
+                'can-accept': acceptsInput,
+                'can-not-accept': !acceptsInput,
+                'mapped-over': isMultiple,
+            }"
             :input-name="input.name"
-            :class="terminalClass"
             @drop.prevent="onDrop"
             @dragenter.prevent="dragEnter"
             @dragleave.prevent="dragLeave">
-            <div :id="iconId" ref="el" v-b-tooltip.manual class="icon" :title="reason" />
+            <b-tooltip :target="tooltipTargetId" :show="showTooltip">
+                {{ reason }}
+            </b-tooltip>
+            <FontAwesomeIcon class="terminal-icon" icon="fa-chevron-circle-right" />
         </div>
-        <div
-            v-if="showRemove && !readonly"
+        <button
+            v-if="hasConnections && !readonly"
             v-b-tooltip.hover
             :title="reason"
-            class="delete-terminal"
-            @click="onRemove"
-            @keyup.delete="onRemove" />
+            class="delete-terminal-button"
+            @click="onRemove">
+            <FontAwesomeIcon class="delete-button-icon" icon="fa-minus-square" />
+        </button>
         {{ label }}
         <span
             v-if="!input.optional && !hasTerminals"
@@ -33,216 +232,78 @@
     </div>
 </template>
 
-<script>
-import { storeToRefs } from "pinia";
-import { computed, inject, ref, toRefs, watch, watchEffect } from "vue";
+<style lang="scss">
+@import "theme/blue.scss";
+@import "nodeTerminalStyle.scss";
 
-import { DatatypesMapperModel } from "@/components/Datatypes/model";
-import { ConnectionAcceptable, terminalFactory } from "@/components/Workflow/Editor/modules/terminals";
-import { getConnectionId, useConnectionStore } from "@/stores/workflowConnectionStore";
-import { useWorkflowStateStore } from "@/stores/workflowEditorStateStore";
+.node-input {
+    position: relative;
 
-import { useRelativePosition } from "./composables/relativePosition";
-import { useTerminal } from "./composables/useTerminal";
+    .input-required {
+        margin-top: $margin-v * 0.25;
+        margin-bottom: $margin-v * 0.25;
+        color: $brand-danger;
+        font-weight: 300;
+        cursor: default;
+    }
+}
 
-export default {
-    props: {
-        input: {
-            type: Object,
-            required: true,
-        },
-        stepId: {
-            type: Number,
-            required: true,
-        },
-        datatypesMapper: {
-            type: DatatypesMapperModel,
-            required: true,
-        },
-        stepPosition: {
-            type: Object,
-            required: true,
-        },
-        rootOffset: {
-            // type UseElementBoundingReturn from "@vueuse/core";
-            type: Object,
-            required: true,
-        },
-        scale: {
-            type: Number,
-            required: true,
-        },
-        scroll: {
-            type: Object,
-            required: true,
-        },
-        parentNode: {
-            type: HTMLElement,
-            default: null,
-        },
-        readonly: {
-            type: Boolean,
-            default: false,
-        },
-    },
-    setup(props) {
-        const el = ref(null);
-        const { stepId, input, datatypesMapper } = toRefs(props);
-        const position = useRelativePosition(
-            el,
-            computed(() => props.parentNode)
-        );
-        const isDragging = inject("isDragging");
-        const id = computed(() => `node-${props.stepId}-input-${props.input.name}`);
-        const iconId = computed(() => `${id.value}-icon`);
-        const connectionStore = useConnectionStore();
-        const { terminal, isMappedOver: isMultiple } = useTerminal(stepId, input, datatypesMapper);
-        const hasTerminals = ref(false);
-
-        watchEffect(() => {
-            hasTerminals.value = connectionStore.getOutputTerminalsForInputTerminal(id.value).length > 0;
-        });
-
-        const rowClass = computed(() => {
-            const classes = ["form-row", "dataRow", "input-data-row"];
-            if (props.input?.valid === false) {
-                classes.push("form-row-error");
-            }
-            return classes;
-        });
-
-        const stateStore = useWorkflowStateStore();
-        const { draggingTerminal } = storeToRefs(stateStore);
-
-        const terminalIsHovered = ref(false);
-        const connections = computed(() => {
-            return connectionStore.getConnectionsForTerminal(id.value);
-        });
-        const invalidConnectionReasons = computed(() =>
-            connections.value
-                .map((connection) => connectionStore.invalidConnections[getConnectionId(connection)])
-                .filter((reason) => reason)
-        );
-
-        const canAccept = computed(() => {
-            if (draggingTerminal.value) {
-                return terminal.value.canAccept(draggingTerminal.value);
-            } else if (invalidConnectionReasons.value.length) {
-                return new ConnectionAcceptable(false, invalidConnectionReasons.value[0]);
-            }
-            return null;
-        });
-
-        const showRemove = computed(() => {
-            if (invalidConnectionReasons.value.length > 0) {
-                return true;
-            } else {
-                return terminalIsHovered.value && connections.value.length > 0;
-            }
-        });
-
-        const endX = computed(
-            () => position.value.offsetLeft + props.stepPosition.left + (el.value?.offsetWidth ?? 2) / 2
-        );
-        const endY = computed(
-            () => position.value.offsetTop + props.stepPosition.top + (el.value?.offsetHeight ?? 2) / 2
-        );
-
-        watch([endX, endY], ([x, y]) => {
-            stateStore.setInputTerminalPosition(props.stepId, props.input.name, { endX: x, endY: y });
-        });
-
-        return {
-            el,
-            isDragging,
-            connectionStore,
-            id,
-            iconId,
-            rowClass,
-            canAccept,
-            hasTerminals,
-            terminal,
-            stateStore,
-            isMultiple,
-            showRemove,
-            terminalIsHovered,
-        };
-    },
-    computed: {
-        terminalArgs() {
-            return { stepId: this.stepId, name: this.input.name, connectorType: "input" };
-        },
-        label() {
-            return this.input.label || this.input.name;
-        },
-        reason() {
-            const reason = this.canAccept?.reason;
-            return reason;
-        },
-        terminalClass() {
-            const classes = ["terminal", "input-terminal", "prevent-zoom"];
-            if (this.isDragging) {
-                classes.push("input-terminal-active");
-                if (this.canAccept?.canAccept) {
-                    classes.push("can-accept");
-                } else {
-                    classes.push("cannot-accept");
-                }
-            }
-            if (this.isMultiple) {
-                classes.push("multiple");
-            }
-            return classes;
-        },
-    },
-    beforeDestroy() {
-        this.stateStore.deleteInputTerminalPosition({
-            stepId: this.stepId,
-            inputName: this.input.name,
-        });
-    },
-    methods: {
-        dragEnter(event) {
-            if (this.reason) {
-                this.$root.$emit("bv::show::tooltip", this.iconId);
-            }
-            event.preventDefault();
-        },
-        dragLeave(event) {
-            this.$root.$emit("bv::hide::tooltip", this.iconId);
-        },
-        onRemove() {
-            const connections = this.connectionStore.getConnectionsForTerminal(this.id);
-            connections.forEach((connection) => this.terminal.disconnect(connection));
-            this.terminalIsHovered = false;
-        },
-        enter() {
-            this.terminalIsHovered = true;
-        },
-        leave() {
-            this.terminalIsHovered = false;
-        },
-        onDrop(e) {
-            const stepOut = JSON.parse(e.dataTransfer.getData("text/plain"));
-            const droppedTerminal = terminalFactory(stepOut.stepId, stepOut.output, this.datatypesMapper);
-            this.$root.$emit("bv::hide::tooltip", this.iconId);
-            if (this.terminal.canAccept(droppedTerminal).canAccept) {
-                this.terminal.connect(droppedTerminal);
-            }
-        },
-    },
-};
-</script>
+.input-terminal {
+    @include node-terminal-style(left);
 
-<style lang="scss">
-@import "theme/blue.scss";
-@import "nodeStyle";
-
-.workflow-editor-node-terminal .input-required {
-    margin-top: $margin-v * 0.25;
-    margin-bottom: $margin-v * 0.25;
-    color: $brand-danger;
-    font-weight: 300;
-    cursor: default;
+    &.input-active {
+        &.can-accept {
+            color: $brand-success;
+        }
+
+        &.can-not-accept {
+            color: $brand-warning;
+        }
+    }
+}
+
+.delete-terminal-button {
+    position: absolute;
+    left: calc(-0.65rem - 5px);
+    top: 50%;
+    transform: translateY(-50%);
+    display: grid;
+    place-items: center;
+    width: 0;
+    height: 0;
+    padding: 0;
+    transition: none;
+    border: none;
+    background-color: $brand-danger;
+    color: $white;
+
+    .delete-button-icon {
+        display: none;
+        width: 14px;
+        height: 14px;
+    }
+
+    &:hover,
+    &:focus-visible,
+    &:focus {
+        background-color: $brand-danger;
+        color: $white;
+    }
+
+    &:focus-visible,
+    &:focus {
+        box-shadow: 0 0 0 0.2rem $brand-primary;
+    }
+
+    .node-input:hover &,
+    .node-input:focus-within &,
+    .node-input.form-row-error & {
+        width: 24px;
+        height: 24px;
+
+        .delete-button-icon {
+            display: unset;
+        }
+    }
 }
 </style>
diff --git a/client/src/components/Workflow/Editor/NodeOutput.vue b/client/src/components/Workflow/Editor/NodeOutput.vue
index c855c2688825..8eefdf9e546a 100644
--- a/client/src/components/Workflow/Editor/NodeOutput.vue
+++ b/client/src/components/Workflow/Editor/NodeOutput.vue
@@ -1,9 +1,17 @@
 <script setup lang="ts">
 import { library } from "@fortawesome/fontawesome-svg-core";
-import { faMinus, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { faSquare } from "@fortawesome/free-regular-svg-icons";
+import {
+    faCheckSquare,
+    faChevronCircleRight,
+    faEye,
+    faEyeSlash,
+    faMinus,
+    faPlus,
+} from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import type { UseElementBoundingReturn, UseScrollReturn } from "@vueuse/core";
-import { computed, nextTick, onBeforeUnmount, type Ref, ref, toRefs, type UnwrapRef, watch } from "vue";
+import { computed, ComputedRef, nextTick, onBeforeUnmount, type Ref, ref, toRefs, type UnwrapRef, watch } from "vue";
 
 import type { DatatypesMapperModel } from "@/components/Datatypes/model";
 import { useWorkflowStateStore, type XYPosition } from "@/stores/workflowEditorStateStore";
@@ -19,6 +27,7 @@ import { assertDefined, ensureDefined } from "@/utils/assertions";
 import { useRelativePosition } from "./composables/relativePosition";
 import { useTerminal } from "./composables/useTerminal";
 import { type CollectionTypeDescriptor, NULL_COLLECTION_TYPE_DESCRIPTION } from "./modules/collectionTypeDescription";
+import { OutputTerminals } from "./modules/terminals";
 
 import DraggableWrapper from "./DraggablePan.vue";
 import StatelessTags from "@/components/TagsMultiselect/StatelessTags.vue";
@@ -26,7 +35,7 @@ import ConnectionMenu from "@/components/Workflow/Editor/ConnectionMenu.vue";
 
 type ElementBounding = UnwrapRef<UseElementBoundingReturn>;
 
-library.add(faPlus, faMinus);
+library.add(faSquare, faCheckSquare, faChevronCircleRight, faEye, faEyeSlash, faMinus, faPlus);
 
 const props = defineProps<{
     output: OutputTerminalSource;
@@ -46,11 +55,13 @@ const props = defineProps<{
 const emit = defineEmits(["pan-by", "stopDragging", "onDragConnector"]);
 const stateStore = useWorkflowStateStore();
 const stepStore = useWorkflowStepStore();
-const icon: Ref<HTMLElement | null> = ref(null);
 const { rootOffset, output, stepId, datatypesMapper } = toRefs(props);
 
+const terminalComponent: Ref<InstanceType<typeof DraggableWrapper> | null> = ref(null);
+const terminalElement = computed(() => (terminalComponent.value?.$el as HTMLElement) ?? null);
+
 const position = useRelativePosition(
-    icon,
+    terminalElement,
     computed(() => props.parentNode)
 );
 
@@ -71,21 +82,27 @@ const extensions = computed(() => {
     }
     return extensions;
 });
+
 const effectiveOutput = ref({ ...output.value, extensions: extensions.value });
+
 watch(extensions, () => {
     effectiveOutput.value = { ...output.value, extensions: extensions.value };
 });
-const { terminal, isMappedOver: isMultiple } = useTerminal(stepId, effectiveOutput, datatypesMapper);
+
+const { terminal, isMappedOver: isMultiple } = useTerminal(stepId, effectiveOutput, datatypesMapper) as {
+    terminal: Ref<OutputTerminals>;
+    isMappedOver: ComputedRef<boolean>;
+};
 
 const workflowOutput = computed(() =>
     props.workflowOutputs.find((workflowOutput) => workflowOutput.output_name == props.output.name)
 );
-const activeClass = computed(() => workflowOutput.value && "mark-terminal-active");
+
 const isVisible = computed(() => {
     const isHidden = `HideDatasetAction${props.output.name}` in props.postJobActions;
     return !isHidden;
 });
-const visibleClass = computed(() => (isVisible.value ? "mark-terminal-visible" : "mark-terminal-hidden"));
+
 const visibleHint = computed(() => {
     if (isVisible.value) {
         return `Output will be visible in history. Click to hide output.`;
@@ -120,7 +137,7 @@ async function toggleChildComponent() {
             menu.value!.$el.focus();
         }
     } else {
-        icon.value!.focus();
+        terminalElement.value!.focus();
     }
 }
 
@@ -185,10 +202,10 @@ const dragY = ref(0);
 const isDragging = ref(false);
 
 const startX = computed(
-    () => position.value.offsetLeft + (props.stepPosition?.left ?? 0) + (icon.value?.offsetWidth ?? 2) / 2
+    () => position.value.offsetLeft + (props.stepPosition?.left ?? 0) + (terminalElement.value?.offsetWidth ?? 2) / 2
 );
 const startY = computed(
-    () => position.value.offsetTop + (props.stepPosition?.top ?? 0) + (icon.value?.offsetHeight ?? 2) / 2
+    () => position.value.offsetTop + (props.stepPosition?.top ?? 0) + (terminalElement.value?.offsetHeight ?? 2) / 2
 );
 const endX = computed(() => {
     return (dragX.value || startX.value) + props.scroll.x.value / props.scale;
@@ -222,20 +239,13 @@ watch(
 );
 
 function onMove(dragPosition: XYPosition) {
-    dragX.value = dragPosition.x + icon.value!.clientWidth / 2;
-    dragY.value = dragPosition.y + icon.value!.clientHeight / 2;
+    dragX.value = dragPosition.x + terminalElement.value!.clientWidth / 2;
+    dragY.value = dragPosition.y + terminalElement.value!.clientHeight / 2;
 }
 
 const id = computed(() => `node-${props.stepId}-output-${props.output.name}`);
 const showCalloutActiveOutput = computed(() => props.stepType === "tool" || props.stepType === "subworkflow");
 const showCalloutVisible = computed(() => props.stepType === "tool");
-const terminalClass = computed(() => {
-    const cls = "terminal output-terminal";
-    if (isMultiple.value) {
-        return `${cls} multiple`;
-    }
-    return cls;
-});
 
 function collectionTypeToDescription(collectionTypeDescription: CollectionTypeDescriptor) {
     let collectionDescription = collectionTypeDescription.collectionType;
@@ -295,28 +305,30 @@ const removeTagsAction = computed(() => {
 </script>
 
 <template>
-    <div class="d-flex workflow-editor-node-terminal" :class="rowClass" :data-output-name="output.name">
+    <div class="node-output" :class="rowClass" :data-output-name="output.name">
         <div class="d-flex flex-column w-100">
-            <div class="d-flex flex-row">
-                <div
+            <div class="node-output-buttons">
+                <button
                     v-if="showCalloutActiveOutput"
                     v-b-tooltip
-                    class="callout-terminal"
+                    class="callout-terminal inline-icon-button"
                     title="Checked outputs will become primary workflow outputs and are available as subworkflow outputs."
-                    @keyup="onToggleActive"
                     @click="onToggleActive">
-                    <i :class="['mark-terminal', activeClass]" />
-                </div>
-                <div
+                    <FontAwesomeIcon v-if="workflowOutput" fixed-width icon="fa-check-square" />
+                    <FontAwesomeIcon v-else fixed-width icon="far fa-square" />
+                </button>
+                <button
                     v-if="showCalloutVisible"
                     v-b-tooltip
-                    class="callout-terminal"
+                    class="callout-terminal inline-icon-button"
                     :title="visibleHint"
-                    @keyup="onToggleVisible"
                     @click="onToggleVisible">
-                    <i :class="['mark-terminal', visibleClass]" />
-                </div>
-                {{ label }}
+                    <FontAwesomeIcon v-if="isVisible" fixed-width icon="fa-eye" />
+                    <FontAwesomeIcon v-else fixed-width icon="fa-eye-slash" />
+                </button>
+                <span class="ml-1">
+                    {{ label }}
+                </span>
             </div>
 
             <div
@@ -340,8 +352,10 @@ const removeTagsAction = computed(() => {
 
         <DraggableWrapper
             :id="id"
-            ref="el"
-            :class="terminalClass"
+            ref="terminalComponent"
+            v-b-tooltip.hover="outputDetails"
+            class="output-terminal prevent-zoom"
+            :class="{ 'mapped-over': isMultiple }"
             :output-name="output.name"
             :root-offset="rootOffset"
             :prevent-default="false"
@@ -353,25 +367,64 @@ const removeTagsAction = computed(() => {
             @start="isDragging = true"
             @stop="onStopDragging"
             @move="onMove">
-            <div
-                ref="icon"
-                v-b-tooltip.hover="outputDetails"
-                class="icon prevent-zoom"
-                tabindex="0"
+            <button
+                class="connection-menu-button"
                 :aria-label="`Connect output ${output.name} to input. Press space to see a list of available inputs`"
-                @keyup.space="toggleChildComponent"
-                @keyup.enter="toggleChildComponent"
-                @keyup.esc="toggleChildComponent">
-                <ConnectionMenu
-                    v-if="showChildComponent"
-                    ref="menu"
-                    :terminal="terminal"
-                    @closeMenu="closeMenu"></ConnectionMenu>
-            </div>
+                @click="toggleChildComponent"></button>
+
+            <FontAwesomeIcon class="terminal-icon" icon="fa-chevron-circle-right" />
+
+            <ConnectionMenu
+                v-if="showChildComponent"
+                ref="menu"
+                :terminal="terminal"
+                @closeMenu="closeMenu"></ConnectionMenu>
         </DraggableWrapper>
     </div>
 </template>
 
 <style lang="scss">
-@import "nodeStyle";
+@import "theme/blue.scss";
+@import "nodeTerminalStyle.scss";
+
+.node-output {
+    display: flex;
+    position: relative;
+}
+
+.node-output-buttons {
+    display: flex;
+    flex-direction: row;
+    margin-left: -0.2rem;
+}
+
+.output-terminal {
+    @include node-terminal-style(right);
+
+    &:hover {
+        color: $brand-success;
+    }
+
+    button:focus + .terminal-icon {
+        color: $brand-success;
+    }
+}
+
+.connection-menu-button {
+    border: none;
+    position: absolute;
+    width: 0;
+    height: 0;
+    padding: 0;
+    transition: none;
+
+    &:focus,
+    &:focus-visible {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        box-shadow: 0 0 0 0.2rem $brand-primary;
+        background-color: $white;
+    }
+}
 </style>
diff --git a/client/src/components/Workflow/Editor/_nodeStyle.scss b/client/src/components/Workflow/Editor/_nodeStyle.scss
deleted file mode 100644
index c39401297eea..000000000000
--- a/client/src/components/Workflow/Editor/_nodeStyle.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-// TODO: restructure the nodes to remove scss extends and all these imports
-
-@import "~bootstrap/scss/_functions.scss";
-@import "theme/blue.scss";
-@import "~bootstrap/scss/bootstrap.scss";
-
-$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
-@import "~@fortawesome/fontawesome-free/scss/fontawesome";
-@import "~@fortawesome/fontawesome-free/scss/brands";
-@import "~@fortawesome/fontawesome-free/scss/regular";
-@import "~@fortawesome/fontawesome-free/scss/solid";
-@import "~@fortawesome/fontawesome-free/scss/v4-shims";
-@import "~@fortawesome/fontawesome-free/scss/_variables";
-
-.workflow-editor-node-terminal {
-    .base-terminal {
-        @extend .fa;
-        @extend .fa-circle;
-        @extend .mt-1;
-        color: $brand-light;
-        position: absolute;
-        .icon {
-            @extend .fa;
-            @extend .fa-chevron-circle-right;
-            color: $brand-primary;
-            position: absolute;
-            left: 0px;
-            top: 0px;
-        }
-    }
-
-    .input-terminal {
-        @extend .base-terminal;
-        left: -0.65rem;
-    }
-
-    .output-terminal {
-        @extend .base-terminal;
-        right: -0.65rem;
-        &:hover > .icon {
-            color: $brand-success;
-        }
-    }
-
-    .input-terminal.multiple {
-        font-size: 1.2rem;
-        left: -0.8rem;
-        top: 3px;
-    }
-
-    .output-terminal.multiple {
-        font-size: 1.2rem;
-        right: -0.8rem;
-        bottom: 6px;
-    }
-
-    .input-terminal-active.can-accept > .icon {
-        color: $brand-success;
-    }
-
-    .input-terminal-active.cannot-accept > .icon {
-        color: $brand-warning;
-    }
-
-    .drag-terminal {
-        @extend .fa;
-        @extend .fa-circle;
-        color: $brand-success;
-        position: absolute;
-    }
-
-    .mark-terminal {
-        @extend .far;
-        @extend .fa-square;
-        color: $brand-primary;
-        cursor: pointer;
-        &.mark-terminal-active {
-            @extend .fa;
-            @extend .fa-check-square;
-        }
-        &.mark-terminal-visible {
-            @extend .fa;
-            @extend .fa-eye;
-        }
-        &.mark-terminal-hidden {
-            @extend .fa;
-            @extend .fa-eye-slash;
-        }
-    }
-
-    .delete-terminal {
-        @extend .btn;
-        @extend .btn-sm;
-        @extend .btn-danger;
-        @extend .fa;
-        @extend .fa-minus-circle;
-        @extend .p-1;
-        @extend .mt-1;
-        cursor: pointer;
-        position: absolute;
-        z-index: 2500;
-        top: 2px;
-        left: -0.8rem;
-    }
-
-    .callout-terminal {
-        @extend .float-left;
-        @extend .mr-1;
-    }
-}
diff --git a/client/src/components/Workflow/Editor/_nodeTerminalStyle.scss b/client/src/components/Workflow/Editor/_nodeTerminalStyle.scss
new file mode 100644
index 000000000000..77ab4b8351e6
--- /dev/null
+++ b/client/src/components/Workflow/Editor/_nodeTerminalStyle.scss
@@ -0,0 +1,36 @@
+@mixin node-terminal-style($side) {
+    position: absolute;
+    #{$side}: -0.65rem;
+    border-radius: 50%;
+    background-color: $white;
+    display: grid;
+    place-items: center;
+    width: 11px;
+    height: 11px;
+    margin-top: 0.25rem;
+
+    color: $brand-primary;
+
+    &.mapped-over {
+        width: 20px;
+        height: 20px;
+        margin-top: 0;
+        #{$side}: -0.8rem;
+
+        .terminal-icon {
+            top: -1px;
+            left: -1px;
+            width: 22px;
+            height: 22px;
+        }
+    }
+
+    .terminal-icon {
+        position: absolute;
+        top: -1px;
+        left: -1px;
+        width: 13px;
+        height: 13px;
+        pointer-events: none;
+    }
+}
diff --git a/client/src/components/Workflow/Editor/modules/terminals.ts b/client/src/components/Workflow/Editor/modules/terminals.ts
index 2821748a5df6..9024b8a68ad9 100644
--- a/client/src/components/Workflow/Editor/modules/terminals.ts
+++ b/client/src/components/Workflow/Editor/modules/terminals.ts
@@ -902,7 +902,7 @@ export function terminalFactory<T extends TerminalSourceAndInvalid>(
                     multiple: false,
                     optional: false,
                 },
-                valid: terminalSource.valid,
+                valid: terminalSource.valid as false,
             }) as TerminalOf<T>;
         } else {
             const inputArgs = {
diff --git a/client/src/stores/workflowStepStore.ts b/client/src/stores/workflowStepStore.ts
index 8457cf5c98b3..bb6059d63004 100644
--- a/client/src/stores/workflowStepStore.ts
+++ b/client/src/stores/workflowStepStore.ts
@@ -59,6 +59,7 @@ export interface ParameterOutput extends Omit<DataOutput, "type" | "extensions">
 }
 
 interface BaseStepInput {
+    valid?: boolean;
     name: string;
     label: string;
     multiple: boolean;
diff --git a/client/src/style/scss/overrides.scss b/client/src/style/scss/overrides.scss
index 158575f6ea23..13b491f7dc28 100644
--- a/client/src/style/scss/overrides.scss
+++ b/client/src/style/scss/overrides.scss
@@ -90,7 +90,7 @@ button {
 
 .modal-dialog {
     width: 690px;
-    max-width: 900px !important; // BS4 sets this to 500px now, so width not respected.
+    max-width: 900px; // BS4 sets this to 500px now, so width not respected.
 }
 
 // Scroll modal body.
diff --git a/client/src/style/scss/ui.scss b/client/src/style/scss/ui.scss
index a9761d8072af..8445f6fea39e 100644
--- a/client/src/style/scss/ui.scss
+++ b/client/src/style/scss/ui.scss
@@ -440,3 +440,18 @@ $ui-margin-horizontal-large: $margin-v * 2;
 .overflow-x-hidden {
     overflow-x: hidden !important;
 }
+
+// TODO: move this to component library, once that exists
+.inline-icon-button {
+    border: none;
+    background-color: transparent;
+    color: $brand-primary;
+    display: inline;
+
+    padding: 0 0.1rem;
+
+    &:hover {
+        background-color: $brand-primary;
+        color: $brand-light;
+    }
+}

From 8802e5f412f74d255f1c66bdc11330449bf1a186 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Wed, 9 Aug 2023 14:16:26 +0200
Subject: [PATCH 23/25] fix NodeOutput test

---
 client/src/components/Workflow/Editor/NodeOutput.test.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/src/components/Workflow/Editor/NodeOutput.test.ts b/client/src/components/Workflow/Editor/NodeOutput.test.ts
index 964c398c68b7..521822429c3b 100644
--- a/client/src/components/Workflow/Editor/NodeOutput.test.ts
+++ b/client/src/components/Workflow/Editor/NodeOutput.test.ts
@@ -98,12 +98,12 @@ describe("NodeOutput", () => {
             pinia,
             provide: { transform, workflowId: "mock-workflow" },
         });
-        expect(wrapper.find(".multiple").exists()).toBe(false);
+        expect(wrapper.find(".mapped-over").exists()).toBe(false);
         inputTerminal.connect(outputTerminal);
         await nextTick();
-        expect(wrapper.find(".multiple").exists()).toBe(true);
+        expect(wrapper.find(".mapped-over").exists()).toBe(true);
         inputTerminal.disconnect(outputTerminal);
         await nextTick();
-        expect(wrapper.find(".multiple").exists()).toBe(false);
+        expect(wrapper.find(".mapped-over").exists()).toBe(false);
     });
 });

From 89d83b94bf3b86d0543e58a5c95281adda985e70 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Thu, 10 Aug 2023 16:46:49 +0200
Subject: [PATCH 24/25] fix navigation selectors

---
 client/src/components/Workflow/Editor/NodeInput.vue  | 8 +++-----
 client/src/components/Workflow/Editor/NodeOutput.vue | 6 ++++--
 client/src/utils/navigation/navigation.yml           | 4 ++--
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/client/src/components/Workflow/Editor/NodeInput.vue b/client/src/components/Workflow/Editor/NodeInput.vue
index 670b143b1b20..63ce71806384 100644
--- a/client/src/components/Workflow/Editor/NodeInput.vue
+++ b/client/src/components/Workflow/Editor/NodeInput.vue
@@ -24,7 +24,6 @@ import {
     type OutputCollectionTerminal,
     terminalFactory,
 } from "@/components/Workflow/Editor/modules/terminals";
-import { useUid } from "@/composables/utils/uid";
 import { useWorkflowStores } from "@/composables/workflowStores";
 import { getConnectionId } from "@/stores/workflowConnectionStore";
 import type { InputTerminalSource } from "@/stores/workflowStepStore";
@@ -152,7 +151,6 @@ const rowClass = computed(() => {
 });
 
 const showTooltip = ref(false);
-const tooltipTargetId = useUid("tooltip-target-");
 
 function dragEnter(event: DragEvent) {
     if (reason.value) {
@@ -193,10 +191,10 @@ function onDrop(event: DragEvent) {
 </script>
 
 <template>
-    <div :id="id" class="node-input" :class="rowClass">
+    <div class="node-input" :class="rowClass">
         <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->
         <div
-            :id="tooltipTargetId"
+            :id="id"
             ref="dropTarget"
             class="input-terminal prevent-zoom"
             :class="{
@@ -209,7 +207,7 @@ function onDrop(event: DragEvent) {
             @drop.prevent="onDrop"
             @dragenter.prevent="dragEnter"
             @dragleave.prevent="dragLeave">
-            <b-tooltip :target="tooltipTargetId" :show="showTooltip">
+            <b-tooltip :target="id" :show="showTooltip">
                 {{ reason }}
             </b-tooltip>
             <FontAwesomeIcon class="terminal-icon" icon="fa-chevron-circle-right" />
diff --git a/client/src/components/Workflow/Editor/NodeOutput.vue b/client/src/components/Workflow/Editor/NodeOutput.vue
index 140327f5e990..70d44cc3f2cb 100644
--- a/client/src/components/Workflow/Editor/NodeOutput.vue
+++ b/client/src/components/Workflow/Editor/NodeOutput.vue
@@ -310,7 +310,8 @@ const removeTagsAction = computed(() => {
                 <button
                     v-if="showCalloutActiveOutput"
                     v-b-tooltip
-                    class="callout-terminal inline-icon-button"
+                    class="callout-terminal inline-icon-button mark-terminal"
+                    :class="{ 'mark-terminal-active': workflowOutput }"
                     title="Checked outputs will become primary workflow outputs and are available as subworkflow outputs."
                     @click="onToggleActive">
                     <FontAwesomeIcon v-if="workflowOutput" fixed-width icon="fa-check-square" />
@@ -319,7 +320,8 @@ const removeTagsAction = computed(() => {
                 <button
                     v-if="showCalloutVisible"
                     v-b-tooltip
-                    class="callout-terminal inline-icon-button"
+                    class="callout-terminal inline-icon-button mark-terminal"
+                    :class="{ 'mark-terminal-visible': isVisible, 'mark-terminal-hidden': !isVisible }"
                     :title="visibleHint"
                     @click="onToggleVisible">
                     <FontAwesomeIcon v-if="isVisible" fixed-width icon="fa-eye" />
diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 5430b24790d8..72b5088cfbd6 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -675,7 +675,7 @@ workflow_editor:
         selector: '//div[contains(@class, "output-data-row") and contains(string(), "${output_name} (${extension})")]'
       output_terminal: "${_} [output-name='${name}']"
       input_terminal: "${_} [input-name='${name}']"
-      input_mapping_icon: "${_} [input-name='${name}'].multiple"
+      input_mapping_icon: "${_} [input-name='${name}'].mapped-over"
       workflow_output_toggle: "${_} [data-output-name='${name}'] .callout-terminal "
       workflow_output_toggle_active: "${_} [data-output-name='${name}'] .mark-terminal-active"
   selectors:
@@ -770,7 +770,7 @@ workflow_editor:
     tool_version_button: ".tool-versions"
     connector_for: "#connection-${sink_id}-${source_id}"
     connector_invalid_for: "#connection-${sink_id}-${source_id} .connection.invalid"
-    connector_destroy_callout: '.delete-terminal'
+    connector_destroy_callout: '.delete-terminal-button'
     save_button: '.editor-button-save'
     save_workflow_confirmation_button: '#save-workflow-confirmation .btn-primary'
     state_modal_body: '.state-upgrade-modal'

From fd20f7bd4e8dcd5910b74b37ba77877855748138 Mon Sep 17 00:00:00 2001
From: Laila Los <44241786+ElectronicBlueberry@users.noreply.github.com>
Date: Fri, 11 Aug 2023 11:55:37 +0200
Subject: [PATCH 25/25] fix connector_destroy_callout selector

---
 client/src/utils/navigation/navigation.yml       | 2 +-
 lib/galaxy_test/selenium/test_workflow_editor.py | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/utils/navigation/navigation.yml b/client/src/utils/navigation/navigation.yml
index 72b5088cfbd6..dc4ba8c866e8 100644
--- a/client/src/utils/navigation/navigation.yml
+++ b/client/src/utils/navigation/navigation.yml
@@ -676,6 +676,7 @@ workflow_editor:
       output_terminal: "${_} [output-name='${name}']"
       input_terminal: "${_} [input-name='${name}']"
       input_mapping_icon: "${_} [input-name='${name}'].mapped-over"
+      connector_destroy_callout: "${_} [input-name='${name}'] + .delete-terminal-button"
       workflow_output_toggle: "${_} [data-output-name='${name}'] .callout-terminal "
       workflow_output_toggle_active: "${_} [data-output-name='${name}'] .mark-terminal-active"
   selectors:
@@ -770,7 +771,6 @@ workflow_editor:
     tool_version_button: ".tool-versions"
     connector_for: "#connection-${sink_id}-${source_id}"
     connector_invalid_for: "#connection-${sink_id}-${source_id} .connection.invalid"
-    connector_destroy_callout: '.delete-terminal-button'
     save_button: '.editor-button-save'
     save_workflow_confirmation_button: '#save-workflow-confirmation .btn-primary'
     state_modal_body: '.state-upgrade-modal'
diff --git a/lib/galaxy_test/selenium/test_workflow_editor.py b/lib/galaxy_test/selenium/test_workflow_editor.py
index 050d64879a8b..7156a33962fb 100644
--- a/lib/galaxy_test/selenium/test_workflow_editor.py
+++ b/lib/galaxy_test/selenium/test_workflow_editor.py
@@ -269,7 +269,7 @@ def test_non_data_connections(self):
         tool_node = editor.node._(label="tool_exec")
         tool_input = tool_node.input_terminal(name="inttest")
         self.hover_over(tool_input.wait_for_visible())
-        editor.connector_destroy_callout.wait_for_and_click()
+        tool_node.connector_destroy_callout(name="inttest").wait_for_and_click()
         self.assert_not_connected("input_int#output", "tool_exec#inttest")
         self.screenshot("workflow_editor_parameter_connection_destroyed")
 
@@ -352,9 +352,9 @@ def test_existing_connections(self):
         cat_node = editor.node._(label="first_cat")
         cat_input = cat_node.input_terminal(name="input1")
         self.hover_over(cat_input.wait_for_visible())
-        editor.connector_destroy_callout.wait_for_visible()
+        cat_node.connector_destroy_callout(name="input1").wait_for_visible()
         self.screenshot("workflow_editor_connection_callout")
-        editor.connector_destroy_callout.wait_for_and_click()
+        cat_node.connector_destroy_callout(name="input1").wait_for_and_click()
         self.assert_not_connected("input1#output", "first_cat#input1")
         self.screenshot("workflow_editor_connection_destroyed")
 
@@ -1181,7 +1181,7 @@ def workflow_editor_destroy_connection(self, sink):
         sink_node = editor.node._(label=sink_node_label)
         sink_input = sink_node.input_terminal(name=sink_input_name).wait_for_visible()
         self.hover_over(sink_input)
-        editor.connector_destroy_callout.wait_for_and_click()
+        sink_node.connector_destroy_callout(name=sink_input_name).wait_for_and_click()
 
     def assert_input_mapped(self, sink):
         editor = self.components.workflow_editor