From 31145699fb92653121b9e7409f5ad2303347e146 Mon Sep 17 00:00:00 2001
From: Yohann Paris <github@yohannparis.com>
Date: Wed, 9 Oct 2024 12:00:32 -0400
Subject: [PATCH] 5016 bug when extracting a configuration we need to
 distinguish missing values from 0 (#5066)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .../tera-initial-other-value-modal.vue        | 107 +++++++-----------
 .../model/petrinet/tera-initial-table.vue     |  50 ++++----
 .../tera-model-config-drilldown.vue           |  66 +++++++----
 .../tera-model-configuration-item.vue         |  56 +++++----
 .../prompts/config_from_document.py           |   4 +-
 5 files changed, 143 insertions(+), 140 deletions(-)

diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-other-value-modal.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-other-value-modal.vue
index ce54438630..de61c01a92 100644
--- a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-other-value-modal.vue
+++ b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-other-value-modal.vue
@@ -4,45 +4,37 @@
 			<h4>Other configuration values for '{{ otherValueList[0].target }}'</h4>
 		</template>
 		<DataTable
-			:value="otherValueList"
-			@update:selection="onCustomSelectionChange"
 			dataKey="id"
-			:rowsPerPageOptions="[10, 20, 50]"
 			tableStyle="min-width: 55rem"
+			:rowsPerPageOptions="[10, 20, 50]"
+			:value="otherValueList"
+			@update:selection="onCustomSelectionChange"
 		>
 			<template #header> </template>
-			<Column headerStyle="width: 2rem">
+			<Column>
 				<template #body="{ data }">
 					<RadioButton
 						v-model="customSelection"
+						variant="filled"
 						:inputId="data.id"
 						:value="data"
-						variant="filled"
 						@change="onCustomSelectionChange(data)"
 					/>
 				</template>
 			</Column>
-			<Column
-				v-for="(col, index) in selectedColumns"
-				:field="col.field"
-				:header="col.header"
-				:sortable="col.field !== 'stats'"
-				:key="index"
-				:style="`width: ${getColumnWidth(col.field)}%`"
-			>
+			<Column sortable>
+				<template #header>Configuration name</template>
+				<template #body="{ data }">{{ data.name }}</template>
+			</Column>
+			<Column sortable>
+				<template #header>Source</template>
+				<template #body="{ data }">{{ data.source }}</template>
+			</Column>
+			<Column sortable>
+				<template #header>Value</template>
 				<template #body="{ data }">
-					<template v-if="col.field === 'name'">
-						{{ data.name }}
-					</template>
-					<template v-if="col.field === 'source'">
-						{{ data.source }}
-					</template>
-					<template v-if="col.field === 'expression'">
-						<section class="inline-flex gap-1">
-							<span class="value-label">Constants</span>
-							<span class="value">{{ numberToNist(data.expression) || data.expression }}</span>
-						</section>
-					</template>
+					<span class="value-label">Constants</span>
+					{{ numberToNist(data.expression) || data.expression }}
 				</template>
 			</Column>
 			<ColumnGroup type="footer">
@@ -85,25 +77,25 @@
 			</ColumnGroup>
 		</DataTable>
 		<template #footer>
-			<Button label="Apply selected value" @click="applySelectedValue" :disabled="!selection" />
+			<Button label="Apply selected value" :disabled="!selection" @click="applySelectedValue" />
 			<Button label="Cancel" severity="secondary" outlined @click="emit('close-modal')" />
 		</template>
 	</tera-modal>
 </template>
 
 <script setup lang="ts">
-import { numberToNist } from '@/utils/number';
-import TeraInputText from '@/components/widgets/tera-input-text.vue';
-import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
-import { DistributionType } from '@/services/distribution';
 import { ref } from 'vue';
 import Button from 'primevue/button';
-import TeraModal from '@/components/widgets/tera-modal.vue';
-import DataTable from 'primevue/datatable';
 import Column from 'primevue/column';
-import Row from 'primevue/row';
+import DataTable from 'primevue/datatable';
 import ColumnGroup from 'primevue/columngroup';
 import RadioButton from 'primevue/radiobutton';
+import Row from 'primevue/row';
+import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
+import TeraModal from '@/components/widgets/tera-modal.vue';
+import { numberToNist } from '@/utils/number';
+import { DistributionType } from '@/services/distribution';
 
 const props = defineProps<{
 	id: string;
@@ -112,11 +104,6 @@ const props = defineProps<{
 }>();
 
 const otherValueList = ref(props.otherValueList);
-const columns = ref([
-	{ field: 'name', header: 'Configuration name' },
-	{ field: 'source', header: 'Source' },
-	{ field: 'expression', header: 'Value' }
-]);
 
 const emit = defineEmits(['update-expression', 'update-source', 'close-modal']);
 
@@ -126,7 +113,6 @@ const customConstant = ref(0);
 
 const numberOptions = [DistributionType.Constant, DistributionType.Uniform];
 
-const selectedColumns = ref(columns.value);
 const customSelection = ref(false);
 const selection = ref<null | { id?: string; source?: string; constant?: number }>(null);
 
@@ -141,19 +127,6 @@ const onCustomSelectionChange = (val) => {
 	}
 };
 
-function getColumnWidth(columnField: string) {
-	switch (columnField) {
-		case 'name':
-			return 40;
-		case 'source':
-			return 20;
-		case 'expression':
-			return 100;
-		default:
-			return 100;
-	}
-}
-
 function applySelectedValue() {
 	emit('update-expression', { id: props.id, value: selection.value?.constant });
 	emit('update-source', { id: props.id, value: selection.value?.source });
@@ -162,26 +135,34 @@ function applySelectedValue() {
 </script>
 
 <style scoped>
-.value-label {
-	color: var(--surface-600);
-	padding-right: 1rem;
+/* Override PrimeVue styles */
+:deep(.p-datatable-table) th {
+	padding: var(--gap-4);
+	width: 100%;
 }
-.value {
-	color: var(--surface-900);
+:deep(.p-datatable-table) th:nth-of-type(1) {
+	width: 2rem;
+}
+:deep(.p-datatable-table) th:nth-of-type(2) {
+	width: 40%;
+}
+:deep(.p-datatable-table) th:nth-of-type(3) {
+	width: 20%;
+}
+
+.value-label {
+	color: var(--text-color-subdued);
+	padding-right: var(--gap-4);
 }
 
 .custom-input-label {
+	align-items: center;
 	display: flex;
 	justify-content: left;
-	align-items: center;
-	padding-right: 1rem;
+	padding-right: var(--gap-4);
 }
 
 .custom-input {
 	height: 100%;
 }
-
-:deep(input) {
-	margin-top: 1rem;
-}
 </style>
diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-table.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-table.vue
index 250417a441..9d99911fc1 100644
--- a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-table.vue
+++ b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-table.vue
@@ -6,7 +6,7 @@
 				<tera-input-text v-model="filterText" placeholder="Filter" class="w-2 p-1" />
 			</template>
 
-			<ul class="pl-1">
+			<ul>
 				<li v-for="{ baseInitial, childInitials, isVirtual } in initialList" :key="baseInitial">
 					<!-- Stratified -->
 					<section v-if="isVirtual" class="initial-entry-stratified">
@@ -16,22 +16,19 @@
 									<span>{{ baseInitial }}</span>
 									<Button label="Open Matrix" text size="small" @click.stop="matrixModalId = baseInitial" />
 								</template>
-								<div class="flex">
-									<ul class="ml-1">
-										<li v-for="{ target } in childInitials" :key="target">
-											<tera-initial-entry
-												:model="model"
-												:model-configuration="modelConfiguration"
-												:modelConfigurations="modelConfigurations"
-												:initial-id="target"
-												:feature-config="featureConfig"
-												@update-expression="emit('update-expression', $event)"
-												@update-source="emit('update-source', $event)"
-											/>
-											<Divider type="solid" />
-										</li>
-									</ul>
-								</div>
+								<ul>
+									<li v-for="{ target } in childInitials" :key="target">
+										<tera-initial-entry
+											:model="model"
+											:model-configuration="modelConfiguration"
+											:modelConfigurations="modelConfigurations"
+											:feature-config="featureConfig"
+											:initial-id="target"
+											@update-expression="emit('update-expression', $event)"
+											@update-source="emit('update-source', $event)"
+										/>
+									</li>
+								</ul>
 							</AccordionTab>
 						</Accordion>
 					</section>
@@ -47,7 +44,6 @@
 						@update-expression="emit('update-expression', $event)"
 						@update-source="emit('update-source', $event)"
 					/>
-					<Divider type="solid" />
 				</li>
 			</ul>
 		</AccordionTab>
@@ -74,7 +70,6 @@ import { MiraModel, MiraTemplateParams } from '@/model-representation/mira/mira-
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
 import Button from 'primevue/button';
-import Divider from 'primevue/divider';
 import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import type { FeatureConfig } from '@/types/common';
 import TeraStratifiedMatrixModal from './model-configurations/tera-stratified-matrix-modal.vue';
@@ -125,8 +120,13 @@ const filterText = ref('');
 <style scoped>
 ul {
 	flex-grow: 1;
+	padding-left: var(--gap-1);
+
 	li {
+		border-bottom: 1px solid var(--gray-300);
 		list-style: none;
+		margin-bottom: var(--gap-1-5);
+		padding-bottom: var(--gap-1-5);
 	}
 }
 
@@ -141,16 +141,4 @@ ul {
 	margin-left: var(--gap-1);
 	margin-right: auto;
 }
-
-:deep(.p-divider) {
-	&.p-divider-horizontal {
-		margin-top: var(--gap-2);
-		margin-bottom: var(--gap-2);
-		color: var(--gray-300);
-	}
-	&.p-divider-vertical {
-		margin-left: var(--gap-small);
-		margin-right: var(--gap);
-	}
-}
 </style>
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 55405d5d6a..536def7d58 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
@@ -14,22 +14,17 @@
 				content-width="360px"
 			>
 				<template #content>
-					<div class="m-3">
+					<main class="m-3">
 						<div class="flex flex-row gap-1">
 							<tera-input-text v-model="filterModelConfigurationsText" placeholder="Filter" class="w-full" />
-
 							<Button
 								label="Extract from inputs"
-								@click="extractConfigurationsFromInputs"
 								severity="primary"
 								class="white-space-nowrap min-w-min"
+								size="small"
 								:loading="isLoading"
-								:disabled="
-									!props.node.inputs[1]?.value &&
-									!props.node.inputs[2]?.value &&
-									!props.node.inputs[3]?.value &&
-									!props.node.inputs[4]?.value
-								"
+								:disabled="!props.node.inputs.slice(1, 5).some((input) => input?.value)"
+								@click="extractConfigurationsFromInputs"
 							/>
 						</div>
 						<!-- Show a spinner if loading -->
@@ -42,21 +37,20 @@
 							<li v-for="configuration in filteredModelConfigurations" :key="configuration.id">
 								<tera-model-configuration-item
 									:configuration="configuration"
-									@click="onSelectConfiguration(configuration)"
 									:selected="selectedConfigId === configuration.id"
-									@use="onSelectConfiguration(configuration)"
+									@click="onSelectConfiguration(configuration)"
 									@delete="fetchConfigurations(model.id)"
 									@download="downloadModelArchive(configuration)"
+									@use="onSelectConfiguration(configuration)"
 								/>
 							</li>
 							<!-- Show a message if nothing found after filtering -->
 							<li v-if="filteredModelConfigurations.length === 0">No configurations found</li>
 						</ul>
-					</div>
+					</main>
 				</template>
 			</tera-slider-panel>
 		</template>
-
 		<tera-drilldown-section :tabName="ConfigTabs.Wizard" class="px-3 mb-10">
 			<template #header-controls-left>
 				<tera-toggleable-input
@@ -66,9 +60,15 @@
 				/>
 			</template>
 			<template #header-controls-right>
-				<Button label="Reset" @click="resetConfiguration" outlined severity="secondary" />
-				<Button label="Save as..." outlined severity="secondary" @click="showSaveModal = true" />
-				<Button class="mr-2" :disabled="isSaveDisabled" label="Save" @click="onSaveConfiguration" />
+				<Button
+					label="Reset"
+					outlined
+					severity="secondary"
+					:disabled="!isModelConfigChanged"
+					@click="resetConfiguration"
+				/>
+				<Button label="Save as" outlined severity="secondary" @click="showSaveModal = true" />
+				<Button :disabled="isSaveDisabled" label="Save" @click="onSaveConfiguration" />
 			</template>
 			<Accordion multiple :active-index="[0, 1]">
 				<AccordionTab>
@@ -178,6 +178,7 @@
 			</tera-drilldown-preview>
 		</tera-columnar-panel>
 	</tera-drilldown>
+
 	<tera-save-asset-modal
 		:initial-name="knobs.transientModelConfig.name"
 		:is-visible="showSaveModal"
@@ -186,6 +187,7 @@
 		@close-modal="showSaveModal = false"
 		@on-save="onSaveAsModelConfiguration"
 	/>
+
 	<!-- Matrix effect easter egg  -->
 	<canvas id="matrix-canvas" />
 </template>
@@ -286,6 +288,11 @@ const calibratedConfigObservables = computed<Observable[]>(() =>
 	}))
 );
 
+// Check if the model configuration is the same as the original
+const isModelConfigChanged = computed(
+	() => !isModelConfigsEqual(originalConfig.value, knobs.value.transientModelConfig)
+);
+
 // Save button is disabled if the model configuration name is empty, the values have changed, or the configuration is the same as the original
 const isSaveDisabled = computed(
 	() =>
@@ -627,7 +634,6 @@ const applyConfigValues = (config: ModelConfiguration) => {
 			state: omit(state, ['transientModelConfig'])
 		});
 	}
-	logger.success(`Configuration applied ${config.name}`);
 };
 
 const onEditDescription = async () => {
@@ -794,9 +800,29 @@ onUnmounted(() => {
 	padding: var(--gap-2);
 }
 
-ul {
-	list-style: none;
-	padding-top: var(--gap-small);
+.input-config {
+	ul {
+		list-style: none;
+		padding-top: var(--gap-4);
+	}
+
+	li {
+		& > * {
+			border-bottom: 1px solid var(--gray-300);
+			border-right: 1px solid var(--gray-300);
+		}
+
+		&:first-child > * {
+			border-top: 1px solid var(--gray-300);
+			border-top-left-radius: var(--border-radius);
+			border-top-right-radius: var(--border-radius);
+		}
+
+		&:last-child > * {
+			border-bottom-left-radius: var(--border-radius);
+			border-bottom-right-radius: var(--border-radius);
+		}
+	}
 }
 
 button.start-edit {
diff --git a/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-configuration-item.vue b/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-configuration-item.vue
index 99659c4e72..ffb0b719bb 100644
--- a/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-configuration-item.vue
+++ b/packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-configuration-item.vue
@@ -1,15 +1,12 @@
 <template>
-	<div class="config-card" :class="{ 'card-selected': selected }">
-		<div>
-			<span class="flex align-items-center"
-				><h6>{{ configuration.name }}</h6>
-				<Button class="ml-auto" text icon="pi pi-ellipsis-v" @click.stop="toggleContextMenu"></Button
-			></span>
-			<ContextMenu ref="contextMenu" :model="contextMenuItems"></ContextMenu>
-			<p>{{ configuration.description }}</p>
-			<p>{{ formatTimestamp(configuration.createdOn) }}</p>
-		</div>
-		<Divider />
+	<div :class="{ selected: selected }">
+		<header>
+			<h6>{{ configuration.name }}</h6>
+			<Button text icon="pi pi-ellipsis-v" @click.stop="toggleContextMenu" />
+		</header>
+		<ContextMenu ref="contextMenu" :model="contextMenuItems" />
+		<p>{{ configuration.description }}</p>
+		<p>{{ formatTimestamp(configuration.createdOn) }}</p>
 	</div>
 </template>
 
@@ -17,7 +14,6 @@
 import { ModelConfiguration } from '@/types/Types';
 import { formatTimestamp } from '@/utils/date';
 import Button from 'primevue/button';
-import Divider from 'primevue/divider';
 import ContextMenu from 'primevue/contextmenu';
 import { ref } from 'vue';
 import { useConfirm } from 'primevue/useconfirm';
@@ -77,30 +73,42 @@ const onDeleteConfiguration = () => {
 </script>
 
 <style scoped>
-.config-card {
+div {
 	background: var(--surface-0);
 	border-left: 4px solid var(--surface-300);
+	padding: var(--gap-1) var(--gap-1) var(--gap-3) var(--gap-3);
+
 	&:hover {
-		cursor: pointer;
 		background-color: var(--gray-50);
+		cursor: pointer;
+	}
+
+	&.selected {
+		border-left-color: var(--primary-color);
 	}
-	&.card-selected {
-		border-left: 4px solid var(--primary-color);
+
+	&,
+	&.selected {
+		transition: border-left-color 250ms;
 	}
+}
+
+header {
+	display: flex;
+	align-items: center;
 
-	> div {
-		padding-left: var(--gap);
+	& > *:last-child {
+		margin-left: auto;
 	}
 }
 
 p {
 	color: var(--text-color-subdued);
+	font-size: var(--font-caption);
+	padding-right: var(--gap-6);
 }
-:deep(.p-divider) {
-	&.p-divider-horizontal {
-		margin-top: var(--gap);
-		margin-bottom: 0;
-		color: var(--gray-300);
-	}
+
+p + p {
+	margin-top: var(--gap-2);
 }
 </style>
diff --git a/packages/gollm/gollm_openai/prompts/config_from_document.py b/packages/gollm/gollm_openai/prompts/config_from_document.py
index 10e4450dea..6ab4a72378 100644
--- a/packages/gollm/gollm_openai/prompts/config_from_document.py
+++ b/packages/gollm/gollm_openai/prompts/config_from_document.py
@@ -26,13 +26,13 @@
     a.	`target` should reference the id of the initial variable from the AMR model ODE semantics.
     b.	`source` should reference the title or file name of the research paper.
     c.	`type` should be set to "initial”.
-    d.	You should extract a numerical value or an expression of the initial state from the user-provided text if possible and add it to `expression`
+    d.	You should extract a numerical value or an expression of the initial state from the user-provided text if possible and add it to `expression`. If you can not find a value in the text leave expression and expressionMathml blank.
     e.	`expression_mathml` should be `expression` written in MathML format.
 5.	For each parameter specified in the AMR model ODE semantics, create a parameter semantic object. Do not create new parameter semantic objects if they are not included in the original AMR model. You should set parameter semantic object fields using the following rules:
     a.	`reference_id` should reference the id of the parameter.
     b.	`source` should reference the title or file name of the research paper.
     c.	`type` should be set to "parameter".
-    d.	Be sure to extract parameter values from the user-provided text, and do not use the default values from the AMR model.
+    d.	Be sure to extract parameter values from the user-provided text, and do not use the default values from the AMR model. If you can not find a value in the text set `type` to "Constant" and leave `value`, `minimum`, and `maximum` blank.
         -	If the extracted parameter value is a single constant value, set the parameter `value` to the constant value and set `type` to "Constant".
         -	If the extracted parameter value is a distribution with a maximum and minimum value, set `type` to only "Uniform" and populate the `minimum` and `maximum` fields.
 6. `observableSemanticList` should be an empty list.