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/CtimsCombinedWidget.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from 'react';
+import { AutoComplete } from 'primereact/autocomplete';
+import { Tooltip } from 'primereact/tooltip';
+import styles from './CtimsAutoCompleteComponent.module.css';
+import useGetGenes from '../../../../../apps/web/hooks/useGetGenes';
+import IOSSwitch from '../components/IOSSwitch';
+
+interface AutocompleteFieldProps {
+    value?: string;
+    onChange: (value: string | undefined) => void;
+    schema: {
+        title?: string;
+        description?: string;
+        ["ui:title"]?: string;
+    };
+}
+
+const AutocompleteField: React.FC<AutocompleteFieldProps> = ({ onChange, schema, ...props }) => {
+    const { filteredHugoSymbols, searchSymbols } = useGetGenes();
+    const [selectedHugoSymbol, setSelectedHugoSymbol] = useState<string>(props.value || '');
+    const [excludeToggle, setExcludeToggle] = useState<boolean>(
+        props.value?.startsWith('!') || false
+    );
+
+    useEffect(() => {
+        const isExcluded = props.value?.startsWith('!');
+        setSelectedHugoSymbol(props.value ? props.value.replace('!', '') : '');
+        setExcludeToggle(isExcluded || false);
+    }, [props.value]);
+
+    const handleInputChange = (e: { value: string }) => {
+        const trimmedValue = e.value.trim();
+        if (trimmedValue !== '') {
+            const newValue = excludeToggle ? `!${trimmedValue}` : trimmedValue;
+            setSelectedHugoSymbol(trimmedValue);
+            onChange(newValue);
+        } else {
+            setSelectedHugoSymbol('');
+            onChange(undefined);
+        }
+    };
+
+    const handleToggleChange = (checked: boolean) => {
+        setExcludeToggle(checked);
+        const newValue = checked ? `!${selectedHugoSymbol}` : selectedHugoSymbol.replace('!', '');
+        onChange(newValue);
+    };
+
+    const arrayContainer = {
+        flexGrow: 1,
+        minWidth: 0,
+        marginLeft: 'auto',
+    };
+
+    const labelStyle = {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0.5rem',
+        height: '36px',
+        fontFamily: "'Inter', sans-serif",
+        fontStyle: 'normal',
+        fontWeight: '400',
+        fontSize: '14px',
+        lineHeight: '20px',
+        color: '#495057',
+    };
+
+    const questionMarkStyle = `${styles['question-mark']} pi pi-question-circle`;
+    const labelValue = schema?.["ui:title"] || schema.title || 'Hugo Symbol';
+
+    return (
+        <div className={styles.container}>
+            {labelValue && (
+                <label style={labelStyle}>
+                    {labelValue}
+                    {schema.description && (
+                        <Tooltip target=".tooltip-icon" position="top" />
+                    )}
+                    <i
+                        className={`tooltip-icon ${questionMarkStyle}`}
+                        data-pr-tooltip={schema.description}
+                    ></i>
+                </label>
+            )}
+
+            <AutoComplete
+                inputStyle={arrayContainer}
+                value={selectedHugoSymbol}
+                suggestions={filteredHugoSymbols}
+                completeMethod={(e) => {
+                    const trimmedValue = e.query.trim();
+                    if (trimmedValue !== '') {
+                        const newValue = excludeToggle ? `!${trimmedValue}` : trimmedValue;
+                        setSelectedHugoSymbol(trimmedValue);
+                        onChange(newValue);
+                        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>
+    );
+};
+
+export default AutocompleteField;

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

@@ -23,6 +23,9 @@ 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';
+import AutocompleteFieldWithToggle from "../CtimsCombinedWidget";
 
 
 const RjsfForm = withTheme(PrimeTheme)
@@ -160,6 +163,10 @@ export const GenomicForm = (props: IFormProps) => {
           "Homozygous deletion",
           "Gain",
           "High level amplification",
+          "!Heterozygous deletion",
+          "!Homozygous deletion",
+          "!Gain",
+          "!High level amplification",
         ]
       },
       'wildtype': {
@@ -498,7 +505,16 @@ export const GenomicForm = (props: IFormProps) => {
     },
     "variantCategoryContainerObject": {
       "hugo_symbol": {
-        "ui:widget": AutocompleteField,
+        "ui:widget": AutocompleteFieldWithToggle,
+      },
+      "fusion_partner_hugo_symbol": {
+        "ui:widget": AutocompleteFieldWithToggle,
+      },
+      "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.tsx

@@ -0,0 +1,118 @@
+import { WidgetProps } from '@rjsf/utils';
+import React, { useEffect, useState } from 'react';
+import styles from './CtimsInputWithExcludeToggle.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(value?.replace('!', '') || '');
+  const [isNegated, setIsNegated] = useState(value?.startsWith('!') || false);
+
+  useEffect(() => {
+    const currentURL = window.location.href;
+    if (label === 'Trial ID' && currentURL.includes('/trials/create')) {
+      onChange('');
+    }
+  }, []);
+
+  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;
+
+  const handleDropdownChange = (e: { value: any }) => {
+    const selectedValue = e.value;
+    setValueState(selectedValue);
+    const backendValue = getBackendValue(selectedValue, isNegated);
+    onChange(backendValue);
+  };
+
+  const handleToggleChange = (checked: boolean) => {
+    setIsNegated(checked);
+    const backendValue = getBackendValue(valueState, checked);
+    onChange(backendValue);
+  };
+
+  const handleBlur = () => {
+    const trimmedValue = valueState?.trim?.();
+    const backendValue = getBackendValue(trimmedValue, isNegated);
+    onChange(backendValue);
+    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);