Merge pull request #139 from CanDIG/bugfix/pipe-delimited

Fix to work with Query: Filter elements are now pipe delimited
CanDIG · May 3, 2024 · 2cf7391 · 2cf7391
2 parents ea8f885 + 0b0c1ce
commit 2cf7391
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 41 deletions.
diff --git 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
@@ -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) {
                     <Checkbox
                         className={classes.checkbox}
                         checked={isExclusion ? !(option in checked) : option in checked}
-                        onChange={(event) => 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}