Unverified Commit cfb2f752 authored by Marius van den Beek's avatar Marius van den Beek Committed by GitHub
Browse files

Merge pull request #20870 from ahmedhamidawan/make_invocation_tabs_lazy 

[25.0] Improve dataset collection fetch performance in the invocation view
parents 05ea925a ddaa437a

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

+15 −2
Original line number Diff line number Diff line 
<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/WorkflowInvocationState/WorkflowInvocationInputOutputTabs.test.ts

+1 −0
Original line number Diff line number Diff line
@@ -95,6 +95,7 @@ async function mountWorkflowInvocationInputOutputTabs(invocation: WorkflowInvoca 
        propsData: {

            invocation,

            terminal,

            tabsNotLazy: true,

        },

        stubs: {

            ContentItem: true,

client/src/components/WorkflowInvocationState/WorkflowInvocationInputOutputTabs.vue

+3 −2
Original line number Diff line number Diff line
@@ -19,6 +19,7 @@ const OUTPUTS_NOT_AVAILABLE_YET_MSG = 
const props = defineProps<{

    invocation: WorkflowInvocationElementView;

    terminal?: boolean;

    tabsNotLazy?: boolean;

}>();



// Fetching full workflow to get the workflow output labels (for when invocation is not terminal)
@@ -64,13 +65,13 @@ const parameters = computed(() => Object.values(props.invocation.input_step_para 
</script>

<template>

    <span>

        <BTab title="Inputs">

        <BTab title="Inputs" :lazy="!props.tabsNotLazy">

            <div v-if="parameters.length || inputData.length">

                <WorkflowInvocationInputs :invocation="props.invocation" />

            </div>

            <BAlert v-else show variant="info"> No input data was provided for this workflow invocation. </BAlert>

        </BTab>

        <BTab title="Outputs">

        <BTab title="Outputs" :lazy="!props.tabsNotLazy">

            <div v-if="outputs.length">

                <div

                    v-for="([key, output], index) in outputs"

client/src/components/providers/DatasetCollectionProvider.js

+7 −2
Original line number Diff line number Diff line 
import { SingleQueryProvider } from "components/providers/SingleQueryProvider";



import { fetchCollectionDetails } from "@/api/datasetCollections";

import { fetchCollectionDetails, fetchCollectionSummary } 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) => {

        if (params.view && params.view === "collection") {

            return fetchCollectionSummary({ hdca_id: params.id });

        }

        return fetchCollectionDetails({ hdca_id: params.id });

    },

    (result) => result.populated_state === "ok"

);

client/src/composables/useInvocationGraph.ts

+2 −2
Original line number Diff line number Diff line
@@ -12,7 +12,7 @@ import { storeToRefs } from "pinia"; 
import { computed, type Ref, ref, set } from "vue";



import { GalaxyApi } from "@/api";

import { fetchCollectionDetails } from "@/api/datasetCollections";

import { fetchCollectionSummary } from "@/api/datasetCollections";

import { fetchDatasetDetails } from "@/api/datasets";

import type { InvocationStep, StepJobSummary, WorkflowInvocationElementView } from "@/api/invocations";

import type { StoredWorkflowDetailed } from "@/api/workflows";
@@ -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 fetchCollectionSummary({ hdca_id: inputItem.id });

                // TODO: Same type mismatch as above

                set(graphStep, "state", getContentItemState(hdca));

                set(graphStep, "nodeText", `${hdca.hid}: <b>${hdca.name}</b>`);