From 3c5aab26b4a7e380223e9c2426c1f3ea70fabf35 Mon Sep 17 00:00:00 2001
From: Cody O'Donnell <ctodonnell@lbl.gov>
Date: Mon, 25 Mar 2024 19:55:18 -0700
Subject: [PATCH 01/10] Move context tabs into detail header and filters into
 main container

---
 src/features/collections/CollectionDetail.tsx | 55 ++++++++++++-------
 .../collections/CollectionOverview.tsx        |  9 +++
 .../collections/Collections.module.scss       | 17 +++++-
 .../data_products/GenomeAttribs.tsx           |  6 +-
 4 files changed, 62 insertions(+), 25 deletions(-)

diff --git a/src/features/collections/CollectionDetail.tsx b/src/features/collections/CollectionDetail.tsx
index 3284da3e..b96f6997 100644
--- a/src/features/collections/CollectionDetail.tsx
+++ b/src/features/collections/CollectionDetail.tsx
@@ -11,7 +11,7 @@ import { Button, Input } from '../../common/components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faArrowRightArrowLeft,
-  faFilter,
+  faSliders,
   faAngleRight,
   faX,
   faCircleXmark,
@@ -130,6 +130,7 @@ export const CollectionDetail = () => {
 
   const { filterPanelOpen } = useFilters(collection?.id);
   const filterMenuRef = useRef<HTMLButtonElement>(null);
+  const { filterEntries } = useFilterEntries(collection?.id || '');
 
   const handleToggleFilters = () => {
     if (collection?.id) {
@@ -182,14 +183,6 @@ export const CollectionDetail = () => {
                     className={styles['search-box']}
                     placeholder="Search genomes by classification"
                   />
-                  <Button
-                    hidden={!showFilterButton}
-                    ref={filterMenuRef}
-                    icon={<FontAwesomeIcon icon={faFilter} />}
-                    onClick={handleToggleFilters}
-                  >
-                    Filters
-                  </Button>
                   <Button
                     hidden={!showMatchButton}
                     icon={<FontAwesomeIcon icon={faArrowRightArrowLeft} />}
@@ -218,8 +211,8 @@ export const CollectionDetail = () => {
                   })`}
                 </Button>
               </div>
-              <div>
-                <FilterChips collectionId={collection.id} />
+              <div className={styles['context-tabs']}>
+                <FilterContextTabs collectionId={collection.id} />
               </div>
             </>
           )}
@@ -231,12 +224,34 @@ export const CollectionDetail = () => {
             open={filterPanelOpen ?? false}
             onClose={() => {
               if (collection?.id) {
-                dispatch(setFilterPanelOpen(filterPanelOpen));
+                dispatch(setFilterPanelOpen(false));
               }
             }}
           />
           <div className={styles['data_product_detail']}>
-            <FilterContextTabs collectionId={collection.id} />
+            <Stack
+              className={styles['filter-controls']}
+              direction="row"
+              spacing={2}
+              alignItems="center"
+            >
+              <Button
+                hidden={!showFilterButton}
+                ref={filterMenuRef}
+                icon={<FontAwesomeIcon icon={faSliders} />}
+                onClick={handleToggleFilters}
+              >
+                Filters
+              </Button>
+              <div className={styles['filter-chips-label']}>
+                {filterEntries ? filterEntries.length : '0'} active{' '}
+                {filterEntries && filterEntries.length !== 1
+                  ? 'filters'
+                  : 'filter'}
+                {filterEntries && filterEntries.length > 0 ? ':' : ''}
+              </div>
+              <FilterChips collectionId={collection.id} />
+            </Stack>
             {showOverview ? (
               <CollectionOverview
                 collection_id={collection.id}
@@ -303,9 +318,13 @@ const useFilterEntries = (collectionId: string) => {
   );
 
   // Use same filter order if ignoring categories for consistency
+  // Only include filters who have a non-undefined value
   const filterEntries = categorizedFilters.reduce<[string, FilterState][]>(
     (filterEntires, category) => {
-      filterEntires.push(...category.filters);
+      const activeFilters = category.filters.filter(
+        (f) => f[1].value !== undefined
+      );
+      filterEntires.push(...activeFilters);
       return filterEntires;
     },
     []
@@ -333,13 +352,7 @@ const FilterChips = ({ collectionId }: { collectionId: string }) => {
   const { filterEntries, clearFilterState } = useFilterEntries(collectionId);
   if (filterEntries.length === 0) return <></>;
   return (
-    <Stack
-      direction={'row'}
-      gap={'4px'}
-      useFlexGap
-      flexWrap="wrap"
-      sx={{ paddingTop: '14px' }}
-    >
+    <Stack direction={'row'} gap={'4px'} useFlexGap flexWrap="wrap">
       {filterEntries.map(([column, filter]) => {
         return (
           <FilterChip
diff --git a/src/features/collections/CollectionOverview.tsx b/src/features/collections/CollectionOverview.tsx
index a90ea7b0..9a61d986 100644
--- a/src/features/collections/CollectionOverview.tsx
+++ b/src/features/collections/CollectionOverview.tsx
@@ -82,6 +82,15 @@ export const CollectionOverview: FC<{
             sx={{ paddingBottom: 0 }}
           />
           <CardContent>
+            <Typography
+              sx={{ fontSize: 12 }}
+              color="text.secondary"
+              gutterBottom
+            >
+              Collection Name
+            </Typography>
+            <div>{collection.name}</div>
+            <br></br>
             <Typography
               sx={{ fontSize: 12 }}
               color="text.secondary"
diff --git a/src/features/collections/Collections.module.scss b/src/features/collections/Collections.module.scss
index d62f97dd..3fa010b7 100644
--- a/src/features/collections/Collections.module.scss
+++ b/src/features/collections/Collections.module.scss
@@ -85,7 +85,7 @@ $border: 1px solid use-color("base-lighter");
   background-color: use-color("white");
   border-bottom: 1px solid use-color("silver");
   min-width: 600px;
-  padding: 1rem;
+  padding: 1rem 1rem 0;
 }
 
 .detail_header h2 {
@@ -93,6 +93,10 @@ $border: 1px solid use-color("base-lighter");
   margin-top: 0;
 }
 
+.context-tabs {
+  margin-top: 0.5rem;
+}
+
 .match-highlight {
   background-color: use-color("warning-lightest");
 }
@@ -107,6 +111,17 @@ $border: 1px solid use-color("base-lighter");
   width: 400px;
 }
 
+.filter-controls {
+  background-color: use-color("white");
+  border-radius: 4px;
+  margin-bottom: 0.5rem;
+  padding: 0.5rem;
+}
+
+.filter-chips-label {
+  color: use-color("base-dark");
+}
+
 .detail_content {
   background-color: use-color("base-lightest");
   display: flex;
diff --git a/src/features/collections/data_products/GenomeAttribs.tsx b/src/features/collections/data_products/GenomeAttribs.tsx
index 777c7516..56a0f8db 100644
--- a/src/features/collections/data_products/GenomeAttribs.tsx
+++ b/src/features/collections/data_products/GenomeAttribs.tsx
@@ -277,7 +277,7 @@ export const GenomeAttribs: FC<{
     <Grid container spacing={1}>
       <Grid item md={6}>
         <Paper
-          variant="outlined"
+          elevation={0}
           sx={{
             height: '400px',
             minWidth: '350px',
@@ -301,7 +301,7 @@ export const GenomeAttribs: FC<{
       </Grid>
       <Grid item md={6}>
         <Paper
-          variant="outlined"
+          elevation={0}
           sx={{
             height: '400px',
             minWidth: '350px',
@@ -319,7 +319,7 @@ export const GenomeAttribs: FC<{
         </Paper>
       </Grid>
       <Grid item xs={12}>
-        <Paper variant="outlined">
+        <Paper elevation={0}>
           <Stack
             className={classes['table-toolbar']}
             direction="row"

From 78674a77b61f6159651d06b60fa41ea06690ff33 Mon Sep 17 00:00:00 2001
From: Cody O'Donnell <ctodonnell@lbl.gov>
Date: Mon, 25 Mar 2024 20:03:56 -0700
Subject: [PATCH 02/10] Move filter controls out of overview page

---
 src/features/collections/CollectionDetail.tsx | 56 ++++++++++---------
 .../data_products/GenomeAttribs.tsx           |  4 +-
 2 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/features/collections/CollectionDetail.tsx b/src/features/collections/CollectionDetail.tsx
index b96f6997..ff34a672 100644
--- a/src/features/collections/CollectionDetail.tsx
+++ b/src/features/collections/CollectionDetail.tsx
@@ -229,29 +229,6 @@ export const CollectionDetail = () => {
             }}
           />
           <div className={styles['data_product_detail']}>
-            <Stack
-              className={styles['filter-controls']}
-              direction="row"
-              spacing={2}
-              alignItems="center"
-            >
-              <Button
-                hidden={!showFilterButton}
-                ref={filterMenuRef}
-                icon={<FontAwesomeIcon icon={faSliders} />}
-                onClick={handleToggleFilters}
-              >
-                Filters
-              </Button>
-              <div className={styles['filter-chips-label']}>
-                {filterEntries ? filterEntries.length : '0'} active{' '}
-                {filterEntries && filterEntries.length !== 1
-                  ? 'filters'
-                  : 'filter'}
-                {filterEntries && filterEntries.length > 0 ? ':' : ''}
-              </div>
-              <FilterChips collectionId={collection.id} />
-            </Stack>
             {showOverview ? (
               <CollectionOverview
                 collection_id={collection.id}
@@ -259,10 +236,35 @@ export const CollectionDetail = () => {
                 modal={modal}
               />
             ) : currDataProduct ? (
-              <DataProduct
-                dataProduct={currDataProduct}
-                collection_id={collection.id}
-              />
+              <>
+                <Stack
+                  className={styles['filter-controls']}
+                  direction="row"
+                  spacing={2}
+                  alignItems="center"
+                >
+                  <Button
+                    hidden={!showFilterButton}
+                    ref={filterMenuRef}
+                    icon={<FontAwesomeIcon icon={faSliders} />}
+                    onClick={handleToggleFilters}
+                  >
+                    Filters
+                  </Button>
+                  <div className={styles['filter-chips-label']}>
+                    {filterEntries ? filterEntries.length : '0'} active{' '}
+                    {filterEntries && filterEntries.length !== 1
+                      ? 'filters'
+                      : 'filter'}
+                    {filterEntries && filterEntries.length > 0 ? ':' : ''}
+                  </div>
+                  <FilterChips collectionId={collection.id} />
+                </Stack>
+                <DataProduct
+                  dataProduct={currDataProduct}
+                  collection_id={collection.id}
+                />
+              </>
             ) : (
               <></>
             )}
diff --git a/src/features/collections/data_products/GenomeAttribs.tsx b/src/features/collections/data_products/GenomeAttribs.tsx
index 56a0f8db..992e4aa9 100644
--- a/src/features/collections/data_products/GenomeAttribs.tsx
+++ b/src/features/collections/data_products/GenomeAttribs.tsx
@@ -279,7 +279,7 @@ export const GenomeAttribs: FC<{
         <Paper
           elevation={0}
           sx={{
-            height: '400px',
+            height: '350px',
             minWidth: '350px',
             padding: '1px',
             position: 'relative',
@@ -303,7 +303,7 @@ export const GenomeAttribs: FC<{
         <Paper
           elevation={0}
           sx={{
-            height: '400px',
+            height: '350px',
             minWidth: '350px',
             padding: '1px',
             position: 'relative',

From afbef51c64a236338587712efd2c4f64ce7690c3 Mon Sep 17 00:00:00 2001
From: Cody O'Donnell <ctodonnell@lbl.gov>
Date: Tue, 26 Mar 2024 08:29:52 -0700
Subject: [PATCH 03/10] Quick fix to text in match button and modal

---
 src/features/collections/CollectionDetail.tsx | 4 ++--
 src/features/collections/MatchModal.tsx       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/features/collections/CollectionDetail.tsx b/src/features/collections/CollectionDetail.tsx
index ff34a672..7f3c6967 100644
--- a/src/features/collections/CollectionDetail.tsx
+++ b/src/features/collections/CollectionDetail.tsx
@@ -186,7 +186,7 @@ export const CollectionDetail = () => {
                   <Button
                     hidden={!showMatchButton}
                     icon={<FontAwesomeIcon icon={faArrowRightArrowLeft} />}
-                    variant="contained"
+                    variant="text"
                     onClick={() => {
                       setModalView('match');
                       modal?.show();
@@ -194,7 +194,7 @@ export const CollectionDetail = () => {
                   >
                     {match
                       ? `Matching by ${MATCHER_LABELS.get(match.matcher_id)}`
-                      : `Match my Data`}
+                      : `Match My Data`}
                   </Button>
                 </Stack>
                 <Button
diff --git a/src/features/collections/MatchModal.tsx b/src/features/collections/MatchModal.tsx
index 2aa13570..96f7177a 100644
--- a/src/features/collections/MatchModal.tsx
+++ b/src/features/collections/MatchModal.tsx
@@ -420,7 +420,7 @@ const CreateMatch = ({ collectionId }: { collectionId: string }) => {
             )}
           </Stack>
           <Stack spacing={1}>
-            <label htmlFor={idNarrative}>Narrative Test</label>
+            <label htmlFor={idNarrative}>Narrative</label>
             <Select
               id={idNarrative}
               disabled={!matcherSelected}

From 8182de5c484da8e02c9cada97132165df1ad5ec7 Mon Sep 17 00:00:00 2001
From: Cody O'Donnell <ctodonnell@lbl.gov>
Date: Tue, 26 Mar 2024 08:48:11 -0700
Subject: [PATCH 04/10] Prevent any rendering for search, match, or filters
 when not applicable

---
 src/features/collections/CollectionDetail.tsx | 83 ++++++++++---------
 1 file changed, 43 insertions(+), 40 deletions(-)

diff --git a/src/features/collections/CollectionDetail.tsx b/src/features/collections/CollectionDetail.tsx
index 7f3c6967..ac2101dc 100644
--- a/src/features/collections/CollectionDetail.tsx
+++ b/src/features/collections/CollectionDetail.tsx
@@ -178,24 +178,26 @@ export const CollectionDetail = () => {
             <>
               <div className={styles['collection_toolbar']}>
                 <Stack direction="row" spacing={1}>
-                  <Input
-                    hidden={!showSearch}
-                    className={styles['search-box']}
-                    placeholder="Search genomes by classification"
-                  />
-                  <Button
-                    hidden={!showMatchButton}
-                    icon={<FontAwesomeIcon icon={faArrowRightArrowLeft} />}
-                    variant="text"
-                    onClick={() => {
-                      setModalView('match');
-                      modal?.show();
-                    }}
-                  >
-                    {match
-                      ? `Matching by ${MATCHER_LABELS.get(match.matcher_id)}`
-                      : `Match My Data`}
-                  </Button>
+                  {showSearch && (
+                    <Input
+                      className={styles['search-box']}
+                      placeholder="Search genomes by classification"
+                    />
+                  )}
+                  {showMatchButton && (
+                    <Button
+                      icon={<FontAwesomeIcon icon={faArrowRightArrowLeft} />}
+                      variant="text"
+                      onClick={() => {
+                        setModalView('match');
+                        modal?.show();
+                      }}
+                    >
+                      {match
+                        ? `Matching by ${MATCHER_LABELS.get(match.matcher_id)}`
+                        : `Match My Data`}
+                    </Button>
+                  )}
                 </Stack>
                 <Button
                   icon={<FontAwesomeIcon icon={faFileExport} />}
@@ -237,29 +239,30 @@ export const CollectionDetail = () => {
               />
             ) : currDataProduct ? (
               <>
-                <Stack
-                  className={styles['filter-controls']}
-                  direction="row"
-                  spacing={2}
-                  alignItems="center"
-                >
-                  <Button
-                    hidden={!showFilterButton}
-                    ref={filterMenuRef}
-                    icon={<FontAwesomeIcon icon={faSliders} />}
-                    onClick={handleToggleFilters}
+                {showFilterButton && (
+                  <Stack
+                    className={styles['filter-controls']}
+                    direction="row"
+                    spacing={2}
+                    alignItems="center"
                   >
-                    Filters
-                  </Button>
-                  <div className={styles['filter-chips-label']}>
-                    {filterEntries ? filterEntries.length : '0'} active{' '}
-                    {filterEntries && filterEntries.length !== 1
-                      ? 'filters'
-                      : 'filter'}
-                    {filterEntries && filterEntries.length > 0 ? ':' : ''}
-                  </div>
-                  <FilterChips collectionId={collection.id} />
-                </Stack>
+                    <Button
+                      ref={filterMenuRef}
+                      icon={<FontAwesomeIcon icon={faSliders} />}
+                      onClick={handleToggleFilters}
+                    >
+                      Filters
+                    </Button>
+                    <div className={styles['filter-chips-label']}>
+                      {filterEntries ? filterEntries.length : '0'} active{' '}
+                      {filterEntries && filterEntries.length !== 1
+                        ? 'filters'
+                        : 'filter'}
+                      {filterEntries && filterEntries.length > 0 ? ':' : ''}
+                    </div>
+                    <FilterChips collectionId={collection.id} />
+                  </Stack>
+                )}
                 <DataProduct
                   dataProduct={currDataProduct}
                   collection_id={collection.id}

From 582935fca8f4993735f3ab8ffe2546283d8b515c Mon Sep 17 00:00:00 2001
From: Cody O'Donnell <ctodonnell@lbl.gov>
Date: Tue, 26 Mar 2024 08:54:49 -0700
Subject: [PATCH 05/10] Modify matched bar color and modify padding

---
 src/features/collections/data_products/TaxaCount.module.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/features/collections/data_products/TaxaCount.module.scss b/src/features/collections/data_products/TaxaCount.module.scss
index b498e740..ea1a3488 100644
--- a/src/features/collections/data_products/TaxaCount.module.scss
+++ b/src/features/collections/data_products/TaxaCount.module.scss
@@ -7,7 +7,7 @@ $gaps: 5px;
   display: flex;
   flex-flow: row nowrap;
   gap: $gaps;
-  padding: 0.5rem;
+  padding: 0 1rem 1rem;
   width: 100%;
 }
 
@@ -59,7 +59,7 @@ $gaps: 5px;
 
   &.matched {
     .bar {
-      background: use-color("secondary");
+      background: use-color("accent-warm");
     }
   }
 

From 7f001fe797615895e47774c8f1678a666e3cb945 Mon Sep 17 00:00:00 2001
From: Cody O'Donnell <ctodonnell@lbl.gov>
Date: Tue, 26 Mar 2024 09:45:12 -0700
Subject: [PATCH 06/10] Style pagination and duplicate it on top of table

---
 src/common/components/Table.module.scss       | 27 +++++++-----
 src/common/components/Table.tsx               | 14 ++++---
 .../data_products/GenomeAttribs.tsx           |  3 ++
 .../data_products/SampleAttribs.tsx           | 41 +++++++++++--------
 4 files changed, 50 insertions(+), 35 deletions(-)

diff --git a/src/common/components/Table.module.scss b/src/common/components/Table.module.scss
index bcb9ee14..774c7a39 100644
--- a/src/common/components/Table.module.scss
+++ b/src/common/components/Table.module.scss
@@ -34,21 +34,26 @@ $header-height: 2em;
 }
 
 .pagination {
-  align-items: stretch;
-  display: flex;
-  flex-flow: row nowrap;
-  gap: 0.333em;
-  justify-content: flex-start;
-  max-width: 20em;
+  display: block;
+  text-align: right;
 
   * {
-    flex: 1 1 2.25em;
-    min-width: fit-content;
+    display: inline-block;
+    margin-left: 0.5rem;
+  }
+
+  *:first-child {
+    margin-left: 0;
+  }
+
+  [disabled] {
+    color: #000;
   }
 
-  *:first-child,
-  *:last-child {
-    flex: 0 1 2.25em;
+  .selected {
+    background-color: use-color("mid-green-light");
+    color: #000;
+    opacity: 1;
   }
 }
 
diff --git a/src/common/components/Table.tsx b/src/common/components/Table.tsx
index 69d42f87..d514e5e3 100644
--- a/src/common/components/Table.tsx
+++ b/src/common/components/Table.tsx
@@ -165,7 +165,7 @@ export const Pagination = <Datum,>({
   if (buttons[0] !== start) {
     buttons[0] = start;
     buttons[1] = (
-      <Button key="etc-start" color="base" disabled>
+      <Button key="etc-start" color="gray" disabled>
         {'...'}
       </Button>
     );
@@ -173,7 +173,7 @@ export const Pagination = <Datum,>({
   buttons.unshift(
     <Button
       className={classNamePagination}
-      color="base"
+      color="gray"
       disabled={!table.getCanPreviousPage()}
       key="prev"
       onClick={() => table.previousPage()}
@@ -189,7 +189,7 @@ export const Pagination = <Datum,>({
       <Button
         key="etc-end"
         className={classNamePagination}
-        color="base"
+        color="gray"
         disabled
       >
         {'...'}
@@ -199,7 +199,7 @@ export const Pagination = <Datum,>({
   buttons.push(
     <Button
       className={classNamePagination}
-      color="base"
+      color="gray"
       disabled={!table.getCanNextPage() || curr >= maxPage}
       key="next"
       onClick={() => table.nextPage()}
@@ -210,8 +210,10 @@ export const Pagination = <Datum,>({
   const buttonList = buttons.map((button, ix) =>
     typeof button === 'number' ? (
       <Button
-        className={classNamePagination}
-        color="base"
+        className={`${classNamePagination} ${
+          button === curr ? classes.selected : ''
+        }`}
+        color="gray"
         disabled={button === curr || button > maxPage}
         hidden={button > maxPage} // Hides the max page when we can't display it
         key={button}
diff --git a/src/features/collections/data_products/GenomeAttribs.tsx b/src/features/collections/data_products/GenomeAttribs.tsx
index 992e4aa9..50c7739c 100644
--- a/src/features/collections/data_products/GenomeAttribs.tsx
+++ b/src/features/collections/data_products/GenomeAttribs.tsx
@@ -324,11 +324,14 @@ export const GenomeAttribs: FC<{
             className={classes['table-toolbar']}
             direction="row"
             spacing={1}
+            justifyContent="space-between"
+            alignItems="center"
           >
             <span>
               Showing {formatNumber(firstRow)} - {formatNumber(lastRow)} of{' '}
               {formatNumber(count || 0)} genomes
             </span>
+            <Pagination table={table} maxPage={10000 / pagination.pageSize} />
           </Stack>
           <Table
             table={table}
diff --git a/src/features/collections/data_products/SampleAttribs.tsx b/src/features/collections/data_products/SampleAttribs.tsx
index a6c462db..a61d629a 100644
--- a/src/features/collections/data_products/SampleAttribs.tsx
+++ b/src/features/collections/data_products/SampleAttribs.tsx
@@ -252,26 +252,31 @@ export const SampleAttribs: FC<{
             className={classes['table-toolbar']}
             direction="row"
             spacing={1}
+            justifyContent="space-between"
+            alignItems="center"
           >
-            <span>
-              Showing {formatNumber(firstRow)} - {formatNumber(lastRow)} of{' '}
-              {formatNumber(countData?.count || 0)} genomes
-            </span>
-            <span>
-              <CheckBox
-                checked={matchMark}
-                onChange={() => setMatchMark((v) => !v)}
-              />{' '}
-              Show Unmatched
-            </span>
+            <Stack direction="row" spacing={1}>
+              <span>
+                Showing {formatNumber(firstRow)} - {formatNumber(lastRow)} of{' '}
+                {formatNumber(countData?.count || 0)} genomes
+              </span>
+              <span>
+                <CheckBox
+                  checked={matchMark}
+                  onChange={() => setMatchMark((v) => !v)}
+                />{' '}
+                Show Unmatched
+              </span>
 
-            <span>
-              <CheckBox
-                checked={selectMark}
-                onChange={() => setSelectMark((v) => !v)}
-              />{' '}
-              Show Unselected
-            </span>
+              <span>
+                <CheckBox
+                  checked={selectMark}
+                  onChange={() => setSelectMark((v) => !v)}
+                />{' '}
+                Show Unselected
+              </span>
+            </Stack>
+            <Pagination table={table} maxPage={10000 / pagination.pageSize} />
           </Stack>
           <Table
             table={table}

From 91ebe91d78412d2bf4e2dfb0f7d8bd2f229751a4 Mon Sep 17 00:00:00 2001
From: Cody O'Donnell <ctodonnell@lbl.gov>
Date: Tue, 26 Mar 2024 10:03:03 -0700
Subject: [PATCH 07/10] Make match button standout

---
 src/features/collections/CollectionDetail.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/collections/CollectionDetail.tsx b/src/features/collections/CollectionDetail.tsx
index ac2101dc..7a3026c3 100644
--- a/src/features/collections/CollectionDetail.tsx
+++ b/src/features/collections/CollectionDetail.tsx
@@ -187,7 +187,7 @@ export const CollectionDetail = () => {
                   {showMatchButton && (
                     <Button
                       icon={<FontAwesomeIcon icon={faArrowRightArrowLeft} />}
-                      variant="text"
+                      color="accent-warm"
                       onClick={() => {
                         setModalView('match');
                         modal?.show();

From f390a8935df0f421ffba97fd41976fd31c45963b Mon Sep 17 00:00:00 2001
From: Cody O'Donnell <ctodonnell@lbl.gov>
Date: Tue, 26 Mar 2024 10:09:55 -0700
Subject: [PATCH 08/10] Lighten match button

---
 src/features/collections/CollectionDetail.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/features/collections/CollectionDetail.tsx b/src/features/collections/CollectionDetail.tsx
index 865c779d..c76e0eed 100644
--- a/src/features/collections/CollectionDetail.tsx
+++ b/src/features/collections/CollectionDetail.tsx
@@ -187,7 +187,7 @@ export const CollectionDetail = () => {
                   {showMatchButton && (
                     <Button
                       icon={<FontAwesomeIcon icon={faArrowRightArrowLeft} />}
-                      color="accent-warm"
+                      color="accent-warm-light"
                       onClick={() => {
                         setModalView('match');
                         modal?.show();

From be2871fc09f081b6c43a2b41cfcad74f2538c657 Mon Sep 17 00:00:00 2001
From: Cody O'Donnell <ctodonnell@lbl.gov>
Date: Tue, 26 Mar 2024 12:28:30 -0700
Subject: [PATCH 09/10] Remove unnecessary checkboxes from samples table

---
 .../collections/data_products/SampleAttribs.tsx   | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/features/collections/data_products/SampleAttribs.tsx b/src/features/collections/data_products/SampleAttribs.tsx
index 396cf7fb..967231fb 100644
--- a/src/features/collections/data_products/SampleAttribs.tsx
+++ b/src/features/collections/data_products/SampleAttribs.tsx
@@ -277,21 +277,6 @@ export const SampleAttribs: FC<{
                 Showing {formatNumber(firstRow)} - {formatNumber(lastRow)} of{' '}
                 {formatNumber(countData?.count || 0)} samples
               </span>
-              <span>
-                <CheckBox
-                  checked={matchMark}
-                  onChange={() => setMatchMark((v) => !v)}
-                />{' '}
-                Show Unmatched
-              </span>
-
-              <span>
-                <CheckBox
-                  checked={selectMark}
-                  onChange={() => setSelectMark((v) => !v)}
-                />{' '}
-                Show Unselected
-              </span>
             </Stack>
             <Pagination table={table} maxPage={10000 / pagination.pageSize} />
           </Stack>

From 96c094c5cd24706e1d899d7d5a5d2149fdd48d37 Mon Sep 17 00:00:00 2001
From: Cody O'Donnell <ctodonnell@lbl.gov>
Date: Tue, 26 Mar 2024 12:38:09 -0700
Subject: [PATCH 10/10] Fix filter menu accordion state

---
 src/features/collections/CollectionDetail.tsx | 22 ++++---------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/src/features/collections/CollectionDetail.tsx b/src/features/collections/CollectionDetail.tsx
index 096b89e8..276ef252 100644
--- a/src/features/collections/CollectionDetail.tsx
+++ b/src/features/collections/CollectionDetail.tsx
@@ -393,29 +393,15 @@ const FilterMenu = ({
   } = useFilterEntries(collectionId);
 
   /**
-   * Store category expanded state in an object
+   * Store expanded category string, empty string for none expanded
    */
-  const [expandedByCategory, setExpandedByCategory] = useState(() => {
-    const expanded: { [key: string]: boolean } = {};
-    categorizedFilters.forEach((category) => {
-      expanded[category.category] = false;
-    });
-    return expanded;
-  });
+  const [expandedCategory, setExpandedCategory] = useState('');
 
   /**
    * Only allow one category to be expanded at a time.
    */
   const handleExpand = (expanded: boolean, category: string) => {
-    const newValue = { ...expandedByCategory };
-    Object.keys(expandedByCategory).forEach((c) => {
-      if (expanded && c === category) {
-        newValue[c] = true;
-      } else {
-        newValue[c] = false;
-      }
-    });
-    setExpandedByCategory(newValue);
+    setExpandedCategory(expanded ? category : '');
   };
 
   if (open) {
@@ -448,7 +434,7 @@ const FilterMenu = ({
                 key={`${category.category}-${context}`}
                 className={styles['filter-category']}
                 elevation={0}
-                expanded={expandedByCategory[category.category]}
+                expanded={category.category === expandedCategory}
                 onChange={(e, expanded) =>
                   handleExpand(expanded, category.category)
                 }