From 2c12ad212df1dd4225929abde1271ee410f18d29 Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Wed, 4 Sep 2024 15:55:52 -0400
Subject: [PATCH 01/14] moved simulation wizard form into a collapsable side
 panel

---
 .../tera-simulate-ciemss-drilldown.vue        | 190 +++++++++++-------
 1 file changed, 112 insertions(+), 78 deletions(-)

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 dc1e0339ca..65cc0efcb7 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
@@ -5,79 +5,90 @@
 		@update:selection="onSelection"
 		@on-close-clicked="emit('close')"
 		@update-state="(state: any) => emit('update-state', state)"
+		class="drilldown"
 	>
-		<section :tabName="DrilldownTabs.Wizard" class="ml-4 mr-2 pt-3">
-			<tera-drilldown-section>
-				<template #header-controls-right>
-					<Button label="Run" icon="pi pi-play" @click="run" :disabled="showSpinner" />
-					<tera-pyciemss-cancel-button class="mr-auto" :simulation-run-id="cancelRunId" />
-				</template>
-				<div class="form-section">
-					<h5>
-						Simulation settings
-						<i v-tooltip="simulationSettingsToolTip" class="pi pi-info-circle" />
-					</h5>
-
-					<!-- Start & End -->
-					<div class="input-row">
-						<div class="label-and-input">
-							<label for="2">Start time</label>
-							<tera-input-number
-								id="2"
-								v-model="timespan.start"
-								inputId="integeronly"
-								@update:model-value="updateState"
-							/>
-						</div>
+		<!-- Wizard -->
+		<section :tabName="DrilldownTabs.Wizard" class="wizard">
+			<tera-slider-panel v-model:is-open="isSidebarOpen" header="Simulation settings" content-width="420px">
+				<template #content>
+					<div class="toolbar">
+						<p>Click Run to start the simulation.</p>
+						<span class="flex gap-2">
+							<tera-pyciemss-cancel-button :simulation-run-id="cancelRunId" />
+							<Button label="Run" icon="pi pi-play" @click="run" :disabled="showSpinner" />
+						</span>
+					</div>
+					<div class="form-section" v-if="isSidebarOpen">
+						<!-- Presets -->
 						<div class="label-and-input">
-							<label for="3">End time</label>
-							<tera-input-number
-								id="3"
-								v-model="timespan.end"
-								inputId="integeronly"
-								@update:model-value="updateState"
+							<label for="4">Preset (optional)</label>
+							<Dropdown
+								v-model="presetType"
+								placeholder="Select an option"
+								:options="[CiemssPresetTypes.Fast, CiemssPresetTypes.Normal]"
+								@update:model-value="setPresetValues"
 							/>
 						</div>
-					</div>
-
-					<!-- Presets -->
-					<div class="label-and-input">
-						<label for="4">Preset (optional)</label>
-						<Dropdown
-							v-model="presetType"
-							placeholder="Select an option"
-							:options="[CiemssPresetTypes.Fast, CiemssPresetTypes.Normal]"
-							@update:model-value="setPresetValues"
-						/>
-					</div>
 
-					<!-- Number of Samples & Method -->
-					<div class="input-row mt-3">
-						<div class="label-and-input">
-							<label for="4">Number of samples</label>
-							<tera-input-number
-								id="4"
-								v-model="numSamples"
-								inputId="integeronly"
-								:min="1"
-								@update:model-value="updateState"
-							/>
+						<!-- Start & End -->
+						<div class="input-row">
+							<div class="label-and-input">
+								<label for="2">Start time</label>
+								<tera-input-number
+									id="2"
+									v-model="timespan.start"
+									inputId="integeronly"
+									@update:model-value="updateState"
+								/>
+							</div>
+							<div class="label-and-input">
+								<label for="3">End time</label>
+								<tera-input-number
+									id="3"
+									v-model="timespan.end"
+									inputId="integeronly"
+									@update:model-value="updateState"
+								/>
+							</div>
 						</div>
-						<div class="label-and-input">
-							<label for="5">Method</label>
-							<Dropdown
-								v-model="method"
-								:options="[CiemssMethodOptions.dopri5, CiemssMethodOptions.euler]"
-								@update:model-value="updateState"
-							/>
+
+						<!-- Number of Samples & Method -->
+						<div class="input-row">
+							<div class="label-and-input">
+								<label for="4">Number of samples</label>
+								<tera-input-number
+									id="4"
+									v-model="numSamples"
+									inputId="integeronly"
+									:min="1"
+									@update:model-value="updateState"
+								/>
+							</div>
+							<div class="label-and-input">
+								<label for="5">Method</label>
+								<Dropdown
+									v-model="method"
+									:options="[CiemssMethodOptions.dopri5, CiemssMethodOptions.euler]"
+									@update:model-value="updateState"
+								/>
+							</div>
 						</div>
+						<!-- FIXME: show sampled values ???
+							<div v-if="inferredParameters">Using inferred parameters from calibration: {{ inferredParameters[0] }}</div>
+							-->
+
+						<!-- This used to be in the footer -->
+						<tera-save-dataset-from-simulation
+							:simulation-run-id="node.state.forecastId"
+							:showDialog="showSaveDataDialog"
+							@hide-dialog="showSaveDataDialog = false"
+						/>
 					</div>
-					<!-- FIXME: show sampled values ???
-					<div v-if="inferredParameters">Using inferred parameters from calibration: {{ inferredParameters[0] }}</div>
-					-->
-				</div>
-			</tera-drilldown-section>
+				</template>
+			</tera-slider-panel>
 		</section>
+
+		<!-- Notebook -->
 		<tera-drilldown-section :tabName="DrilldownTabs.Notebook" class="notebook-section">
 			<div class="toolbar">
 				<tera-notebook-jupyter-input
@@ -156,13 +167,6 @@
 				</template>
 			</tera-drilldown-preview>
 		</template>
-		<template #footer>
-			<tera-save-dataset-from-simulation
-				:simulation-run-id="node.state.forecastId"
-				:showDialog="showSaveDataDialog"
-				@hide-dialog="showSaveDataDialog = false"
-			/>
-		</template>
 	</tera-drilldown>
 </template>
 
@@ -172,6 +176,7 @@ import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';
 import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
+import TeraSliderPanel from '@/components/widgets/tera-slider-panel.vue';
 import type { CsvAsset, SimulationRequest, TimeSpan } from '@/types/Types';
 import type { WorkflowNode } from '@/types/workflow';
 import {
@@ -209,6 +214,7 @@ import { getModelConfigurationById } from '@/services/model-configurations';
 import { SimulateCiemssOperationState } from './simulate-ciemss-operation';
 import TeraChartControl from '../../tera-chart-control.vue';
 
+const isSidebarOpen = ref(false);
 const props = defineProps<{
 	node: WorkflowNode<SimulateCiemssOperationState>;
 }>();
@@ -228,8 +234,6 @@ const llmQuery = ref('');
 const numSamples = ref<number>(props.node.state.numSamples);
 const method = ref(props.node.state.method);
 
-const simulationSettingsToolTip: string = 'TODO';
-
 enum OutputView {
 	Charts = 'Charts',
 	Data = 'Data'
@@ -540,6 +544,39 @@ onUnmounted(() => kernelManager.shutdown());
 </script>
 
 <style scoped>
+/* Make left sidebar grey */
+:deep(.slider-content) {
+	background-color: var(--surface-100);
+	border-right: 1px solid var(--surface-border-light);
+}
+:deep(.slider-content aside header) {
+	background: color-mix(in srgb, var(--surface-100) 80%, transparent 20%);
+}
+:deep(.slider-tab) {
+	background-color: var(--surface-100);
+	border-right: 1px solid var(--surface-border-light);
+}
+:deep(.slider-tab header) {
+	background: transparent;
+}
+.wizard .toolbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--gap-1) var(--gap);
+	gap: var(--gap-2);
+}
+
+/* Make tera-inputs the same height as the dropdowns */
+.tera-input:deep(main) {
+	padding: 6px;
+}
+
+/* Override grid template so output expands when sidebar is closed */
+.overlay-container:deep(section.drilldown main) {
+	grid-template-columns: auto 1fr;
+}
+
 .notebook-section:deep(main .toolbar) {
 	padding-left: var(--gap-medium);
 }
@@ -550,14 +587,10 @@ onUnmounted(() => kernelManager.shutdown());
 }
 
 .form-section {
-	background-color: var(--surface-50);
-	border-radius: var(--border-radius-medium);
-	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25) inset;
 	display: flex;
 	flex-direction: column;
 	flex-grow: 1;
-	gap: var(--gap-1);
-	margin: 0 var(--gap) var(--gap) var(--gap);
+	gap: var(--gap);
 	padding: var(--gap);
 }
 
@@ -565,6 +598,7 @@ onUnmounted(() => kernelManager.shutdown());
 	display: flex;
 	flex-direction: column;
 	gap: 0.5rem;
+	margin-bottom: var(--gap);
 }
 
 .input-row {

From a491d7b87c353ff2bfa12ab6261a547544572bf2 Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Wed, 4 Sep 2024 17:17:30 -0400
Subject: [PATCH 02/14] added empty state image to empty charts

---
 .../tera-simulate-ciemss-drilldown.vue        | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

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 65cc0efcb7..7188841c87 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
@@ -114,6 +114,8 @@
 				class="ace-editor"
 			/>
 		</tera-drilldown-section>
+
+		<!-- Preview -->
 		<template #preview>
 			<tera-drilldown-preview
 				title="Simulation output"
@@ -153,7 +155,17 @@
 								@configuration-change="chartProxy.configurationChange(index, $event)"
 								@remove="chartProxy.removeChart(index)"
 							/>
-							<vega-chart expandable :are-embed-actions-visible="true" :visualization-spec="preparedCharts[index]" />
+							<vega-chart
+								v-if="preparedCharts[index].layer.length > 0"
+								expandable
+								:are-embed-actions-visible="true"
+								:visualization-spec="preparedCharts[index]"
+							/>
+							<!-- If no variables are selected, show empty state -->
+							<section class="empty-chart" v-else>
+								<img src="@assets/svg/seed.svg" class="empty-image" alt="" draggable="false" />
+								<p>No variables selected</p>
+							</section>
 						</template>
 						<Button size="small" text @click="chartProxy.addChart()" label="Add chart" icon="pi pi-plus" />
 					</div>
@@ -577,6 +589,22 @@ onUnmounted(() => kernelManager.shutdown());
 	grid-template-columns: auto 1fr;
 }
 
+.empty-chart {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 10rem;
+	gap: var(--gap);
+	border: 1px solid var(--surface-border-light);
+	border-radius: var(--border-radius);
+	margin-bottom: var(--gap);
+	color: var(--text-color-secondary);
+}
+.empty-image {
+	width: 5rem;
+	height: 5rem;
+}
 .notebook-section:deep(main .toolbar) {
 	padding-left: var(--gap-medium);
 }

From 0f2441c94965f109b6ba306b4c15da5b819a42ef Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Thu, 5 Sep 2024 10:13:57 -0400
Subject: [PATCH 03/14] begin with settings sidebar open, empty state image for
 blank charts in node

---
 .../tera-simulate-ciemss-drilldown.vue        |  2 +-
 .../tera-simulate-node-ciemss.vue             | 25 ++++++++++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

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 7188841c87..bbe30eef86 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
@@ -226,7 +226,7 @@ import { getModelConfigurationById } from '@/services/model-configurations';
 import { SimulateCiemssOperationState } from './simulate-ciemss-operation';
 import TeraChartControl from '../../tera-chart-control.vue';
 
-const isSidebarOpen = ref(false);
+const isSidebarOpen = ref(true);
 const props = defineProps<{
 	node: WorkflowNode<SimulateCiemssOperationState>;
 }>();
diff --git a/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-node-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-node-ciemss.vue
index bdb3362f2d..6544a8222f 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-node-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-node-ciemss.vue
@@ -7,6 +7,11 @@
 				:are-embed-actions-visible="false"
 				:visualization-spec="preparedCharts[index]"
 			/>
+			<!-- JAMIE: Add test if chart is enpty here -->
+			<section v-if="true" class="empty-chart">
+				<img src="@assets/svg/seed.svg" alt="" draggable="false" class="empty-image" />
+				<p class="helpMessage">No variables selected</p>
+			</section>
 		</template>
 		<tera-progress-spinner v-if="inProgressForecastId" :font-size="2" is-centered style="height: 100%" />
 		<Button v-if="areInputsFilled" label="Edit" @click="emit('open-drilldown')" severity="secondary" outlined />
@@ -239,4 +244,22 @@ watch(
 );
 </script>
 
-<style scoped></style>
+<style scoped>
+.empty-chart {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 9rem;
+	gap: var(--gap);
+	border: 1px solid var(--surface-border-light);
+	border-radius: var(--border-radius);
+	margin-bottom: var(--gap);
+	color: var(--text-color-secondary);
+	font-size: var(--font-caption);
+}
+.empty-image {
+	width: 5rem;
+	height: 5rem;
+}
+</style>

From c096a9259b18c3c2ac6b911181a0b4b4eddf05bf Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Thu, 5 Sep 2024 10:22:10 -0400
Subject: [PATCH 04/14] added empty state to page

---
 .../tera-simulate-ciemss-drilldown.vue        | 22 +++++++++++++++++++
 1 file changed, 22 insertions(+)

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 bbe30eef86..9a91ceb884 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
@@ -118,6 +118,7 @@
 		<!-- Preview -->
 		<template #preview>
 			<tera-drilldown-preview
+				v-if="selectedOutputId"
 				title="Simulation output"
 				:options="outputs"
 				v-model:output="selectedOutputId"
@@ -178,6 +179,12 @@
 					</div>
 				</template>
 			</tera-drilldown-preview>
+
+			<!-- Empty state -->
+			<section v-else class="emptyState">
+				<Vue3Lottie :animationData="EmptySeed" :height="150" loop autoplay />
+				<p class="helpMessage">Click 'Run' to start the simulation</p>
+			</section>
 		</template>
 	</tera-drilldown>
 </template>
@@ -187,6 +194,8 @@ import _ from 'lodash';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';
+import { Vue3Lottie } from 'vue3-lottie';
+import EmptySeed from '@/assets/images/lottie-empty-seed.json';
 import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
 import TeraSliderPanel from '@/components/widgets/tera-slider-panel.vue';
 import type { CsvAsset, SimulationRequest, TimeSpan } from '@/types/Types';
@@ -641,4 +650,17 @@ onUnmounted(() => kernelManager.shutdown());
 		flex: 1;
 	}
 }
+
+.emptyState {
+	position: absolute;
+	width: calc(100% - 240px);
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: var(--gap);
+	text-align: center;
+	pointer-events: none;
+}
 </style>

From a6708932adf3b436c8cbba92a8a41a8402d42ef7 Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Thu, 5 Sep 2024 10:43:28 -0400
Subject: [PATCH 05/14] added empty state image to nodes

---
 .../tera-simulate-ciemss-drilldown.vue        |  5 +++--
 .../tera-simulate-node-ciemss.vue             | 21 ++++++++++---------
 2 files changed, 14 insertions(+), 12 deletions(-)

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 9a91ceb884..c166d5924f 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
@@ -165,7 +165,7 @@
 							<!-- If no variables are selected, show empty state -->
 							<section class="empty-chart" v-else>
 								<img src="@assets/svg/seed.svg" class="empty-image" alt="" draggable="false" />
-								<p>No variables selected</p>
+								<p>Select one or more variables for this chart</p>
 							</section>
 						</template>
 						<Button size="small" text @click="chartProxy.addChart()" label="Add chart" icon="pi pi-plus" />
@@ -609,10 +609,11 @@ onUnmounted(() => kernelManager.shutdown());
 	border-radius: var(--border-radius);
 	margin-bottom: var(--gap);
 	color: var(--text-color-secondary);
+	background: var(--surface-50);
 }
 .empty-image {
 	width: 5rem;
-	height: 5rem;
+	height: 6rem;
 }
 .notebook-section:deep(main .toolbar) {
 	padding-left: var(--gap-medium);
diff --git a/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-node-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-node-ciemss.vue
index 6544a8222f..3c2827b966 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-node-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-node-ciemss.vue
@@ -1,16 +1,16 @@
 <template>
 	<main>
 		<template v-if="selectedRunId && runResults[selectedRunId]">
-			<vega-chart
-				v-for="(_config, index) of props.node.state.chartConfigs"
-				:key="index"
-				:are-embed-actions-visible="false"
-				:visualization-spec="preparedCharts[index]"
-			/>
-			<!-- JAMIE: Add test if chart is enpty here -->
-			<section v-if="true" class="empty-chart">
-				<img src="@assets/svg/seed.svg" alt="" draggable="false" class="empty-image" />
-				<p class="helpMessage">No variables selected</p>
+			<section v-for="(_config, index) of props.node.state.chartConfigs" :key="index">
+				<vega-chart
+					v-if="preparedCharts[index].layer.length > 0"
+					:visualization-spec="preparedCharts[index]"
+					:are-embed-actions-visible="false"
+				/>
+				<div v-else class="empty-chart">
+					<img src="@assets/svg/seed.svg" alt="" draggable="false" class="empty-image" />
+					<p class="helpMessage">No variables selected</p>
+				</div>
 			</section>
 		</template>
 		<tera-progress-spinner v-if="inProgressForecastId" :font-size="2" is-centered style="height: 100%" />
@@ -252,6 +252,7 @@ watch(
 	align-items: center;
 	height: 9rem;
 	gap: var(--gap);
+	background: var(--surface-50);
 	border: 1px solid var(--surface-border-light);
 	border-radius: var(--border-radius);
 	margin-bottom: var(--gap);

From d0c5c69dcdc5749618c0afd860f7fcda3d6fa09e Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Thu, 5 Sep 2024 11:10:27 -0400
Subject: [PATCH 06/14] added padding betwen charts and at bottom of page

---
 .../tera-simulate-ciemss-drilldown.vue           | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

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 c166d5924f..32f875a792 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
@@ -129,6 +129,7 @@
 				<tera-operator-output-summary
 					v-if="node.state.summaryId && runResults[selectedRunId]"
 					:summary-id="node.state.summaryId"
+					class="pt-3"
 				/>
 				<div class="flex flex-row align-items-center gap-2">
 					<SelectButton
@@ -167,8 +168,14 @@
 								<img src="@assets/svg/seed.svg" class="empty-image" alt="" draggable="false" />
 								<p>Select one or more variables for this chart</p>
 							</section>
+
+							<!-- Spacer between charts -->
+							<div style="height: var(--gap-1)"></div>
 						</template>
 						<Button size="small" text @click="chartProxy.addChart()" label="Add chart" icon="pi pi-plus" />
+
+						<!-- Spacer at bottom of page -->
+						<div style="height: 2rem"></div>
 					</div>
 					<div v-else-if="view === OutputView.Data">
 						<tera-dataset-datatable
@@ -598,6 +605,11 @@ onUnmounted(() => kernelManager.shutdown());
 	grid-template-columns: auto 1fr;
 }
 
+/* Override top and bottom padding of content-container */
+.overlay-container:deep(section.drilldown main .content-container) {
+	padding: 0 var(--gap);
+}
+
 .empty-chart {
 	display: flex;
 	flex-direction: column;
@@ -664,4 +676,8 @@ onUnmounted(() => kernelManager.shutdown());
 	text-align: center;
 	pointer-events: none;
 }
+
+.p-button-icon-left {
+	color: var(--text-color-primary);
+}
 </style>

From d219b1339c1c1fb8e008b12216708bf6f036761e Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Thu, 5 Sep 2024 11:49:54 -0400
Subject: [PATCH 07/14] added padding between tabs and notes

---
 .../src/components/drilldown/tera-drilldown-header.vue          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue b/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue
index 9a2c6c8cea..e70bd47f56 100644
--- a/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue
+++ b/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue
@@ -75,7 +75,7 @@ header .title {
 header .tabs-row {
 	justify-content: space-between;
 	align-items: end;
-	gap: var(--gap-1);
+	gap: var(--gap-6);
 }
 
 header .tabs-row:deep(.p-tabview .p-tabview-panels) {

From a6f0e285014360c151f95ab4558fbf1db639dafb Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Thu, 5 Sep 2024 11:59:34 -0400
Subject: [PATCH 08/14] decreased size of tabs

---
 .../src/components/drilldown/tera-drilldown-header.vue       | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue b/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue
index e70bd47f56..7c3634c06d 100644
--- a/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue
+++ b/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue
@@ -98,12 +98,15 @@ a {
 :deep(.p-tabview .p-tabview-nav li .p-tabview-nav-link:focus) {
 	background-color: var(--surface-section);
 }
+:deep(.p-tabview .p-tabview-nav li .p-tabview-nav-link) {
+	padding: var(--gap-3) var(--gap-6);
+}
 
 .actions {
 	display: flex;
 	justify-content: flex-end;
 	gap: var(--gap-small);
-	padding-bottom: var(--gap-small);
+	padding-bottom: var(--gap-1);
 	flex: 1;
 }
 

From 1fbc80b70dc4da8299938f362d10d24d0d9c3aa2 Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Thu, 5 Sep 2024 12:09:40 -0400
Subject: [PATCH 09/14] finesse annotation position, make pencil secondary
 color

---
 .../src/components/drilldown/tera-drilldown-header.vue    | 2 +-
 .../src/components/operator/tera-operator-annotation.vue  | 8 +++++++-
 .../components/operator/tera-operator-output-summary.vue  | 7 ++++++-
 3 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue b/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue
index 7c3634c06d..50b856326c 100644
--- a/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue
+++ b/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue
@@ -75,7 +75,7 @@ header .title {
 header .tabs-row {
 	justify-content: space-between;
 	align-items: end;
-	gap: var(--gap-6);
+	gap: var(--gap-4);
 }
 
 header .tabs-row:deep(.p-tabview .p-tabview-panels) {
diff --git a/packages/client/hmi-client/src/components/operator/tera-operator-annotation.vue b/packages/client/hmi-client/src/components/operator/tera-operator-annotation.vue
index 23aa74dc92..bd109e0253 100644
--- a/packages/client/hmi-client/src/components/operator/tera-operator-annotation.vue
+++ b/packages/client/hmi-client/src/components/operator/tera-operator-annotation.vue
@@ -17,7 +17,7 @@
 			</div>
 		</template>
 		<div v-else-if="!isEmpty(annotation)" class="annotation">
-			<p @click="isEditing = true">{{ annotation }}<span class="pi pi-pencil ml-2 text-xs" /></p>
+			<p @click="isEditing = true">{{ annotation }}<span class="pi pi-pencil ml-2 text-xs edit-button" /></p>
 		</div>
 	</section>
 	<Button
@@ -81,6 +81,7 @@ watch(
 section {
 	display: flex;
 	flex: 1;
+
 	&:empty {
 		display: none;
 	}
@@ -114,6 +115,11 @@ section {
 		}
 	}
 
+	.edit-button {
+		color: var(--text-color-secondary);
+		cursor: pointer;
+	}
+
 	/* In drilldown */
 	&:not(.in-node) {
 		padding-bottom: var(--gap-small);
diff --git a/packages/client/hmi-client/src/components/operator/tera-operator-output-summary.vue b/packages/client/hmi-client/src/components/operator/tera-operator-output-summary.vue
index 75081ef17f..21c5a745ee 100644
--- a/packages/client/hmi-client/src/components/operator/tera-operator-output-summary.vue
+++ b/packages/client/hmi-client/src/components/operator/tera-operator-output-summary.vue
@@ -17,7 +17,7 @@
 			</div>
 		</template>
 		<div v-else-if="isLoading === false" class="summary">
-			<p else @click="isEditing = true">{{ summaryText }}<span class="pi pi-pencil ml-2 text-xs" /></p>
+			<p else @click="isEditing = true">{{ summaryText }}<span class="pi pi-pencil ml-2 text-xs edit-button" /></p>
 		</div>
 		<div v-else-if="isLoading" class="summary">
 			<img src="@assets/svg/icons/magic.svg" alt="Magic icon" />
@@ -171,5 +171,10 @@ section {
 	&.is-editing {
 		padding: 0;
 	}
+
+	.edit-button {
+		color: var(--text-color-secondary);
+		cursor: pointer;
+	}
 }
 </style>

From 407453af8fc1f4f217b9c5520b02cbea6ed98b60 Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Thu, 5 Sep 2024 12:17:38 -0400
Subject: [PATCH 10/14] made notebook 50% width

---
 .../ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue | 7 +++++++
 1 file changed, 7 insertions(+)

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 32f875a792..b0a37ca542 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
@@ -627,6 +627,13 @@ onUnmounted(() => kernelManager.shutdown());
 	width: 5rem;
 	height: 6rem;
 }
+
+/* Notebook */
+.notebook-section {
+	width: calc(50vw - 4rem);
+	background: var(--surface-100);
+	border-right: 1px solid var(--surface-border-light);
+}
 .notebook-section:deep(main .toolbar) {
 	padding-left: var(--gap-medium);
 }

From 61386379dae21ea2ea2db36d9adddf1d5f3363b4 Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Thu, 5 Sep 2024 12:20:34 -0400
Subject: [PATCH 11/14] remove padding between charts in node

---
 .../ops/simulate-ciemss/tera-simulate-node-ciemss.vue         | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-node-ciemss.vue b/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-node-ciemss.vue
index 3c2827b966..7548cdba29 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-node-ciemss.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/simulate-ciemss/tera-simulate-node-ciemss.vue
@@ -245,6 +245,10 @@ watch(
 </script>
 
 <style scoped>
+:deep(.vega-chart-container) {
+	margin-bottom: 0;
+}
+
 .empty-chart {
 	display: flex;
 	flex-direction: column;

From a243972eac293d5dff7d458cfef19155afe2d1b8 Mon Sep 17 00:00:00 2001
From: Yohann Paris <github@yohannparis.com>
Date: Fri, 6 Sep 2024 09:50:08 -0400
Subject: [PATCH 12/14] kebab-case the classname

---
 .../ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 b0a37ca542..817a9baa7f 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
@@ -188,7 +188,7 @@
 			</tera-drilldown-preview>
 
 			<!-- Empty state -->
-			<section v-else class="emptyState">
+			<section v-else class="empty-state">
 				<Vue3Lottie :animationData="EmptySeed" :height="150" loop autoplay />
 				<p class="helpMessage">Click 'Run' to start the simulation</p>
 			</section>
@@ -671,7 +671,7 @@ onUnmounted(() => kernelManager.shutdown());
 	}
 }
 
-.emptyState {
+.empty-state {
 	position: absolute;
 	width: calc(100% - 240px);
 	height: 100%;

From 61b5139b6056a914f536f980781f41f2364e6152 Mon Sep 17 00:00:00 2001
From: Yohann Paris <github@yohannparis.com>
Date: Fri, 6 Sep 2024 11:16:20 -0400
Subject: [PATCH 13/14] Remove comments

---
 .../ops/simulate-ciemss/tera-simulate-ciemss-drilldown.vue   | 5 -----
 1 file changed, 5 deletions(-)

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 817a9baa7f..6393f79e6c 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
@@ -73,11 +73,6 @@
 								/>
 							</div>
 						</div>
-						<!-- FIXME: show sampled values ???
-							<div v-if="inferredParameters">Using inferred parameters from calibration: {{ inferredParameters[0] }}</div>
-							-->
-
-						<!-- This used to be in the footer -->
 						<tera-save-dataset-from-simulation
 							:simulation-run-id="node.state.forecastId"
 							:showDialog="showSaveDataDialog"

From 316bc0db0aff6947fca9328ba04f167d78cfbaf7 Mon Sep 17 00:00:00 2001
From: Daniel Chang <mwdchang@gmail.com>
Date: Fri, 6 Sep 2024 11:21:09 -0400
Subject: [PATCH 14/14] clean up

---
 .../tera-simulate-ciemss-drilldown.vue        | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

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 817a9baa7f..85d6629e5d 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
@@ -21,7 +21,7 @@
 					<div class="form-section" v-if="isSidebarOpen">
 						<!-- Presets -->
 						<div class="label-and-input">
-							<label for="4">Preset (optional)</label>
+							<label>Preset (optional)</label>
 							<Dropdown
 								v-model="presetType"
 								placeholder="Select an option"
@@ -33,18 +33,18 @@
 						<!-- Start & End -->
 						<div class="input-row">
 							<div class="label-and-input">
-								<label for="2">Start time</label>
+								<label for="start-time">Start time</label>
 								<tera-input-number
-									id="2"
+									id="start-time"
 									v-model="timespan.start"
 									inputId="integeronly"
 									@update:model-value="updateState"
 								/>
 							</div>
 							<div class="label-and-input">
-								<label for="3">End time</label>
+								<label for="timespan">End time</label>
 								<tera-input-number
-									id="3"
+									id="timespan"
 									v-model="timespan.end"
 									inputId="integeronly"
 									@update:model-value="updateState"
@@ -55,9 +55,9 @@
 						<!-- Number of Samples & Method -->
 						<div class="input-row">
 							<div class="label-and-input">
-								<label for="4">Number of samples</label>
+								<label for="num-samples">Number of samples</label>
 								<tera-input-number
-									id="4"
+									id="num-samples"
 									v-model="numSamples"
 									inputId="integeronly"
 									:min="1"
@@ -65,8 +65,9 @@
 								/>
 							</div>
 							<div class="label-and-input">
-								<label for="5">Method</label>
+								<label for="solver-method">Method</label>
 								<Dropdown
+									id="solver-method"
 									v-model="method"
 									:options="[CiemssMethodOptions.dopri5, CiemssMethodOptions.euler]"
 									@update:model-value="updateState"
@@ -76,8 +77,6 @@
 						<!-- FIXME: show sampled values ???
 							<div v-if="inferredParameters">Using inferred parameters from calibration: {{ inferredParameters[0] }}</div>
 							-->
-
-						<!-- This used to be in the footer -->
 						<tera-save-dataset-from-simulation
 							:simulation-run-id="node.state.forecastId"
 							:showDialog="showSaveDataDialog"