Commit d9ae5e1c authored by Ahmed Awan's avatar Ahmed Awan
Browse files

use store to update `activeNodeId`, and scroll in parent component 



Co-authored-by: default avatarmvdbeek <m.vandenbeek@gmail.com>
parent 2fbfdd7b

client/src/components/Workflow/Invocation/Graph/InvocationGraph.vue

+0 −8
Original line number Diff line number Diff line
@@ -168,14 +168,6 @@ function stepClicked(nodeId: number | null) { 
        scrollStepToView();

    }

}



async function activateAndShowStep(nodeId: number) {

    activeNodeId.value = nodeId;

    await nextTick();

    scrollStepToView();

}



defineExpose({ activateAndShowStep });

</script>



<template>

client/src/components/WorkflowInvocationState/InvocationMessage.vue

+2 −3
Original line number Diff line number Diff line
@@ -51,6 +51,7 @@ const levelClasses = { 
interface InvocationMessageProps {

    invocationMessage: InvocationMessage;

    invocation: WorkflowInvocationElementView;

    storeId: string;

}



const props = defineProps<InvocationMessageProps>();
@@ -104,9 +105,7 @@ const dependentInvocationStep = computed(() => { 
});



// This is used to indicate on the step cards whether the step is currently active in the invocation graph.\

const storeId = computed(() => `invocation-${props.invocation.id}`);

const stateStore = useWorkflowStateStore(storeId.value);

const { activeNodeId } = storeToRefs(stateStore);

const { activeNodeId } = storeToRefs(useWorkflowStateStore(props.storeId));



const jobId = computed(() => "job_id" in props.invocationMessage && props.invocationMessage.job_id);

const HdaId = computed(() => "hda_id" in props.invocationMessage && props.invocationMessage.hda_id);

client/src/components/WorkflowInvocationState/WorkflowInvocationOverview.vue

+13 −2
Original line number Diff line number Diff line 
<script setup lang="ts">

import { BAlert } from "bootstrap-vue";

import { computed, ref } from "vue";

import { storeToRefs } from "pinia";

import { computed, nextTick, ref } from "vue";



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

import { useWorkflowInstance } from "@/composables/useWorkflowInstance";

import { useWorkflowStateStore } from "@/stores/workflowEditorStateStore";

import { withPrefix } from "@/utils/redirect";



import ExternalLink from "../ExternalLink.vue";
@@ -31,9 +33,17 @@ const uniqueMessages = computed(() => { 
    return Array.from(uniqueMessagesSet).map((message) => JSON.parse(message)) as typeof messages;

});



// TODO: Refactor so that `storeId` is only defined here, and then used in all children components/composables.

const storeId = computed(() => `invocation-${props.invocation.id}`);

const stateStore = useWorkflowStateStore(storeId.value);

const { activeNodeId } = storeToRefs(stateStore);



async function showStep(stepId: number) {

    if (invocationGraph.value) {

        await invocationGraph.value.activateAndShowStep(stepId);

        activeNodeId.value = stepId;

        await nextTick();

        const graphSelector = invocationGraph.value?.$el?.querySelector(".invocation-graph");

        graphSelector?.scrollIntoView({ behavior: "smooth", block: "start" });

    }

}

</script>
@@ -53,6 +63,7 @@ async function showStep(stepId: number) { 
                class="steps-progress my-1 w-100"

                :invocation-message="message"

                :invocation="invocation"

                :store-id="storeId"

                @view-step="showStep">

            </InvocationMessage>

        </div>