feat: calibrated configruration view (#4377)

DARPA-ASKEM · Aug 9, 2024 · 412a24f · 412a24f
1 parent 662c9b4
commit 412a24f
Show file tree

Hide file tree

Showing 9 changed files with 191 additions and 106 deletions.
diff --git a/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue b/packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue
@@ -74,7 +74,7 @@ header .title {
 header .tabs-row {
  justify-content: space-between;
  align-items: end;
- gap: var(--gap);
+ gap: var(--gap-1);
 }
 
 header .tabs-row:deep(.p-tabview .p-tabview-panels) {

diff --git a/packages/client/hmi-client/src/components/model/model-parts/tera-model-part-entry.vue b/packages/client/hmi-client/src/components/model/model-parts/tera-model-part-entry.vue
@@ -137,6 +137,7 @@ h6 {
 
 .description {
  grid-area: description;
+ color: var(--text-color-subdued);
 }
 
 .unit {

diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-initial-entry.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-initial-entry.vue
@@ -1,16 +1,20 @@
 <template>
- <div>
- <header>
- <div>
- <strong>{{ initialId }}</strong>
- <span v-if="name" class="ml-1">{{ '| ' + name }}</span>
- <template v-if="unit">
- <label class="ml-2">Unit</label>
- <span class="ml-1">{{ unit }}</span>
- </template>
- </div>
- <span v-if="description" class="ml-4">{{ description }}</span>
- </header>
+ <header>
+ <div class="flex">
+ <strong>{{ initialId }}</strong>
+ <span v-if="name" class="ml-1">{{ '| ' + name }}</span>
+ <template v-if="unit">
+ <label class="ml-2">Unit</label>
+ <span class="ml-1">{{ unit }}</span>
+ </template>
+ <template v-if="concept">
+ <label class="ml-auto">Concept</label>
+ <span class="ml-1">{{ concept }}</span>
+ </template>
+ </div>
+ <span v-if="description" class="description">{{ description }}</span>
+ </header>
+ <template v-if="isEmpty(modelConfiguration.inferredParameterList)">
  <main>
  <span class="expression">
  <tera-input-text
@@ -29,7 +33,13 @@
  @update:model-value="emit('update-source', { id: initialId, value: $event })"
  />
  </footer>
- </div>
+ </template>
+ <katex-element
+ v-else
+ class="expression"
+ :expression="stringToLatexExpression(getInitialExpression(modelConfiguration, initialId))"
+ :throw-on-error="false"
+ />
  <tera-initial-other-value-modal
  v-if="showOtherConfigValueModal"
  :id="initialId"
@@ -44,14 +54,17 @@
 </template>
 
 <script setup lang="ts">
+import { isEmpty } from 'lodash';
+import { computed, ref, onMounted } from 'vue';
 import { DistributionType } from '@/services/distribution';
 import { Model, ModelConfiguration } from '@/types/Types';
 import { getInitialExpression, getInitialSource, getOtherValues } from '@/services/model-configurations';
 import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import TeraInitialOtherValueModal from '@/components/model/petrinet/tera-initial-other-value-modal.vue';
-import { computed, ref } from 'vue';
 import Button from 'primevue/button';
-import { getInitialDescription, getInitialName, getInitialUnits } from '@/model-representation/service';
+import { getInitialDescription, getInitialName, getInitialUnits, getStates } from '@/model-representation/service';
+import { getCurieFromGroundingIdentifier, getNameOfCurieCached } from '@/services/concept';
+import { stringToLatexExpression } from '@/services/model';
 
 const props = defineProps<{
  model: Model;
@@ -70,23 +83,33 @@ const name = getInitialName(props.model, props.initialId);
 const unit = getInitialUnits(props.model, props.initialId);
 const description = getInitialDescription(props.model, props.initialId);
 
+const concept = ref('');
 const sourceOpen = ref(false);
 const showOtherConfigValueModal = ref(false);
 
+const getOtherValuesLabel = computed(() => `Other Values(${otherValueList.value?.length})`);
+
 function getSourceLabel(initialId) {
  if (sourceOpen.value) return 'Hide source';
  if (!getInitialSource(props.modelConfiguration, initialId)) return 'Add source';
  return 'Show source';
 }
 
-const getOtherValuesLabel = computed(() => `Other Values(${otherValueList.value?.length})`);
+onMounted(async () => {
+ const identifiers = getStates(props.model).find((state) => state.id === props.initialId)?.grounding?.identifiers;
+ if (identifiers) concept.value = await getNameOfCurieCached(getCurieFromGroundingIdentifier(identifiers));
+});
 </script>
 
 <style scoped>
 header {
  display: flex;
  flex-direction: column;
- padding-bottom: var(--gap-small);
+ padding-bottom: var(--gap-2);
+ gap: var(--gap-2);
+}
+.description {
+ color: var(--text-color-subdued);
 }
 .expression {
  flex-grow: 1;

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
@@ -6,7 +6,7 @@
  <tera-input-text v-model="filterText" placeholder="Filter" />
  </template>
 
- <ul>
+ <ul class="pl-4">
  <li v-for="{ baseInitial, childInitials, isVirtual } in initialList" :key="baseInitial">
  <!-- Stratified -->
  <Accordion v-if="isVirtual" multiple>

diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-entry.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-entry.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="flex flex-column flex-1">
  <header>
- <div>
+ <div class="flex">
  <strong>{{ parameterId }}</strong>
  <span v-if="name" class="ml-1">{{ '| ' + name }}</span>
  <template v-if="units">
@@ -15,71 +15,82 @@
  </template>
  </div>
 
- <span v-if="description">{{ description }}</span>
+ <span class="description" v-if="description">{{ description }}</span>
  </header>
- <main>
- <span class="flex gap-2">
- <Dropdown
- :model-value="getParameterDistribution(modelConfiguration, parameterId).type"
- @change="
- emit('update-parameter', {
- id: parameterId,
- distribution: formatPayloadFromTypeChange($event.value)
- })
- "
- option-label="name"
- option-value="value"
- :options="distributionTypeOptions()"
- />
-
- <!-- Constant -->
- <tera-input-number
- v-if="getParameterDistribution(modelConfiguration, parameterId).type === DistributionType.Constant"
- label="Constant"
- :model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.value"
- @update:model-value="
- emit('update-parameter', {
- id: parameterId,
- distribution: formatPayloadFromParameterChange({ value: $event })
- })
- "
- />
- <!-- Uniform Distribution -->
- <template v-if="getParameterDistribution(modelConfiguration, parameterId).type === DistributionType.Uniform">
- <tera-input-number
- label="Min"
- :model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.minimum"
- @update:model-value="
+ <div v-if="inferredDistribution" class="inferred-parameter">
+ <span class="type"><label>Type</label> {{ inferredDistribution.type }}</span>
+ <span class="mean">
+ <label>Mean</label> {{ displayNumber(inferredDistribution?.parameters?.mean.toString()) }}
+ </span>
+ <span class="std">
+ <label>STDDEV</label> {{ displayNumber(inferredDistribution?.parameters?.stddev.toString()) }}
+ </span>
+ </div>
+ <template v-else>
+ <main>
+ <span class="flex gap-2">
+ <Dropdown
+ :model-value="getParameterDistribution(modelConfiguration, parameterId).type"
+ @change="
  emit('update-parameter', {
  id: parameterId,
- distribution: formatPayloadFromParameterChange({ minimum: $event })
+ distribution: formatPayloadFromTypeChange($event.value)
  })
  "
+ option-label="name"
+ option-value="value"
+ :options="distributionTypeOptions()"
  />
+
+ <!-- Constant -->
  <tera-input-number
- label="Max"
- :model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.maximum"
+ v-if="getParameterDistribution(modelConfiguration, parameterId).type === DistributionType.Constant"
+ label="Constant"
+ :model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.value"
  @update:model-value="
  emit('update-parameter', {
  id: parameterId,
- distribution: formatPayloadFromParameterChange({ maximum: $event })
+ distribution: formatPayloadFromParameterChange({ value: $event })
  })
  "
  />
- </template>
- </span>
- <section>
- <Button :label="getSourceLabel(parameterId)" text size="small" @click="isSourceOpen = !isSourceOpen" />
- <Button :label="getOtherValuesLabel" text size="small" @click="showOtherConfigValueModal = true" />
- </section>
- </main>
- <footer v-if="isSourceOpen" class="mb-2">
- <tera-input-text
- placeholder="Add a source"
- :model-value="getParameterSource(modelConfiguration, parameterId)"
- @update:model-value="emit('update-source', { id: parameterId, value: $event })"
- />
- </footer>
+ <!-- Uniform Distribution -->
+ <template v-if="getParameterDistribution(modelConfiguration, parameterId).type === DistributionType.Uniform">
+ <tera-input-number
+ label="Min"
+ :model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.minimum"
+ @update:model-value="
+ emit('update-parameter', {
+ id: parameterId,
+ distribution: formatPayloadFromParameterChange({ minimum: $event })
+ })
+ "
+ />
+ <tera-input-number
+ label="Max"
+ :model-value="getParameterDistribution(modelConfiguration, parameterId)?.parameters.maximum"
+ @update:model-value="
+ emit('update-parameter', {
+ id: parameterId,
+ distribution: formatPayloadFromParameterChange({ maximum: $event })
+ })
+ "
+ />
+ </template>
+ </span>
+ <section>
+ <Button :label="getSourceLabel(parameterId)" text size="small" @click="isSourceOpen = !isSourceOpen" />
+ <Button :label="getOtherValuesLabel" text size="small" @click="showOtherConfigValueModal = true" />
+ </section>
+ </main>
+ <footer v-if="isSourceOpen" class="mb-2">
+ <tera-input-text
+ placeholder="Add a source"
+ :model-value="getParameterSource(modelConfiguration, parameterId)"
+ @update:model-value="emit('update-source', { id: parameterId, value: $event })"
+ />
+ </footer>
+ </template>
  </div>
  <tera-parameter-other-value-modal
  v-if="showOtherConfigValueModal"
@@ -93,16 +104,18 @@
 </template>
 
 <script setup lang="ts">
+import { computed, ref, onMounted } from 'vue';
 import { Model, ModelConfiguration } from '@/types/Types';
 import { getParameterSource, getParameterDistribution, getOtherValues } from '@/services/model-configurations';
 import TeraInputText from '@/components/widgets/tera-input-text.vue';
 import TeraInputNumber from '@/components/widgets/tera-input-number.vue';
-import { computed, ref } from 'vue';
 import Button from 'primevue/button';
 import Dropdown from 'primevue/dropdown';
 import { DistributionType, distributionTypeOptions } from '@/services/distribution';
 import { getParameter } from '@/model-representation/service';
 import TeraParameterOtherValueModal from '@/components/model/petrinet/tera-parameter-other-value-modal.vue';
+import { displayNumber } from '@/utils/number';
+import { getCurieFromGroundingIdentifier, getNameOfCurieCached } from '@/services/concept';
 
 const props = defineProps<{
  model: Model;
@@ -116,8 +129,13 @@ const emit = defineEmits(['update-parameter', 'update-source']);
 const name = getParameter(props.model, props.parameterId)?.name;
 const units = getParameter(props.model, props.parameterId)?.units?.expression;
 const description = getParameter(props.model, props.parameterId)?.description;
-const concept = getParameter(props.model, props.parameterId)?.grounding?.identifiers[0];
+const inferredDistribution = computed(
+ () =>
+ props.modelConfiguration.inferredParameterList?.find((param) => param.referenceId === props.parameterId)
+ ?.distribution
+);
 
+const concept = ref('');
 const isSourceOpen = ref(false);
 const showOtherConfigValueModal = ref(false);
 
@@ -152,6 +170,11 @@ function formatPayloadFromTypeChange(type: DistributionType) {
 }
 
 const getOtherValuesLabel = computed(() => `Other Values(${otherValueList.value?.length})`);
+
+onMounted(async () => {
+ const identifiers = getParameter(props.model, props.parameterId)?.grounding?.identifiers;
+ if (identifiers) concept.value = await getNameOfCurieCached(getCurieFromGroundingIdentifier(identifiers));
+});
 </script>
 
 <style scoped>
@@ -167,11 +190,22 @@ main {
  padding-bottom: var(--gap-small);
 }
 
+.description {
+ color: var(--text-color-subdued);
+}
+
 :deep(.p-dropdown-label) {
  min-width: 10rem;
 }
 
 label {
  color: var(--text-color-subdued);
 }
+
+.inferred-parameter {
+ display: flex;
+ & > span {
+ width: 20%;
+ }
+}
 </style>
diff --git a/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-table.vue b/packages/client/hmi-client/src/components/model/petrinet/tera-parameter-table.vue
@@ -41,7 +41,7 @@
  <Button text small icon="pi pi-times" @click="isAddingUncertainty = false" />
  </span>
 
- <ul>
+ <ul class="pl-4">
  <li v-for="{ baseParameter, childParameters, isVirtual } in parameterList" :key="baseParameter">
  <!-- Stratified -->
  <Accordion v-if="isVirtual" multiple>
@@ -80,7 +80,7 @@
  </AccordionTab>
  </Accordion>
  <!-- Unstratified -->
- <div v-else class="flex gap-4 pl-5">
+ <div v-else class="flex gap-4">
  <Checkbox
  v-if="
  isAddingUncertainty &&

diff --git a/...ages/client/hmi-client/src/components/workflow/ops/model-config/model-config-operation.ts b/...ages/client/hmi-client/src/components/workflow/ops/model-config/model-config-operation.ts
@@ -24,7 +24,8 @@ export const blankModelConfig: ModelConfiguration = {
  simulationId: '',
  observableSemanticList: [],
  parameterSemanticList: [],
- initialSemanticList: []
+ initialSemanticList: [],
+ inferredParameterList: []
 };
 
 export const ModelConfigOperation: Operation = {