Add interactive htmls to result page

Author: Yan Xu

webapp/client/src/workflows/metagenomics/results/RunFaQCs.js

@@ -32,20 +32,28 @@ export const RunFaQCs = (props) => {
       />
       <Collapse isOpen={!collapseCard}>
         <CardBody>
+          {props.result.stats && (
+            <>
+              <StatsTable data={props.result.stats} headers={[]} />
+            </>
+          )}
           {props.result.report && (
             <>
-              <a href={url + props.result.report} target="_blank" rel="noreferrer">
-                [QC Report]
+              <a href={`${url}${props.result.report}`} target="_blank" rel="noreferrer">
+                [Detailed QC Report]
               </a>
+              <div key={'readsQC-summary'}>
+                <embed
+                  key={'readsQC-summary-report'}
+                  src={`${url}${props.result.summaryPlots}`}
+                  className="edge-iframe"
+                  title={'qc summary'}
+                />
+              </div>
               <br></br>
               <br></br>
             </>
           )}
-          {props.result.stats && (
-            <>
-              <StatsTable data={props.result.stats} headers={[]} />
-            </>
-          )}
         </CardBody>
       </Collapse>
     </Card>

webapp/server/utils/workflow.js

@@ -130,9 +130,17 @@ const generateWorkflowResult = (proj) => {
       if (fs.existsSync(statsJsonFile)) {
         result.stats = JSON.parse(fs.readFileSync(statsJsonFile));
       }
-      const reportFile = `${outdir}/final_report.pdf`;
+      const summaryPlotsFile = `${outdir}/QC_summary_plots.html`;
+      if (fs.existsSync(summaryPlotsFile)) {
+        result.summaryPlots = `${workflowList[projectConf.workflow.name].outdir}/QC_summary_plots.html`;
+      }
+      const reportFile = `${outdir}/QC_final_report.html`;
       if (fs.existsSync(reportFile)) {
-        result.report = `${workflowList[projectConf.workflow.name].outdir}/final_report.pdf`;
+        result.report = `${workflowList[projectConf.workflow.name].outdir}/QC_final_report.html`;
+      }
+      const reportLongReadsFile = `${outdir}/NanoPlot-report.html`;
+      if (fs.existsSync(reportLongReadsFile)) {
+        result.report = `${workflowList[projectConf.workflow.name].outdir}/NanoPlot-report.html`;
       }
     } else if (projectConf.workflow.name === 'assembly') {
       const statsFile = `${outdir}/contigs_stats.txt`;