Merge branch 'develop' into bugfix/DEVSU-2587-pcp-tgr-summary-table-a…

…ttr-update
bcgsc · Mar 4, 2025 · 3f12049 · 3f12049
2 parents 6b196d3 + d2bb183
commit 3f12049
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 46 deletions.
diff --git a/app/views/ReportView/components/TherapeuticTargets/components/AutocompleteHandler/index.tsx b/app/views/ReportView/components/TherapeuticTargets/components/AutocompleteHandler/index.tsx
@@ -6,6 +6,7 @@ import {
 } from '@mui/material';
 
 import api from '@/services/api';
+import { debounce as debounceFn } from 'lodash';
 
 type AutocompleteHandlerProps = {
   defaultValue: unknown;
@@ -15,6 +16,10 @@ type AutocompleteHandlerProps = {
   onChange: (selectedValue: unknown, typeName: string) => void;
   error?: string;
   minCharacters?: number;
+  /**
+   * MS to wait before sending API request
+   */
+  debounce?: number;
 };
 
 const AutocompleteHandler = (props: AutocompleteHandlerProps) => {
@@ -26,34 +31,46 @@ const AutocompleteHandler = (props: AutocompleteHandlerProps) => {
     onChange = () => { },
     error = '',
     minCharacters = 1,
+    debounce = 300,
   } = props;
 
   const [options, setOptions] = useState([]);
   const [loading, setLoading] = useState(false);
   const [value, setValue] = useState(null);
+  const [inputText, setInputText] = useState('');
+  const debouncedSave = debounceFn((nextValue) => setInputText(nextValue), debounce);
 
   useEffect(() => {
     if (defaultValue) {
       setValue(defaultValue);
     }
   }, [defaultValue]);
 
-  const handleInputChange = async (event) => {
-    let queryString = event.target.value;
+  useEffect(() => () => {
+    debouncedSave.cancel();
+  }, [debouncedSave]);
 
-    if (queryString.length >= minCharacters) {
-      setOptions([]);
-      setLoading(true);
+  const handleInputChange = useCallback((event) => {
+    const queryString = event.target.value;
+    debouncedSave(queryString);
+  }, [debouncedSave]);
 
+  useEffect(() => {
+    const getAutoCompleteOptions = async () => {
       // Find all query strings that are 3 characters or longer.
       // Needed for KB API to process multiple words
-      queryString = queryString.split(' ').filter((str) => str.length >= minCharacters).join(' ');
-      const { result } = await api.get(`/graphkb/${type}?search=${queryString}`).request();
+      const nextQueryString = inputText.split(' ').filter((str) => str.length >= minCharacters).join(' ');
+      const { result } = await api.get(`/graphkb/${type}?search=${nextQueryString}`).request();
 
       setOptions(result ?? []);
       setLoading(false);
+    };
+    if (inputText.length >= minCharacters) {
+      setOptions([]);
+      setLoading(true);
+      getAutoCompleteOptions();
     }
-  };
+  }, [inputText, minCharacters, type]);
 
   const handleAutocompleteChange = useCallback((_event, val) => {
     setValue(val);

diff --git a/app/views/ReportView/components/TherapeuticTargets/components/EditDialog/index.tsx b/app/views/ReportView/components/TherapeuticTargets/components/EditDialog/index.tsx
@@ -110,7 +110,7 @@ const EditDialog = ({
     } else {
       setErrors(null);
     }
-  }, [isDirty, newData, requiredGeneFields, requiredSignatureFields]);
+  }, [isDirty, newData, requiredGeneFields, requiredSignatureFields, variantType]);
 
   const handleSubmit = useCallback(async () => {
     setIsSubmitting(true);
@@ -255,28 +255,30 @@ const EditDialog = ({
           </RadioGroup>
         </FormControl>
         {variantType === 'gene' && (
-        <FormControl fullWidth>
-          <AutocompleteHandler
-            defaultValue={defaultVariantValue}
-            type="variant"
-            label="Gene and Variant"
-            onChange={handleAutocompleteValueSelected}
-            required
-            error={errors && isDirty && errors.variant}
-          />
-        </FormControl>
+          <FormControl fullWidth>
+            <AutocompleteHandler
+              defaultValue={defaultVariantValue}
+              type="variant"
+              label="Gene and Variant"
+              onChange={handleAutocompleteValueSelected}
+              required
+              minCharacters={3}
+              error={errors && isDirty && errors.variant}
+            />
+          </FormControl>
         )}
         {variantType === 'signature' && (
-        <FormControl fullWidth>
-          <AutocompleteHandler
-            defaultValue={defaultSignatureVariantValue}
-            type="signature"
-            label="Signature"
-            onChange={handleAutocompleteValueSelected}
-            required
-            error={errors && isDirty && errors.signature}
-          />
-        </FormControl>
+          <FormControl fullWidth>
+            <AutocompleteHandler
+              defaultValue={defaultSignatureVariantValue}
+              type="signature"
+              label="Signature"
+              onChange={handleAutocompleteValueSelected}
+              required
+              minCharacters={3}
+              error={errors && isDirty && errors.signature}
+            />
+          </FormControl>
         )}
         <FormControl fullWidth>
           <AutocompleteHandler
@@ -285,6 +287,7 @@ const EditDialog = ({
             label="Therapy"
             onChange={handleAutocompleteValueSelected}
             required
+            minCharacters={3}
             error={errors && isDirty && errors.therapy}
           />
         </FormControl>
@@ -295,6 +298,7 @@ const EditDialog = ({
             label="Context"
             onChange={handleAutocompleteValueSelected}
             required
+            minCharacters={3}
             error={errors && isDirty && errors.context}
           />
         </FormControl>

diff --git a/app/views/ReportView/components/TherapeuticTargets/index.tsx b/app/views/ReportView/components/TherapeuticTargets/index.tsx
@@ -60,6 +60,8 @@ type TherapeuticProps = {
   printVersion?: 'standardLayout' | 'condensedLayout' | null;
 } & WithLoadingInjectedProps;
 
+type TherapeuticDataTableType = TherapeuticType[] | Partial<TherapeuticType>[];
+
 const Therapeutic = ({
   isLoading,
   isPrint = false,
@@ -69,11 +71,11 @@ const Therapeutic = ({
   const [
     therapeuticData,
     setTherapeuticData,
-  ] = useState<TherapeuticType[] | Partial<TherapeuticType>[]>([]);
+  ] = useState<TherapeuticDataTableType>([]);
   const [
     chemoresistanceData,
     setChemoresistanceData,
-  ] = useState<TherapeuticType[] | Partial<TherapeuticType>[]>([]);
+  ] = useState<TherapeuticDataTableType>([]);
 
   const [showDialog, setShowDialog] = useState<boolean>(false);
   const [editData, setEditData] = useState<TherapeuticType>({
@@ -105,6 +107,7 @@ const Therapeutic = ({
   const getData = useCallback(async () => {
     if (report) {
       try {
+        setIsLoading(true);
         const therapeuticResp = await api.get(
           `/reports/${report.ident}/therapeutic-targets`,
         ).request();
@@ -212,6 +215,17 @@ const Therapeutic = ({
     }
   }, [chemoresistanceData, therapeuticData, report]);
 
+  const handleDeleteTherapeuticTarget = useCallback(async (rowNodeData: TherapeuticDataTableType[number]) => {
+    const { ident: therapeuticIdent } = rowNodeData;
+    try {
+      await api.del(`/reports/${report.ident}/therapeutic-targets/${therapeuticIdent}`, {}).request();
+      snackbar.success(`Successfully deleted ${therapeuticIdent}`);
+      getData();
+    } catch (e) {
+      snackbar.error('Failed to delete therapeutic option: ', e);
+    }
+  }, [report.ident, getData]);
+
   if (isPrint && printVersion === 'standardLayout') {
     return (
       <div className="therapeutic-print">
@@ -304,31 +318,35 @@ const Therapeutic = ({
           <DataTable
             titleText="Potential Therapeutic Targets"
             columnDefs={columnDefs}
-            rowData={therapeuticData}
-            canEdit={canEdit}
-            onEdit={handleEditStart}
             canAdd={canEdit}
-            onAdd={handleEditStart}
-            tableType="therapeutic"
-            isPaginated={false}
-            canReorder={canEdit}
-            onReorder={handleReorder}
+            canDelete={canEdit}
+            canEdit={canEdit}
             canExport
+            canReorder={canEdit}
             Header={EvidenceHeader}
+            isPaginated={false}
+            onAdd={handleEditStart}
+            onDelete={handleDeleteTherapeuticTarget}
+            onEdit={handleEditStart}
+            onReorder={handleReorder}
+            rowData={therapeuticData}
+            tableType="therapeutic"
           />
           <DataTable
             titleText="Potential Resistance and Toxicity"
             columnDefs={columnDefs}
-            rowData={chemoresistanceData}
-            canEdit={canEdit}
-            onEdit={handleEditStart}
             canAdd={canEdit}
-            onAdd={handleEditStart}
-            tableType="chemoresistance"
-            isPaginated={false}
-            canReorder={canEdit}
+            canDelete={canEdit}
+            canEdit={canEdit}
             canExport
+            canReorder={canEdit}
             Header={EvidenceHeader}
+            isPaginated={false}
+            onAdd={handleEditStart}
+            onDelete={handleDeleteTherapeuticTarget}
+            onEdit={handleEditStart}
+            rowData={chemoresistanceData}
+            tableType="chemoresistance"
           />
           {showDialog && (
             <EditDialog