Add antiSmash viz to result page

Author: Yan Xu

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

@@ -0,0 +1,55 @@
+import React, { useState, useEffect } from 'react'
+import { Card, CardBody, Collapse } from 'reactstrap'
+import { StatsTable } from 'src/edge/common/Tables'
+import { Header } from 'src/edge/project/results/CardHeader'
+import config from 'src/config'
+
+export const AntiSmash = (props) => {
+  const [collapseCard, setCollapseCard] = useState(true)
+  const url = config.APP.BASE_URI + '/projects/' + props.project.code + '/'
+
+  useEffect(() => {
+    if (props.allExpand > 0) {
+      setCollapseCard(false)
+    }
+  }, [props.allExpand])
+
+  useEffect(() => {
+    if (props.allClosed > 0) {
+      setCollapseCard(true)
+    }
+  }, [props.allClosed])
+
+  return (
+    <Card className="workflow-result-card">
+      <Header
+        toggle={true}
+        toggleParms={() => {
+          setCollapseCard(!collapseCard)
+        }}
+        title={'AntiSmash Result'}
+        collapseParms={collapseCard}
+      />
+      <Collapse isOpen={!collapseCard}>
+        <CardBody>
+          {props.result.antiSmashHtml && (
+            <>
+              <a href={url + props.result.antiSmashHtml} target="_blank" rel="noreferrer">
+                [full window view]
+              </a>
+              <br></br>
+              <div key={'metagenomics-antisMash-iframe'}>
+                <iframe
+                  src={url + props.result.antiSmashHtml}
+                  className="edge-iframe"
+                  title={'AntiSmash Result Viewer'}
+                />
+              </div>
+              <br></br>
+            </>
+          )}
+        </CardBody>
+      </Collapse>
+    </Card>
+  )
+}

webapp/client/src/workflows/project/ProjectResult.js

@@ -7,6 +7,7 @@ import ProjectOutputs from '/src/edge/project/results/ProjectOutputs'
 import { RunFaQCs } from '../metagenomics/results/RunFaQCs'
 import { Assembly } from '../metagenomics/results/Assembly'
 import { Phylogeny } from '../metagenomics/results/Phylogeny'
+import { AntiSmash } from '../metagenomics/results/AntiSmash'
 
 const ProjectResult = (props) => {
   const [project, setProject] = useState()
@@ -240,6 +241,15 @@ const ProjectResult = (props) => {
                   allClosed={allClosed}
                 />
               )}
+              {project.type === 'antiSmash' && (
+                <AntiSmash
+                  result={result}
+                  project={project}
+                  userType={type}
+                  allExpand={allExpand}
+                  allClosed={allClosed}
+                />
+              )}
             </>
           )}
           {outputs && (

webapp/server/utils/workflow.js

@@ -176,6 +176,12 @@ const generateWorkflowResult = (proj) => {
       if (fs.existsSync(treeCdsHtml)) {
         result.treeCdsHtml = `${workflowList[projectConf.workflow.name].outdir}/SNPphyloTree.cds.html`;
       }
+    } else if (projectConf.workflow.name === 'antiSmash') {
+      // antiSMASH HTML output
+      const antiSmashHtml = `${outdir}/output/index.html`;
+      if (fs.existsSync(antiSmashHtml)) {
+        result.antiSmashHtml = `${workflowList[projectConf.workflow.name].outdir}/output/index.html`;
+      }
     }
 
     fs.writeFileSync(resultJson, JSON.stringify(result));