Commit 3aa85423 authored by Elisabeth Reuhl's avatar Elisabeth Reuhl
Browse files

Dashboard: Move button to maximize a tile into the top right corner of tiles (closes issue #83)

parent d056bc79
......@@ -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
......@@ -286,6 +287,13 @@ export const AppContent = () => {
const renderAreaA = () => {
const area = "areaA";
const maximizeTileButton = (
<MaximizeTileButton
area={area}
reducer={[input, dispatch]}
/>
);
return(
<DashboardTile
reducer={[input, dispatch]}
......@@ -303,13 +311,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
......@@ -325,6 +337,13 @@ export const AppContent = () => {
const renderAreaB = () => {
const area = "areaB";
const maximizeTileButton = (
<MaximizeTileButton
area={area}
reducer={[input, dispatch]}
/>
);
return(
<DashboardTile
reducer={[input, dispatch]}
......@@ -333,9 +352,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={
......@@ -352,6 +373,13 @@ export const AppContent = () => {
const renderAreaC = () => {
const area = "areaC";
const maximizeTileButton = (
<MaximizeTileButton
area={area}
reducer={[input, dispatch]}
/>
);
return(
<DashboardTile
reducer={[input, dispatch]}
......@@ -362,6 +390,7 @@ export const AppContent = () => {
data={getMapData()}
dataType={getMapDataType()}
reducer={[input, dispatch]}
maximizeTileButton={maximizeTileButton}
/>
}
/>
......
......@@ -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>
......
import React, {useEffect, useRef, useState} from "react";
import React, { useEffect, useRef } from "react";
import { Grid } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import { useStyles } from "../../styles";
import {select, scaleBand, axisBottom, axisLeft, scaleLinear, max} from "d3";
import {prepareHistogramData, binTimespanObjects} from "../../utils";
import { axisBottom, axisLeft, max, scaleBand, scaleLinear, select } from "d3";
import { binTimespanObjects, prepareHistogramData } from "../../utils";
export const Histogram = (props) => {
const { t, i18n } = useTranslation();
const {maximizeTileButton} = props;
const classes = useStyles();
//console.log(props.timelineData);
......@@ -115,6 +117,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 { IconButton, Tab, Tabs } from "@material-ui/core";
import { Tab, Tabs } from "@material-ui/core";
import { useTranslation } from "react-i18next";
import { makeStyles } from "@material-ui/core/styles";
import { useStyles } from "../../styles";
import ZoomOutIcon from "@material-ui/icons/ZoomOut";
import ZoomInIcon from "@material-ui/icons/ZoomIn";
// 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"
},
}));
export const ShowNext = (props) => {
const [input, dispatch] = props.reducer;
const { labels, area } = props;
//const numberOfValues = labels.length;
const { t, i18n } = useTranslation();
const classes = useStyles();
......@@ -36,7 +19,7 @@ export const ShowNext = (props) => {
return (
<div style={{display: "flex", width: "100%", height: "35px", minHeight: "35px",}}>
<Tabs
{labels && <Tabs
value={input[area]}
onChange={handleChange}
textColor="primary"
......@@ -56,20 +39,10 @@ export const ShowNext = (props) => {
value={idx}
label={t(label)}
variant={"outlined"}
className={input[area]===idx ? classes.tabSelected : classes.tab}
className={input[area] === idx ? classes.tabSelected : classes.tab}
/>
)}
</Tabs>
<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>
</Tabs>}
</div>
)
};
......@@ -11,7 +11,7 @@ export const Timeline = (props) => {
const classes = useStyles();
const { timelineObjectsData } = props;
const { timelineObjectsData, maximizeTileButton } = props;
const filteredTimelineData = timelineObjectsData&&timelineObjectsData.filter( datapoint => datapoint.periodSpans?.[0]!==undefined||datapoint.periodSpans?.length>1);
......@@ -56,6 +56,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';
......
......@@ -24,7 +24,7 @@ const useStyles = makeStyles(theme => ({
zIndex: 1200// theme.zIndex.drawer + 1,
},
//drawerPaper: {
//marginTop: "80px"
//marginTop: "80px"
//},
dashboardHeader: {
justifyContent:"space-between",
......@@ -39,12 +39,11 @@ const useStyles = makeStyles(theme => ({
height: "12px"
},
//dashboardTileHeader: {
//height: "50px",
//minHeight: "5%",
//justifyContent: "flex-start",
//alignItems: "center"
//},
dashboardTileHeader: {
//height: "50px",
//minHeight: "5%",
justifyContent:"space-between",
},
dashboardTileContent: {
height: "calc(100% - (8px * 6))", // 8px is the size of theme.spacing(1)
//width: "100%",
......@@ -107,6 +106,12 @@ const useStyles = makeStyles(theme => ({
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: {
fontSize: "1.25rem"
......
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