Calibrate timestamp field UI tweak

packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/calibrate-operation.ts

@@ -2,6 +2,7 @@ import { Operation, WorkflowOperationTypes, BaseState } from '@/types/workflow';
 import { ChartSetting } from '@/types/common';
 import { CalibrateMap } from '@/services/calibrate-workflow';
 import calibrateSimulateCiemss from '@assets/svg/operator-images/calibrate-simulate-probabilistic.svg';
+import { v4 as uuidv4 } from 'uuid';
 
 const DOCUMENTATION_URL = 'https://github.com/ciemss/pyciemss/blob/main/pyciemss/interfaces.py#L529';
 
@@ -52,7 +53,7 @@ export const CalibrationOperationCiemss: Operation = {
 		const init: CalibrationOperationStateCiemss = {
 			method: 'dopri5',
 			chartSettings: null,
-			mapping: [{ modelVariable: '', datasetVariable: '' }],
+			mapping: [{ id: uuidv4(), modelVariable: 'timestamp', datasetVariable: '' }],
 			simulationsInProgress: [],
 			currentProgress: 0,
 			inProgressPreForecastId: '',

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

@@ -26,13 +26,59 @@ t d
 					<!-- Mapping section -->
 					<div class="form-section">
 						<h5 class="mb-1">Mapping</h5>
-						<p class="mb-2">Map model variables to dataset columns. Don't forget the timeline variable.</p>
+						<p class="mb-2">
+							Select a subset of output variables of the model and individually assosiate them to columns in the
+							dataset.
+						</p>
+
+						<!-- Mapping table: Time variables -->
+						<DataTable
+							v-if="mapping.find((ele) => ele.modelVariable === 'timestamp')"
+							class="mapping-table"
+							:value="mapping.filter((ele) => ele.modelVariable === 'timestamp')"
+						>
+							<Column field="modelVariable">
+								<template #header>
+									<span class="column-header">Model: Timeline variable</span>
+								</template>
+								<template #body="{ data, field }">
+									<Dropdown
+										class="w-full"
+										:placeholder="mappingDropdownPlaceholder"
+										v-model="data[field]"
+										:disabled="true"
+										:options="modelStateOptions?.map((ele) => ele.referenceId ?? ele.id)"
+									/>
+								</template>
+							</Column>
+							<Column field="datasetVariable">
+								<template #header>
+									<span class="column-header">Dataset: Timeline variable</span>
+								</template>
+								<template #body="{ data, field }">
+									<Dropdown
+										class="w-full"
+										:placeholder="mappingDropdownPlaceholder"
+										v-model="data[field]"
+										:options="datasetColumns?.map((ele) => ele.name)"
+									/>
+								</template>
+							</Column>
+							<Column field="deleteRow">
+								<template #header>
+									<span class="column-header"></span>
+								</template>
+								<template #body="{ data }">
+									<Button class="p-button-sm p-button-text" icon="pi pi-trash" @click="deleteMapRow(data.id)" />
+								</template>
+							</Column>
+						</DataTable>
 
 						<!-- Mapping table: Other variables -->
-						<DataTable class="mapping-table" :value="mapping">
+						<DataTable class="mapping-table" :value="mapping.filter((ele) => ele.modelVariable !== 'timestamp')">
 							<Column field="modelVariable">
 								<template #header>
-									<span class="column-header">Model variables</span>
+									<span class="column-header">Model: Other variables</span>
 								</template>
 								<template #body="{ data, field }">
 									<Dropdown
@@ -45,7 +91,7 @@ t d
 							</Column>
 							<Column field="datasetVariable">
 								<template #header>
-									<span class="column-header">Dataset variables</span>
+									<span class="column-header">Dataset: Other variables</span>
 								</template>
 								<template #body="{ data, field }">
 									<Dropdown
@@ -60,8 +106,8 @@ t d
 								<template #header>
 									<span class="column-header"></span>
 								</template>
-								<template #body="{ index }">
-									<Button class="p-button-sm p-button-text" icon="pi pi-trash" @click="deleteMapRow(index)" />
+								<template #body="{ data }">
+									<Button class="p-button-sm p-button-text" icon="pi pi-trash" @click="deleteMapRow(data.id)" />
 								</template>
 							</Column>
 						</DataTable>
@@ -76,7 +122,7 @@ t d
 									@click="getAutoMapping"
 								/>
 							</div>
-							<Button class="p-button-sm p-button-text" label="Delete all mapping" @click="deleteMapping" />
+							<Button class="p-button-sm p-button-text" label="Delete all mapping" @click="deleteAllMappings" />
 						</div>
 					</div>
 
@@ -461,6 +507,7 @@ import { useClientEvent } from '@/composables/useClientEvent';
 import { flattenInterventionData, getInterventionPolicyById } from '@/services/intervention-policy';
 import TeraInterventionSummaryCard from '@/components/workflow/ops/simulate-ciemss/tera-intervention-summary-card.vue';
 import { getParameters } from '@/model-representation/service';
+import { v4 as uuidv4 } from 'uuid';
 import type { CalibrationOperationStateCiemss } from './calibrate-operation';
 import { renameFnGenerator, mergeResults, getErrorData } from './calibrate-utils';
 
@@ -975,6 +1022,7 @@ function updateSelectedErrorVariables(event) {
 // Used from button to add new entry to the mapping object
 function addMapping() {
 	mapping.value.push({
+		id: uuidv4(),
 		modelVariable: '',
 		datasetVariable: ''
 	});
@@ -985,16 +1033,17 @@ function addMapping() {
 	emit('update-state', state);
 }
 
-function deleteMapping() {
-	mapping.value = [{ modelVariable: '', datasetVariable: '' }];
+function deleteAllMappings() {
+	mapping.value = [{ id: uuidv4(), modelVariable: 'timestamp', datasetVariable: '' }];
 
 	const state = _.cloneDeep(props.node.state);
 	state.mapping = mapping.value;
 
 	emit('update-state', state);
 }
 
-function deleteMapRow(index: number) {
+function deleteMapRow(id: string) {
+	const index = mapping.value.findIndex((ele) => ele.id === id);
 	mapping.value.splice(index, 1);
 	const state = _.cloneDeep(props.node.state);
 	state.mapping = mapping.value;
@@ -1035,6 +1084,16 @@ const initialize = async () => {
 	datasetColumns.value = datasetOptions;
 
 	getConfiguredModelConfig();
+
+	// look for timestamp col in dataset if its not yet filled in.
+	const timeCol = datasetColumns.value?.find((ele) => ele.name.toLocaleLowerCase().startsWith('time'));
+	if (timeCol) {
+		for (let i = 0; i < mapping.value.length; i++) {
+			if (mapping.value[i].modelVariable === 'timestamp' && mapping.value[i].datasetVariable === '') {
+				mapping.value[i].datasetVariable = timeCol.name;
+			}
+		}
+	}
 };
 
 const onSaveAsModelConfiguration = async () => {
@@ -1175,7 +1234,7 @@ th {
 .column-header {
 	color: var(--text-color-primary);
 	font-size: var(--font-body-small);
-	font-weight: var(--font-weight);
+	font-weight: var(--font-weight-semibold);
 	padding-top: var(--gap-2);
 }
 

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

@@ -4,6 +4,7 @@ import { downloadRawFile, getDataset } from '@/services/dataset';
 import { getUnitsFromModelParts, getModelByModelConfigurationId, getTypesFromModelParts } from '@/services/model';
 
 export interface CalibrateMap {
+	id: string;
 	modelVariable: string;
 	datasetVariable: string;
 }

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

@@ -8,6 +8,7 @@ import { logger } from '@/utils/logger';
 import { isEmpty } from 'lodash';
 import { CalibrateMap } from '@/services/calibrate-workflow';
 import { FIFOCache } from '@/utils/FifoCache';
+import { v4 as uuidv4 } from 'uuid';
 
 interface Entity {
 	id: string;
@@ -253,7 +254,7 @@ const autoCalibrationMapping = async (modelOptions: State[], datasetOptions: Dat
 
 	// rename result to CalibrateMap for users of this function
 	entityResult.forEach((entity) => {
-		result.push({ modelVariable: entity.source, datasetVariable: entity.target });
+		result.push({ id: uuidv4(), modelVariable: entity.source, datasetVariable: entity.target });
 	});
 	return result;
 };