Added Cassie

oncokb · jfkonecn · Jan 24, 2025 · Jan 27, 2025 · fd292a0b76ce6303ab22bf4b345ce524b09ce01d
commit fd292a0b76ce6303ab22bf4b345ce524b09ce01d
diff --git a/src/main/webapp/app/components/Footer.module.scss b/src/main/webapp/app/components/Footer.module.scss
@@ -8,21 +8,45 @@
   position: absolute;
   bottom: 0;
 
-  a {
+  a,
+  button {
     color: white;
   }
 
-  a:hover {
+  a:hover,
+  button:hover {
     color: white;
   }
+
+  button {
+    background: none;
+  }
 }
 
-.footerAList > a {
+.footerAList > a,
+.footerAList > button {
   line-height: 1rem;
   border-right: 0.5px solid #fff;
   padding: 0 0.5rem;
 
   &:last-child {
     border: 0;
   }
+  @media (min-width: 1050px) {
+    & > :not(:global(.d-lg-none)):last-of-type {
+      border: 0;
+    }
+  }
+}
+.footerAList > button:hover {
+  text-decoration: underline;
+}
+
+.internalLinks {
+  text-align: center;
+  @media (min-width: 1050px) {
+    & {
+      text-align: right;
+    }
+  }
 }
diff --git a/src/main/webapp/app/components/Footer.tsx b/src/main/webapp/app/components/Footer.tsx
@@ -16,9 +16,34 @@ import {
   LinkedInLink,
   UserGoogleGroupLink,
 } from 'app/shared/links/SocialMediaLinks';
+import { notifyError } from 'app/shared/utils/NotificationUtils';
+
+function Privacy({ childClassName }: { childClassName: string }) {
+  return (
+    <>
+      <Link className={childClassName} to={PAGE_ROUTE.PRIVACY}>
+        Privacy
+      </Link>
+      <button
+        className={childClassName}
+        onClick={() => {
+          const widget = (window as any)?.CassieWidgetLoader?.Widget;
+          const openModal = widget?.showModal as unknown;
+          if (typeof openModal === 'function') {
+            openModal.bind(widget)();
+          } else {
+            notifyError(new Error('Failed to load cookie settings'));
+          }
+        }}
+      >
+        Cookie Settings
+      </button>
+    </>
+  );
+}
 
 class Footer extends React.Component<{ lastDataUpdate: string }> {
-  public get externalLinks() {
+  public get top() {
     return (
       <>
         <div className={'mb-2'}>
@@ -50,41 +75,14 @@ class Footer extends React.Component<{ lastDataUpdate: string }> {
     );
   }
 
-  public get internalLinks() {
-    return (
-      <>
-        <div className={classnames(styles.footerAList)}>
-          <Link to={PAGE_ROUTE.TERMS}>Terms of Use</Link>
-          <ContactLink emailSubject={'Contact us'}>Contact Us</ContactLink>
-          <LinkedInLink short />
-          <Linkout link={API_DOCUMENT_LINK}>API</Linkout>
-        </div>
-        <div className={classnames(styles.footerAList)}>
-          <Link to={PAGE_ROUTE.NEWS}>
-            Last data update: {this.props.lastDataUpdate}
-          </Link>
-        </div>
-      </>
-    );
-  }
-
   public render() {
     return (
       <footer className={classnames('footer', styles.footer)}>
         <Container>
           <Row className="text-center mb-2">
-            <Col>{this.externalLinks}</Col>
+            <Col>{this.top}</Col>
           </Row>
           <Row className="text-center">
-            <Col
-              lg
-              md={12}
-              className={
-                'd-flex flex-column justify-content-center align-items-center my-1'
-              }
-            >
-              {this.internalLinks}
-            </Col>
             <Col
               lg
               md={12}
@@ -95,16 +93,63 @@ class Footer extends React.Component<{ lastDataUpdate: string }> {
               <MskccLogo imageHeight={50} />
             </Col>
             <Col
-              lg
+              lg={8}
               md={12}
               className={
                 'd-flex flex-column justify-content-center align-items-center my-1'
               }
             >
-              <div>
-                &copy; {new Date().getFullYear()} Memorial Sloan Kettering
-                Cancer Center
-              </div>
+              <Container>
+                <Row>
+                  <Col
+                    lg
+                    md={12}
+                    className={
+                      'd-flex flex-column justify-content-center align-items-left my-1'
+                    }
+                  >
+                    <div
+                      className={classnames(
+                        styles.footerAList,
+                        styles.internalLinks
+                      )}
+                    >
+                      <Link to={PAGE_ROUTE.TERMS}>Terms of Use</Link>
+                      <ContactLink emailSubject={'Contact us'}>
+                        Contact Us
+                      </ContactLink>
+                      <LinkedInLink short />
+                      <Linkout link={API_DOCUMENT_LINK}>API</Linkout>
+                      <Privacy childClassName={classnames('d-inline')} />
+                    </div>
+                  </Col>
+                </Row>
+                <Row>
+                  <Col>
+                    <div
+                      className={classnames(styles.footerAList, styles.news)}
+                    >
+                      <Link to={PAGE_ROUTE.NEWS}>
+                        Last data update: {this.props.lastDataUpdate}
+                      </Link>
+                    </div>
+                  </Col>
+                  <Col
+                    lg
+                    md={12}
+                    className={
+                      'd-flex flex-column justify-content-center align-items-center my-1'
+                    }
+                  >
+                    <div className={classnames(styles.footerAList)}>
+                      <div>
+                        &copy; {new Date().getFullYear()} Memorial Sloan
+                        Kettering Cancer Center
+                      </div>
+                    </div>
+                  </Col>
+                </Row>
+              </Container>
             </Col>
           </Row>
         </Container>

diff --git a/src/main/webapp/app/config/constants.tsx b/src/main/webapp/app/config/constants.tsx
@@ -564,6 +564,7 @@ export enum PAGE_TITLE {
   LOGIN = 'Log in',
   NEWS = 'Latest News',
   ONCOLOGY_TX = 'FDA-Approved Oncology Therapies',
+  PRIVACY = 'OncoKB™ Digital Tracker Governance Privacy Policy',
   REGISTER = 'Register',
   TEAM = 'OncoKB™ Team',
   TERMS = 'Terms of Use',
@@ -581,6 +582,7 @@ export enum PAGE_DESCRIPTION {
   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',
+  PRIVACY = "OncoKB's Digital Tracker Governance Privacy Policy",
   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.',
@@ -613,6 +615,7 @@ export enum PAGE_ROUTE {
   HOME = '/',
   ABOUT = '/about',
   TERMS = '/terms',
+  PRIVACY = '/privacy',
   SOP = '/sop',
   TEAM = '/team',
   YEAR_END_SUMMARY = '/year-end-summary',

diff --git a/src/main/webapp/app/layout.scss b/src/main/webapp/app/layout.scss
@@ -37,7 +37,7 @@ $view-wrapper-default-p-y: 2rem !default;
 }
 
 @include media-breakpoint-up(xs) {
-  $footer-height: 22rem;
+  $footer-height: 26rem;
   $header-height: 4.5rem;
   @include sticky-footer(1rem, $footer-height);
   @include sticky-panel-under-header($header-height);
@@ -70,7 +70,7 @@ $view-wrapper-default-p-y: 2rem !default;
 }
 
 @include media-breakpoint-up(sm) {
-  $footer-height: 17rem;
+  $footer-height: 19rem;
   @include sticky-footer($view-wrapper-default-p-y, $footer-height);
 }
 

diff --git a/src/main/webapp/app/pages/PrivacyPage.module.scss b/src/main/webapp/app/pages/PrivacyPage.module.scss
@@ -0,0 +1,5 @@
+.trackerList {
+  & > section {
+    margin-top: 32px;
+  }
+}
diff --git a/src/main/webapp/app/pages/PrivacyPage.tsx b/src/main/webapp/app/pages/PrivacyPage.tsx
@@ -0,0 +1,150 @@
+import * as React from 'react';
+import { Helmet } from 'react-helmet-async';
+import { Row, Col } from 'react-bootstrap';
+import { getPageTitle } from 'app/shared/utils/Utils';
+import { PAGE_TITLE, PAGE_DESCRIPTION, ONCOKB_TM } from 'app/config/constants';
+import styles from './PrivacyPage.module.scss';
+import classNames from 'classnames';
+
+const tempText = `Lorem ipsum odor amet, consectetuer adipiscing elit. Erat montes dolor faucibus vehicula nec consectetur habitasse per. Suspendisse per ligula per eros blandit nunc amet. Montes nisi ultricies primis finibus malesuada natoque. Dictumst amet cras egestas sodales lectus. Est cubilia est fermentum augue id arcu. Magna dolor dui lorem class tincidunt auctor. Nulla lectus commodo non per quisque ante maecenas platea. Mollis etiam sollicitudin id cras himenaeos aliquet.`;
+
+export default function PrivacyPage() {
+  return (
+    <>
+      <Helmet>
+        <title>{getPageTitle(PAGE_TITLE.PRIVACY)}</title>
+        <meta name="description" content={PAGE_DESCRIPTION.PRIVACY}></meta>
+      </Helmet>
+      <Row>
+        <Col className={classNames(styles.trackerList)}>
+          <h2 className="mt-1">
+            {ONCOKB_TM} Digital Tracker Governance Privacy Policy
+          </h2>
+          <section>
+            <h3>1. Introduction</h3>
+            <p>{tempText}</p>
+          </section>
+          <section>
+            <h3>2. Applicability</h3>
+            <p>{tempText}</p>
+          </section>
+          <section>
+            <h3>3. Policy</h3>
+            <section>
+              <h4>A. Minimum Legal Requirements</h4>
+              <p>{tempText}</p>
+              <p>{tempText}</p>
+              <p>{tempText}</p>
+              <p>{tempText}</p>
+              <section>
+                <h5>User in the United States</h5>
+                <p>{tempText}</p>
+              </section>
+              <section>
+                <h5>Users visiting from outside the United States</h5>
+                <p>{tempText}</p>
+              </section>
+              <section>
+                <h5>Exception for Strictly Necessary Trackers</h5>
+                <p>{tempText}</p>
+              </section>
+            </section>
+            <section>
+              <h4>B. Minimum Required Platform Capabilities</h4>
+              <p>{tempText}</p>
+              <section>
+                <h5>Banner/Notice Functionality</h5>
+                <p>{tempText}</p>
+              </section>
+              <section>
+                <h5>Tracker Classification</h5>
+                <p>{tempText}</p>
+                <ul>
+                  <li>
+                    <b>
+                      <em>Strictly Necessary: </em>
+                    </b>
+                    {tempText}
+                  </li>
+                  <li>
+                    <b>
+                      <em>Performance: </em>
+                    </b>
+                    {tempText}
+                  </li>
+                  <li>
+                    <b>
+                      <em>Functionality: </em>
+                    </b>
+                    {tempText}
+                  </li>
+                  <li>
+                    <b>
+                      <em>Marketing: </em>
+                    </b>
+                    {tempText}
+                  </li>
+                </ul>
+                <p>{tempText}</p>
+              </section>
+              <section>
+                <h5>Cross-Domain Consent Tracking</h5>
+                <p>{tempText}</p>
+              </section>
+              <section>
+                <h5>Ongoing Scanning and Monitoring</h5>
+                <p>{tempText}</p>
+              </section>
+            </section>
+            <section>
+              <h4>C. Ownership</h4>
+              <p>{tempText}</p>
+            </section>
+            <section>
+              <h4>D. Deployment and Monitoring</h4>
+              <p>{tempText}</p>
+              <section>
+                <h5>MSK Properties</h5>
+                <p>{tempText}</p>
+              </section>
+              <section>
+                <h5>Detecting and Controlling Trackers</h5>
+                <p>{tempText}</p>
+              </section>
+              <section>
+                <h5>Ongoing Human Oversight</h5>
+                <p>{tempText}</p>
+              </section>
+            </section>
+            <section>
+              <h4>E. Authenticated MSK Properties</h4>
+              <p>{tempText}</p>
+            </section>
+            <section>
+              <h4>F. Unauthenticated MSK Properties</h4>
+              <p>{tempText}</p>
+            </section>
+            <section>
+              <h4>G. Privacy Policies</h4>
+              <p>{tempText}</p>
+              <p>{tempText}</p>
+            </section>
+            <section>
+              <h4>H. Consultation with Privacy-Legal Team</h4>
+              <p>{tempText}</p>
+              <p>{tempText}</p>
+            </section>
+          </section>
+          <section>
+            <h3>4. Reference &amp; Related Policies</h3>
+            <ul>
+              <li>{tempText}</li>
+              <li>{tempText}</li>
+              <li>{tempText}</li>
+            </ul>
+          </section>
+        </Col>
+      </Row>
+    </>
+  );
+}
diff --git a/src/main/webapp/app/pages/aboutGroup/AboutPageNavTab.tsx b/src/main/webapp/app/pages/aboutGroup/AboutPageNavTab.tsx
@@ -13,6 +13,7 @@ import { LocationDescriptorObject } from 'history';
 import classnames from 'classnames';
 import { getPageTitle } from 'app/shared/utils/Utils';
 import { Helmet } from 'react-helmet-async';
+import PrivacyPage from '../PrivacyPage';
 
 type AboutPageNavTabProps = { appStore: AppStore; routing: RouterStore };
 
@@ -21,6 +22,7 @@ export enum TabKey {
   TEAM = PAGE_ROUTE.TEAM,
   FDA_RECOGNITION = PAGE_ROUTE.FDA_RECOGNITION,
   SOP = PAGE_ROUTE.SOP,
+  PRIVACY = PAGE_ROUTE.PRIVACY,
 }
 
 const YEAR_END_SUMMARY_KEY_DIVIDER = '+';
@@ -105,6 +107,9 @@ export class AboutPageNavTab extends React.Component<AboutPageNavTabProps> {
                 <Nav.Item>
                   <Nav.Link eventKey={TabKey.SOP}>SOP</Nav.Link>
                 </Nav.Item>
+                <Nav.Item>
+                  <Nav.Link eventKey={TabKey.PRIVACY}>Privacy</Nav.Link>
+                </Nav.Item>
               </Nav>
             </Col>
             <Col sm={10}>
@@ -141,6 +146,9 @@ export class AboutPageNavTab extends React.Component<AboutPageNavTabProps> {
                     </h2>
                   </div>
                 </Tab.Pane>
+                <Tab.Pane eventKey={TabKey.PRIVACY}>
+                  <PrivacyPage />
+                </Tab.Pane>
               </Tab.Content>
             </Col>
           </Row>

diff --git a/src/main/webapp/app/routes/routes.tsx b/src/main/webapp/app/routes/routes.tsx
@@ -220,6 +220,11 @@ const AppRoutes = (props: {
         />
         <OncokbRoute exact path={PAGE_ROUTE.TEAM} component={AboutPageNavTab} />
         <OncokbRoute exact path={PAGE_ROUTE.SOP} component={AboutPageNavTab} />
+        <OncokbRoute
+          exact
+          path={PAGE_ROUTE.PRIVACY}
+          component={AboutPageNavTab}
+        />
         <OncokbRoute
           exact
           path={PAGE_ROUTE.YEAR_END_SUMMARY}

diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html
@@ -33,6 +33,9 @@
     <link rel="preload" as="font" href="content/Gotham-Black.otf" type="font/otf" crossorigin="anonymous"/>
     <link rel="manifest" href="manifest.webapp" />
     <link rel="stylesheet" href="content/css/loading.css">
+    <script>
+      function a(b){try{var c=new URL(b).hostname,d=c.split('.'),f=d.length-1;return d.splice(d.length>=3&&(d[f]+d[f-1]).length<=5?-3:-2).join('.')}catch(g){return null}}function h(i,j,k){var l=document.createElement('script');l.src=i,l.onload=function(){j&&j()},l.onerror=function(){k&&k()},document.head.appendChild(l)}function m(){var n={widgetProfileId:4,languageCode:"",licenseKey:"F6644E2E-E9BA-4B04-8F70-EB4370598BDD",region:"use",environment:"production",crossDomainConsent:false};window.CassieWidgetLoader=new CassieWidgetLoaderModule(n)}function o(){var p=a(window.location.href),q=p?'https://cscript-cdn-use.'+p+'/loader.js':'https://cscript-cdn-use.cassiecloud.com/loader.js';h(q,function(){window.cassieResourceRootDomain=p,m()},function(){h('https://cscript-cdn-use.cassiecloud.com/loader.js',function(){m()})})}o();
+    </script>
     <!-- jhipster-needle-add-resources-to-root - JHipster will add new resources here -->
 </head>
 <body>