Skip to content

Commit

Permalink
Merge pull request #17424 from jmchilton/more_structured_dialogs
Browse files Browse the repository at this point in the history
Fixes for mapping workflow labels to markdown dialogs.
  • Loading branch information
jmchilton authored Mar 26, 2024
2 parents a78f39b + 3a38971 commit e933088
Show file tree
Hide file tree
Showing 5 changed files with 182 additions and 115 deletions.
45 changes: 45 additions & 0 deletions client/src/components/Markdown/LabelSelector.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<script setup lang="ts">
import { WorkflowLabel } from "./labels";
interface LabelSelectorProps {
hasLabels: boolean;
labels: WorkflowLabel[];
value?: WorkflowLabel;
labelTitle: string;
}
const props = withDefaults(defineProps<LabelSelectorProps>(), {
value: undefined,
});
const emit = defineEmits<{
(e: "input", value: WorkflowLabel | undefined): void;
}>();
function update(index: number) {
const label: WorkflowLabel | undefined = props.labels[index] || undefined;
emit("input", label);
}
</script>

<template>
<div>
<h2 class="mb-3 h-text">Select {{ labelTitle }} Label:</h2>
<div v-if="hasLabels">
<b-form-radio
v-for="(label, index) in labels"
:key="index"
class="my-2"
name="labels"
:value="index"
@change="update">
{{ label.label }}
</b-form-radio>
</div>
<b-alert v-else show variant="info"> No labels found. Please specify labels in the Workflow Editor. </b-alert>
<p class="mt-3 text-muted">
You may add new labels by selecting a step in the workflow editor and then editing the corresponding label
field in the step form.
</p>
</div>
</template>
48 changes: 37 additions & 11 deletions client/src/components/Markdown/MarkdownDialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { jobsFetcher } from "@/api/jobs";
import { workflowsFetcher } from "@/api/workflows";
import { useHistoryStore } from "@/stores/historyStore";
import { WorkflowLabel, WorkflowLabels } from "./labels";
import MarkdownSelector from "./MarkdownSelector.vue";
import MarkdownVisualization from "./MarkdownVisualization.vue";
import DataDialog from "@/components/DataDialog/DataDialog.vue";
Expand All @@ -21,7 +23,7 @@ interface MarkdownDialogProps {
argumentName?: string;
argumentType?: string;
argumentPayload?: object;
labels?: string[];
labels?: WorkflowLabels;
useLabels: boolean;
}
Expand All @@ -42,6 +44,22 @@ interface SelectTitles {
type SelectType = "job_id" | "invocation_id" | "history_dataset_id" | "history_dataset_collection_id";
const effectiveLabels = computed<WorkflowLabels>(() => {
if (!props.labels) {
return [] as WorkflowLabels;
}
const selectSteps = props.argumentType == "job_id";
const filteredLabels: WorkflowLabels = [];
for (const label of props.labels) {
if (selectSteps && label.type == "step") {
filteredLabels.push(label);
} else if (!selectSteps && label.type != "step") {
filteredLabels.push(label);
}
}
return filteredLabels;
});
const selectorConfig = {
job_id: {
labelTitle: "Step",
Expand All @@ -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)",
},
};
Expand Down Expand Up @@ -127,30 +145,38 @@ function onVisualization(response: string) {
emit("onInsert", response);
}
function onOk(selectedLabel: string) {
selectedLabel = selectedLabel || "<ENTER LABEL>";
function onOk(selectedLabel: WorkflowLabel | undefined) {
const defaultLabelType: string =
["history_dataset_id", "history_dataset_collection_id"].indexOf(props.argumentType) >= 0 ? "output" : "step";
const labelText: string = selectedLabel ? selectedLabel.label : "<ENTER LABEL>";
const labelType: string = selectedLabel ? selectedLabel.type : defaultLabelType;
selectedShow.value = false;
function onInsertArgument() {
emit("onInsert", `${props.argumentName}(${labelType}="${labelText}")`);
}
if (props.argumentType == "history_dataset_id") {
if (props.useLabels) {
emit("onInsert", `${props.argumentName}(output="${selectedLabel}")`);
onInsertArgument();
} else {
dataShow.value = true;
}
} else if (props.argumentType == "history_dataset_collection_id") {
if (props.useLabels) {
emit("onInsert", `${props.argumentName}(output="${selectedLabel}")`);
onInsertArgument();
} else {
dataCollectionShow.value = true;
}
} else if (props.argumentType == "job_id") {
if (props.useLabels) {
emit("onInsert", `${props.argumentName}(step="${selectedLabel}")`);
onInsertArgument();
} else {
jobShow.value = true;
}
} else if (props.argumentType == "invocation_id") {
if (props.useLabels) {
emit("onInsert", `${props.argumentName}(step="${selectedLabel}")`);
onInsertArgument();
} else {
invocationShow.value = true;
}
Expand Down Expand Up @@ -207,15 +233,15 @@ 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" />
<MarkdownVisualization
v-else-if="visualizationShow"
:argument-name="argumentName"
:argument-payload="argumentPayload"
:labels="labels"
:labels="effectiveLabels"
:use-labels="useLabels"
:history="currentHistoryId"
@onOk="onVisualization"
Expand Down
122 changes: 47 additions & 75 deletions client/src/components/Markdown/MarkdownSelector.vue
Original file line number Diff line number Diff line change
@@ -1,79 +1,51 @@
<template>
<span>
<b-modal
v-model="modalShow"
:title="title"
ok-title="Continue"
@ok="onOk"
@cancel="onCancel"
@hidden="onCancel">
<div class="ml-2">
<h2 class="mb-3 h-text">Select {{ labelTitle }} Label:</h2>
<div v-if="hasLabels">
<b-form-radio
v-for="(label, index) in labels"
:key="index"
v-model="selectedValue"
class="my-2"
name="labels"
:value="index">
{{ label }}
</b-form-radio>
</div>
<b-alert v-else show variant="info">
No labels found. Please specify labels in the Workflow Editor.
</b-alert>
<p class="mt-3 text-muted">
You may add new labels by selecting a step in the workflow editor and then editing the corresponding
label field in the step form.
</p>
</div>
</b-modal>
</span>
</template>
<script setup lang="ts">
import { BModal } from "bootstrap-vue";
import { computed, ref } from "vue";
import { WorkflowLabel } from "./labels";
import LabelSelector from "./LabelSelector.vue";
interface MarkdownSelectorProps {
labelTitle?: string;
labels: WorkflowLabel[];
argumentName?: string;
}
<script>
import BootstrapVue from "bootstrap-vue";
import Vue from "vue";
const props = defineProps<MarkdownSelectorProps>();
const selectedValue = ref<WorkflowLabel | undefined>(undefined);
const modalShow = ref(true);
Vue.use(BootstrapVue);
const title = computed(() => {
return `Insert '${props.argumentName}'`;
});
const hasLabels = computed(() => {
return props.labels && props.labels.length > 0;
});
export default {
props: {
labelTitle: {
type: String,
default: "",
},
labels: {
type: Array,
default: null,
},
argumentName: {
type: String,
default: null,
},
},
data() {
return {
selectedValue: 0,
modalShow: true,
};
},
computed: {
title() {
return `Insert '${this.argumentName}'`;
},
hasLabels() {
return this.labels && this.labels.length > 0;
},
},
methods: {
onOk() {
this.$emit("onOk", this.labels[this.selectedValue]);
},
onCancel() {
this.$emit("onCancel");
},
},
};
const emit = defineEmits<{
(e: "onOk", value: WorkflowLabel | undefined): void;
(e: "onCancel"): void;
}>();
function onOk() {
emit("onOk", selectedValue.value);
}
function onCancel() {
emit("onCancel");
}
</script>

<template>
<span>
<BModal v-model="modalShow" :title="title" ok-title="Continue" @ok="onOk" @cancel="onCancel" @hidden="onCancel">
<LabelSelector
v-model="selectedValue"
class="ml-2"
:has-labels="hasLabels"
:label-title="labelTitle"
:labels="labels" />
</BModal>
</span>
</template>
34 changes: 5 additions & 29 deletions client/src/components/Markdown/MarkdownToolBox.vue
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
:argument-type="selectedType"
:argument-name="selectedArgumentName"
:argument-payload="selectedPayload"
:labels="selectedLabels"
:labels="workflowLabels"
:use-labels="isWorkflow"
@onInsert="onInsert"
@onCancel="onCancel" />
Expand All @@ -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);
Expand Down Expand Up @@ -105,7 +106,6 @@ export default {
return {
selectedArgumentName: null,
selectedType: null,
selectedLabels: undefined,
selectedShow: false,
selectedPayload: null,
visualizationIndex: {},
Expand Down Expand Up @@ -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() +
Expand Down Expand Up @@ -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) {
Expand All @@ -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) {
Expand All @@ -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() {
Expand Down
Loading

0 comments on commit e933088

Please sign in to comment.