From 66e72e5c99fa3f691aff534156bc64c7f8317705 Mon Sep 17 00:00:00 2001
From: Daniel Chang <mwdchang@gmail.com>
Date: Sun, 25 Feb 2024 19:22:10 -0500
Subject: [PATCH 1/2] annotation tests

---
 .../hmi-client/src/services/workflow.ts       | 17 +++++++++-
 .../client/hmi-client/src/types/workflow.ts   | 11 +++++++
 .../hmi-client/src/workflow/tera-workflow.vue | 33 ++++++++++++++++++-
 3 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/packages/client/hmi-client/src/services/workflow.ts b/packages/client/hmi-client/src/services/workflow.ts
index 52e0be6726..15a7248dda 100644
--- a/packages/client/hmi-client/src/services/workflow.ts
+++ b/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';
 
@@ -56,6 +57,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: 'I am a note',
+		references: []
+	};
+	if (!wf.annotations) {
+		wf.annotations = [];
+	}
+	wf.annotations.push(annotation);
+};
+
 export const addNode = (
 	wf: Workflow,
 	op: Operation,
diff --git a/packages/client/hmi-client/src/types/workflow.ts b/packages/client/hmi-client/src/types/workflow.ts
index 2849ebfe34..8631c58100 100644
--- a/packages/client/hmi-client/src/types/workflow.ts
+++ b/packages/client/hmi-client/src/types/workflow.ts
@@ -115,6 +115,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;
@@ -141,6 +150,8 @@ export interface Workflow {
 	name: string;
 	description: string;
 
+	annotations?: WorkflowAnnotation[];
+
 	// zoom x-y translate and zoom
 	transform: {
 		x: number;
diff --git a/packages/client/hmi-client/src/workflow/tera-workflow.vue b/packages/client/hmi-client/src/workflow/tera-workflow.vue
index c284e37427..a4f2611852 100644
--- a/packages/client/hmi-client/src/workflow/tera-workflow.vue
+++ b/packages/client/hmi-client/src/workflow/tera-workflow.vue
@@ -77,6 +77,16 @@
 				: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)"
+			>
+				<div>{{ annotation.text }}</div>
+			</tera-canvas-item>
+
 			<tera-canvas-item
 				v-for="(node, index) in wf.nodes"
 				:key="index"
@@ -197,7 +207,8 @@ import type {
 	WorkflowEdge,
 	WorkflowNode,
 	WorkflowPort,
-	WorkflowOutput
+	WorkflowOutput,
+	WorkflowAnnotation
 } from '@/types/workflow';
 import { WorkflowPortStatus, WorkflowDirection } from '@/types/workflow';
 // Operation imports
@@ -395,6 +406,11 @@ const duplicateBranch = (id: string) => {
 	workflowService.branchWorkflow(wf.value, id);
 };
 
+const addAnnotationToWorkflow = () => {
+	workflowService.addAnnotation(wf.value, newNodePosition);
+	workflowDirty = true;
+};
+
 const addOperatorToWorkflow: Function =
 	(operator: OperatorImport, nodeSize: OperatorNodeSize = OperatorNodeSize.medium) =>
 	() => {
@@ -514,6 +530,14 @@ const contextMenuItems: MenuItem[] = [
 			}
 		]
 	},
+	// Add annotations
+	{
+		label: 'Add annotation',
+		command: () => {
+			console.log('adding annotation');
+			addAnnotationToWorkflow();
+		}
+	},
 	// Agent LLM
 	{
 		label: "Ask 'em LLM tool",
@@ -760,6 +784,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 }) => {
 	if (!isMouseOverCanvas) return;
 	node.x += x / canvasTransform.k;

From 151a7c17013c3e91dc614a44d3148538163905c2 Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Tue, 27 Feb 2024 13:00:43 -0500
Subject: [PATCH 2/2] Added inplace edit, modified labels, minor styling

---
 .../client/hmi-client/src/services/workflow.ts |  2 +-
 .../hmi-client/src/workflow/tera-workflow.vue  | 18 +++++++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/client/hmi-client/src/services/workflow.ts b/packages/client/hmi-client/src/services/workflow.ts
index 15a7248dda..4d19663c78 100644
--- a/packages/client/hmi-client/src/services/workflow.ts
+++ b/packages/client/hmi-client/src/services/workflow.ts
@@ -62,7 +62,7 @@ export const addAnnotation = (wf: Workflow, pos: Position) => {
 		id: uuidv4(),
 		x: pos.x,
 		y: pos.y,
-		text: 'I am a note',
+		text: '',
 		references: []
 	};
 	if (!wf.annotations) {
diff --git a/packages/client/hmi-client/src/workflow/tera-workflow.vue b/packages/client/hmi-client/src/workflow/tera-workflow.vue
index a4f2611852..1de0efe602 100644
--- a/packages/client/hmi-client/src/workflow/tera-workflow.vue
+++ b/packages/client/hmi-client/src/workflow/tera-workflow.vue
@@ -84,7 +84,14 @@
 				:style="{ width: `300px`, top: `${annotation.y}px`, left: `${annotation.x}px` }"
 				@dragging="(event) => updateAnnotationPosition(annotation, event)"
 			>
-				<div>{{ annotation.text }}</div>
+				<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
@@ -223,6 +230,7 @@ import * as d3 from 'd3';
 import { AssetType } from '@/types/Types';
 import { useDragEvent } from '@/services/drag-drop';
 import { v4 as uuidv4 } from 'uuid';
+import Inplace from 'primevue/inplace';
 
 import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
 
@@ -532,9 +540,8 @@ const contextMenuItems: MenuItem[] = [
 	},
 	// Add annotations
 	{
-		label: 'Add annotation',
+		label: 'Annotate canvas',
 		command: () => {
-			console.log('adding annotation');
 			addAnnotationToWorkflow();
 		}
 	},
@@ -888,4 +895,9 @@ function resetZoom() {
 	flex-direction: row;
 	gap: var(--gap-small);
 }
+
+.inplace:deep(.p-button.p-button-icon-only) {
+	color: var(--surface-0);
+	border: solid 1px var(--primary-color);
+}
 </style>