Dheeraj_CTM_656

libs/ui/src/lib/components/CtimsAutoCompleteComponent.module.css

@@ -10,3 +10,27 @@
     display: flex;
     flex-direction: column;
 }
+
+
+.label-container {
+    display: flex;
+    flex-direction: row;
+}
+
+.label {
+    font-family: Inter, sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    margin-bottom: 7px;
+    margin-top: 7px;
+}
+
+.optional-label {
+    font-family: Inter, sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    margin-bottom: 7px;
+    margin-top: 7px;
+    margin-left: auto;
+    color: rgba(0, 0, 0, 0.6);
+}

libs/ui/src/lib/components/CtimsAutoCompleteComponent.tsx

@@ -3,22 +3,26 @@ import { AutoComplete } from 'primereact/autocomplete';
 import { Tooltip } from 'antd';
 import styles from "./CtimsAutoCompleteComponent.module.css";
 import useGetGenes from '../../../../../apps/web/hooks/useGetGenes';
+import IOSSwitch from '../components/IOSSwitch';
 
 const AutocompleteField = ({ onChange, ...props }) => {
   const { filteredHugoSymbols, loading, searchSymbols } = useGetGenes();
-  const [selectedHugoSymbol, setSelectedHugoSymbol] = useState([props.value]);
+  const [selectedHugoSymbol, setSelectedHugoSymbol] = useState<string>("");
+  const [excludeToggle, setExcludeToggle] = useState<boolean>(false);
 
 
- useEffect(() => {
-  setSelectedHugoSymbol([props.value]);
-}, [props.value]);
+  useEffect(() => {
+    const isExcluded : boolean = props.value?.startsWith('!');
+    setSelectedHugoSymbol(props.value ? props.value.replace('!', '') : '');
+    setExcludeToggle(isExcluded);
+  }, [props.value]);
 
-  const handleInputChange = (e:  {value: string}) => {
+  const handleInputChange = (e: { value: string }) => {
 
     const trimmedValue = e.value.trim();
-    trimmedValue !== "" ? 
-    (setSelectedHugoSymbol([trimmedValue]), onChange(trimmedValue)): 
-    (setSelectedHugoSymbol([]), onChange(undefined));
+    trimmedValue !== "" ?
+      (setSelectedHugoSymbol(trimmedValue), onChange(trimmedValue)) :
+      (setSelectedHugoSymbol(""), onChange(undefined));
   };
 
 
@@ -39,14 +43,19 @@ const AutocompleteField = ({ onChange, ...props }) => {
     color: '#495057',
   };
 
+  const handleToggleChange = (checked: boolean) => {
+    setExcludeToggle(checked);
+    const newValue = checked ? `!${selectedHugoSymbol}` : selectedHugoSymbol.replace('!', '');
+    onChange(newValue);
+  };
 
   const questionMarkStyle = `dropdown-target-icon ${styles['question-mark']} pi pi-question-circle question-mark-target `;
 
   return (
     <div className={styles.container}>
       {props.schema.title && (
         <label style={labelStyle}>
-          Hugo Symbol
+          {props.schema.title}
           <Tooltip>
             <i
               className={questionMarkStyle}
@@ -62,15 +71,25 @@ const AutocompleteField = ({ onChange, ...props }) => {
         suggestions={filteredHugoSymbols}
         completeMethod={(e) => {
           const trimmedValue = e.query.trim();
-          trimmedValue === "" 
-          ? []
-          : (setSelectedHugoSymbol([trimmedValue]), onChange(trimmedValue), searchSymbols(trimmedValue));
+          trimmedValue === ""
+            ? []
+            : (setSelectedHugoSymbol(trimmedValue), onChange(trimmedValue), searchSymbols(trimmedValue));
         }}
         onChange={(e) => {
           handleInputChange(e)
         }}
         appendTo='self'
       />
+      <div style={{ display: 'flex', marginTop: '10px', alignItems: 'center' }}>
+        <div className={styles.label}>Exclude this criteria from matches.</div>
+        <div style={{ marginLeft: 'auto' }}>
+          <IOSSwitch
+            disabled={!selectedHugoSymbol}
+            value={excludeToggle}
+            onChange={handleToggleChange}
+          />
+        </div>
+      </div>
     </div>
   );
 };

libs/ui/src/lib/components/forms/GenomicForm.tsx

@@ -23,6 +23,8 @@ import {CtimsDialogContext, CtimsDialogContextType} from "../CtimsMatchDialog";
 import { Checkbox } from 'primereact/checkbox';
 import {wildcard_protein_change_validation_func, getCurrentOperator, protein_change_validation_func} from "../helpers";
 import AutocompleteField from "../CtimsAutoCompleteComponent";
+import CtimsInputWithExcludeToggle from '../../custom-rjsf-templates/CtimsInputWithExcludeToggle';
+import CtimsDropdownWithExcludeToggle from '../../custom-rjsf-templates/CtimsDropdownWithExcludeToggle';
 
 
 const RjsfForm = withTheme(PrimeTheme)
@@ -160,6 +162,10 @@ export const GenomicForm = (props: IFormProps) => {
           "Homozygous deletion",
           "Gain",
           "High level amplification",
+          "!Heterozygous deletion",
+          "!Homozygous deletion",
+          "!Gain",
+          "!High level amplification",
         ]
       },
       'wildtype': {
@@ -499,6 +505,15 @@ export const GenomicForm = (props: IFormProps) => {
     "variantCategoryContainerObject": {
       "hugo_symbol": {
         "ui:widget": AutocompleteField,
+      },
+      "fusion_partner_hugo_symbol": {
+        "ui:widget": AutocompleteField,
+      },
+      "protein_change": {
+        "ui:widget": CtimsInputWithExcludeToggle,
+      },
+      "cnv_call": {
+        "ui:widget": CtimsDropdownWithExcludeToggle,
       }
     }
   }

libs/ui/src/lib/components/helpers.ts

@@ -18,7 +18,7 @@ export const wildcard_protein_change_validation_func = (str: string) => {
 }
 
 export const protein_change_validation_func = (str: string) => {
-  const regex = /^p\.(([A-Z]\d+_[A-Z]\d+)(del$|dup$)|([A-Z]\d+_[A-Z]\d+)(ins[A-Z]+\*?|ins\*\d*|delins[A-Z]+\*?|delins\*\d*|fs\*?\d*)|([A-Z]\d+[A-Z])$|([A-Z]\d+[A-Z])(fs\*?\d*)$|([A-Z]\d+)(\*)$|([A-Z]\d+)(del$|dup$)|([A-Z]\d+)(delins[A-Z]+\*?$|fs\*?(\d*))$)$/;
+  const regex = /^!?p\.(([A-Z]\d+_[A-Z]\d+)(del$|dup$)|([A-Z]\d+_[A-Z]\d+)(ins[A-Z]+\*?|ins\*\d*|delins[A-Z]+\*?|delins\*\d*|fs\*?\d*)|([A-Z]\d+[A-Z])$|([A-Z]\d+[A-Z])(fs\*?\d*)$|([A-Z]\d+)(\*)$|([A-Z]\d+)(del$|dup$)|([A-Z]\d+)(delins[A-Z]+\*?$|fs\*?(\d*))$)$/;
 
   if (!str) {
     return true;

libs/ui/src/lib/custom-rjsf-templates/CtimsDropdownWithExcludeToggle.module.css

@@ -0,0 +1,38 @@
+
+.container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .label-container {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .label {
+    font-family: Inter, sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    margin-bottom: 7px;
+    margin-top: 7px;
+  }
+
+  .optional-label {
+    font-family: Inter, sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    margin-bottom: 7px;
+    margin-top: 7px;
+    margin-left: auto;
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+  .question-mark {
+    margin-left: 8px;
+    margin-top: 8px;
+    margin-bottom: 7px;
+    cursor: pointer;
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+

libs/ui/src/lib/custom-rjsf-templates/CtimsDropdownWithExcludeToggle.tsx

@@ -0,0 +1,127 @@
+import { WidgetProps } from '@rjsf/utils';
+import React, { useEffect, useState } from 'react';
+import styles from './CtimsDropdownWithExcludeToggle.module.css';
+import { Tooltip } from 'primereact/tooltip';
+import { Dropdown } from 'primereact/dropdown';
+import cn from 'clsx';
+import IOSSwitch from '../components/IOSSwitch';
+
+const CtimsDropdownWithExcludeToggle = (props: WidgetProps) => {
+  let {
+    id,
+    placeholder,
+    required,
+    readonly,
+    disabled,
+    label,
+    value,
+    onChange,
+    onBlur,
+    onFocus,
+    autofocus,
+    options,
+    schema,
+    uiSchema,
+    rawErrors = [],
+  } = props;
+
+  const [valueState, setValueState] = useState('');
+  const [isNegated, setIsNegated] = useState(false);
+
+  useEffect(() => {
+    const currentURL = window.location.href;
+    if (label === 'Trial ID' && currentURL.includes('/trials/create')) {
+      onChange('');
+    }
+  }, []);
+
+  useEffect(() => {
+    if (value) {
+      setValueState(value.replace('!', ''));
+      setIsNegated(value.startsWith('!'));
+    }
+  }, [value]);
+
+  const dropdownOptions =
+    options.enumOptions
+      ?.filter((opt: any) => !opt.value.startsWith('!'))
+      .map((opt: any) => ({
+        label: opt.label || opt.value,
+        value: opt.value,
+      })) || [];
+
+  const getBackendValue = (displayValue: string, negated: boolean) =>
+    negated ? `!${displayValue}` : displayValue;
+
+  useEffect(() => {
+    const backendValue = getBackendValue(valueState, isNegated);
+    onChange(backendValue);
+  }, [valueState, isNegated]);
+
+  const handleDropdownChange = (e: { value: any }) => {
+    const selectedValue = e.value;
+    setValueState(selectedValue);
+    if (!selectedValue) {
+      setIsNegated(false);
+    }
+  };
+
+  const handleToggleChange = (checked: boolean) => {
+    setIsNegated(checked);
+  };
+
+  const handleBlur = () => {
+    const trimmedValue = valueState.trim();
+    onBlur(id, trimmedValue);
+  };
+
+  const handleFocus = () => onFocus(id, valueState);
+
+  const labelValue = uiSchema?.['ui:title'] || schema.title || label;
+  const questionMarkStyle = `input-target-icon ${styles['question-mark']} pi pi-question-circle .question-mark-target `;
+
+  return (
+    <div className={styles.container}>
+      <div className={styles['label-container']}>
+        {labelValue && <span className={styles.label}>{labelValue}</span>}
+        <Tooltip target=".input-target-icon" />
+        {schema.description && (
+          <i
+            className={questionMarkStyle}
+            data-pr-tooltip={schema.description}
+            data-pr-position="top"
+          ></i>
+        )}
+      </div>
+
+      <Dropdown
+        id={id}
+        placeholder={placeholder}
+        autoFocus={autofocus}
+        required={required}
+        disabled={disabled}
+        readOnly={readonly}
+        className={cn('w-full', rawErrors.length > 0 ? 'p-invalid' : '')}
+        options={dropdownOptions}
+        value={valueState}
+        onChange={handleDropdownChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
+        appendTo='self'
+      />
+
+      <div style={{ display: 'flex' }}>
+        <div className={styles.label}>Exclude this criteria from matches.</div>
+        <div style={{ marginLeft: 'auto', marginTop: '10px' }}>
+          <IOSSwitch
+            disabled={!valueState} 
+            value={isNegated}
+            onChange={handleToggleChange}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CtimsDropdownWithExcludeToggle;

libs/ui/src/lib/custom-rjsf-templates/CtimsInputWithExcludeToggle.tsx

@@ -93,7 +93,7 @@ const CtimsInputWithExcludeToggle = (props: WidgetProps) => {
         onFocus={_onFocus}
       />
       <div style={{ display: 'flex' }}>
-        <div className={styles.label}> Exclude this diagnosis from matches </div>
+        <div className={styles.label}> Exclude this criteria from matches.</div>
         <div style={{marginLeft: 'auto', marginTop: '10px'}}><IOSSwitch disabled={!value} value={value ? value.startsWith('!') : false} onChange={(checked: boolean) => {
           const newValue = checked ? '!' + value : value.replace('!', '');
           onChange(newValue);