workflow annotations

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

@@ -55,6 +55,21 @@
 		<!-- data -->
 		<template #data>
 			<ContextMenu ref="contextMenu" :model="contextMenuItems" style="white-space: nowrap; width: auto" />
+			<tera-canvas-item
+				v-for="annotation in wf.annotations"
+				:key="annotation.id"
+				:style="{ width: `300px`, top: `${annotation.y}px`, left: `${annotation.x}px` }"
+				@dragging="(event) => updateAnnotationPosition(annotation, event)"
+			>
+				<Inplace :closable="true" close-icon="pi pi-check" class="inplace">
+					<template #display>
+						{{ annotation.text || 'Click to edit' }}
+					</template>
+					<template #content>
+						<InputText v-model="annotation.text" autofocus class="annotation-input" />
+					</template>
+				</Inplace>
+			</tera-canvas-item>
 			<tera-canvas-item
 				v-for="node in wf.nodes"
 				:key="node.id"
@@ -165,7 +180,7 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import TeraInfiniteCanvas from '@/components/widgets/tera-infinite-canvas.vue';
 import TeraCanvasItem from '@/components/widgets/tera-canvas-item.vue';
 import type { Position } from '@/types/common';
-import type { Operation, Workflow, WorkflowEdge, WorkflowNode, WorkflowOutput, WorkflowPort } from '@/types/workflow';
+import type { Operation, Workflow, WorkflowAnnotation, WorkflowEdge, WorkflowNode, WorkflowOutput, WorkflowPort } from '@/types/workflow';
 import { WorkflowDirection, WorkflowPortStatus, OperatorStatus } from '@/types/workflow';
 // Operation imports
 import TeraOperator from '@/components/operator/tera-operator.vue';
@@ -179,8 +194,8 @@ import * as d3 from 'd3';
 import { AssetType, EventType } from '@/types/Types';
 import { useDragEvent } from '@/services/drag-drop';
 import { v4 as uuidv4 } from 'uuid';
+import Inplace from 'primevue/inplace';
 import { getLocalStorageTransform, setLocalStorageTransform } from '@/utils/localStorage';
-
 import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
 
 import { logger } from '@/utils/logger';
@@ -430,6 +445,11 @@ const cloneNoteBookSessions = async () => {
 	}
 };
 
+const addAnnotationToWorkflow = () => {
+	workflowService.addAnnotation(wf.value, newNodePosition);
+	workflowDirty = true;
+};
+
 const addOperatorToWorkflow: Function =
 	(operator: OperatorImport, nodeSize: OperatorNodeSize = OperatorNodeSize.medium) =>
 	() => {
@@ -539,6 +559,17 @@ const contextMenuItems: MenuItem[] = [
 				command: addOperatorToWorkflow(OptimizeCiemssOp)
 			}
 		]
+	},
+	{
+		label: 'Misc',
+		items: [
+			{
+				label: 'Annotate canvas',
+				command: () => {
+					addAnnotationToWorkflow();
+				}
+			}
+		]
 	}
 ];
 const addComponentMenu = ref();
@@ -797,6 +828,13 @@ function updateEdgePositions(node: WorkflowNode<any>, { x, y }) {
 	});
 }
 
+const updateAnnotationPosition = (annotation: WorkflowAnnotation, { x, y }) => {
+	if (!isMouseOverCanvas) return;
+	annotation.x += x / canvasTransform.k;
+	annotation.y += y / canvasTransform.k;
+	workflowDirty = true;
+};
+
 const updatePosition = (node: WorkflowNode<any>, { x, y }) => {
 	const teraNode = teraOperatorRefs.value.find((operatorNode) => operatorNode.id === node.id);
 	if (teraNode.isEditing ?? false) {
@@ -919,6 +957,11 @@ onUnmounted(() => {
 	gap: var(--gap-small);
 }
 
+.inplace:deep(.p-button.p-button-icon-only) {
+	color: var(--surface-0);
+	border: solid 1px var(--primary-color);
+}
+
 .rename-workflow {
 	display: flex;
 	align-items: center;

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

@@ -12,7 +12,8 @@ import type {
 	WorkflowEdge,
 	WorkflowNode,
 	WorkflowPort,
-	WorkflowOutput
+	WorkflowOutput,
+	WorkflowAnnotation
 } from '@/types/workflow';
 import { WorkflowPortStatus, OperatorStatus } from '@/types/workflow';
 import { summarizeNotebook } from './beaker';
@@ -57,6 +58,20 @@ function getOperatorNodeSize(size: OperatorNodeSize): Size {
 	}
 }
 
+export const addAnnotation = (wf: Workflow, pos: Position) => {
+	const annotation: WorkflowAnnotation = {
+		id: uuidv4(),
+		x: pos.x,
+		y: pos.y,
+		text: '',
+		references: []
+	};
+	if (!wf.annotations) {
+		wf.annotations = [];
+	}
+	wf.annotations.push(annotation);
+};
+
 export const addNode = (
 	wf: Workflow,
 	op: Operation,

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

@@ -128,6 +128,15 @@ export interface WorkflowNode<S> {
 	status: OperatorStatus;
 }
 
+export interface WorkflowAnnotation {
+	id: string;
+	text: string;
+
+	x: number;
+	y: number;
+	references: string[];
+}
+
 export interface WorkflowEdge {
 	id: string;
 	workflowId: string;
@@ -159,6 +168,8 @@ export interface Workflow {
 	name: string;
 	description: string;
 
+	annotations?: WorkflowAnnotation[];
+
 	// zoom x-y translate and zoom
 	transform: Transform;
 	nodes: WorkflowNode<any>[];