Jamie configure model matrix fixes

packages/client/hmi-client/src/components/model/petrinet/model-configurations/tera-stratified-matrix-modal.vue

@@ -1,16 +1,17 @@
 <template>
 	<tera-modal @modal-mask-clicked="emit('close-modal')">
 		<template #header>
-			<h4>{{ id }}</h4>
-			<span>Configure the matrix values</span>
-			<div class="flex align-items-center">
-				<Checkbox
-					inputId="matrixShouldEval"
-					v-model="matrixShouldEval"
-					:binary="true"
-					label="Evaluate expressions?"
-				/>
-				<label for="matrixShouldEval" class="ml-2"> Evaluate Expressions? </label>
+			<div class="flex align-items-center justify-space-between">
+				<h4 class="w-full">{{ id }} matrix</h4>
+				<div class="flex align-items-center gap-2 white-space-nowrap">
+					<label for="matrixShouldEval" class="mr-2">Evaluate expressions</label>
+					<InputSwitch
+						inputId="matrixShouldEval"
+						v-model="matrixShouldEval"
+						:binary="true"
+						label="Evaluate expressions?"
+					/>
+				</div>
 			</div>
 		</template>
 		<template #default>
@@ -44,8 +45,14 @@
 			/>
 		</template>
 		<template #footer>
-			<Button label="OK" @click="emit('close-modal')" />
-			<Button class="p-button-outlined" label="Cancel" @click="emit('close-modal')" />
+			<Button size="large" label="OK" @click="emit('close-modal')" />
+			<Button
+				size="large"
+				severity="secondary"
+				class="p-button-outlined"
+				label="Cancel"
+				@click="emit('close-modal')"
+			/>
 		</template>
 	</tera-modal>
 </template>
@@ -54,7 +61,7 @@
 import { ref } from 'vue';
 import { StratifiedModel } from '@/model-representation/petrinet/petrinet-service';
 import type { ModelConfiguration } from '@/types/Types';
-import Checkbox from 'primevue/checkbox';
+import InputSwitch from 'primevue/inputswitch';
 import Button from 'primevue/button';
 import TeraModal from '@/components/widgets/tera-modal.vue';
 import { StratifiedMatrix } from '@/types/Model';
@@ -72,3 +79,9 @@ const emit = defineEmits(['close-modal', 'update-configuration']);
 
 const matrixShouldEval = ref(true);
 </script>
+
+<style scoped>
+main:deep(.content) {
+	min-width: 40rem;
+}
+</style>

packages/client/hmi-client/src/components/model/petrinet/model-configurations/tera-stratified-matrix.vue

@@ -15,7 +15,7 @@
 					<tr v-for="(row, rowIdx) in matrix" :key="rowIdx">
 						<td v-if="matrix.length > 0" class="p-frozen-column">
 							<template v-if="stratifiedMatrixType === StratifiedMatrix.Initials">
-								{{ Object.values(row[0].rowCriteria).join(' / ') }}
+								{{ Object.values(row[0].rowCriteria)[0] }}
 							</template>
 							<template v-else>
 								{{ row[0].rowCriteria }}
@@ -25,35 +25,52 @@
 							v-for="(cell, colIdx) in row"
 							:key="colIdx"
 							tabindex="0"
-							:class="editableCellStates[rowIdx][colIdx] && 'is-editing'"
+							:class="{
+								'is-editing': editableCellStates[rowIdx][colIdx],
+								'n-a-cell': !cell.content.id
+							}"
 							@keyup.enter="onEnterValueCell(cell.content.id, rowIdx, colIdx)"
 							@click="onEnterValueCell(cell.content.id, rowIdx, colIdx)"
 						>
 							<template v-if="cell.content.id">
-								<InputText
-									v-if="editableCellStates[rowIdx][colIdx]"
-									class="cell-input"
-									v-model.lazy="valueToEdit"
-									v-focus
-									@focusout="updateModelConfigValue(cell.content.id, rowIdx, colIdx)"
-									@keyup.stop.enter="updateModelConfigValue(cell.content.id, rowIdx, colIdx)"
-								/>
-								<section v-else>
-									<div>
+								<section class="flex flex-column">
+									<InputText
+										v-if="editableCellStates[rowIdx][colIdx]"
+										class="cell-input"
+										:class="stratifiedMatrixType !== StratifiedMatrix.Initials && 'big-cell-input'"
+										v-model.lazy="valueToEdit"
+										v-focus
+										@focusout="updateModelConfigValue(cell.content.id, rowIdx, colIdx)"
+										@keyup.stop.enter="updateModelConfigValue(cell.content.id, rowIdx, colIdx)"
+									/>
+									<div
+										class="w-full"
+										:class="{ 'hide-content': editableCellStates[rowIdx][colIdx] }"
+									>
 										<div
-											class="mathml-container"
-											v-html="matrixExpressionsList?.[rowIdx]?.[colIdx] ?? '...'"
-										/>
-										<template v-if="cell?.content?.controllers">
-											controllers: {{ cell?.content?.controllers }}
-										</template>
-									</div>
-									<div class="subdue">
-										{{ cell?.content.id }}
+											class="subdue mb-1 flex align-items-center gap-1 w-full justify-content-between"
+											v-if="stratifiedMatrixType !== StratifiedMatrix.Initials"
+										>
+											{{ cell?.content.id }}
+											<span
+												v-if="cell?.content?.controllers"
+												class="pi pi-info-circle"
+												v-tooltip.top="{
+													value: `Controllers:\n ${cell?.content?.controllers}`,
+													pt: 'grid col'
+												}"
+											/>
+										</div>
+										<div>
+											<div
+												class="mathml-container"
+												v-html="matrixExpressionsList?.[rowIdx]?.[colIdx] ?? '...'"
+											/>
+										</div>
 									</div>
 								</section>
 							</template>
-							<span v-else class="subdue">N/A</span>
+							<span v-else class="subdue">n/a</span>
 						</td>
 					</tr>
 				</tbody>
@@ -272,23 +289,44 @@ onMounted(() => {
 
 .p-datatable .p-datatable-tbody > tr > td.is-editing {
 	padding: 0;
+	padding-bottom: 0;
 }
 
 .editable-cell {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	visibility: visible;
-	width: 100%;
 }
-
+.n-a-cell {
+	background-color: var(--surface-b);
+}
+.hide-content {
+	visibility: hidden;
+	height: 0px;
+	padding-left: 2rem;
+}
 .cell-input {
-	height: 4rem;
-	min-width: 8rem;
-	width: 100%;
-	padding-left: 12px;
+	padding-left: var(--gap-small);
+	padding-right: var(--gap);
+	margin-bottom: 0 !important;
+	font-feature-settings: 'tnum';
+	text-align: right;
+	height: 44px;
 }
 
+.big-cell-input {
+	height: 66px;
+}
+
+.mathml-container {
+	width: 100%;
+	text-align: right;
+}
+.mathml-container:deep(mn) {
+	font-family: var(--font-family);
+	font-feature-settings: 'tnum';
+	text-align: right !important;
+}
 .p-datatable-scrollable .p-frozen-column {
 	padding-right: 1rem;
 }
@@ -301,6 +339,9 @@ onMounted(() => {
 	color: var(--text-color-subdued);
 }
 
+.controllers {
+	font-size: var(--font-caption);
+}
 section {
 	display: flex;
 	justify-content: space-between;