Rework sample UI around new collections graph

datalab-org · Jul 27, 2023 · 4d569b1 · 4d569b1
1 parent d99a67c
commit 4d569b1
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 48 deletions.
diff --git a/webapp/src/components/ItemRelationshipVisualization.vue 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
@@ -1,46 +1,61 @@
 <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>
+            <span class="form-control-plaintext formatted-refcode">
+              <FormattedRefcode :refcode="Refcode" />
+            </span>
+          </div>
+          <div class="col-md-2 pb-3">
+            <label id="creators" class="mr-2">Creators</label>
+            <div>
+              <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-3">
+        <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 +71,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 +103,7 @@ export default {
     TinyMceInline,
     SynthesisInformation,
     TableOfContents,
-    RelationshipVisualization,
+    ItemRelationshipVisualization,
     FormattedRefcode,
     CollectionList,
     Creators,

diff --git 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>
@@ -71,6 +71,7 @@
 <script>
 import CollectionInformation from "@/components/CollectionInformation";
 import { getCollectionData, saveCollection, addACollectionBlock } from "@/server_fetch_utils";
+import FormattedCollectionName from "@/components/FormattedCollectionName.vue";
 import tinymce from "tinymce/tinymce";
 import { blockTypes, itemTypes } from "@/resources.js";
 import { API_URL } from "@/resources.js";
@@ -140,6 +141,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
@@ -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>
@@ -95,11 +95,11 @@
 import TinyMceInline from "@/components/TinyMceInline";
 import SelectableFileTree from "@/components/SelectableFileTree";
 
-import TableOfContents from "@/components/TableOfContents";
 import FileList from "@/components/FileList";
 import Modal from "@/components/Modal";
 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";
@@ -246,8 +245,8 @@ export default {
     Modal,
     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.