refactor: tweaks to operator outputs

packages/client/hmi-client/src/services/workflow.ts

@@ -193,15 +193,19 @@ const defaultPortLabels = {
 	datasetId: 'Dataset'
 };
 
-export function getPortLabel({ label, type }: WorkflowPort) {
-	if (label) return label; // Return name of port value
-
-	// Return default label using port type
-	if (defaultPortLabels[type]) {
-		return defaultPortLabels[type];
+export function getPortLabel({ label, type, isOptional }: WorkflowPort) {
+	let portLabel = type; // Initialize to port type (fallback)
+
+	// Assign to name of port value
+	if (label) portLabel = label;
+	// Assign to default label using port type
+	else if (defaultPortLabels[type]) {
+		portLabel = defaultPortLabels[type];
 	}
 
-	return type; // Show type when it lacks a default name
+	if (isOptional) portLabel = portLabel.concat(' (optional)');
+
+	return portLabel;
 }
 
 /**

packages/client/hmi-client/src/workflow/operator/tera-operator-inputs.vue

@@ -1,5 +1,5 @@
 <template>
-	<ul v-if="!isEmpty(inputs)">
+	<ul>
 		<li
 			v-for="(input, index) in inputs"
 			:key="index"
@@ -15,10 +15,7 @@
 					<div class="port" />
 				</div>
 				<span>
-					<label>
-						{{ getPortLabel(input) }}
-						{{ input.isOptional ? '(optional)' : '' }}
-					</label>
+					<label>{{ getPortLabel(input) }}</label>
 					<!--TODO: label is a string type not an array consider adding this back in if we support an array of labels-->
 					<!-- <label v-for="(label, labelIdx) in input.label?.split(',') ?? []" :key="labelIdx">
 					{{ label }}
@@ -40,7 +37,6 @@
 import { PropType } from 'vue';
 import { WorkflowPort, WorkflowPortStatus, WorkflowDirection } from '@/types/workflow';
 import { getPortLabel } from '@/services/workflow';
-import { isEmpty } from 'lodash';
 import Button from 'primevue/button';
 
 const emit = defineEmits([

packages/client/hmi-client/src/workflow/operator/tera-operator-outputs.vue

@@ -1,5 +1,5 @@
 <template>
-	<ul v-if="!isEmpty(outputs)">
+	<ul>
 		<li
 			v-for="(output, index) in outputs"
 			:key="index"
@@ -37,7 +37,6 @@
 <script setup lang="ts">
 import { PropType } from 'vue';
 import { WorkflowPort, WorkflowPortStatus, WorkflowDirection } from '@/types/workflow';
-import { isEmpty } from 'lodash';
 import Button from 'primevue/button';
 
 const emit = defineEmits([

packages/client/hmi-client/src/workflow/ops/dataset/tera-dataset-node.vue

@@ -75,7 +75,7 @@ watch(
 		if (dataset?.value?.id && dataset?.value?.fileNames && dataset?.value?.fileNames?.length > 0) {
 			rawContent.value = await downloadRawFile(dataset.value.id, dataset.value?.fileNames[0] ?? '');
 			selectedColumns = ref(csvHeaders?.value);
-			// Once dataset is selected
+			// Once a dataset is selected the output is assigned here, if there is already an output do not reassign
 			if (isEmpty(props.node.outputs)) {
 				emit('select-dataset', { id: dataset.value.id, name: dataset.value.name });
 			}

packages/client/hmi-client/src/workflow/tera-operator.vue

@@ -9,7 +9,7 @@
 		/>
 		<tera-operator-inputs
 			:inputs="node.inputs"
-			@port-mouseover="(event) => mouseoverPort(event, 'input')"
+			@port-mouseover="(event) => mouseoverPort(event, PortDirection.Input)"
 			@port-mouseleave="emit('port-mouseleave')"
 			@port-selected="(input: WorkflowPort, direction: WorkflowDirection) => emit('port-selected', input, direction)"
 			@remove-edges="(portId: string) => emit('remove-edges', portId)"
@@ -20,7 +20,7 @@
 		</section>
 		<tera-operator-outputs
 			:outputs="node.outputs"
-			@port-mouseover="(event) => mouseoverPort(event, 'output')"
+			@port-mouseover="(event) => mouseoverPort(event, PortDirection.Output)"
 			@port-mouseleave="emit('port-mouseleave')"
 			@port-selected="(input: WorkflowPort, direction: WorkflowDirection) => emit('port-selected', input, direction)"
 			@remove-edges="(portId: string) => emit('remove-edges', portId)"
@@ -39,6 +39,11 @@ import TeraOperatorHeader from './operator/tera-operator-header.vue';
 import TeraOperatorInputs from './operator/tera-operator-inputs.vue';
 import TeraOperatorOutputs from './operator/tera-operator-outputs.vue';
 
+enum PortDirection {
+	Input,
+	Output
+}
+
 const props = defineProps<{
 	node: WorkflowNode<any>;
 	canDrag: boolean;
@@ -119,11 +124,12 @@ function openInNewWindow() {
 	floatingWindow.open(url);
 }
 
-function mouseoverPort(event: MouseEvent, portDirection: 'input' | 'output') {
+function mouseoverPort(event: MouseEvent, portDirection: PortDirection) {
 	const el = event.target as HTMLElement;
 	const portElement = (el.querySelector('.port') as HTMLElement) ?? el;
 	const nodePosition: Position = { x: props.node.x, y: props.node.y };
-	const totalOffsetX = portElement.offsetLeft + (portDirection === 'input' ? 0 : portBaseSize);
+	const totalOffsetX =
+		portElement.offsetLeft + (portDirection === PortDirection.Input ? 0 : portBaseSize);
 	const totalOffsetY = portElement.offsetTop + portElement.offsetHeight / 2;
 	const portPosition = { x: nodePosition.x + totalOffsetX, y: nodePosition.y + totalOffsetY };
 	emit('port-mouseover', portPosition);
@@ -177,6 +183,10 @@ ul {
 	color: var(--text-color-secondary);
 }
 
+ul:empty {
+	display: none;
+}
+
 :deep(ul .p-button.p-button-sm) {
 	font-size: var(--font-caption);
 	min-width: fit-content;