Change model description to be a text field (#4730)

packages/client/hmi-client/src/components/model/petrinet/model-diagrams/tera-model-diagram.vue

@@ -64,7 +64,7 @@
 </template>
 
 <script setup lang="ts">
-import { isEmpty } from 'lodash';
+import { isEmpty, isEqual } from 'lodash';
 import { ref, watch, computed, nextTick } from 'vue';
 import Toolbar from 'primevue/toolbar';
 import Button from 'primevue/button';
@@ -195,9 +195,9 @@ async function toggleCollapsedView(view: StratifiedView) {
 
 watch(
  () => [props.model.model, props.model?.semantics, graphElement.value],
- async () => {
+ async (newValue, oldValue) => {
+ if (isEqual(newValue, oldValue)) return;
  if (modelType.value === AMRSchemaNames.DECAPODES || graphElement.value === null) return;
- // FIXME: inefficient, do not constant call API in watch
  const response: any = await getMMT(props.model);
  mmt.value = response.mmt;
  mmtParams.value = response.template_params;

packages/client/hmi-client/src/components/model/petrinet/tera-model-description.vue

@@ -1,35 +1,15 @@
 <template>
  <section>
- <Accordion multiple :active-index="[0, 1, 2, 3, 4]" v-bind:lazy="true" class="mb-0">
+ <Accordion multiple :active-index="currentActiveIndexes" v-bind:lazy="true" class="mb-0">
  <AccordionTab header="Description">
- <section v-if="!isGeneratingCard" class="description">
- <tera-show-more-text :text="description" :lines="5" />
- <p v-if="summary"><label>Model summary</label>{{ summary }}</p>
- <p v-if="modelType"><label>Model type</label>{{ modelType }}</p>
- <p v-if="fundedBy"><label>Funded by</label>{{ fundedBy }}</p>
- <p v-if="authors"><label>Authors</label>{{ authors }}</p>
- <p v-if="uses?.DirectUse"><label>Direct use</label>{{ uses.DirectUse }}</p>
- <p v-if="uses?.OutOfScopeUse"><label>Out of scope use</label>{{ uses.OutOfScopeUse }}</p>
- <p v-if="biasAndRiskLimitations"><label>Bias and Risk Limitations</label>{{ biasAndRiskLimitations }}</p>
- <p v-if="evaluation"><label>Evaluation</label>{{ evaluation }}</p>
- <p v-if="technicalSpecifications"><label>Technical Specifications</label>{{ technicalSpecifications }}</p>
- <p v-if="!isEmpty(glossary)"><label>Glossary</label>{{ glossary.join(', ') }}</p>
- <p v-if="!isEmpty(moreInformation)">
- <label>More Information</label>
- <a v-for="(link, index) in moreInformation" :key="index" :href="link" rel="noopener noreferrer">
- {{ link }}
- </a>
- </p>
- </section>
- <section v-else>
- <tera-progress-spinner is-centered>Generating description... </tera-progress-spinner>
- </section>
+ <tera-progress-spinner v-if="isGeneratingCard" is-centered> Generating description... </tera-progress-spinner>
+ <Editor v-else v-model="editorContent" />
  </AccordionTab>
  <AccordionTab header="Diagram">
  <tera-model-diagram ref="teraModelDiagramRef" :model="model" :feature-config="featureConfig" />
  </AccordionTab>
  <AccordionTab header="Model equations">
- <tera-model-equation :model="model" :is-editable="false" @model-updated="emit('model-updated')" />
+ <tera-model-equation :model="model" :is-editable="false" @model-updated="emit('update-model')" />
  </AccordionTab>
  <AccordionTab v-if="!isEmpty(relatedTerariumArtifacts)" header="Associated resources">
  <DataTable :value="relatedTerariumModels">
@@ -45,72 +25,57 @@
 
 <script setup lang="ts">
 import { isEmpty } from 'lodash';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
 import Column from 'primevue/column';
 import DataTable from 'primevue/datatable';
 import { FeatureConfig } from '@/types/common';
-import type { Author, Dataset, Model } from '@/types/Types';
-import TeraShowMoreText from '@/components/widgets/tera-show-more-text.vue';
+import type { Dataset, Model } from '@/types/Types';
 import TeraModelDiagram from '@/components/model/petrinet/model-diagrams/tera-model-diagram.vue';
 import TeraModelEquation from '@/components/model/petrinet/tera-model-equation.vue';
 import { isDataset, isModel, type Asset } from '@/utils/asset';
 import TeraProgressSpinner from '@/components/widgets/tera-progress-spinner.vue';
+import Editor from 'primevue/editor';
 
 const props = defineProps<{
  model: Model;
  featureConfig?: FeatureConfig;
  isGeneratingCard?: boolean;
 }>();
 
-const emit = defineEmits(['update-model', 'model-updated']);
+const emit = defineEmits(['update-model']);
 const teraModelDiagramRef = ref();
 
-const card = computed<any>(() => props.model.metadata?.gollmCard ?? null);
-const summary = computed(() => card.value?.summary?.modelSummary ?? '');
-const description = computed(() => card.value?.details?.modelDescription ?? props.model?.header?.description ?? '');
-
-const biasAndRiskLimitations = computed(() => card.value?.biasRisksLimitations?.modelBiasRisksLimitations ?? '');
-const modelType = computed(() => card.value?.details?.modelType ?? props.model.header.schema_name ?? '');
-const fundedBy = computed(() => card.value?.details?.fundedBy ?? '');
-const evaluation = computed(() => card.value?.testing?.testingDataFactorsMetrics ?? '');
-const technicalSpecifications = computed(() => card.value?.specs?.modelSpecs ?? '');
-const glossary = computed(() => card.value?.glossary ?? []);
-const moreInformation = computed(() => card.value?.moreInformation?.links ?? []);
-
-const uses = computed(() => card.value?.uses ?? null);
-const authors = computed(() => {
- const authorsSet: Set<string> = new Set();
- if (props.model?.metadata?.annotations?.authors)
- props.model.metadata.annotations.authors.forEach((author: Author) => authorsSet.add(author.name));
- if (card.value?.authors) card.value.authors.forEach((author: string) => authorsSet.add(author));
- return [...authorsSet].join(', ');
-});
-
+const currentActiveIndexes = ref([0, 1, 2, 3]);
 const relatedTerariumArtifacts = ref<Asset[]>([]);
 const relatedTerariumModels = computed(() => relatedTerariumArtifacts.value.filter((d) => isModel(d)) as Model[]);
 const relatedTerariumDatasets = computed(() => relatedTerariumArtifacts.value.filter((d) => isDataset(d)) as Dataset[]);
-</script>
 
-<style scoped>
-.description {
- display: flex;
- gap: var(--gap-small);
- flex-direction: column;
- grid-template-columns: max-content 1fr;
- margin-left: var(--gap-6);
+// Editor for the description
+const editorContent = ref(props.model?.metadata?.description ?? '');
 
- & label {
- font-weight: bold;
- margin-right: var(--gap-small);
+watch(editorContent, () => {
+ if (editorContent.value !== props.model?.metadata?.description) {
+ const updatedModel: Model = {
+ ...props.model,
+ metadata: { ...props.model.metadata, description: editorContent.value }
+ };
+ emit('update-model', updatedModel);
+ }
+});
 
- &:after {
- content: '.';
+watch(
+ () => props.model?.metadata?.description,
+ (newDescription) => {
+ if (newDescription !== editorContent.value) {
+ editorContent.value = newDescription ?? '';
  }
  }
-}
+);
+</script>
 
+<style scoped>
 /* add space beneath when accordion content is visible*/
 :deep(.p-toggleable-content) {
  padding-bottom: var(--gap-3);

packages/client/hmi-client/src/components/model/petrinet/tera-model-equation.vue

@@ -31,7 +31,7 @@ import TeraEquationContainer from '@/components/model/petrinet/tera-equation-con
 import type { Model } from '@/types/Types';
 import { equationsToAMR, EquationsToAMRRequest } from '@/services/knowledge';
 import { cleanLatexEquations } from '@/utils/math';
-import { isEmpty } from 'lodash';
+import { isEmpty, isEqual } from 'lodash';
 import { useToastService } from '@/services/toast';
 import { getModelEquation } from '@/services/model';
 
@@ -86,8 +86,9 @@ const updateModelFromEquations = async () => {
 };
 
 watch(
- () => props.model,
- async () => {
+ () => props.model.semantics,
+ async (newSemantics, oldSemantics) => {
+ if (isEqual(newSemantics, oldSemantics)) return;
  const latexFormula = await getModelEquation(props.model);
  if (latexFormula) {
  updateLatexFormula(cleanLatexEquations(latexFormula.split(' \\\\')));

packages/client/hmi-client/src/components/model/petrinet/tera-petrinet-parts.vue

@@ -1,5 +1,5 @@
 <template>
- <Accordion multiple :active-index="[0, 1, 2, 3, 4, 5]">
+ <Accordion multiple :active-index="currentActiveIndexes">
  <AccordionTab>
  <template #header>
  State variables<span class="artifact-amount">({{ states.length }})</span>
@@ -66,7 +66,7 @@ import type { Model, Transition, State } from '@/types/Types';
 import { isEmpty } from 'lodash';
 import Accordion from 'primevue/accordion';
 import AccordionTab from 'primevue/accordiontab';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import type { MiraModel, MiraTemplateParams } from '@/model-representation/mira/mira-common';
 import TeraStates from '@/components/model/model-parts/tera-states.vue';
 import TeraParameters from '@/components/model/model-parts/tera-parameters.vue';
@@ -82,14 +82,10 @@ const props = defineProps<{
  featureConfig: FeatureConfig;
 }>();
 
-const emit = defineEmits([
- 'update-model',
- 'update-state',
- 'update-parameter',
- 'update-observable',
- 'update-transition',
- 'update-time'
-]);
+const emit = defineEmits(['update-state', 'update-parameter', 'update-observable', 'update-transition', 'update-time']);
+
+// Keep track of active indexes using ref
+const currentActiveIndexes = ref([0, 1, 2, 3, 4]);
 
 const parameters = computed(() => props.model?.semantics?.ode.parameters ?? []);
 const observables = computed(() => props.model?.semantics?.ode?.observables ?? []);

packages/client/hmi-client/src/components/model/regnet/tera-regnet-parts.vue

@@ -55,7 +55,7 @@ const props = defineProps<{
  featureConfig: FeatureConfig;
 }>();
 
-const emit = defineEmits(['update-model', 'update-parameter']);
+const emit = defineEmits(['update-parameter']);
 
 const vertices = computed(() => props.model?.model?.vertices ?? []);
 const edges = computed(() => props.model.model?.edges ?? []);

packages/client/hmi-client/src/components/model/tera-model-parts.vue

@@ -5,7 +5,6 @@
  :mmt="mmt"
  :mmt-params="mmtParams"
  :feature-config="featureConfig"
- @update-model="$emit('update-model', $event)"
  @update-state="(e: any) => onUpdate('state', e)"
  @update-parameter="(e: any) => onUpdate('parameter', e)"
  @update-observable="(e: any) => onUpdate('observable', e)"
@@ -15,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { cloneDeep } from 'lodash';
+import { cloneDeep, isEqual } from 'lodash';
 import { computed, ref, onMounted, watch, PropType } from 'vue';
 import type { Model } from '@/types/Types';
 import TeraPetrinetParts from '@/components/model/petrinet/tera-petrinet-parts.vue';
@@ -45,11 +44,11 @@ const props = defineProps({
  }
 });
 
-defineEmits(['update-model']);
+const emit = defineEmits(['update-model']);
 
 const mmt = ref<MiraModel>(emptyMiraModel());
 const mmtParams = ref<MiraTemplateParams>({});
-const transientModel = ref(cloneDeep(props.model));
+const transientModel = ref<Model>(cloneDeep(props.model));
 
 const modelType = computed(() => getModelType(props.model));
 
@@ -87,6 +86,7 @@ function onUpdate(property: string, event: any) {
  default:
  break;
  }
+ emit('update-model', transientModel.value);
 }
 
 function updateMMT() {
@@ -96,34 +96,21 @@ function updateMMT() {
  });
 }
 
-function reset() {
+onMounted(() => {
  transientModel.value = cloneDeep(props.model);
-}
-
-onMounted(() => updateMMT());
-
-// TODO: Do we still want autosave? It worked onUnmount but on staging the onbeforemount wasn't triggering
-// Apply changes to the model when the component unmounts or the user navigates away
-// onMounted(() => {
-// window.addEventListener('beforeunload', saveChanges);
-// updateMMT();
-// });
-
-// onUnmounted(() => {
-// saveChanges();
-// window.removeEventListener('beforeunload', saveChanges);
-// });
+ updateMMT();
+});
 
+// Only update the MMT when the semantics of the model changes outside this component.
 watch(
- () => props.model,
- () => {
- reset();
+ () => [props.model.model, props.model.semantics],
+ (newValue, oldValue) => {
+ if (isEqual(newValue, oldValue)) return;
+ transientModel.value = cloneDeep(props.model);
  updateMMT();
  },
  { deep: true }
 );
-
-defineExpose({ transientModel, reset });
 </script>
 
 <style scoped>