From a23aa24645b6dcdff7d29f70d64c15a18664a350 Mon Sep 17 00:00:00 2001
From: Brittany Kondo <bkondo@uncharted.software>
Date: Tue, 1 Oct 2024 11:54:05 -0400
Subject: [PATCH] Cleanup calibrate drilldown (#4989)

Co-authored-by: Brittany Kondo <bkondo@brittanys-mbp.home>
---
 .../tera-calibrate-ciemss-drilldown.vue       | 202 +++++++++++-------
 .../tera-simulate-ciemss-drilldown.vue        |   3 +-
 2 files changed, 125 insertions(+), 80 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 05f74c9a40..7e92f6ffeb 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
@@ -95,73 +95,78 @@ t d
 								@update:model-value="setPresetValues"
 							/>
 						</div>
-						<div class="spacer m-3" />
-						<p class="">
-							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>
-						<div class="spacer m-3" />
-						<p class="font-semibold">
-							ODE solver options
-							<i v-tooltip="odeSolverOptionsTooltip" class="pi pi-info-circle info-circle" />
-						</p>
-						<div class="input-row">
-							<div class="label-and-input">
-								<label for="5">Method</label>
-								<Dropdown
-									id="5"
-									v-model="knobs.method"
-									:options="[CiemssMethodOptions.dopri5, CiemssMethodOptions.euler]"
-									@update:model-value="updateState"
-								/>
-							</div>
-							<div class="label-and-input">
-								<label for="num-steps">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>
-						<div class="input-row">
-							<div class="label-and-input">
-								<label for="num-iterations">Number of solver iterations</label>
-								<tera-input-number
-									inputId="integeronly"
-									v-model="knobs.numIterations"
-									@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
-									inputId="numberonly"
-									v-model="knobs.learningRate"
-									@update:model-value="updateState"
-								/>
-							</div>
-							<div class="label-and-input">
-								<label>Inference algorithm</label>
-								<tera-input-text disabled model-value="SVI" />
+						<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>
-							<div class="label-and-input">
-								<label>Loss function</label>
-								<tera-input-text disabled model-value="ELBO" />
+							<div class="spacer m-3" />
+							<p class="font-semibold">
+								ODE solver options
+								<i v-tooltip="odeSolverOptionsTooltip" class="pi pi-info-circle info-circle" />
+							</p>
+							<div class="input-row">
+								<div class="label-and-input">
+									<label for="5">Method</label>
+									<Dropdown
+										id="5"
+										v-model="knobs.method"
+										:options="[CiemssMethodOptions.dopri5, CiemssMethodOptions.euler]"
+										@update:model-value="updateState"
+									/>
+								</div>
+								<div class="label-and-input">
+									<label for="num-steps">Step size</label>
+									<tera-input-number inputId="integeronly" v-model="knobs.stepSize" />
+								</div>
 							</div>
-							<div class="label-and-input">
-								<label>Optimizer method</label>
-								<tera-input-text disabled model-value="ADAM" />
+							<div class="spacer m-3" />
+							<p class="font-semibold">
+								Inference Options
+								<i v-tooltip="inferenceOptionsTooltip" class="pi pi-info-circle info-circle" />
+							</p>
+							<div class="input-row">
+								<div class="label-and-input">
+									<label for="num-iterations">Number of solver iterations</label>
+									<tera-input-number
+										inputId="integeronly"
+										v-model="knobs.numIterations"
+										@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
+										inputId="numberonly"
+										v-model="knobs.learningRate"
+										@update:model-value="updateState"
+									/>
+								</div>
+								<div class="label-and-input">
+									<label>Inference algorithm</label>
+									<tera-input-text disabled model-value="SVI" />
+								</div>
+								<div class="label-and-input">
+									<label>Loss function</label>
+									<tera-input-text disabled model-value="ELBO" />
+								</div>
+								<div class="label-and-input">
+									<label>Optimizer method</label>
+									<tera-input-text disabled model-value="ADAM" />
+								</div>
 							</div>
 						</div>
 					</section>
@@ -186,31 +191,38 @@ t d
 
 		<!-- Output section -->
 		<template #preview>
-			<tera-drilldown-section>
+			<tera-drilldown-section v-if="showOutputSection">
 				<template #header-controls-left v-if="configuredModelConfig?.name">
-					<h5>{{ configuredModelConfig.name }}</h5>
+					<h5 class="ml-3">{{ configuredModelConfig.name }}</h5>
 				</template>
 				<template #header-controls-right>
 					<Button
 						label="Save for re-use"
 						severity="secondary"
+						class="mr-3"
 						outlined
 						:disabled="!configuredModelConfig"
 						@click="showSaveModal = true"
 					/>
 				</template>
-				<tera-operator-output-summary v-if="node.state.summaryId && !showSpinner" :summary-id="node.state.summaryId" />
+				<tera-operator-output-summary
+					v-if="node.state.summaryId && !showSpinner"
+					class="p-3"
+					:summary-id="node.state.summaryId"
+				/>
 
 				<!-- Loss chart -->
-				<h5>Loss</h5>
-				<div ref="lossChartContainer">
-					<vega-chart
-						expandable
-						v-if="lossValues.length > 0 || showSpinner"
-						ref="lossChartRef"
-						:are-embed-actions-visible="true"
-						:visualization-spec="lossChartSpec"
-					/>
+				<div class="ml-3 mr-3">
+					<h5>Loss</h5>
+					<div ref="lossChartContainer">
+						<vega-chart
+							expandable
+							v-if="lossValues.length > 0 || showSpinner"
+							ref="lossChartRef"
+							:are-embed-actions-visible="true"
+							:visualization-spec="lossChartSpec"
+						/>
+					</div>
 				</div>
 
 				<!-- Variable charts -->
@@ -284,6 +296,11 @@ t d
 
 				<tera-notebook-error v-if="!_.isEmpty(node.state?.errorMessage?.traceback)" v-bind="node.state.errorMessage" />
 			</tera-drilldown-section>
+			<!-- Empty state if calibrate hasn't been run yet -->
+			<section v-else class="output-section-empty-state">
+				<Vue3Lottie :animationData="EmptySeed" :height="150" loop autoplay />
+				<p class="helpMessage">Click 'Run' to begin calibrating</p>
+			</section>
 		</template>
 
 		<template #sidebar-right>
@@ -407,6 +424,8 @@ import {
 	saveAnnotation,
 	updateChartSettingsBySelectedVariables
 } from '@/services/chart-settings';
+import { Vue3Lottie } from 'vue3-lottie';
+import EmptySeed from '@/assets/images/lottie-empty-seed.json';
 import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue';
 import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue';
 import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
@@ -531,7 +550,7 @@ const modelStateOptions = ref<any[] | undefined>();
 
 const modelParameters = ref<ModelParameter[]>([]);
 
-const isOutputSettingsPanelOpen = ref(true);
+const isOutputSettingsPanelOpen = ref(false);
 const activeChartSettings = ref<ChartSetting | null>(null);
 
 const datasetColumns = ref<DatasetColumn[]>();
@@ -578,6 +597,16 @@ const mappingDropdownPlaceholder = computed(() => {
 	return 'Please wait...';
 });
 
+const showOutputSection = computed(
+	() =>
+		lossValues.value.length > 0 ||
+		selectedErrorVariableSettings.value.length > 0 ||
+		selectedVariableSettings.value.length > 0 ||
+		selectedParameterSettings.value.length > 0 ||
+		showSpinner.value ||
+		!_.isEmpty(props.node.state?.errorMessage?.traceback)
+);
+
 const updateState = () => {
 	const state = _.cloneDeep(props.node.state);
 	state.numSamples = knobs.value.numSamples;
@@ -1270,4 +1299,21 @@ img {
 		width: 100%;
 	}
 }
+
+.output-section-empty-state {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--gap);
+	text-align: center;
+	pointer-events: none;
+}
+
+.additional-settings {
+	background: var(--surface-200);
+	padding: var(--gap-2);
+}
 </style>
diff --git a/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue
index b37bf4dccc..6ce2492935 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue
@@ -658,8 +658,7 @@ onUnmounted(() => kernelManager.shutdown());
 }
 
 .empty-state {
-	position: absolute;
-	width: calc(100% - 240px);
+	width: 100%;
 	height: 100%;
 	display: flex;
 	flex-direction: column;