Merge pull request #74 from JaneliaSciComp/open_external_links_in_new_tab

feat: All links to external sources now open in a new tab.

Author: neomorphic

src/components/About.jsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { Typography, Row, Col } from "antd";
 import { Link } from "react-router-dom";
+import { faExternalLink } from "@fortawesome/pro-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import References from "./References";
 import config from "../config";
 
@@ -16,8 +18,8 @@ export default function About() {
         quick to look up by identifier. You can also upload your own data and match it against these public data sets. 
       </Paragraph>
       <Paragraph>
-        More information about the software infrastructure is available in our <a href="https://doi.org/10.1186/s12859-024-05732-7">published paper</a> and {" "}
-        <a href="https://aws.amazon.com/blogs/architecture/scaling-neuroscience-research-on-aws/">AWS blog post</a>.
+        More information about the software infrastructure is available in our <a href="https://doi.org/10.1186/s12859-024-05732-7" target="_blank" rel="noopener noreferrer">published paper <FontAwesomeIcon icon={faExternalLink} size="xs" /></a> and {" "}
+        <a href="https://aws.amazon.com/blogs/architecture/scaling-neuroscience-research-on-aws/" target="_blank" rel="noopener noreferrer">AWS blog post <FontAwesomeIcon icon={faExternalLink} size="xs" /></a>.
       </Paragraph>
 
       <Row gutter={20}>
@@ -69,7 +71,7 @@ export default function About() {
           <ul>
             <li><Link to="/usage">Usage Terms</Link></li>
             <li><Link to="/upload-policy">Uploaded Data Usage and Retention Policy</Link></li>
-            <li><a href="https://www.hhmi.org/privacy-policy">HHMI Privacy Policy</a></li>
+            <li><a href="https://www.hhmi.org/privacy-policy" target="_blank" rel="noopener noreferrer">HHMI Privacy Policy <FontAwesomeIcon icon={faExternalLink} size="xs" /></a></li>
           </ul>
 
           <Title level={2}>Release Notes</Title>
@@ -86,13 +88,13 @@ export default function About() {
           <Title level={2}>Site Feedback Survey</Title>
           <Paragraph>
             Please take a moment to fill out our{" "}
-            <a href="https://forms.gle/tJa6GAwEjs7fykhG7">site feedback survey</a>.
+            <a href="https://forms.gle/tJa6GAwEjs7fykhG7" target="_blank" rel="noopener noreferrer">site feedback survey <FontAwesomeIcon icon={faExternalLink} size="xs" /></a>.
           </Paragraph>
 
           <Title level={2}>Source Code</Title>
           <Paragraph>
             You can find all of the code for this website and the supporting infrastructure in our{" "}
-            <a href="https://github.com/JaneliaSciComp/neuronbridge">GitHub repositories</a>.
+            <a href="https://github.com/JaneliaSciComp/neuronbridge" target="_blank" rel="noopener noreferrer">GitHub repositories <FontAwesomeIcon icon={faExternalLink} size="xs" /></a>.
           </Paragraph>
 
         </Col>

src/components/Admin.jsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect, useContext } from "react";
 import { Auth } from "aws-amplify";
 import { Switch } from "antd";
+import { faExternalLink } from "@fortawesome/pro-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { AppContext } from "../containers/AppContext";
 import AnnouncementsCreate from "./AnnouncementsCreate";
 
@@ -34,8 +36,8 @@ export default function Admin() {
   return (
     <>
       <h2>Admin Page</h2>
-      <a href="https://janelia-neuronbridge-admin-prod.s3.amazonaws.com/index.html">
-        Custom search admin site
+      <a href="https://janelia-neuronbridge-admin-prod.s3.amazonaws.com/index.html" target="_blank" rel="noopener noreferrer">
+        Custom search admin site <FontAwesomeIcon icon={faExternalLink} size="xs" />
       </a>
       <p>Bearer token:</p>
       <textarea

src/components/DevSiteBanner.jsx

@@ -1,6 +1,8 @@
 import "./DevSiteBanner.css";
 import { useContext } from "react";
 import { Switch } from "antd";
+import { faExternalLink } from "@fortawesome/pro-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { AppContext } from "../containers/AppContext";
 
 export default function DevSiteBanner() {
@@ -14,7 +16,7 @@ export default function DevSiteBanner() {
     <div className="devsite-banner">
       <p>
         This is the development server. For the public release, please go to{" "}
-        <a href="https://neuronbridge.janelia.org">prod</a> | {" "}
+        <a href="https://neuronbridge.janelia.org" target="_blank" rel="noopener noreferrer">prod <FontAwesomeIcon icon={faExternalLink} size="xs" /></a> | {" "}
         { appState.isAdmin ? (
         <Switch
           checked={appState.debug}

src/components/ExternalLink.jsx

@@ -16,7 +16,7 @@ const vfbUrl = "http://virtualflybrain.org/xref/neuronbridge/<NAME>";
 
 function VFBLink({ name }) {
   return (
-    <a href={vfbUrl.replace(/<NAME>/, name)}>
+    <a href={vfbUrl.replace(/<NAME>/, name)} target="_blank" rel="noopener noreferrer">
       Virtual Fly Brain{" "}
       <FontAwesomeIcon icon={faExternalLink} size="xs" transform="up-2" />
     </a>
@@ -35,6 +35,8 @@ function FlyWireLink({ tag }) {
       href={flyWireUrl
         .replace(/<ID>/, id)
         .replace(/<VERSION>/, version.replace(/^v/, ""))}
+      target="_blank"
+      rel="noopener noreferrer"
     >
       FlyWire{" "}
       <FontAwesomeIcon icon={faExternalLink} size="xs" transform="up-2" />
@@ -61,7 +63,7 @@ export default function ExternalLink({ id, isLM, library, publishedName }) {
 
     return (
       <>
-        <a href={extUrl.replace(/<NAME>/, id)}>
+        <a href={extUrl.replace(/<NAME>/, id)} target="_blank" rel="noopener noreferrer">
           {extName}{" "}
           <FontAwesomeIcon icon={faExternalLink} size="xs" transform="up-2" />
         </a>
@@ -137,7 +139,7 @@ export default function ExternalLink({ id, isLM, library, publishedName }) {
     <>
       { !library.match(/flywire_fafb/i) ? (
         <>
-      <a href={finalEMUrl}>
+      <a href={finalEMUrl} target="_blank" rel="noopener noreferrer">
         NeuPrint{" "}
         <FontAwesomeIcon icon={faExternalLink} size="xs" transform="up-2" />
         </a><br /></>) : ""}

src/components/Help/HelpContents.jsx

@@ -2,6 +2,8 @@ import React, { useContext, useEffect, useRef } from "react";
 import { useLocation, useHistory, Link } from "react-router-dom";
 import PropTypes from "prop-types";
 import { Typography, InputNumber, Col, Row, Divider } from "antd";
+import { faExternalLink } from "@fortawesome/pro-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import SearchInput from "../SearchInput";
 import { AppContext } from "../../containers/AppContext";
 import { useQuery } from "../../libs/hooksLib";
@@ -179,7 +181,7 @@ export default function HelpContents({ scroll }) {
               Raw light microscopy (LM) data collected by FlyLight is
               transformed in several ways prior to matching using color depth
               MIP search (
-              <a href="https://doi.org/10.1101/318006">Otsuna et al., 2018</a>).
+              <a href="https://doi.org/10.1101/318006" target="_blank" rel="noopener noreferrer">Otsuna et al., 2018 <FontAwesomeIcon icon={faExternalLink} size="xs" /></a>).
               To improve matches for denser MCFO data, the color depth MIP
               approach was extended in several ways (Otsuna, et al., in
               preparation). The data generation pipeline for LM images is shown
@@ -188,8 +190,8 @@ export default function HelpContents({ scroll }) {
             <p>
               After images are aligned to a common template, we used direction
               selective local thresholding (DSLT;{" "}
-              <a href="https://doi.org/10.1111/tpj.12738">
-                Kawase, et al., 2015
+              <a href="https://doi.org/10.1111/tpj.12738" target="_blank" rel="noopener noreferrer">
+                Kawase, et al., 2015 <FontAwesomeIcon icon={faExternalLink} size="xs" />
               </a>
               ) to generate a 3D segmentation and create a separate color depth
               MIP for each fully connected component. These segmented MIPs were
@@ -204,8 +206,8 @@ export default function HelpContents({ scroll }) {
             </p>
             <p>
               More details are available in the {" "}
-              <a href="https://doi.org/10.1186/s12859-024-05732-7">
-                NeuronBridge paper
+              <a href="https://doi.org/10.1186/s12859-024-05732-7" target="_blank" rel="noopener noreferrer">
+                NeuronBridge paper <FontAwesomeIcon icon={faExternalLink} size="xs" />
               </a>
               .
             </p>
@@ -224,8 +226,8 @@ export default function HelpContents({ scroll }) {
             <p>
               The EM data sets were imaged and reconstructed by the FlyEM
               Project (
-              <a href="https://doi.org/10.7554/eLife.57443">
-                Scheffer, et al., 2020
+              <a href="https://doi.org/10.7554/eLife.57443" target="_blank" rel="noopener noreferrer">
+                Scheffer, et al., 2020 <FontAwesomeIcon icon={faExternalLink} size="xs" />
               </a>
               ). After the imagery was registered to the JRC2018 template, we
               downloaded the reconstructed skeletons as SWC files and
@@ -336,8 +338,8 @@ export default function HelpContents({ scroll }) {
       automatically registered to a standard color depth search alignment
       template. Currently, these are JRC2018_Unisex_20x_HR (Brain) and
       JRC2018_VNC_Unisex_40x_DS (VNC) both of which are derived from the{" "}
-      <a href="https://www.janelia.org/open-science/jrc-2018-brain-templates">
-        JRC 2018 templates
+      <a href="https://www.janelia.org/open-science/jrc-2018-brain-templates" target="_blank" rel="noopener noreferrer">
+        JRC 2018 templates <FontAwesomeIcon icon={faExternalLink} size="xs" />
       </a>
       .
       <h3 className="top-space-sm">Supported File Formats</h3>
@@ -351,8 +353,8 @@ export default function HelpContents({ scroll }) {
         The aligner provides an alignment score and a link to a verification movie. 
         The verification movie allows you to visualize the aligned stack against the template.
         The alignment score is calculated as a{" "}
-        <a href="https://martin-thoma.com/zero-mean-normalized-cross-correlation">
-          Zero Mean Normalized Cross-Correlation (ZNCC)
+        <a href="https://martin-thoma.com/zero-mean-normalized-cross-correlation" target="_blank" rel="noopener noreferrer">
+          Zero Mean Normalized Cross-Correlation (ZNCC) <FontAwesomeIcon icon={faExternalLink} size="xs" />
         </a>
         .
         This yields a number between -1 and 1, where higher scores are better. 
@@ -424,8 +426,8 @@ export default function HelpContents({ scroll }) {
           This is unrecoverable in our system. You will need to use an
           alternative method to register your data. Once you have an aligned
           image stack, use the{" "}
-          <a href="https://github.com/JaneliaSciComp/ColorMIP_Mask_Search">
-            Color MIP Mask Search Fiji plugin
+          <a href="https://github.com/JaneliaSciComp/ColorMIP_Mask_Search" target="_blank" rel="noopener noreferrer">
+            Color MIP Mask Search Fiji plugin <FontAwesomeIcon icon={faExternalLink} size="xs" />
           </a>{" "}
           to generate the aligned color depth MIPs and upload those for custom
           searching.

src/components/HelpPage.jsx

@@ -1,5 +1,7 @@
 import React from "react";
 import { Typography, Row, Col, Divider } from "antd";
+import { faExternalLink } from "@fortawesome/pro-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import ScrollToTopOnMount from "./ScrollToTopOnMount";
 import HelpContents from "./Help/HelpContents";
 import "./HelpPage.css";
@@ -50,8 +52,8 @@ export default function HelpPage() {
           <Title level={3}>Downloading the data</Title>
           <p>
             You can download the{" "}
-            <a href="https://www.janelia.org/open-science/color-depth-mip">
-              Color-Depth MIPs
+            <a href="https://www.janelia.org/open-science/color-depth-mip" target="_blank" rel="noopener noreferrer">
+              Color-Depth MIPs <FontAwesomeIcon icon={faExternalLink} size="xs" />
             </a>{" "}
             for your own research.
           </p>
@@ -61,23 +63,23 @@ export default function HelpPage() {
           <Title level={3}>Programmatic API access</Title>
           <p>
             Access the images programmatically{" "}
-            <a href="https://open.quiltdata.com/b/janelia-flylight-color-depth/tree/README.md">
-              using the S3 API
+            <a href="https://open.quiltdata.com/b/janelia-flylight-color-depth/tree/README.md" target="_blank" rel="noopener noreferrer">
+              using the S3 API <FontAwesomeIcon icon={faExternalLink} size="xs" />
             </a>{" "}
             on AWS Open Data.
 
             The matches are also available on S3, in a{" "}
-            <a href="https://open.quiltdata.com/b/janelia-neuronbridge-data-prod/tree/">different bucket</a>.
+            <a href="https://open.quiltdata.com/b/janelia-neuronbridge-data-prod/tree/" target="_blank" rel="noopener noreferrer">different bucket <FontAwesomeIcon icon={faExternalLink} size="xs" /></a>.
           </p>
           <p>
-            You can also use <a href="https://github.com/JaneliaSciComp/neuronbridge-python">Python API</a> to access the matches and images using Python.
+            You can also use <a href="https://github.com/JaneliaSciComp/neuronbridge-python" target="_blank" rel="noopener noreferrer">Python API <FontAwesomeIcon icon={faExternalLink} size="xs" /></a> to access the matches and images using Python.
           </p>
 
           <Divider />
           <a className="anchorOffset" id="tools" href="#tools">#tools</a>
           <Title level={3}>Third-party tools</Title>
           <Typography>
-            <a href="http://natverse.org/neuronbridger/">neuronbridger</a> - R
+            <a href="http://natverse.org/neuronbridger/" target="_blank" rel="noopener noreferrer">neuronbridger <FontAwesomeIcon icon={faExternalLink} size="xs" /></a> - R
             library for interacting with the NeuronBridge.
           </Typography>
         </Col>

src/components/ImageCollections.jsx

@@ -1,6 +1,8 @@
 import React, { useContext, useEffect, useState } from "react";
 import { Typography, Table, message } from "antd";
 import { Auth, Storage } from "aws-amplify";
+import { faExternalLink } from "@fortawesome/pro-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { AppContext } from "../containers/AppContext";
 import { libraryFormatter } from "../libs/utils";
 
@@ -168,7 +170,7 @@ export default function ImageCollections() {
           const { id, refName } = doi;
           return (
             <span key={id}>
-              <a href={`https://doi.org/${id}`}>{refName}</a>
+              <a href={`https://doi.org/${id}`} target="_blank" rel="noopener noreferrer">{refName} <FontAwesomeIcon icon={faExternalLink} size="xs" /></a>
               {index < doisList.length - 1 ? ', ' : ''}
             </span>
           );

src/components/Landing.jsx

@@ -3,6 +3,8 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
 import { Typography, Col, Row } from "antd";
+import { faExternalLink } from "@fortawesome/pro-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import SearchInput from "./SearchInput";
 import { isInternalSite } from "../libs/utils";
 import "./Landing.css";
@@ -41,13 +43,13 @@ function Landing(props) {
             <Paragraph>
               Search light and electron microscopy data sets of the Drosophila
               nervous system provided by the{" "}
-              <a href="https://www.janelia.org/project-team/flylight">
-                FlyLight
+              <a href="https://www.janelia.org/project-team/flylight" target="_blank" rel="noopener noreferrer">
+                FlyLight <FontAwesomeIcon icon={faExternalLink} size="xs" />
               </a>{" "}
-              and <a href="https://www.janelia.org/project-team/flyem">FlyEM</a>{" "}
+              and <a href="https://www.janelia.org/project-team/flyem" target="_blank" rel="noopener noreferrer">FlyEM <FontAwesomeIcon icon={faExternalLink} size="xs" /></a>{" "}
               projects at{" "}
-              <a href="https://www.janelia.org">Janelia Research Campus</a>, as well
-              as other public connectomic data sets. 
+              <a href="https://www.janelia.org" target="_blank" rel="noopener noreferrer">Janelia Research Campus <FontAwesomeIcon icon={faExternalLink} size="xs" /></a>, as well
+              as other public connectomic data sets.
               You can find similar neurons based on shape regardless of data set.
             </Paragraph>
 
@@ -67,16 +69,16 @@ function Landing(props) {
             <Row className="collections">
               <Col span={12}>
                 <b>Light Microscopy</b><br/>
-                <a href="http://gen1mcfo.janelia.org/cgi-bin/gen1mcfo.cgi">FlyLight Generation 1 MCFO</a><br/>
-                <a href="http://splitgal4.janelia.org">FlyLight Split-GAL4</a><br/>
-                <a href="https://flylight-raw.janelia.org/cgi-bin/raw.cgi">FlyLight Split-GAL4 Omnibus Broad</a><br/>
+                <a href="http://gen1mcfo.janelia.org/cgi-bin/gen1mcfo.cgi" target="_blank" rel="noopener noreferrer">FlyLight Generation 1 MCFO <FontAwesomeIcon icon={faExternalLink} size="xs" /></a><br/>
+                <a href="http://splitgal4.janelia.org" target="_blank" rel="noopener noreferrer">FlyLight Split-GAL4 <FontAwesomeIcon icon={faExternalLink} size="xs" /></a><br/>
+                <a href="https://flylight-raw.janelia.org/cgi-bin/raw.cgi" target="_blank" rel="noopener noreferrer">FlyLight Split-GAL4 Omnibus Broad <FontAwesomeIcon icon={faExternalLink} size="xs" /></a><br/>
               </Col>
               <Col span={12}>
                 <b>Electron Microscopy</b><br/>
-                <a href="https://neuprint.janelia.org/?dataset=male-cns:v0.9&qt=findneurons"> FlyEM Male CNS</a><br/>
-                <a href="https://neuprint.janelia.org/?dataset=hemibrain%3Av1.2.1&qt=findneurons">FlyEM Hemibrain</a><br/>
-                <a href="https://neuprint.janelia.org/?dataset=manc%3Av1.0&qt=findneurons">FlyEM MANC</a><br/>
-                <a href="https://codex.flywire.ai">FlyWire Brain</a><br/>
+                <a href="https://neuprint.janelia.org/?dataset=male-cns:v0.9&qt=findneurons" target="_blank" rel="noopener noreferrer"> FlyEM Male CNS <FontAwesomeIcon icon={faExternalLink} size="xs" /></a><br/>
+                <a href="https://neuprint.janelia.org/?dataset=hemibrain%3Av1.2.1&qt=findneurons" target="_blank" rel="noopener noreferrer">FlyEM Hemibrain <FontAwesomeIcon icon={faExternalLink} size="xs" /></a><br/>
+                <a href="https://neuprint.janelia.org/?dataset=manc%3Av1.0&qt=findneurons" target="_blank" rel="noopener noreferrer">FlyEM MANC <FontAwesomeIcon icon={faExternalLink} size="xs" /></a><br/>
+                <a href="https://codex.flywire.ai" target="_blank" rel="noopener noreferrer">FlyWire Brain <FontAwesomeIcon icon={faExternalLink} size="xs" /></a><br/>
               </Col>
             </Row>
 
@@ -85,7 +87,7 @@ function Landing(props) {
               search algorithms across image collections. You can also
               upload your own image to run a custom Color Depth MIP search (see About
               page). For NBLAST searching, try{" "}
-              <a href="https://www.virtualflybrain.org">Virtual Fly Brain</a>.
+              <a href="https://www.virtualflybrain.org" target="_blank" rel="noopener noreferrer">Virtual Fly Brain <FontAwesomeIcon icon={faExternalLink} size="xs" /></a>.
             </Paragraph>
 
             <Paragraph>