diff --git a/screen2.0/src/app/applets/gene-expression/geneexpression.tsx b/screen2.0/src/app/applets/gene-expression/geneexpression.tsx
index 3eae15d2..85e75166 100644
--- a/screen2.0/src/app/applets/gene-expression/geneexpression.tsx
+++ b/screen2.0/src/app/applets/gene-expression/geneexpression.tsx
@@ -334,6 +334,7 @@ export function GeneExpression(props: {
(props.slotProps?.autocompleteProps?.defaultValue)
+ const [inputValue, setInputValue] = useState("")
const [options, setOptions] = useState([])
const [descriptions, setDescriptions] = useState<{ name: string; desc: string }[]>([])
const [loadingOptions, setLoadingOptions] = useState(false)
- //Fetch gene desciptions
+ //Fetch and set gene desciptions. Descriptions should probably not be it's own state variable, but rather added to options
useEffect(() => {
const fetchData = async () => {
const descriptions = await Promise.all(
@@ -62,6 +60,7 @@ export const GeneAutocomplete = (
if (options) fetchData()
}, [options])
+ //handles setting options on search change
const onSearchChange = async (value: string, assembly: string) => {
setOptions([])
setLoadingOptions(true)
@@ -91,15 +90,14 @@ export const GeneAutocomplete = (
}
}
})
- setOptions(g)
+ setOptions(g.sort((a, b) => a.name.localeCompare(b.name)))
} else if (genesSuggestion && genesSuggestion.length === 0) {
setOptions([])
}
setLoadingOptions(false)
}
- const debounceFn = useMemo(() => debounce(onSearchChange, 500), [])
-
+ const debounceOnSearchChange = useMemo(() => debounce(onSearchChange, 500), [])
// Merge the ListboxProps
const mergedListboxProps = {
@@ -141,39 +139,57 @@ export const GeneAutocomplete = (
...slotProps?.inputTextFieldProps?.sx
}
}
+
+ //changes to text input
+ const handleInputChange = (
+ _,
+ value: string,
+ ) => {
+ if (value != "") { debounceOnSearchChange(value, assembly) } //fetch new gene suggestions
+ setInputValue(value)
+ }
- const attemptSubmit = (inputVal: string) => {
- const gene = options.find(x => x.name.toLowerCase() === inputVal.toLowerCase())
- if (gene) {
- setInputValue(gene.name)
- if (onGeneSubmitted) onGeneSubmitted(gene)
- }
+ //changes to value of component
+ const handleChange = (
+ _,
+ value: GeneInfo,
+ ) => {
+ setValue(value)
+ if (onGeneSelected) onGeneSelected(value)
}
+ //checks for enter key and tries to match with listed options
+ const handleKeyDown = useCallback((
+ event: React.KeyboardEvent & { defaultMuiPrevented?: boolean;}
+ ) => {
+ if (event.key === "Enter") {
+ const matchingGene = options.find(x => x.name.toLowerCase() === inputValue.toLowerCase())
+ if (matchingGene) {
+ setValue(matchingGene)
+ if (onGeneSubmitted) onGeneSubmitted(matchingGene)
+ }
+ }
+ }, [inputValue, onGeneSubmitted, options])
+
+ const handleIconClick = useCallback(() => {
+ if (onGeneSubmitted && value) onGeneSubmitted(value)
+ }, [onGeneSubmitted, value])
+
return (
a.name.localeCompare(b.name))} //How do I type this properly?
+ options={options}
+ value={value}
inputValue={inputValue}
- onInputChange={(_, newInputValue) => {
- if (newInputValue != "") {
- debounceFn(newInputValue, assembly) // This triggers sending new request for genes
- }
- setInputValue(newInputValue)
- }}
- onChange={(_, value) => onGeneSelected && onGeneSelected(value)} //Should I just expose the whole onChange function?
- onKeyDown={(event) => {
- if (event.key === "Enter") {
- attemptSubmit(inputValue)
- }
- }}
+ onInputChange={handleInputChange}
+ onChange={handleChange} //Should I just expose the whole onChange function?
+ onKeyDown={handleKeyDown}
noOptionsText={loadingOptions ? "Loading..." : "No Genes Found"} //Maybe expose?
renderInput={(params) => (
@@ -207,7 +223,7 @@ export const GeneAutocomplete = (
attemptSubmit(inputValue)}
+ onClick={handleIconClick}
{...mergedIconProps}
>
{CustomEndIcon ?
diff --git a/screen2.0/src/app/search/_geneAutocomplete/types.ts b/screen2.0/src/app/search/_geneAutocomplete/types.ts
index bae2cc8a..a461e1e1 100644
--- a/screen2.0/src/app/search/_geneAutocomplete/types.ts
+++ b/screen2.0/src/app/search/_geneAutocomplete/types.ts
@@ -49,8 +49,6 @@ endIcon?: 'search' | 'add' | 'none'
CustomEndIcon?: OverridableComponent> & {
muiName: string;
}
-// onIconClick?: React.MouseEventHandler
-onTextBoxClick?: React.MouseEventHandler
/**
*
* Callback fired when a gene is selected from the dropdown options. Not fired on submission (enter, clicking endIcon)
diff --git a/screen2.0/src/app/search/mainresultsfilters.tsx b/screen2.0/src/app/search/mainresultsfilters.tsx
index 741ec7f2..497ac1eb 100644
--- a/screen2.0/src/app/search/mainresultsfilters.tsx
+++ b/screen2.0/src/app/search/mainresultsfilters.tsx
@@ -919,9 +919,9 @@ export function MainResultsFilters(
null,
getOptionDisabled: option => !linkedGenesWithNums.find(x => x.geneName === option.name),
},
+ inputTextFieldProps: {onClick: () => !dataLinkedGenes && !loadingLinkedGenes && getLinkedGenes()},
stackProps: { mt: 1 }
}}
- onTextBoxClick={() => !dataLinkedGenes && !loadingLinkedGenes && getLinkedGenes()}
endIcon="none"
colorTheme="light"
onGeneSelected={(gene) =>