From 7c1174caa5f94c0560c5052c905e23990a0a3f88 Mon Sep 17 00:00:00 2001 From: John Chilton Date: Mon, 5 Feb 2024 19:11:22 -0500 Subject: [PATCH] Fixes for mapping workflow labels to markdown selection. --- .../components/Markdown/MarkdownDialog.vue | 28 +++++++++-- .../components/Markdown/MarkdownToolBox.vue | 34 ++----------- client/src/components/Markdown/labels.ts | 48 +++++++++++++++++++ 3 files changed, 76 insertions(+), 34 deletions(-) create mode 100644 client/src/components/Markdown/labels.ts diff --git a/client/src/components/Markdown/MarkdownDialog.vue b/client/src/components/Markdown/MarkdownDialog.vue index 4076696f47ee..b95c8dd71f14 100644 --- a/client/src/components/Markdown/MarkdownDialog.vue +++ b/client/src/components/Markdown/MarkdownDialog.vue @@ -9,6 +9,8 @@ import { jobsFetcher } from "@/api/jobs"; import { workflowsFetcher } from "@/api/workflows"; import { useHistoryStore } from "@/stores/historyStore"; +import { WorkflowLabels } from "./labels"; + import MarkdownSelector from "./MarkdownSelector.vue"; import MarkdownVisualization from "./MarkdownVisualization.vue"; import DataDialog from "@/components/DataDialog/DataDialog.vue"; @@ -21,7 +23,7 @@ interface MarkdownDialogProps { argumentName?: string; argumentType?: string; argumentPayload?: object; - labels?: string[]; + labels?: WorkflowLabels; useLabels: boolean; } @@ -42,6 +44,22 @@ interface SelectTitles { type SelectType = "job_id" | "invocation_id" | "history_dataset_id" | "history_dataset_collection_id"; +const effectiveLabels = computed(() => { + if (!props.labels) { + return [] as string[]; + } + const selectSteps = props.argumentType == "job_id"; + const filteredLabels: string[] = []; + for (const label of props.labels) { + if (selectSteps && label.type == "step") { + filteredLabels.push(label.label); + } else if (!selectSteps && label.type != "step") { + filteredLabels.push(label.label); + } + } + return filteredLabels; +}); + const selectorConfig = { job_id: { labelTitle: "Step", @@ -50,10 +68,10 @@ const selectorConfig = { labelTitle: "Step", }, history_dataset_id: { - labelTitle: "Output", + labelTitle: "Dataset (Input/Output)", }, history_dataset_collection_id: { - labelTitle: "Output", + labelTitle: "Dataset Collection (Input/Output)", }, }; @@ -207,7 +225,7 @@ if (props.argumentType == "workflow_id") { v-if="selectedShow" :initial-value="argumentType" :argument-name="argumentName" - :labels="labels" + :labels="effectiveLabels" :label-title="selectedLabelTitle" @onOk="onOk" @onCancel="onCancel" /> @@ -215,7 +233,7 @@ if (props.argumentType == "workflow_id") { v-else-if="visualizationShow" :argument-name="argumentName" :argument-payload="argumentPayload" - :labels="labels" + :labels="effectiveLabels" :use-labels="useLabels" :history="currentHistoryId" @onOk="onVisualization" diff --git a/client/src/components/Markdown/MarkdownToolBox.vue b/client/src/components/Markdown/MarkdownToolBox.vue index c8f7341f6fed..02d6a513e3bc 100644 --- a/client/src/components/Markdown/MarkdownToolBox.vue +++ b/client/src/components/Markdown/MarkdownToolBox.vue @@ -33,7 +33,7 @@ :argument-type="selectedType" :argument-name="selectedArgumentName" :argument-payload="selectedPayload" - :labels="selectedLabels" + :labels="workflowLabels" :use-labels="isWorkflow" @onInsert="onInsert" @onCancel="onCancel" /> @@ -48,6 +48,7 @@ import { getAppRoot } from "onload/loadConfig"; import Vue from "vue"; import { directiveEntry } from "./directives.ts"; +import { fromSteps } from "./labels.ts"; import MarkdownDialog from "./MarkdownDialog"; Vue.use(BootstrapVue); @@ -105,7 +106,6 @@ export default { return { selectedArgumentName: null, selectedType: null, - selectedLabels: undefined, selectedShow: false, selectedPayload: null, visualizationIndex: {}, @@ -244,33 +244,14 @@ export default { ], }; }, + workflowLabels() { + return fromSteps(this.steps); + }, }, created() { this.getVisualizations(); }, methods: { - getSteps() { - const steps = []; - this.steps && - Object.values(this.steps).forEach((step) => { - if (step.label) { - steps.push(step.label); - } - }); - return steps; - }, - getOutputs() { - const outputLabels = []; - this.steps && - Object.values(this.steps).forEach((step) => { - step.workflow_outputs.forEach((workflowOutput) => { - if (workflowOutput.label) { - outputLabels.push(workflowOutput.label); - } - }); - }); - return outputLabels; - }, getArgumentTitle(argumentName) { return ( argumentName[0].toUpperCase() + @@ -320,7 +301,6 @@ export default { this.selectedArgumentName = argumentName; this.selectedType = "visualization_id"; this.selectedPayload = this.visualizationIndex[argumentName]; - this.selectedLabels = this.getOutputs(); this.selectedShow = true; }, onHistoryId(argumentName) { @@ -331,13 +311,11 @@ export default { onHistoryDatasetId(argumentName) { this.selectedArgumentName = argumentName; this.selectedType = "history_dataset_id"; - this.selectedLabels = this.getOutputs(); this.selectedShow = true; }, onHistoryCollectionId(argumentName) { this.selectedArgumentName = argumentName; this.selectedType = "history_dataset_collection_id"; - this.selectedLabels = this.getOutputs(); this.selectedShow = true; }, onWorkflowId(argumentName) { @@ -348,13 +326,11 @@ export default { onJobId(argumentName) { this.selectedArgumentName = argumentName; this.selectedType = "job_id"; - this.selectedLabels = this.getSteps(); this.selectedShow = true; }, onInvocationId(argumentName) { this.selectedArgumentName = argumentName; this.selectedType = "invocation_id"; - this.selectedLabels = this.getSteps(); this.selectedShow = true; }, async getVisualizations() { diff --git a/client/src/components/Markdown/labels.ts b/client/src/components/Markdown/labels.ts new file mode 100644 index 000000000000..2dd66112f3ef --- /dev/null +++ b/client/src/components/Markdown/labels.ts @@ -0,0 +1,48 @@ +// abstractions for dealing with workflows labels and +// connecting them to the Markdown editor + +type WorkflowLabelKind = "input" | "output" | "step"; + +interface WorkflowLabel { + label: string; + type: WorkflowLabelKind; +} + +interface StepOutput { + label?: string; +} + +interface Step { + label?: string; + type: string; + workflow_outputs: StepOutput[]; +} + +export type WorkflowLabels = WorkflowLabel[]; + +export function fromSteps(steps?: Step[]): WorkflowLabels { + const labels: WorkflowLabels = []; + + if (!steps) { + return labels; + } + + Object.values(steps).forEach((step) => { + const stepType = step.type; + if (step.label) { + const isInput = ["data_input", "data_collection_input", "parameter_input"].indexOf(stepType) >= 0; + if (isInput) { + labels.push({ type: "input", label: step.label }); + } else { + labels.push({ type: "step", label: step.label }); + } + } + step.workflow_outputs.forEach((workflowOutput) => { + if (workflowOutput.label) { + labels.push({ type: "output", label: workflowOutput.label }); + } + }); + }); + + return labels; +}