Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix search table vertical space #1021 #1063

Merged
merged 5 commits into from
Jan 14, 2022
Merged

Fix search table vertical space #1021 #1063

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1682e29
#1021 - set sensible min-heights for search table
louise-davies Jan 12, 2022
37c869c
#1021 - update snapshot to reflect styling changes
louise-davies Jan 12, 2022
0b027ac
#1021 - remove TODO
louise-davies Jan 12, 2022
8428b0e
Merge branch 'master' into bugfix/search-vertical-space-#1021
louise-davies Jan 12, 2022
32acc47
#1021 - fix containerHeight by calculating searchBox height
louise-davies Jan 13, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions packages/datagateway-search/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,11 @@
"redux-logger": "^3.0.6",
"redux-mock-store": "^1.5.4",
"redux-thunk": "^2.3.0",
"resize-observer-polyfill": "^1.5.1",
"single-spa-react": "^4.3.1",
"tslib": "^2.3.0",
"typescript": "4.5.3",
"url-search-params-polyfill": "^8.1.1",
"tslib": "^2.3.0"
"url-search-params-polyfill": "^8.1.1"
},
"scripts": {
"start": "craco start",
Expand Down Expand Up @@ -128,4 +129,4 @@
"serve": "^13.0.2",
"start-server-and-test": "^1.14.0"
}
}
}
17 changes: 10 additions & 7 deletions packages/datagateway-search/src/__snapshots__/searchPageTable.component.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4956,7 +4956,7 @@ exports[`SearchPageTable renders correctly when request received 1`] = `
role="tabpanel"
>
<Styled(MuiBox)
p={3}
pt={1}
>
<div
className="MuiBox-root MuiBox-root-8"
Expand All @@ -4965,9 +4965,10 @@ exports[`SearchPageTable renders correctly when request received 1`] = `
elevation={0}
style={
Object {
"height": "calc(undefined - 96px)",
"minHeight": 230,
"height": "calc(undefined - 56px)",
"minHeight": "calc(500px - 56px)",
"overflowX": "auto",
"overflowY": "hidden",
}
}
>
Expand Down Expand Up @@ -5007,19 +5008,21 @@ exports[`SearchPageTable renders correctly when request received 1`] = `
elevation={0}
style={
Object {
"height": "calc(undefined - 96px)",
"minHeight": 230,
"height": "calc(undefined - 56px)",
"minHeight": "calc(500px - 56px)",
"overflowX": "auto",
"overflowY": "hidden",
}
}
>
<div
className="MuiPaper-root MuiPaper-elevation0 MuiPaper-rounded"
style={
Object {
"height": "calc(undefined - 96px)",
"minHeight": 230,
"height": "calc(undefined - 56px)",
"minHeight": "calc(500px - 56px)",
"overflowX": "auto",
"overflowY": "hidden",
}
}
>
Expand Down
5 changes: 3 additions & 2 deletions packages/datagateway-search/src/searchPageCardView.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,9 +347,10 @@ const SearchPageCardView = (
<TabPanel value={currentTab} index={'datafile'}>
<Paper
style={{
height: `calc(${containerHeight} - 96px)`,
minHeight: 230,
height: `calc(${containerHeight} - 56px)`,
minHeight: `calc(500px - 56px)`,
overflowX: 'auto',
overflowY: 'hidden',
}}
elevation={0}
>
Expand Down
106 changes: 73 additions & 33 deletions packages/datagateway-search/src/searchPageContainer.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import ResizeObserver from 'resize-observer-polyfill';
import { StateType } from './state/app.types';
import { connect } from 'react-redux';
import { Switch, Route, RouteComponentProps } from 'react-router';
Expand Down Expand Up @@ -118,6 +119,45 @@ const ViewButton = (props: {
);
};

const searchPageStyles = makeStyles<
Theme,
{ view: ViewsType; containerHeight: string }
>((theme: Theme) => {
return createStyles({
root: {
margin: 0,
width: '100%',
},
topLayout: {
height: '100%',
// make width of box bigger on smaller screens to prevent overflow
// decreasing the space for the search results
width: '95%',
'@media (min-width: 1600px) and (min-height: 700px)': {
width: '70%',
},
margin: '0 auto',
},
sideLayout: {
height: '100%',
width: '100%',
},
dataViewTopBar: {
width: '98%',
backgroundColor: '#00000000',
},
dataView: {
// Only use height for the paper component if the view is table.
// also ensure we account for the potential horizontal scrollbar
height: ({ view, containerHeight }) =>
view !== 'card' ? containerHeight : 'auto',
minHeight: 500,
width: '98%',
backgroundColor: '#00000000',
},
});
});

interface SearchPageContainerStoreProps {
sideLayout: boolean;
searchableEntities: string[];
Expand Down Expand Up @@ -284,11 +324,26 @@ const SearchPageContainer: React.FC<SearchPageContainerCombinedProps> = (
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

const searchBoxRef = React.useRef<HTMLDivElement>(null);
const [searchBoxHeight, setSearchBoxHeight] = React.useState(0);

React.useEffect(() => {
const observer = new ResizeObserver((entries) => {
if (entries[0].contentRect.height)
setSearchBoxHeight(entries[0].contentRect.height);
});
const curr = searchBoxRef.current;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
observer.observe(curr);
return () => {
curr && observer.unobserve(curr);
};
}, []);

// Table should take up page but leave room for: SG appbar, SG footer,
// grid padding, search box, checkboxes, date selectors, example search text, limited results message, padding.
const spacing = 2;
// TODO: Container height is too small on smaller screens (e.g. laptops).
const containerHeight = `calc(100vh - 64px - 48px - ${spacing}*16px - (69px + 19rem/16) - 42px - (53px + 19rem/16) - 21px - 24px - 8px${
// search box, search box padding, display as cards button, loading bar
const containerHeight = `calc(100vh - 64px - 36px - ${searchBoxHeight}px - 8px - 47px${
loading ? '' : ' - 4px'
})`;

Expand All @@ -297,6 +352,8 @@ const SearchPageContainer: React.FC<SearchPageContainerCombinedProps> = (

const navigateToDownload = React.useCallback(() => push('/download'), [push]);

const classes = searchPageStyles({ view, containerHeight });

return (
<Switch>
<Route
Expand All @@ -312,26 +369,25 @@ const SearchPageContainer: React.FC<SearchPageContainerCombinedProps> = (
direction={sideLayout ? 'row' : 'column'}
justify="center"
alignItems="center"
spacing={spacing}
style={{ margin: 0, width: '100%' }}
spacing={1}
className={classes.root}
>
<Grid item id="container-search-filters">
<Grid
item
id="container-search-filters"
ref={searchBoxRef}
style={{ width: '100%' }}
>
{sideLayout ? (
<Paper style={{ height: '100%', width: '100%' }}>
<Paper className={classes.sideLayout}>
<SearchBoxContainerSide
searchText={searchText}
initiateSearch={initiateSearch}
onSearchTextChange={handleSearchTextChange}
/>
</Paper>
) : (
<Paper
style={{
height: '100%',
width: '70vw',
minWidth: 584, // Minimum width to ensure search box contents stay aligned
}}
>
<Paper className={classes.topLayout}>
<SearchBoxContainer
searchText={searchText}
initiateSearch={initiateSearch}
Expand All @@ -344,14 +400,7 @@ const SearchPageContainer: React.FC<SearchPageContainerCombinedProps> = (
{requestReceived && (
<div style={{ width: '100%' }}>
<Grid container justify="center">
<Grid
container
style={{
width: '98vw',
minWidth: 584,
backgroundColor: '#00000000',
}}
>
<Grid container className={classes.dataViewTopBar}>
<Grid item xs={'auto'}>
<ViewButton
viewCards={view === 'card'}
Expand All @@ -368,16 +417,7 @@ const SearchPageContainer: React.FC<SearchPageContainerCombinedProps> = (
</Grid>
</Grid>
<Grid container justify="center" id="container-search-table">
<Paper
style={{
// Only use height for the paper component if the view is table.
...(view === 'table' ? { height: containerHeight } : {}),
minHeight: 326,
width: '98vw',
minWidth: 584,
backgroundColor: '#00000000',
}}
>
<Paper className={classes.dataView}>
{/* Show loading progress if data is still being loaded */}
{loading && (
<Grid item xs={12}>
Expand Down
17 changes: 10 additions & 7 deletions packages/datagateway-search/src/searchPageTable.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ function TabPanel(props: TabPanelProps): React.ReactElement {
border={0}
{...other}
>
{value === index && <Box p={3}>{children}</Box>}
{value === index && <Box pt={1}>{children}</Box>}
</Box>
);
}
Expand Down Expand Up @@ -332,9 +332,10 @@ const SearchPageTable = (
<TabPanel value={currentTab} index={'investigation'}>
<Paper
style={{
height: `calc(${containerHeight} - 96px)`,
minHeight: 230,
height: `calc(${containerHeight} - 56px)`,
minHeight: `calc(500px - 56px)`,
overflowX: 'auto',
overflowY: 'hidden',
}}
elevation={0}
>
Expand All @@ -346,9 +347,10 @@ const SearchPageTable = (
<TabPanel value={currentTab} index={'dataset'}>
<Paper
style={{
height: `calc(${containerHeight} - 96px)`,
minHeight: 230,
height: `calc(${containerHeight} - 56px)`,
minHeight: `calc(500px - 56px)`,
overflowX: 'auto',
overflowY: 'hidden',
}}
elevation={0}
>
Expand All @@ -360,9 +362,10 @@ const SearchPageTable = (
<TabPanel value={currentTab} index={'datafile'}>
<Paper
style={{
height: `calc(${containerHeight} - 96px)`,
minHeight: 230,
height: `calc(${containerHeight} - 56px)`,
minHeight: `calc(500px - 56px)`,
overflowX: 'auto',
overflowY: 'hidden',
}}
elevation={0}
>
Expand Down
3 changes: 3 additions & 0 deletions packages/datagateway-search/src/setupTests.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,3 +38,6 @@ export const flushPromises = (): Promise<void> => new Promise(setImmediate);

// Mock lodash.debounce to return the function we want to call.
jest.mock('lodash.debounce', () => (fn: (args: unknown) => unknown) => fn);

// Add in ResizeObserver as it's not in Jest's environment
global.ResizeObserver = require('resize-observer-polyfill');
5 changes: 5 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14071,6 +14071,11 @@ requires-port@^1.0.0:
resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=

resize-observer-polyfill@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==

resolve-cwd@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
Expand Down