Add usage and output docs to workflows

#49

src/client/workflow/models/WorkflowExecutionIn.ts

@@ -16,7 +16,7 @@ export type WorkflowExecutionIn = {
      */
     parameters: any;
     /**
-     * Bucket where to save the Nextflow report. If None, no report will be generated
+     * Bucket where to save the Nextflow report. If None, no report will be generated. With our without prefix 's3://'
      */
     report_output_bucket?: string;
 };

src/client/workflow/models/WorkflowVersionFull.ts

@@ -34,9 +34,17 @@ export type WorkflowVersionFull = {
      */
     readme_url: string;
     /**
-     * URL to download CHAnGELOG.md from
+     * URL to download CHANGELOG.md from
      */
     changelog_url: string;
+    /**
+     * URL to download usage.md from
+     */
+    usage_url: string;
+    /**
+     * URL to download output.md from
+     */
+    output_url: string;
     /**
      * URL to download nextflow_schema.json from
      */

src/utils/GitRepository.ts

@@ -5,6 +5,8 @@ export const requiredRepositoryFiles = [
   "CHANGELOG.md",
   "README.md",
   "nextflow_schema.json",
+  "docs/usage.md",
+  "docs/output.md",
 ];
 
 export function determineGitIcon(repo_url?: string): string {
@@ -64,7 +66,7 @@ export abstract class GitRepository {
     } else if (repoUrl.includes("gitlab")) {
       return new GitlabRepository(repoUrl, gitCommitHash);
     }
-    throw new Error(`Repository is not supported.`);
+    throw new Error("Repository is not supported.");
   }
 }
 

src/views/workflows/WorkflowVersionView.vue

@@ -18,6 +18,8 @@ const versionState = reactive<{
   version: undefined | WorkflowVersionFull;
   descriptionMarkdown: string;
   changelogMarkdown: string;
+  usageMarkdown: string;
+  outputMarkdown: string;
   errorLoading: boolean;
   parameterSchema: Record<string, never>;
 }>({
@@ -27,6 +29,8 @@ const versionState = reactive<{
   errorLoading: false,
   descriptionMarkdown: "",
   changelogMarkdown: "",
+  usageMarkdown: "",
+  outputMarkdown: "",
   parameterSchema: {},
 });
 
@@ -49,8 +53,9 @@ function updateVersion(versionId: string, workflowId: string) {
   )
     .then((version) => {
       versionState.version = version;
-      downloadVersionFiles(version);
+      return version;
     })
+    .then(downloadVersionFiles)
     .catch(() => {
       versionState.version = undefined;
     })
@@ -72,11 +77,21 @@ function downloadVersionFiles(version: WorkflowVersionFull) {
     .then((response) => {
       versionState.parameterSchema = response.data;
     });
-  Promise.all([descriptionPromise, changelogPromise, parameterPromise]).finally(
-    () => {
-      versionState.fileLoading = false;
-    }
-  );
+  const usagePromise = axios.get(version.usage_url).then((response) => {
+    versionState.usageMarkdown = response.data;
+  });
+  const outputPromise = axios.get(version.output_url).then((response) => {
+    versionState.outputMarkdown = response.data;
+  });
+  Promise.all([
+    descriptionPromise,
+    changelogPromise,
+    parameterPromise,
+    usagePromise,
+    outputPromise,
+  ]).finally(() => {
+    versionState.fileLoading = false;
+  });
 }
 
 onMounted(() => {
@@ -95,6 +110,14 @@ onMounted(() => {
         >Description
       </router-link>
     </li>
+    <li class="nav-item">
+      <router-link
+        class="nav-link"
+        :to="{ query: { tab: 'usage' } }"
+        :class="{ active: props.activeTab === 'usage' }"
+        >Usage
+      </router-link>
+    </li>
     <li class="nav-item">
       <router-link
         class="nav-link"
@@ -103,6 +126,14 @@ onMounted(() => {
         >Parameters
       </router-link>
     </li>
+    <li class="nav-item">
+      <router-link
+        class="nav-link"
+        :to="{ query: { tab: 'output' } }"
+        :class="{ active: props.activeTab === 'output' }"
+        >Output
+      </router-link>
+    </li>
     <li class="nav-item">
       <router-link
         class="nav-link"
@@ -139,6 +170,12 @@ onMounted(() => {
     <p v-else-if="props.activeTab === 'changes'">
       <markdown-renderer :markdown="versionState.changelogMarkdown" />
     </p>
+    <p v-else-if="props.activeTab === 'output'">
+      <markdown-renderer :markdown="versionState.outputMarkdown" />
+    </p>
+    <p v-else-if="props.activeTab === 'usage'">
+      <markdown-renderer :markdown="versionState.usageMarkdown" />
+    </p>
   </div>
 </template>