quality check integration into vuex

Author: METS0JA

src/store/index.js

@@ -8,6 +8,13 @@ Vue.use(Vuex);
 export default new Vuex.Store({
   state: {
     dockerStatus: "",
+    Qcheck: {
+      fileExtension: "",
+      folderPath: "",
+      reportReady: false,
+      reportLoading: false,
+      dockerActive: false,
+    },
     runInfo: {
       active: false,
       type: null,
@@ -81,11 +88,12 @@ export default new Vuex.Store({
               },
               {
                 name: "index_file_example",
-                value: "https://pipecraft2-manual.readthedocs.io/en/stable/user_guide.html#indexes-file-example-fasta-formatted",
+                value:
+                  "https://pipecraft2-manual.readthedocs.io/en/stable/user_guide.html#indexes-file-example-fasta-formatted",
                 disabled: "never",
                 type: "link",
                 tooltip: "link to PipeCraft manual page, index file examples",
-                },
+              },
               {
                 name: "index_mismatch",
                 value: 0,
@@ -1857,11 +1865,12 @@ export default new Vuex.Store({
             type: "file",
           },
           {
-          name: "index_file_example",
-          value: "https://pipecraft2-manual.readthedocs.io/en/stable/user_guide.html#indexes-file-example-fasta-formatted",
-          disabled: "never",
-          type: "link",
-          tooltip: "link to PipeCraft manual page, index file examples",
+            name: "index_file_example",
+            value:
+              "https://pipecraft2-manual.readthedocs.io/en/stable/user_guide.html#indexes-file-example-fasta-formatted",
+            disabled: "never",
+            type: "link",
+            tooltip: "link to PipeCraft manual page, index file examples",
           },
           {
             name: "index_mismatch",
@@ -2640,6 +2649,8 @@ export default new Vuex.Store({
         scriptName: "demux_paired_end_data.sh",
         imageName: "pipecraft/cutadapt:3.5",
         serviceName: "demultiplex",
+        manualLink:
+          "https://pipecraft2-manual.readthedocs.io/en/stable/user_guide.html#demultiplex",
         disabled: "demultiplexed",
         selected: false,
         showExtra: false,
@@ -2681,11 +2692,12 @@ export default new Vuex.Store({
           },
           {
             name: "index_file_example",
-            value: "https://pipecraft2-manual.readthedocs.io/en/stable/user_guide.html#indexes-file-example-fasta-formatted",
+            value:
+              "https://pipecraft2-manual.readthedocs.io/en/stable/user_guide.html#indexes-file-example-fasta-formatted",
             disabled: "never",
             type: "link",
             tooltip: "link to PipeCraft manual page, index file examples",
-            },
+          },
           {
             name: "index_mismatch",
             value: 0,

src/views/dada2Miseq.vue

@@ -64,6 +64,26 @@
                 style="max-width: 34px; padding-top: 0; margin: 0"
               ></v-checkbox>
               {{ service.serviceName.toUpperCase() }}
+              <div v-if="service.manualLink">
+                <v-tooltip left>
+                  <template v-slot:activator="{ on }">
+                    <v-icon
+                      v-on="on"
+                      right
+                      @click.stop
+                      @click="openLink(service.manualLink)"
+                      style="
+                        display: block;
+                        margin-left: auto;
+                        margin-right: 10px;
+                      "
+                      >mdi-help-circle-outline</v-icon
+                    >
+                  </template>
+                  <span>Check out the documentation for more info</span>
+                </v-tooltip>
+              </div>
+
               <!-- <v-progress-circular
             v-if="
               $store.state.runInfo.active == true &&
@@ -264,6 +284,7 @@
 </template>
 
 <script>
+const { shell } = require("electron");
 import InputNumeric from "../components/InputNumeric.vue";
 import InputLink from "../components/InputLink.vue";
 import InputBool from "../components/InputBool.vue";
@@ -301,6 +322,9 @@ export default {
     },
   },
   methods: {
+    openLink(value) {
+      shell.openExternal(value);
+    },
     toggleExtra(index) {
       this.$store.commit("toggleExtraCustomWorkflow", {
         workflowName: this.$route.params.workflowName,

src/views/fastqcANDmultiqc.vue

@@ -110,13 +110,7 @@ var dockerode = new Dockerode({ socketPath: socketPath });
 export default {
   name: "qualityPlots",
   data() {
-    return {
-      fileExtension: "",
-      folderPath: "",
-      reportReady: false,
-      reportLoading: false,
-      dockerActive: false,
-    };
+    return this.$store.state.Qcheck;
   },
   created() {
     var self = this;
@@ -133,7 +127,7 @@ export default {
   },
   methods: {
     folderSelect() {
-      this.reportReady = false;
+      this.$store.state.Qcheck.reportReady = false;
       Swal.mixin({
         input: "select",
         confirmButtonText: "Next →",
@@ -163,15 +157,20 @@ export default {
         .then(async (result) => {
           if (result.value) {
             console.log(result.value);
-            this.fileExtension = result.value[0].replace("_", ".");
+            this.$store.state.Qcheck.fileExtension = result.value[0].replace(
+              "_",
+              "."
+            );
             dialog
               .showOpenDialog({
                 title: "Select the folder containing your sequnece files",
                 properties: ["openDirectory", "showHiddenFiles"],
               })
               .then((result) => {
                 if (typeof result.filePaths[0] !== "undefined") {
-                  this.folderPath = slash(result.filePaths[0]);
+                  this.$store.state.Qcheck.folderPath = slash(
+                    result.filePaths[0]
+                  );
                 }
               })
               .catch((err) => {
@@ -181,8 +180,8 @@ export default {
         });
     },
     async fastQualityCheck() {
-      this.reportReady = false;
-      this.reportLoading = true;
+      this.$store.state.Qcheck.reportReady = false;
+      this.$store.state.Qcheck.reportLoading = true;
       console.log("starting fastqc");
       let gotImg = await imageExists(dockerode, "staphb/fastqc:0.11.9");
       if (gotImg === false) {
@@ -211,9 +210,9 @@ export default {
             Tty: false,
             WorkingDir: "/input",
             HostConfig: {
-              Binds: [`${this.folderPath}:/input`],
+              Binds: [`${this.$store.state.Qcheck.folderPath}:/input`],
             },
-            Env: [`format=${this.fileExtension}`],
+            Env: [`format=${this.$store.state.Qcheck.fileExtension}`],
           }
         )
         .then(async ([res, container]) => {
@@ -243,9 +242,11 @@ export default {
           Tty: false,
           WorkingDir: "/input",
           HostConfig: {
-            Binds: [`${this.folderPath}/quality_check:/input`],
+            Binds: [
+              `${this.$store.state.Qcheck.folderPath}/quality_check:/input`,
+            ],
           },
-          Env: [`format=${this.fileExtension}`],
+          Env: [`format=${this.$store.state.Qcheck.fileExtension}`],
         })
         .then(async ([res, container]) => {
           console.log(stdout.toString());
@@ -266,12 +267,12 @@ export default {
           return resObj;
         });
       console.log(result2);
-      this.reportReady = true;
-      this.reportLoading = false;
+      this.$store.state.Qcheck.reportReady = true;
+      this.$store.state.Qcheck.reportLoading = false;
     },
     openReport() {
       shell.openExternal(
-        `file://${this.folderPath}/quality_check/multiqc_report.html`
+        `file://${this.$store.state.Qcheck.folderPath}/quality_check/multiqc_report.html`
       );
     },
   },