Use react-helmet-async to update meta description and canonical link (#…

…1148)

package.json

@@ -17,7 +17,6 @@
     "@types/rc-tooltip": "^3.7.1",
     "@types/react": "16.9.34",
     "@types/react-copy-to-clipboard": "^4.3.0",
-    "@types/react-document-title": "^2.0.3",
     "@types/react-dom": "16.9.8",
     "@types/react-router-bootstrap": "^0.24.5",
     "@types/react-router-hash-link": "^1.2.1",
@@ -47,9 +46,9 @@
     "react-bootstrap": "^1.3.0",
     "react-copy-to-clipboard": "^5.0.1",
     "react-day-picker": "^7.4.8",
-    "react-document-title": "^2.0.3",
     "react-dom": "16.13.1",
     "react-ga4": "^2.1.0",
+    "react-helmet-async": "^2.0.5",
     "react-highlight-words": "^0.16.0",
     "react-hot-loader": "4.12.20",
     "react-html-parser": "^2.0.2",
@@ -83,6 +82,8 @@
   },
   "devDependencies": {
     "@babel/core": "7.6.4",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/preset-env": "7.6.3",
     "@openapitools/openapi-generator-cli": "1.0.13-4.3.1",
     "@types/classnames": "^2.2.9",

src/main/webapp/app/App.tsx

@@ -10,13 +10,12 @@ import { RouterStore, SynchronizedHistory } from 'mobx-react-router';
 import { Router } from 'react-router';
 import { syncHistoryWithStore } from 'mobx-react-router';
 import { createBrowserHistory } from 'history';
-import DocumentTitle from 'react-document-title';
-import { PAGE_TITLE, PAGE_ROUTE } from 'app/config/constants';
+import { PAGE_ROUTE } from 'app/config/constants';
 import { action } from 'mobx';
 import autobind from 'autobind-decorator';
-import { getPageTitle } from 'app/shared/utils/Utils';
 import { setRecaptchaToken } from './indexUtils';
 import { AppConfig } from 'app/appConfig';
+import { HelmetProvider } from 'react-helmet-async';
 
 export type Stores = {
   appStore: AppStore;
@@ -101,7 +100,7 @@ class App extends React.Component {
     }
 
     return (
-      <DocumentTitle title={getPageTitle(PAGE_TITLE.HOME, false)}>
+      <HelmetProvider>
         <>
           {
             <Provider {...this.stores}>
@@ -111,7 +110,7 @@ class App extends React.Component {
             </Provider>
           }
         </>
-      </DocumentTitle>
+      </HelmetProvider>
     );
   }
 }

src/main/webapp/app/config/constants.tsx

@@ -510,6 +510,7 @@ export enum PAGE_TITLE {
   ADMIN_COMPANY_DETAILS = 'Companies',
   API_ACCESS = 'API Access',
   CANCER_GENES = 'OncoKB™ Cancer Gene List',
+  CDX = 'FDA Cleared or Approved Companion Diagnostic Devices',
   FAQ = 'Frequently Asked Question',
   FDA_RECOGNITION = 'OncoKB™ is now an FDA-recognized Public Human Genetic Variant Database*',
   HOME = "OncoKB™ - MSK's Precision Oncology Knowledge Base",
@@ -524,13 +525,29 @@ export enum PAGE_TITLE {
   LOGOUT = 'Log out',
   LOGIN = 'Log in',
   NEWS = 'Latest News',
+  ONCOLOGY_TX = 'FDA-Approved Oncology Therapies',
   REGISTER = 'Register',
   TEAM = 'OncoKB™ Team',
   TERMS = 'Terms of Use',
   SOP = 'OncoKB™ Standard Operating Procedure',
   YEAR_END_SUMMARY = 'Year End Summary',
 }
 
+export enum PAGE_DESCRIPTION {
+  ABOUT = 'Learn about OncoKB, a precision oncology knowledge base dedicated to providing curated, evidence-based information on cancer gene mutations. Explore how our expert-driven insights empower clinicians, researchers, and patients in advancing cancer treatment.',
+  ACTIONABLE_GENES = 'OncoKB™ Actionable Genes includes therapeutic, diagnostic and prognostic clinical implications. We also list the FDA-Recognized Content.',
+  API_ACCESS = 'Access OncoKB™ content through standard REST API. The API is defined and organized using swagger annotation. MAF file annotation is also possible by using OncoKB™ Annotator which is fully supported by using OncoKB™ REST APIs.',
+  CANCER_GENES = 'OncoKB™ Cancer Gene List consists with more than one thousand genes based on their inclusion in various different sequencing panels, the Sanger Cancer Gene Census, or Vogelstein et al. (2013).',
+  CDX = 'Companion diagnostic devices (CDx) that are US- Food and Drug Administration (FDA) approved or cleared to guide treatment decisions in cancer for the safe and efficient use of oncology drugs (per the FDA’s List of Cleared or Approved Companion Diagnostic Devices (In Vitro and Imaging Tools)). Only the companion diagnostics that are included in the FDA-drug labels of OncoKB™ level 1 precision oncology drugs and determine the list of OncoKB™ level 1 biomarkers are listed below.',
+  FAQ = 'Most frequently asked questions compiled by OncoKB™ team members.',
+  FDA_RECOGNITION = 'As the first somatic human variant database to be recognized by the FDA, OncoKB™ is dedicated to providing curated, evidence-based information on cancer gene mutations.',
+  HOME = 'OncoKB™ is a precision oncology knowledge base developed at Memorial Sloan Kettering Cancer Center that contains biological and clinical information about genomic alterations in cancer.',
+  LEVELS = 'To communicate the clinical utility of individual mutant alleles consistently, OncoKB developed a levels of evidence classification system. It takes into account the site of tumor origin, by recognizing that the effects of targeted inhibitors vary by tumor lineage, even in cancers that share the same mutant allele',
+  ONCOLOGY_TX = 'OncoKB™ Oncology Therapies list includes US Food and Drug Administration (FDA)-approved oncology drugs post June 1998 which are categorized by drug class and mechanism of action. Each drug is further classified as to whether it qualifies as a targeted therapy or precision oncology therapy based on Suehnholz et al., Cancer Discovery 2023.',
+  TEAM = 'OncoKB™ is developed and maintained by the Knowledge Systems group in the Marie Josée and Henry R. Kravis Center for Molecular Oncology at Memorial Sloan Kettering Cancer Center.',
+  TERMS = 'OncoKB™ provides different license models for academic research and commercial usages.',
+}
+
 export enum PAGE_ROUTE {
   LOGIN = '/login',
   LOGOUT = '/logout',

src/main/webapp/app/pages/AboutPage.tsx

@@ -9,11 +9,11 @@ import {
   BILIBILI_VIDEO_IDS,
   LEVEL_TYPES,
   ONCOKB_TM,
+  PAGE_DESCRIPTION,
   PAGE_ROUTE,
   PAGE_TITLE,
   YOUTUBE_VIDEO_IDS,
 } from 'app/config/constants';
-import DocumentTitle from 'react-document-title';
 import { IReactionDisposer, observable } from 'mobx';
 import Tabs from 'react-responsive-tabs';
 import Iframe from 'react-iframe';
@@ -25,6 +25,7 @@ import {
 } from 'app/shared/utils/Utils';
 import OptimizedImage from 'app/shared/image/OptimizedImage';
 import { LevelOfEvidencePageLink } from 'app/shared/links/LevelOfEvidencePageLink';
+import { Helmet } from 'react-helmet-async';
 
 type AboutPageProps = { appStore: AppStore; routing: RouterStore };
 
@@ -124,57 +125,59 @@ export class AboutPage extends React.Component<AboutPageProps> {
 
   render() {
     return (
-      <DocumentTitle title={getPageTitle(PAGE_TITLE.ABOUT)}>
-        <>
-          <Row>
-            <Col md={6} xs={12}>
-              <h2 className={'mt-1'}>About {ONCOKB_TM}</h2>
-              <p className={'mt-3'}>
-                {ONCOKB_TM} is a precision oncology knowledge base developed at
-                Memorial Sloan Kettering Cancer Center that contains biological
-                and clinical information about genomic alterations in cancer.
-              </p>
-              <p>
-                Alteration- and tumor type-specific therapeutic implications are
-                classified using the{' '}
-                <LevelOfEvidencePageLink levelType={LEVEL_TYPES.TX}>
-                  {ONCOKB_TM} Levels of Evidence
-                </LevelOfEvidencePageLink>{' '}
-                system, which assigns clinical actionability to individual
-                mutational events.
-              </p>
-              <p>
-                For additional details about the {ONCOKB_TM} curation process,
-                please refer to the version-controlled{' '}
-                <Link to={PAGE_ROUTE.SOP}>
-                  {ONCOKB_TM} Curation Standard Operating Procedure
-                </Link>
-                . <CitationText />
-              </p>
-            </Col>
-            <Col md={6} xs={12}>
-              <Tabs
-                transform={false}
-                items={this.getVideoTabs()}
-                selectedTabKey={this.selectedVideoTabKey}
-                onChange={(tabKey: VIDEO_TAB_EKY) => {
-                  this.selectedVideoTabKey = tabKey;
-                }}
-              />
-            </Col>
-          </Row>
-          <Row>
-            <Col>
-              <div className={'mt-2'}>
-                <OptimizedImage src={processImg} style={{ width: '100%' }} />
-                <div className={'text-center'}>
-                  <h5>Overview of {ONCOKB_TM} Process</h5>
-                </div>
+      <>
+        <Helmet>
+          <title>{getPageTitle(PAGE_TITLE.ABOUT)}</title>
+          <meta name="description" content={PAGE_DESCRIPTION.ABOUT}></meta>
+        </Helmet>
+        <Row>
+          <Col md={6} xs={12}>
+            <h2 className={'mt-1'}>About {ONCOKB_TM}</h2>
+            <p className={'mt-3'}>
+              {ONCOKB_TM} is a precision oncology knowledge base developed at
+              Memorial Sloan Kettering Cancer Center that contains biological
+              and clinical information about genomic alterations in cancer.
+            </p>
+            <p>
+              Alteration- and tumor type-specific therapeutic implications are
+              classified using the{' '}
+              <LevelOfEvidencePageLink levelType={LEVEL_TYPES.TX}>
+                {ONCOKB_TM} Levels of Evidence
+              </LevelOfEvidencePageLink>{' '}
+              system, which assigns clinical actionability to individual
+              mutational events.
+            </p>
+            <p>
+              For additional details about the {ONCOKB_TM} curation process,
+              please refer to the version-controlled{' '}
+              <Link to={PAGE_ROUTE.SOP}>
+                {ONCOKB_TM} Curation Standard Operating Procedure
+              </Link>
+              . <CitationText />
+            </p>
+          </Col>
+          <Col md={6} xs={12}>
+            <Tabs
+              transform={false}
+              items={this.getVideoTabs()}
+              selectedTabKey={this.selectedVideoTabKey}
+              onChange={(tabKey: VIDEO_TAB_EKY) => {
+                this.selectedVideoTabKey = tabKey;
+              }}
+            />
+          </Col>
+        </Row>
+        <Row>
+          <Col>
+            <div className={'mt-2'}>
+              <OptimizedImage src={processImg} style={{ width: '100%' }} />
+              <div className={'text-center'}>
+                <h5>Overview of {ONCOKB_TM} Process</h5>
               </div>
-            </Col>
-          </Row>
-        </>
-      </DocumentTitle>
+            </div>
+          </Col>
+        </Row>
+      </>
     );
   }
 }

src/main/webapp/app/pages/CancerGenesPage.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { DefaultTooltip, remoteData } from 'cbioportal-frontend-commons';
+import { remoteData } from 'cbioportal-frontend-commons';
 import { CancerGene, CuratedGene } from 'app/shared/api/generated/OncoKbAPI';
 import { inject, observer } from 'mobx-react';
 import { defaultSortMethod } from 'app/shared/utils/ReactTableUtils';
@@ -18,16 +18,17 @@ import {
   MSK_IMPACT_TM,
   ONCOKB_TM,
   TABLE_COLUMN_KEY,
+  PAGE_DESCRIPTION,
 } from 'app/config/constants';
 import AppStore from 'app/store/AppStore';
 import oncokbClient from 'app/shared/api/oncokbClientInstance';
-import DocumentTitle from 'react-document-title';
 import { DownloadButtonWithPromise } from 'app/components/downloadButtonWithPromise/DownloadButtonWithPromise';
 import { FeedbackIcon } from 'app/components/feedback/FeedbackIcon';
 import { FeedbackType } from 'app/components/feedback/types';
 import WithSeparator from 'react-with-separator';
 import GeneAliasesDescription from 'app/shared/texts/GeneAliasesDescription';
 import CommonInfoIcon from 'app/shared/icons/InfoIcon';
+import { Helmet } from 'react-helmet-async';
 
 const InfoIcon = (props: { overlay: string | JSX.Element }) => {
   return (
@@ -436,7 +437,11 @@ export default class CancerGenesPage extends React.Component<{
 
   render() {
     return (
-      <DocumentTitle title={getPageTitle(PAGE_TITLE.CANCER_GENES)}>
+      <>
+        <Helmet>
+          <title>{getPageTitle(PAGE_TITLE.CANCER_GENES)}</title>
+          <meta name="description" content={PAGE_DESCRIPTION.CANCER_GENES} />
+        </Helmet>
         <div className="cancerGenes">
           <Row>
             <Col className="col-auto mr-auto">
@@ -496,7 +501,7 @@ export default class CancerGenesPage extends React.Component<{
             </Col>
           </Row>
         </div>
-      </DocumentTitle>
+      </>
     );
   }
 }

src/main/webapp/app/pages/FAQPage.tsx

@@ -1,22 +1,26 @@
 import * as React from 'react';
 import Iframe from 'react-iframe';
 import { inject } from 'mobx-react';
-import DocumentTitle from 'react-document-title';
-import { PAGE_TITLE } from 'app/config/constants';
+import { PAGE_DESCRIPTION, PAGE_TITLE } from 'app/config/constants';
 import { getPageTitle } from 'app/shared/utils/Utils';
+import { Helmet } from 'react-helmet-async';
 
 const FAQPageContent: React.FunctionComponent<{
   userMessageBannerEnabled: boolean;
 }> = props => {
   return (
-    <DocumentTitle title={getPageTitle(PAGE_TITLE.FAQ)}>
+    <>
+      <Helmet>
+        <title>{getPageTitle(PAGE_TITLE.FAQ)}</title>
+        <meta name="description" content={PAGE_DESCRIPTION.FAQ} />
+      </Helmet>
       <Iframe
         url="https://faq.oncokb.org"
         className={
           props.userMessageBannerEnabled ? 'faq-iframe-high-top' : 'faq-iframe'
         }
       />
-    </DocumentTitle>
+    </>
   );
 };
 const FAQPage = inject((stores: any) => ({

src/main/webapp/app/pages/HomePage.tsx

@@ -19,10 +19,12 @@ import {
   LEVEL_TYPE_NAMES,
   LEVEL_TYPES,
   LEVELS,
+  PAGE_DESCRIPTION,
   PAGE_ROUTE,
+  PAGE_TITLE,
 } from 'app/config/constants';
 import { LevelButton } from 'app/components/levelButton/LevelButton';
-import { levelOfEvidence2Level } from 'app/shared/utils/Utils';
+import { getPageTitle, levelOfEvidence2Level } from 'app/shared/utils/Utils';
 import { RouterStore } from 'mobx-react-router';
 import { CitationText } from 'app/components/CitationText';
 import AppStore from 'app/store/AppStore';
@@ -33,6 +35,8 @@ import { FDA_L1_DISABLED_BTN_TOOLTIP } from 'app/pages/genePage/FdaUtils';
 import { COLOR_DARK_BLUE } from 'app/config/theme';
 import WindowStore from 'app/store/WindowStore';
 import { uniq } from 'app/shared/utils/LodashUtils';
+import { Helmet } from 'react-helmet-async';
+import { getAlterationPageLink } from 'app/shared/utils/UrlUtils';
 
 interface IHomeProps {
   content: string;
@@ -188,6 +192,10 @@ class HomePage extends React.Component<IHomeProps, {}> {
     }
     return (
       <div className="home">
+        <Helmet>
+          <title>{getPageTitle(PAGE_TITLE.HOME, false)}</title>
+          <meta name="description" content={PAGE_DESCRIPTION.HOME} />
+        </Helmet>
         <Row className="mb-5">
           <Col
             md={8}

src/main/webapp/app/pages/LevelOfEvidencePage.tsx

@@ -8,8 +8,8 @@ import {
   LEVEL_TYPES,
   ONCOKB_TM,
   PAGE_ROUTE,
+  PAGE_DESCRIPTION,
 } from 'app/config/constants';
-import DocumentTitle from 'react-document-title';
 import { inject, observer } from 'mobx-react';
 import {
   action,
@@ -27,6 +27,7 @@ import WindowStore from 'app/store/WindowStore';
 import { Linkout } from 'app/shared/links/Linkout';
 import OptimizedImage from 'app/shared/image/OptimizedImage';
 import { getPageTitle } from 'app/shared/utils/Utils';
+import { Helmet } from 'react-helmet-async';
 
 type LevelOfEvidencePageProps = {
   routing: RouterStore;
@@ -378,7 +379,11 @@ export default class LevelOfEvidencePage extends React.Component<
     });
 
     return (
-      <DocumentTitle title={getPageTitle(PAGE_TITLE[this.version])}>
+      <>
+        <Helmet>
+          <title>{getPageTitle(PAGE_TITLE[this.version])}</title>
+          <meta name="description" content={PAGE_DESCRIPTION.LEVELS}></meta>
+        </Helmet>
         <Row className="justify-content-center">
           <Col lg={10}>
             <div className="levels-of-evidence">
@@ -395,7 +400,7 @@ export default class LevelOfEvidencePage extends React.Component<
             </div>
           </Col>
         </Row>
-      </DocumentTitle>
+      </>
     );
   }
 }