Modified homepage and help buttons on Builder Page to open a new tab

biocompute-objects · Sep 25, 2024 · 0a7e179 · 0a7e179
1 parent 6428e82
commit 0a7e179
Show file tree

Hide file tree

Showing 12 changed files with 21 additions and 12 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -113,7 +113,6 @@
 /* ---------------------------------------------------------------------------------------------------- */
 /* Page box components */
 .About-half-width-box{
-  min-height: 650px; /* Ensure both boxes have a minimum height */
   min-width: 350px;/* min-width: 275px; Ensure both boxes have a minimum width */
   width: 90%; /* Half the width of the container minus spacing */
   margin: 0 auto; /* Add spacing between the boxes */

diff --git a/client/src/components/builder/descriptionDomain.js b/client/src/components/builder/descriptionDomain.js
@@ -53,7 +53,7 @@ export const  DescriptionDomain = ({onSave}) => {
                   <span className="bold-title">
                                     Description Domain
                     <Tooltip title="Explanation of Description Domain">
-                      <Button size="xs" href='https://wiki.biocomputeobject.org/index.php?title=Description-domain'>
+                      <Button size="xs" target="_blank" href='https://wiki.biocomputeobject.org/index.php?title=Description-domain'>
                         <HelpOutlineIcon />
                       </Button>
                     </Tooltip>

diff --git a/client/src/components/builder/errorDomain.js b/client/src/components/builder/errorDomain.js
@@ -67,7 +67,7 @@ export const ErrorDomain = ({onSave}) => {
                 <span className="bold-title">
                   Error Domain
                   <Tooltip title="Explanation of Error Domain">
-                    <Button size="small" href='https://github.com/biocompute-objects/BCO_Specification/blob/main/content/error-domain.md'>
+                    <Button size="small" target="_blank" href='https://github.com/biocompute-objects/BCO_Specification/blob/main/content/error-domain.md'>
                       <HelpOutlineIcon />
                     </Button>
                   </Tooltip>

diff --git a/client/src/components/builder/executionDomain.js b/client/src/components/builder/executionDomain.js
@@ -66,7 +66,7 @@ export const ExecutionDomain = ({onSave}) => {
                   <span className="bold-title">
                       Execution Domain
                     <Tooltip title="Explanation of Execution Domain">
-                      <Button size="xs" href='https://wiki.biocomputeobject.org/index.php?title=Execution-domain'>
+                      <Button size="xs" target="_blank" href='https://wiki.biocomputeobject.org/index.php?title=Execution-domain'>
                         <HelpOutlineIcon />
                       </Button>
                     </Tooltip>

diff --git a/client/src/components/builder/extensionDomain.js b/client/src/components/builder/extensionDomain.js
@@ -39,7 +39,7 @@ export const  ExtensionDomain = ({onSave}) => {
           <span className="bold-title">
             Extension Domain
             <Tooltip title="Explanation of Extension Domain">
-              <Button size="small" href='https://wiki.biocomputeobject.org/index.php?title=Extension-domain'>
+              <Button size="small" target="_blank" href='https://wiki.biocomputeobject.org/index.php?title=Extension-domain'>
                 <HelpOutlineIcon />
               </Button>
             </Tooltip>

diff --git a/client/src/components/builder/ioDomain.js b/client/src/components/builder/ioDomain.js
@@ -43,7 +43,7 @@ export const  IODomain = ({onSave}) => {
                     <span className="bold-title">
                       I/O Domain
                       <Tooltip title="Explanation of IO Domain">
-                        <Button size="xs" href='https://wiki.biocomputeobject.org/index.php?title=Iodomain'>
+                        <Button size="xs" target="_blank" href='https://wiki.biocomputeobject.org/index.php?title=Iodomain'>
                           <HelpOutlineIcon />
                         </Button>
                       </Tooltip>

diff --git a/client/src/components/builder/parametricDomain.js b/client/src/components/builder/parametricDomain.js
@@ -38,7 +38,7 @@ export const  ParametricDomain = ({onSave}) => {
                   <span className="bold-title">
                     Parametric Domain
                     <Tooltip title="Explanation of Parametric Domain">
-                      <Button size="xs" href='https://wiki.biocomputeobject.org/index.php?title=Parametric-domain'>
+                      <Button size="xs" target="_blank" href='https://wiki.biocomputeobject.org/index.php?title=Parametric-domain'>
                         <HelpOutlineIcon />
                       </Button>
                     </Tooltip>

diff --git a/client/src/components/builder/provenanceDomain.js b/client/src/components/builder/provenanceDomain.js
@@ -98,7 +98,7 @@ export const  ProvenanceDomain = ({onSave} ) => {
                     <span className="bold-title">
                       Provenance Domain
                       <Tooltip title="Explanation of Provenance Domain">
-                        <Button size="small" href='https://wiki.biocomputeobject.org/index.php?title=Provenance-domain'>
+                        <Button size="small" target="_blank" href='https://wiki.biocomputeobject.org/index.php?title=Provenance-domain'>
                           <HelpOutlineIcon />
                         </Button>
                       </Tooltip>

diff --git a/client/src/components/builder/usabilityDomain.js b/client/src/components/builder/usabilityDomain.js
@@ -53,7 +53,7 @@ export const  UsabilityDomain = ({onSave}) => {
                   <span className="bold-title">
                                     Usability Domain
                     <Tooltip title="Explanation of Usability Domain">
-                      <Button size="xs" href='https://wiki.biocomputeobject.org/index.php?title=Usability-domain'>
+                      <Button size="xs" target="_blank" href='https://wiki.biocomputeobject.org/index.php?title=Usability-domain'>
                         <HelpOutlineIcon />
                       </Button>
                     </Tooltip>

diff --git a/client/src/images/nextflow.png b/client/src/images/nextflow.png
diff --git a/client/src/pages/Home.js b/client/src/pages/Home.js
@@ -29,7 +29,7 @@ const HomePage = () => {
               <FullWidthBox
                 link=""
                 title="BioCompute: A platform for bioinformatics analysis workflow documentation"
-                content="BioCompute is shorthand for the IEEE 2791-2020 standard for Bioinformatics Analyses to facilitate communication. This pipeline documentation approach has been adopted by a few FDA centers (CBER, CDER and CFSAN). The goal is to ease the communication burdens between research centers, organizations, and industries. This web portal allows users to build a BioCompute Objects through the interface in a human and machine readable format."
+                content="BioCompute is shorthand for the IEEE 2791-2020 standard for Bioinformatics Computational Analyses to facilitate communication between researchers, federal agencies and industires. This pipeline documentation approach has been adopted by a three FDA centers (CBER, CDER and CFSAN). Through this web portal, users can create BioCompute Objects (BCOs) in JSON format using the Builder and search for existing BCOs."
                 cssClass="home-colorBackground"
               />
               <br/>

diff --git a/client/src/pages/Resources.js b/client/src/pages/Resources.js
@@ -9,6 +9,7 @@ import {
 
 import ThirdBox from "../components/ThirdBox.js";
 import FullWidthBox from "../components/FullWidthBox.js";
+import HalfWidthBox from "../components/HalfWidthBox.js"
 import logo from "../images/logo.png"
 import hive from "../images/hive.png"
 import gitLogo from "../images/Octocat.png";
@@ -17,6 +18,7 @@ import dnaNexus from "../images/dnanexus.png"
 import galaxy from "../images/galaxy.png"
 import cgc from "../images/cgc2.png"
 import swagger from "../images/swagger.png"
+import nextflow from "../images/nextflow.png"
 
 export default function Resources() {
   const bcodbUrl = process.env.REACT_APP_BCOAPI_URL
@@ -25,14 +27,22 @@ export default function Resources() {
     <Paper>
       <Container maxWidth={false}>
         <Grid container justifyContent="center" spacing={3}>
-          <Grid item xs={12} sm={12} lg={12} xl={12}>
-            <FullWidthBox
+          <Grid item xs={4} sm={4} lg={6} xl={6}>
+            <HalfWidthBox
               title="BCODB API"
               image={swagger}
               content="Explore the BioCompute data base RESTful APIs, generated by Swagger"
               link={`${bcodbUrl}docs/`}
             />
           </Grid>
+          <Grid item xs={4} sm={4} lg={6} xl={6}>
+            <HalfWidthBox
+              title="Nextflow"
+              image={nextflow}
+              content="Automatically generate BCO from Nextflow pipelines with provenance information "
+              link="https://github.com/nextflow-io/nf-prov"
+            />
+          </Grid>
           <Grid item xs={12} sm={6} lg={4} xl={4}>
             <ThirdBox
               link="https://hive.biochemistry.gwu.edu/dna.cgi?cmd=main"