Skip to content

Commit 1971ea4

Browse files
louise-davieslouise-davies
committed
#1152 - fix overflow issues when filter chips were present
also some other minor styling stuff
1 parent 06539eb commit 1971ea4

9 files changed

+258
-221
lines changed

‎packages/datagateway-search/src/card/datasetSearchCardView.component.tsx‎

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -436,45 +436,47 @@ const DatasetCardView: React.FC<DatasetCardViewProps> = (props) => {
436436
/>
437437
)}
438438
</Grid>
439-
<Grid item xs={10}>
439+
<Grid container item xs={10} direction="column" wrap="nowrap">
440440
<SelectedFilterChips
441441
filters={filters}
442442
onRemoveFilter={removeFilterChip}
443443
/>
444-
<Paper variant="outlined" sx={{ height: '100%', marginTop: 1 }}>
445-
<div>
446-
{aborted ? (
447-
<Paper>
448-
<Typography align="center" variant="h6" component="h6">
449-
{t('loading.abort_message')}
450-
</Typography>
451-
</Paper>
452-
) : (
453-
<CardView
454-
entityName="Dataset"
455-
data={paginatedSource ?? []}
456-
totalDataCount={
457-
aggregatedIds?.length + (hasNextPage ? 1 : 0) ?? 0
458-
}
459-
onPageChange={pushPage}
460-
onFilter={pushFilter}
461-
onSort={handleSort}
462-
onResultsChange={pushResults}
463-
loadedData={!isLoading}
464-
loadedCount={!isLoading}
465-
filters={{}}
466-
sort={{}}
467-
page={page}
468-
results={results}
469-
title={title}
470-
description={description}
471-
information={information}
472-
moreInformation={moreInformation}
473-
buttons={buttons}
474-
/>
475-
)}
476-
</div>
477-
</Paper>
444+
<Grid item xs>
445+
<Paper variant="outlined" sx={{ height: '100%', marginTop: 1 }}>
446+
<div>
447+
{aborted ? (
448+
<Paper>
449+
<Typography align="center" variant="h6" component="h6">
450+
{t('loading.abort_message')}
451+
</Typography>
452+
</Paper>
453+
) : (
454+
<CardView
455+
entityName="Dataset"
456+
data={paginatedSource ?? []}
457+
totalDataCount={
458+
aggregatedIds?.length + (hasNextPage ? 1 : 0) ?? 0
459+
}
460+
onPageChange={pushPage}
461+
onFilter={pushFilter}
462+
onSort={handleSort}
463+
onResultsChange={pushResults}
464+
loadedData={!isLoading}
465+
loadedCount={!isLoading}
466+
filters={{}}
467+
sort={{}}
468+
page={page}
469+
results={results}
470+
title={title}
471+
description={description}
472+
information={information}
473+
moreInformation={moreInformation}
474+
buttons={buttons}
475+
/>
476+
)}
477+
</div>
478+
</Paper>
479+
</Grid>
478480
</Grid>
479481
</Grid>
480482
);

‎packages/datagateway-search/src/card/investigationSearchCardView.component.tsx‎

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -407,46 +407,48 @@ const InvestigationCardView: React.FC<InvestigationCardProps> = (props) => {
407407
/>
408408
)}
409409
</Grid>
410-
<Grid item xs={10}>
410+
<Grid container item xs={10} direction="column" wrap="nowrap">
411411
<SelectedFilterChips
412412
filters={filters}
413413
onRemoveFilter={removeFilterChip}
414414
/>
415-
<Paper variant="outlined" sx={{ height: '100%', marginTop: 1 }}>
416-
<div>
417-
{aborted ? (
418-
<Paper>
419-
<Typography align="center" variant="h6" component="h6">
420-
{t('loading.abort_message')}
421-
</Typography>
422-
</Paper>
423-
) : (
424-
<CardView
425-
entityName="Investigation"
426-
data={paginatedSource ?? []}
427-
totalDataCount={
428-
aggregatedIds?.length + (hasNextPage ? 1 : 0) ?? 0
429-
}
430-
onPageChange={pushPage}
431-
onFilter={pushFilter}
432-
onSort={handleSort}
433-
onResultsChange={pushResults}
434-
loadedData={!isLoading}
435-
loadedCount={!isLoading}
436-
filters={{}}
437-
sort={sort}
438-
page={page}
439-
results={results}
440-
title={title}
441-
description={description}
442-
information={information}
443-
moreInformation={moreInformation}
444-
buttons={buttons}
445-
allIds={aggregatedIds}
446-
/>
447-
)}
448-
</div>
449-
</Paper>
415+
<Grid item xs>
416+
<Paper variant="outlined" sx={{ height: '100%', marginTop: 1 }}>
417+
<div>
418+
{aborted ? (
419+
<Paper>
420+
<Typography align="center" variant="h6" component="h6">
421+
{t('loading.abort_message')}
422+
</Typography>
423+
</Paper>
424+
) : (
425+
<CardView
426+
entityName="Investigation"
427+
data={paginatedSource ?? []}
428+
totalDataCount={
429+
aggregatedIds?.length + (hasNextPage ? 1 : 0) ?? 0
430+
}
431+
onPageChange={pushPage}
432+
onFilter={pushFilter}
433+
onSort={handleSort}
434+
onResultsChange={pushResults}
435+
loadedData={!isLoading}
436+
loadedCount={!isLoading}
437+
filters={{}}
438+
sort={sort}
439+
page={page}
440+
results={results}
441+
title={title}
442+
description={description}
443+
information={information}
444+
moreInformation={moreInformation}
445+
buttons={buttons}
446+
allIds={aggregatedIds}
447+
/>
448+
)}
449+
</div>
450+
</Paper>
451+
</Grid>
450452
</Grid>
451453
</Grid>
452454
);

‎packages/datagateway-search/src/facet/components/facetPanel/facetPanel.component.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,9 @@ function FacetPanel({
135135
>
136136
<Typography variant="h6">{t('facetPanel.title')}</Typography>
137137
{showApplyButton && (
138-
<Button onClick={onApplyFacetFilters}>{t('facetPanel.apply')}</Button>
138+
<Button variant="contained" onClick={onApplyFacetFilters}>
139+
{t('facetPanel.apply')}
140+
</Button>
139141
)}
140142
</Box>
141143

‎packages/datagateway-search/src/facet/components/selectedFilterChips.component.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,12 @@ function SelectedFilterChips({
2929
aria-label={t('selectedFilters')}
3030
direction="row"
3131
spacing={1}
32-
sx={{ flexWrap: 'wrap', gap: 1 }}
32+
sx={{ flexWrap: 'wrap', rowGap: 1, ml: -1 }}
3333
>
34-
{Object.entries(filters).flatMap(([filterKey, filterValue]) => {
34+
{Object.entries(filters).flatMap(([filterKey, filterValue], i) => {
3535
if (!Array.isArray(filterValue)) return [];
3636

37-
return filterValue.flatMap((value) => {
37+
return filterValue.flatMap((value, j) => {
3838
if (typeof value === 'string') {
3939
return [
4040
<Chip
@@ -43,6 +43,7 @@ function SelectedFilterChips({
4343
onDelete={() => {
4444
onRemoveFilter(filterKey, value);
4545
}}
46+
sx={i === 0 && j === 0 ? { ml: 1 } : {}}
4647
/>,
4748
];
4849
}
@@ -55,6 +56,7 @@ function SelectedFilterChips({
5556
onDelete={() => {
5657
onRemoveFilter(filterKey, value);
5758
}}
59+
sx={i === 0 && j === 0 ? { ml: 1 } : {}}
5860
/>,
5961
];
6062
}

‎packages/datagateway-search/src/searchPageContainer.component.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -387,8 +387,8 @@ const SearchPageContainer: React.FC = () => {
387387
}, []);
388388

389389
// Table should take up page but leave room for: SG appbar, SG footer,
390-
// search box, search box padding, display as cards button, loading bar
391-
const containerHeight = `calc(100vh - 64px - 36px - ${searchBoxHeight}px - 8px - 49px)`;
390+
// search box, search box padding, display as cards button, loading bar, paper outline
391+
const containerHeight = `calc(100vh - 64px - 36px - ${searchBoxHeight}px - 8px - 49px - 2px)`;
392392

393393
const { data: cartItems } = useCart();
394394
const { push } = useHistory();
@@ -489,7 +489,11 @@ const SearchPageContainer: React.FC = () => {
489489
data-testid="container-search-table"
490490
id="container-search-table"
491491
>
492-
<DataViewPaper view={view} containerHeight={containerHeight}>
492+
<DataViewPaper
493+
view={view}
494+
containerHeight={containerHeight}
495+
variant="outlined"
496+
>
493497
<SearchTabs
494498
view={view}
495499
containerHeight={containerHeight}

‎packages/datagateway-search/src/searchTabs/searchTabs.component.tsx‎

Lines changed: 39 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -220,55 +220,53 @@ const SearchTabs = ({
220220
</StyledBox>
221221
</StyledBox>
222222
<SearchResultCountDispatch.Provider value={dispatch}>
223-
<Box>
224-
<TabPanel value={currentTab} index="investigation">
225-
{view === 'card' ? (
226-
<InvestigationCardView hierarchy={hierarchy} />
227-
) : (
228-
<Paper
229-
sx={{
230-
height: `calc(${containerHeight} - 56px)`,
231-
minHeight: `calc(500px - 56px)`,
232-
overflowX: 'auto',
233-
overflowY: 'hidden',
234-
}}
235-
elevation={0}
236-
>
237-
<InvestigationSearchTable hierarchy={hierarchy} />
238-
</Paper>
239-
)}
240-
</TabPanel>
241-
<TabPanel value={currentTab} index="dataset">
242-
{view === 'card' ? (
243-
<DatasetCardView hierarchy={hierarchy} />
244-
) : (
245-
<Paper
246-
sx={{
247-
height: `calc(${containerHeight} - 56px)`,
248-
minHeight: `calc(500px - 56px)`,
249-
overflowX: 'auto',
250-
overflowY: 'hidden',
251-
}}
252-
elevation={0}
253-
>
254-
<DatasetSearchTable hierarchy={hierarchy} />
255-
</Paper>
256-
)}
257-
</TabPanel>
258-
<TabPanel value={currentTab} index="datafile">
223+
<TabPanel value={currentTab} index="investigation">
224+
{view === 'card' ? (
225+
<InvestigationCardView hierarchy={hierarchy} />
226+
) : (
227+
<Paper
228+
sx={{
229+
height: `calc(${containerHeight} - 56px)`,
230+
minHeight: `calc(500px - 56px)`,
231+
overflow: 'auto',
232+
bgcolor: 'background.default',
233+
}}
234+
elevation={0}
235+
>
236+
<InvestigationSearchTable hierarchy={hierarchy} />
237+
</Paper>
238+
)}
239+
</TabPanel>
240+
<TabPanel value={currentTab} index="dataset">
241+
{view === 'card' ? (
242+
<DatasetCardView hierarchy={hierarchy} />
243+
) : (
259244
<Paper
260245
sx={{
261246
height: `calc(${containerHeight} - 56px)`,
262247
minHeight: `calc(500px - 56px)`,
263-
overflowX: 'auto',
264-
overflowY: 'hidden',
248+
overflow: 'auto',
249+
bgcolor: 'background.default',
265250
}}
266251
elevation={0}
267252
>
268-
<DatafileSearchTable hierarchy={hierarchy} />
253+
<DatasetSearchTable hierarchy={hierarchy} />
269254
</Paper>
270-
</TabPanel>
271-
</Box>
255+
)}
256+
</TabPanel>
257+
<TabPanel value={currentTab} index="datafile">
258+
<Paper
259+
sx={{
260+
height: `calc(${containerHeight} - 56px)`,
261+
minHeight: `calc(500px - 56px)`,
262+
overflow: 'auto',
263+
bgcolor: 'background.default',
264+
}}
265+
elevation={0}
266+
>
267+
<DatafileSearchTable hierarchy={hierarchy} />
268+
</Paper>
269+
</TabPanel>
272270
</SearchResultCountDispatch.Provider>
273271
</div>
274272
);

0 commit comments

Comments
 (0)