From 7b718e43551e2f69b37a3762d3d0a0c568ad4be4 Mon Sep 17 00:00:00 2001
From: Cody O'Donnell <ctodonnell@lbl.gov>
Date: Wed, 28 Feb 2024 11:23:12 -0800
Subject: [PATCH] Quick updates to toolbar for testing

---
 src/features/collections/CollectionDetail.tsx | 52 +++++++++----------
 .../collections/Collections.module.scss       |  4 ++
 2 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/features/collections/CollectionDetail.tsx b/src/features/collections/CollectionDetail.tsx
index 699ab6d3..1d89e0b7 100644
--- a/src/features/collections/CollectionDetail.tsx
+++ b/src/features/collections/CollectionDetail.tsx
@@ -12,7 +12,7 @@ import { snakeCaseToHumanReadable } from '../../common/utils/stringUtils';
 import { MATCHER_LABELS, MatchModal } from './MatchModal';
 import { SelectionModal } from './SelectionModal';
 import { ExportModal } from './ExportModal';
-import { Button } from '../../common/components';
+import { Button, Input } from '../../common/components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faArrowRightArrowLeft,
@@ -127,31 +127,31 @@ export const CollectionDetail = () => {
           {!showOverview && (
             <>
               <div className={styles['collection_toolbar']}>
-                <Button
-                  ref={filterMenuRef}
-                  icon={<FontAwesomeIcon icon={faFilter} />}
-                  onClick={handleToggleFilters}
-                >
-                  Filters
-                </Button>
-                {/* <FilterMenu
-              collectionId={collection.id}
-              anchorEl={filterMenuRef.current}
-              open={filterOpen}
-              onClose={() => setFiltersOpen(false)}
-            /> */}
-                <Button
-                  icon={<FontAwesomeIcon icon={faArrowRightArrowLeft} />}
-                  variant="contained"
-                  onClick={() => {
-                    setModalView('match');
-                    modal?.show();
-                  }}
-                >
-                  {match
-                    ? `Matching by ${MATCHER_LABELS.get(match.matcher_id)}`
-                    : `Match my Data`}
-                </Button>
+                <Stack direction="row" spacing={1}>
+                  <Input
+                    className={styles['search-box']}
+                    placeholder="Search genomes by classification"
+                  />
+                  <Button
+                    ref={filterMenuRef}
+                    icon={<FontAwesomeIcon icon={faFilter} />}
+                    onClick={handleToggleFilters}
+                  >
+                    Filters
+                  </Button>
+                  <Button
+                    icon={<FontAwesomeIcon icon={faArrowRightArrowLeft} />}
+                    variant="contained"
+                    onClick={() => {
+                      setModalView('match');
+                      modal?.show();
+                    }}
+                  >
+                    {match
+                      ? `Matching by ${MATCHER_LABELS.get(match.matcher_id)}`
+                      : `Match my Data`}
+                  </Button>
+                </Stack>
                 <Button
                   icon={<FontAwesomeIcon icon={faCircleCheck} />}
                   variant={selection.length > 0 ? 'contained' : 'outlined'}
diff --git a/src/features/collections/Collections.module.scss b/src/features/collections/Collections.module.scss
index 51807a53..d9b1b0cf 100644
--- a/src/features/collections/Collections.module.scss
+++ b/src/features/collections/Collections.module.scss
@@ -71,6 +71,10 @@ $border: 1px solid use-color("base-lighter");
   justify-content: space-between;
 }
 
+.search-box {
+  width: 400px;
+}
+
 .detail_content {
   background-color: use-color("base-lightest");
   display: flex;