From 54325de924a884954940553fbfeb1395df556dd2 Mon Sep 17 00:00:00 2001
From: Brittany Kondo <bkondo@uncharted.software>
Date: Thu, 10 Oct 2024 12:30:53 -0400
Subject: [PATCH] 5026 feat cleanup calibrate settings panel (#5071)

Co-authored-by: Brittany Kondo <bkondo@brittanys-mbp.home>
Co-authored-by: Brittany Kondo <bkondo@Brittanys-MacBook-Pro.local>
---
 .../tera-calibrate-ciemss-drilldown.vue       | 91 ++++++++++---------
 1 file changed, 48 insertions(+), 43 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
index fe1753502f..6eb7f3f3e0 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue
@@ -15,7 +15,7 @@
 			>
 				<template #content>
 					<div class="toolbar">
-						<p>Click Run to begin calibrating.</p>
+						<p>Set your mapping, calibration and visualization settings then click run.</p>
 						<span class="flex gap-2">
 							<tera-pyciemss-cancel-button class="mr-auto" :simulation-run-id="cancelRunId" />
 							<Button label="Run" icon="pi pi-play" @click="runCalibrate" :disabled="disableRunButton" />
@@ -26,12 +26,12 @@
 					<div class="form-section">
 						<h5 class="mb-1">Mapping</h5>
 						<p class="mb-2">
-							Select a subset of output variables of the model and individually assosiate them to columns in the
+							Select a subset of output variables of the model and individually associate them to columns in the
 							dataset.
 						</p>
 
 						<!-- Mapping table: Time variables -->
-						<div class="input-row">
+						<div class="input-row mapping-input">
 							<div class="label-and-input">
 								<label class="column-header">Model: Timeline variable</label>
 								<tera-input-text disabled model-value="timestamp" />
@@ -101,11 +101,19 @@
 
 					<!-- Mapping section -->
 					<section class="form-section">
-						<h5 class="mb-1">
-							Calibration settings
-							<i v-tooltip="calibrationSettingsToolTip" class="pi pi-info-circle info-circle" />
-						</h5>
-						<p class="mb-2">Select one of the presets or customize the settings below.</p>
+						<h5 class="mb-1">Calibration settings</h5>
+						<div class="input-row">
+							<div class="label-and-input">
+								<label>Start time</label>
+								<tera-input-text disabled model-value="0" />
+							</div>
+							<div class="label-and-input">
+								<label for="num-samples">End time</label>
+								<tera-input-number inputId="integeronly" v-model="knobs.endTime" />
+							</div>
+						</div>
+						<div class="spacer m-2" />
+						<p class="mb-1">Preset (optional)</p>
 						<div class="label-and-input">
 							<Dropdown
 								v-model="presetType"
@@ -114,28 +122,22 @@
 								@update:model-value="setPresetValues"
 							/>
 						</div>
+						<label class="mb-1 p-text-secondary text-sm">
+							<i class="pi pi-info-circle" />
+							This impacts solver method, iterations and learning rate.
+						</label>
 						<div class="mt-1 additional-settings">
-							<p>
-								Number of Samples
-								<i v-tooltip="numberOfSamplesTooltip" class="pi pi-info-circle info-circle" />
-							</p>
-							<div class="input-row">
-								<div class="label-and-input">
-									<tera-input-number
-										inputId="integeronly"
-										v-model="knobs.numSamples"
-										@update:model-value="updateState"
-									/>
-								</div>
+							<div class="label-and-input">
+								<label>Number of Samples</label>
+								<tera-input-number inputId="integeronly" v-model="knobs.numSamples" @update:model-value="updateState" />
 							</div>
 							<div class="spacer m-3" />
-							<p class="font-semibold">
-								ODE solver options
-								<i v-tooltip="odeSolverOptionsTooltip" class="pi pi-info-circle info-circle" />
-							</p>
+
+							<h6 class="mb-2">ODE solver options</h6>
+
 							<div class="input-row">
 								<div class="label-and-input">
-									<label for="5">Method</label>
+									<label for="5">Solver method</label>
 									<Dropdown
 										id="5"
 										v-model="knobs.method"
@@ -144,15 +146,12 @@
 									/>
 								</div>
 								<div class="label-and-input">
-									<label for="num-steps">Step size</label>
+									<label for="num-steps">Solver step size</label>
 									<tera-input-number inputId="integeronly" v-model="knobs.stepSize" />
 								</div>
 							</div>
 							<div class="spacer m-3" />
-							<p class="font-semibold">
-								Inference Options
-								<i v-tooltip="inferenceOptionsTooltip" class="pi pi-info-circle info-circle" />
-							</p>
+							<h6 class="mb-2">Inference Options</h6>
 							<div class="input-row">
 								<div class="label-and-input">
 									<label for="num-iterations">Number of solver iterations</label>
@@ -162,10 +161,6 @@
 										@update:model-value="updateState"
 									/>
 								</div>
-								<div class="label-and-input">
-									<label for="num-samples">End time for forecast</label>
-									<tera-input-number inputId="integeronly" v-model="knobs.endTime" />
-								</div>
 								<div class="label-and-input">
 									<label for="learning-rate">Learning rate</label>
 									<tera-input-number
@@ -324,6 +319,7 @@
 			<tera-slider-panel
 				v-model:is-open="isOutputSettingsPanelOpen"
 				direction="right"
+				class="input-config"
 				header="Output Settings"
 				content-width="360px"
 			>
@@ -562,11 +558,6 @@ const qualityPreset = Object.freeze({
 	learningRate: 0.03
 });
 
-const calibrationSettingsToolTip: string = 'TODO';
-const numberOfSamplesTooltip: string = 'TODO';
-const inferenceOptionsTooltip: string = 'TODO';
-const odeSolverOptionsTooltip: string = 'TODO';
-
 // Model variables checked in the model configuration will be options in the mapping dropdown
 const modelStateOptions = ref<any[] | undefined>();
 
@@ -1220,7 +1211,7 @@ watch(
 /* Mapping table */
 .mapping-table:deep(td) {
 	border: none !important;
-	padding: 0 var(--gap-1) var(--gap-2) 0 !important;
+	padding: 0 var(--gap-2) var(--gap-2) 0 !important;
 	background: var(--surface-100);
 }
 
@@ -1274,7 +1265,11 @@ img {
 .label-and-input {
 	display: flex;
 	flex-direction: column;
-	gap: var(--gap-2);
+	gap: var(--gap-1);
+
+	:deep(input) {
+		text-align: left;
+	}
 }
 .info-circle {
 	color: var(--text-color-secondary);
@@ -1287,7 +1282,7 @@ img {
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	gap: var(--gap-3) var(--gap-2);
+	gap: var(--gap-2);
 	width: 100%;
 
 	& > * {
@@ -1295,6 +1290,11 @@ img {
 	}
 }
 
+/** Make inputs align with mapping table */
+.mapping-input {
+	width: calc(100% - 40px);
+}
+
 .loss-chart {
 	background: var(--surface-a);
 	border: 1px solid var(--surface-border-light);
@@ -1348,6 +1348,11 @@ img {
 
 .additional-settings {
 	background: var(--surface-200);
-	padding: var(--gap-2);
+	padding: var(--gap-3);
+	border-radius: var(--border-radius-medium);
+}
+
+input {
+	text-align: left;
 }
 </style>