|
| 1 | +import React, { useEffect, useMemo, useState } from 'react'; |
| 2 | + |
| 3 | +import Box from '@mui/material/Box'; |
| 4 | +import ListItem from '@mui/material/ListItem'; |
| 5 | +import ListItemButton from '@mui/material/ListItemButton'; |
| 6 | +import ListItemText from '@mui/material/ListItemText'; |
| 7 | +import Stack from '@mui/material/Stack'; |
| 8 | +import TextField from '@mui/material/TextField'; |
| 9 | +import { List } from 'react-window'; |
| 10 | + |
| 11 | +import { useAnndataColors, useAnndataFeatures } from '../hooks'; |
| 12 | +import { Legend } from './Legend'; |
| 13 | + |
| 14 | +const RowComponent = ({ index, items, style, onSelect, selectedIndex }) => { |
| 15 | + return ( |
| 16 | + <ListItem style={style} key={index} component="div" disablePadding> |
| 17 | + <ListItemButton |
| 18 | + style={{ height: '100%' }} |
| 19 | + onClick={() => onSelect({ index: items[index].matrixIndex })} |
| 20 | + selected={items[index].matrixIndex === selectedIndex} |
| 21 | + > |
| 22 | + <ListItemText primary={items[index].name} /> |
| 23 | + </ListItemButton> |
| 24 | + </ListItem> |
| 25 | + ); |
| 26 | +}; |
| 27 | + |
| 28 | +export const FeatureSelect = ({ |
| 29 | + adata, |
| 30 | + feature, |
| 31 | + onSelect, |
| 32 | + callback = () => {}, |
| 33 | +}) => { |
| 34 | + const [searchTerm, setSearchTerm] = useState(''); |
| 35 | + |
| 36 | + const { data, isLoading, serverError } = useAnndataFeatures(adata); |
| 37 | + const colorData = useAnndataColors( |
| 38 | + { |
| 39 | + ...adata, |
| 40 | + matrixProps: { |
| 41 | + feature: feature, |
| 42 | + }, |
| 43 | + }, |
| 44 | + { enabled: !!feature }, |
| 45 | + ); |
| 46 | + |
| 47 | + useEffect(() => { |
| 48 | + if (colorData?.serverError) { |
| 49 | + callback(null); |
| 50 | + return; |
| 51 | + } |
| 52 | + if (!colorData?.isLoading && colorData?.data) { |
| 53 | + callback(colorData.data.colors); |
| 54 | + } |
| 55 | + }, [colorData, callback]); |
| 56 | + |
| 57 | + const items = useMemo(() => { |
| 58 | + if (!data) return []; |
| 59 | + const allItems = data.map((name, index) => ({ |
| 60 | + name, |
| 61 | + matrixIndex: index, |
| 62 | + })); |
| 63 | + if (!searchTerm) return allItems; |
| 64 | + return allItems.filter((item) => |
| 65 | + item.name.toLowerCase().includes(searchTerm.toLowerCase()), |
| 66 | + ); |
| 67 | + }, [data, searchTerm]); |
| 68 | + |
| 69 | + const legend = useMemo(() => { |
| 70 | + if (colorData?.serverError || colorData?.isLoading || !colorData?.data) { |
| 71 | + return null; |
| 72 | + } |
| 73 | + const { min, max, colorscale } = colorData.data; |
| 74 | + return <Legend min={min} max={max} colorscale={colorscale} />; |
| 75 | + }, [colorData.data, colorData?.isLoading, colorData?.serverError]); |
| 76 | + |
| 77 | + if (isLoading) { |
| 78 | + return <></>; |
| 79 | + } |
| 80 | + if (serverError) { |
| 81 | + return <div>Error loading features</div>; |
| 82 | + } |
| 83 | + return ( |
| 84 | + <Box |
| 85 | + sx={{ |
| 86 | + width: 250, |
| 87 | + height: '100%', |
| 88 | + minHeight: 250, |
| 89 | + zIndex: 1, |
| 90 | + }} |
| 91 | + > |
| 92 | + <Stack sx={{ height: '100%' }}> |
| 93 | + <TextField |
| 94 | + label="Search features" |
| 95 | + type="search" |
| 96 | + variant="filled" |
| 97 | + fullWidth |
| 98 | + value={searchTerm} |
| 99 | + onChange={(e) => setSearchTerm(e.target.value)} |
| 100 | + /> |
| 101 | + <List |
| 102 | + rowComponent={RowComponent} |
| 103 | + rowCount={items.length} |
| 104 | + rowHeight={25} |
| 105 | + rowProps={{ |
| 106 | + items, |
| 107 | + onSelect, |
| 108 | + selectedIndex: feature?.index, |
| 109 | + }} |
| 110 | + /> |
| 111 | + {!!feature && legend} |
| 112 | + </Stack> |
| 113 | + </Box> |
| 114 | + ); |
| 115 | +}; |
0 commit comments