DARPA-ASKEM · asylves1 · Nov 20, 2024 · Nov 18, 2024 · Nov 18, 2024 · Nov 18, 2024
@@ -226,4 +226,8 @@
 		}
 	}
 
+	/* Adjust tooltip width to support longer text */
+	.p-tooltip {
+		max-width: 380px;
+	}
 }
@@ -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;

@@ -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>
@@ -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);
 

@@ -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) {

@@ -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);
 }
 

@@ -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>
@@ -73,7 +74,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 +84,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 +97,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>
@@ -128,16 +129,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
@@ -379,7 +384,7 @@ const userMenuItems = ref([
 		}
 	},
 	{
-		label: 'User Administration',
+		label: 'User administration',
 		command: () => {
 			router.push(RoutePath.UserAdmin);
 		},
@@ -553,7 +558,7 @@ nav {
 	border-radius: 50%;
 }
 .about-middle {
-	font-size: 1.25rem;
+	font-size: 1rem;
 	display: flex;
 	align-items: center;
 }
@@ -574,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';
@@ -585,7 +591,7 @@ nav {
 	margin-bottom: 0.5rem;
 }
 .about-bottom-line {
-	color: var(--text-color-subdued);
+	color: var(--text-color);
 }
 
 .modal-footer {
@@ -609,5 +615,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>
@@ -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>
@@ -24,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<{
@@ -57,7 +58,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
 	}
@@ -107,10 +108,43 @@ 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();
+	debounce(emit('update:model-value', value), 150);
+}
 </script>
 
 <style scoped>
 input {
+	margin-right: var(--gap-0-5);
 	text-align: right;
 }
 </style>