From 1971ea4a4b1a96bcdcf0e729f03fc08ffbdf6aa8 Mon Sep 17 00:00:00 2001
From: Louise Davies <louise.davies@stfc.ac.uk>
Date: Fri, 17 May 2024 15:37:36 +0100
Subject: [PATCH] #1152 - fix overflow issues when filter chips were present
 also some other minor styling stuff

---
 .../card/datasetSearchCardView.component.tsx  | 72 +++++++++--------
 .../investigationSearchCardView.component.tsx | 74 ++++++++---------
 .../facetPanel/facetPanel.component.tsx       |  4 +-
 .../selectedFilterChips.component.tsx         |  8 +-
 .../src/searchPageContainer.component.tsx     | 10 ++-
 .../src/searchTabs/searchTabs.component.tsx   | 80 +++++++++----------
 .../table/datafileSearchTable.component.tsx   | 77 ++++++++++--------
 .../table/datasetSearchTable.component.tsx    | 77 ++++++++++--------
 .../investigationSearchTable.component.tsx    | 77 ++++++++++--------
 9 files changed, 258 insertions(+), 221 deletions(-)

diff --git a/packages/datagateway-search/src/card/datasetSearchCardView.component.tsx b/packages/datagateway-search/src/card/datasetSearchCardView.component.tsx
index ad974b718..03568e54a 100644
--- a/packages/datagateway-search/src/card/datasetSearchCardView.component.tsx
+++ b/packages/datagateway-search/src/card/datasetSearchCardView.component.tsx
@@ -436,45 +436,47 @@ const DatasetCardView: React.FC<DatasetCardViewProps> = (props) => {
           />
         )}
       </Grid>
-      <Grid item xs={10}>
+      <Grid container item xs={10} direction="column" wrap="nowrap">
         <SelectedFilterChips
           filters={filters}
           onRemoveFilter={removeFilterChip}
         />
-        <Paper variant="outlined" sx={{ height: '100%', marginTop: 1 }}>
-          <div>
-            {aborted ? (
-              <Paper>
-                <Typography align="center" variant="h6" component="h6">
-                  {t('loading.abort_message')}
-                </Typography>
-              </Paper>
-            ) : (
-              <CardView
-                entityName="Dataset"
-                data={paginatedSource ?? []}
-                totalDataCount={
-                  aggregatedIds?.length + (hasNextPage ? 1 : 0) ?? 0
-                }
-                onPageChange={pushPage}
-                onFilter={pushFilter}
-                onSort={handleSort}
-                onResultsChange={pushResults}
-                loadedData={!isLoading}
-                loadedCount={!isLoading}
-                filters={{}}
-                sort={{}}
-                page={page}
-                results={results}
-                title={title}
-                description={description}
-                information={information}
-                moreInformation={moreInformation}
-                buttons={buttons}
-              />
-            )}
-          </div>
-        </Paper>
+        <Grid item xs>
+          <Paper variant="outlined" sx={{ height: '100%', marginTop: 1 }}>
+            <div>
+              {aborted ? (
+                <Paper>
+                  <Typography align="center" variant="h6" component="h6">
+                    {t('loading.abort_message')}
+                  </Typography>
+                </Paper>
+              ) : (
+                <CardView
+                  entityName="Dataset"
+                  data={paginatedSource ?? []}
+                  totalDataCount={
+                    aggregatedIds?.length + (hasNextPage ? 1 : 0) ?? 0
+                  }
+                  onPageChange={pushPage}
+                  onFilter={pushFilter}
+                  onSort={handleSort}
+                  onResultsChange={pushResults}
+                  loadedData={!isLoading}
+                  loadedCount={!isLoading}
+                  filters={{}}
+                  sort={{}}
+                  page={page}
+                  results={results}
+                  title={title}
+                  description={description}
+                  information={information}
+                  moreInformation={moreInformation}
+                  buttons={buttons}
+                />
+              )}
+            </div>
+          </Paper>
+        </Grid>
       </Grid>
     </Grid>
   );
diff --git a/packages/datagateway-search/src/card/investigationSearchCardView.component.tsx b/packages/datagateway-search/src/card/investigationSearchCardView.component.tsx
index db7b45a70..8bb8146bc 100644
--- a/packages/datagateway-search/src/card/investigationSearchCardView.component.tsx
+++ b/packages/datagateway-search/src/card/investigationSearchCardView.component.tsx
@@ -407,46 +407,48 @@ const InvestigationCardView: React.FC<InvestigationCardProps> = (props) => {
           />
         )}
       </Grid>
-      <Grid item xs={10}>
+      <Grid container item xs={10} direction="column" wrap="nowrap">
         <SelectedFilterChips
           filters={filters}
           onRemoveFilter={removeFilterChip}
         />
-        <Paper variant="outlined" sx={{ height: '100%', marginTop: 1 }}>
-          <div>
-            {aborted ? (
-              <Paper>
-                <Typography align="center" variant="h6" component="h6">
-                  {t('loading.abort_message')}
-                </Typography>
-              </Paper>
-            ) : (
-              <CardView
-                entityName="Investigation"
-                data={paginatedSource ?? []}
-                totalDataCount={
-                  aggregatedIds?.length + (hasNextPage ? 1 : 0) ?? 0
-                }
-                onPageChange={pushPage}
-                onFilter={pushFilter}
-                onSort={handleSort}
-                onResultsChange={pushResults}
-                loadedData={!isLoading}
-                loadedCount={!isLoading}
-                filters={{}}
-                sort={sort}
-                page={page}
-                results={results}
-                title={title}
-                description={description}
-                information={information}
-                moreInformation={moreInformation}
-                buttons={buttons}
-                allIds={aggregatedIds}
-              />
-            )}
-          </div>
-        </Paper>
+        <Grid item xs>
+          <Paper variant="outlined" sx={{ height: '100%', marginTop: 1 }}>
+            <div>
+              {aborted ? (
+                <Paper>
+                  <Typography align="center" variant="h6" component="h6">
+                    {t('loading.abort_message')}
+                  </Typography>
+                </Paper>
+              ) : (
+                <CardView
+                  entityName="Investigation"
+                  data={paginatedSource ?? []}
+                  totalDataCount={
+                    aggregatedIds?.length + (hasNextPage ? 1 : 0) ?? 0
+                  }
+                  onPageChange={pushPage}
+                  onFilter={pushFilter}
+                  onSort={handleSort}
+                  onResultsChange={pushResults}
+                  loadedData={!isLoading}
+                  loadedCount={!isLoading}
+                  filters={{}}
+                  sort={sort}
+                  page={page}
+                  results={results}
+                  title={title}
+                  description={description}
+                  information={information}
+                  moreInformation={moreInformation}
+                  buttons={buttons}
+                  allIds={aggregatedIds}
+                />
+              )}
+            </div>
+          </Paper>
+        </Grid>
       </Grid>
     </Grid>
   );
diff --git a/packages/datagateway-search/src/facet/components/facetPanel/facetPanel.component.tsx b/packages/datagateway-search/src/facet/components/facetPanel/facetPanel.component.tsx
index 3e772e74d..ed51d06cb 100644
--- a/packages/datagateway-search/src/facet/components/facetPanel/facetPanel.component.tsx
+++ b/packages/datagateway-search/src/facet/components/facetPanel/facetPanel.component.tsx
@@ -135,7 +135,9 @@ function FacetPanel({
       >
         <Typography variant="h6">{t('facetPanel.title')}</Typography>
         {showApplyButton && (
-          <Button onClick={onApplyFacetFilters}>{t('facetPanel.apply')}</Button>
+          <Button variant="contained" onClick={onApplyFacetFilters}>
+            {t('facetPanel.apply')}
+          </Button>
         )}
       </Box>
 
diff --git a/packages/datagateway-search/src/facet/components/selectedFilterChips.component.tsx b/packages/datagateway-search/src/facet/components/selectedFilterChips.component.tsx
index 8967dabe1..f161322cc 100644
--- a/packages/datagateway-search/src/facet/components/selectedFilterChips.component.tsx
+++ b/packages/datagateway-search/src/facet/components/selectedFilterChips.component.tsx
@@ -29,12 +29,12 @@ function SelectedFilterChips({
       aria-label={t('selectedFilters')}
       direction="row"
       spacing={1}
-      sx={{ flexWrap: 'wrap', gap: 1 }}
+      sx={{ flexWrap: 'wrap', rowGap: 1, ml: -1 }}
     >
-      {Object.entries(filters).flatMap(([filterKey, filterValue]) => {
+      {Object.entries(filters).flatMap(([filterKey, filterValue], i) => {
         if (!Array.isArray(filterValue)) return [];
 
-        return filterValue.flatMap((value) => {
+        return filterValue.flatMap((value, j) => {
           if (typeof value === 'string') {
             return [
               <Chip
@@ -43,6 +43,7 @@ function SelectedFilterChips({
                 onDelete={() => {
                   onRemoveFilter(filterKey, value);
                 }}
+                sx={i === 0 && j === 0 ? { ml: 1 } : {}}
               />,
             ];
           }
@@ -55,6 +56,7 @@ function SelectedFilterChips({
                 onDelete={() => {
                   onRemoveFilter(filterKey, value);
                 }}
+                sx={i === 0 && j === 0 ? { ml: 1 } : {}}
               />,
             ];
           }
diff --git a/packages/datagateway-search/src/searchPageContainer.component.tsx b/packages/datagateway-search/src/searchPageContainer.component.tsx
index 1cc218da8..513faac1f 100644
--- a/packages/datagateway-search/src/searchPageContainer.component.tsx
+++ b/packages/datagateway-search/src/searchPageContainer.component.tsx
@@ -387,8 +387,8 @@ const SearchPageContainer: React.FC = () => {
   }, []);
 
   // Table should take up page but leave room for: SG appbar, SG footer,
-  // search box, search box padding, display as cards button, loading bar
-  const containerHeight = `calc(100vh - 64px - 36px - ${searchBoxHeight}px - 8px - 49px)`;
+  // search box, search box padding, display as cards button, loading bar, paper outline
+  const containerHeight = `calc(100vh - 64px - 36px - ${searchBoxHeight}px - 8px - 49px - 2px)`;
 
   const { data: cartItems } = useCart();
   const { push } = useHistory();
@@ -489,7 +489,11 @@ const SearchPageContainer: React.FC = () => {
                   data-testid="container-search-table"
                   id="container-search-table"
                 >
-                  <DataViewPaper view={view} containerHeight={containerHeight}>
+                  <DataViewPaper
+                    view={view}
+                    containerHeight={containerHeight}
+                    variant="outlined"
+                  >
                     <SearchTabs
                       view={view}
                       containerHeight={containerHeight}
diff --git a/packages/datagateway-search/src/searchTabs/searchTabs.component.tsx b/packages/datagateway-search/src/searchTabs/searchTabs.component.tsx
index a38c3202d..d74d90ae6 100644
--- a/packages/datagateway-search/src/searchTabs/searchTabs.component.tsx
+++ b/packages/datagateway-search/src/searchTabs/searchTabs.component.tsx
@@ -220,55 +220,53 @@ const SearchTabs = ({
         </StyledBox>
       </StyledBox>
       <SearchResultCountDispatch.Provider value={dispatch}>
-        <Box>
-          <TabPanel value={currentTab} index="investigation">
-            {view === 'card' ? (
-              <InvestigationCardView hierarchy={hierarchy} />
-            ) : (
-              <Paper
-                sx={{
-                  height: `calc(${containerHeight} - 56px)`,
-                  minHeight: `calc(500px - 56px)`,
-                  overflowX: 'auto',
-                  overflowY: 'hidden',
-                }}
-                elevation={0}
-              >
-                <InvestigationSearchTable hierarchy={hierarchy} />
-              </Paper>
-            )}
-          </TabPanel>
-          <TabPanel value={currentTab} index="dataset">
-            {view === 'card' ? (
-              <DatasetCardView hierarchy={hierarchy} />
-            ) : (
-              <Paper
-                sx={{
-                  height: `calc(${containerHeight} - 56px)`,
-                  minHeight: `calc(500px - 56px)`,
-                  overflowX: 'auto',
-                  overflowY: 'hidden',
-                }}
-                elevation={0}
-              >
-                <DatasetSearchTable hierarchy={hierarchy} />
-              </Paper>
-            )}
-          </TabPanel>
-          <TabPanel value={currentTab} index="datafile">
+        <TabPanel value={currentTab} index="investigation">
+          {view === 'card' ? (
+            <InvestigationCardView hierarchy={hierarchy} />
+          ) : (
+            <Paper
+              sx={{
+                height: `calc(${containerHeight} - 56px)`,
+                minHeight: `calc(500px - 56px)`,
+                overflow: 'auto',
+                bgcolor: 'background.default',
+              }}
+              elevation={0}
+            >
+              <InvestigationSearchTable hierarchy={hierarchy} />
+            </Paper>
+          )}
+        </TabPanel>
+        <TabPanel value={currentTab} index="dataset">
+          {view === 'card' ? (
+            <DatasetCardView hierarchy={hierarchy} />
+          ) : (
             <Paper
               sx={{
                 height: `calc(${containerHeight} - 56px)`,
                 minHeight: `calc(500px - 56px)`,
-                overflowX: 'auto',
-                overflowY: 'hidden',
+                overflow: 'auto',
+                bgcolor: 'background.default',
               }}
               elevation={0}
             >
-              <DatafileSearchTable hierarchy={hierarchy} />
+              <DatasetSearchTable hierarchy={hierarchy} />
             </Paper>
-          </TabPanel>
-        </Box>
+          )}
+        </TabPanel>
+        <TabPanel value={currentTab} index="datafile">
+          <Paper
+            sx={{
+              height: `calc(${containerHeight} - 56px)`,
+              minHeight: `calc(500px - 56px)`,
+              overflow: 'auto',
+              bgcolor: 'background.default',
+            }}
+            elevation={0}
+          >
+            <DatafileSearchTable hierarchy={hierarchy} />
+          </Paper>
+        </TabPanel>
       </SearchResultCountDispatch.Provider>
     </div>
   );
diff --git a/packages/datagateway-search/src/table/datafileSearchTable.component.tsx b/packages/datagateway-search/src/table/datafileSearchTable.component.tsx
index de8579e06..e5447afe9 100644
--- a/packages/datagateway-search/src/table/datafileSearchTable.component.tsx
+++ b/packages/datagateway-search/src/table/datafileSearchTable.component.tsx
@@ -318,7 +318,7 @@ const DatafileSearchTable: React.FC<DatafileSearchTableProps> = (props) => {
       data-testid="datafile-search-table"
       container
       spacing={1}
-      sx={{ height: '100%' }}
+      sx={{ height: 'calc(100% - 24px)' }}
     >
       <Grid item xs={2} sx={{ height: '100%' }}>
         {data?.pages && (
@@ -348,43 +348,52 @@ const DatafileSearchTable: React.FC<DatafileSearchTableProps> = (props) => {
           />
         )}
       </Grid>
-      <Grid item xs={10}>
+      <Grid container item xs={10} direction="column">
         <SelectedFilterChips
           filters={filters}
           onRemoveFilter={removeFilterChip}
         />
-        <Paper variant="outlined" sx={{ height: '100%', marginTop: 1 }}>
-          <div>
-            {aborted ? (
-              <Paper>
-                <Typography align="center" variant="h6" component="h6">
-                  {t('loading.abort_message')}
-                </Typography>
-              </Paper>
-            ) : (
-              <Table
-                loading={
-                  addToCartLoading || removeFromCartLoading || cartLoading
-                }
-                data={aggregatedSource}
-                loadMoreRows={loadMoreRows}
-                totalRowCount={
-                  aggregatedSource?.length + (hasNextPage ? 1 : 0) ?? 0
-                }
-                sort={{}}
-                onSort={handleSort}
-                selectedRows={selectedRows}
-                disableSelectAll={!selectAllSetting}
-                allIds={aggregatedIds}
-                onCheck={addToCart}
-                onUncheck={removeFromCart}
-                detailsPanel={detailsPanel}
-                columns={columns}
-                shortHeader={true}
-              />
-            )}
-          </div>
-        </Paper>
+        <Grid item xs>
+          <Paper
+            variant="outlined"
+            sx={{
+              height: '100%',
+              minHeight: '300px',
+              marginTop: 1,
+            }}
+          >
+            <div style={{ height: '100%' }}>
+              {aborted ? (
+                <Paper>
+                  <Typography align="center" variant="h6" component="h6">
+                    {t('loading.abort_message')}
+                  </Typography>
+                </Paper>
+              ) : (
+                <Table
+                  loading={
+                    addToCartLoading || removeFromCartLoading || cartLoading
+                  }
+                  data={aggregatedSource}
+                  loadMoreRows={loadMoreRows}
+                  totalRowCount={
+                    aggregatedSource?.length + (hasNextPage ? 1 : 0) ?? 0
+                  }
+                  sort={{}}
+                  onSort={handleSort}
+                  selectedRows={selectedRows}
+                  disableSelectAll={!selectAllSetting}
+                  allIds={aggregatedIds}
+                  onCheck={addToCart}
+                  onUncheck={removeFromCart}
+                  detailsPanel={detailsPanel}
+                  columns={columns}
+                  shortHeader={true}
+                />
+              )}
+            </div>
+          </Paper>
+        </Grid>
       </Grid>
     </Grid>
   );
diff --git a/packages/datagateway-search/src/table/datasetSearchTable.component.tsx b/packages/datagateway-search/src/table/datasetSearchTable.component.tsx
index ee05bc65a..9b46e8c53 100644
--- a/packages/datagateway-search/src/table/datasetSearchTable.component.tsx
+++ b/packages/datagateway-search/src/table/datasetSearchTable.component.tsx
@@ -378,7 +378,7 @@ const DatasetSearchTable: React.FC<DatasetTableProps> = ({ hierarchy }) => {
       data-testid="dataset-search-table"
       container
       spacing={1}
-      sx={{ height: '100%' }}
+      sx={{ height: 'calc(100% - 24px)' }}
     >
       <Grid item xs={2} sx={{ height: '100%' }}>
         {data?.pages && (
@@ -408,43 +408,52 @@ const DatasetSearchTable: React.FC<DatasetTableProps> = ({ hierarchy }) => {
           />
         )}
       </Grid>
-      <Grid item xs={10}>
+      <Grid container item xs={10} direction="column">
         <SelectedFilterChips
           filters={filters}
           onRemoveFilter={removeFilterChip}
         />
-        <Paper variant="outlined" sx={{ height: '100%', marginTop: 1 }}>
-          <div>
-            {aborted ? (
-              <Paper>
-                <Typography align="center" variant="h6" component="h6">
-                  {t('loading.abort_message')}
-                </Typography>
-              </Paper>
-            ) : (
-              <Table
-                loading={
-                  addToCartLoading || removeFromCartLoading || cartLoading
-                }
-                data={aggregatedSource}
-                loadMoreRows={loadMoreRows}
-                totalRowCount={
-                  aggregatedSource?.length + (hasNextPage ? 1 : 0) ?? 0
-                }
-                sort={{}}
-                onSort={handleSort}
-                selectedRows={selectedRows}
-                disableSelectAll={!selectAllSetting}
-                allIds={aggregatedIds}
-                onCheck={addToCart}
-                onUncheck={removeFromCart}
-                detailsPanel={detailsPanel}
-                columns={columns}
-                shortHeader={true}
-              />
-            )}
-          </div>
-        </Paper>
+        <Grid item xs>
+          <Paper
+            variant="outlined"
+            sx={{
+              height: '100%',
+              minHeight: '300px',
+              marginTop: 1,
+            }}
+          >
+            <div style={{ height: '100%' }}>
+              {aborted ? (
+                <Paper>
+                  <Typography align="center" variant="h6" component="h6">
+                    {t('loading.abort_message')}
+                  </Typography>
+                </Paper>
+              ) : (
+                <Table
+                  loading={
+                    addToCartLoading || removeFromCartLoading || cartLoading
+                  }
+                  data={aggregatedSource}
+                  loadMoreRows={loadMoreRows}
+                  totalRowCount={
+                    aggregatedSource?.length + (hasNextPage ? 1 : 0) ?? 0
+                  }
+                  sort={{}}
+                  onSort={handleSort}
+                  selectedRows={selectedRows}
+                  disableSelectAll={!selectAllSetting}
+                  allIds={aggregatedIds}
+                  onCheck={addToCart}
+                  onUncheck={removeFromCart}
+                  detailsPanel={detailsPanel}
+                  columns={columns}
+                  shortHeader={true}
+                />
+              )}
+            </div>
+          </Paper>
+        </Grid>
       </Grid>
     </Grid>
   );
diff --git a/packages/datagateway-search/src/table/investigationSearchTable.component.tsx b/packages/datagateway-search/src/table/investigationSearchTable.component.tsx
index 77d5b265f..f99c67ca4 100644
--- a/packages/datagateway-search/src/table/investigationSearchTable.component.tsx
+++ b/packages/datagateway-search/src/table/investigationSearchTable.component.tsx
@@ -334,7 +334,7 @@ const InvestigationSearchTable: React.FC<InvestigationTableProps> = (props) => {
       data-testid="investigation-search-table"
       container
       spacing={1}
-      sx={{ height: '100%' }}
+      sx={{ height: 'calc(100% - 24px)' }}
     >
       <Grid item xs={2} sx={{ height: '100%' }}>
         {data?.pages && (
@@ -364,43 +364,52 @@ const InvestigationSearchTable: React.FC<InvestigationTableProps> = (props) => {
           />
         )}
       </Grid>
-      <Grid item xs={10}>
+      <Grid container item xs={10} direction="column">
         <SelectedFilterChips
           filters={filters}
           onRemoveFilter={removeFilterChip}
         />
-        <Paper variant="outlined" sx={{ height: '100%', marginTop: 1 }}>
-          <div style={{ height: '100%' }}>
-            {aborted ? (
-              <Typography align="center" variant="h6" component="h6">
-                {t('loading.abort_message')}
-              </Typography>
-            ) : (
-              <Table
-                loading={
-                  addToCartLoading || removeFromCartLoading || cartLoading
-                }
-                data={aggregatedSource}
-                loadMoreRows={loadMoreRows}
-                totalRowCount={
-                  aggregatedSource?.length + (hasNextPage ? 1 : 0) ?? 0
-                }
-                sort={{}}
-                onSort={handleSort}
-                detailsPanel={detailsPanel}
-                columns={columns}
-                {...(hierarchy !== 'dls' && {
-                  selectedRows,
-                  aggregatedIds,
-                  onCheck: addToCart,
-                  onUncheck: removeFromCart,
-                  disableSelectAll: !selectAllSetting,
-                })}
-                shortHeader={true}
-              />
-            )}
-          </div>
-        </Paper>
+        <Grid item xs>
+          <Paper
+            variant="outlined"
+            sx={{
+              height: '100%',
+              minHeight: '300px',
+              marginTop: 1,
+            }}
+          >
+            <div style={{ height: '100%' }}>
+              {aborted ? (
+                <Typography align="center" variant="h6" component="h6">
+                  {t('loading.abort_message')}
+                </Typography>
+              ) : (
+                <Table
+                  loading={
+                    addToCartLoading || removeFromCartLoading || cartLoading
+                  }
+                  data={aggregatedSource}
+                  loadMoreRows={loadMoreRows}
+                  totalRowCount={
+                    aggregatedSource?.length + (hasNextPage ? 1 : 0) ?? 0
+                  }
+                  sort={{}}
+                  onSort={handleSort}
+                  detailsPanel={detailsPanel}
+                  columns={columns}
+                  {...(hierarchy !== 'dls' && {
+                    selectedRows,
+                    aggregatedIds,
+                    onCheck: addToCart,
+                    onUncheck: removeFromCart,
+                    disableSelectAll: !selectAllSetting,
+                  })}
+                  shortHeader={true}
+                />
+              )}
+            </div>
+          </Paper>
+        </Grid>
       </Grid>
     </Grid>
   );