Add supporting links tab in publication page (#441)

* Add supporting links tab in publication page

* Use node v16.0.0

* Change tab link to supporting_links

* Add banner on supporting links tab

* Add linkout icon and change url to supporting-links

components/PublicationTabs.tsx

@@ -10,6 +10,8 @@ import { groupFilesByAttrNameAndValue } from '../lib/filterHelpers';
 import { Atlas, Entity, setTab } from '../lib/helpers';
 import styles from './PublicationTabs.module.scss';
 import { Badge } from 'react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 
 interface IPublicationTabsProps {
     router: NextRouter;
@@ -29,6 +31,7 @@ export enum PublicationTab {
     PARTICIPANTS = 'participants',
     BIOSPECIMENS = 'biospecimens',
     TOOLS = 'tools',
+    SUPPORTING_LINKS = 'supporting-links',
     // other tab names are autogenerated based on assay names
 }
 
@@ -229,6 +232,23 @@ const toolsContent: { [id: string]: JSX.Element[] } = {
         </>,
     ],
 };
+
+const supportingLinks: { [id: string]: JSX.Element[] } = {
+    vanderbilt_crc_chen_2021: [
+        <ul>
+            <li>
+                <a
+                    href="https://www.ncbi.nlm.nih.gov/geo/query/acc.cgi?acc=GSE196256"
+                    target="_blank"
+                >
+                    Mouse Mist1 and Lrig1 apc tumors (GEO: GSE196256)&nbsp;
+                    <FontAwesomeIcon icon={faExternalLinkAlt} />
+                </a>
+            </li>
+        </ul>,
+    ],
+};
+
 const PublicationTabs: React.FunctionComponent<IPublicationTabsProps> = observer(
     (props) => {
         const activeTab = props.router.query.tab || PublicationTab.ABSTRACT;
@@ -363,6 +383,26 @@ const PublicationTabs: React.FunctionComponent<IPublicationTabsProps> = observer
                                 </a>
                             </li>
                         )}
+                        {pubId && pubId in supportingLinks && (
+                            <li className="nav-item">
+                                <a
+                                    onClick={() =>
+                                        setTab(
+                                            PublicationTab.SUPPORTING_LINKS,
+                                            props.router
+                                        )
+                                    }
+                                    className={`nav-link ${
+                                        activeTab ===
+                                        PublicationTab.SUPPORTING_LINKS
+                                            ? 'active'
+                                            : ''
+                                    }`}
+                                >
+                                    Supporting Links
+                                </a>
+                            </li>
+                        )}
                     </ul>
                 </div>
 
@@ -488,6 +528,40 @@ const PublicationTabs: React.FunctionComponent<IPublicationTabsProps> = observer
                             )}
                         </div>
                     )}
+                    {activeTab === PublicationTab.SUPPORTING_LINKS && (
+                        <div
+                            className={`tab-content fileTab ${
+                                activeTab !== PublicationTab.SUPPORTING_LINKS
+                                    ? 'd-none'
+                                    : ''
+                            }`}
+                        >
+                            <div className="alert alert-info" role="alert">
+                                Supporting Links and Supporting Link
+                                Descriptions are provided by authors and are not
+                                verified by the NIH NCI or the HTAN DCC. If you
+                                think a link has been provided erroneously,
+                                please contact the corresponding author(s) and
+                                the{' '}
+                                <a
+                                    href="mailto:[email protected]"
+                                    className="alert-link"
+                                >
+                                    HTAN DCC
+                                </a>
+                                .
+                            </div>
+                            {props.router.query.id &&
+                            props.router.query.id.toString() in
+                                supportingLinks ? (
+                                supportingLinks[
+                                    props.router.query.id.toString()
+                                ]
+                            ) : (
+                                <div />
+                            )}
+                        </div>
+                    )}
                 </div>
             </>
         );

package.json

@@ -42,8 +42,8 @@
     "mobx": "^6.0.4",
     "mobx-react": "^7.0.0",
     "mobx-utils": "^5.6.2",
-    "next-mdx-remote": "^3.0.8",
     "next": "12.1",
+    "next-mdx-remote": "^3.0.8",
     "node-fetch": "^2.6.0",
     "node-sass": "6.0.1",
     "pluralize": "^8.0.0",

yarn.lock

@@ -1100,9 +1100,9 @@ camelize@^1.0.0:
   integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
 
 caniuse-lite@^1.0.30001283:
-  version "1.0.30001312"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001312.tgz#e11eba4b87e24d22697dae05455d5aea28550d5f"
-  integrity sha512-Wiz1Psk2MEK0pX3rUzWaunLTZzqS2JYZFzNKqAiJGiuxIjRPLgV6+VDPOg6lQOUxmDwhTlh198JsTTi8Hzw6aQ==
+  version "1.0.30001414"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001414.tgz"
+  integrity sha512-t55jfSaWjCdocnFdKQoO+d2ct9C59UZg4dY3OnUlSZ447r8pUtIKdp0hpAzrGFultmTC+Us+KpKi4GZl/LXlFg==
 
 caseless@~0.12.0:
   version "0.12.0"