show coming soon for clinical implications section for germline (oncokb#1280)

Author: bprize15

src/main/webapp/app/components/tag/ComingSoonTag.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styles from './tag.module.scss';
+import classnames from 'classnames';
+
+export interface IComingSoonTagProps {
+  size?: 'sm' | 'lg';
+  className?: string;
+}
+
+export default function ComingSoonTag({
+  size = 'sm',
+  className,
+}: IComingSoonTagProps) {
+  return (
+    <span
+      className={classnames(
+        size === 'sm' ? styles.comingSoonTagSmall : styles.comingSoonTagLarge,
+        className
+      )}
+    >
+      Coming Soon!
+    </span>
+  );
+}

src/main/webapp/app/components/tag/tag.module.scss

@@ -48,3 +48,18 @@
   color: #684e00;
   background: #fcf4d6;
 }
+
+.comingSoonTagSmall {
+  @extend .tag;
+  color: $primary;
+  border: var(--radius-2, 2px) solid var(--Color-11, $primary);
+}
+
+.comingSoonTagLarge {
+  @extend .tag;
+  color: white;
+  font-size: 18px;
+  background: $primary;
+  padding: 4px var(--radius-8, 0.5rem);
+  border: var(--radius-2, 2px) solid var(--Color-11, $primary);
+}

src/main/webapp/app/pages/somaticGermlineAlterationPage/SomaticGermlineAlterationPage.tsx

@@ -665,31 +665,44 @@ export class SomaticGermlineAlterationPage extends React.Component<
                         />
                       </>
                     )}
-                  <MiniNavBarHeader id="clinical-implications">
-                    Clinical Implications for this Biomarker
-                  </MiniNavBarHeader>
-                  <SomaticGermlineAlterationView
-                    appStore={this.props.appStore}
-                    hugoSymbol={this.store.hugoSymbol}
-                    alteration={this.store.alterationName}
-                    alterationQuery={this.store.alterationQuery}
-                    germline={this.store.germline}
-                    matchedAlteration={this.store.alteration.result}
-                    tumorType={this.store.cancerTypeName}
-                    onChangeTumorType={this.onChangeTumorType.bind(this)}
-                    annotation={this.store.annotationData.result}
-                    biologicalAlterations={
-                      this.store.biologicalAlterations.result
-                    }
-                    relevantAlterations={undefined}
-                    fdaImplication={this.fdaImplication}
-                    therapeuticImplications={this.therapeuticImplications}
-                    diagnosticImplications={this.diagnosticImplications}
-                    prognosticImplications={this.prognosticImplications}
-                    defaultSelectedTab={this.selectedTab}
-                    onChangeTab={this.onChangeTab}
-                    routing={this.props.routing}
-                  />
+                  <div className="d-flex align-items-center">
+                    <MiniNavBarHeader
+                      id="clinical-implications"
+                      comingSoon={this.store.germline}
+                    >
+                      <span
+                        className={
+                          this.store.germline ? 'text-secondary' : undefined
+                        }
+                      >
+                        Clinical Implications for this Biomarker
+                      </span>
+                    </MiniNavBarHeader>
+                  </div>
+                  {!this.store.germline && (
+                    <SomaticGermlineAlterationView
+                      appStore={this.props.appStore}
+                      hugoSymbol={this.store.hugoSymbol}
+                      alteration={this.store.alterationName}
+                      alterationQuery={this.store.alterationQuery}
+                      germline={this.store.germline}
+                      matchedAlteration={this.store.alteration.result}
+                      tumorType={this.store.cancerTypeName}
+                      onChangeTumorType={this.onChangeTumorType.bind(this)}
+                      annotation={this.store.annotationData.result}
+                      biologicalAlterations={
+                        this.store.biologicalAlterations.result
+                      }
+                      relevantAlterations={undefined}
+                      fdaImplication={this.fdaImplication}
+                      therapeuticImplications={this.therapeuticImplications}
+                      diagnosticImplications={this.diagnosticImplications}
+                      prognosticImplications={this.prognosticImplications}
+                      defaultSelectedTab={this.selectedTab}
+                      onChangeTab={this.onChangeTab}
+                      routing={this.props.routing}
+                    />
+                  )}
                 </Col>
               </Row>
             </Container>

src/main/webapp/app/shared/nav/MiniNavBarHeader.tsx

@@ -1,17 +1,21 @@
 import React, { useContext, useEffect } from 'react';
 import { StickyMiniNavBarContext } from './StickyMiniNavBar';
+import classnames from 'classnames';
+import ComingSoonTag from 'app/components/tag/ComingSoonTag';
 
 type IMiniNavBarHeader = {
   id: string;
   children: React.ReactNode;
   className?: string;
   showOnPage?: boolean;
+  comingSoon?: boolean;
 };
 export default function MiniNavBarHeader({
   id,
   children,
   className = 'mt-5',
   showOnPage = true,
+  comingSoon = false,
 }: IMiniNavBarHeader) {
   const { invalidateCache } = useContext(StickyMiniNavBarContext);
   useEffect(() => {
@@ -33,8 +37,15 @@ export default function MiniNavBarHeader({
     );
   }
   return (
-    <h3 id={id} className={className} mini-nav-bar-header="">
-      {children}
+    <h3 className={classnames('d-flex align-items-center', className)}>
+      <span
+        id={id}
+        mini-nav-bar-header=""
+        coming-soon={comingSoon ? '' : undefined}
+      >
+        {children}
+      </span>
+      {comingSoon && <ComingSoonTag className="ml-2" size="lg" />}
     </h3>
   );
 }

src/main/webapp/app/shared/nav/StickyMiniNavBar.tsx

@@ -11,6 +11,7 @@ import { Row, Col, Container } from 'react-bootstrap';
 import styles from './StickyMiniNavBar.module.scss';
 import classNames from 'classnames';
 import classnames from 'classnames';
+import ComingSoonTag from 'app/components/tag/ComingSoonTag';
 
 function getNavBarSectionElements() {
   return document.querySelectorAll('[mini-nav-bar-header]');
@@ -86,7 +87,7 @@ export default function StickyMiniNavBar({
   const [headerHeight, setHeaderHeight] = useState(0);
   const [isSticky, setIsSticky] = useState(false);
   const [sections, setSections] = useState<
-    { id: string; label: string | null }[]
+    { id: string; label: string | null; comingSoon: boolean }[]
   >([]);
   const [passedElements, setPassedElements] = useState<
     Record<string, { isPassed: boolean; isInView: boolean }>
@@ -106,6 +107,7 @@ export default function StickyMiniNavBar({
       newSections.push({
         id: ele.id,
         label: ele.textContent,
+        comingSoon: ele.getAttribute('coming-soon') !== null ? true : false,
       });
     });
     setSections(newSections);
@@ -266,18 +268,24 @@ export default function StickyMiniNavBar({
                   gap: '10px',
                 }}
               >
-                {sections.map(({ id, label }) => {
+                {sections.map(({ id, label, comingSoon }) => {
                   const isInSection = currentSectionId === id;
                   return (
                     <Link
+                      style={comingSoon ? { pointerEvents: 'none' } : undefined}
                       key={id}
                       to={`#${id}`}
                       className={classNames(
                         styles.stickySection,
                         isInSection ? styles.stickySectionSelected : ''
                       )}
                     >
-                      {label}
+                      <span
+                        className={comingSoon ? 'text-secondary' : undefined}
+                      >
+                        {label}
+                      </span>
+                      {comingSoon && <ComingSoonTag className="ml-2" />}
                     </Link>
                   );
                 })}