From c031e0c8ccfabb54e7219a243c526e0df2827369 Mon Sep 17 00:00:00 2001
From: jdbocarsly <jdbocarsly@gmail.com>
Date: Wed, 17 Jul 2024 23:08:36 -0500
Subject: [PATCH 1/9] fix issue that sometimes crashes the graphs route

---
 pydatalab/pydatalab/routes/v0_1/graphs.py | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/pydatalab/pydatalab/routes/v0_1/graphs.py b/pydatalab/pydatalab/routes/v0_1/graphs.py
index 319f3a368..82c3d122c 100644
--- a/pydatalab/pydatalab/routes/v0_1/graphs.py
+++ b/pydatalab/pydatalab/routes/v0_1/graphs.py
@@ -72,7 +72,9 @@ def get_graph_cy_format(item_id: Optional[str] = None, collection_id: Optional[s
     drawn_elements = set()
     node_collections = set()
     for document in all_documents:
-        for relationship in document.get("relationships", []):
+        # for some reason, document["relationships"] is sometimes equal to None, so we
+        # need this `or` statement.
+        for relationship in document.get("relationships") or []:
             # only considering child-parent relationships
             if relationship.get("type") == "collections" and not collection_id:
                 collection_data = flask_mongo.db.collections.find_one(
@@ -113,7 +115,7 @@ def get_graph_cy_format(item_id: Optional[str] = None, collection_id: Optional[s
                     )
                 continue
 
-        for relationship in document.get("relationships", []):
+        for relationship in document.get("relationships") or []:
             # only considering child-parent relationships:
             if relationship.get("relation") not in ("parent", "is_part_of"):
                 continue

From a7086e1f402ff6be1cdfefe5943f5215a0fb5898 Mon Sep 17 00:00:00 2001
From: jdbocarsly <jdbocarsly@gmail.com>
Date: Wed, 17 Jul 2024 23:09:18 -0500
Subject: [PATCH 2/9] fix modelValue prop type in ItemSelect

---
 webapp/src/components/ItemSelect.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/components/ItemSelect.vue b/webapp/src/components/ItemSelect.vue
index bb273eb76..5ebe6303d 100644
--- a/webapp/src/components/ItemSelect.vue
+++ b/webapp/src/components/ItemSelect.vue
@@ -52,7 +52,7 @@ export default {
   },
   props: {
     modelValue: {
-      type: String,
+      type: [String, Array], // Array only if "multiple" is specified
       default: "",
     },
     formattedItemNameMaxLength: {

From c4899e20125381aad87faf4197e5d0ae252b6b93 Mon Sep 17 00:00:00 2001
From: jdbocarsly <jdbocarsly@gmail.com>
Date: Wed, 17 Jul 2024 23:12:31 -0500
Subject: [PATCH 3/9] add ability to select items to exclude from showing edges
 in the itemGraph

---
 webapp/src/components/ItemGraph.vue | 100 ++++++++++++++++++++--------
 1 file changed, 72 insertions(+), 28 deletions(-)

diff --git a/webapp/src/components/ItemGraph.vue b/webapp/src/components/ItemGraph.vue
index c9c2f0e42..d9f49c228 100644
--- a/webapp/src/components/ItemGraph.vue
+++ b/webapp/src/components/ItemGraph.vue
@@ -1,37 +1,53 @@
 <template>
-  <div v-if="showOptions" class="dflex text-right">
-    <div class="btn-group mr-2" role="group">
-      <button
-        :class="graphStyle == 'elk-stress' ? 'btn btn-default active' : 'btn btn-default'"
-        @click="graphStyle = 'elk-stress'"
-      >
-        stress
-      </button>
-      <button
-        :class="graphStyle == 'cola' ? 'btn btn-default active' : 'btn btn-default'"
-        @click="graphStyle = 'cola'"
-      >
-        force
-      </button>
-      <button
-        :class="graphStyle == 'elk-layered-down' ? 'btn btn-default active' : 'btn btn-default'"
-        @click="graphStyle = 'elk-layered-down'"
-      >
-        horizontal
-      </button>
-      <button
-        :class="graphStyle == 'elk-layered-right' ? 'btn btn-default active' : 'btn btn-default'"
-        @click="graphStyle = 'elk-layered-right'"
-      >
-        vertical
-      </button>
+  <div v-if="showOptions">
+    <button
+      class="btn btn-default mr-5 mb-2 float-right configure-button"
+      @click="optionsDisplayed = !optionsDisplayed"
+    >
+      configure
+    </button>
+    <div
+      v-show="optionsDisplayed"
+      class="card card-body col-lg-4 col-md-5 col-sm-6"
+      style="float: right !important"
+    >
+      <label for="graph-style">Graph layout:</label>
+      <div id="graph-style" class="btn-group mr-2" role="group">
+        <button
+          :class="graphStyle == 'elk-stress' ? 'btn btn-default active' : 'btn btn-default'"
+          @click="graphStyle = 'elk-stress'"
+        >
+          stress
+        </button>
+        <button
+          :class="graphStyle == 'cola' ? 'btn btn-default active' : 'btn btn-default'"
+          @click="graphStyle = 'cola'"
+        >
+          force
+        </button>
+        <button
+          :class="graphStyle == 'elk-layered-down' ? 'btn btn-default active' : 'btn btn-default'"
+          @click="graphStyle = 'elk-layered-down'"
+        >
+          horizontal
+        </button>
+        <button
+          :class="graphStyle == 'elk-layered-right' ? 'btn btn-default active' : 'btn btn-default'"
+          @click="graphStyle = 'elk-layered-right'"
+        >
+          vertical
+        </button>
+      </div>
+
+      <label for="ignore-items">Ignore connections to items:</label>
+      <ItemSelect id="ignore-items" v-model="ignoreItems" multiple />
     </div>
   </div>
   <div id="cy" v-bind="$attrs" />
 </template>
 
 <script>
-// import { getItemGraph } from "@/server_fetch_utils.js";
+import ItemSelect from "@/components/ItemSelect.vue";
 import { itemTypes } from "@/resources.js";
 import cytoscape from "cytoscape";
 import dagre from "cytoscape-dagre";
@@ -70,6 +86,10 @@ const layoutOptions = {
 };
 
 export default {
+  name: "ItemGraph",
+  components: {
+    ItemSelect,
+  },
   props: {
     graphData: {
       type: Object,
@@ -87,8 +107,24 @@ export default {
   data() {
     return {
       graphStyle: this.defaultGraphStyle,
+      optionsDisplayed: false,
+      ignoreItems: [],
     };
   },
+  computed: {
+    filteredGraphData() {
+      const ignoredItemIds = this.ignoreItems.map((d) => d.item_id);
+      return {
+        edges: this.graphData.edges.filter(
+          (edge) =>
+            !(
+              ignoredItemIds.includes(edge.data.source) || ignoredItemIds.includes(edge.data.target)
+            ),
+        ),
+        nodes: this.graphData.nodes,
+      };
+    },
+  },
   watch: {
     graphData() {
       this.generateCyNetworkPlot();
@@ -97,6 +133,9 @@ export default {
       console.log("graphStyle changed");
       this.generateCyNetworkPlot();
     },
+    ignoreItems() {
+      this.generateCyNetworkPlot();
+    },
   },
   async mounted() {
     this.generateCyNetworkPlot();
@@ -108,7 +147,7 @@ export default {
       }
       var cy = cytoscape({
         container: document.getElementById("cy"),
-        elements: this.graphData,
+        elements: this.filteredGraphData,
         userPanningEnabled: true,
         minZoom: 0.5,
         maxZoom: 1,
@@ -181,6 +220,11 @@ export default {
 </script>
 
 <style>
+.configure-button {
+  position: relative;
+  z-index: 99;
+}
+
 #flex-container {
   flex-flow: column;
 }

From 1df3a74cbcbf5519a7133abd8074dd76bdc1b9ac Mon Sep 17 00:00:00 2001
From: jdbocarsly <jdbocarsly@gmail.com>
Date: Wed, 17 Jul 2024 23:15:29 -0500
Subject: [PATCH 4/9] revert prettier to warnings in eslint to allow the app to
 run without autoformatting

---
 webapp/.eslintrc.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/.eslintrc.js b/webapp/.eslintrc.js
index 17f2bd6a6..0942f3971 100644
--- a/webapp/.eslintrc.js
+++ b/webapp/.eslintrc.js
@@ -30,6 +30,6 @@ module.exports = {
     "cypress/no-assigning-return-values": "warn",
     "cypress/no-unnecessary-waiting": "warn",
     "cypress/unsafe-to-chain-command": "warn",
-    "prettier/prettier": "error",
+    "prettier/prettier": "warn",
   },
 };

From 0e640dd3d74bfeb2b393233fdd4021089ed5e8ea Mon Sep 17 00:00:00 2001
From: jdbocarsly <jdbocarsly@gmail.com>
Date: Wed, 17 Jul 2024 23:29:45 -0500
Subject: [PATCH 5/9] add placeholder text to CollectionSelect

---
 webapp/src/components/CollectionSelect.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/webapp/src/components/CollectionSelect.vue b/webapp/src/components/CollectionSelect.vue
index 2b5b9a318..81111c569 100644
--- a/webapp/src/components/CollectionSelect.vue
+++ b/webapp/src/components/CollectionSelect.vue
@@ -6,6 +6,7 @@
     multiple
     label="collection_id"
     :filterable="false"
+    placeholder="type to search..."
     @search="debouncedAsyncSearch"
   >
     <template #no-options="{ searching }">

From 787ef65206fdfa6811b226fe7b4646ffac03c50f Mon Sep 17 00:00:00 2001
From: jdbocarsly <jdbocarsly@gmail.com>
Date: Wed, 17 Jul 2024 23:30:28 -0500
Subject: [PATCH 6/9] add ability to remove connections to collections in graph

---
 webapp/src/components/ItemGraph.vue | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/webapp/src/components/ItemGraph.vue b/webapp/src/components/ItemGraph.vue
index d9f49c228..3422975be 100644
--- a/webapp/src/components/ItemGraph.vue
+++ b/webapp/src/components/ItemGraph.vue
@@ -41,6 +41,9 @@
 
       <label for="ignore-items">Ignore connections to items:</label>
       <ItemSelect id="ignore-items" v-model="ignoreItems" multiple />
+
+      <label for="ignore-collections">Ignore connections to collections:</label>
+      <CollectionSelect id="ignore-collections" v-model="ignoreCollections" multiple />
     </div>
   </div>
   <div id="cy" v-bind="$attrs" />
@@ -48,6 +51,7 @@
 
 <script>
 import ItemSelect from "@/components/ItemSelect.vue";
+import CollectionSelect from "@/components/CollectionSelect.vue";
 import { itemTypes } from "@/resources.js";
 import cytoscape from "cytoscape";
 import dagre from "cytoscape-dagre";
@@ -89,6 +93,7 @@ export default {
   name: "ItemGraph",
   components: {
     ItemSelect,
+    CollectionSelect,
   },
   props: {
     graphData: {
@@ -109,16 +114,22 @@ export default {
       graphStyle: this.defaultGraphStyle,
       optionsDisplayed: false,
       ignoreItems: [],
+      ignoreCollections: [],
     };
   },
   computed: {
     filteredGraphData() {
       const ignoredItemIds = this.ignoreItems.map((d) => d.item_id);
+      const ignoredCollectionIds = this.ignoreCollections.map(
+        (d) => `Collection: ${d.collection_id}`,
+      );
       return {
         edges: this.graphData.edges.filter(
           (edge) =>
             !(
-              ignoredItemIds.includes(edge.data.source) || ignoredItemIds.includes(edge.data.target)
+              ignoredItemIds.includes(edge.data.source) ||
+              ignoredItemIds.includes(edge.data.target) ||
+              ignoredCollectionIds.includes(edge.data.source)
             ),
         ),
         nodes: this.graphData.nodes,
@@ -136,6 +147,9 @@ export default {
     ignoreItems() {
       this.generateCyNetworkPlot();
     },
+    ignoreCollections() {
+      this.generateCyNetworkPlot();
+    },
   },
   async mounted() {
     this.generateCyNetworkPlot();

From c1b67a0711af23658ecb6ecc48904a12c39809d3 Mon Sep 17 00:00:00 2001
From: jdbocarsly <jdbocarsly@gmail.com>
Date: Wed, 17 Jul 2024 23:47:57 -0500
Subject: [PATCH 7/9] fix default v-model type for CollectionSelect.vue

---
 webapp/src/components/CollectionSelect.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/CollectionSelect.vue b/webapp/src/components/CollectionSelect.vue
index 81111c569..4b1e2fd51 100644
--- a/webapp/src/components/CollectionSelect.vue
+++ b/webapp/src/components/CollectionSelect.vue
@@ -44,8 +44,8 @@ export default {
   },
   props: {
     modelValue: {
-      type: String,
-      default: "",
+      type: Array,
+      default: () => [],
     },
     formattedItemNameMaxLength: {
       type: Number,

From e92074495a402810b7c460af89e3ed2d854eb5f7 Mon Sep 17 00:00:00 2001
From: jdbocarsly <jdbocarsly@gmail.com>
Date: Wed, 17 Jul 2024 23:48:49 -0500
Subject: [PATCH 8/9] add option to label starting materials by name instead of
 id (on by default)

---
 webapp/src/components/ItemGraph.vue | 29 +++++++++++++++++++++++++----
 1 file changed, 25 insertions(+), 4 deletions(-)

diff --git a/webapp/src/components/ItemGraph.vue b/webapp/src/components/ItemGraph.vue
index 3422975be..6ec317569 100644
--- a/webapp/src/components/ItemGraph.vue
+++ b/webapp/src/components/ItemGraph.vue
@@ -44,6 +44,18 @@
 
       <label for="ignore-collections">Ignore connections to collections:</label>
       <CollectionSelect id="ignore-collections" v-model="ignoreCollections" multiple />
+
+      <div class="form-group form-check mt-3 checkbox-group">
+        <input
+          id="label-starting-materials-by-name"
+          v-model="labelStartingMaterialsByName"
+          class="form-check-input"
+          type="checkbox"
+        />
+        <label class="form-check-label" for="label-starting-materials-by-name">
+          label starting materials by name</label
+        >
+      </div>
     </div>
   </div>
   <div id="cy" v-bind="$attrs" />
@@ -115,6 +127,7 @@ export default {
       optionsDisplayed: false,
       ignoreItems: [],
       ignoreCollections: [],
+      labelStartingMaterialsByName: true,
     };
   },
   computed: {
@@ -150,8 +163,11 @@ export default {
     ignoreCollections() {
       this.generateCyNetworkPlot();
     },
+    labelStartingMaterialsByName() {
+      this.generateCyNetworkPlot();
+    },
   },
-  async mounted() {
+  async created() {
     this.generateCyNetworkPlot();
   },
   methods: {
@@ -173,11 +189,15 @@ export default {
           {
             selector: "node",
             style: {
-              "background-color": "#11479e",
               label: "data(id)",
             },
           },
-
+          {
+            selector: 'node[type = "starting_materials"]',
+            style: {
+              label: this.labelStartingMaterialsByName ? "data(name)" : "data(id)",
+            },
+          },
           {
             selector: "edge",
             style: {
@@ -234,7 +254,8 @@ export default {
 </script>
 
 <style>
-.configure-button {
+.configure-button,
+.checkbox-group {
   position: relative;
   z-index: 99;
 }

From 50fc5a10d70c8a9e0a1e3e475437e3c8b4af16f7 Mon Sep 17 00:00:00 2001
From: jdbocarsly <jdbocarsly@gmail.com>
Date: Thu, 25 Jul 2024 10:28:14 -0400
Subject: [PATCH 9/9] improve html/css positioning of configuration menu

---
 webapp/src/components/ItemGraph.vue | 28 ++++++++++------------------
 1 file changed, 10 insertions(+), 18 deletions(-)

diff --git a/webapp/src/components/ItemGraph.vue b/webapp/src/components/ItemGraph.vue
index 6ec317569..54ea55f24 100644
--- a/webapp/src/components/ItemGraph.vue
+++ b/webapp/src/components/ItemGraph.vue
@@ -1,16 +1,12 @@
 <template>
-  <div v-if="showOptions">
+  <div v-if="showOptions" class="options">
     <button
-      class="btn btn-default mr-5 mb-2 float-right configure-button"
+      class="btn btn-default mr-5 mb-2 dropdown-toggle"
       @click="optionsDisplayed = !optionsDisplayed"
     >
       configure
     </button>
-    <div
-      v-show="optionsDisplayed"
-      class="card card-body col-lg-4 col-md-5 col-sm-6"
-      style="float: right !important"
-    >
+    <div v-show="optionsDisplayed" class="card card-body dropdown-menu">
       <label for="graph-style">Graph layout:</label>
       <div id="graph-style" class="btn-group mr-2" role="group">
         <button
@@ -45,7 +41,7 @@
       <label for="ignore-collections">Ignore connections to collections:</label>
       <CollectionSelect id="ignore-collections" v-model="ignoreCollections" multiple />
 
-      <div class="form-group form-check mt-3 checkbox-group">
+      <div class="form-group form-check mt-3">
         <input
           id="label-starting-materials-by-name"
           v-model="labelStartingMaterialsByName"
@@ -253,20 +249,16 @@ export default {
 };
 </script>
 
-<style>
-.configure-button,
-.checkbox-group {
-  position: relative;
-  z-index: 99;
-}
-
-#flex-container {
-  flex-flow: column;
+<style scoped>
+.options {
+  position: absolute;
+  z-index: 10;
+  right: 2rem;
 }
 
 #cy {
   width: 100%;
-  height: 800px;
+  height: 90vh;
   /* display: block;*/
 }
 </style>