DARPA-ASKEM · shawnyama · Jun 14, 2024 · May 28, 2024 · May 28, 2024 · May 28, 2024
@@ -3,7 +3,7 @@
 		<template #header>
 			<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">
+				<div v-if="!isReadOnly" class="flex align-items-center gap-2 white-space-nowrap">
 					<label for="matrixShouldEval" class="mr-2">Evaluate expressions</label>
 					<InputSwitch
 						inputId="matrixShouldEval"
@@ -22,6 +22,7 @@
 			/>
 		</template>
 		<template #footer>
+			<!--FIXME: This design is odd, since these buttons do the same thing-->
 			<Button size="large" label="OK" @click="emit('close-modal')" />
 			<Button
 				size="large"
@@ -48,7 +49,7 @@ const props = defineProps<{
 	mmtParams: MiraTemplateParams;
 	id: string;
 	stratifiedMatrixType: StratifiedMatrix;
-	openValueConfig: boolean;
+	isReadOnly?: boolean;
 }>();
 
 const emit = defineEmits(['close-modal', 'update-cell-value']);

@@ -37,27 +37,23 @@
 							@keyup.enter="onEnterValueCell(cell.content.id, rowIdx, colIdx)"
 							@click="onEnterValueCell(cell.content.id, rowIdx, colIdx)"
 						>
-							<template v-if="cell.content.id">
-								<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="updateCellValue(cell.content.id, rowIdx, colIdx)"
-										@keyup.stop.enter="updateCellValue(cell.content.id, rowIdx, colIdx)"
-									/>
+							<section v-if="cell.content.id" 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="updateCellValue(cell.content.id, rowIdx, colIdx)"
+									@keyup.stop.enter="updateCellValue(cell.content.id, rowIdx, colIdx)"
+								/>
+								<div class="w-full" :class="{ 'hide-content': editableCellStates[rowIdx][colIdx] }">
 									<div
-										class="w-full"
-										:class="{ 'hide-content': editableCellStates[rowIdx][colIdx] }"
+										class="subdue mb-1 flex align-items-center gap-1 w-full justify-content-between"
+										v-if="stratifiedMatrixType !== StratifiedMatrix.Initials"
 									>
-										<div
-											class="subdue mb-1 flex align-items-center gap-1 w-full justify-content-between"
-											v-if="stratifiedMatrixType !== StratifiedMatrix.Initials"
-										>
-											{{ cell?.content.id }}
-											<!--
+										{{ cell?.content.id }}
+										<!--
 											<span
 												v-if="cell?.content?.controllers"
 												class="pi pi-info-circle"
@@ -67,16 +63,14 @@
 												}"
 											/>
 											-->
-										</div>
-										<div>
-											<div
-												class="mathml-container"
-												v-html="expressionMap[rowIdx + ':' + colIdx] ?? '...'"
-											/>
-										</div>
 									</div>
-								</section>
-							</template>
+									<div
+										v-if="!isReadOnly"
+										class="mathml-container"
+										v-html="expressionMap[rowIdx + ':' + colIdx] ?? '...'"
+									/>
+								</div>
+							</section>
 							<span v-else class="subdue">n/a</span>
 						</td>
 					</tr>
@@ -108,6 +102,7 @@ const props = defineProps<{
 	mmtParams: MiraTemplateParams;
 	id: string;
 	stratifiedMatrixType: StratifiedMatrix;
+	isReadOnly?: boolean;
 	shouldEval: boolean;
 }>();
 
@@ -144,7 +139,7 @@ const vFocus = {
 };
 
 function onEnterValueCell(variableName: string, rowIdx: number, colIdx: number) {
-	if (!variableName) return;
+	if (!variableName || props.isReadOnly) return;
 	valueToEdit.value = getVariable(props.mmt, variableName).value;
 	editableCellStates.value[rowIdx][colIdx] = true;
 }

diff --git a/...ges/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue b/...ges/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue
@@ -88,7 +88,6 @@
 					:mmt="mmt"
 					:mmt-params="mmtParams"
 					:stratified-matrix-type="StratifiedMatrix.Rates"
-					:open-value-config="openValueConfig"
 					@close-modal="openValueConfig = false"
 					@update-configuration="
 						(configToUpdate: ModelConfiguration) => emit('update-configuration', configToUpdate)

@@ -43,7 +43,6 @@
 			:mmt="mmt"
 			:mmt-params="mmtParams"
 			:stratified-matrix-type="StratifiedMatrix.Initials"
-			:open-value-config="!!matrixModalId"
 			@close-modal="matrixModalId = ''"
 			@update-cell-value="
 				emit('update-expression', { id: $event.variableName, value: $event.newValue })

@@ -219,7 +219,6 @@
 			:mmt="mmt"
 			:mmt-params="mmtParams"
 			:stratified-matrix-type="StratifiedMatrix.Initials"
-			:open-value-config="matrixModalContext.isOpen"
 			@close-modal="matrixModalContext.isOpen = false"
 			@update-cell-value="(configToUpdate: any) => updateCellValue(configToUpdate)"
 		/>

@@ -116,7 +116,6 @@
 			:mmt="mmt"
 			:mmt-params="mmtParams"
 			:stratified-matrix-type="StratifiedMatrix.Parameters"
-			:open-value-config="!!matrixModalId"
 			@close-modal="matrixModalId = ''"
 			@update-cell-value="
 				emit('update-parameters', [

@@ -158,7 +158,6 @@
 			:mmt="mmt"
 			:mmt-params="mmtParams"
 			:stratified-matrix-type="StratifiedMatrix.Parameters"
-			:open-value-config="matrixModalContext.isOpen"
 			@close-modal="matrixModalContext.isOpen = false"
 			@update-cell-value="(configToUpdate: any) => updateCellValue(configToUpdate)"
 		/>

@@ -5,7 +5,9 @@
 				Initial variables<span class="artifact-amount">({{ initialsLength }})</span>
 			</template>
 			<tera-initials-metadata
+				v-if="!isEmpty(mmt.initials)"
 				:model="model"
+				:mmt="mmt"
 				@update-initial-metadata="emit('update-initial-metadata', $event)"
 			/>
 		</AccordionTab>
@@ -14,7 +16,10 @@
 				Parameters<span class="artifact-amount">({{ parameters?.length }})</span>
 			</template>
 			<tera-parameters-metadata
+				v-if="!isEmpty(mmt.parameters)"
 				:model="model"
+				:mmt="mmt"
+				:mmt-params="mmtParams"
 				@update-parameter="emit('update-parameter', $event)"
 			/>
 		</AccordionTab>

@@ -64,7 +64,10 @@
 		</AccordionTab>
 		<AccordionTab header="Parameters">
 			<tera-parameters-metadata
+				v-if="!isEmpty(mmt.parameters)"
 				:model="model"
+				:mmt="mmt"
+				:mmt-params="mmtParams"
 				@update-parameter="emit('update-parameter', $event)"
 			/>
 		</AccordionTab>

@@ -5,7 +5,9 @@
 				Initial variables<span class="artifact-amount">({{ initialsLength }})</span>
 			</template>
 			<tera-initials-metadata
+				v-if="!isEmpty(mmt.initials)"
 				:model="model"
+				:mmt="mmt"
 				@update-initial-metadata="emit('update-initial-metadata', $event)"
 			/>
 		</AccordionTab>
@@ -14,7 +16,10 @@
 				Parameters<span class="artifact-amount">({{ parametersLength }})</span>
 			</template>
 			<tera-parameters-metadata
+				v-if="!isEmpty(mmt.parameters)"
 				:model="model"
+				:mmt="mmt"
+				:mmt-params="mmtParams"
 				@update-parameter="emit('update-parameter', $event)"
 			/>
 		</AccordionTab>

@@ -1,5 +1,5 @@
 <template>
-	<section>
+	<section :class="{ 'has-toggle': isBase, 'no-second-row': isStratified }">
 		<h6>{{ target }}</h6>
 		<tera-input
 			label="Name"
@@ -16,13 +16,22 @@
 				})
 			"
 		/>
-		<tera-input
-			label="Unit"
-			:model-value="getInitialUnits(model, target)"
-			@update:model-value="$emit('update-initial-metadata', { key: 'units', value: $event })"
-		/>
-		<!--TODO: Add support for editing concepts--->
-		<tera-input label="Concept" :model-value="getInitialConcept(model, target)" disabled />
+		<template v-if="!isStratified">
+			<Button
+				v-if="isBase"
+				:icon="showStratifiedVariables ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"
+				text
+				rounded
+				@click="$emit('toggle-stratified-variables')"
+			/>
+			<tera-input
+				label="Unit"
+				:model-value="getInitialUnits(model, target)"
+				@update:model-value="$emit('update-initial-metadata', { key: 'units', value: $event })"
+			/>
+			<!--TODO: Add support for editing concepts-->
+			<tera-input label="Concept" :model-value="getInitialConcept(model, target)" disabled />
+		</template>
 	</section>
 </template>
 
@@ -35,26 +44,47 @@ import {
 	getInitialConcept
 } from '@/model-representation/service';
 import TeraInput from '@/components/widgets/tera-input.vue';
+import Button from 'primevue/button';
 
 defineProps<{
 	model: Model;
 	target: string;
+	isBase?: boolean;
+	isStratified?: boolean;
+	showStratifiedVariables?: boolean;
 }>();
+
+defineEmits(['update-initial-metadata', 'toggle-stratified-variables', 'open-matrix']);
 </script>
 
 <style scoped>
 section {
 	display: grid;
 	grid-template-areas:
 		'symbol name description description'
-		'unit		unit concept .';
+		'unit	unit concept .';
 	grid-template-columns: max-content 30% 30% auto;
 	gap: var(--gap-small);
 	align-items: center;
 }
 
+section.has-toggle {
+	grid-template-areas:
+		'symbol name description description'
+		'toggle	unit concept .';
+}
+
+section.no-second-row {
+	gap: 0 var(--gap-small);
+}
+
 h6 {
 	grid-area: symbol;
+	justify-self: center;
+}
+
+button {
+	grid-area: toggle;
 }
 
 :deep([label='Name']) {

@@ -1,5 +1,27 @@
 <template>
-	<ul>
+	<ul v-if="isStratified">
+		<li v-for="([baseTarget, values], index) in collapsedInitials.entries()" :key="baseTarget">
+			<tera-initial-metadata-entry
+				:model="model"
+				:target="baseTarget"
+				is-base
+				:show-stratified-variables="toggleStates[index]"
+				@toggle-stratified-variables="toggleStates[index] = !toggleStates[index]"
+				@update-initial-metadata="updateBaseInitial(baseTarget, $event)"
+			/>
+			<ul v-if="toggleStates[index]" class="stratified">
+				<li v-for="target in values" :key="target">
+					<tera-initial-metadata-entry
+						:model="model"
+						:target="target"
+						is-stratified
+						@update-initial-metadata="$emit('update-initial-metadata', { target, ...$event })"
+					/>
+				</li>
+			</ul>
+		</li>
+	</ul>
+	<ul v-else>
 		<li v-for="{ target } in initials" :key="target">
 			<tera-initial-metadata-entry
 				:model="model"
@@ -11,22 +33,51 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue';
 import { Model } from '@/types/Types';
+import { MiraModel } from '@/model-representation/mira/mira-common';
 import { getInitials } from '@/model-representation/service';
+import { collapseInitials, isStratifiedModel } from '@/model-representation/mira/mira';
 import TeraInitialMetadataEntry from '@/components/model/tera-initial-metadata-entry.vue';
 
 const props = defineProps<{
 	model: Model;
+	mmt: MiraModel;
 }>();
 
-defineEmits(['update-initial-metadata']);
+const emit = defineEmits(['update-initial-metadata']);
 
 const initials = getInitials(props.model);
+const isStratified = isStratifiedModel(props.mmt);
+const collapsedInitials = collapseInitials(props.mmt);
+
+const toggleStates = ref(Array.from({ length: collapsedInitials.size }, () => false));
+
+function updateBaseInitial(baseTarget: string, event: any) {
+	emit('update-initial-metadata', { target: baseTarget, ...event });
+	// Update stratified initials if the event is a unit change
+	const targets = collapsedInitials.get(baseTarget);
+	if (targets && event.key === 'units') {
+		targets.forEach((target) => emit('update-initial-metadata', { target, ...event }));
+	}
+}
 </script>
 
 <style scoped>
 li {
-	padding: var(--gap-small) 0;
+	padding-bottom: var(--gap-small);
 	border-bottom: 1px solid var(--surface-border);
 }
+
+.stratified {
+	gap: var(--gap-small);
+	margin: var(--gap-small) 0 0 var(--gap-medium);
+
+	& > li {
+		border-left: 2px solid var(--primary-color-dark);
+		padding-left: var(--gap);
+		padding-bottom: 0;
+		border-bottom: none;
+	}
+}
 </style>
@@ -18,7 +18,11 @@ import TeraRegnetTables from '@/components/model/regnet/tera-regnet-tables.vue';
 import TeraStockflowTables from '@/components/model/stockflow/tera-stockflow-tables.vue';
 import { AMRSchemaNames } from '@/types/common';
 import { getModelType } from '@/services/model';
-import { updateInitialMetadata, updateParameter } from '@/model-representation/service';
+import {
+	updateInitialMetadata,
+	updateParameter,
+	updateParameterMetadata
+} from '@/model-representation/service';
 
 const props = defineProps<{
 	model: Model;
@@ -50,8 +54,12 @@ function onUpdateInitialMetadata(event: any) {
 }
 
 function onUpdateParameter(event: any) {
-	const { parameterId, key, value } = event;
-	updateParameter(transientModel.value, parameterId, key, value);
+	const { parameterId, key, value, isMetadata } = event;
+	if (isMetadata) {
+		updateParameterMetadata(transientModel.value, parameterId, key, value);
+	} else {
+		updateParameter(transientModel.value, parameterId, key, value);
+	}
 }
 
 // Apply changes to the model when the component unmounts or the user navigates away