Support renaming a list of strings and refactor AddMutationModal

src/main/java/org/mskcc/oncokb/curation/domain/enumeration/CNAConsequence.java

@@ -1,9 +1,9 @@
 package org.mskcc.oncokb.curation.domain.enumeration;
 
 public enum CNAConsequence {
-    AMPLIFICATION,
-    DELETION,
-    GAIN,
-    LOSS,
-    UNKNOWN,
+    CNA_AMPLIFICATION,
+    CNA_DELETION,
+    CNA_GAIN,
+    CNA_LOSS,
+    CNA_UNKNOWN,
 }

src/main/java/org/mskcc/oncokb/curation/domain/enumeration/FlagType.java

@@ -9,4 +9,5 @@ public enum FlagType {
     TRANSCRIPT,
     DRUG,
     HOTSPOT,
+    ALTERATION_CATEGORY,
 }

src/main/java/org/mskcc/oncokb/curation/domain/enumeration/SVConsequence.java

@@ -1,11 +1,21 @@
 package org.mskcc.oncokb.curation.domain.enumeration;
 
 public enum SVConsequence {
-    DELETION,
-    TRANSLOCATION,
-    DUPLICATION,
-    INSERTION,
-    INVERSION,
-    FUSION,
-    UNKNOWN,
+    SV_DELETION("Deletion"),
+    SV_TRANSLOCATION("Translocation"),
+    SV_DUPLICATION("Duplication"),
+    SV_INSERTION("Insertion"),
+    SV_INVERSION("Inversion"),
+    SV_FUSION("Fusion"),
+    SV_UNKNOWN("Unknown");
+
+    private final String name;
+
+    SVConsequence(String name) {
+        this.name = name;
+    }
+
+    public String getName() {
+        return name;
+    }
 }

src/main/java/org/mskcc/oncokb/curation/util/AlterationUtils.java

@@ -26,7 +26,7 @@ private Alteration parseFusion(String alteration) {
         Alteration alt = new Alteration();
 
         Consequence consequence = new Consequence();
-        consequence.setTerm(SVConsequence.FUSION.name());
+        consequence.setTerm(SVConsequence.SV_FUSION.name());
         alt.setType(AlterationType.STRUCTURAL_VARIANT);
         alt.setConsequence(consequence);
 
@@ -50,7 +50,7 @@ private Alteration parseFusion(String alteration) {
     }
 
     private Alteration parseCopyNumberAlteration(String alteration) {
-        CNAConsequence cnaTerm = CNAConsequence.UNKNOWN;
+        CNAConsequence cnaTerm = CNAConsequence.CNA_UNKNOWN;
 
         Optional<CNAConsequence> cnaConsequenceOptional = getCNAConsequence(alteration);
         if (cnaConsequenceOptional.isPresent()) {

src/main/webapp/app/app.scss

@@ -456,3 +456,39 @@ a {
 .scrollbar-wrapper:focus {
   visibility: visible;
 }
+
+// Custom badge outline styles
+@mixin badge-outline-variant(
+  $color,
+  $color-hover: color-contrast($color),
+  $active-background: $color,
+  $active-border: $color,
+  $active-color: color-contrast($active-background)
+) {
+  color: $color;
+  border: 1px solid;
+  border-color: $color;
+
+  &:hover {
+    color: $color-hover;
+    background-color: $active-background;
+    border-color: $active-border;
+  }
+
+  &.active {
+    color: $active-color;
+    background-color: $active-background;
+    border-color: $active-border;
+  }
+
+  &.disabled {
+    color: $color;
+    background-color: transparent;
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .badge-outline-#{$color} {
+    @include badge-outline-variant($value);
+  }
+}

src/main/webapp/app/config/colors.ts

@@ -30,3 +30,9 @@ export const COLLAPSIBLE_LEVELS = {
 };
 
 export const HOTSPOT = '#ff9900';
+
+/*
+ * Bootstrap colors
+ */
+
+export const BS_BORDER_COLOR = '#dee2e6';

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

@@ -1,5 +1,5 @@
 import { AlterationTypeEnum } from 'app/shared/api/generated/curation';
-import { GREY } from '../colors';
+import { BS_BORDER_COLOR, GREY } from '../colors';
 import { ToastOptions } from 'react-toastify';
 
 export const AUTHORITIES = {
@@ -461,3 +461,13 @@ export const EMPTY_THERAPY_ERROR_MESSAGE = 'You must include at least one drug f
 export const THERAPY_ALREADY_EXISTS_ERROR_MESSAGE = 'Therapy already exists';
 
 export const NEW_NAME_UUID_VALUE = 'name';
+
+/**
+ * React select styles based on Bootstrap theme
+ */
+export const REACT_SELECT_STYLES = {
+  control: (base, state) => ({
+    ...base,
+    borderColor: BS_BORDER_COLOR,
+  }),
+};

src/main/webapp/app/config/constants/html-id.ts

@@ -29,6 +29,12 @@ export const RCT_MODAL_ID = 'relevant-cancer-type-modal';
 export const DEFAULT_ADD_MUTATION_MODAL_ID = 'default-add-mutation-modal';
 export const ADD_MUTATION_MODAL_INPUT_ID = 'add-mutation-modal-input';
 
+export const ADD_MUTATION_MODAL_EXCLUDED_ALTERATION_INPUT_ID = 'add-mutation-modal-excluded-alteration-input';
+export const ADD_MUTATION_MODAL_ADD_EXCLUDED_ALTERATION_BUTTON_ID = 'add-mutation-modal-add-excluded-alteration-button';
+export const ADD_MUTATION_MODAL_FLAG_DROPDOWN_ID = 'add-mutation-modal-flag-input';
+export const ADD_MUTATION_MODAL_FLAG_COMMENT_ID = 'add-mutation-modal-flag-comment';
+export const ADD_MUTATION_MODAL_FLAG_COMMENT_INPUT_ID = 'add-mutation-modal-flag-comment-input';
+
 export const SIMPLE_CONFIRM_MODAL_CONTENT_ID = 'simple-confirm-modal-content';
 
 export const ADD_THERAPY_BUTTON_ID = 'add-therapy-button';

src/main/webapp/app/entities/flag/flag.store.ts

@@ -5,15 +5,20 @@ import PaginationCrudStore from 'app/shared/util/pagination-crud-store';
 import axios, { AxiosResponse } from 'axios';
 import { ENTITY_TYPE } from 'app/config/constants/constants';
 import { getEntityResourcePath } from 'app/shared/util/RouteUtils';
+import { FlagTypeEnum } from 'app/shared/model/enumerations/flag-type.enum.model';
 
 export class FlagStore extends PaginationCrudStore<IFlag> {
   public oncokbGeneEntity: IFlag | null = null;
+  public alterationCategoryFlags: IFlag[] = [];
   getOncokbEntity = this.readHandler(this.getOncokbGeneFlag);
+  getFlagsByType = this.readHandler(this.getFlagsByTypeGen);
   constructor(protected rootStore: IRootStore) {
     super(rootStore, ENTITY_TYPE.FLAG);
     makeObservable(this, {
       oncokbGeneEntity: observable,
+      alterationCategoryFlags: observable,
       getOncokbEntity: action,
+      getFlagsByType: action,
     });
   }
 
@@ -25,6 +30,13 @@ export class FlagStore extends PaginationCrudStore<IFlag> {
     }
     return result;
   }
+  *getFlagsByTypeGen(type: FlagTypeEnum) {
+    const result: AxiosResponse<IFlag[]> = yield axios.get<IFlag[]>(`${getEntityResourcePath(ENTITY_TYPE.FLAG)}?type.equals=${type}`);
+    if (type === FlagTypeEnum.ALTERATION_CATEGORY) {
+      this.alterationCategoryFlags = result.data;
+    }
+    return result.data;
+  }
 }
 
 export default FlagStore;

src/main/webapp/app/hooks/useOverflowDetector.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useRef, useState } from 'react';
+
+export interface useOverflowDetectorProps {
+  onChange?: (overflow: boolean) => void;
+  detectHeight?: boolean;
+  detectWidth?: boolean;
+}
+
+export function useOverflowDetector(props: useOverflowDetectorProps = {}) {
+  const [isOverflow, setIsOverflow] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const updateState = () => {
+      if (ref.current === null) {
+        return;
+      }
+
+      const { detectWidth: handleWidth = true, detectHeight: handleHeight = true } = props;
+
+      const newState =
+        (handleWidth && ref.current.offsetWidth < ref.current.scrollWidth) ||
+        (handleHeight && ref.current.offsetHeight < ref.current.scrollHeight);
+
+      if (newState === isOverflow) {
+        return;
+      }
+      setIsOverflow(newState);
+      if (props.onChange) {
+        props.onChange(newState);
+      }
+    };
+    updateState();
+  }, [ref.current, props.detectWidth, props.detectHeight, props.onChange]);
+
+  return [isOverflow, ref] as const;
+}

src/main/webapp/app/hooks/useTextareaAutoHeight.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect } from 'react';
+
+export const useTextareaAutoHeight = (
+  inputRef: React.MutableRefObject<HTMLInputElement | HTMLTextAreaElement | null>,
+  type: string | undefined,
+) => {
+  useEffect(() => {
+    const input = inputRef.current;
+    if (!input || type !== 'textarea') {
+      return;
+    }
+
+    const resizeObserver = new ResizeObserver(() => {
+      window.requestAnimationFrame(() => {
+        input.style.height = 'auto';
+        input.style.height = `${input.scrollHeight}px`;
+      });
+    });
+    resizeObserver.observe(input);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+};

src/main/webapp/app/pages/curation/BadgeGroup.tsx

@@ -58,19 +58,11 @@ const BadgeGroup = (props: IBadgeGroupProps) => {
   }, [sectionData, props.firebasePath]);
 
   if (props.showDemotedBadge) {
-    return (
-      <DefaultBadge color="danger" tooltipOverlay={DEMOTED_MUTATION_TOOLTIP_OVERLAY}>
-        Demoted
-      </DefaultBadge>
-    );
+    return <DefaultBadge color="danger" text="Demoted" tooltipOverlay={DEMOTED_MUTATION_TOOLTIP_OVERLAY} />;
   }
 
   if (props.showDeletedBadge) {
-    return (
-      <DefaultBadge color="danger" tooltipOverlay={DELETED_SECTION_TOOLTIP_OVERLAY}>
-        Deleted
-      </DefaultBadge>
-    );
+    return <DefaultBadge color="danger" text="Deleted" tooltipOverlay={DELETED_SECTION_TOOLTIP_OVERLAY} />;
   }
 
   if (props.showNotCuratableBadge?.show) {

src/main/webapp/app/pages/curation/collapsible/BaseCollapsible.tsx

@@ -135,10 +135,10 @@ export default function BaseCollapsible({
             >
               {isOpen ? <FontAwesomeIcon icon={faChevronDown} size={'sm'} /> : <FontAwesomeIcon icon={faChevronRight} size={'sm'} />}
             </button>
-            <span className={classNames(titleClassName ? titleClassName : 'fw-bold')}>
+            <div className={classNames(titleClassName ? titleClassName : 'fw-bold d-flex align-items-center')}>
               {title}
               {badge}
-            </span>
+            </div>
           </div>
 
           <div className="me-auto" />

src/main/webapp/app/pages/curation/collapsible/MutationCollapsible.tsx

@@ -18,7 +18,7 @@ import MutationConvertIcon from 'app/shared/icons/MutationConvertIcon';
 import AddMutationModal from 'app/shared/modal/AddMutationModal';
 import AddVusModal from 'app/shared/modal/AddVusModal';
 import ModifyCancerTypeModal from 'app/shared/modal/ModifyCancerTypeModal';
-import { Alteration, Review } from 'app/shared/model/firebase/firebase.model';
+import { Alteration, Review, AlterationCategories } from 'app/shared/model/firebase/firebase.model';
 import DefaultTooltip from 'app/shared/tooltip/DefaultTooltip';
 import { FlattenedHistory } from 'app/shared/util/firebase/firebase-history-utils';
 import {
@@ -29,12 +29,12 @@ import {
   isSectionRemovableWithoutReview,
 } from 'app/shared/util/firebase/firebase-utils';
 import { componentInject } from 'app/shared/util/typed-inject';
-import { getExonRanges } from 'app/shared/util/utils';
+import { getExonRanges, parseAlterationName } from 'app/shared/util/utils';
 import { IRootStore } from 'app/stores';
 import { get, onValue, ref } from 'firebase/database';
 import _ from 'lodash';
 import { observer } from 'mobx-react';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Button } from 'reactstrap';
 import BadgeGroup from '../BadgeGroup';
 import { DeleteSectionButton } from '../button/DeleteSectionButton';
@@ -49,6 +49,7 @@ import { RemovableCollapsible } from './RemovableCollapsible';
 import { Unsubscribe } from 'firebase/database';
 import { getLocationIdentifier } from 'app/components/geneHistoryTooltip/gene-history-tooltip-utils';
 import { SimpleConfirmModal } from 'app/shared/modal/SimpleConfirmModal';
+import MutationCollapsibleTitle from './mutation-collapsible/MutationCollapsibleTitle';
 
 export interface IMutationCollapsibleProps extends StoreProps {
   mutationPath: string;
@@ -87,6 +88,7 @@ const MutationCollapsible = ({
   const [mutationNameReview, setMutationNameReview] = useState<Review | null>(null);
   const [mutationSummary, setMutationSummary] = useState<string>('');
   const [mutationAlterations, setMutationAlterations] = useState<Alteration[] | null>(null);
+  const [alterationCategories, setAlterationCategories] = useState<AlterationCategories | null>(null);
   const [isRemovableWithoutReview, setIsRemovableWithoutReview] = useState(false);
   const [relatedAnnotationResult, setRelatedAnnotationResult] = useState<AlterationAnnotationStatus[]>([]);
   const [oncogenicity, setOncogenicity] = useState<string>('');
@@ -186,6 +188,12 @@ const MutationCollapsible = ({
         setOncogenicity(snapshot.val());
       }),
     );
+    callbacks.push(
+      onValue(ref(firebaseDb, `${mutationPath}/alteration_categories`), snapshot => {
+        const info = snapshot.val() as AlterationCategories;
+        setAlterationCategories(info);
+      }),
+    );
 
     onValue(
       ref(firebaseDb, `${mutationPath}/name_uuid`),
@@ -268,7 +276,13 @@ const MutationCollapsible = ({
     <>
       <RemovableCollapsible
         idPrefix={title}
-        title={title}
+        title={
+          <MutationCollapsibleTitle
+            name={mutationName}
+            mutationAlterations={mutationAlterations}
+            alterationCategories={alterationCategories}
+          />
+        }
         defaultOpen={open}
         collapsibleClassName="mb-1"
         colorOptions={{ borderLeftColor: NestLevelColor[NestLevelMapping[NestLevelType.MUTATION]] }}

src/main/webapp/app/pages/curation/collapsible/ReviewCollapsible.tsx

@@ -295,9 +295,8 @@ export const ReviewCollapsible = ({
     if (isUnderCreationOrDeletion) {
       return undefined;
     }
-    return (
-      <DefaultBadge color={ReviewCollapsibleBootstrapClass[reviewAction ?? '']}>{ReviewActionLabels[reviewAction ?? '']}</DefaultBadge>
-    );
+
+    return <DefaultBadge color={ReviewCollapsibleBootstrapClass[reviewAction ?? '']} text={ReviewActionLabels[reviewAction ?? '']} />;
   };
 
   const getReviewableContent = () => {