fetch "collection" view for HDCAs in GenericItem and useInvocationGraph

For the generic content items (used outside of the history panel), there is no need to fetch the entire "element" view when displaying the content item unexpanded. Therefore, I have made the default view "collection", until you click to expand an HDCA which is when the `DatasetCollectionProvider` is remounted to fetch the "element" (detailed) view for the HDCA.

Author: ahmedhamidawan

client/src/api/datasetCollections.ts

@@ -18,9 +18,12 @@ export type CollectionType = string;
  * Fetches the details of a collection.
  * @param params.id The ID of the collection (HDCA) to fetch.
  */
-export async function fetchCollectionDetails(params: { hdca_id: string }): Promise<HDCADetailed> {
+export async function fetchCollectionDetails(
+    params: { hdca_id: string },
+    query?: { view?: string }
+): Promise<HDCADetailed> {
     const { data, error } = await GalaxyApi().GET("/api/dataset_collections/{hdca_id}", {
-        params: { path: params },
+        params: { path: params, query: query },
     });
 
     if (error) {

client/src/components/History/Content/GenericItem.vue

@@ -1,5 +1,11 @@
 <template>
-    <component :is="providerComponent" :id="itemId" v-slot="{ result: item, loading }" auto-refresh>
+    <component
+        :is="providerComponent"
+        :id="itemId"
+        :key="view"
+        v-slot="{ result: item, loading }"
+        :view="view"
+        auto-refresh>
         <LoadingSpan v-if="loading" message="Loading dataset" />
         <div v-else>
             <ContentItem
@@ -11,7 +17,7 @@
                 :expand-dataset="expandDataset"
                 :is-dataset="item.history_content_type == 'dataset' || item.element_type == 'hda'"
                 @update:expand-dataset="expandDataset = $event"
-                @view-collection="viewCollection = !viewCollection"
+                @view-collection="onViewCollection"
                 @delete="onDelete"
                 @toggleHighlights="onHighlight(item)"
                 @undelete="onUndelete(item)"
@@ -60,6 +66,7 @@ export default {
         return {
             viewCollection: false,
             expandDataset: false,
+            view: this.itemSrc === "hdca" ? "collection" : "element",
         };
     },
     computed: {
@@ -124,6 +131,12 @@ export default {
                 this.onError(error, "Failed to highlight related items");
             }
         },
+        onViewCollection(collection) {
+            if (this.view === "collection" && collection.model_class === "HistoryDatasetCollectionAssociation") {
+                this.view = "element";
+            }
+            this.viewCollection = !this.viewCollection;
+        },
     },
 };
 </script>

client/src/components/providers/DatasetCollectionProvider.js

@@ -5,6 +5,6 @@ import { fetchCollectionDetails } from "@/api/datasetCollections";
 // There isn't really a good way to know when to stop polling for HDCA updates,
 // but we know the populated_state should at least be ok.
 export default SingleQueryProvider(
-    (params) => fetchCollectionDetails({ hdca_id: params.id }),
+    (params) => fetchCollectionDetails({ hdca_id: params.id }, params.view ? { view: params.view } : undefined),
     (result) => result.populated_state === "ok"
 );

client/src/composables/useInvocationGraph.ts

@@ -334,7 +334,7 @@ export function useInvocationGraph(
                 set(graphStep, "state", getContentItemState(hda));
                 set(graphStep, "nodeText", `${hda.hid}: <b>${hda.name}</b>`);
             } else {
-                const hdca = await fetchCollectionDetails({ hdca_id: inputItem.id });
+                const hdca = await fetchCollectionDetails({ hdca_id: inputItem.id }, { view: "collection" });
                 // TODO: Same type mismatch as above
                 set(graphStep, "state", getContentItemState(hdca));
                 set(graphStep, "nodeText", `${hdca.hid}: <b>${hdca.name}</b>`);