From cc9c6e698b1e7ebc8fd4782964df341947c16c20 Mon Sep 17 00:00:00 2001
From: Matthew Evans <git@ml-evs.science>
Date: Thu, 27 Jul 2023 17:22:14 +0100
Subject: [PATCH] Rework cell and sample UI around new collections graph

- Update cypress tests

- Update starting material UI with collections list
---
 pydatalab/pydatalab/routes/v0_1/graphs.py     |   6 +-
 webapp/cypress/e2e/editPage.cy.js             |   2 -
 webapp/cypress/e2e/sampleTablePage.cy.js      |   4 -
 webapp/src/components/CellInformation.vue     | 179 ++++++++++--------
 .../src/components/CollectionInformation.vue  |   4 +-
 .../components/FancyCollectionSampleTable.vue |   4 +-
 webapp/src/components/ItemGraph.vue           |   6 +
 .../ItemRelationshipVisualization.vue         |  59 ++++++
 webapp/src/components/SampleInformation.vue   |  91 +++++----
 .../StartingMaterialInformation.vue           |  20 +-
 webapp/src/views/CollectionPage.vue           |   4 +-
 webapp/src/views/EditPage.vue                 |  17 +-
 12 files changed, 248 insertions(+), 148 deletions(-)
 create mode 100644 webapp/src/components/ItemRelationshipVisualization.vue

diff --git a/pydatalab/pydatalab/routes/v0_1/graphs.py b/pydatalab/pydatalab/routes/v0_1/graphs.py
index 93dee6f11..8f3598a8a 100644
--- a/pydatalab/pydatalab/routes/v0_1/graphs.py
+++ b/pydatalab/pydatalab/routes/v0_1/graphs.py
@@ -51,7 +51,6 @@ def get_graph_cy_format(item_id: Optional[str] = None, collection_id: Optional[s
         }
         if len(node_ids) > 1:
             or_query = [{"item_id": id} for id in node_ids if id != item_id]
-            # query.extend([{"relationships.item_id": id} for id in node_ids if id != item_id])
             next_shell = flask_mongo.db.items.find(
                 {
                     "$or": or_query,
@@ -112,10 +111,7 @@ def get_graph_cy_format(item_id: Optional[str] = None, collection_id: Optional[s
                     )
                 continue
 
-        if not document.get("relationships"):
-            continue
-
-        for relationship in document["relationships"]:
+        for relationship in document.get("relationships", []):
             # only considering child-parent relationships:
             if relationship.get("relation") not in ("parent", "is_part_of"):
                 continue
diff --git a/webapp/cypress/e2e/editPage.cy.js b/webapp/cypress/e2e/editPage.cy.js
index a95e10907..5bc9fb5c7 100644
--- a/webapp/cypress/e2e/editPage.cy.js
+++ b/webapp/cypress/e2e/editPage.cy.js
@@ -58,7 +58,6 @@ describe("Edit Page", () => {
 
   it("Checks editing the sample edit page", () => {
     cy.findByText("editable_sample").click();
-    cy.findByLabelText("Sample ID").should("have.value", "editable_sample");
     cy.findByLabelText("Name").should("have.value", "This is a sample name");
     cy.findByLabelText("Chemical formula").type("NaCoO2", { force: true });
 
@@ -212,7 +211,6 @@ describe("Edit Page", () => {
 
   it("Add some blocks to the sample and checks unsaved warning behavior", () => {
     cy.findByText("editable_sample").click();
-    cy.findByLabelText("Sample ID").should("have.value", "editable_sample");
     cy.findByLabelText("Name").should("have.value", "This is a sample name");
 
     cy.findByText("Add a block").click();
diff --git a/webapp/cypress/e2e/sampleTablePage.cy.js b/webapp/cypress/e2e/sampleTablePage.cy.js
index 085256aae..8fe08d353 100644
--- a/webapp/cypress/e2e/sampleTablePage.cy.js
+++ b/webapp/cypress/e2e/sampleTablePage.cy.js
@@ -108,7 +108,6 @@ describe("Sample table page", () => {
 
   it("Checks the sample edit page", () => {
     cy.findByText("12345678910").click();
-    cy.findByLabelText("Sample ID").should("have.value", "12345678910");
     cy.go("back");
     cy.findByText("12345678910");
     cy.findByText("This is a sample name");
@@ -186,7 +185,6 @@ describe("Sample table page", () => {
 
     // check one of the pages to make sure it is generating properly
     cy.findByText("122.rwre").click();
-    cy.findByLabelText("Sample ID").should("have.value", "122.rwre");
     cy.go("back");
 
     more_ids.map((id) => verifySample(id));
@@ -283,7 +281,6 @@ describe("Advanced sample creation features", () => {
 
   it("checks the edit page of the copied sample", () => {
     cy.findByText("testBcopy").click();
-    cy.findByLabelText("Sample ID").should("have.value", "testBcopy");
     cy.findByLabelText("Name").should("have.value", "COPY OF the second test sample");
     cy.findByText("this is a description of testB.");
     cy.findByText("a comment is added here.");
@@ -319,7 +316,6 @@ describe("Advanced sample creation features", () => {
 
   it("checks the edit page of the copied sample with components", () => {
     cy.findByText("testBcopy_copy").click();
-    cy.findByLabelText("Sample ID").should("have.value", "testBcopy_copy");
     cy.findByLabelText("Name").should("have.value", "COPY OF COPY OF the second test sample");
     cy.findByText("this is a description of testB.");
     cy.findByText("a comment is added here.");
diff --git a/webapp/src/components/CellInformation.vue b/webapp/src/components/CellInformation.vue
index eb4446a0d..7ed6a70e8 100644
--- a/webapp/src/components/CellInformation.vue
+++ b/webapp/src/components/CellInformation.vue
@@ -1,90 +1,105 @@
 <template>
   <div class="container">
     <!-- Sample information -->
-    <div id="sample-information" class="form-row">
-      <div class="form-group col-md-2">
-        <label for="refcode" class="mr-2">Refcode</label>
-        <span class="form-control-plaintext formatted-refcode">
-          <FormattedRefcode :refcode="Refcode" />
-        </span>
-      </div>
-      <div class="form-group col-md-2">
-        <label for="item_id" class="mr-2">Cell ID</label>
-        <input id="item_id" class="form-control-plaintext" readonly="true" v-model="ItemID" />
-      </div>
-      <div class="form-group col-md-4">
-        <label for="name" class="mr-2">Name</label>
-        <input id="name" class="form-control" v-model="Name" />
-      </div>
-      <div class="form-group col-md-3">
-        <label for="date" class="mr-2">Date Created</label>
-        <input type="datetime-local" v-model="DateCreated" class="form-control" />
-      </div>
-      <div class="col-md-1">
-        <label id="creators" class="mr-2">Creators</label>
-        <Creators aria-labelledby="creators" :creators="ItemCreators" :size="36" />
-      </div>
-    </div>
-    <div class="form-row">
-      <div class="form-group col-md-3">
-        <label for="collections" class="mr-2">Collections</label>
-        <CollectionList :collections="Collections" />
-      </div>
-    </div>
-    <div class="form-row">
-      <div class="form-group col-md-2">
-        <label for="cell-format-dropdown" class="mr-2">Cell format</label>
-        <select id="cell-format-dropdown" v-model="CellFormat" class="form-control">
-          <option
-            v-for="(description, key) in availableCellFormats"
-            :value="description"
-            :key="key"
-          >
-            {{ description }}
-          </option>
-        </select>
-      </div>
-      <div class="form-group col-md-6 ml-3">
-        <label for="cell-format-description">Cell description</label>
-        <input
-          id="cell-format-description"
-          type="text"
-          class="form-control"
-          v-model="CellFormatDescription"
-        />
-      </div>
-    </div>
+    <div class="row">
+      <div class="col">
+        <div id="sample-information" class="form-row">
+          <div class="form-group col-md-5">
+            <label for="name" class="mr-2">Name</label>
+            <input id="name" class="form-control" v-model="Name" />
+          </div>
+          <div class="form-group col-md-3">
+            <label for="date" class="mr-2">Date Created</label>
+            <input
+              type="datetime-local"
+              v-model="DateCreated"
+              class="form-control"
+              style="max-width: 250px"
+            />
+          </div>
+        </div>
+        <div class="form-row">
+          <div class="form-group col-md-2">
+            <label for="refcode" class="mr-2">Refcode</label>
+            <FormattedRefcode :refcode="Refcode" />
+          </div>
+          <div class="col-md-2 pb-3">
+            <label id="creators" class="mr-2">Creators</label>
+            <div class="mx-auto">
+              <Creators aria-labelledby="creators" :creators="ItemCreators" :size="36" />
+            </div>
+          </div>
+          <div class="form-group col-md-3">
+            <label id="collections" class="mr-2">Collections</label>
+            <div>
+              <CollectionList aria-labelledby="collections" :collections="Collections" />
+            </div>
+          </div>
+        </div>
+        <div class="form-row">
+          <div class="form-group col-md-2">
+            <label for="cell-format-dropdown" class="mr-2">Cell format</label>
+            <select id="cell-format-dropdown" v-model="CellFormat" class="form-control">
+              <option
+                v-for="(description, key) in availableCellFormats"
+                :value="description"
+                :key="key"
+              >
+                {{ description }}
+              </option>
+            </select>
+          </div>
+          <div class="form-group col-md-6 ml-3">
+            <label for="cell-format-description">Cell format description</label>
+            <input
+              id="cell-format-description"
+              type="text"
+              class="form-control"
+              v-model="CellFormatDescription"
+            />
+          </div>
+        </div>
 
-    <div class="form-row py-4">
-      <div class="form-group col-xl-2 col-lg-2 col-md-3">
-        <label for="characteristic-mass">Active mass (mg)</label>
-        <input
-          id="characteristic-mass"
-          class="form-control"
-          type="text"
-          v-model="CharacteristicMass"
-          :class="{ 'red-border': isNaN(CharacteristicMass) }"
-        />
-      </div>
-      <div class="form-group col-xl-2 col-lg-3 col-md-4 ml-3">
-        <label for="chemform">Active material formula</label>
-        <ChemFormulaInput id="chemform" v-model="ChemForm" />
+        <div class="form-row py-4">
+          <div class="form-group col-md-3">
+            <label for="characteristic-mass">Active mass (mg)</label>
+            <input
+              id="characteristic-mass"
+              class="form-control"
+              type="text"
+              v-model="CharacteristicMass"
+              :class="{ 'red-border': isNaN(CharacteristicMass) }"
+            />
+          </div>
+          <div class="form-group col-md-4 ml-3">
+            <label for="chemform">Active material formula</label>
+            <ChemFormulaInput id="chemform" v-model="ChemForm" />
+          </div>
+          <div class="form-group col-md-3 ml-3">
+            <label for="characteristic-molar-mass">Molar mass</label>
+            <input
+              id="characteristic-molar-mass"
+              class="form-control"
+              type="text"
+              v-model="MolarMass"
+              :class="{ 'red-border': isNaN(MolarMass) }"
+            />
+          </div>
+        </div>
+        <div class="row">
+          <div class="col">
+            <label id="description-label" class="mr-2">Description</label>
+            <TinyMceInline
+              aria-labelledby="description-label"
+              v-model="SampleDescription"
+            ></TinyMceInline>
+          </div>
+        </div>
       </div>
-      <div class="form-group col-xl-2 col-lg-2 col-md-3 ml-3">
-        <label for="characteristic-molar-mass">Molar mass</label>
-        <input
-          id="characteristic-molar-mass"
-          class="form-control"
-          type="text"
-          v-model="MolarMass"
-          :class="{ 'red-border': isNaN(MolarMass) }"
-        />
+      <div class="col-md-4">
+        <ItemRelationshipVisualization :item_id="item_id" />
       </div>
     </div>
-    <label id="description-label">Description</label>
-    <TinyMceInline aria-labelledby="description-label" v-model="SampleDescription"></TinyMceInline>
-
-    <RelationshipVisualization :item_id="item_id" />
 
     <TableOfContents :item_id="item_id" :informationSections="tableOfContentsSections" />
 
@@ -98,7 +113,7 @@ import ChemFormulaInput from "@/components/ChemFormulaInput";
 import TinyMceInline from "@/components/TinyMceInline";
 import CellPreparationInformation from "@/components/CellPreparationInformation";
 import TableOfContents from "@/components/TableOfContents";
-import RelationshipVisualization from "@/components/RelationshipVisualization";
+import ItemRelationshipVisualization from "@/components/ItemRelationshipVisualization";
 import FormattedRefcode from "@/components/FormattedRefcode";
 import CollectionList from "@/components/CollectionList";
 import Creators from "@/components/Creators";
@@ -137,7 +152,7 @@ export default {
     TinyMceInline,
     CellPreparationInformation,
     TableOfContents,
-    RelationshipVisualization,
+    ItemRelationshipVisualization,
     FormattedRefcode,
     CollectionList,
     Creators,
diff --git a/webapp/src/components/CollectionInformation.vue b/webapp/src/components/CollectionInformation.vue
index da1219a46..74446bbf1 100644
--- a/webapp/src/components/CollectionInformation.vue
+++ b/webapp/src/components/CollectionInformation.vue
@@ -5,7 +5,7 @@
         <div id="collection-information" class="form-row">
           <div class="col-md-2">
             <label id="creators" class="mr-2">Creators</label>
-            <div class="mr-2">
+            <div>
               <Creators :creators="CollectionCreators" :size="36" />
             </div>
           </div>
@@ -27,7 +27,7 @@
           v-model="CollectionDescription"
         ></TinyMceInline>
       </div>
-      <div class="col-md-3">
+      <div class="col-md-4">
         <CollectionRelationshipVisualization :collection_id="collection_id" />
       </div>
     </div>
diff --git a/webapp/src/components/FancyCollectionSampleTable.vue b/webapp/src/components/FancyCollectionSampleTable.vue
index 21de2928f..3658b67b3 100644
--- a/webapp/src/components/FancyCollectionSampleTable.vue
+++ b/webapp/src/components/FancyCollectionSampleTable.vue
@@ -83,8 +83,8 @@ export default {
       itemsSelected: [],
       headers: [
         { text: "ID", value: "item_id", sortable: true },
-        { text: "type", value: "type", sortable: true },
-        { text: "Sample name", value: "name", sortable: true },
+        { text: "Type", value: "type", sortable: true },
+        { text: "Name", value: "name", sortable: true },
         { text: "Formula", value: "chemform", sortable: true },
         { text: "Date", value: "date", sortable: true },
         { text: "Creators", value: "creators", sortable: true },
diff --git a/webapp/src/components/ItemGraph.vue b/webapp/src/components/ItemGraph.vue
index 7749a0f25..73d4c3de8 100644
--- a/webapp/src/components/ItemGraph.vue
+++ b/webapp/src/components/ItemGraph.vue
@@ -181,4 +181,10 @@ export default {
 #flex-container {
   flex-flow: column;
 }
+
+#cy {
+  width: 100%;
+  height: 800px;
+  /* display: block;*/
+}
 </style>
diff --git a/webapp/src/components/ItemRelationshipVisualization.vue b/webapp/src/components/ItemRelationshipVisualization.vue
new file mode 100644
index 000000000..eb3ede350
--- /dev/null
+++ b/webapp/src/components/ItemRelationshipVisualization.vue
@@ -0,0 +1,59 @@
+<template>
+  <label class="mr-2">Relationships</label>
+  <div>
+    <ItemGraph
+      :graphData="graphData"
+      style="height: 200px; width: 100%; border: 1px solid transparent; border-radius: 5px"
+      :defaultGraphStyle="'elk-stress'"
+      :showOptions="false"
+    />
+  </div>
+</template>
+
+<script>
+// import FormattedItemName from "@/components/FormattedItemName"
+import ItemGraph from "@/components/ItemGraph";
+import { getItemGraph } from "@/server_fetch_utils.js";
+
+export default {
+  computed: {
+    graphData() {
+      return this.$store.state.itemGraphData;
+    },
+  },
+  props: {
+    item_id: String,
+  },
+  async mounted() {
+    await getItemGraph({ item_id: this.item_id });
+  },
+  components: {
+    ItemGraph,
+  },
+};
+</script>
+
+<style scoped>
+.nav-link {
+  cursor: pointer;
+}
+
+.contents-item {
+  cursor: pointer;
+}
+
+.contents-blocktype {
+  font-style: italic;
+  color: gray;
+  margin-right: 1rem;
+}
+
+.contents-blocktitle {
+  color: #004175;
+}
+
+#contents-ol {
+  margin-bottom: 0rem;
+  padding-left: 1rem;
+}
+</style>
diff --git a/webapp/src/components/SampleInformation.vue b/webapp/src/components/SampleInformation.vue
index fc7dd5ccb..102313564 100644
--- a/webapp/src/components/SampleInformation.vue
+++ b/webapp/src/components/SampleInformation.vue
@@ -1,46 +1,59 @@
 <template>
   <div class="container">
     <!-- Sample information -->
-    <div id="sample-information" class="form-row">
-      <div class="form-group col-md-2">
-        <label for="refcode" class="mr-2">Refcode</label>
-        <span class="form-control-plaintext formatted-refcode">
-          <FormattedRefcode :refcode="Refcode" />
-        </span>
+    <div class="row">
+      <div class="col">
+        <div id="sample-information" class="form-row">
+          <div class="form-group col-md-4">
+            <label for="name" class="mr-2">Name</label>
+            <input id="name" class="form-control" v-model="Name" />
+          </div>
+          <div class="form-group col-md-4">
+            <label for="chemform" class="mr-2">Chemical formula</label>
+            <ChemFormulaInput id="chemform" v-model="ChemForm" />
+          </div>
+          <div class="form-group col-md-4">
+            <label for="date" class="mr-2">Date Created</label>
+            <input
+              type="datetime-local"
+              v-model="DateCreated"
+              class="form-control"
+              style="max-width: 250px"
+            />
+          </div>
+        </div>
+        <div class="form-row">
+          <div class="form-group col-md-2">
+            <label for="refcode" class="mr-2">Refcode</label>
+            <FormattedRefcode :refcode="Refcode" />
+          </div>
+          <div class="col-md-2 pb-3">
+            <label id="creators" class="mr-2">Creators</label>
+            <div class="mx-auto">
+              <Creators aria-labelledby="creators" :creators="ItemCreators" :size="36" />
+            </div>
+          </div>
+          <div class="form-group col-md-3">
+            <label id="collections" class="mr-2">Collections</label>
+            <div>
+              <CollectionList aria-labelledby="collections" :collections="Collections" />
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col">
+            <label id="description-label" class="mr-2">Description</label>
+            <TinyMceInline
+              aria-labelledby="description-label"
+              v-model="SampleDescription"
+            ></TinyMceInline>
+          </div>
+        </div>
       </div>
-      <div class="form-group col-md-2">
-        <label for="item_id" class="mr-2">Sample ID</label>
-        <input id="item_id" class="form-control-plaintext" readonly="true" v-model="ItemID" />
-      </div>
-      <div class="form-group col-md-4">
-        <label for="name" class="mr-2">Name</label>
-        <input id="name" class="form-control" v-model="Name" />
-      </div>
-      <div class="form-group col-md-3">
-        <label for="date" class="mr-2">Date Created</label>
-        <input type="datetime-local" v-model="DateCreated" class="form-control" />
-      </div>
-      <div class="col-md-1">
-        <label id="creators" class="mr-2">Creators</label>
-        <Creators aria-labelledby="creators" :creators="ItemCreators" :size="36" />
-      </div>
-    </div>
-    <div class="form-row">
-      <div class="form-group col-md-3">
-        <label id="collections" class="mr-2">Collections:</label>
-        <CollectionList aria-labelledby="collections" :collections="Collections" />
-      </div>
-    </div>
-    <div class="form-row">
-      <div class="form-group col-md-3">
-        <label for="chemform" class="mr-2">Chemical formula</label>
-        <ChemFormulaInput id="chemform" v-model="ChemForm" />
+      <div class="col-md-4">
+        <ItemRelationshipVisualization :item_id="item_id" />
       </div>
     </div>
-    <label id="description-label" class="mr-2">Description</label>
-    <TinyMceInline aria-labelledby="description-label" v-model="SampleDescription"></TinyMceInline>
-
-    <RelationshipVisualization :item_id="item_id" />
 
     <TableOfContents :item_id="item_id" :informationSections="tableOfContentsSections" />
 
@@ -56,7 +69,7 @@ import CollectionList from "@/components/CollectionList";
 import TinyMceInline from "@/components/TinyMceInline";
 import SynthesisInformation from "@/components/SynthesisInformation";
 import TableOfContents from "@/components/TableOfContents";
-import RelationshipVisualization from "@/components/RelationshipVisualization";
+import ItemRelationshipVisualization from "@/components/ItemRelationshipVisualization";
 import Creators from "@/components/Creators";
 
 export default {
@@ -88,7 +101,7 @@ export default {
     TinyMceInline,
     SynthesisInformation,
     TableOfContents,
-    RelationshipVisualization,
+    ItemRelationshipVisualization,
     FormattedRefcode,
     CollectionList,
     Creators,
diff --git a/webapp/src/components/StartingMaterialInformation.vue b/webapp/src/components/StartingMaterialInformation.vue
index 2ac676884..c6f82bbeb 100644
--- a/webapp/src/components/StartingMaterialInformation.vue
+++ b/webapp/src/components/StartingMaterialInformation.vue
@@ -2,6 +2,10 @@
   <div class="container">
     <!-- Sample information -->
     <div id="starting-material-information" class="form-row">
+      <div class="form-group col-md-2 col-sm-4">
+        <label for="item_id" class="mr-2">Refcode</label>
+        <div><FormattedRefcode :refcode="Refcode" /></div>
+      </div>
       <div class="form-group col-md-2 col-sm-4">
         <label for="item_id" class="mr-2">Barcode</label>
         <input id="item_id" class="form-control-plaintext" readonly="true" :value="item_id" />
@@ -30,13 +34,19 @@
       </div>
     </div>
     <div class="form-row">
-      <div class="form-group col-md-2">
+      <div class="form-group col-md-3">
+        <label id="collections" class="mr-2">Collections</label>
+        <div>
+          <CollectionList aria-labelledby="collections" :collections="Collections" />
+        </div>
+      </div>
+      <div class="form-group col-md-3">
         <label for="chemform" class="mr-2">Chemical formula</label>
         <span class="form-control-plaintext" readonly="true">
           <ChemicalFormula :formula="item.chemform" />
         </span>
       </div>
-      <div class="form-group col-md-4">
+      <div class="form-group col-md-3">
         <label for="supplier" class="mr-2">Supplier</label>
         <input
           id="supplier"
@@ -75,6 +85,8 @@ import { createComputedSetterForItemField } from "@/field_utils.js";
 import TinyMceInline from "@/components/TinyMceInline";
 import ChemicalFormula from "@/components/ChemicalFormula";
 import TableOfContents from "@/components/TableOfContents";
+import CollectionList from "@/components/CollectionList";
+import FormattedRefcode from "@/components/FormattedRefcode";
 
 export default {
   data() {
@@ -93,11 +105,15 @@ export default {
       return this.$store.state.all_item_data[this.item_id];
     },
     ItemDescription: createComputedSetterForItemField("description"),
+    Collections: createComputedSetterForItemField("collections"),
+    Refcode: createComputedSetterForItemField("refcode"),
   },
   components: {
     ChemicalFormula,
     TinyMceInline,
+    CollectionList,
     TableOfContents,
+    FormattedRefcode,
   },
 };
 </script>
diff --git a/webapp/src/views/CollectionPage.vue b/webapp/src/views/CollectionPage.vue
index 41fdabf50..8e0850755 100644
--- a/webapp/src/views/CollectionPage.vue
+++ b/webapp/src/views/CollectionPage.vue
@@ -6,7 +6,7 @@
   >
     <span class="navbar-brand" @click="scrollToID($event, 'topScrollPoint')"
       >{{ itemTypeEntry?.navbarName || "loading..." }}&nbsp;&nbsp;|&nbsp;&nbsp;
-      {{ collection_id }}
+      <FormattedCollectionName :collection_id="collection_id" />
     </span>
     <div class="navbar-nav">
       <a class="nav-item nav-link" href="/">Home</a>
@@ -39,6 +39,7 @@
 <script>
 import CollectionInformation from "@/components/CollectionInformation";
 import { getCollectionData, saveCollection } from "@/server_fetch_utils";
+import FormattedCollectionName from "@/components/FormattedCollectionName.vue";
 import tinymce from "tinymce/tinymce";
 import { itemTypes } from "@/resources.js";
 import { API_URL } from "@/resources.js";
@@ -94,6 +95,7 @@ export default {
   },
   components: {
     CollectionInformation,
+    FormattedCollectionName,
   },
   beforeMount() {
     this.collectionApiUrl = API_URL + "/collections/" + this.collection_id;
diff --git a/webapp/src/views/EditPage.vue b/webapp/src/views/EditPage.vue
index fcbc2ff79..c02b4fc43 100644
--- a/webapp/src/views/EditPage.vue
+++ b/webapp/src/views/EditPage.vue
@@ -6,7 +6,7 @@
   >
     <span class="navbar-brand" @click="scrollToID($event, 'topScrollPoint')"
       >{{ itemTypeEntry?.navbarName || "loading..." }}&nbsp;&nbsp;|&nbsp;&nbsp;
-      {{ item_id }}
+      <FormattedItemName :item_id="item_id" :itemType="itemType" />
     </span>
     <div class="navbar-nav">
       <a class="nav-item nav-link" href="/">Home</a>
@@ -46,7 +46,7 @@
       <span v-if="itemDataLoaded && !savedStatus" class="navbar-text unsaved-warning">
         Unsaved changes
       </span>
-      <span v-if="itemDataLoaded" class="navbar-text mx-2"
+      <span v-if="itemDataLoaded" class="navbar-text small mx-2"
         ><i>Last saved: {{ lastModified }}</i></span
       >
       <font-awesome-icon
@@ -95,10 +95,10 @@
 import TinyMceInline from "@/components/TinyMceInline";
 import SelectableFileTree from "@/components/SelectableFileTree";
 
-import TableOfContents from "@/components/TableOfContents";
 import FileList from "@/components/FileList";
 import FileSelectModal from "@/components/FileSelectModal";
 import { getItemData, addABlock, saveItem, updateBlockFromServer } from "@/server_fetch_utils";
+import FormattedItemName from "@/components/FormattedItemName";
 
 import setupUppy from "@/file_upload.js";
 
@@ -189,12 +189,11 @@ export default {
     },
   },
   computed: {
+    itemType() {
+      return this.$store.state.all_item_data[this.item_id]?.type;
+    },
     itemTypeEntry() {
-      var type = this.$store.state.all_item_data[this.item_id]?.type; // will be null if data not loaded yet
-      if (type in itemTypes) {
-        return itemTypes[type];
-      }
-      return null;
+      return itemTypes[this.itemType] || null;
     },
     navbarColor() {
       return this.itemTypeEntry?.navbarColor || "DarkGrey";
@@ -240,8 +239,8 @@ export default {
     TinyMceInline,
     SelectableFileTree,
     FileList,
-    TableOfContents,
     FileSelectModal,
+    FormattedItemName,
   },
   beforeMount() {
     this.blockTypes = blockTypes; // bind blockTypes as a NON-REACTIVE object to the this context so that it is accessible by the template.