From 88e15ca2e6626483ce497057a420b88fd8555329 Mon Sep 17 00:00:00 2001 From: Calvin Lu <59149377+calvinlu3@users.noreply.github.com> Date: Mon, 30 Sep 2024 10:33:12 -0400 Subject: [PATCH] Fix adding CDx biomarker association (#450) --- .../panels/CompanionDiagnosticDevicePanel.tsx | 73 ++++++++++++------ .../companion-diagnostic-device-update.tsx | 6 +- .../companion-diagnostic-device.tsx | 1 - .../app/shared/select/AlterationSelect.tsx | 19 +---- .../app/shared/select/CancerTypeSelect.tsx | 2 +- .../webapp/app/shared/select/DrugSelect.tsx | 4 +- .../app/shared/select/FdaSubmissionSelect.tsx | 24 +----- .../webapp/app/shared/select/GeneSelect.tsx | 4 +- .../add-therapy-modal--1920x1080.png | Bin 19419 -> 19169 bytes 9 files changed, 60 insertions(+), 73 deletions(-) diff --git a/src/main/webapp/app/components/panels/CompanionDiagnosticDevicePanel.tsx b/src/main/webapp/app/components/panels/CompanionDiagnosticDevicePanel.tsx index a079c4e1b..c53e6f258 100644 --- a/src/main/webapp/app/components/panels/CompanionDiagnosticDevicePanel.tsx +++ b/src/main/webapp/app/components/panels/CompanionDiagnosticDevicePanel.tsx @@ -1,24 +1,23 @@ -import React, { useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { Menu } from 'react-pro-sidebar'; -import { Button, Form } from 'reactstrap'; +import { Button, Container, Form } from 'reactstrap'; import { ENTITY_ACTION, ENTITY_TYPE, SearchOptionType } from 'app/config/constants/constants'; import { useHistory, useLocation } from 'react-router-dom'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faPlus, width } from '@fortawesome/free-solid-svg-icons/faPlus'; +import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus'; import DefaultTooltip from 'app/shared/tooltip/DefaultTooltip'; import CancerTypeSelect, { CancerTypeSelectOption } from 'app/shared/select/CancerTypeSelect'; import { SaveButton } from 'app/shared/button/SaveButton'; -import GeneSelect from 'app/shared/select/GeneSelect'; +import GeneSelect, { GeneSelectOption } from 'app/shared/select/GeneSelect'; import AlterationSelect, { AlterationSelectOption } from 'app/shared/select/AlterationSelect'; import DrugSelect, { DrugSelectOption } from 'app/shared/select/DrugSelect'; import FdaSubmissionSelect, { FdaSubmissionSelectOption } from 'app/shared/select/FdaSubmissionSelect'; -import { connect } from 'app/shared/util/typed-inject'; -import { IRootStore } from 'app/stores'; import { getEntityActionRoute } from 'app/shared/util/RouteUtils'; import { Alteration, Association, CancerType, Drug, FdaSubmission } from 'app/shared/api/generated/curation'; import { associationClient } from 'app/shared/api/clients'; import { notifyError, notifySuccess } from 'app/oncokb-commons/components/util/NotificationUtils'; -import { IFdaSubmission } from 'app/shared/model/fda-submission.model'; +import { IRootStore } from 'app/stores'; +import { connect } from 'app/shared/util/typed-inject'; const SidebarMenuItem: React.FunctionComponent<{ style?: React.CSSProperties; children: React.ReactNode }> = ({ style, children }) => { return
{children}
; @@ -29,8 +28,8 @@ export const defaultAdditional = { type: SearchOptionType.GENE, }; -const CompanionDiagnosticDevicePanel: React.FunctionComponent = props => { - const [selectedGeneId, setSelectedGeneId] = useState(); +const CompanionDiagnosticDevicePanel: React.FunctionComponent = ({ getEntity }: StoreProps) => { + const [geneValue, setGeneValue] = useState(null); const [alterationValue, onAlterationChange] = useState(); const [cancerTypeValue, onCancerTypeChange] = useState(null); const [drugValue, onDrugChange] = useState([]); @@ -40,6 +39,20 @@ const CompanionDiagnosticDevicePanel: React.FunctionComponent = prop const location = useLocation(); const id = parseInt(location.pathname.split('/')[2], 10); + useEffect(() => { + if (geneValue === null) { + onAlterationChange([]); + } + }, [geneValue]); + + const resetValues = () => { + onAlterationChange([]); + setGeneValue(null); + onCancerTypeChange(null); + onDrugChange([]); + onFdaSubmissionChange([]); + }; + const createBiomarkerAssociation = (e: any) => { e.preventDefault(); const association: Association = { @@ -76,6 +89,8 @@ const CompanionDiagnosticDevicePanel: React.FunctionComponent = prop associationClient .createAssociation(association) .then(() => { + getEntity(id); // Refresh CDx association table + resetValues(); notifySuccess('Biomarker association added.'); }) .catch(error => notifyError(error)); @@ -90,23 +105,23 @@ const CompanionDiagnosticDevicePanel: React.FunctionComponent = prop }; return ( -
+

Curation Panel

Add Biomarker Association - { - const geneId = option ? option.value : null; - setSelectedGeneId(geneId?.toString()); - }} - /> + -
+
- +
- + - + -
+
- +
- + @@ -138,11 +159,13 @@ const CompanionDiagnosticDevicePanel: React.FunctionComponent = prop
-
+ ); }; -const mapStoreToProps = ({ associationStore }: IRootStore) => ({}); +const mapStoreToProps = ({ companionDiagnosticDeviceStore }: IRootStore) => ({ + getEntity: companionDiagnosticDeviceStore.getEntity, +}); type StoreProps = ReturnType; diff --git a/src/main/webapp/app/entities/companion-diagnostic-device/companion-diagnostic-device-update.tsx b/src/main/webapp/app/entities/companion-diagnostic-device/companion-diagnostic-device-update.tsx index 5bb4f876a..53a71888f 100644 --- a/src/main/webapp/app/entities/companion-diagnostic-device/companion-diagnostic-device-update.tsx +++ b/src/main/webapp/app/entities/companion-diagnostic-device/companion-diagnostic-device-update.tsx @@ -14,10 +14,10 @@ import { notifyError } from 'app/oncokb-commons/components/util/NotificationUtil import _ from 'lodash'; import LoadingIndicator, { LoaderSize } from 'app/oncokb-commons/components/loadingIndicator/LoadingIndicator'; import { convertDateTimeFromServer, convertDateTimeToServer } from 'app/shared/util/date-utils'; -import GenericSidebar from 'app/components/sidebar/OncoKBSidebar'; import CompanionDiagnosticDevicePanel from 'app/components/panels/CompanionDiagnosticDevicePanel'; import { WHOLE_NUMBER_REGEX } from 'app/config/constants/regex'; import { ISpecimenType } from 'app/shared/model/specimen-type.model'; +import OncoKBSidebar from 'app/components/sidebar/OncoKBSidebar'; export interface ICompanionDiagnosticDeviceUpdateProps extends StoreProps, RouteComponentProps<{ id: string }> {} @@ -185,9 +185,9 @@ export const CompanionDiagnosticDeviceUpdate = (props: ICompanionDiagnosticDevic ) : undefined} )} - + - + ); }; diff --git a/src/main/webapp/app/entities/companion-diagnostic-device/companion-diagnostic-device.tsx b/src/main/webapp/app/entities/companion-diagnostic-device/companion-diagnostic-device.tsx index 51ead7fd8..18362a6d7 100644 --- a/src/main/webapp/app/entities/companion-diagnostic-device/companion-diagnostic-device.tsx +++ b/src/main/webapp/app/entities/companion-diagnostic-device/companion-diagnostic-device.tsx @@ -12,7 +12,6 @@ import { TextFormat } from 'react-jhipster'; import _ from 'lodash'; import { filterByKeyword, getEntityTableActionsColumn } from 'app/shared/util/utils'; import OncoKBTable, { SearchColumn } from 'app/shared/table/OncoKBTable'; -import { IDrug } from 'app/shared/model/drug.model'; export interface ICompanionDiagnosticDeviceProps extends StoreProps, RouteComponentProps<{ url: string }> {} export const getFdaSubmissionNumber = (primaryNumber: string | undefined, supplementNumber: string | undefined) => { diff --git a/src/main/webapp/app/shared/select/AlterationSelect.tsx b/src/main/webapp/app/shared/select/AlterationSelect.tsx index 40d169f09..2639b6813 100644 --- a/src/main/webapp/app/shared/select/AlterationSelect.tsx +++ b/src/main/webapp/app/shared/select/AlterationSelect.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { ActionMeta, OnChangeValue, Props as SelectProps, SingleValue } from 'react-select'; +import { OnChangeValue, Props as SelectProps } from 'react-select'; import { IRootStore } from 'app/stores/createStore'; import { InjectProps, connect } from '../util/typed-inject'; import { IAlteration } from '../model/alteration.model'; @@ -18,7 +18,6 @@ interface IAlterationSelectProps extends SelectProps { const { geneId, getAlterationsByGeneId, ...selectProps } = props; const [alterationList, setAlterationList] = useState>([]); - const [alterationValue, setAlterationValue] = useState | null>(null); useEffect(() => { const loadAlterationOptions = async (id: string) => { @@ -36,28 +35,16 @@ const AlterationSelect = (props: IAlterationSelectProps) => { } }; loadAlterationOptions(geneId); - if (!geneId) { - setAlterationValue(null); - } }, [geneId]); - const onAlterationChange: ( - newValue: OnChangeValue, - actionMeta: ActionMeta, - ) => void = (option, actionMeta) => { - setAlterationValue(option); - props.onChange?.(option, actionMeta); - }; - return ( - ); + return