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>[];