diff --git a/src/layout/MainLayout/Header/ProfileSection/index.js b/src/layout/MainLayout/Header/ProfileSection/index.js index 1018b700..737fe9eb 100644 --- a/src/layout/MainLayout/Header/ProfileSection/index.js +++ b/src/layout/MainLayout/Header/ProfileSection/index.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import { styled } from '@mui/material/styles'; import { useSelector } from 'react-redux'; @@ -157,9 +157,9 @@ function ProfileSection() { const theme = useTheme(); const customization = useSelector((state) => state.customization); - const [selectedIndex] = React.useState(1); + const [selectedIndex] = useState(1); - const [open, setOpen] = React.useState(false); + const [open, setOpen] = useState(false); const anchorRef = React.useRef(null); @@ -175,7 +175,7 @@ function ProfileSection() { }; const prevOpen = React.useRef(open); - React.useEffect(() => { + useEffect(() => { if (prevOpen.current === true && open === false) { anchorRef.current.focus(); } diff --git a/src/views/clinicalGenomic/widgets/sidebar.js b/src/views/clinicalGenomic/widgets/sidebar.js index 41b6b499..d8b2dfd8 100644 --- a/src/views/clinicalGenomic/widgets/sidebar.js +++ b/src/views/clinicalGenomic/widgets/sidebar.js @@ -131,62 +131,48 @@ function StyledCheckboxList(props) { // Remove duplicates if (Array.isArray(ids)) { ids = Array.from(new Set(ids?.flat(1))); + } else { + ids = [ids]; } if (isExclusion ? !isChecked : isChecked) { - if (useAutoComplete) { - // Autcomplete's onChange will have IDs be a list of options that are checked - setChecked((_) => { - const retVal = {}; - ids.forEach((id) => { - retVal[id] = true; - }); - return retVal; + setChecked((_) => { + const retVal = {}; + ids.forEach((id) => { + retVal[id] = true; }); - } else { - // FormControlLabel's onChange will have IDs be a list of IDs that have _changed_ - setChecked((old) => ({ ...old, [ids]: true })); - } + return retVal; + }); onWrite((old) => { const retVal = { donorLists: {}, filter: {}, query: {}, ...old }; - // The following appends ourselves to the write context under 'query': {group: [list]} or 'donorList': {group: [list]} - if (isFilterList) { - // Filter lists operate differently: you _remove_ the option when you check it - retVal.filter[groupName].splice(retVal.filter[groupName].indexOf(ids)); - } else { - retVal.query[groupName] = ids; + // The following appends ourselves to the write context under 'query': {group: [|-delimited-list]} or 'donorList': {group: [|-delimited-list]} + if (ids.length > 0) { + retVal.query[groupName] = ids.join('|'); } return retVal; }); } else { - setChecked((old) => { - // Autocomplete's onChange will return a list - if (useAutoComplete) { - const retVal = {}; - ids.forEach((id) => { - retVal[id] = true; - }); - return retVal; - } - - // FormControlLabel's onChange - const { [ids]: _, ...rest } = old; - return rest; + setChecked((_) => { + const retVal = {}; + ids.forEach((id) => { + retVal[id] = true; + }); + return retVal; }); onWrite((old) => { const retVal = { filter: {}, ...old }; if (isFilterList) { - if (groupName in retVal.filter) { - retVal.filter[groupName].push(ids); - } else { - retVal.filter[groupName] = [ids]; + if (ids.length > 0) { + retVal.filter[groupName] = ids.join('|'); } return retVal; } const newList = Object.fromEntries(Object.entries(old.query).filter(([name, _]) => name !== groupName)); - newList[groupName] = ids; + if (ids.length > 0) { + newList[groupName] = ids.join('|'); + } retVal.query = newList; return retVal; }); @@ -230,7 +216,20 @@ function StyledCheckboxList(props) { HandleChange(option, event.target.checked)} + onChange={(event) => { + const newList = Object.keys(checked).slice(); + if (event.target.checked) { + // Add to list + newList.push(option); + } else { + // Remove from list + const oldPos = newList.indexOf(option); + if (oldPos >= 0) { + newList.splice(oldPos, 1); + } + } + HandleChange(newList, event.target.checked); + }} /> } key={option}