From 0a26c0e97814e5c260837fa750b18066af8d8e43 Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Mon, 18 Nov 2024 12:31:26 -0500
Subject: [PATCH 01/20] made dataset column info pretty, adjusted home page
 banner text

---
 .../components/dataset/tera-column-info.vue   | 43 +++++++++++++------
 .../src/components/dataset/tera-dataset.vue   |  6 ---
 packages/client/hmi-client/src/page/Home.vue  |  8 ++--
 3 files changed, 33 insertions(+), 24 deletions(-)

diff --git a/packages/client/hmi-client/src/components/dataset/tera-column-info.vue b/packages/client/hmi-client/src/components/dataset/tera-column-info.vue
index aaa7e900a6..af30bc2f68 100644
--- a/packages/client/hmi-client/src/components/dataset/tera-column-info.vue
+++ b/packages/client/hmi-client/src/components/dataset/tera-column-info.vue
@@ -1,8 +1,8 @@
 <template>
-	<div class="flex gap-3">
+	<div class="column-info-card">
 		<section class="entries">
-			<h6>{{ column.symbol }}</h6>
 			<span class="name">
+				<h6>{{ column.symbol }}</h6>
 				<template v-if="featureConfig.isPreview">{{ column.name }}</template>
 				<tera-input-text
 					v-else
@@ -63,6 +63,9 @@
 		</section>
 		<tera-boxplot class="flex-1" v-if="column.stats" :stats="column.stats" />
 	</div>
+	<div class="thin-divider">
+		<div class="line"></div>
+	</div>
 </template>
 
 <script setup lang="ts">
@@ -126,20 +129,27 @@ watch(
 </script>
 
 <style scoped>
+.column-info-card {
+	padding: var(--gap-3) var(--gap-4);
+	border-left: 4px solid var(--surface-300);
+	margin-bottom: var(--gap-2);
+}
+.column-info-card:hover {
+	background-color: var(--surface-50);
+}
 section.entries {
 	display: grid;
 	grid-template-areas:
-		'symbol name unit data-type . concept'
-		'expression expression expression expression expression expression'
-		'description description description description description description';
-	grid-template-columns: max-content max-content max-content auto max-content;
+		'name name unit data-type concept'
+		'expression expression expression expression expression '
+		'description description description description description';
+	grid-template-columns: auto max-content max-content max-content max-content;
 	grid-auto-flow: dense;
 	overflow: hidden;
-	gap: var(--gap-2);
+	gap: var(--gap-1) var(--gap-2);
 	align-items: center;
 	font-size: var(--font-caption);
 	overflow: auto;
-	width: 85%;
 
 	& > *:empty {
 		display: none;
@@ -163,6 +173,9 @@ h6 {
 
 .name {
 	grid-area: name;
+	display: flex;
+	align-items: center;
+	gap: var(--gap-2);
 }
 
 .description {
@@ -172,15 +185,12 @@ h6 {
 
 .unit {
 	grid-area: unit;
+	margin-right: var(--gap-6);
 }
 
 .data-type {
 	grid-area: data-type;
-}
-
-.unit,
-.data-type {
-	max-width: 15rem;
+	margin-right: var(--gap-6);
 }
 
 .expression {
@@ -190,7 +200,6 @@ h6 {
 
 .concept {
 	grid-area: concept;
-	margin-left: auto;
 }
 
 .unit,
@@ -205,4 +214,10 @@ h6 {
 :deep(.p-autocomplete-input) {
 	padding: var(--gap-1) var(--gap-2);
 }
+.thin-divider {
+	margin: var(--gap-2) 0;
+	& > .line {
+		border-top: 1px solid var(--surface-border-light);
+	}
+}
 </style>
diff --git a/packages/client/hmi-client/src/components/dataset/tera-dataset.vue b/packages/client/hmi-client/src/components/dataset/tera-dataset.vue
index 3c08edbfd2..a21b2dd0d3 100644
--- a/packages/client/hmi-client/src/components/dataset/tera-dataset.vue
+++ b/packages/client/hmi-client/src/components/dataset/tera-dataset.vue
@@ -318,12 +318,6 @@ watch(
 </script>
 
 <style scoped>
-.column-info {
-	border-bottom: 1px solid var(--surface-border);
-	margin-bottom: var(--gap-3);
-	padding-bottom: var(--gap-3);
-}
-
 .description {
 	margin-left: var(--gap-6);
 
diff --git a/packages/client/hmi-client/src/page/Home.vue b/packages/client/hmi-client/src/page/Home.vue
index 70327535e9..074f206406 100644
--- a/packages/client/hmi-client/src/page/Home.vue
+++ b/packages/client/hmi-client/src/page/Home.vue
@@ -5,10 +5,10 @@
 			<header>
 				<!-- Welcome text -->
 				<section class="w-full">
-					<h3>From data to discovery</h3>
+					<h3>AI-assisted modeling for scientific decision-making</h3>
 					<p>
-						Accelerate scientific modeling and simulation using AI. Search available knowledge, enhance extracted models
-						and data, and test scenarios to simulate real-world problems.
+						Pair your expertise with AI to accelerate scientific modeling and simulation. Build on existing models and
+						data to simulate and communicate complex real-world scenarios.
 					</p>
 					<!--Placeholder - button is disabled for now-->
 					<!-- <Button
@@ -406,7 +406,7 @@ header h3 {
 }
 
 header p {
-	max-width: 40%;
+	max-width: 580px;
 	line-height: 1.5;
 }
 

From 08ff77df594aeaceaf946e17a7aecb46c669203f Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Mon, 18 Nov 2024 13:42:06 -0500
Subject: [PATCH 02/20] Adjusted font sizes of text on About screen

---
 .../src/components/navbar/tera-navbar.vue        | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/client/hmi-client/src/components/navbar/tera-navbar.vue b/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
index fe25293fda..0ef006dd46 100644
--- a/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
+++ b/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
@@ -128,16 +128,20 @@
 		>
 			<article>
 				<img src="@/assets/svg/terarium-logo.svg" alt="Terarium logo" class="about-terarium-logo" />
-				<p class="text-2xl line-height-3 about-top-line">
+				<p class="text-lg line-height-3 about-top-line">
 					Terarium is a comprehensive <span class="underlined">modeling</span> and
 					<span class="underlined">simulation</span> platform designed to help researchers and analysts:
 				</p>
-				<p class="about-middle"><span class="pi pi-search about-bullet"></span>Find models in academic literature</p>
-				<p class="about-middle"><span class="pi pi-sliders-h about-bullet"></span>Parameterize and calibrate them</p>
+				<p class="about-middle">
+					<span class="pi pi-search about-bullet"></span>Extract models from academic literature
+				</p>
+				<p class="about-middle">
+					<span class="pi pi-sliders-h about-bullet"></span>Calibrate them with real world data
+				</p>
 				<p class="about-middle">
 					<span class="pi pi-cog about-bullet"></span>Run simulations to test a variety of scenarios, and
 				</p>
-				<p class="about-middle"><span class="pi pi-chart-line about-bullet"></span>Analyze the results.</p>
+				<p class="about-middle"><span class="pi pi-chart-line about-bullet"></span>Compare the results.</p>
 			</article>
 			<article class="about-uncharted-section">
 				<img
@@ -553,7 +557,7 @@ nav {
 	border-radius: 50%;
 }
 .about-middle {
-	font-size: 1.25rem;
+	font-size: 1rem;
 	display: flex;
 	align-items: center;
 }
@@ -585,7 +589,7 @@ nav {
 	margin-bottom: 0.5rem;
 }
 .about-bottom-line {
-	color: var(--text-color-subdued);
+	color: var(--text-color);
 }
 
 .modal-footer {

From 3c52ce62722a740bf93ce745d6472128365bee3d Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Mon, 18 Nov 2024 13:43:36 -0500
Subject: [PATCH 03/20] Sentence case all labels and menu options

---
 .../client/hmi-client/src/components/navbar/tera-navbar.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/navbar/tera-navbar.vue b/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
index 0ef006dd46..f369f37c62 100644
--- a/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
+++ b/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
@@ -383,7 +383,7 @@ const userMenuItems = ref([
 		}
 	},
 	{
-		label: 'User Administration',
+		label: 'User administration',
 		command: () => {
 			router.push(RoutePath.UserAdmin);
 		},

From 7d873b3d4bb142ba16523da19585090382c3a091 Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Mon, 18 Nov 2024 13:49:05 -0500
Subject: [PATCH 04/20] cleaned up Evaluation Scenario modal

---
 .../hmi-client/src/components/navbar/tera-navbar.vue  | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/client/hmi-client/src/components/navbar/tera-navbar.vue b/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
index f369f37c62..5d75b2fbcf 100644
--- a/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
+++ b/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
@@ -73,7 +73,7 @@
 						@change="onScenarioChange"
 					/>
 
-					<label class="text-sm" for="evaluation-scenario-task">Task</label>
+					<label class="text-sm mt-3" for="evaluation-scenario-task">Task</label>
 					<Dropdown
 						id="evaluation-scenario-task"
 						:options="evaluationScenario?.questions ?? []"
@@ -83,7 +83,7 @@
 						@change="onTaskChange"
 					/>
 
-					<label class="text-sm" for="evaluation-scenario-description">Description</label>
+					<label class="text-sm mt-3" for="evaluation-scenario-description">Description</label>
 					<Textarea
 						id="evaluation-scenario-description"
 						rows="5"
@@ -96,7 +96,7 @@
 
 					<div class="field-checkbox">
 						<Checkbox name="multipleUsers" binary v-model="evaluationScenarioMultipleUsers" />
-						<label for="multipleUsers">Multiple Users</label>
+						<label for="multipleUsers">Multiple users</label>
 					</div>
 				</form>
 			</template>
@@ -613,5 +613,10 @@ nav {
 	font-size: var(--font-body-small);
 	color: var(--text-color-primary);
 	margin-bottom: 0;
+	display: flex;
+	align-items: center;
+	& > label {
+		margin-bottom: 0px !important;
+	}
 }
 </style>

From 5783e50b2cd3495dda8dd3fb63097024ee865b0d Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Mon, 18 Nov 2024 14:00:47 -0500
Subject: [PATCH 05/20] added subtle shadow to evaluation timer widget

---
 .../client/hmi-client/src/components/navbar/tera-navbar.vue     | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/client/hmi-client/src/components/navbar/tera-navbar.vue b/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
index 5d75b2fbcf..fd6ef4ad9c 100644
--- a/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
+++ b/packages/client/hmi-client/src/components/navbar/tera-navbar.vue
@@ -27,6 +27,7 @@
 				size="small"
 				severity="primary"
 				@click="stopEvaluationScenario"
+				class="shadow-2"
 			/>
 			<Button v-else label="Start" rounded size="small" severity="primary" @click="beginEvaluationScenario" />
 		</aside>
@@ -578,6 +579,7 @@ nav {
 	margin-right: auto;
 	align-items: center;
 	gap: var(--gap-4);
+	box-shadow: inset 0px 0px 5px var(--surface-border-light);
 
 	.evaluation-scenario-widget-timer {
 		font-feature-settings: 'tnum';

From 3c4aae67f1cec5bee298a72613fefeaa8893a439 Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Mon, 18 Nov 2024 14:37:26 -0500
Subject: [PATCH 06/20] fixed compartmental constraint text overflow issue

---
 .../ops/funman/tera-funman-drilldown.vue         | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
index d605ddb4c7..bbfc1f1e4d 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
@@ -43,7 +43,7 @@
 												<InputSwitch class="mr-3" v-model="knobs.compartmentalConstraint.isActive" />
 											</div>
 										</header>
-										<div class="flex align-items-center gap-6">
+										<div class="flex flex-wrap align-items-center gap-4">
 											<katex-element
 												:expression="
 													stringToLatexExpression(
@@ -52,11 +52,13 @@
 															.join('')
 													)
 												"
+												class="first-line"
 											/>
 											<katex-element
 												:expression="
 													stringToLatexExpression(`${stateIds.join('+')} = ${displayNumber(mass)} \\ \\forall \\ t`)
 												"
+												class="second-line"
 											/>
 										</div>
 									</section>
@@ -948,6 +950,18 @@ watch(
 	margin-left: var(--gap-2);
 }
 
+/* force the constraint to linewrap if long*/
+.first-line:deep(.katex-html) {
+	display: flex;
+	flex-wrap: wrap;
+	width: 360px;
+}
+.first-line:deep(.katex-html .base) {
+	display: flex;
+	flex-wrap: wrap;
+	width: fit-content;
+}
+
 .secondary-text {
 	color: var(--text-color-subdued);
 	font-size: var(--font-caption);

From cbafaf6e86c37706515313bafcb82af8ad67bd5e Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Mon, 18 Nov 2024 15:07:18 -0500
Subject: [PATCH 07/20] improved validate config settings sty les

---
 .../ops/funman/tera-constraint-group-form.vue | 27 ++++++++++++++++++-
 .../ops/funman/tera-funman-drilldown.vue      | 16 ++++++-----
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue
index 0032c551c0..ce8036957c 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue
@@ -29,12 +29,14 @@
 				:model-value="config.constraint"
 				:options="Object.values(Constraint)"
 				@update:model-value="emit('update-self', { key: 'constraint', value: $event })"
+				class="madlib-input"
 			/>
 			<MultiSelect
 				:model-value="config.variables"
 				placeholder="Select variables"
 				:options="variableOptions"
 				@update:model-value="emit('update-self', { key: 'variables', value: $event })"
+				class="madlib-input"
 			/>
 			should be
 			<Dropdown
@@ -49,6 +51,7 @@
 						emit('update-self', { key: 'constraintType', value: $event });
 					}
 				"
+				class="madlib-input"
 			/>
 			<tera-input-number
 				v-if="
@@ -58,6 +61,7 @@
 				auto-width
 				:model-value="config.interval.ub"
 				@update:model-value="emit('update-self', { key: 'interval', value: { lb: config.interval.lb, ub: $event } })"
+				class="madlib-input"
 			/>
 			<tera-input-number
 				v-else-if="
@@ -67,6 +71,7 @@
 				auto-width
 				:model-value="config.interval.lb"
 				@update:model-value="emit('update-self', { key: 'interval', value: { lb: $event, ub: config.interval.ub } })"
+				class="madlib-input"
 			/>
 			<template
 				v-if="
@@ -86,6 +91,7 @@
 					@update:model-value="
 						emit('update-self', { key: 'timepoints', value: { lb: $event, ub: config.timepoints.ub } })
 					"
+					class="madlib-input"
 				/>
 				day to timepoint
 				<tera-input-number
@@ -94,12 +100,13 @@
 					@update:model-value="
 						emit('update-self', { key: 'timepoints', value: { lb: config.timepoints.lb, ub: $event } })
 					"
+					class="madlib-input"
 				/>
 			</template>
 			<!--Wrong variables being mutated-->
 			<template v-else>
 				time-series dataset within +/-
-				<tera-input-number auto-width :model-value="0" />
+				<tera-input-number auto-width :model-value="0" class="madlib-input" />
 				persons within a time window of
 				<tera-input-number
 					auto-width
@@ -107,6 +114,7 @@
 					@update:model-value="
 						emit('update-self', { key: 'timepoints', value: { lb: config.timepoints.lb, ub: $event } })
 					"
+					class="madlib-input"
 				/>
 			</template>
 			<!--TODO: should be based on time variable in model semantics-->
@@ -121,6 +129,7 @@
 				auto-width
 				:model-value="config.interval.lb"
 				@update:model-value="emit('update-self', { key: 'interval', value: { lb: $event, ub: config.interval.ub } })"
+				class="madlib-input"
 			/>
 			<katex-element :expression="stringToLatexExpression(`\\leq [`)" />
 			<template v-for="(variable, index) in config.variables" :key="index">
@@ -135,6 +144,7 @@
 							emit('update-self', { key: 'weights', value: newWeights });
 						}
 					"
+					class="madlib-input"
 				/>
 				<katex-element
 					:expression="stringToLatexExpression(`${variable} ${index === config.variables.length - 1 ? '' : '\\ +'}`)"
@@ -145,6 +155,7 @@
 				auto-width
 				:model-value="config.interval.ub"
 				@update:model-value="emit('update-self', { key: 'interval', value: { lb: config.interval.lb, ub: $event } })"
+				class="madlib-input"
 			/>
 			<katex-element
 				:expression="stringToLatexExpression(`\\forall \\ t \\in [${config.timepoints.lb}, ${config.timepoints.ub}]`)"
@@ -238,4 +249,18 @@ ul {
 		text-align: right;
 	}
 }
+
+/* make all the madlib-inputs the same height */
+.madlib-input {
+	height: 28px;
+	display: flex;
+	align-items: center;
+}
+.madlib-input:deep(.p-multiselect-label) {
+	padding: 5px;
+}
+:deep(main:has(.madlib-input)) {
+	padding: 0;
+	height: 28px;
+}
 </style>
diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
index bbfc1f1e4d..ffec133030 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
@@ -16,9 +16,7 @@
 		>
 			<template #content>
 				<div class="top-toolbar">
-					<p>Set your model checks and settings then click run.</p>
 					<div class="btn-group">
-						<Button label="Reset" outlined severity="secondary" disabled />
 						<Button :loading="showSpinner" label="Run" icon="pi pi-play" @click="run" />
 					</div>
 				</div>
@@ -29,13 +27,13 @@
 								Model checks
 								<i class="pi pi-info-circle pl-2" v-tooltip="validateParametersToolTip" />
 							</template>
-							<p class="mb-3">
+							<p class="mb-3 secondary-text">
 								Implement sanity checks on the state space of the model to see how the parameter space of the model is
 								partitioned into satisfiable and unsatisfiable regions separated by decision boundaries.
 							</p>
 							<ul>
 								<li>
-									<section>
+									<section class="shadow-1">
 										<header class="flex w-full gap-3 mb-2">
 											<tera-toggleable-input v-model="knobs.compartmentalConstraint.name" tag="h3" />
 											<div class="ml-auto flex align-items-center">
@@ -63,7 +61,7 @@
 										</div>
 									</section>
 								</li>
-								<li v-for="(cfg, index) in node.state.constraintGroups" :key="index">
+								<li v-for="(cfg, index) in node.state.constraintGroups" :key="index" class="shadow-1">
 									<tera-constraint-group-form
 										:config="cfg"
 										:index="index"
@@ -117,7 +115,7 @@
 									</div>
 								</span>
 								<label>Timepoints</label>
-								<code>
+								<code class="inset">
 									{{ stepList.map((step) => Number(step.toFixed(3))).join(', ') }}
 								</code>
 								<label>Tolerance</label>
@@ -973,7 +971,7 @@ watch(
 }
 
 code {
-	background-color: var(--gray-50);
+	background-color: var(--gray-200);
 	color: var(--text-color-subdued);
 	border-radius: var(--border-radius);
 	border: 1px solid var(--surface-border);
@@ -984,6 +982,10 @@ code {
 	overflow: auto;
 }
 
+.inset {
+	box-shadow: inset 0px 0px 4px var(--surface-border);
+}
+
 .timespan {
 	display: flex;
 	align-items: end;

From 3ed8e41fa1889596813194af1c49d514d2865baa Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Mon, 18 Nov 2024 15:13:07 -0500
Subject: [PATCH 08/20] fixed issue where right edge of number was clipped

---
 .../hmi-client/src/components/widgets/tera-input-number.vue    | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-input-number.vue b/packages/client/hmi-client/src/components/widgets/tera-input-number.vue
index 5fa8db5dfe..e26695ce19 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-input-number.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-input-number.vue
@@ -57,7 +57,7 @@ const inputStyle = computed(() => {
 	if (props.autoWidth) {
 		const textToMeasure = input.value || props.placeholder;
 		// Estimate the width based on the length of the text to measure.
-		const width = (textToMeasure?.length || 1) * 8 + 4; // 8px per character + 4px padding
+		const width = (textToMeasure?.length || 1) * 10 + 4; // 10px per character + 6px padding
 		style.width = `${width}px`; // Dynamically set the width
 		style['min-width'] = '20px'; // Ensure a minimum width
 	}
@@ -109,5 +109,6 @@ watch(
 <style scoped>
 input {
 	text-align: right;
+	margin-right: 2px;
 }
 </style>

From 798349730d2423ea8cd8e18b29e0a3c56c09b0e0 Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Mon, 18 Nov 2024 15:20:07 -0500
Subject: [PATCH 09/20] use arrow keys to increment numbers up and down

---
 .../components/widgets/tera-input-number.vue  | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-input-number.vue b/packages/client/hmi-client/src/components/widgets/tera-input-number.vue
index e26695ce19..15d5ff9e66 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-input-number.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-input-number.vue
@@ -16,6 +16,7 @@
 				@focusout="$emit('focusout', $event)"
 				type="text"
 				:placeholder="placeholder"
+				@keydown="handleArrowKeys"
 			/>
 		</main>
 		<aside v-if="getErrorMessage"><i class="ml-2 pi pi-exclamation-circle" /> {{ getErrorMessage }}</aside>
@@ -104,6 +105,38 @@ watch(
 	},
 	{ immediate: true }
 );
+
+// Handle the arrow key presses
+function handleArrowKeys(event: KeyboardEvent) {
+	if (getDisabled) return;
+
+	const step = 1; // You can adjust this step size if needed
+	const currentValue = toNumber(maskedValue.value);
+	const isValidNumber = !isNaN(currentValue);
+
+	if (event.key === 'ArrowUp') {
+		// Increase the number
+		const newValue = isValidNumber ? currentValue + step : step;
+		updateNumber(newValue);
+	} else if (event.key === 'ArrowDown') {
+		// Decrease the number
+		const newValue = isValidNumber ? currentValue - step : -step;
+		updateNumber(newValue);
+	}
+}
+
+// Helper function to update the number and emit the change
+function updateNumber(value: number) {
+	// Prevent setting negative numbers if invalidateNegative is true
+	if (props.invalidateNegative && value < 0) {
+		error.value = 'Invalid number';
+		return;
+	}
+
+	error.value = '';
+	maskedValue.value = value.toString();
+	emit('update:model-value', value);
+}
 </script>
 
 <style scoped>

From fffb924c33abcccee434e21f8cb71e0442a7d576 Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Mon, 18 Nov 2024 15:26:15 -0500
Subject: [PATCH 10/20] made panel wider to accomodate settings

---
 .../workflow/ops/funman/tera-funman-drilldown.vue         | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
index ffec133030..da644f4cb0 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
@@ -12,7 +12,7 @@
 			class="input-config"
 			v-model:is-open="isSliderOpen"
 			header="Validate configuration settings"
-			content-width="420px"
+			content-width="440px"
 		>
 			<template #content>
 				<div class="top-toolbar">
@@ -100,7 +100,7 @@
 									placeholder="Select variables"
 									@update:model-value="onToggleVariableOfInterest"
 								/>
-								<span class="timespan">
+								<span class="timespan mt-3">
 									<div>
 										<label>Start time</label>
 										<tera-input-number class="w-12" v-model="knobs.currentTimespan.start" />
@@ -114,11 +114,11 @@
 										<tera-input-number class="w-12" v-model="knobs.numberOfSteps" />
 									</div>
 								</span>
-								<label>Timepoints</label>
+								<label class="mt-3">Timepoints</label>
 								<code class="inset">
 									{{ stepList.map((step) => Number(step.toFixed(3))).join(', ') }}
 								</code>
-								<label>Tolerance</label>
+								<label class="mt-3">Tolerance</label>
 								<div class="input-tolerance fadein animation-ease-in-out animation-duration-350">
 									<tera-input-number v-model="knobs.tolerance" />
 									<Slider v-model="knobs.tolerance" :min="0" :max="1" :step="0.01" class="w-full mr-2" />

From a407718a3b5774ef520ec052a68ff3aa8275c480 Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Mon, 18 Nov 2024 15:51:10 -0500
Subject: [PATCH 11/20] fixed tooltip max-width and color, adjsuted padding

---
 packages/client/hmi-client/src/assets/css/style.scss          | 4 ++++
 .../client/hmi-client/src/assets/css/theme/_variables.scss    | 4 ++--
 .../components/workflow/ops/funman/tera-funman-drilldown.vue  | 2 +-
 3 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/client/hmi-client/src/assets/css/style.scss b/packages/client/hmi-client/src/assets/css/style.scss
index c4048d3d83..2477ab0c93 100644
--- a/packages/client/hmi-client/src/assets/css/style.scss
+++ b/packages/client/hmi-client/src/assets/css/style.scss
@@ -226,4 +226,8 @@
 		}
 	}
 
+	/* Adjust tooltip width to support longer text */
+	.p-tooltip {
+		max-width: 380px;
+	}
 }
diff --git a/packages/client/hmi-client/src/assets/css/theme/_variables.scss b/packages/client/hmi-client/src/assets/css/theme/_variables.scss
index 9b60923594..05697f0744 100644
--- a/packages/client/hmi-client/src/assets/css/theme/_variables.scss
+++ b/packages/client/hmi-client/src/assets/css/theme/_variables.scss
@@ -652,9 +652,9 @@ $confirmPopupContentPadding: 1.5rem !default;
 $confirmPopupFooterPadding: 0 1.5rem 1rem 1.5rem !default;
 
 //tooltip
-$tooltipBg: rgba(97, 97, 97, .9) !default;
+$tooltipBg: rgba(52, 52, 52, 1) !default;
 $tooltipTextColor: #ffffff !default;
-$tooltipPadding: .5rem !default;
+$tooltipPadding: .85rem !default;
 
 //steps
 $stepsItemBg: transparent !default;
diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
index da644f4cb0..45f4c94b46 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
@@ -74,7 +74,7 @@
 								</li>
 							</ul>
 							<Button
-								class="mt-2"
+								class="my-2"
 								text
 								icon="pi pi-plus"
 								label="Add constraint"

From a032ed703c762b29ae3ab2eb4a01f957743e8406 Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Mon, 18 Nov 2024 16:05:44 -0500
Subject: [PATCH 12/20] style updates for Configure Model Notebook tab

---
 .../ops/model-config/tera-model-config-drilldown.vue         | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
index 2cedbc585a..7a27ae16c4 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue
@@ -860,8 +860,8 @@ onUnmounted(() => {
 }
 
 .notebook-section {
-	background-color: var(--surface-disabled);
-	border-right: 1px solid var(--surface-border-dark);
+	background-color: var(--surface-200);
+	border-right: 1px solid var(--surface-border-light);
 	padding: var(--gap-4);
 }
 
@@ -958,6 +958,7 @@ button.start-edit {
 
 .executed-code {
 	white-space: pre-wrap;
+	padding: var(--gap-4);
 }
 :deep(.content-wrapper) {
 	& > section {

From 7f5750627831d72701183ccb21c8f5310029ea90 Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Mon, 18 Nov 2024 17:32:16 -0500
Subject: [PATCH 13/20] made Documentation button look like the Add Note button

---
 .../drilldown/tera-drilldown-header.vue       |  8 +++++-
 .../tera-calibrate-ciemss-drilldown.vue       | 28 +++++++++----------
 2 files changed, 21 insertions(+), 15 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 4460ea8a23..66f861607e 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
@@ -83,12 +83,18 @@ header .tabs-row:deep(.p-tabview .p-tabview-panels) {
 }
 
 a {
-	height: 2.75rem;
 	display: flex;
 	align-items: center;
 	color: var(--primary-color);
 	margin-left: auto;
 	margin-right: var(--gap-4);
+	margin-bottom: 2px;
+	font-size: var(--font-caption);
+	padding: var(--gap-3);
+	border-radius: var(--border-radius-medium);
+}
+a:hover {
+	background-color: rgba(27, 128, 115, 0.04);
 }
 
 :deep(.p-tabview-header:not(.p-highlight) .p-tabview-nav-link) {
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 d39fdca8ec..ca00ea60ec 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
@@ -16,15 +16,14 @@
 			>
 				<template #content>
 					<div class="toolbar">
-						<p>Set your mapping, calibration and visualization settings then click run.</p>
+						<Button
+							label="Reset"
+							outlined
+							@click="resetState"
+							severity="secondary"
+							:disabled="_.isEmpty(node.outputs[0].value)"
+						/>
 						<span class="flex gap-2">
-							<Button
-								label="Reset"
-								outlined
-								@click="resetState"
-								severity="secondary"
-								:disabled="_.isEmpty(node.outputs[0].value)"
-							/>
 							<tera-pyciemss-cancel-button class="mr-auto" :simulation-run-id="cancelRunId" />
 							<Button label="Run" icon="pi pi-play" @click="runCalibrate" :disabled="disableRunButton" />
 						</span>
@@ -33,7 +32,7 @@
 					<!-- Mapping section -->
 					<div class="form-section">
 						<h5 class="mb-1">Mapping</h5>
-						<p class="mb-2">
+						<p class="mb-2 p-text-secondary text-sm">
 							Select a subset of output variables of the model and individually associate them to columns in the
 							dataset.
 						</p>
@@ -137,7 +136,7 @@
 								@update:model-value="setPresetValues"
 							/>
 						</div>
-						<label class="mb-1 p-text-secondary text-sm">
+						<label class="p-text-secondary text-sm flex align-items-center gap-2 my-1">
 							<i class="pi pi-info-circle" />
 							This impacts solver method, iterations and learning rate.
 						</label>
@@ -146,7 +145,7 @@
 								<label>Number of Samples</label>
 								<tera-input-number inputId="integeronly" v-model="knobs.numSamples" @update:model-value="updateState" />
 							</div>
-							<div class="spacer m-3" />
+							<div class="spacer m-4" />
 
 							<h6 class="mb-2">ODE solver options</h6>
 
@@ -165,7 +164,7 @@
 									<tera-input-number inputId="integeronly" v-model="knobs.stepSize" />
 								</div>
 							</div>
-							<div class="spacer m-3" />
+							<div class="spacer m-4" />
 							<h6 class="mb-2">Inference Options</h6>
 							<div class="input-row">
 								<div class="label-and-input">
@@ -192,7 +191,7 @@
 									<label>Loss function</label>
 									<tera-input-text disabled model-value="ELBO" />
 								</div>
-								<div class="label-and-input">
+								<div class="label-and-input mb-3">
 									<label>Optimizer method</label>
 									<tera-input-text disabled model-value="ADAM" />
 								</div>
@@ -1134,7 +1133,7 @@ th {
 .column-header {
 	color: var(--text-color-primary);
 	font-size: var(--font-body-small);
-	font-weight: var(--font-weight-semibold);
+	font-weight: var(--font-weight);
 	padding-top: var(--gap-2);
 }
 
@@ -1247,6 +1246,7 @@ img {
 	background: var(--surface-200);
 	padding: var(--gap-3);
 	border-radius: var(--border-radius-medium);
+	box-shadow: inset 0px 0px 4px var(--surface-border);
 }
 
 input {

From 87af9d35b7ac140aec75d82685751929813c5011 Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Mon, 18 Nov 2024 17:37:40 -0500
Subject: [PATCH 14/20] fixed error message margins & padding

---
 .../src/components/drilldown/tera-notebook-error.vue           | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/drilldown/tera-notebook-error.vue b/packages/client/hmi-client/src/components/drilldown/tera-notebook-error.vue
index b2d6b9c72f..b54a0c3e9a 100644
--- a/packages/client/hmi-client/src/components/drilldown/tera-notebook-error.vue
+++ b/packages/client/hmi-client/src/components/drilldown/tera-notebook-error.vue
@@ -32,8 +32,9 @@ watch(
 
 <style scoped>
 .container {
+	margin: 0 var(--gap-3) var(--gap-3) var(--gap-3);
 	background-color: #ffdcdc;
-	padding: var(--gap-2);
+	padding: var(--gap-3);
 	border-radius: var(--border-radius);
 }
 

From be54d9f2f9bb2cb16aaed438991539f1a01141a6 Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Mon, 18 Nov 2024 17:45:17 -0500
Subject: [PATCH 15/20] Added message if there is no output name to show

---
 .../ops/calibrate-ciemss/tera-calibrate-ciemss-drilldown.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 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 ca00ea60ec..dd0958f01e 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
@@ -222,8 +222,9 @@
 		<!-- Output section -->
 		<template #preview>
 			<tera-drilldown-section v-if="showOutputSection">
-				<template #header-controls-left v-if="configuredModelConfig?.name">
-					<h5 class="ml-3">{{ configuredModelConfig.name }}</h5>
+				<template #header-controls-left>
+					<h5 v-if="configuredModelConfig?.name" class="ml-3">{{ configuredModelConfig.name }}</h5>
+					<p class="ml-3" v-else>No output to show</p>
 				</template>
 				<template #header-controls-right>
 					<Button

From eaf03dd1e7ac12c87595f981162b521675520c32 Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Mon, 18 Nov 2024 18:04:41 -0500
Subject: [PATCH 16/20] Adjusted position of toggleable input so we get a nice
 left edge

---
 .../workflow/ops/funman/tera-constraint-group-form.vue      | 4 ++++
 .../workflow/ops/funman/tera-funman-drilldown.vue           | 6 +++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue
index ce8036957c..02a7980083 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue
@@ -8,6 +8,7 @@
 				:model-value="config.name"
 				tag="h3"
 				@update:model-value="emit('update-self', { key: 'name', value: $event })"
+				class="nudge-left"
 			/>
 			<div class="ml-auto flex align-items-center">
 				<label class="mr-2">Active</label>
@@ -263,4 +264,7 @@ ul {
 	padding: 0;
 	height: 28px;
 }
+.nudge-left {
+	margin-left: -0.5rem;
+}
 </style>
diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
index 45f4c94b46..080f35ad08 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
@@ -35,7 +35,7 @@
 								<li>
 									<section class="shadow-1">
 										<header class="flex w-full gap-3 mb-2">
-											<tera-toggleable-input v-model="knobs.compartmentalConstraint.name" tag="h3" />
+											<tera-toggleable-input v-model="knobs.compartmentalConstraint.name" tag="h3" class="nudge-left" />
 											<div class="ml-auto flex align-items-center">
 												<label class="mr-2">Active</label>
 												<InputSwitch class="mr-3" v-model="knobs.compartmentalConstraint.isActive" />
@@ -1052,4 +1052,8 @@ ul {
 	padding-left: var(--gap-4);
 	font-size: var(--font-caption);
 }
+
+.nudge-left {
+	margin-left: -0.5rem;
+}
 </style>

From 55fcd306469fcbe88b7824bff1be8b778705d5ee Mon Sep 17 00:00:00 2001
From: Jamie Waese <120480244+jamiewaese-uncharted@users.noreply.github.com>
Date: Mon, 18 Nov 2024 18:06:58 -0500
Subject: [PATCH 17/20] pretty constraint cards

---
 .../workflow/ops/funman/tera-constraint-group-form.vue          | 2 +-
 .../components/workflow/ops/funman/tera-funman-drilldown.vue    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue
index 02a7980083..96fa3cf8f6 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-constraint-group-form.vue
@@ -1,5 +1,5 @@
 <template>
-	<section>
+	<section class="pt-2">
 		<i class="ml-2" v-if="config.constraintType === ConstraintType.Following">
 			"following" option is not supported yet
 		</i>
diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
index 080f35ad08..0587369beb 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
@@ -33,7 +33,7 @@
 							</p>
 							<ul>
 								<li>
-									<section class="shadow-1">
+									<section class="shadow-1 pt-2">
 										<header class="flex w-full gap-3 mb-2">
 											<tera-toggleable-input v-model="knobs.compartmentalConstraint.name" tag="h3" class="nudge-left" />
 											<div class="ml-auto flex align-items-center">

From 9b1195087ad82ccc7db97efe09bc486b1e97b755 Mon Sep 17 00:00:00 2001
From: Yohann Paris <github@yohannparis.com>
Date: Tue, 19 Nov 2024 11:46:35 -0500
Subject: [PATCH 18/20] Update tera-input-number.vue

---
 .../hmi-client/src/components/widgets/tera-input-number.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-input-number.vue b/packages/client/hmi-client/src/components/widgets/tera-input-number.vue
index 15d5ff9e66..410783a1cf 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-input-number.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-input-number.vue
@@ -25,7 +25,7 @@
 
 <script setup lang="ts">
 import { numberToNist } from '@/utils/number';
-import { isNaN, toNumber, isEmpty } from 'lodash';
+import { debounce, isNaN, toNumber, isEmpty } from 'lodash';
 import { CSSProperties, computed, ref, watch } from 'vue';
 
 const props = defineProps<{
@@ -135,13 +135,13 @@ function updateNumber(value: number) {
 
 	error.value = '';
 	maskedValue.value = value.toString();
-	emit('update:model-value', value);
+	debounce(emit('update:model-value', value), 150);
 }
 </script>
 
 <style scoped>
 input {
+	margin-right: var(--gap-0-5);
 	text-align: right;
-	margin-right: 2px;
 }
 </style>

From b238aa3cde0d06d67533c1383875b875668a4ebb Mon Sep 17 00:00:00 2001
From: Adrian <asylvester@uncharted.software>
Date: Wed, 20 Nov 2024 13:48:35 -0500
Subject: [PATCH 19/20] remove unused style

---
 .../workflow/ops/funman/tera-funman-drilldown.vue    | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
index 8ed9cf7afc..d9e314e9c1 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/funman/tera-funman-drilldown.vue
@@ -962,18 +962,6 @@ watch(
 	margin-left: var(--gap-2);
 }
 
-/* force the constraint to linewrap if long*/
-.first-line:deep(.katex-html) {
-	display: flex;
-	flex-wrap: wrap;
-	width: 360px;
-}
-.first-line:deep(.katex-html .base) {
-	display: flex;
-	flex-wrap: wrap;
-	width: fit-content;
-}
-
 .secondary-text {
 	color: var(--text-color-subdued);
 	font-size: var(--font-caption);

From 9b68fa1e810c273ec8c683d40833339aa4d1854f Mon Sep 17 00:00:00 2001
From: Adrian <asylvester@uncharted.software>
Date: Wed, 20 Nov 2024 13:58:58 -0500
Subject: [PATCH 20/20] fix linter bug

---
 .../hmi-client/src/components/widgets/tera-input-number.vue     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/client/hmi-client/src/components/widgets/tera-input-number.vue b/packages/client/hmi-client/src/components/widgets/tera-input-number.vue
index 20fe77a1dd..c2a14bcb77 100644
--- a/packages/client/hmi-client/src/components/widgets/tera-input-number.vue
+++ b/packages/client/hmi-client/src/components/widgets/tera-input-number.vue
@@ -138,7 +138,7 @@ function updateNumber(value: number) {
 
 	error.value = '';
 	maskedValue.value = value.toString();
-	debounce(emit('update:model-value', value), 150);
+	debounce(() => emit('update:model-value', value), 150);
 }
 </script>