a

jfkonecn · Feb 5, 2025 · 5f6021a · 5f6021a
1 parent 6299868
commit 5f6021a
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 14 deletions.
diff --git a/src/main/webapp/app/pages/annotationPage/SomaticGermlineCancerTypePage.tsx b/src/main/webapp/app/pages/annotationPage/SomaticGermlineCancerTypePage.tsx
@@ -29,7 +29,7 @@ import {
 import { computed, reaction, action, observable } from 'mobx';
 import { GENETIC_TYPE } from 'app/components/geneticTypeTabs/GeneticTypeTabs';
 import { observer, inject } from 'mobx-react';
-import classNames from 'classnames';
+import classnames from 'classnames';
 import StickyMiniNavBar, {
   StickyMiniNavBarContextProvider,
 } from 'app/shared/nav/StickyMiniNavBar';
@@ -654,7 +654,7 @@ export class SomaticGermlineCancerTypePage extends React.Component<
                   !!this.store.geneNumber.result.highestSensitiveLevel ||
                   !!this.store.geneNumber.result.highestResistanceLevel,
                 value: (
-                  <div className={classNames('d-flex', 'flex-row')}>
+                  <div className={classnames('d-flex', 'flex-row')}>
                     <HighestLevelEvidence
                       type="Sensitive"
                       level={this.store.geneNumber.result.highestSensitiveLevel}
@@ -750,22 +750,25 @@ export class SomaticGermlineCancerTypePage extends React.Component<
                     alterationNameWithDiff={this.store.alterationNameWithDiff}
                     geneticType={this.geneticType}
                     extra={
-                      <SomaticGermlineCancerTypeSelect
-                        cancerType={this.store.cancerTypeName}
-                      />
+                      <>
+                        in
+                        <SomaticGermlineCancerTypeSelect
+                          cancerType={this.store.cancerTypeName}
+                        />
+                      </>
                     }
                   />
                 </Col>
                 <Col md={11}>
-                  <Row className={classNames(styles.descriptionContainer)}>
+                  <Row className={classnames(styles.descriptionContainer)}>
                     <Col>
                       <h3>Variant Overview</h3>
                       {this.store.annotationData.result.background}
                     </Col>
                   </Row>
                   {this.store.annotationData.result.mutationEffect
                     .description && (
-                    <Row className={classNames(styles.descriptionContainer)}>
+                    <Row className={classnames(styles.descriptionContainer)}>
                       <Col>
                         <ShowHideText
                           show={this.showMutationEffect}
@@ -791,7 +794,7 @@ export class SomaticGermlineCancerTypePage extends React.Component<
             </Container>
             <StickyMiniNavBar
               title={
-                <div className={classNames(styles.navBarTitle)}>
+                <div className={classnames(styles.navBarTitle)}>
                   <GermlineSomaticHeader
                     includeEmailLink
                     annotation={{

diff --git a/src/main/webapp/app/shared/dropdown/SomaticGermlineCancerTypeSelect.module.scss b/src/main/webapp/app/shared/dropdown/SomaticGermlineCancerTypeSelect.module.scss
@@ -0,0 +1,4 @@
+.cancerTypeWrapper {
+  max-width: 600px;
+  width: 100%;
+}
diff --git a/src/main/webapp/app/shared/dropdown/SomaticGermlineCancerTypeSelect.tsx b/src/main/webapp/app/shared/dropdown/SomaticGermlineCancerTypeSelect.tsx
@@ -2,19 +2,23 @@ import React from 'react';
 import CancerTypeSelect from './CancerTypeSelect';
 import classnames from 'classnames';
 import { COLOR_BLUE } from 'app/config/theme';
-import styles from 'app/pages/alterationPage/AlterationPage.module.scss';
+import styles from './SomaticGermlineCancerTypeSelect.module.scss';
 import InfoIcon from '../icons/InfoIcon';
 import { OncoTreeLink } from '../utils/UrlUtils';
+import { Styles } from 'react-select';
 
 export default function SomaticGermlineCancerTypeSelect({
   cancerType,
+  selectStyles,
 }: {
   cancerType?: string;
+  selectStyles?: Partial<Styles>;
+  className?: string;
 }) {
   return (
     <span
       className={classnames(
-        styles.headerTumorTypeSelection,
+        styles.cancerTypeWrapper,
         'mr-2',
         'align-items-center',
         'justify-content-left',
@@ -26,8 +30,6 @@ export default function SomaticGermlineCancerTypeSelect({
           styles={{
             control: base => ({
               ...base,
-              height: '30px',
-              minHeight: '30px',
               borderBottomWidth: '1px',
               borderBottomColor: COLOR_BLUE,
               borderStyle: 'none',
@@ -36,6 +38,7 @@ export default function SomaticGermlineCancerTypeSelect({
               '&:hover': {
                 borderBottomColor: COLOR_BLUE,
               },
+              ...(selectStyles?.control ?? {}),
             }),
             indicatorsContainer: base => ({
               ...base,
@@ -45,31 +48,37 @@ export default function SomaticGermlineCancerTypeSelect({
               '& div:hover': {
                 color: COLOR_BLUE,
               },
+              ...(selectStyles?.indicatorsContainer ?? {}),
             }),
             indicatorSeparator: base => ({
               ...base,
               width: '0px',
+              ...(selectStyles?.indicatorSeparator ?? {}),
             }),
             dropdownIndicator: base => ({
               ...base,
               padding: 4,
+              ...(selectStyles?.dropdownIndicator ?? {}),
             }),
             clearIndicator: base => ({
               ...base,
               padding: 4,
+              ...(selectStyles?.clearIndicator ?? {}),
             }),
             valueContainer: base => ({
               ...base,
               padding: '0px 6px',
+              ...(selectStyles?.valueContainer ?? {}),
             }),
             input: base => ({
               ...base,
               margin: 0,
               padding: 0,
+              ...(selectStyles?.input ?? {}),
             }),
             menu: base => ({ ...base, zIndex: 10 }),
           }}
-          cancerType={cancerType}
+          cancerTypes={cancerType ? [cancerType] : undefined}
           // onChange={(selectedOption: string) =>
           // updateTumorTypeQuery(selectedOption)
           // }

diff --git a/src/main/webapp/app/shared/header/GermlineSomaticHeader.tsx b/src/main/webapp/app/shared/header/GermlineSomaticHeader.tsx
@@ -36,7 +36,7 @@ export default function GermlineSomaticHeader({
         >
           {upperFirst(geneticType)}
         </span>
-        <span>{extra}</span>
+        {extra}
         <span style={{ fontSize: '0.5em' }} className={'ml-2'}>
           {includeEmailLink && (
             <FeedbackIcon