Commit 69072f3c authored by Elisabeth Reuhl's avatar Elisabeth Reuhl
Browse files

Merge branch 'dashboard'

# Conflicts:
#	src/components/Histogram/Histogram.jsx
#	src/components/Timeline/Timeline.jsx
parents 254c096e 3aa85423
......@@ -3,7 +3,8 @@ import { useTranslation } from 'react-i18next';
import { latLngBounds } from 'leaflet';
import { useQuery } from "@apollo/react-hooks";
import {
DashboardTile, DataSources, Histogram, ImageContents, Layout, OurMap, PageHeader, ResultsTable, ShowNext, Timeline
DashboardTile, DataSources, Histogram, ImageContents, Layout, MaximizeTileButton, OurMap, PageHeader, ResultsTable,
ShowNext, Timeline
} from "..";
import { LinearProgress } from "@material-ui/core";
// Queries
......@@ -334,6 +335,13 @@ export const AppContent = () => {
const renderAreaA = () => {
const area = "areaA";
const maximizeTileButton = (
<MaximizeTileButton
area={area}
reducer={[input, dispatch]}
/>
);
return(
<DashboardTile
reducer={[input, dispatch]}
......@@ -351,13 +359,17 @@ export const AppContent = () => {
renderingConditionSites={renderingConditionSites}
renderingConditionSitesByRegion={renderingConditionSitesByRegion}
openPopup={openPopup}
maximizeTileButton={maximizeTileButton}
/>
|| input[area]===1 && <ImageContents
contents={dataObjects
&& [dataObjects?.entitiesMultiFilter?.map(entity => entity?.categoryOfDepicted),
dataObjects?.entitiesMultiFilter?.map(entity => entity?.materialOfDepicted)]}
maximizeTileButton={maximizeTileButton}
/>
|| input[area]===2 && <DataSources
maximizeTileButton={maximizeTileButton}
/>
|| input[area]===2 && <DataSources/>
}
showNext={
<ShowNext
......@@ -373,6 +385,13 @@ export const AppContent = () => {
const renderAreaB = () => {
const area = "areaB";
const maximizeTileButton = (
<MaximizeTileButton
area={area}
reducer={[input, dispatch]}
/>
);
return(
<DashboardTile
reducer={[input, dispatch]}
......@@ -381,9 +400,11 @@ export const AppContent = () => {
input[area]===0 && <Timeline
reducer={[input, dispatch]}
timelineObjectsData={dataObjects?.entitiesMultiFilter.flatMap(timelineAdapter)}
maximizeTileButton={maximizeTileButton}
/>
|| input[area]===1 && <Histogram
timelineData={dataObjects?.entitiesMultiFilter.map(timelineMapper)}
maximizeTileButton={maximizeTileButton}
/>
}
showNext={
......@@ -400,6 +421,13 @@ export const AppContent = () => {
const renderAreaC = () => {
const area = "areaC";
const maximizeTileButton = (
<MaximizeTileButton
area={area}
reducer={[input, dispatch]}
/>
);
return(
<DashboardTile
reducer={[input, dispatch]}
......@@ -410,6 +438,7 @@ export const AppContent = () => {
data={getMapData()}
dataType={getMapDataType()}
reducer={[input, dispatch]}
maximizeTileButton={maximizeTileButton}
/>
}
/>
......
import React from "react";
import { Card, IconButton } from "@material-ui/core";
import ZoomOutIcon from "@material-ui/icons/ZoomOut";
import ZoomInIcon from "@material-ui/icons/ZoomIn";
import { Card } from "@material-ui/core";
import { useStyles } from "../../styles";
export const DashboardTile = (props) => {
......@@ -11,20 +9,11 @@ export const DashboardTile = (props) => {
const classes = useStyles();
return (
<>
<div className={classes.dashboardTile}>
{showNext}
<Card className={showNext ? classes.cardOfTileWithShowNext : classes.cardOfTileWithoutShowNext}>
<IconButton
onClick={() => dispatch({type: "UPDATE_INPUT", payload: {field: "bigTileArea", value: input.bigTileArea === area ? "" : area}})}
style={{backgroundColor: "rgba(171,134,97,0.18)"/*, position: "relative", left: "20px", top: "70px"*/}}
>
{input.bigTileArea === area
? <ZoomOutIcon/>
: <ZoomInIcon/>
}
</IconButton>
{content}
</Card>
{showNext}
</>
</div>
);
}
\ No newline at end of file
......@@ -3,7 +3,9 @@ import { useTranslation } from "react-i18next";
import { useStyles } from "../../styles";
import { Grid, List, ListItem } from "@material-ui/core";
export const DataSources = () => {
export const DataSources = (props) => {
const {maximizeTileButton} = props;
const { t, i18n } = useTranslation();
const classes = useStyles();
......@@ -14,6 +16,9 @@ export const DataSources = () => {
<Grid item>
<h3 className={classes.h3}>{t('Data sources')}</h3>
</Grid>
<Grid item xs={1}>
{maximizeTileButton}
</Grid>
</Grid>
<Grid className={classes.dashboardTileContent} item container direction="column" spacing={2}>
<Grid item>
......
......@@ -8,6 +8,8 @@ import {prepareHistogramData, binTimespanObjects} from "../../utils";
export const Histogram = (props) => {
const { t, i18n } = useTranslation();
const {maximizeTileButton} = props;
const classes = useStyles();
//console.log(props.timelineData);
......@@ -119,6 +121,9 @@ export const Histogram = (props) => {
<Grid item>
<h3 className={classes.h3}>{t('Temporal distribution')}</h3>
</Grid>
<Grid item xs={1}>
{maximizeTileButton}
</Grid>
</Grid>
<Grid id="histogramContainer" className={classes.dashboardTileContent} item container direction="column" spacing={2}>
<Grid item>
......
......@@ -4,7 +4,7 @@ import { useStyles } from "../../styles";
import { Grid, List, ListItem } from "@material-ui/core";
export const ImageContents = (props) => {
const { contents } = props;
const { contents, maximizeTileButton } = props;
const { t, i18n } = useTranslation();
......@@ -28,6 +28,9 @@ export const ImageContents = (props) => {
<Grid item>
<h3 className={classes.h3}>{t('Image contents')}</h3>
</Grid>
<Grid item xs={1}>
{maximizeTileButton}
</Grid>
</Grid>
<Grid className={classes.dashboardTileContent} item container direction="column" spacing={2}>
<Grid item>
......
import React from "react";
import { useTranslation } from "react-i18next";
import { useStyles } from "../../styles";
import { IconButton } from "@material-ui/core";
import ZoomOutIcon from "@material-ui/icons/ZoomOut";
import ZoomInIcon from "@material-ui/icons/ZoomIn";
export const MaximizeTileButton = (props) => {
const [input, dispatch] = props.reducer;
const {area} = props;
const {t, i18n} = useTranslation();
const classes = useStyles();
return (
<IconButton
className={classes.maximizeTileButton}
onClick={() => dispatch({
type: "UPDATE_INPUT",
payload: {field: "bigTileArea", value: input.bigTileArea === area ? "" : area}
})}
>
{input.bigTileArea === area
? <ZoomOutIcon/>
: <ZoomInIcon/>
}
</IconButton>
);
};
\ No newline at end of file
......@@ -18,7 +18,8 @@ export const OurMap = (props) => {
const {
handleRelatedObjects,
data,
dataType
dataType,
maximizeTileButton
} = props;
let markers = data;
......@@ -69,7 +70,7 @@ export const OurMap = (props) => {
<Grid item>
<h3 className={classes.h3}>{t('Map')}</h3>
</Grid>
<Grid item xs={5}>
<Grid item xs={4}>
<FormLabel>{t('Cluster nearby markers')}
<Tooltip title="Switch between showing individual markers or clustered circles." arrow placement="right-start">
<Switch
......@@ -81,7 +82,7 @@ export const OurMap = (props) => {
</Tooltip>
</FormLabel>
</Grid>
<Grid item xs={5}>
<Grid item xs={4}>
<FormLabel
onClick={() => resetMapBounds()}
style={{cursor: "pointer"}}
......@@ -92,6 +93,9 @@ export const OurMap = (props) => {
</Tooltip>
</FormLabel>
</Grid>
<Grid item xs={1}>
{maximizeTileButton}
</Grid>
</Grid>
<Grid className={classes.dashboardTileContent} item>
<Map
......
......@@ -9,7 +9,8 @@ export const ResultsTable = (props) => {
const {
handleRelatedObjects, mapDataObjects, mapDataContext, mapDataArchaeoSites, mapDataSitesByRegion, openPopup,
renderingConditionObjects, renderingConditionRelatedObjects, renderingConditionSites, renderingConditionSitesByRegion
renderingConditionObjects, renderingConditionRelatedObjects, renderingConditionSites, renderingConditionSitesByRegion,
maximizeTileButton
} = props;
const { t, i18n } = useTranslation();
......@@ -18,11 +19,11 @@ export const ResultsTable = (props) => {
return (
<>
{<Grid className={classes.dashboardTileHeader} item xs={12} container direction="row" spacing={2}>
{<Grid className={classes.dashboardTileHeader} item container direction="row" spacing={2}>
<Grid item>
<h3 className={classes.h3}>{t('Search results')}</h3>
</Grid>
<Grid item>
<Grid item xs={4}>
{input.showRelatedObjects && <Button
onClick={() => handleRelatedObjects()}
name="hideRelatedObjects"
......@@ -32,12 +33,15 @@ export const ResultsTable = (props) => {
Return to search results (hide related objects)
</Button>}
</Grid>
<Grid item>
<Grid item xs={3}>
{input.showRelatedObjects && mapDataContext.entity.related && `${mapDataContext.entity.related.length} results (related objects)`}
{input.showSearchResults && mapDataObjects.entitiesMultiFilter && `${mapDataObjects.entitiesMultiFilter.length} results (objects)`}
{input.showArchaeoSites && mapDataSitesByRegion.sitesByRegion && input.sitesMode === "region" && `${mapDataSitesByRegion.sitesByRegion.length} results (archaeological sites, by region)`}
{input.showArchaeoSites && mapDataArchaeoSites.archaeologicalSites && input.sitesMode !== "region" && `${mapDataArchaeoSites.archaeologicalSites.length} results (archaeological sites)`}
</Grid>
<Grid item xs={1}>
{maximizeTileButton}
</Grid>
</Grid>}
{<Grid className={classes.dashboardTileContent} item xs={12} container>
{<Grid item xs={12}>
......
import React from "react";
import { Button, Card, Grid } from "@material-ui/core";
import { Tab, Tabs } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import { ArrowLeft, ArrowRight } from "@material-ui/icons";
import { makeStyles } from "@material-ui/core/styles";
import { useStyles } from "../../styles";
// additional styling for this component only
const localStyles = makeStyles(theme => ({
showNextCard: {
backgroundColor: "rgba(171,134,97,0.18)",
//width: "100%",
width: "99.5%",
marginLeft: "0.25%",
borderBottomRightRadius: "30px",
borderBottomLeftRadius: "30px"
},
showNextGrid: {
height: "35px",
justifyContent:"space-between",
alignItems:"center",
}
}));
export const ShowNext = (props) => {
const [input, dispatch] = props.reducer;
const { labels, area } = props;
const numberOfValues = labels.length;
const { t, i18n } = useTranslation();
const localClasses = localStyles();
const classes = useStyles();
const handleChange = (event, newValue) => {
dispatch({type: "UPDATE_INPUT", payload: {field: area, value: newValue}})
};
return (
<Card className={localClasses.showNextCard} square>
<Grid className={localClasses.showNextGrid} item xs={12} container direction="row">
<Grid item>
<Button
onClick={() => {
dispatch({type: "UPDATE_INPUT", payload: {
field: area,
value: input[area]===0
? numberOfValues-1
: input[area]-1
}})
}}
>
<ArrowLeft/>
</Button>
</Grid>
<Grid item>
<span>{t(labels[input[area]])}</span>
</Grid>
<Grid item>
<Button
onClick={() => {
dispatch({type: "UPDATE_INPUT", payload: {
field: area,
value: input[area]===numberOfValues-1
? 0
: input[area]+1
}})
}}
>
<ArrowRight/>
</Button>
</Grid>
</Grid>
</Card>
<div style={{display: "flex", width: "100%", height: "35px", minHeight: "35px",}}>
{labels && <Tabs
value={input[area]}
onChange={handleChange}
textColor="primary"
//indicatorColor="primary"
TabIndicatorProps={{
style: {
display: "none"
}
}}
variant="scrollable"
scrollButtons="auto"
aria-label={`${area} selection tabs`}
className={classes.tabs}
>
{labels.map((label, idx) => <Tab
key={idx}
value={idx}
label={t(label)}
variant={"outlined"}
className={input[area] === idx ? classes.tabSelected : classes.tab}
/>
)}
</Tabs>}
</div>
)
};
......@@ -11,7 +11,7 @@ export const Timeline = (props) => {
const classes = useStyles();
const [dimensions, setDimensions] = useState({width: 0, height: 0, margin: {top: 0, right: 0, left: 0, bottom: 0}});
const { timelineObjectsData } = props;
const { timelineObjectsData, maximizeTileButton } = props;
const filteredTimelineData = timelineObjectsData&&timelineObjectsData
.filter( datapoint =>
datapoint.periodSpans?.[0]!==undefined||datapoint.periodSpans?.length>1);
......@@ -30,6 +30,9 @@ export const Timeline = (props) => {
<Grid item>
<h3 className={classes.h3}>{t('Temporal distribution')}</h3>
</Grid>
<Grid item xs={1}>
{maximizeTileButton}
</Grid>
</Grid>
<Grid id="timelineContainer" className={classes.dashboardTileContent} item container direction="column" spacing={2}>
<Grid item>
......
......@@ -14,6 +14,7 @@ export { GazetteerEntry } from './GazetteerEntry/GazetteerEntry'
export { Histogram } from './Histogram/Histogram'
export { ImageContents } from './ImageContents/ImageContents'
export { Layout } from './Layout/Layout'
export { MaximizeTileButton } from './MaximizeTileButton/MaximizeTileButton'
export { OurMap } from './OurMap/OurMap';
export { OurTimeline } from './OurTimeline/OurTimeline'
export { PageHeader } from './PageHeader/PageHeader';
......
......@@ -12,6 +12,8 @@ import { ApolloClient } from 'apollo-client';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { HttpLink } from 'apollo-link-http';
import { ApolloProvider } from '@apollo/react-hooks';
import { theme } from "./styles";
import { MuiThemeProvider } from "@material-ui/core";
const App = () => {
......@@ -34,7 +36,9 @@ const App = () => {
<SettingsContext.Provider value={settings}>
<CssBaseline/>
<ApolloProvider client={client}>
<AppContent/>
<MuiThemeProvider theme={theme}>
<AppContent/>
</MuiThemeProvider>
</ApolloProvider>
</SettingsContext.Provider>
);
......
import { makeStyles } from "@material-ui/core/styles";
import { createTheme, makeStyles } from "@material-ui/core/styles";
const theme = createTheme({
palette: {
primary: {
light: '#ffcccb',
main: '#ef9a9a',
dark: '#ba6b6c',
contrastText: '#fff',
},
secondary: {
light: '#ffffff',
main: '#fff3e0',
dark: '#ccc0ae',
contrastText: '#000',
},
},
});
const useStyles = makeStyles(theme => ({
appBar: {
......@@ -6,31 +23,37 @@ const useStyles = makeStyles(theme => ({
height: "auto",
zIndex: 1200// theme.zIndex.drawer + 1,
},
drawerPaper: {
//marginTop: "80px"
},
//drawerPaper: {
//marginTop: "80px"
//},
dashboardHeader: {
justifyContent:"space-between",
alignItems:"stretch",
//height: "12vh",
minHeight: "12vh",
zIndex: 100
},
dashboardBody: {
height: "calc(100vh - 80px - 12px)"
//height: "calc(100vh - 80px - 12px)"
},
dashboardFooter: {
height: "12px"
},
dashboardTileHeader: {
//height: "50px",
//minHeight: "5%",
//justifyContent: "flex-start",
//alignItems: "center"
justifyContent:"space-between",
},
dashboardTileContent: {
height: "calc(85% - 6vh - 6px)",
height: "calc(100% - (8px * 6))", // 8px is the size of theme.spacing(1)
//width: "100%",
overflow: "scroll"
},
dashboardTile: {
padding: theme.spacing(1),
height: "100%",
width: "100%"
},
cardOfTileWithShowNext: {
padding: theme.spacing(2),
height: "calc(100% - 35px)", //35px is the height of the ShowNext bar
......@@ -38,23 +61,56 @@ const useStyles = makeStyles(theme => ({
},
cardOfTileWithoutShowNext: {
padding: theme.spacing(2),
height: "100% ",
height: "100%",
width: "100%"
},
fullHeightTile: {
height: "calc(100vh - 12vh - 12px)",
//padding: theme.spacing(2)
height: "calc(100vh - 12vh - 12px + (8px * 2))", // 8px is the size of theme.spacing(1)
//marginTop: theme.spacing(2)
},
halfHeightTile: {
height: "calc(50vh - 6vh - 6px)", // half of the dashboardBody/dashboardHeader/dashboardFooter height
height: `calc((100vh - 12vh - 12px ) * 0.5)`, // half of the fullHeightTile height
// this class will take the same height as fullHeightTile if the screen is size "xs":
[theme.breakpoints.down("xs")]: {
height: "calc(100vh - 12vh - 12px)",
height: "calc(100vh - 12vh - 12px + (8px * 2))",
}
},
"dashboardBody || fullHeightTile || halfHeightTile": {
//justifyContent: "space-between",
//alignItems: "center"
//"dashboardBody || fullHeightTile || halfHeightTile": {
//justifyContent: "space-between",
//alignItems: "center"
//},
tabs: {
height: "35px",
minHeight: "35px",
width: "100%",
//paddingTop: theme.spacing(0.5),
//marginRight: "-5%",
//justifyContent:"space-between",
//alignItems:"center",
},
tab: {
height: "35px",
minHeight: "35px",
borderTopRightRadius: "10px",
borderTopLeftRadius: "10px",
marginRight: "0.5%",
marginTop: theme.spacing(1),
backgroundColor: "rgba(171,134,97,0.08)",
},
tabSelected: {
height: "35px",
minHeight: "35px",
borderTopRightRadius: "10px",
borderTopLeftRadius: "10px",
marginRight: "0.5%",
marginTop: theme.spacing(0),
backgroundColor: "rgba(171,134,97,0.18)",
},
maximizeTileButton: {
backgroundColor: "rgba(171,134,97,0.18)",
float: "right",
height: "30px",
width: "30px",
},
h1: {
......@@ -72,4 +128,5 @@ const useStyles = makeStyles(theme => ({
},
}));
export { theme };
export { useStyles };
\ No newline at end of file
Markdown is supported
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