opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-10-16 15:45:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Refactor modal logic out of core MarkdownHelp component.

Browse Source
This commit is contained in:
John Chilton
2024-01-15 13:48:11 -05:00
parent e388a0f309
commit 50cd3c7e6b
3 changed files with 129 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Markdown/MarkdownEditor.vue
+3 -3
View File
@@ -33,7 +33,7 @@
</div>
</div>
</div>
<MarkdownHelp ref="help" :mode="mode" />
<MarkdownHelpModal ref="help" :mode="mode" />
</div>
</template>
@@ -46,7 +46,7 @@ import FlexPanel from "components/Panels/FlexPanel";
import _ from "underscore";
import Vue from "vue";
import MarkdownHelp from "./MarkdownHelp";
import MarkdownHelpModal from "./MarkdownHelpModal";
import MarkdownToolBox from "./MarkdownToolBox";
Vue.use(BootstrapVue);
@@ -60,7 +60,7 @@ export default {
MarkdownToolBox,
FlexPanel,
FontAwesomeIcon,
MarkdownHelp,
MarkdownHelpModal,
},
props: {
markdownText: {
client/src/components/Markdown/MarkdownHelp.vue
+89 -109
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, ref } from "vue";
import { computed } from "vue";
import DirectiveHelpSection from "./DirectiveHelpSection.vue";
@@ -9,163 +9,143 @@ interface MarkdownHelpProps {
const props = defineProps<MarkdownHelpProps>();
const show = ref(false);
const page = computed(() => props.mode == "page");
const title = computed(() => {
if (page.value) {
return "Markdown Help for Pages";
} else {
return "Markdown Help for Invocation Reports";
}
});
function showMarkdownHelp() {
show.value = true;
}
defineExpose({
showMarkdownHelp,
});
</script>
<template>
<b-modal v-model="show" hide-footer>
<template v-slot:modal-title>
<h2 class="mb-0">{{ title }}</h2>
</template>
<div>
<h3>Overview</h3>
<p>
<span v-if="page"> This Markdown document will be used to generate your Galaxy Page. </span>
<span v-else> This Markdown document will be used to generate your workflow invocation report. </span>
This document should be Markdown with embedded commands for extracting and displaying Galaxy objects
and/or their metadata.
</p>
<div>
<h3>Overview</h3>
<p>
<span v-if="page"> This Markdown document will be used to generate your Galaxy Page. </span>
<span v-else> This Markdown document will be used to generate your workflow invocation report. </span>
This document should be Markdown with embedded commands for extracting and displaying Galaxy objects and/or
their metadata.
</p>
<p>
For an overview of standard Markdown visit the
<a href="https://commonmark.org/help/tutorial/">commonmark.org tutorial</a>.
</p>
<p>
For an overview of standard Markdown visit the
<a href="https://commonmark.org/help/tutorial/">commonmark.org tutorial</a>.
</p>
<p>
The Galaxy extensions to Markdown are represented as code blocks, these blocks start with the line
<tt>```galaxy</tt> and end with the line <tt>```</tt> and have a command with arguments between these
lines.
<span v-if="page">
These arguments reference your Galaxy objects such as datasets, jobs, and workflows.
</span>
<span v-else>
These arguments reference parts of your workflow such as steps, inputs, and outputs by label in the
middle.
</span>
</p>
<p>
The Galaxy extensions to Markdown are represented as code blocks, these blocks start with the line
<tt>```galaxy</tt> and end with the line <tt>```</tt> and have a command with arguments between these lines.
<span v-if="page">
These arguments reference your Galaxy objects such as datasets, jobs, and workflows.
</span>
<span v-else>
These arguments reference parts of your workflow such as steps, inputs, and outputs by label in the
middle.
</span>
</p>
<h3>History Contents Commands</h3>
<h3>History Contents Commands</h3>
<p>
These commands reference a dataset or dataset collection. For instance, the following examples would
display the dataset collection metadata and would embed a dataset into the document as an image.
<p>
These commands reference a dataset or dataset collection. For instance, the following examples would display
the dataset collection metadata and would embed a dataset into the document as an image.
<span v-if="page">
These elements are referenced by object IDs used by the Galaxy API. The Markdown editor will let you
pick objects graphically but they will be embedded into the Markdown with these IDs.
</span>
<span v-if="page">
These elements are referenced by object IDs used by the Galaxy API. The Markdown editor will let you
pick objects graphically but they will be embedded into the Markdown with these IDs.
</span>
<span v-else>
These elements are referenced by input or output labels for the workflow. If a dataset or collection
you'd like to reference is not available for selection in the Markdown editor, be sure to assign a
label to the object in the workflow editor first.
</span>
</p>
<span v-else>
These elements are referenced by input or output labels for the workflow. If a dataset or collection
you'd like to reference is not available for selection in the Markdown editor, be sure to assign a label
to the object in the workflow editor first.
</span>
</p>
<pre v-if="page">
<pre v-if="page">
```galaxy
history_dataset_collection_display(history_dataset_collection_id=33b43b4e7093c91f)
```
</pre
>
<pre v-else>
>
<pre v-else>
```galaxy
history_dataset_collection_display(output=mapped_bams)
```
</pre
>
>
<pre v-if="page">
<pre v-if="page">
```galaxy
history_dataset_as_image(history_dataset_id=33b43b4e7093c91f)
```
</pre
>
<pre v-else>
>
<pre v-else>
```galaxy
history_dataset_as_image(output=normalized_result_plot)
```
</pre
>
>
<DirectiveHelpSection
:mode="mode"
:directives="[
'history_dataset_display',
'history_dataset_collection_display',
'history_dataset_as_image',
'history_dataset_as_table',
'history_dataset_peek',
'history_dataset_info',
]" />
<DirectiveHelpSection
:mode="mode"
:directives="[
'history_dataset_display',
'history_dataset_collection_display',
'history_dataset_as_image',
'history_dataset_as_table',
'history_dataset_peek',
'history_dataset_info',
]" />
<h3>Workflow Commands</h3>
<h3>Workflow Commands</h3>
<p v-if="page">
These commands reference a workflow by an object ID. The following example would display a
representation of the workflow in the resulting Galaxy Page:
</p>
<p v-else>These commands reference the current workflow and do not require an input for the most part.</p>
<p v-if="page">
These commands reference a workflow by an object ID. The following example would display a representation of
the workflow in the resulting Galaxy Page:
</p>
<p v-else>These commands reference the current workflow and do not require an input for the most part.</p>
<pre v-if="page">
<pre v-if="page">
```galaxy
workflow_display(workflow_id=33b43b4e7093c91f>)
```
</pre
>
<pre v-else>
>
<pre v-else>
```galaxy
workflow_display()
```
</pre>
</pre
>
<DirectiveHelpSection
:mode="mode"
:directives="['workflow_license', 'workflow_display', 'workflow_image', 'invocation_time']" />
<DirectiveHelpSection
:mode="mode"
:directives="['workflow_license', 'workflow_display', 'workflow_image', 'invocation_time']" />
<h3>Job Commands</h3>
<h3>Job Commands</h3>
<p v-if="page">
These commands reference a Galaxy job. For instance, the following example would show the job parameters
the job ID <tt>33b43b4e7093c91f</tt>.
</p>
<p v-else>
These commands reference a Galaxy job or collection of jobs associated with a labeled step in the
workflow. For instance, the following example would show the job parameters for the step with the label
<tt>mapping</tt>.
</p>
<p v-if="page">
These commands reference a Galaxy job. For instance, the following example would show the job parameters the
job ID <tt>33b43b4e7093c91f</tt>.
</p>
<p v-else>
These commands reference a Galaxy job or collection of jobs associated with a labeled step in the workflow.
For instance, the following example would show the job parameters for the step with the label
<tt>mapping</tt>.
</p>
<pre v-if="page">
<pre v-if="page">
```galaxy
job_parameters(job_id=33b43b4e7093c91f)
```
</pre
>
<pre v-else>
>
<pre v-else>
```galaxy
job_parameters(step=mapping)
```
</pre>
</pre
>
<DirectiveHelpSection
:mode="mode"
:directives="['tool_stderr', 'tool_stdout', 'job_metrics', 'job_parameters']" />
</div>
</b-modal>
<DirectiveHelpSection
:mode="mode"
:directives="['tool_stderr', 'tool_stdout', 'job_metrics', 'job_parameters']" />
</div>
</template>
client/src/components/Markdown/MarkdownHelpModal.vue
+37
View File
@@ -0,0 +1,37 @@
<script setup lang="ts">
import { computed, ref } from "vue";
import MarkdownHelp from "./MarkdownHelp.vue";
interface MarkdownHelpModalProps {
mode: "report" | "page";
}
const props = defineProps<MarkdownHelpModalProps>();
const show = ref(false);
const title = computed(() => {
if (props.mode == "page") {
return "Markdown Help for Pages";
} else {
return "Markdown Help for Invocation Reports";
}
});
function showMarkdownHelp() {
show.value = true;
}
defineExpose({
showMarkdownHelp,
});
</script>
<template>
<b-modal v-model="show" hide-footer>
<template v-slot:modal-title>
<h2 class="mb-0">{{ title }}</h2>
</template>
<MarkdownHelp :mode="mode" />
</b-modal>
</template>