From 5f3255e59cfd7b69fdc37f90e1404869e2bc78d2 Mon Sep 17 00:00:00 2001
From: Al-Jami Ismail <aljami1379@gmail.com>
Date: Tue, 16 Jan 2024 13:04:21 -0500
Subject: [PATCH] Model config matrices functional implementation (#2515)

---
 .../tera-stratified-matrix.vue                |  10 +-
 .../model-config/tera-model-config-editor.vue | 272 +++++++++++++++---
 .../ops/model-config/tera-model-config.vue    |  28 +-
 3 files changed, 251 insertions(+), 59 deletions(-)

diff --git a/packages/client/hmi-client/src/components/model/petrinet/model-configurations/tera-stratified-matrix.vue b/packages/client/hmi-client/src/components/model/petrinet/model-configurations/tera-stratified-matrix.vue
index 1f67a49286..d4f10bc2b6 100644
--- a/packages/client/hmi-client/src/components/model/petrinet/model-configurations/tera-stratified-matrix.vue
+++ b/packages/client/hmi-client/src/components/model/petrinet/model-configurations/tera-stratified-matrix.vue
@@ -5,15 +5,15 @@
 	>
 		<div class="p-datatable-wrapper">
 			<table class="p-datatable-table p-datatable-scrollable-table editable-cells-table">
-				<thead v-if="matrix[0].length > 1" class="p-datatable-thead">
+				<thead v-if="matrix[0].length > 0" class="p-datatable-thead">
 					<tr>
-						<th v-if="matrix.length > 1" class="choose-criteria">&nbsp;</th>
+						<th v-if="matrix.length > 0" class="choose-criteria">&nbsp;</th>
 						<th v-for="(row, rowIdx) in matrix[0]" :key="rowIdx">{{ row.colCriteria }}</th>
 					</tr>
 				</thead>
 				<tbody class="p-datatable-tbody">
 					<tr v-for="(row, rowIdx) in matrix" :key="rowIdx">
-						<td v-if="matrix.length > 1" class="p-frozen-column">
+						<td v-if="matrix.length > 0" class="p-frozen-column">
 							<template v-if="stratifiedMatrixType === StratifiedMatrix.Initials">
 								{{ Object.values(row[0].rowCriteria).join(' / ') }}
 							</template>
@@ -234,6 +234,10 @@ function configureMatrix() {
 	}
 }
 
+watch([() => props.id, () => props.modelConfiguration.configuration], () => {
+	configureMatrix();
+});
+
 onMounted(() => {
 	configureMatrix();
 });
diff --git a/packages/client/hmi-client/src/workflow/ops/model-config/tera-model-config-editor.vue b/packages/client/hmi-client/src/workflow/ops/model-config/tera-model-config-editor.vue
index f4458f904d..742398c3a6 100644
--- a/packages/client/hmi-client/src/workflow/ops/model-config/tera-model-config-editor.vue
+++ b/packages/client/hmi-client/src/workflow/ops/model-config/tera-model-config-editor.vue
@@ -4,12 +4,22 @@
 		<section>
 			<div>
 				<h4>Initials</h4>
-				<Accordion v-if="stratifiedModelType && !_.isEmpty(initials)" :multiple="true">
-					<AccordionTab v-for="[init, vals] in initials" :key="init">
-						<template #header>
-							{{ init }}
-						</template>
-						<ul>
+				<!-- TODO: create a separate component for this custom "Accordion" -->
+				<div v-if="stratifiedModelType && !_.isEmpty(initials)">
+					<div v-for="([init, vals], idx) in initials" :key="init">
+						<div>
+							<Button
+								:icon="openInitials.includes(idx) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"
+								class="p-button-sm p-button-text"
+								@click="toggleAccordion(FieldTypes.StratifiedInitial, idx)"
+							/>
+							<Button
+								:label="init"
+								class="p-button-text"
+								@click="getClickedField(FieldTypes.StratifiedInitial, init)"
+							/>
+						</div>
+						<ul v-if="openInitials.includes(idx)">
 							<li v-for="val in vals" :key="val">
 								<Button
 									:label="val"
@@ -17,12 +27,12 @@
 									plain
 									text
 									size="small"
-									@click="getClickedField('initial', val)"
+									@click="getClickedField(FieldTypes.Initial, val)"
 								/>
 							</li>
 						</ul>
-					</AccordionTab>
-				</Accordion>
+					</div>
+				</div>
 				<ul v-else-if="!stratifiedModelType && !_.isEmpty(initials)">
 					<li v-for="[init, vals] in initials" :key="init">
 						<Button
@@ -31,19 +41,29 @@
 							plain
 							text
 							size="large"
-							@click="getClickedField('initial', vals[0])"
+							@click="getClickedField(FieldTypes.Initial, vals[0])"
 						/>
 					</li>
 				</ul>
 			</div>
 			<div>
 				<h4>Parameters</h4>
-				<Accordion v-if="stratifiedModelType && !_.isEmpty(parameters)" :multiple="true">
-					<AccordionTab v-for="[param, vals] in parameters" :key="param">
-						<template #header>
-							{{ param }}
-						</template>
-						<ul>
+				<!-- TODO: create a separate component for this custom "Accordion" -->
+				<div v-if="stratifiedModelType && !_.isEmpty(parameters)">
+					<div v-for="([param, vals], idx) in parameters" :key="param">
+						<div>
+							<Button
+								:icon="openParameters.includes(idx) ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"
+								class="p-button-sm p-button-text"
+								@click="toggleAccordion(FieldTypes.StratifiedParameter, idx)"
+							/>
+							<Button
+								:label="param"
+								class="p-button-text"
+								@click="getClickedField(FieldTypes.StratifiedParameter, param)"
+							/>
+						</div>
+						<ul v-if="openParameters.includes(idx)">
 							<li v-for="val in vals" :key="val">
 								<Button
 									:label="val"
@@ -51,12 +71,12 @@
 									plain
 									text
 									size="small"
-									@click="getClickedField('parameter', val)"
+									@click="getClickedField(FieldTypes.Parameter, val)"
 								/>
 							</li>
 						</ul>
-					</AccordionTab>
-				</Accordion>
+					</div>
+				</div>
 				<ul v-else-if="!stratifiedModelType && !_.isEmpty(parameters)">
 					<li v-for="[param, vals] in parameters" :key="param">
 						<Button
@@ -65,7 +85,7 @@
 							plain
 							text
 							size="large"
-							@click="getClickedField('parameter', vals[0])"
+							@click="getClickedField(FieldTypes.Parameter, vals[0])"
 						/>
 					</li>
 				</ul>
@@ -74,7 +94,29 @@
 		<!-- FIXME: may want to replace section with something that handles long parameters list better -->
 		<section>
 			<div class="content-container">
-				<div v-if="fieldType === 'parameter'" class="form-section">
+				<div v-if="fieldType === FieldTypes.StratifiedParameter" class="form-section">
+					<h4>{{ paramBase }}</h4>
+					<tera-stratified-matrix
+						:model-configuration="basicModelConfig"
+						:id="paramBase!"
+						:stratified-model-type="stratifiedModelType!"
+						:stratified-matrix-type="StratifiedMatrix.Parameters"
+						:should-eval="false"
+						@update-configuration="updateParametersFromMatrix"
+					/>
+				</div>
+				<div v-else-if="fieldType === FieldTypes.StratifiedInitial" class="form-section">
+					<h4>{{ initBase }}</h4>
+					<tera-stratified-matrix
+						:model-configuration="basicModelConfig"
+						:id="initBase!"
+						:stratified-model-type="stratifiedModelType!"
+						:stratified-matrix-type="StratifiedMatrix.Initials"
+						:should-eval="false"
+						@update-configuration="updateInitialsFromMatrix"
+					/>
+				</div>
+				<div v-else-if="fieldType === FieldTypes.Parameter" class="form-section">
 					<h4>
 						{{
 							currentParam?.name ? `${currentParam.name} | ${currentParam.id}` : currentParam?.id
@@ -84,7 +126,7 @@
 						<h3>Description</h3>
 						<p>{{ currentParam?.description }}</p>
 					</div>
-					<div>
+					<div v-if="currentParam?.value">
 						<h3>Value</h3>
 						<InputNumber
 							class="p-inputtext-sm"
@@ -92,19 +134,65 @@
 							mode="decimal"
 							:min-fraction-digits="1"
 							:max-fraction-digits="10"
-							v-model="paramValue"
-							@update:model-value="updateParameter(paramValue)"
+							v-model="currentParam.value"
+							@update:model-value="updateParameter"
+						/>
+					</div>
+					<div v-if="currentParam?.distribution">
+						<!-- TODO: add dropdown for more distribution types, right now there's
+                            only support for uniform distribution so we're just hardcoding it
+                        -->
+						<div class="distribution-section">
+							<h3>Distribution: {{ currentParam.distribution.type }}</h3>
+							<div>
+								<i
+									class="trash-button pi pi-trash"
+									:style="'cursor: pointer'"
+									@click="removeDistribution"
+								/>
+							</div>
+						</div>
+						<div class="distribution-section">
+							<label>Min</label>
+							<InputNumber
+								class="p-inputtext-sm"
+								inputId="numericInput"
+								mode="decimal"
+								:min-fraction-digits="1"
+								:max-fraction-digits="10"
+								v-model="currentParam.distribution.parameters.minimum"
+								@update:model-value="updateParameter"
+							/>
+							<label>Max</label>
+							<InputNumber
+								class="p-inputtext-sm"
+								inputId="numericInput"
+								mode="decimal"
+								:min-fraction-digits="1"
+								:max-fraction-digits="10"
+								v-model="currentParam.distribution.parameters.maximum"
+								@update:model-value="updateParameter"
+							/>
+						</div>
+					</div>
+					<div v-else-if="!currentParam?.distribution">
+						<h3>Distribution</h3>
+						<Button
+							icon="pi pi-plus"
+							class="p-button-sm p-button-text"
+							label="Add Distribution"
+							@click="addDistribution"
 						/>
 					</div>
 				</div>
-				<div v-else-if="fieldType === 'initial'" class="form-section">
+				<div v-else-if="fieldType === FieldTypes.Initial" class="form-section">
 					<h4>{{ currentInitial?.target }}</h4>
-					<div>
+					<div v-if="currentInitial?.expression">
 						<h3>Expression</h3>
 						<InputText
 							class="p-inputtext-sm"
-							v-model="initialExpression"
-							@update:model-value="updateInitial(initialExpression)"
+							v-model="currentInitial.expression"
+							@update:model-value="updateInitial"
 						/>
 					</div>
 				</div>
@@ -116,62 +204,135 @@
 
 <script setup lang="ts">
 import _ from 'lodash';
-import { computed, ref, watch } from 'vue';
-import Accordion from 'primevue/accordion';
-import AccordionTab from 'primevue/accordiontab';
+import { computed, ref, Ref, watch } from 'vue';
 import Button from 'primevue/button';
 import InputNumber from 'primevue/inputnumber';
 import InputText from 'primevue/inputtext';
-import type { Model, Initial, ModelParameter } from '@/types/Types';
+import type { Model, ModelConfiguration, ModelParameter, Initial } from '@/types/Types';
 import {
 	getUnstratifiedParameters,
 	getUnstratifiedInitials
 } from '@/model-representation/petrinet/mira-petri';
 import { getStratificationType } from '@/model-representation/petrinet/petrinet-service';
+import TeraStratifiedMatrix from '@/components/model/petrinet/model-configurations/tera-stratified-matrix.vue';
+import { StratifiedMatrix } from '@/types/Model';
+
+enum FieldTypes {
+	Parameter = 'parameter',
+	Initial = 'initial',
+	StratifiedParameter = 'stratified-parameter',
+	StratifiedInitial = 'stratified-initial'
+}
 
 const props = defineProps<{
 	model: Model;
+	// while initials and parameters exist in the model, we're taking in these additional props
+	// because these initials/parameters correspond to the saem initials/parameters stored in state
+	// I thought that it might make sense to just store the initials/parameters in state, instead of
+	// the whole model. Also think this way makes it a bit easier to modify the initials/parameters
+	// in the wizard and keep track of changes when switching back and forth between outputs.
 	initials: Initial[];
 	parameters: ModelParameter[];
 }>();
 
 const emit = defineEmits(['update-param', 'update-initial']);
 
+const openInitials = ref<number[]>([]);
+const openParameters = ref<number[]>([]);
+
+const basicModelConfig = ref<ModelConfiguration>({
+	id: '',
+	name: '',
+	modelId: props.model.id,
+	configuration: props.model
+});
+
 const stratifiedModelType = computed(() => getStratificationType(props.model));
 
 const parameters = computed<Map<string, string[]>>(() => getUnstratifiedParameters(props.model));
 const currentParam = ref<ModelParameter>();
-const paramValue = ref<number>();
+const paramBase = ref<string>();
 
 const initials = computed<Map<string, string[]>>(() => getUnstratifiedInitials(props.model));
 const currentInitial = ref<Initial>();
-const initialExpression = ref<string>();
+const initBase = ref<string>();
 
-const fieldType = ref<string>();
+const fieldType = ref<FieldTypes>();
 const selectedField = ref<string>();
 
-const getClickedField = (type: string, field: string) => {
+const toggleAccordion = (type: FieldTypes, index: number) => {
+	if (type === FieldTypes.StratifiedInitial) {
+		toggleAccordionHelper(openInitials, index);
+	} else if (type === FieldTypes.StratifiedParameter) {
+		toggleAccordionHelper(openParameters, index);
+	}
+};
+
+const toggleAccordionHelper = (openIndices: Ref<number[]>, index: number) => {
+	if (openIndices.value.includes(index)) {
+		openIndices.value = openIndices.value.filter((i) => i !== index);
+	} else {
+		openIndices.value = [...openIndices.value, index];
+	}
+};
+
+const getClickedField = (type: FieldTypes, field: string) => {
 	fieldType.value = type;
 	selectedField.value = field;
 
-	if (type === 'parameter') {
+	if (type === FieldTypes.StratifiedParameter) {
+		paramBase.value = field;
+	} else if (type === FieldTypes.StratifiedInitial) {
+		initBase.value = field;
+	} else if (type === FieldTypes.Parameter) {
 		currentParam.value = props.parameters.find((p) => p.id === field);
-		paramValue.value = currentParam.value?.value;
-	} else if (type === 'initial') {
+	} else if (type === FieldTypes.Initial) {
 		currentInitial.value = props.initials.find((i) => i.target === field);
-		initialExpression.value = currentInitial.value?.expression;
 	}
 };
 
-const updateParameter = (paramVal?: number) => {
-	if (paramVal) {
-		emit('update-param', { ...currentParam.value, value: paramVal });
+const addDistribution = () => {
+	if (currentParam.value) {
+		currentParam.value.distribution = {
+			type: 'Uniform1',
+			parameters: {
+				minimum: 0,
+				maximum: 0
+			}
+		};
+	}
+};
+
+const removeDistribution = () => {
+	if (currentParam.value) {
+		currentParam.value.distribution = undefined;
+	}
+	updateParameter();
+};
+
+const updateParameter = () => {
+	if (currentParam.value) {
+		emit('update-param', [currentParam.value]);
+	}
+};
+
+const updateInitial = () => {
+	if (currentInitial.value) {
+		emit('update-initial', [currentInitial.value]);
 	}
 };
 
-const updateInitial = (initialExp?: string) => {
-	if (initialExp) {
-		emit('update-initial', { ...currentInitial.value, expression: initialExp });
+const updateParametersFromMatrix = (configToUpdate: ModelConfiguration) => {
+	const newParams = configToUpdate.configuration?.semantics.ode.parameters;
+	if (newParams) {
+		emit('update-param', newParams, true);
+	}
+};
+
+const updateInitialsFromMatrix = (configToUpdate: ModelConfiguration) => {
+	const newInits = configToUpdate.configuration?.semantics.ode.initials;
+	if (newInits) {
+		emit('update-initial', newInits, true);
 	}
 };
 
@@ -179,6 +340,18 @@ const updateInitial = (initialExp?: string) => {
 watch(
 	[() => props.initials, () => props.parameters],
 	() => {
+		const model = _.cloneDeep(props.model);
+		if (model.semantics) {
+			model.semantics.ode.initials = props.initials;
+			model.semantics.ode.parameters = props.parameters;
+			basicModelConfig.value = {
+				id: '',
+				name: '',
+				modelId: props.model.id,
+				configuration: model
+			};
+		}
+
 		if (fieldType.value && selectedField.value) {
 			getClickedField(fieldType.value, selectedField.value);
 		}
@@ -222,4 +395,11 @@ ul {
 	flex-direction: column;
 	gap: var(--gap);
 }
+
+.distribution-section {
+	align-items: center;
+	display: flex;
+	flex-direction: row;
+	gap: var(--gap);
+}
 </style>
diff --git a/packages/client/hmi-client/src/workflow/ops/model-config/tera-model-config.vue b/packages/client/hmi-client/src/workflow/ops/model-config/tera-model-config.vue
index 05658a13bc..e98ec7baa1 100644
--- a/packages/client/hmi-client/src/workflow/ops/model-config/tera-model-config.vue
+++ b/packages/client/hmi-client/src/workflow/ops/model-config/tera-model-config.vue
@@ -132,27 +132,35 @@ const updateState = (updatedField) => {
 	emit('update-state', state);
 };
 
-const updateConfigParam = (param: ModelParameter) => {
+const updateConfigParam = (params: ModelParameter[], updateAll = false) => {
 	const state = _.cloneDeep(props.node.state);
 	if (!state.parameters) return;
 
-	// find param with the same id and update it
-	const idx = state.parameters.findIndex((p) => p.id === param.id);
-	if (idx !== -1) {
-		state.parameters[idx] = param;
+	if (updateAll) {
+		state.parameters = params;
+	} else {
+		// find param with the same id and update it
+		const idx = state.parameters.findIndex((p) => p.id === params[0].id);
+		if (idx !== -1) {
+			state.parameters[idx] = params[0];
+		}
 	}
 
 	emit('update-state', state);
 };
 
-const updateConfigInitial = (initial: Initial) => {
+const updateConfigInitial = (initials: Initial[], updateAll = false) => {
 	const state = _.cloneDeep(props.node.state);
 	if (!state.initials) return;
 
-	// find initial with the same target and update it
-	const idx = state.initials.findIndex((i) => i.target === initial.target);
-	if (idx !== -1) {
-		state.initials[idx] = initial;
+	if (updateAll) {
+		state.initials = initials;
+	} else {
+		// find initial with the same target and update it
+		const idx = state.initials.findIndex((i) => i.target === initials[0].target);
+		if (idx !== -1) {
+			state.initials[idx] = initials[0];
+		}
 	}
 
 	emit('update-state', state);