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

@@ -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

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();

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.");

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,

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>

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 },

webapp/src/components/ItemGraph.vue

@@ -181,4 +181,10 @@ export default {
 #flex-container {
   flex-flow: column;
 }
+
+#cy {
+  width: 100%;
+  height: 800px;
+  /* display: block;*/
+}
 </style>

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>