From 34b79118a15da3df5b69b5ea422799d44c9e43ac Mon Sep 17 00:00:00 2001
From: Alex Derr <aderr@sei.cmu.edu>
Date: Wed, 24 Jan 2024 16:10:05 -0500
Subject: [PATCH 01/11] Update nuxt, enable report fields, make form cancel a
 composable

---
 .../nuxt-app/composables/form-methods.ts      |  9 +++
 mlte/frontend/nuxt-app/package.json           |  2 +-
 mlte/frontend/nuxt-app/pages/index.vue        | 17 +----
 .../nuxt-app/pages/negotiation-card.vue       |  2 +-
 mlte/frontend/nuxt-app/pages/report.vue       | 73 +++++++++----------
 5 files changed, 46 insertions(+), 57 deletions(-)
 create mode 100644 mlte/frontend/nuxt-app/composables/form-methods.ts

diff --git a/mlte/frontend/nuxt-app/composables/form-methods.ts b/mlte/frontend/nuxt-app/composables/form-methods.ts
new file mode 100644
index 00000000..97072b78
--- /dev/null
+++ b/mlte/frontend/nuxt-app/composables/form-methods.ts
@@ -0,0 +1,9 @@
+export function cancelFormSubmission(redirect: string) {
+  if (
+    confirm(
+      "Are you sure you want to leave this page? All changes will be lost.",
+    )
+  ) {
+    location.href = redirect;
+  }
+}
\ No newline at end of file
diff --git a/mlte/frontend/nuxt-app/package.json b/mlte/frontend/nuxt-app/package.json
index a21ab860..8240fafa 100644
--- a/mlte/frontend/nuxt-app/package.json
+++ b/mlte/frontend/nuxt-app/package.json
@@ -18,7 +18,7 @@
     "eslint-plugin-n": "^16.0.1",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-vue": "^9.15.1",
-    "nuxt": "^3.9.3"
+    "nuxt": "^3.7.4"
   },
   "dependencies": {
     "@babel/eslint-parser": "^7.22.9",
diff --git a/mlte/frontend/nuxt-app/pages/index.vue b/mlte/frontend/nuxt-app/pages/index.vue
index 335e7405..89d6d63d 100644
--- a/mlte/frontend/nuxt-app/pages/index.vue
+++ b/mlte/frontend/nuxt-app/pages/index.vue
@@ -153,26 +153,11 @@
                       },
                     }"
                   >
-                    <UsaButton :disabled="true" class="primary-button">
+                    <UsaButton class="primary-button">
                       Edit
                     </UsaButton>
                   </NuxtLink>
                 </td>
-                <td>
-                  <NuxtLink
-                    :to="{
-                      path: 'report',
-                      query: {
-                        namespace: selectedNamespace,
-                        model: report.model,
-                        version: report.version,
-                        artifactId: report.id,
-                      },
-                    }"
-                  >
-                    <UsaButton class="primary-button"> View </UsaButton>
-                  </NuxtLink>
-                </td>
               </tr>
             </tbody>
           </table>
diff --git a/mlte/frontend/nuxt-app/pages/negotiation-card.vue b/mlte/frontend/nuxt-app/pages/negotiation-card.vue
index 8ecf6756..6eff2c7d 100644
--- a/mlte/frontend/nuxt-app/pages/negotiation-card.vue
+++ b/mlte/frontend/nuxt-app/pages/negotiation-card.vue
@@ -435,7 +435,7 @@
     </div>
 
     <div style="text-align: right; margin-top: 1em">
-      <UsaButton class="secondary-button" @click="cancel()"> Cancel </UsaButton>
+      <UsaButton class="secondary-button" @click="cancelFormSubmission('/')"> Cancel </UsaButton>
       <UsaButton class="primary-button" @click="submit()"> Save </UsaButton>
     </div>
   </NuxtLayout>
diff --git a/mlte/frontend/nuxt-app/pages/report.vue b/mlte/frontend/nuxt-app/pages/report.vue
index 32494b33..4f4bb6dd 100644
--- a/mlte/frontend/nuxt-app/pages/report.vue
+++ b/mlte/frontend/nuxt-app/pages/report.vue
@@ -7,10 +7,10 @@
     <h2>Model Summary</h2>
     <p>A summary of the model under evaluation.</p>
 
-    <UsaTextInput :model-value="form.summary.problem_type" disabled>
+    <UsaTextInput :model-value="form.summary.problem_type">
       <template #label> Problem Type </template>
     </UsaTextInput>
-    <UsaTextInput :model-value="form.summary.task" disabled>
+    <UsaTextInput :model-value="form.summary.task">
       <template #label> Task </template>
     </UsaTextInput>
 
@@ -27,19 +27,19 @@
     >
       <h3>Goal {{ goalIndex + 1 }}</h3>
 
-      <UsaTextInput v-model="goal.description" disabled>
+      <UsaTextInput v-model="goal.description">
         <template #label> Goal Description </template>
       </UsaTextInput>
       <h4 class="no-margin-section-header">Metrics</h4>
       <div v-for="(metric, metricIndex) in goal.metrics" :key="metricIndex">
         <div class="inline-input-left">
-          <UsaTextInput v-model="metric.description" disabled>
+          <UsaTextInput v-model="metric.description">
             <template #label> Description </template>
           </UsaTextInput>
         </div>
 
         <div class="inline-input-right">
-          <UsaTextInput v-model="metric.baseline" disabled>
+          <UsaTextInput v-model="metric.baseline">
             <template #label> Baseline </template>
           </UsaTextInput>
         </div>
@@ -73,10 +73,10 @@
 
     <h2>Intended Use</h2>
     <p>A description of how the model is intended to be used.</p>
-    <UsaTextarea :model-value="form.intended_use.context" disabled></UsaTextarea>
+    <UsaTextarea :model-value="form.intended_use.context"></UsaTextarea>
 
     <UsaTextarea
-      v-model="form.intended_use.production_requirements.integration" disabled
+      v-model="form.intended_use.production_requirements.integration"
     >
       <template #label>
         A description of model integration practices.
@@ -87,7 +87,6 @@
       v-model="
         form.intended_use.production_requirements.interface.input.description
       "
-      disabled
     >
       <template #label> Model input description. </template>
     </UsaTextInput>
@@ -96,7 +95,6 @@
       v-model="
         form.intended_use.production_requirements.interface.output.description
       "
-      disabled
     >
       <template #label> Mode output description. </template>
     </UsaTextInput>
@@ -106,7 +104,7 @@
       <div>
         <div class="inline-input-left">
           <UsaTextInput
-            v-model="form.intended_use.production_requirements.resources.gpu" disabled
+            v-model="form.intended_use.production_requirements.resources.gpu"
           >
             <template #label> GPU </template>
           </UsaTextInput>
@@ -114,7 +112,7 @@
 
         <div class="inline-input-right">
           <UsaTextInput
-            v-model="form.intended_use.production_requirements.resources.cpu" disabled
+            v-model="form.intended_use.production_requirements.resources.cpu"
           >
             <template #label> CPU </template>
           </UsaTextInput>
@@ -124,7 +122,7 @@
       <div>
         <div class="inline-input-left">
           <UsaTextInput
-            v-model="form.intended_use.production_requirements.resources.memory" disabled
+            v-model="form.intended_use.production_requirements.resources.memory"
           >
             <template #label> Memory </template>
           </UsaTextInput>
@@ -135,7 +133,6 @@
             v-model="
               form.intended_use.production_requirements.resources.storage
             "
-            disabled
           >
             <template #label> Storage </template>
           </UsaTextInput>
@@ -144,15 +141,15 @@
     </div>
 
     <h3>Risks</h3>
-    <UsaTextInput v-model="form.risks.fp" disabled>
+    <UsaTextInput v-model="form.risks.fp">
       <template #label> False Positive Risk </template>
     </UsaTextInput>
 
-    <UsaTextInput v-model="form.risks.fn" disabled>
+    <UsaTextInput v-model="form.risks.fn">
       <template #label> False Negative Risk </template>
     </UsaTextInput>
 
-    <UsaTextInput v-model="form.risks.other" disabled>
+    <UsaTextInput v-model="form.risks.other">
       <template #label> Other risks of producing incorrect results </template>
     </UsaTextInput>
 
@@ -162,25 +159,25 @@
     <div class="input-group">
       <div v-for="(dataItem, dataItemIndex) in form.data" :key="dataItemIndex">
         <h4>Dataset {{ dataItemIndex + 1 }}</h4>
-        <UsaTextInput v-model="dataItem.access" disabled>
+        <UsaTextInput v-model="dataItem.access">
           <template #label> Account Access / Account Availability </template>
         </UsaTextInput>
 
         <div>
           <div class="inline-input-left">
-            <UsaTextInput v-model="dataItem.description" disabled>
+            <UsaTextInput v-model="dataItem.description">
               <template #label> Data Description </template>
             </UsaTextInput>
           </div>
 
           <div class="inline-input-right">
-            <UsaTextInput v-model="dataItem.source" disabled>
+            <UsaTextInput v-model="dataItem.source">
               <template #label> Source Data Location </template>
             </UsaTextInput>
           </div>
         </div>
 
-        <UsaTextInput v-model="dataItem.classification" disabled>
+        <UsaTextInput v-model="dataItem.classification">
           <template #label> Data Classification </template>
         </UsaTextInput>
 
@@ -188,13 +185,13 @@
           <h4 class="no-margin-section-header">Data Ontology</h4>
           <div v-for="(label, labelIndex) in dataItem.labels" :key="labelIndex">
             <div class="inline-input-left">
-              <UsaTextInput v-model="label.description" disabled>
+              <UsaTextInput v-model="label.description">
                 <template #label> Label Description </template>
               </UsaTextInput>
             </div>
 
             <div class="inline-input-right">
-              <UsaTextInput v-model="label.percentage" type="number" disabled>
+              <UsaTextInput v-model="label.percentage" type="number">
                 <template #label> Percentage </template>
               </UsaTextInput>
             </div>
@@ -206,13 +203,13 @@
           <div v-for="(field, fieldIndex) in dataItem.fields" :key="fieldIndex">
             <div>
               <div class="inline-input-left">
-                <UsaTextInput v-model="field.name" disabled>
+                <UsaTextInput v-model="field.name">
                   <template #label> Field Name </template>
                 </UsaTextInput>
               </div>
 
               <div class="inline-input-right">
-                <UsaTextInput v-model="field.description" disabled>
+                <UsaTextInput v-model="field.description">
                   <template #label> Field Description </template>
                 </UsaTextInput>
               </div>
@@ -220,13 +217,13 @@
 
             <div>
               <div class="inline-input-left">
-                <UsaTextInput v-model="field.type" disabled>
+                <UsaTextInput v-model="field.type">
                   <template #label> Field Type </template>
                 </UsaTextInput>
               </div>
 
               <div class="inline-input-right">
-                <UsaTextInput v-model="field.expected_values" disabled>
+                <UsaTextInput v-model="field.expected_values">
                   <template #label> Expected Values </template>
                 </UsaTextInput>
               </div>
@@ -234,13 +231,13 @@
 
             <div>
               <div class="inline-input-left">
-                <UsaTextInput v-model="field.missing_values" disabled>
+                <UsaTextInput v-model="field.missing_values">
                   <template #label> Missing Values </template>
                 </UsaTextInput>
               </div>
 
               <div class="inline-input-right">
-                <UsaTextInput v-model="field.special_values" disabled>
+                <UsaTextInput v-model="field.special_values">
                   <template #label> Special Values </template>
                 </UsaTextInput>
               </div>
@@ -249,15 +246,15 @@
           </div>
         </div>
 
-        <UsaTextInput v-model="dataItem.rights" disabled>
+        <UsaTextInput v-model="dataItem.rights">
           <template #label> Data Rights </template>
         </UsaTextInput>
 
-        <UsaTextInput v-model="dataItem.policies" disabled>
+        <UsaTextInput v-model="dataItem.policies">
           <template #label> Data Policies </template>
         </UsaTextInput>
 
-        <UsaTextInput v-model="dataItem.identifiable_information" disabled>
+        <UsaTextInput v-model="dataItem.identifiable_information">
           <template #label> Identifiable Information </template>
         </UsaTextInput>
       </div>
@@ -267,20 +264,20 @@
     <p>Free-form comments from model developers and system integrators.</p>
 
     <div v-for="(comment, commentIndex) in form.comments" :key="commentIndex">
-      <UsaTextInput v-model="comment.content" disabled> </UsaTextInput>
+      <UsaTextInput v-model="comment.content"> </UsaTextInput>
     </div>
 
     <h3>Quantitative Analysis</h3>
     <p>No quantitative analysis included with this report.</p>
 
-    <!--Added in the submit and cancel buttons and functions from the negotiation card.
-    It doesn't seem to me that the submit button is working, but I don't know 
-    how to test it appropriately. -->
-    <div style="text-align: center; margin-top: 1em">
-      <UsaButton class="primary-button" @click="exportReport()">
+    <div style="text-align: right; margin-top: 1em">
+      <UsaButton class="secondary-button" @click="cancelFormSubmission('/')"> Cancel </UsaButton>
+      <UsaButton class="primary-button" @click="exportReport()" disabled>
         Export
       </UsaButton>
+      <UsaButton class="primary-button" @click="submit()"> Save </UsaButton>
     </div>
+    
   </NuxtLayout>
 </template>
 
@@ -290,8 +287,6 @@ import {
   responseErrorAlert,
 } from "../composables/error-handling";
 
-import { isValidReport } from "../composables/artifact-validation.ts";
-
 const path = ref([
   {
     href: "/",

From cfb8ac301ae0f7ba1973e409631ede4f66602a73 Mon Sep 17 00:00:00 2001
From: Alex Derr <aderr@sei.cmu.edu>
Date: Thu, 25 Jan 2024 14:43:01 -0500
Subject: [PATCH 02/11] Valid report default format and submission

- Add selects for the classification and problem type
- Add data manipulation for loading and submission
- Remove unused methods
---
 .../nuxt-app/pages/negotiation-card.vue       |  31 +-
 mlte/frontend/nuxt-app/pages/report.vue       | 278 ++++++++++++++----
 2 files changed, 236 insertions(+), 73 deletions(-)

diff --git a/mlte/frontend/nuxt-app/pages/negotiation-card.vue b/mlte/frontend/nuxt-app/pages/negotiation-card.vue
index 6eff2c7d..2720b589 100644
--- a/mlte/frontend/nuxt-app/pages/negotiation-card.vue
+++ b/mlte/frontend/nuxt-app/pages/negotiation-card.vue
@@ -54,7 +54,7 @@
 
     <UsaTextInput
       v-if="useRoute().query.artifactId === undefined"
-      v-model="userInputArifactId"
+      v-model="UserInputArtifactId"
     >
       <template #label>
         Artifact ID
@@ -178,28 +178,28 @@
       data transportation.
     </p>
     <div class="input-group">
-      <div v-for="(data_item, dataItemIndex) in form.data" :key="dataItemIndex">
+      <div v-for="(dataItem, dataItemIndex) in form.data" :key="dataItemIndex">
         <h3>Data Item {{ dataItemIndex + 1 }}</h3>
-        <UsaTextInput v-model="data_item.access">
+        <UsaTextInput v-model="dataItem.access">
           <template #label> Account Access / Account Availability </template>
         </UsaTextInput>
 
         <div>
           <div class="inline-input-left">
-            <UsaTextInput v-model="data_item.description">
+            <UsaTextInput v-model="dataItem.description">
               <template #label> Data Description </template>
             </UsaTextInput>
           </div>
 
           <div class="inline-input-right">
-            <UsaTextInput v-model="data_item.source">
+            <UsaTextInput v-model="dataItem.source">
               <template #label> Source Data Location </template>
             </UsaTextInput>
           </div>
         </div>
 
         <UsaSelect
-          v-model="data_item.classification"
+          v-model="dataItem.classification"
           :options="classificationOptions"
         >
           <template #label> Data Classification </template>
@@ -207,7 +207,7 @@
 
         <div class="input-group" style="margin-top: 1em">
           <div
-            v-for="(label, labelIndex) in data_item.labels"
+            v-for="(label, labelIndex) in dataItem.labels"
             :key="labelIndex"
           >
             <div class="inline-input-left">
@@ -235,7 +235,7 @@
 
         <div class="input-group" style="margin-top: 1em">
           <div
-            v-for="(schema, schema_index) in data_item.schema"
+            v-for="(schema, schema_index) in dataItem.schema"
             :key="schema_index"
           >
             <h3 class="no-margin-section-header">
@@ -296,7 +296,7 @@
           </AddButton>
         </div>
 
-        <UsaTextInput v-model="data_item.rights">
+        <UsaTextInput v-model="dataItem.rights">
           <template #label>
             Data Rights
             <InfoIcon>
@@ -306,7 +306,7 @@
           </template>
         </UsaTextInput>
 
-        <UsaTextInput v-model="data_item.policies">
+        <UsaTextInput v-model="dataItem.policies">
           <template #label>
             Data Policies
             <InfoIcon>
@@ -316,7 +316,7 @@
           </template>
         </UsaTextInput>
 
-        <UsaTextInput v-model="data_item.identifiable_information">
+        <UsaTextInput v-model="dataItem.identifiable_information">
           <template #label> Identifiable Information </template>
         </UsaTextInput>
 
@@ -455,7 +455,7 @@ const path = ref([
   },
 ]);
 
-const userInputArifactId = ref("");
+const UserInputArtifactId = ref("");
 
 const form = ref({
   system: {
@@ -535,20 +535,21 @@ const form = ref({
   },
 });
 
+// TODO: Pull these from the schema
 const problemTypeOptions = [
   { value: "classification", text: "Classification" },
   { value: "clustering", text: "Clustering" },
-  { value: "content_generation", text: "Content Generation" },
   { value: "detection", text: "Detection" },
   { value: "trend", text: "Trend" },
   { value: "alert", text: "Alert" },
   { value: "forecasting", text: "Forecasting" },
-  // { value: "Summarization", text: "Summarization" },
+  { value: "content_generation", text: "Content Generation" },
   { value: "benchmarking", text: "Benchmarking" },
   { value: "goals", text: "Goals" },
   { value: "other", text: "Other" },
 ];
 
+// TODO: Pull these from the schema
 const classificationOptions = [
   { value: "unclassified", text: "Unclassified" },
   {
@@ -630,7 +631,7 @@ async function submit() {
 
   let identifier = "";
   if (useRoute().query.artifactId === undefined) {
-    identifier = userInputArifactId.value;
+    identifier = UserInputArtifactId.value;
   } else {
     identifier = useRoute().query.artifactId?.toString();
   }
diff --git a/mlte/frontend/nuxt-app/pages/report.vue b/mlte/frontend/nuxt-app/pages/report.vue
index 4f4bb6dd..9732aa45 100644
--- a/mlte/frontend/nuxt-app/pages/report.vue
+++ b/mlte/frontend/nuxt-app/pages/report.vue
@@ -4,12 +4,31 @@
 
     <h1 class="section-header">MLTE REPORT</h1>
 
+    <UsaTextInput
+      v-if="useRoute().query.artifactId === undefined"
+      v-model="userInputArtifactId"
+    >
+      <template #label>
+        Artifact ID
+        <InfoIcon>
+          The Artifact ID this negotiation card <br />
+          will be saved under upon submission.
+        </InfoIcon>
+      </template>
+    </UsaTextInput>
+
     <h2>Model Summary</h2>
     <p>A summary of the model under evaluation.</p>
 
-    <UsaTextInput :model-value="form.summary.problem_type">
-      <template #label> Problem Type </template>
-    </UsaTextInput>
+    <UsaSelect v-model="form.summary.problem_type" :options="problemTypeOptions">
+      <template #label>
+        Problem Type
+        <InfoIcon>
+          Type of ML problem the model is intended to solve
+        </InfoIcon>
+      </template>
+    </UsaSelect>
+
     <UsaTextInput :model-value="form.summary.task">
       <template #label> Task </template>
     </UsaTextInput>
@@ -180,6 +199,13 @@
         <UsaTextInput v-model="dataItem.classification">
           <template #label> Data Classification </template>
         </UsaTextInput>
+        <UsaSelect
+          v-model="dataItem.classification"
+          :options="classificationOptions"
+        >
+          <template #label> Data Classification </template>
+        </UsaSelect>
+
 
         <div class="input-group" style="margin-top: 1em">
           <h4 class="no-margin-section-header">Data Ontology</h4>
@@ -262,11 +288,11 @@
 
     <h3>Comments</h3>
     <p>Free-form comments from model developers and system integrators.</p>
-
     <div v-for="(comment, commentIndex) in form.comments" :key="commentIndex">
       <UsaTextInput v-model="comment.content"> </UsaTextInput>
     </div>
 
+    <!-- TODO: Implement this visualization -->
     <h3>Quantitative Analysis</h3>
     <p>No quantitative analysis included with this report.</p>
 
@@ -298,8 +324,8 @@ const path = ref([
   },
 ]);
 
-// Rewrote the form so that every item is at the top level;
-// not sure that is exactly what we want but I figured it is a starting point.
+const userInputArtifactId = ref("");
+
 const form = ref({
   summary: {
     problem_type: "",
@@ -307,7 +333,7 @@ const form = ref({
   },
   performance: {
     goals: [],
-    findings: [],
+    findings: null,
   },
   intended_use: {
     context: "",
@@ -334,11 +360,74 @@ const form = ref({
     fn: "",
     other: "",
   },
-  data: [],
-  comments: [],
-  analysis: {},
+  data: [
+    {
+      description: "",
+      source: "",
+      classification: "",
+      access: "",
+      labels: [
+        {
+          description: "",
+          percentage: 0
+        }
+      ],
+      fields: [
+        {
+          name: "",
+          description: "",
+          type: "",
+          expected_values: "",
+          missing_values: "",
+          special_values: ""
+        }
+      ],
+      rights: "",
+      policies: "",
+      identifiable_information: ""
+    }
+  ],
+  comments: [
+    {
+      content: ""
+    }
+  ],
+  quantitative_analysis: {},
+  validated_spec_id: null,
 });
 
+// TODO: Pull these from the schema
+const problemTypeOptions = [
+  { value: "classification", text: "Classification" },
+  { value: "clustering", text: "Clustering" },
+  { value: "detection", text: "Detection" },
+  { value: "trend", text: "Trend" },
+  { value: "alert", text: "Alert" },
+  { value: "forecasting", text: "Forecasting" },
+  { value: "content_generation", text: "Content Generation" },
+  { value: "benchmarking", text: "Benchmarking" },
+  { value: "goals", text: "Goals" },
+  { value: "other", text: "Other" },
+];
+
+// TODO: Pull these from the schema
+const classificationOptions = [
+  { value: "unclassified", text: "Unclassified" },
+  {
+    value: "cui",
+    text: "Controlled Unclassified Information (CUI)",
+  },
+  {
+    value: "pii",
+    text: "Personally Identifiable Information (PII)",
+  },
+  {
+    value: "phi",
+    text: "Protected Health Information (PHI)",
+  },
+  { value: "other", text: "Other" },
+];
+
 if (useRoute().query.artifactId !== undefined) {
   const namespace = useRoute().query.namespace;
   const model = useRoute().query.model;
@@ -361,41 +450,57 @@ if (useRoute().query.artifactId !== undefined) {
         requestErrorAlert();
       },
       async onResponse({ response }) {
-        form.value.summary.problem_type = capitalizeWord(
-          response._data.body.summary.problem_type,
-        );
-        form.value.summary.task = capitalizeString(
-          response._data.body.summary.task,
-        );
-
-        form.value.performance.goals = response._data.body.performance.goals;
-
-        form.value.intended_use.context =
-          response._data.body.intended_use.usage_context;
-        form.value.intended_use.production_requirements.integration =
-          response._data.body.intended_use.production_requirements.integration;
-        form.value.intended_use.production_requirements.interface =
-          response._data.body.intended_use.production_requirements.interface;
-        form.value.intended_use.production_requirements.resources =
-          response._data.body.intended_use.production_requirements.resources;
-
-        form.value.risks = response._data.body.risks;
-
-        form.value.data = response._data.body.data;
-
-        form.value.comments = response._data.body.comments;
-
-        if (
-          response._data.body.validated_spec_id !== undefined &&
-          response._data.body.validated_spec_id !== ""
-        ) {
-          const validatedSpec = await fetchArtifact(
-            namespace,
-            model,
-            version,
-            response._data.body.validated_spec_id,
-          );
-          form.value.findings = loadFindings(validatedSpec);
+        if (isValidReport(response._data)){
+          form.value.summary = response._data.body.summary;
+          form.value.performance.goals = response._data.body.performance.goals;
+          form.value.intended_use.context =
+            response._data.body.intended_use.usage_context;
+          form.value.intended_use.production_requirements.integration =
+            response._data.body.intended_use.production_requirements.integration;
+          form.value.intended_use.production_requirements.interface =
+            response._data.body.intended_use.production_requirements.interface;
+          form.value.intended_use.production_requirements.resources =
+            response._data.body.intended_use.production_requirements.resources;
+
+          form.value.risks = response._data.body.risks;
+          form.value.data = response._data.body.data;
+          form.value.comments = response._data.body.comments;
+
+          const problemType = response._data.body.summary.problem_type;
+          if (
+            problemTypeOptions.find((x) => x.value === problemType)?.value !==
+            undefined
+          ) {
+            form.value.summary.problem_type = problemTypeOptions.find(
+              (x) => x.value === problemType,
+            )?.value;
+          }
+
+          response._data.data.forEach((item) => {
+            const classification = item.classification;
+            if (
+              classificationOptions.find((x) => x.value === classification)
+                ?.value !== undefined
+            ) {
+              item.classification = classificationOptions.find(
+                (x) => x.value === classification,
+              )?.value;
+            }
+          });
+
+          if (
+            response._data.body.validated_spec_id !== undefined &&
+            response._data.body.validated_spec_id !== ""
+          ) {
+            form.value.validated_spec_id = response._data.body.validated_spec_id;
+            const validatedSpec = await fetchArtifact(
+              namespace,
+              model,
+              version,
+              response._data.body.validated_spec_id,
+            );
+            form.value.findings = loadFindings(validatedSpec);
+          }
         }
       },
       onResponseError() {
@@ -405,6 +510,76 @@ if (useRoute().query.artifactId !== undefined) {
   );
 }
 
+async function submit(){
+  const namespace = useRoute().query.namespace;
+  const model = useRoute().query.model;
+  const version = useRoute().query.version;
+
+  let identifier = "";
+  if (useRoute().query.artifactId === undefined) {
+    identifier = userInputArtifactId.value;
+  } else {
+    identifier = useRoute().query.artifactId?.toString();
+  }
+
+  const artifact = {
+    header: {
+      identifier,
+      type: "report",
+      timestamp: Date.now(),
+    },
+    body: {
+      artifact_type: "report",
+      summary: form.value.summary,
+      performance: form.value.performance,
+      intended_use: form.value.intended_use,
+      risks: form.value.risks,
+      data: form.value.data,
+      comments: form.value.comments,
+      analysis: form.value.quantitative_analysis,
+      validated_spec_id: form.value.validated_spec_id
+    }
+  }
+
+  if (isValidReport(artifact)){
+    console.log('valid report');
+    await useFetch(
+      "http://localhost:8080/api/namespace/" +
+        namespace +
+        "/model/" +
+        model +
+        "/version/" +
+        version +
+        "/artifact",
+      {
+        retry: 0,
+        method: "POST",
+        body: {
+          artifact,
+          // TODO Find out what these values should be
+          force: false,
+          parents: false,
+        },
+        onRequestError() {
+          requestErrorAlert();
+        },
+        onResponse({ response }) {
+          // TODO : If anything needs to happen after the artifact is successfully saved, do it here
+          // For example, redirect back to the homepage.
+          // Can check any data that is contained within response,
+          console.log(response);
+        },
+        onResponseError() {
+          responseErrorAlert();
+        },
+      },
+    );
+  }
+  else{
+    console.log('invalid report')
+  }
+}
+
 // Fetch a artifact by ID.
 async function fetchArtifact(
   namespace: string,
@@ -466,19 +641,6 @@ function loadFindings(proxyObject: any) {
   return findings;
 }
 
-// Capitalize all words in a string.
-function capitalizeString(string: string) {
-  return string
-    .split(" ")
-    .map((word) => capitalizeWord(word))
-    .join(" ");
-}
-
-// Capitalize a word.
-function capitalizeWord(word: string) {
-  return word.charAt(0).toUpperCase() + word.slice(1);
-}
-
 // Export the current report.
 function exportReport() {
   alert("Report export is not currently implemented.");

From e3293288575f725bb3db7bec6e90bad5cdf7c675 Mon Sep 17 00:00:00 2001
From: Alex Derr <aderr@sei.cmu.edu>
Date: Thu, 25 Jan 2024 15:27:47 -0500
Subject: [PATCH 03/11] Report formatting

- Update headers to match negotiation card
- Add buttons for adding and removing objects in goals and data
---
 .../nuxt-app/pages/negotiation-card.vue       |   2 -
 mlte/frontend/nuxt-app/pages/report.vue       | 276 +++++++++++++++---
 2 files changed, 232 insertions(+), 46 deletions(-)

diff --git a/mlte/frontend/nuxt-app/pages/negotiation-card.vue b/mlte/frontend/nuxt-app/pages/negotiation-card.vue
index 2720b589..57478dc9 100644
--- a/mlte/frontend/nuxt-app/pages/negotiation-card.vue
+++ b/mlte/frontend/nuxt-app/pages/negotiation-card.vue
@@ -442,8 +442,6 @@
 </template>
 
 <script setup lang="ts">
-import { isValidNegotiation } from "../composables/artifact-validation.ts";
-
 const path = ref([
   {
     href: "/",
diff --git a/mlte/frontend/nuxt-app/pages/report.vue b/mlte/frontend/nuxt-app/pages/report.vue
index 9732aa45..64a0de66 100644
--- a/mlte/frontend/nuxt-app/pages/report.vue
+++ b/mlte/frontend/nuxt-app/pages/report.vue
@@ -17,7 +17,7 @@
       </template>
     </UsaTextInput>
 
-    <h2>Model Summary</h2>
+    <h2 class="section-header">Model Summary</h2>
     <p>A summary of the model under evaluation.</p>
 
     <UsaSelect v-model="form.summary.problem_type" :options="problemTypeOptions">
@@ -33,36 +33,68 @@
       <template #label> Task </template>
     </UsaTextInput>
 
-    <!-- Kept the goals section consistent with the negotiation card.
-    Probably need to rewrite once we figure out how we want to pull 
-    sections from the negotiation card.-->
-
-    <h2>Performance</h2>
+    <h2 class="section-header">Performance</h2>
     <p>Model performance evaluation.</p>
+    <div class="input-group">
+      <h3>Goals</h3>
+      <p>Goals or objectives that the model is going to help satisfy.</p>
+      <div v-for="(goal, goalIndex) in form.performance.goals" :key="goalIndex">
+        <h3>Goal {{ goalIndex + 1 }}</h3>
 
-    <div
-      v-for="(goal, goalIndex) in form.performance.goals"
-      :key="goal.description"
-    >
-      <h3>Goal {{ goalIndex + 1 }}</h3>
+        <UsaTextInput v-model="goal.description">
+          <template #label> Goal Description </template>
+        </UsaTextInput>
 
-      <UsaTextInput v-model="goal.description">
-        <template #label> Goal Description </template>
-      </UsaTextInput>
-      <h4 class="no-margin-section-header">Metrics</h4>
-      <div v-for="(metric, metricIndex) in goal.metrics" :key="metricIndex">
-        <div class="inline-input-left">
-          <UsaTextInput v-model="metric.description">
-            <template #label> Description </template>
-          </UsaTextInput>
-        </div>
+        <h3 class="no-margin-section-header">Metrics</h3>
+        <div v-for="(metric, metricIndex) in goal.metrics" :key="metricIndex">
+          <div class="inline-input-left">
+            <UsaTextInput v-model="metric.description">
+              <template #label>
+                Description
+                <InfoIcon>
+                  For each goal, select a performance metric that captures the
+                  system's <br />
+                  ability to accomplish that goal; e.g., acceptance criteria for
+                  determining <br />
+                  that the model is performing correctly.
+                </InfoIcon>
+              </template>
+            </UsaTextInput>
+          </div>
 
-        <div class="inline-input-right">
-          <UsaTextInput v-model="metric.baseline">
-            <template #label> Baseline </template>
-          </UsaTextInput>
+          <div class="inline-input-right">
+            <UsaTextInput v-model="metric.baseline">
+              <template #label>
+                Baseline
+                <InfoIcon>
+                  Select a baseline for each performance metric, which means a
+                  measurement that <br />
+                  evaluates whether or not the model will/can achieve the main
+                  goal for which it is being created. <br />
+                  If the goal cannot be measured directly, select a reasonable
+                  proxy and justify how that will <br />
+                  reliably predict the model’s performance in achieving its
+                  goal.
+                </InfoIcon>
+              </template>
+            </UsaTextInput>
+          </div>
+          <div class="inline-button">
+            <DeleteButton @click="deleteMetric(goalIndex, metricIndex)">
+              Delete Metric
+            </DeleteButton>
+          </div>
         </div>
+        <AddButton class="margin-button" @click="addMetric(goalIndex)">
+          Add Metric
+        </AddButton>
+        <DeleteButton @click="deleteGoal(goalIndex)">
+          Delete goal
+        </DeleteButton>
+        <hr />
       </div>
+
+      <AddButton class="margin-button" @click="addGoal()"> Add goal </AddButton>
     </div>
 
     <h3>MLTE Evaluation</h3>
@@ -90,7 +122,7 @@
       </tbody>
     </table>
 
-    <h2>Intended Use</h2>
+    <h2 class="section-header">Intended Use</h2>
     <p>A description of how the model is intended to be used.</p>
     <UsaTextarea :model-value="form.intended_use.context"></UsaTextarea>
 
@@ -119,7 +151,11 @@
     </UsaTextInput>
 
     <div class="input-group" style="margin-top: 1em">
-      <h3>Production Resource Requirements</h3>
+      <h3>Production Compute Resources</h3>
+      <p>
+        Describe the hardware and software requirements including amount of
+        compute resources needed for inference.
+      </p>
       <div>
         <div class="inline-input-left">
           <UsaTextInput
@@ -159,7 +195,7 @@
       </div>
     </div>
 
-    <h3>Risks</h3>
+    <h2 class="section-header">Risks</h2>
     <UsaTextInput v-model="form.risks.fp">
       <template #label> False Positive Risk </template>
     </UsaTextInput>
@@ -172,12 +208,19 @@
       <template #label> Other risks of producing incorrect results </template>
     </UsaTextInput>
 
-    <h3>Data</h3>
+    <h2 class="section-header">Data</h2>
     <p>A description of the data used to train the model.</p>
 
+    <h2 class="section-header">Data</h2>
+    <p>
+      Details of the data that will influence development efforts; fill out all
+      that are known. For access / availability, record what needs to happen to
+      access the data, such as accounts that need to be created or methods for
+      data transportation.
+    </p>
     <div class="input-group">
       <div v-for="(dataItem, dataItemIndex) in form.data" :key="dataItemIndex">
-        <h4>Dataset {{ dataItemIndex + 1 }}</h4>
+        <h3>Data Item {{ dataItemIndex + 1 }}</h3>
         <UsaTextInput v-model="dataItem.access">
           <template #label> Account Access / Account Availability </template>
         </UsaTextInput>
@@ -196,9 +239,6 @@
           </div>
         </div>
 
-        <UsaTextInput v-model="dataItem.classification">
-          <template #label> Data Classification </template>
-        </UsaTextInput>
         <UsaSelect
           v-model="dataItem.classification"
           :options="classificationOptions"
@@ -206,10 +246,11 @@
           <template #label> Data Classification </template>
         </UsaSelect>
 
-
         <div class="input-group" style="margin-top: 1em">
-          <h4 class="no-margin-section-header">Data Ontology</h4>
-          <div v-for="(label, labelIndex) in dataItem.labels" :key="labelIndex">
+          <div
+            v-for="(label, labelIndex) in dataItem.labels"
+            :key="labelIndex"
+          >
             <div class="inline-input-left">
               <UsaTextInput v-model="label.description">
                 <template #label> Label Description </template>
@@ -221,12 +262,26 @@
                 <template #label> Percentage </template>
               </UsaTextInput>
             </div>
+            <div class="inline-button">
+              <DeleteButton @click="deleteLabel(dataItemIndex, labelIndex)">
+                Delete label
+              </DeleteButton>
+            </div>
           </div>
+
+          <AddButton class="margin-button" @click="addLabel(dataItemIndex)">
+            Add additional label
+          </AddButton>
         </div>
 
         <div class="input-group" style="margin-top: 1em">
-          <h4 class="no-margin-section-header">Data Schema</h4>
-          <div v-for="(field, fieldIndex) in dataItem.fields" :key="fieldIndex">
+          <div
+            v-for="(field, schema_index) in dataItem.fields"
+            :key="schema_index"
+          >
+            <h3 class="no-margin-section-header">
+              Data Schema {{ dataItemIndex + 1 }} - {{ schema_index + 1 }}
+            </h3>
             <div>
               <div class="inline-input-left">
                 <UsaTextInput v-model="field.name">
@@ -268,22 +323,55 @@
                 </UsaTextInput>
               </div>
             </div>
+            <DeleteButton
+              class="margin-button"
+              @click="deleteSchema(dataItemIndex, schema_index)"
+            >
+              Delete schema
+            </DeleteButton>
             <hr />
           </div>
+
+          <AddButton class="margin-button" @click="addSchema(dataItemIndex)">
+            Add additional schema
+          </AddButton>
         </div>
 
         <UsaTextInput v-model="dataItem.rights">
-          <template #label> Data Rights </template>
+          <template #label>
+            Data Rights
+            <InfoIcon>
+              Are there particular ways in which the data can and cannot be
+              used?
+            </InfoIcon>
+          </template>
         </UsaTextInput>
 
         <UsaTextInput v-model="dataItem.policies">
-          <template #label> Data Policies </template>
+          <template #label>
+            Data Policies
+            <InfoIcon>
+              Are there policies that govern the data and its use, such as
+              Personally Identifiable Information [PII]?
+            </InfoIcon>
+          </template>
         </UsaTextInput>
 
         <UsaTextInput v-model="dataItem.identifiable_information">
           <template #label> Identifiable Information </template>
         </UsaTextInput>
+
+        <DeleteButton
+          class="margin-button"
+          @click="deleteDataItem(dataItemIndex)"
+        >
+          Delete data item
+        </DeleteButton>
+        <hr />
       </div>
+      <AddButton class="margin-button" @click="addDataItem()">
+        Add data item
+      </AddButton>
     </div>
 
     <h3>Comments</h3>
@@ -328,11 +416,21 @@ const userInputArtifactId = ref("");
 
 const form = ref({
   summary: {
-    problem_type: "",
+    problem_type: "classification",
     task: "",
   },
   performance: {
-    goals: [],
+    goals: [
+      {
+        description: "",
+        metrics: [
+          {
+            description: "",
+            baseline: "",
+          }
+        ]
+      }
+    ],
     findings: null,
   },
   intended_use: {
@@ -362,10 +460,10 @@ const form = ref({
   },
   data: [
     {
+      access: "",
       description: "",
       source: "",
-      classification: "",
-      access: "",
+      classification: "unclassified",
       labels: [
         {
           description: "",
@@ -645,4 +743,94 @@ function loadFindings(proxyObject: any) {
 function exportReport() {
   alert("Report export is not currently implemented.");
 }
+
+function addGoal() {
+  form.value.performance.goals.push({
+    description: "",
+    metrics: [{ description: "", baseline: "" }],
+  });
+}
+
+function deleteGoal(goalIndex: number) {
+  if (confirm("Are you sure you want to delete this goal?")) {
+    form.value.performance.goals.splice(goalIndex, 1);
+  }
+}
+
+function addMetric(goalIndex: number) {
+  form.value.performance.goals[goalIndex].metrics.push({
+    description: "",
+    baseline: "",
+  });
+}
+
+function deleteMetric(goalIndex: number, metricIndex: number) {
+  if (confirm("Are you sure you want to delete this metric?")) {
+    form.value.performance.goals[goalIndex].metrics.splice(metricIndex, 1);
+  }
+}
+
+function addDataItem() {
+  form.value.data.push({
+    access: "",
+    description: "",
+    source: "",
+    classification: "unclassified",
+    labels: [
+      {
+        description: "",
+        percentage: 0,
+      },
+    ],
+    fields: [
+      {
+        name: "",
+        description: "",
+        type: "",
+        expected_values: "",
+        missing_values: "",
+        special_values: "",
+      },
+    ],
+    rights: "",
+    policies: "",
+    identifiable_information: "",
+  });
+}
+
+function deleteDataItem(dataItemIndex: number) {
+  if (confirm("Are you sure you want to delete this data item?")) {
+    form.value.data.splice(dataItemIndex, 1);
+  }
+}
+
+function addLabel(dataItemIndex: number) {
+  form.value.data[dataItemIndex].labels.push({
+    description: "",
+    percentage: 0,
+  });
+}
+
+function deleteLabel(dataItemIndex: number, labelIndex: number) {
+  if (confirm("Are you sure you want to delete this label?")) {
+    form.value.data[dataItemIndex].labels.splice(labelIndex, 1);
+  }
+}
+
+function addSchema(dataItemIndex: number) {
+  form.value.data[dataItemIndex].fields.push({
+    name: "",
+    description: "",
+    type: "",
+    expected_values: "",
+    missing_values: "",
+    special_values: "",
+  });
+}
+
+function deleteSchema(dataItemIndex: number, fieldIndex: number) {
+  if (confirm("Are you sure you want to delete this field?")) {
+    form.value.data[dataItemIndex].fields.splice(fieldIndex, 1);
+  }
+}
 </script>

From 56d252f3e82e05db6b7b1d3f7e0610be65dd5b7f Mon Sep 17 00:00:00 2001
From: Alex Derr <aderr@sei.cmu.edu>
Date: Thu, 25 Jan 2024 15:54:20 -0500
Subject: [PATCH 04/11] Update force parameter to overwrite already saved
 artifacts

---
 mlte/frontend/nuxt-app/pages/negotiation-card.vue | 3 +--
 mlte/frontend/nuxt-app/pages/report.vue           | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/mlte/frontend/nuxt-app/pages/negotiation-card.vue b/mlte/frontend/nuxt-app/pages/negotiation-card.vue
index 57478dc9..3fa2bc87 100644
--- a/mlte/frontend/nuxt-app/pages/negotiation-card.vue
+++ b/mlte/frontend/nuxt-app/pages/negotiation-card.vue
@@ -663,8 +663,7 @@ async function submit() {
         method: "POST",
         body: {
           artifact,
-          // TODO Find out what these values should be
-          force: false,
+          force: useRoute().query.artifactId != undefined,
           parents: false,
         },
         onRequestError() {
diff --git a/mlte/frontend/nuxt-app/pages/report.vue b/mlte/frontend/nuxt-app/pages/report.vue
index 64a0de66..dcf31078 100644
--- a/mlte/frontend/nuxt-app/pages/report.vue
+++ b/mlte/frontend/nuxt-app/pages/report.vue
@@ -654,8 +654,7 @@ async function submit(){
         method: "POST",
         body: {
           artifact,
-          // TODO Find out what these values should be
-          force: false,
+          force: useRoute().query.artifactId != undefined,
           parents: false,
         },
         onRequestError() {

From b87c2b6cf1741ccc1b3a338e0074530a66f62e81 Mon Sep 17 00:00:00 2001
From: Alex Derr <aderr@sei.cmu.edu>
Date: Thu, 25 Jan 2024 16:29:57 -0500
Subject: [PATCH 05/11] Bug fix on useFetch

- useFetch apparently was used incorrectly causing it to run several times in error. Should be fixed
---
 mlte/frontend/nuxt-app/pages/negotiation-card.vue |  2 +-
 mlte/frontend/nuxt-app/pages/report.vue           | 10 ++--------
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/mlte/frontend/nuxt-app/pages/negotiation-card.vue b/mlte/frontend/nuxt-app/pages/negotiation-card.vue
index 3fa2bc87..a105672a 100644
--- a/mlte/frontend/nuxt-app/pages/negotiation-card.vue
+++ b/mlte/frontend/nuxt-app/pages/negotiation-card.vue
@@ -650,7 +650,7 @@ async function submit() {
   };
 
   if (isValidNegotiation(artifact)) {
-    await useFetch(
+    await $fetch(
       "http://localhost:8080/api/namespace/" +
         namespace +
         "/model/" +
diff --git a/mlte/frontend/nuxt-app/pages/report.vue b/mlte/frontend/nuxt-app/pages/report.vue
index dcf31078..e6963397 100644
--- a/mlte/frontend/nuxt-app/pages/report.vue
+++ b/mlte/frontend/nuxt-app/pages/report.vue
@@ -396,11 +396,6 @@
 </template>
 
 <script setup lang="ts">
-import {
-  requestErrorAlert,
-  responseErrorAlert,
-} from "../composables/error-handling";
-
 const path = ref([
   {
     href: "/",
@@ -640,8 +635,7 @@ async function submit(){
   }
 
   if (isValidReport(artifact)){
-    console.log('valid report');
-    await useFetch(
+    await $fetch(
       "http://localhost:8080/api/namespace/" +
         namespace +
         "/model/" +
@@ -673,7 +667,7 @@ async function submit(){
     );
   }
   else{
-    console.log('invalid report')
+    console.log("Invalid report.")
   }
 }
 

From cc31b05d55bf00db867c3d886b2af8d07c54f2db Mon Sep 17 00:00:00 2001
From: Alex Derr <aderr@sei.cmu.edu>
Date: Fri, 26 Jan 2024 14:59:33 -0500
Subject: [PATCH 06/11] Improved handling of submits to allow new and edits

---
 .../nuxt-app/composables/error-handling.ts    | 11 -----
 .../nuxt-app/composables/form-methods.ts      | 18 ++++++++
 .../nuxt-app/pages/negotiation-card.vue       | 46 +++++++++++--------
 mlte/frontend/nuxt-app/pages/report.vue       | 46 +++++++++++--------
 4 files changed, 70 insertions(+), 51 deletions(-)
 delete mode 100644 mlte/frontend/nuxt-app/composables/error-handling.ts

diff --git a/mlte/frontend/nuxt-app/composables/error-handling.ts b/mlte/frontend/nuxt-app/composables/error-handling.ts
deleted file mode 100644
index b1935b09..00000000
--- a/mlte/frontend/nuxt-app/composables/error-handling.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export function requestErrorAlert() {
-  alert(
-    "Error encountered while communicating with API. Ensure store is running and allowed-origins is configured correctly.",
-  );
-}
-
-export function responseErrorAlert() {
-  alert(
-    "Error encountered in response from API. Check browser and store console for more information.",
-  );
-}
diff --git a/mlte/frontend/nuxt-app/composables/form-methods.ts b/mlte/frontend/nuxt-app/composables/form-methods.ts
index 97072b78..9318fa6f 100644
--- a/mlte/frontend/nuxt-app/composables/form-methods.ts
+++ b/mlte/frontend/nuxt-app/composables/form-methods.ts
@@ -6,4 +6,22 @@ export function cancelFormSubmission(redirect: string) {
   ) {
     location.href = redirect;
   }
+}
+
+export function requestErrorAlert() {
+  alert(
+    "Error encountered while communicating with API. Ensure store is running and allowed-origins is configured correctly.",
+  );
+}
+
+export function responseErrorAlert() {
+  alert(
+    "Error encountered in response from API. Check browser and store console for more information.",
+  );
+}
+
+export function conflictErrorAlert(){
+  alert(
+    "Name specified for artifact is already in use."
+  )
 }
\ No newline at end of file
diff --git a/mlte/frontend/nuxt-app/pages/negotiation-card.vue b/mlte/frontend/nuxt-app/pages/negotiation-card.vue
index a105672a..22056622 100644
--- a/mlte/frontend/nuxt-app/pages/negotiation-card.vue
+++ b/mlte/frontend/nuxt-app/pages/negotiation-card.vue
@@ -454,6 +454,7 @@ const path = ref([
 ]);
 
 const UserInputArtifactId = ref("");
+const forceSaveParam = ref(useRoute().query.artifactId != undefined);
 
 const form = ref({
   system: {
@@ -650,36 +651,41 @@ async function submit() {
   };
 
   if (isValidNegotiation(artifact)) {
-    await $fetch(
-      "http://localhost:8080/api/namespace/" +
-        namespace +
-        "/model/" +
-        model +
-        "/version/" +
-        version +
-        "/artifact",
-      {
+    try {
+      await $fetch(
+        "http://localhost:8080/api/namespace/" +
+          namespace +
+          "/model/" +
+          model +
+          "/version/" +
+          version +
+          "/artifact",
+        {
         retry: 0,
         method: "POST",
         body: {
           artifact,
-          force: useRoute().query.artifactId != undefined,
+          force: forceSaveParam.value,
           parents: false,
         },
         onRequestError() {
           requestErrorAlert();
         },
-        onResponse({ response }) {
-          // TODO : If anything needs to happen after the artifact is successfully saved, do it here
-          // For example, redirect back to the homepage.
-          // Can check any data that is contained within response,
-          console.log(response);
-        },
-        onResponseError() {
-          responseErrorAlert();
+        onResponseError({ response }) {
+          if (response.status === 409){
+            conflictErrorAlert();
+          }
+          else{
+            responseErrorAlert();
+          }
         },
-      },
-    );
+      });
+      forceSaveParam.value = true;
+    }
+    catch(error){
+      console.log("Error in fetch.");
+      console.log(error);
+    }
   }
 }
 
diff --git a/mlte/frontend/nuxt-app/pages/report.vue b/mlte/frontend/nuxt-app/pages/report.vue
index e6963397..d84cddbc 100644
--- a/mlte/frontend/nuxt-app/pages/report.vue
+++ b/mlte/frontend/nuxt-app/pages/report.vue
@@ -408,6 +408,7 @@ const path = ref([
 ]);
 
 const userInputArtifactId = ref("");
+const forceSaveParam = ref(useRoute().query.artifactId != undefined);
 
 const form = ref({
   summary: {
@@ -635,36 +636,41 @@ async function submit(){
   }
 
   if (isValidReport(artifact)){
-    await $fetch(
-      "http://localhost:8080/api/namespace/" +
-        namespace +
-        "/model/" +
-        model +
-        "/version/" +
-        version +
-        "/artifact",
-      {
+    try {
+      await $fetch(
+        "http://localhost:8080/api/namespace/" +
+          namespace +
+          "/model/" +
+          model +
+          "/version/" +
+          version +
+          "/artifact",
+        {
         retry: 0,
         method: "POST",
         body: {
           artifact,
-          force: useRoute().query.artifactId != undefined,
+          force: forceSaveParam.value,
           parents: false,
         },
         onRequestError() {
           requestErrorAlert();
         },
-        onResponse({ response }) {
-          // TODO : If anything needs to happen after the artifact is successfully saved, do it here
-          // For example, redirect back to the homepage.
-          // Can check any data that is contained within response,
-          console.log(response);
-        },
-        onResponseError() {
-          responseErrorAlert();
+        onResponseError({ response }) {
+          if (response.status === 409){
+            conflictErrorAlert();
+          }
+          else{
+            responseErrorAlert();
+          }
         },
-      },
-    );
+      });
+      forceSaveParam.value = true;
+    }
+    catch(error){
+      console.log("Error in fetch.")
+      console.log(error);
+    };
   }
   else{
     console.log("Invalid report.")

From 54315f11afcbdab0b8f9f48f05a4636bbfb26f2b Mon Sep 17 00:00:00 2001
From: Alex Derr <aderr@sei.cmu.edu>
Date: Mon, 29 Jan 2024 10:31:03 -0500
Subject: [PATCH 07/11] Add confirmation of save message on report and
 negotiation card

---
 mlte/frontend/nuxt-app/composables/form-methods.ts | 6 ++++++
 mlte/frontend/nuxt-app/pages/negotiation-card.vue  | 1 +
 mlte/frontend/nuxt-app/pages/report.vue            | 1 +
 3 files changed, 8 insertions(+)

diff --git a/mlte/frontend/nuxt-app/composables/form-methods.ts b/mlte/frontend/nuxt-app/composables/form-methods.ts
index 9318fa6f..57c0f289 100644
--- a/mlte/frontend/nuxt-app/composables/form-methods.ts
+++ b/mlte/frontend/nuxt-app/composables/form-methods.ts
@@ -1,3 +1,9 @@
+export function successfulSubmission(artifactType: string, artifactName: string) {
+  alert(
+    `Your ${artifactType}, ${artifactName}, has been saved successfully.`
+  )
+}
+
 export function cancelFormSubmission(redirect: string) {
   if (
     confirm(
diff --git a/mlte/frontend/nuxt-app/pages/negotiation-card.vue b/mlte/frontend/nuxt-app/pages/negotiation-card.vue
index 22056622..2c00446a 100644
--- a/mlte/frontend/nuxt-app/pages/negotiation-card.vue
+++ b/mlte/frontend/nuxt-app/pages/negotiation-card.vue
@@ -680,6 +680,7 @@ async function submit() {
           }
         },
       });
+      successfulSubmission('negotiation card', identifier);
       forceSaveParam.value = true;
     }
     catch(error){
diff --git a/mlte/frontend/nuxt-app/pages/report.vue b/mlte/frontend/nuxt-app/pages/report.vue
index d84cddbc..2e8eaec9 100644
--- a/mlte/frontend/nuxt-app/pages/report.vue
+++ b/mlte/frontend/nuxt-app/pages/report.vue
@@ -665,6 +665,7 @@ async function submit(){
           }
         },
       });
+      successfulSubmission('report', identifier);
       forceSaveParam.value = true;
     }
     catch(error){

From fa264150b1cb97e99de7f378324ce66efd17ada1 Mon Sep 17 00:00:00 2001
From: Alex Derr <aderr@sei.cmu.edu>
Date: Mon, 29 Jan 2024 10:55:55 -0500
Subject: [PATCH 08/11] Fix timestamp display

---
 mlte/frontend/nuxt-app/pages/index.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/mlte/frontend/nuxt-app/pages/index.vue b/mlte/frontend/nuxt-app/pages/index.vue
index 89d6d63d..3eead5b0 100644
--- a/mlte/frontend/nuxt-app/pages/index.vue
+++ b/mlte/frontend/nuxt-app/pages/index.vue
@@ -271,11 +271,8 @@ const { data: namespaceOptions } = await useFetch<string[]>(
   { method: "GET" },
 );
 
-// The selected namespace
 const selectedNamespace = ref("");
-// The selected model
 const selectedModel = ref("");
-// The selected model version
 const selectedVersion = ref("");
 
 if (namespaceOptions.value !== null && namespaceOptions.value.length > 0) {
@@ -561,7 +558,7 @@ function populateArtifacts(model: string, version: string, artifactList: any) {
       if (isValidNegotiation(artifact)) {
         negotiationCards.value.push({
           id: artifact.header.identifier,
-          timestamp: new Date(artifact.header.timestamp * 1000).toString(),
+          timestamp: new Date(artifact.header.timestamp).toLocaleString("en-US"),
           model,
           version,
         });
@@ -572,7 +569,7 @@ function populateArtifacts(model: string, version: string, artifactList: any) {
       if (isValidReport(artifact)) {
         reports.value.push({
           id: artifact.header.identifier,
-          timestamp: new Date(artifact.header.timestamp * 1000).toString(),
+          timestamp: new Date(artifact.header.timestamp).toLocaleString("en-US"),
           model,
           version,
         });
@@ -583,7 +580,7 @@ function populateArtifacts(model: string, version: string, artifactList: any) {
       if (isValidSpec(artifact)) {
         specifications.value.push({
           id: artifact.header.identifier,
-          timestamp: new Date(artifact.header.timestamp * 1000).toString(),
+          timestamp: new Date(artifact.header.timestamp).toLocaleString("en-US"),
           model,
           version,
         });
@@ -595,7 +592,7 @@ function populateArtifacts(model: string, version: string, artifactList: any) {
         validatedSpecs.value.push({
           id: artifact.header.identifier,
           specid: artifact.body.spec_identifier,
-          timestamp: new Date(artifact.header.timestamp * 1000).toString(),
+          timestamp: new Date(artifact.header.timestamp).toLocaleString("en-US"),
           model,
           version,
         });
@@ -608,7 +605,7 @@ function populateArtifacts(model: string, version: string, artifactList: any) {
           id: artifact.header.identifier.slice(0, -6),
           measurement: artifact.body.metadata.measurement_type,
           type: artifact.body.value.value_type,
-          timestamp: new Date(artifact.header.timestamp * 1000).toString(),
+          timestamp: new Date(artifact.header.timestamp).toLocaleString("en-US"),
           model,
           version,
         });

From 42f56ee26032918e39b7828e5666f5e0b6854993 Mon Sep 17 00:00:00 2001
From: Alex Derr <aderr@sei.cmu.edu>
Date: Tue, 30 Jan 2024 15:51:35 -0500
Subject: [PATCH 09/11] Downgrading vue to address bug with NuxtLink navigation

- https://github.com/nuxt/nuxt/issues/13309
---
 mlte/frontend/nuxt-app/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/mlte/frontend/nuxt-app/package.json b/mlte/frontend/nuxt-app/package.json
index 8240fafa..fa1f0b37 100644
--- a/mlte/frontend/nuxt-app/package.json
+++ b/mlte/frontend/nuxt-app/package.json
@@ -33,6 +33,7 @@
     "prettier": "^3.0.0",
     "typescript": "^5.1.6",
     "url": "^0.11.1",
+    "vue": "3.3",
     "vue-tsc": "^1.8.6",
     "vue-uswds": "^1.2.0"
   }

From fccd1edbfcf12c5bdec526beda2d4bd2f252d941 Mon Sep 17 00:00:00 2001
From: Alex Derr <aderr@sei.cmu.edu>
Date: Wed, 31 Jan 2024 10:31:24 -0500
Subject: [PATCH 10/11] Code formatting

---
 .../nuxt-app/composables/form-methods.ts      |  17 ++-
 .../frontend/nuxt-app/layouts/base-layout.vue |   3 +-
 mlte/frontend/nuxt-app/pages/index.vue        |  24 ++--
 .../nuxt-app/pages/negotiation-card.vue       |  50 ++++---
 mlte/frontend/nuxt-app/pages/report.vue       | 129 ++++++++++--------
 5 files changed, 121 insertions(+), 102 deletions(-)

diff --git a/mlte/frontend/nuxt-app/composables/form-methods.ts b/mlte/frontend/nuxt-app/composables/form-methods.ts
index 57c0f289..d4078fc5 100644
--- a/mlte/frontend/nuxt-app/composables/form-methods.ts
+++ b/mlte/frontend/nuxt-app/composables/form-methods.ts
@@ -1,7 +1,8 @@
-export function successfulSubmission(artifactType: string, artifactName: string) {
-  alert(
-    `Your ${artifactType}, ${artifactName}, has been saved successfully.`
-  )
+export function successfulSubmission(
+  artifactType: string,
+  artifactName: string,
+) {
+  alert(`Your ${artifactType}, ${artifactName}, has been saved successfully.`);
 }
 
 export function cancelFormSubmission(redirect: string) {
@@ -26,8 +27,6 @@ export function responseErrorAlert() {
   );
 }
 
-export function conflictErrorAlert(){
-  alert(
-    "Name specified for artifact is already in use."
-  )
-}
\ No newline at end of file
+export function conflictErrorAlert() {
+  alert("Name specified for artifact is already in use.");
+}
diff --git a/mlte/frontend/nuxt-app/layouts/base-layout.vue b/mlte/frontend/nuxt-app/layouts/base-layout.vue
index 4d8c5ed4..55dc88f7 100644
--- a/mlte/frontend/nuxt-app/layouts/base-layout.vue
+++ b/mlte/frontend/nuxt-app/layouts/base-layout.vue
@@ -49,7 +49,8 @@
           target="_blank"
           rel="noopener noreferrer"
           href="https://mlte.readthedocs.io/en/latest/using_mlte/"
-          >User Guide</a>
+          >User Guide</a
+        >
         <span>v0.2.2</span>
       </div>
     </footer>
diff --git a/mlte/frontend/nuxt-app/pages/index.vue b/mlte/frontend/nuxt-app/pages/index.vue
index 3eead5b0..e3575f5b 100644
--- a/mlte/frontend/nuxt-app/pages/index.vue
+++ b/mlte/frontend/nuxt-app/pages/index.vue
@@ -153,9 +153,7 @@
                       },
                     }"
                   >
-                    <UsaButton class="primary-button">
-                      Edit
-                    </UsaButton>
+                    <UsaButton class="primary-button"> Edit </UsaButton>
                   </NuxtLink>
                 </td>
               </tr>
@@ -558,7 +556,9 @@ function populateArtifacts(model: string, version: string, artifactList: any) {
       if (isValidNegotiation(artifact)) {
         negotiationCards.value.push({
           id: artifact.header.identifier,
-          timestamp: new Date(artifact.header.timestamp).toLocaleString("en-US"),
+          timestamp: new Date(artifact.header.timestamp).toLocaleString(
+            "en-US",
+          ),
           model,
           version,
         });
@@ -569,7 +569,9 @@ function populateArtifacts(model: string, version: string, artifactList: any) {
       if (isValidReport(artifact)) {
         reports.value.push({
           id: artifact.header.identifier,
-          timestamp: new Date(artifact.header.timestamp).toLocaleString("en-US"),
+          timestamp: new Date(artifact.header.timestamp).toLocaleString(
+            "en-US",
+          ),
           model,
           version,
         });
@@ -580,7 +582,9 @@ function populateArtifacts(model: string, version: string, artifactList: any) {
       if (isValidSpec(artifact)) {
         specifications.value.push({
           id: artifact.header.identifier,
-          timestamp: new Date(artifact.header.timestamp).toLocaleString("en-US"),
+          timestamp: new Date(artifact.header.timestamp).toLocaleString(
+            "en-US",
+          ),
           model,
           version,
         });
@@ -592,7 +596,9 @@ function populateArtifacts(model: string, version: string, artifactList: any) {
         validatedSpecs.value.push({
           id: artifact.header.identifier,
           specid: artifact.body.spec_identifier,
-          timestamp: new Date(artifact.header.timestamp).toLocaleString("en-US"),
+          timestamp: new Date(artifact.header.timestamp).toLocaleString(
+            "en-US",
+          ),
           model,
           version,
         });
@@ -605,7 +611,9 @@ function populateArtifacts(model: string, version: string, artifactList: any) {
           id: artifact.header.identifier.slice(0, -6),
           measurement: artifact.body.metadata.measurement_type,
           type: artifact.body.value.value_type,
-          timestamp: new Date(artifact.header.timestamp).toLocaleString("en-US"),
+          timestamp: new Date(artifact.header.timestamp).toLocaleString(
+            "en-US",
+          ),
           model,
           version,
         });
diff --git a/mlte/frontend/nuxt-app/pages/negotiation-card.vue b/mlte/frontend/nuxt-app/pages/negotiation-card.vue
index 2c00446a..33e77ca2 100644
--- a/mlte/frontend/nuxt-app/pages/negotiation-card.vue
+++ b/mlte/frontend/nuxt-app/pages/negotiation-card.vue
@@ -206,10 +206,7 @@
         </UsaSelect>
 
         <div class="input-group" style="margin-top: 1em">
-          <div
-            v-for="(label, labelIndex) in dataItem.labels"
-            :key="labelIndex"
-          >
+          <div v-for="(label, labelIndex) in dataItem.labels" :key="labelIndex">
             <div class="inline-input-left">
               <UsaTextInput v-model="label.description">
                 <template #label> Label Description </template>
@@ -435,7 +432,9 @@
     </div>
 
     <div style="text-align: right; margin-top: 1em">
-      <UsaButton class="secondary-button" @click="cancelFormSubmission('/')"> Cancel </UsaButton>
+      <UsaButton class="secondary-button" @click="cancelFormSubmission('/')">
+        Cancel
+      </UsaButton>
       <UsaButton class="primary-button" @click="submit()"> Save </UsaButton>
     </div>
   </NuxtLayout>
@@ -661,29 +660,28 @@ async function submit() {
           version +
           "/artifact",
         {
-        retry: 0,
-        method: "POST",
-        body: {
-          artifact,
-          force: forceSaveParam.value,
-          parents: false,
-        },
-        onRequestError() {
-          requestErrorAlert();
-        },
-        onResponseError({ response }) {
-          if (response.status === 409){
-            conflictErrorAlert();
-          }
-          else{
-            responseErrorAlert();
-          }
+          retry: 0,
+          method: "POST",
+          body: {
+            artifact,
+            force: forceSaveParam.value,
+            parents: false,
+          },
+          onRequestError() {
+            requestErrorAlert();
+          },
+          onResponseError({ response }) {
+            if (response.status === 409) {
+              conflictErrorAlert();
+            } else {
+              responseErrorAlert();
+            }
+          },
         },
-      });
-      successfulSubmission('negotiation card', identifier);
+      );
+      successfulSubmission("negotiation card", identifier);
       forceSaveParam.value = true;
-    }
-    catch(error){
+    } catch (error) {
       console.log("Error in fetch.");
       console.log(error);
     }
diff --git a/mlte/frontend/nuxt-app/pages/report.vue b/mlte/frontend/nuxt-app/pages/report.vue
index 2e8eaec9..69e54f66 100644
--- a/mlte/frontend/nuxt-app/pages/report.vue
+++ b/mlte/frontend/nuxt-app/pages/report.vue
@@ -20,12 +20,13 @@
     <h2 class="section-header">Model Summary</h2>
     <p>A summary of the model under evaluation.</p>
 
-    <UsaSelect v-model="form.summary.problem_type" :options="problemTypeOptions">
+    <UsaSelect
+      v-model="form.summary.problem_type"
+      :options="problemTypeOptions"
+    >
       <template #label>
         Problem Type
-        <InfoIcon>
-          Type of ML problem the model is intended to solve
-        </InfoIcon>
+        <InfoIcon> Type of ML problem the model is intended to solve </InfoIcon>
       </template>
     </UsaSelect>
 
@@ -110,9 +111,24 @@
       </thead>
       <tbody>
         <tr v-for="finding in form.findings" :key="finding.evidence_id">
-          <td v-if="finding.status == 'Success'" style="background-color: rgba(210,232,221,255)">{{ finding.status }}</td>
-          <td v-else-if="finding.status == 'Ignore'" style="background-color: rgba(255,243,205,255)">{{ finding.status }}</td>
-          <td v-else-if="finding.status == 'Failure'" style="background-color: rgba(248,216,219,255)">{{ finding.status }}</td>
+          <td
+            v-if="finding.status == 'Success'"
+            style="background-color: rgba(210, 232, 221, 255)"
+          >
+            {{ finding.status }}
+          </td>
+          <td
+            v-else-if="finding.status == 'Ignore'"
+            style="background-color: rgba(255, 243, 205, 255)"
+          >
+            {{ finding.status }}
+          </td>
+          <td
+            v-else-if="finding.status == 'Failure'"
+            style="background-color: rgba(248, 216, 219, 255)"
+          >
+            {{ finding.status }}
+          </td>
           <td v-else>{{ finding.status }}</td>
           <td>{{ finding.property }}</td>
           <td>{{ finding.measurement }}</td>
@@ -247,10 +263,7 @@
         </UsaSelect>
 
         <div class="input-group" style="margin-top: 1em">
-          <div
-            v-for="(label, labelIndex) in dataItem.labels"
-            :key="labelIndex"
-          >
+          <div v-for="(label, labelIndex) in dataItem.labels" :key="labelIndex">
             <div class="inline-input-left">
               <UsaTextInput v-model="label.description">
                 <template #label> Label Description </template>
@@ -385,13 +398,14 @@
     <p>No quantitative analysis included with this report.</p>
 
     <div style="text-align: right; margin-top: 1em">
-      <UsaButton class="secondary-button" @click="cancelFormSubmission('/')"> Cancel </UsaButton>
-      <UsaButton class="primary-button" @click="exportReport()" disabled>
+      <UsaButton class="secondary-button" @click="cancelFormSubmission('/')">
+        Cancel
+      </UsaButton>
+      <UsaButton class="primary-button" disabled @click="exportReport()">
         Export
       </UsaButton>
       <UsaButton class="primary-button" @click="submit()"> Save </UsaButton>
     </div>
-    
   </NuxtLayout>
 </template>
 
@@ -423,9 +437,9 @@ const form = ref({
           {
             description: "",
             baseline: "",
-          }
-        ]
-      }
+          },
+        ],
+      },
     ],
     findings: null,
   },
@@ -463,8 +477,8 @@ const form = ref({
       labels: [
         {
           description: "",
-          percentage: 0
-        }
+          percentage: 0,
+        },
       ],
       fields: [
         {
@@ -473,18 +487,18 @@ const form = ref({
           type: "",
           expected_values: "",
           missing_values: "",
-          special_values: ""
-        }
+          special_values: "",
+        },
       ],
       rights: "",
       policies: "",
-      identifiable_information: ""
-    }
+      identifiable_information: "",
+    },
   ],
   comments: [
     {
-      content: ""
-    }
+      content: "",
+    },
   ],
   quantitative_analysis: {},
   validated_spec_id: null,
@@ -544,7 +558,7 @@ if (useRoute().query.artifactId !== undefined) {
         requestErrorAlert();
       },
       async onResponse({ response }) {
-        if (isValidReport(response._data)){
+        if (isValidReport(response._data)) {
           form.value.summary = response._data.body.summary;
           form.value.performance.goals = response._data.body.performance.goals;
           form.value.intended_use.context =
@@ -586,7 +600,8 @@ if (useRoute().query.artifactId !== undefined) {
             response._data.body.validated_spec_id !== undefined &&
             response._data.body.validated_spec_id !== ""
           ) {
-            form.value.validated_spec_id = response._data.body.validated_spec_id;
+            form.value.validated_spec_id =
+              response._data.body.validated_spec_id;
             const validatedSpec = await fetchArtifact(
               namespace,
               model,
@@ -604,7 +619,7 @@ if (useRoute().query.artifactId !== undefined) {
   );
 }
 
-async function submit(){
+async function submit() {
   const namespace = useRoute().query.namespace;
   const model = useRoute().query.model;
   const version = useRoute().query.version;
@@ -631,11 +646,11 @@ async function submit(){
       data: form.value.data,
       comments: form.value.comments,
       analysis: form.value.quantitative_analysis,
-      validated_spec_id: form.value.validated_spec_id
-    }
-  }
+      validated_spec_id: form.value.validated_spec_id,
+    },
+  };
 
-  if (isValidReport(artifact)){
+  if (isValidReport(artifact)) {
     try {
       await $fetch(
         "http://localhost:8080/api/namespace/" +
@@ -646,35 +661,33 @@ async function submit(){
           version +
           "/artifact",
         {
-        retry: 0,
-        method: "POST",
-        body: {
-          artifact,
-          force: forceSaveParam.value,
-          parents: false,
-        },
-        onRequestError() {
-          requestErrorAlert();
-        },
-        onResponseError({ response }) {
-          if (response.status === 409){
-            conflictErrorAlert();
-          }
-          else{
-            responseErrorAlert();
-          }
+          retry: 0,
+          method: "POST",
+          body: {
+            artifact,
+            force: forceSaveParam.value,
+            parents: false,
+          },
+          onRequestError() {
+            requestErrorAlert();
+          },
+          onResponseError({ response }) {
+            if (response.status === 409) {
+              conflictErrorAlert();
+            } else {
+              responseErrorAlert();
+            }
+          },
         },
-      });
-      successfulSubmission('report', identifier);
+      );
+      successfulSubmission("report", identifier);
       forceSaveParam.value = true;
-    }
-    catch(error){
-      console.log("Error in fetch.")
+    } catch (error) {
+      console.log("Error in fetch.");
       console.log(error);
-    };
-  }
-  else{
-    console.log("Invalid report.")
+    }
+  } else {
+    console.log("Invalid report.");
   }
 }
 

From 868f8530f9e4088ca847539ec3ffb52f2c0f97c1 Mon Sep 17 00:00:00 2001
From: Alex Derr <aderr@sei.cmu.edu>
Date: Wed, 31 Jan 2024 11:02:31 -0500
Subject: [PATCH 11/11] Linting

---
 mlte/frontend/nuxt-app/.eslintrc.json             | 12 +++++++++++-
 mlte/frontend/nuxt-app/pages/index.vue            |  8 --------
 mlte/frontend/nuxt-app/pages/negotiation-card.vue | 12 +-----------
 mlte/frontend/nuxt-app/pages/report.vue           |  4 ++--
 4 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/mlte/frontend/nuxt-app/.eslintrc.json b/mlte/frontend/nuxt-app/.eslintrc.json
index e3894eed..78fe9aa1 100644
--- a/mlte/frontend/nuxt-app/.eslintrc.json
+++ b/mlte/frontend/nuxt-app/.eslintrc.json
@@ -9,9 +9,19 @@
     "defineNuxtPlugin": true,
     "useRoute": true,
     "ref": true,
+    "$fetch": true,
     "useFetch": true,
+    "isValidNegotiation": true,
+    "isValidSpec": true,
+    "isValidValidatedSpec": true,
+    "isValidValue": true,
+    "isValidReport": true,
+    "isValidArtifact": true,
+    "successfulSubmission": true,
+    "cancelFormSubmission": true,
     "requestErrorAlert": true,
-    "responseErrorAlert": true
+    "responseErrorAlert": true,
+    "conflictErrorAlert": true
   },
   "extends": [
     "standard",
diff --git a/mlte/frontend/nuxt-app/pages/index.vue b/mlte/frontend/nuxt-app/pages/index.vue
index e3575f5b..66af8a96 100644
--- a/mlte/frontend/nuxt-app/pages/index.vue
+++ b/mlte/frontend/nuxt-app/pages/index.vue
@@ -249,14 +249,6 @@
 </template>
 
 <script setup lang="ts">
-import {
-  isValidNegotiation,
-  isValidReport,
-  isValidSpec,
-  isValidValidatedSpec,
-  isValidValue,
-} from "../composables/artifact-validation.ts";
-
 const path = ref([
   {
     href: "/",
diff --git a/mlte/frontend/nuxt-app/pages/negotiation-card.vue b/mlte/frontend/nuxt-app/pages/negotiation-card.vue
index 33e77ca2..fd13bf84 100644
--- a/mlte/frontend/nuxt-app/pages/negotiation-card.vue
+++ b/mlte/frontend/nuxt-app/pages/negotiation-card.vue
@@ -453,7 +453,7 @@ const path = ref([
 ]);
 
 const UserInputArtifactId = ref("");
-const forceSaveParam = ref(useRoute().query.artifactId != undefined);
+const forceSaveParam = ref(useRoute().query.artifactId !== undefined);
 
 const form = ref({
   system: {
@@ -850,16 +850,6 @@ function descriptorUpload(event: Event, descriptorName: string) {
   }
 }
 
-function cancel() {
-  if (
-    confirm(
-      "Are you sure you want to leave this page? All changes will be lost.",
-    )
-  ) {
-    location.href = "/";
-  }
-}
-
 function addGoal() {
   form.value.system.goals.push({
     description: "",
diff --git a/mlte/frontend/nuxt-app/pages/report.vue b/mlte/frontend/nuxt-app/pages/report.vue
index 69e54f66..d2c9691d 100644
--- a/mlte/frontend/nuxt-app/pages/report.vue
+++ b/mlte/frontend/nuxt-app/pages/report.vue
@@ -422,7 +422,7 @@ const path = ref([
 ]);
 
 const userInputArtifactId = ref("");
-const forceSaveParam = ref(useRoute().query.artifactId != undefined);
+const forceSaveParam = ref(useRoute().query.artifactId !== undefined);
 
 const form = ref({
   summary: {
@@ -698,7 +698,7 @@ async function fetchArtifact(
   version: string,
   artifactId: string,
 ) {
-  const { data, pending, error, refresh, status } = await useFetch(
+  const { data, status } = await useFetch(
     "http://localhost:8080/api/namespace/" +
       namespace +
       "/model/" +