Commit ca6bdc63 authored by Elisabeth Reuhl's avatar Elisabeth Reuhl
Browse files

Dashboard layout: Move layout creation into own component, improve readability

parent a5c7a54e
......@@ -3,9 +3,10 @@ import { useTranslation } from 'react-i18next';
import { latLngBounds } from 'leaflet';
import { useQuery } from "@apollo/react-hooks";
import {
CollapsedFilters, DataSources, Filters, Histogram, ImageContents, OurMap, OurTimeline, ResultsTable, ShowNext
CollapsedFilters, DataSources, Filters, Histogram, ImageContents, Layout, OurMap, OurTimeline, ResultsTable,
ShowNext
} from "..";
import { Grid, IconButton, LinearProgress } from "@material-ui/core";
import { IconButton, LinearProgress } from "@material-ui/core";
import ZoomInIcon from "@material-ui/icons/ZoomIn";
import ZoomOutIcon from "@material-ui/icons/ZoomOut";
// Queries
......@@ -279,30 +280,82 @@ export const AppContent = () => {
window.addEventListener('resize', setOneTwelfthWidth)
return (
<Grid className={classes.gridBody} container direction="row" spacing={2} >
{/*GRID: Filters*/}
<Grid item xs={12} container direction="column">
{input.mapControlsExpanded
? <Filters
chronOntologyTerms={chronOntologyTerms}
reducer={[input, dispatch]}
input={input}
regions={regions}
/>
: (/*summary of active filters when control panel is closed*/
<CollapsedFilters
reducer={[input, dispatch]}
/>
)
}
</Grid>
{/*TODO: find good position for the IconButtons,
toggle other areas back to default size if an area is enlarged while another currently already is enlarged */}
const renderAreaA = () => {
return (
<>
<IconButton
onClick={() => dispatch({type: "TOGGLE_STATE", payload: {toggledField: "areaAIsBig"}})
}
style={{backgroundColor: "rgba(171,134,97,0.18)", position: "relative", left: "20px", top: "70px"}}
>
{input.areaAIsBig
? <ZoomOutIcon/>
: <ZoomInIcon/>
}
</IconButton>
{input.areaA===0
&& <ResultsTable
handleRelatedObjects={handleRelatedObjects}
mapDataObjects={mapDataObjects}
mapDataContext={mapDataContext}
mapDataArchaeoSites={mapDataArchaeoSites}
mapDataSitesByRegion={mapDataSitesByRegion}
reducer={[input, dispatch]}
renderingConditionObjects={renderingConditionObjects}
renderingConditionRelatedObjects={renderingConditionRelatedObjects}
renderingConditionSites={renderingConditionSites}
renderingConditionSitesByRegion={renderingConditionSitesByRegion}
openPopup={openPopup}
/>}
{input.areaA===1
&& <ImageContents
contents={dataObjects
&& [dataObjects?.entitiesMultiFilter?.map(entity => entity?.categoryOfDepicted),
dataObjects?.entitiesMultiFilter?.map(entity => entity?.materialOfDepicted)]}
/>}
{input.areaA===2
&& <DataSources/>}
<ShowNext
area={"areaA"}
labels={["Results table", "Image contents", "Data sources"]}
reducer={[input, dispatch]}
/>
</>
)
}
const renderAreaB = () => {
return (
<>
<IconButton
onClick={() => dispatch({type: "TOGGLE_STATE", payload: {toggledField: "areaBIsBig"}})
}
style={{backgroundColor: "rgba(171,134,97,0.18)", position: "relative", left: "20px", top: "70px"}}
>
{input.areaBIsBig
? <ZoomOutIcon/>
: <ZoomInIcon/>
}
</IconButton>
{input.areaB===0 && <OurTimeline
reducer={[input, dispatch]}
timelineObjectsData={dataObjects?.entitiesMultiFilter.flatMap(timelineAdapter)}
/>}
{input.areaB===1 && <Histogram/>}
<ShowNext
area={"areaB"}
labels={["Timeline", "Histogram"]}
reducer={[input, dispatch]}
/>
</>
)
}
{/*GRID: Map*/}
{<Grid className={classes.fullHeightTile}
item lg={input.areaCIsBig ? 12 : 4} sm={input.areaCIsBig ? 12: 6} xs={12}
container>
{/*TODO: find good position for this button*/}
const renderAreaC = () => {
return (
<>
<IconButton
onClick={() => dispatch({type: "TOGGLE_STATE", payload: {toggledField: "areaCIsBig"}})
}
......@@ -326,93 +379,66 @@ export const AppContent = () => {
renderingConditionSites={renderingConditionSites}
renderingConditionSitesByRegion={renderingConditionSitesByRegion}
/>
</Grid>}
{/*GRID: Container for results list and timeline*/}
<Grid className={(input.areaAIsBig || input.areaBIsBig) ? classes.fullHeightTile : (input.areaCIsBig ? classes.tallTile : classes.fullHeightTile)}
item lg={input.areaCIsBig ? 12 : 8} sm={input.areaCIsBig ? 12 : 6} xs={12}
container direction={(input.areaAIsBig || input.areaBIsBig) ? "row" : (input.areaCIsBig ? "column" : "row")} spacing={2}
>
{/*GRID: Results list, image contents, data sources*/}
{<Grid className={input.areaAIsBig ? classes.fullHeightTile : (input.areaCIsBig ? classes.tallTile : classes.mediumTile)}
item md={input.areaCIsBig ? 6 : 12} xs={12}
container direction="row"
>
{/*TODO: find good position for this button*/}
<IconButton
onClick={() => dispatch({type: "TOGGLE_STATE", payload: {toggledField: "areaAIsBig"}})
}
style={{backgroundColor: "rgba(171,134,97,0.18)", position: "relative", left: "20px", top: "70px"}}
>
{input.areaAIsBig
? <ZoomOutIcon/>
: <ZoomInIcon/>
}
</IconButton>
{input.areaA===0
&& <ResultsTable
handleRelatedObjects={handleRelatedObjects}
mapDataObjects={mapDataObjects}
mapDataContext={mapDataContext}
mapDataArchaeoSites={mapDataArchaeoSites}
mapDataSitesByRegion={mapDataSitesByRegion}
reducer={[input, dispatch]}
renderingConditionObjects={renderingConditionObjects}
renderingConditionRelatedObjects={renderingConditionRelatedObjects}
renderingConditionSites={renderingConditionSites}
renderingConditionSitesByRegion={renderingConditionSitesByRegion}
openPopup={openPopup}
/>}
{input.areaA===1
&& <ImageContents
contents={dataObjects
&& [dataObjects?.entitiesMultiFilter?.map(entity => entity?.categoryOfDepicted),
dataObjects?.entitiesMultiFilter?.map(entity => entity?.materialOfDepicted)]}
/>}
{input.areaA===2
&& <DataSources/>}
<ShowNext
area={"areaA"}
labels={["Results table", "Image contents", "Data sources"]}
reducer={[input, dispatch]}
/>
</Grid>}
</>
)
}
{/*GRID: Timeline, histogram*/}
{<Grid className={input.areaBIsBig ? classes.fullHeightTile : (input.areaCIsBig ? classes.tallTile : classes.mediumTile)}
item md={input.areaCIsBig ? 6 : 12} xs={12}
container direction="row"
>
{/*TODO: find good position for this button*/}
<IconButton
onClick={() => dispatch({type: "TOGGLE_STATE", payload: {toggledField: "areaBIsBig"}})
}
style={{backgroundColor: "rgba(171,134,97,0.18)", position: "relative", left: "20px", top: "70px"}}
>
{input.areaBIsBig
? <ZoomOutIcon/>
: <ZoomInIcon/>
}
</IconButton>
{input.areaB===0 && <OurTimeline
reducer={[input, dispatch]}
timelineObjectsData={dataObjects?.entitiesMultiFilter.flatMap(timelineAdapter)}
/>}
{input.areaB===1 && <Histogram/>}
<ShowNext
area={"areaB"}
labels={["Timeline", "Histogram"]}
return (
/* Layout schema:
F = filters, M = map, A = area A, B = area B; two rows = 100% height, four columns = 100 % width
Size md/lg:
default: | big c: | big a: | big b: | with expanded filters: (?)
------------------------------------------------------------------------------------------------------
F | F | F | F | F F F F
M M A A | M M M M | A A A A | B B B B | ...
M M B B | M M M M | A A A A | B B B B |
| A A B B | M M B B | M M A A |
| | M M | M M |
Size xs:
default: (?) | with expanded filters: (?)
--------------------------------------------
F . . . | F F F F
M M M M | F F F F
M M M M | M M M M
A A A A | M M M M
A A A A | A A A A
B B B B | A A A A
B B B B | B B B B
| B B B B
*/
<Layout
menu={input.mapControlsExpanded
? <Filters
chronOntologyTerms={chronOntologyTerms}
reducer={[input, dispatch]}
input={input}
regions={regions}
/>
: (
<CollapsedFilters
reducer={[input, dispatch]}
/>
</Grid>}
</Grid>
{/*GRID: Loading indicator*/}
<Grid item xs={12}>
{(loadingContext || loadingObjects || loadingArchaeoSites || loadingSitesByRegion) &&
<LinearProgress/>}
</Grid>
</Grid>
);
)
}
bigTile={
(input.areaAIsBig && renderAreaA()) || (input.areaBIsBig && renderAreaB()) || (input.areaCIsBig && renderAreaC())
}
leftOrTopTile={
!input.areaCIsBig && renderAreaC()
}
topRightOrMiddleTile={
!input.areaAIsBig ? renderAreaA() : renderAreaB()
}
bottomRightOrBottomTile={
!input.areaAIsBig && !input.areaBIsBig && renderAreaB()
}
loadingIndicator={
(loadingContext || loadingObjects || loadingArchaeoSites || loadingSitesByRegion)
&& <LinearProgress/>
}
rightTileIsMovedToBottomInstead={input.areaCIsBig ? "true" : false}
/>
)
};
import React from 'react';
import { Grid } from '@material-ui/core'
import { useStyles } from '../../styles';
export const Layout = (props) => {
const {menu, bigTile, leftOrTopTile, topRightOrMiddleTile, bottomRightOrBottomTile, loadingIndicator, rightTileIsMovedToBottomInstead} = props;
const classes = useStyles();
/* Default breakpoints (inclusive-exclusive):
xs = extra-small: 0px-600px
sm = small: 600px-960px
md = medium: 960px-1280px
lg = large: 1280px-1920px
xl = extra-large: 1920px-...
*/
return (
// container for dashboard
<Grid
className={classes.gridBody}
container
direction="row"
spacing={2}
>
<Grid
item
xs={12}
md={12}
lg={12}
container
direction="column"
>
{
// collapsed or expanded filters
menu
}
</Grid>
{bigTile && <Grid
className={classes.fullHeightTile}
item
xs={12}
md={12}
lg={12}
container
direction="column"
spacing={2}
>
{
// whichever tile was enlarged by the user
bigTile
}
</Grid>}
{leftOrTopTile && <Grid
className={classes.fullHeightTile}
item
xs={12}
md={rightTileIsMovedToBottomInstead ? 12 : 6}
lg={rightTileIsMovedToBottomInstead ? 12 : 4}
container
>
{
// map (if not enlarged)
leftOrTopTile
}
</Grid>}
{/*container for the right or bottom area (= areaA and areaB)*/}
<Grid
className={rightTileIsMovedToBottomInstead ? classes.halfHeightTile : classes.fullHeightTile}
item
xs={12}
md={rightTileIsMovedToBottomInstead ? 12 : 6}
lg={rightTileIsMovedToBottomInstead ? 12 : 8}
container
direction={rightTileIsMovedToBottomInstead ? "column" : "row"}
spacing={2}
>
<Grid
className={classes.halfHeightTile}
item
xs={12}
md={rightTileIsMovedToBottomInstead ? 6 : 12}
container
direction="row"
>
{
// areaA (if not enlarged, in that case: areaB)
topRightOrMiddleTile
}
</Grid>
<Grid
className={classes.halfHeightTile}
item
xs={12}
md={rightTileIsMovedToBottomInstead ? 6 : 12}
container
direction="row"
>
{
// areaB (if not enlarged)
bottomRightOrBottomTile
}
</Grid>
</Grid>
<Grid item
xs={12}
md={12}
lg={12}
>
{
// loading symbol (if current query result is still loading)
loadingIndicator
}
</Grid>
</Grid>
);
}
......@@ -7,11 +7,12 @@ export { CollapsedFilters } from './CollapsedFilters/CollapsedFilters'
export { CreateMarkers } from './CreateMarkers/CreateMarkers';
export { CreateTimelineAxis } from './CreateTimelineAxis/CreateTimelineAxis';
export { CreateTimelineObjects } from './CreateTimelineObjects/CreateTimelineObjects';
export { DataSources } from './DataSources/DataSources.jsx'
export { DataSources } from './DataSources/DataSources'
export { Filters } from './Filters/Filters'
export { GazetteerEntry } from './GazetteerEntry/GazetteerEntry'
export { Histogram } from './Histogram/Histogram.jsx'
export { Histogram } from './Histogram/Histogram'
export { ImageContents } from './ImageContents/ImageContents'
export { Layout } from './Layout/Layout'
export { OurMap } from './OurMap/OurMap';
export { OurTimeline } from './OurTimeline/OurTimeline'
export { PageHeader } from './PageHeader/PageHeader';
......@@ -20,4 +21,4 @@ export { ResultsTableRow } from './ResultsTableRow/ResultsTableRow'
export { ReturnMarker } from './ReturnMarker/ReturnMarker';
export { ReturnPopup } from './ReturnPopup/ReturnPopup';
export { ReturnTimelineObject } from './ReturnTimelineObject/ReturnTimelineObject';
export { ShowNext } from './ShowNext/ShowNext.jsx'
\ No newline at end of file
export { ShowNext } from './ShowNext/ShowNext'
\ No newline at end of file
......@@ -13,21 +13,15 @@ const useStyles = makeStyles(theme => ({
height: "85%",
overflow: "scroll"
},
"gridBody || fullHeightTile || mediumTile || shortTile || tallTile": {
justifyContent: "space-between",
alignItems: "center"
},
fullHeightTile: {
height: "100vh"
},
mediumTile: {
halfHeightTile: {
height: "45vh"
},
shortTile: {
height: "30vh"
},
tallTile: {
height: "75vh"
"gridBody || fullHeightTile || halfHeightTile": {
justifyContent: "space-between",
alignItems: "center"
},
gridHead: {
//minHeight: "5%",
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment