Merge branch 'main' into bc/eln-button

Author: BenjaminCharmes

webapp/src/components/CollectionRelationshipVisualization.vue

@@ -1,6 +1,23 @@
 <template>
   <label class="mr-2">Relationships</label>
-  <div>
+  <div style="position: relative">
+    <div
+      v-if="isLoading"
+      class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center"
+      style="background-color: rgba(255, 255, 255, 0.7); z-index: 100"
+    >
+      <div class="card p-3 shadow-sm">
+        <div class="text-center">
+          <font-awesome-icon
+            :icon="['fa', 'sync']"
+            class="fa-2x text-primary mb-2"
+            :spin="true"
+            aria-label="loading"
+          />
+          <p class="mb-0 fw-medium">Loading graph...</p>
+        </div>
+      </div>
+    </div>
     <ItemGraph
       :graph-data="graphData"
       style="height: 200px; width: 100%; border: 1px solid transparent; border-radius: 5px"
@@ -29,9 +46,12 @@ export default {
     graphData() {
       return this.$store.state.itemGraphData;
     },
+    isLoading() {
+      return this.$store.state.itemGraphIsLoading;
+    },
   },
-  async mounted() {
-    await getItemGraph({ item_id: null, collection_id: this.collection_id });
+  mounted() {
+    getItemGraph({ item_id: null, collection_id: this.collection_id });
   },
 };
 </script>

webapp/src/components/ItemRelationshipVisualization.vue

@@ -1,6 +1,23 @@
 <template>
   <label class="pr-2"><font-awesome-icon icon="project-diagram" /> Relationships</label>
-  <div>
+  <div style="position: relative">
+    <div
+      v-if="isLoading"
+      class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center"
+      style="background-color: rgba(255, 255, 255, 0.7); z-index: 100"
+    >
+      <div class="card p-3 shadow-sm">
+        <div class="text-center">
+          <font-awesome-icon
+            :icon="['fa', 'sync']"
+            class="fa-2x text-primary mb-2"
+            :spin="true"
+            aria-label="loading"
+          />
+          <p class="mb-0 fw-medium">Loading graph...</p>
+        </div>
+      </div>
+    </div>
     <ItemGraph
       :graph-data="graphData"
       style="height: 200px; width: 100%; border: 1px solid transparent; border-radius: 5px"
@@ -26,9 +43,12 @@ export default {
     graphData() {
       return this.$store.state.itemGraphData;
     },
+    isLoading() {
+      return this.$store.state.itemGraphIsLoading;
+    },
   },
-  async mounted() {
-    await getItemGraph({ item_id: this.item_id });
+  mounted() {
+    getItemGraph({ item_id: this.item_id });
   },
 };
 </script>

webapp/src/components/RelationshipVisualization.vue

@@ -47,7 +47,24 @@
           <span class="contents-blocktitle" @click="openEditPageInNewTab(child)">{{ child }}</span>
         </li>
       </ul>
-      <div v-show="activeTab == 'graph'">
+      <div v-show="activeTab == 'graph'" style="position: relative">
+        <div
+          v-if="isLoading"
+          class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center"
+          style="background-color: rgba(255, 255, 255, 0.7); z-index: 100"
+        >
+          <div class="card p-3 shadow-sm">
+            <div class="text-center">
+              <font-awesome-icon
+                :icon="['fa', 'sync']"
+                class="fa-2x text-primary mb-2"
+                :spin="true"
+                aria-label="loading"
+              />
+              <p class="mb-0 fw-medium">Loading graph...</p>
+            </div>
+          </div>
+        </div>
         <ItemGraph :graph-data="graphData" style="height: 400px" />
       </div>
       <!--       <div class="alert alert-info" role="alert" v-show="activeTab == 'graph'">
@@ -85,9 +102,12 @@ export default {
     graphData() {
       return this.$store.state.itemGraphData;
     },
+    isLoading() {
+      return this.$store.state.itemGraphIsLoading;
+    },
   },
-  async mounted() {
-    await getItemGraph({ item_id: this.item_id });
+  mounted() {
+    getItemGraph({ item_id: this.item_id });
   },
   methods: {
     openEditPageInNewTab(item_id) {

webapp/src/server_fetch_utils.js

@@ -784,12 +784,15 @@ export async function getItemGraph({ item_id = null, collection_id = null } = {}
   if (collection_id != null) {
     url = url + "?collection_id=" + collection_id;
   }
+  store.commit("setItemGraphIsLoading", true);
   return fetch_get(url)
     .then(function (response_json) {
       store.commit("setItemGraph", { nodes: response_json.nodes, edges: response_json.edges });
+      store.commit("setItemGraphIsLoading", false);
       return response_json;
     })
     .catch((error) => {
+      store.commit("setItemGraphIsLoading", false);
       DialogService.error({
         title: "Graph Retrieval Failed",
         message: `Error retrieving item graph from API: ${error}`,

webapp/src/store/index.js

@@ -24,6 +24,7 @@ export default createStore({
     remoteDirectoryTree: {},
     remoteDirectoryTreeSecondsSinceLastUpdate: null,
     itemGraphData: null,
+    itemGraphIsLoading: false,
     remoteDirectoryTreeIsLoading: false,
     fileSelectModalIsOpen: false,
     currentUserDisplayName: null,
@@ -336,6 +337,9 @@ export default createStore({
     setItemGraph(state, payload) {
       state.itemGraphData = payload;
     },
+    setItemGraphIsLoading(state, isLoading) {
+      state.itemGraphIsLoading = isLoading;
+    },
     setBlocksInfos(state, blocksInfos) {
       blocksInfos.forEach((info) => {
         state.blocksInfos[info.id] = info;

webapp/src/views/ItemGraphPage.vue

@@ -1,6 +1,25 @@
 <template>
   <Navbar />
-  <ItemGraph :graph-data="graphData" />
+  <div style="position: relative; min-height: 400px">
+    <div
+      v-if="isLoading"
+      class="position-absolute w-100 h-100 top-0 start-0 d-flex justify-content-center align-items-center"
+      style="background-color: rgba(255, 255, 255, 0.7); z-index: 100"
+    >
+      <div class="card p-3 shadow-sm">
+        <div class="text-center">
+          <font-awesome-icon
+            :icon="['fa', 'sync']"
+            class="fa-2x text-primary mb-2"
+            :spin="true"
+            aria-label="loading"
+          />
+          <p class="mb-0 fw-medium">Loading graph...</p>
+        </div>
+      </div>
+    </div>
+    <ItemGraph :graph-data="graphData" />
+  </div>
 </template>
 
 <script>
@@ -22,9 +41,12 @@ export default {
     graphData() {
       return this.$store.state.itemGraphData;
     },
+    isLoading() {
+      return this.$store.state.itemGraphIsLoading;
+    },
   },
-  async mounted() {
-    await getItemGraph();
+  mounted() {
+    getItemGraph();
   },
 };
 </script>