Display optional output connections as dashed lines

client/src/components/Workflow/Editor/Connector.vue

@@ -1,12 +1,7 @@
 <template>
-    <g :id="id" class="ribbon">
+    <g :id="id" :class="ribbonClasses">
         <g v-for="svgLine in paths" :key="svgLine">
-            <path
-                v-b-tooltip:hover="`my message`"
-                class="ribbon-outer"
-                :d="svgLine"
-                :stroke-width="stroke.outerStroke"
-                fill="none"></path>
+            <path class="ribbon-outer" :d="svgLine" :stroke-width="stroke.outerStroke" fill="none"></path>
             <path :class="innerClass" :d="svgLine" :stroke-width="stroke.innerStroke" fill="none"></path>
         </g>
     </g>
@@ -23,12 +18,14 @@ const props = withDefaults(
         inputIsMappedOver: boolean;
         outputIsMappedOver: boolean;
         connectionIsValid?: boolean;
+        nullable?: boolean;
     }>(),
     {
         id: undefined,
         inputIsMappedOver: false,
         outputIsMappedOver: false,
         connectionIsValid: true,
+        nullable: false,
     }
 );
 
@@ -47,6 +44,7 @@ const stroke = computed(() => {
     return { innerStroke, outerStroke };
 });
 
+const ribbonClasses = computed(() => (props.nullable ? "ribbon dashed" : "ribbon"));
 const innerClass = computed(() => (props.connectionIsValid ? "ribbon-inner" : "ribbon-inner ribbon-inner-invalid"));
 
 const offsets = computed(() => {

client/src/components/Workflow/Editor/TerminalConnector.vue

@@ -5,7 +5,8 @@
         :position="position"
         :output-is-mapped-over="outputIsMappedOver"
         :input-is-mapped-over="inputIsMappedOver"
-        :connection-is-valid="connectionIsValid"></raw-connector>
+        :connection-is-valid="connectionIsValid"
+        :nullable="outputIsOptional"></raw-connector>
 </template>
 
 <script lang="ts" setup>
@@ -23,6 +24,14 @@ const stepStore = useWorkflowStepStore();
 const connectionStore = useConnectionStore();
 const outputIsMappedOver = computed(() => stepStore.stepMapOver[props.connection.output.stepId]?.isCollection);
 const inputIsMappedOver = computed(() => stepStore.stepMapOver[props.connection.input.stepId]?.isCollection);
+const outputIsOptional = computed(() => {
+    return Boolean(
+        stepStore.getStep(props.connection.output.stepId)?.when ||
+            stepStore
+                .getStep(props.connection.output.stepId)
+                ?.outputs.find((output) => output.name === props.connection.output.name && output.optional)
+    );
+});
 
 // move into connection store ?
 // move all of terminal logic into connection store ?

client/src/components/Workflow/Editor/WorkflowEdges.vue

@@ -26,6 +26,10 @@ const dragStyle = computed(() => {
     }
     return dragStyle;
 });
+
+const dragIsOptional = computed(() => {
+    return props.draggingTerminal?.optional;
+});
 </script>
 <template>
     <div>
@@ -35,7 +39,8 @@ const dragStyle = computed(() => {
                 v-if="draggingTerminal && draggingConnection"
                 :position="draggingConnection"
                 :input-is-mapped-over="false"
-                :output-is-mapped-over="draggingTerminal.mapOver.isCollection"></raw-connector>
+                :output-is-mapped-over="draggingTerminal.mapOver.isCollection"
+                :nullable="dragIsOptional"></raw-connector>
             <terminal-connector
                 v-for="connection in connections"
                 :key="connection.id"

client/src/stores/workflowStepStore.ts

@@ -105,6 +105,7 @@ export interface NewStep {
     tooltip?: string;
     type: "tool" | "data_input" | "data_collection_input" | "subworkflow" | "parameter_input" | "pause";
     uuid?: string;
+    when?: string;
     workflow_outputs?: WorkflowOutput[];
 }
 

client/src/style/scss/workflow.scss

@@ -117,6 +117,9 @@
                 .ribbon-inner-invalid {
                     stroke: $brand-warning;
                 }
+                &.dashed {
+                    stroke-dasharray: 5, 3;
+                }
                 &:hover .ribbon-outer {
                     stroke: $brand-success;
                 }