Added chart annotation control UI

packages/client/hmi-client/src/components/widgets/tera-chart-settings-panel.vue

@@ -6,26 +6,88 @@
 				<h4>Chart Settings</h4>
 			</header>
 			<div class="content">
-				<div v-if="annotations !== undefined">
+				<div v-if="chartAnnotations !== undefined" class="annotation-items">
 					<h5>Annotations</h5>
-					<p>Not yet implemented</p>
+					<div v-for="annotation in chartAnnotations" :key="annotation.id" class="annotation-item">
+						{{ annotation.description }}
+						<span class="btn-wrapper">
+							<Button icon="pi pi-trash" rounded text @click="$emit('delete-annotation', annotation.id)" />
+						</span>
+					</div>
+					<div>
+						<Button
+							v-if="!showAnnotationInput"
+							class="p-button-sm p-button-text"
+							icon="pi pi-plus"
+							label="Add annotation"
+							@click="showAnnotationInput = true"
+						/>
+						<tera-input-text
+							v-if="showAnnotationInput"
+							v-model="generateAnnotationQuery"
+							:icon="'pi pi-sparkles'"
+							:placeholder="'What do you want to annotate?'"
+							:disabled="!!isGeneratingAnnotation"
+							@keyup.enter="createAnnotationDebounced"
+							@keyup.esc="cancelGenerateAnnotation"
+						/>
+					</div>
 				</div>
 			</div>
 		</div>
 	</transition>
 </template>
 
 <script setup lang="ts">
+import _ from 'lodash';
+import { ref, computed } from 'vue';
 import Button from 'primevue/button';
 import { ChartSetting } from '@/types/common';
 import { ChartAnnotation } from '@/types/Types';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
 
-defineProps<{
+const props = defineProps<{
 	activeSettings: ChartSetting | null;
 	annotations?: ChartAnnotation[];
+	/**
+	 * We receives generateAnnotation as a functor from the parent to access the parent scope directly. This allows us to utilize dependencies defined in the parent component without passing them all as props, which can be cumbersome.
+	 * Additionally, it enables us to handle post-generation actions (like resetting loading state or clearing input) after function completion.
+	 * @param setting ChartSetting
+	 * @param query llm query to generate annotation
+	 */
+	generateAnnotation?: (setting: ChartSetting, query: string) => Promise<ChartAnnotation>;
 }>();
 
-defineEmits(['close', 'update:settings']);
+const emit = defineEmits(['close', 'update:settings', 'delete-annotation', 'create-annotation']);
+
+const chartAnnotations = computed(() => {
+	if (props.annotations === undefined) {
+		return undefined;
+	}
+	return props.annotations.filter((annotation) => annotation.chartId === props.activeSettings?.id);
+});
+const isGeneratingAnnotation = ref(false);
+const generateAnnotationQuery = ref<string>('');
+const showAnnotationInput = ref<Boolean>(false);
+
+const createAnnotation = async () => {
+	if (props.generateAnnotation === undefined || props.activeSettings === null) {
+		return;
+	}
+	isGeneratingAnnotation.value = true;
+	const newAnnotation = await props.generateAnnotation(props.activeSettings, generateAnnotationQuery.value);
+	isGeneratingAnnotation.value = false;
+	showAnnotationInput.value = false;
+	generateAnnotationQuery.value = '';
+	emit('create-annotation', newAnnotation);
+};
+// Note: For some reason, @keyup.enter event on <tera-input-text> is fired twice. Let's introduce a debounced function to make sure the function is called only once.
+const createAnnotationDebounced = _.debounce(createAnnotation, 100);
+
+const cancelGenerateAnnotation = () => {
+	generateAnnotationQuery.value = '';
+	showAnnotationInput.value = false;
+};
 </script>
 
 <style scoped>
@@ -71,5 +133,27 @@ defineEmits(['close', 'update:settings']);
 	.content {
 		padding: var(--gap-4);
 	}
+
+	.annotation-items {
+		display: flex;
+		flex-direction: column;
+		gap: var(--gap-2);
+
+		.annotation-item {
+			position: relative;
+			padding: var(--gap-2);
+			padding-right: var(--gap-9);
+			background: var(--surface-50);
+		}
+		.btn-wrapper {
+			position: absolute;
+			top: 0;
+			right: var(--gap-2);
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			height: 100%;
+		}
+	}
 }
 </style>

packages/client/hmi-client/src/components/widgets/tera-input-text.vue

@@ -40,7 +40,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['update:model-value', 'blur', 'focus']);
 const inputField = ref<HTMLInputElement | null>(null);
-const getDisabled = props.disabled ?? false;
+const getDisabled = computed(() => props.disabled ?? false);
 const isFocused = ref(false);
 
 const focusInput = () => {

packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue

@@ -271,8 +271,13 @@
 			>
 				<template #overlay>
 					<tera-chart-settings-panel
-						:annotations="[]"
+						:annotations="
+							activeChartSettings?.type === ChartSettingType.VARIABLE_COMPARISON ? chartAnnotations : undefined
+						"
 						:active-settings="activeChartSettings"
+						:generate-annotation="generateAnnotation"
+						@create-annotation="addChartAnnotation"
+						@delete-annotation="removeChartAnnotation"
 						@close="activeChartSettings = null"
 					/>
 				</template>
@@ -352,6 +357,7 @@
 <script setup lang="ts">
 import _ from 'lodash';
 import * as vega from 'vega';
+import { v4 as uuidv4 } from 'uuid';
 import { csvParse, autoType, mean, variance } from 'd3';
 import { computed, onMounted, ref, shallowRef, watch } from 'vue';
 import Button from 'primevue/button';
@@ -376,7 +382,8 @@ import {
 	CsvAsset,
 	DatasetColumn,
 	ModelConfiguration,
-	AssetType
+	AssetType,
+	ChartAnnotation
 } from '@/types/Types';
 import { CiemssPresetTypes, DrilldownTabs, ChartSetting, ChartSettingType } from '@/types/common';
 import { getTimespan, drilldownChartSize, nodeMetadata } from '@/components/workflow/util';
@@ -569,6 +576,35 @@ const selectedErrorVariables = computed(() =>
 		.map((setting) => setting.selectedVariables[0])
 );
 
+const chartAnnotations = ref<ChartAnnotation[]>([]);
+const generateAnnotation = async (setting: ChartSetting, query: string) => {
+	// Generate fake annotation. The annotation generation logic for the specific chart setting should go here
+	// Different chart settings type may have different annotation generation logic
+	await new Promise((resolve) => {
+		setTimeout(resolve, 1000);
+	});
+	const annotation: ChartAnnotation = {
+		id: uuidv4(),
+		description: query,
+		nodeId: props.node.id,
+		outputId: '',
+		chartId: setting.id,
+		layerSpec: {},
+		llmGenerated: false,
+		metadata: {}
+	};
+	return annotation;
+};
+const addChartAnnotation = (annotation: ChartAnnotation) => {
+	chartAnnotations.value.push(annotation);
+};
+const removeChartAnnotation = (annotationId: string) => {
+	const index = chartAnnotations.value.findIndex((annotation) => annotation.id === annotationId);
+	if (index !== -1) {
+		chartAnnotations.value.splice(index, 1);
+	}
+};
+
 const pyciemssMap = ref<Record<string, string>>({});
 const preparedChartInputs = computed(() => {
 	const state = props.node.state;