diff --git a/src/client/components/App.js b/src/client/components/App.js
index 4631899ddd367f28a50ea6a7031d764eeaafa192..a82710719473b647f17234a491bc92e403079a25 100644
--- a/src/client/components/App.js
+++ b/src/client/components/App.js
@@ -2,12 +2,6 @@ import React from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import MapApp from '../containers/MapApp';
import deepPurple from '@material-ui/core/colors/deepPurple';
-// import green from '@material-ui/core/colors/green';
-// import deepOrange from '@material-ui/core/colors/deepOrange';
-
-// import red from '@material-ui/core/colors/red';
-// import amber from '@material-ui/core/colors/amber';
-// import grey from '@material-ui/core/colors/grey';
const theme = createMuiTheme({
palette: {
diff --git a/src/client/components/Deck.js b/src/client/components/Deck.js
index 616c9c9b154287262075185b08c0dc515ede37a7..c6a67273ad56526636e440a887aa8d397479b917 100644
--- a/src/client/components/Deck.js
+++ b/src/client/components/Deck.js
@@ -24,9 +24,6 @@ import Typography from '@material-ui/core/Typography';
const MAPBOX_ACCESS_TOKEN = 'pk.eyJ1IjoiZWtrb25lbiIsImEiOiJjam5vampzZ28xd2dyM3BzNXR0Zzg4azl4In0.eozyF-bBaZbA3ibhvJlJpQ';
const styles = theme => ({
- mapGLContainer: {
- marginTop: 72
- },
tooltip: {
position: 'absolute',
padding: '4px',
@@ -186,13 +183,14 @@ class Deck extends React.Component {
onClick: info => this.setDialog(info),
});
// https://www.mapbox.com/mapbox-gl-js/api#map
+ { /* style={{marginTop: 72}} */}
return (
<ReactMapGL
{...this.state.viewport}
className={this.props.classes.root}
width='100%'
- height='calc(100% - 76px)'
- style={{marginTop: 72}}
+ height='calc(100% - 72px)'
+
onViewportChange={this._onViewportChange}
mapboxApiAccessToken={MAPBOX_ACCESS_TOKEN}
mapOptions={{
diff --git a/src/client/components/FacetBar.js b/src/client/components/FacetBar.js
new file mode 100644
index 0000000000000000000000000000000000000000..409633ec74fa2378a3cc1dd79ad84d136d20b455
--- /dev/null
+++ b/src/client/components/FacetBar.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Tree from './Tree';
+// import EnhancedTable from './EnhancedTable';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import purple from '@material-ui/core/colors/purple';
+
+import Typography from '@material-ui/core/Typography';
+// import CheckboxesGroup from './CheckboxesGroup';
+import Paper from '@material-ui/core/Paper';
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ height: '100%'
+ },
+ headingContainer: {
+ paddingTop: theme.spacing.unit,
+ paddingBottom: theme.spacing.unit,
+ paddingLeft: theme.spacing.unit,
+ borderBottomLeftRadius: 0,
+ borderBottomRightRadius: 0,
+ },
+ facetContainer: {
+ height: 350,
+ marginBottom: theme.spacing.unit,
+ },
+ facetContainerLast: {
+ height: 350,
+ marginBottom: 2,
+ },
+ facetValuesContainer: {
+ height: 288,
+ padding: theme.spacing.unit,
+ },
+});
+
+class FacetBar extends React.Component {
+
+ componentDidMount = () => {
+ this.props.fetchFacet();
+ }
+
+ // componentDidUpdate = prevProps => {
+ // if (prevProps.facet.facetFilters != this.props.facet.facetFilters) {
+ // this.props.fetchFacet();
+ // }
+ // }
+
+ //
+
+ render() {
+ const { classes, facet } = this.props;
+
+ return (
+ <div className={classes.root}>
+ {this.props.facet.fetchingFacet ?
+ <CircularProgress style={{ color: purple[500] }} thickness={5} /> :
+ <React.Fragment>
+ <Paper className={classes.facetContainer}>
+ <Paper className={classes.headingContainer}>
+ <Typography variant="h6">Title</Typography>
+ </Paper>
+ <div className={classes.facetValues}>
+
+ </div>
+ </Paper>
+ <Paper className={classes.facetContainer}>
+ <Paper className={classes.headingContainer}>
+ <Typography variant="h6">Author</Typography>
+ </Paper>
+ <div className={classes.facetValues}>
+
+ </div>
+ </Paper>
+ <Paper className={classes.facetContainerLast}>
+ <Paper className={classes.headingContainer}>
+ <Typography variant="h6">Production place</Typography>
+ </Paper>
+ <div className={classes.facetValuesContainer}>
+ <Tree
+ data={facet.facetValues.productionPlace}
+ updateFilter={this.props.updateFilter}
+ />
+ </div>
+ </Paper>
+ </React.Fragment>
+ }
+ </div>
+ );
+ }
+}
+
+FacetBar.propTypes = {
+ classes: PropTypes.object.isRequired,
+ fetchFacet: PropTypes.func.isRequired,
+ facet: PropTypes.object.isRequired,
+ updateFilter: PropTypes.func.isRequired,
+};
+
+export default withStyles(styles)(FacetBar);
diff --git a/src/client/components/Footer.js b/src/client/components/Footer.js
index 26c3adec1693cd11f9b59db92b56a4ed3069e3a9..c1ade2c156fe3ac2b16e755239428805e19f41fa 100644
--- a/src/client/components/Footer.js
+++ b/src/client/components/Footer.js
@@ -13,7 +13,7 @@ const logoHeight = 52;
const styles = theme => ({
root: {
position: 'absolute',
- borderTop: '4px solid' + theme.palette.primary.main,
+ //borderTop: '4px solid' + theme.palette.primary.main,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
diff --git a/src/client/components/LeafletMap.js b/src/client/components/LeafletMap.js
index cf7d0a913b13ca70cf9328be8311a35f12c931e1..c7c28329db46096325eea1ce73501ae1a6ccb78e 100644
--- a/src/client/components/LeafletMap.js
+++ b/src/client/components/LeafletMap.js
@@ -36,6 +36,9 @@ const style = {
};
const styles = () => ({
+ leafletContainer: {
+ height: 'calc(100% - 72px)'
+ },
spinner: {
height: 40,
width: 40,
@@ -284,7 +287,7 @@ class LeafletMap extends React.Component {
render() {
return (
<React.Fragment>
- <div className="leaflet-outer-container">
+ <div className={this.props.classes.leafletContainer}>
{/*<LeafletSidebar />*/}
<div id="map" style={style} />
</div>
diff --git a/src/client/components/Manuscripts.js b/src/client/components/Manuscripts.js
index a5297d31e874c996f4e398d4f91ad243a1c98db6..a387b6dc075f933e0bf8c5d5fa1802249a2907f4 100644
--- a/src/client/components/Manuscripts.js
+++ b/src/client/components/Manuscripts.js
@@ -10,11 +10,11 @@ import Pie from './Pie';
let Manuscripts = props => {
return (
<React.Fragment>
- <ViewTabs routeProps={props.routeProps} />
<Route
exact path='/manuscripts'
render={() => <Redirect to='manuscripts/table' />}
/>
+ <ViewTabs routeProps={props.routeProps} />
<Route
path={'/manuscripts/table'}
render={routeProps =>
@@ -26,7 +26,6 @@ let Manuscripts = props => {
resultCount={props.search.manuscriptCount}
page={props.search.page}
updatePage={props.updatePage}
- openFacetDialog={props.openFacetDialog}
routeProps={routeProps}
/>
}
@@ -73,7 +72,6 @@ Manuscripts.propTypes = {
fetchPlaces: PropTypes.func.isRequired,
fetchPlace: PropTypes.func.isRequired,
updatePage: PropTypes.func.isRequired,
- openFacetDialog: PropTypes.func.isRequired,
routeProps: PropTypes.object.isRequired
};
diff --git a/src/client/components/ResultTable.js b/src/client/components/ResultTable.js
index cd8eef36a3bacf85a86e530ebe15e4b727f04948..cc493201b141b41788cfb152c38be64debd4aeed 100644
--- a/src/client/components/ResultTable.js
+++ b/src/client/components/ResultTable.js
@@ -5,7 +5,6 @@ import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableRow from '@material-ui/core/TableRow';
-import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';
import CircularProgress from '@material-ui/core/CircularProgress';
import purple from '@material-ui/core/colors/purple';
@@ -13,17 +12,18 @@ import ResultTableHead from './ResultTableHead';
import { orderBy, has } from 'lodash';
import { parse } from 'query-string';
-const styles = (theme) => ({
+const styles = () => ({
tableContainer: {
- marginTop: 72,
+ //marginTop: 72,
overflow: 'auto',
- width: 'calc(100% - 8px)'
+ width: '100%',
+ height: 'calc(100% - 72px)'
},
table: {
//marginTop: 72,
- minWidth: 700,
+ //minWidth: 700,
//overflowX: 'auto',
- backgroundColor: theme.palette.background.paper
+ //backgroundColor: theme.palette.background.paper
},
paginationRow: {
borderBottom: '1px solid lightgrey'
@@ -43,7 +43,7 @@ const styles = (theme) => ({
},
progressContainer: {
width: '100%',
- height: '100%',
+ height: 'calc(100% - 72px)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@@ -87,7 +87,7 @@ class ResultTable extends React.Component {
this.props.fetchManuscripts();
}
}
-
+
stringListRenderer = cell => {
if (cell == null || cell === '-'){
return '-';
@@ -240,10 +240,10 @@ class ResultTable extends React.Component {
// console.log(rows)
if (this.props.fetchingManuscripts ) {
return (
- <Paper className={classes.progressContainer}>
+ <div className={classes.progressContainer}>
<Typography className={classes.progressTitle} variant="h4" color='primary'>Fetching manuscript data</Typography>
<CircularProgress style={{ color: purple[500] }} thickness={5} />
- </Paper>
+ </div>
);
} else {
return (
@@ -254,7 +254,6 @@ class ResultTable extends React.Component {
updatePage={this.props.updatePage}
resultCount={this.props.resultCount}
page={this.props.page}
- openFacetDialog={this.props.openFacetDialog}
routeProps={this.props.routeProps}
/>
<TableBody>
@@ -308,7 +307,6 @@ ResultTable.propTypes = {
resultCount: PropTypes.number.isRequired,
page: PropTypes.number.isRequired,
updatePage: PropTypes.func.isRequired,
- openFacetDialog: PropTypes.func.isRequired,
routeProps: PropTypes.object.isRequired
};
diff --git a/src/client/components/ResultTableHead.js b/src/client/components/ResultTableHead.js
index 52ebefcf4283a4f4f56613bf643d1c948698cc44..92cb9f7ccc06de74bdfb1e8d803f15117531bb46 100644
--- a/src/client/components/ResultTableHead.js
+++ b/src/client/components/ResultTableHead.js
@@ -4,9 +4,6 @@ import { withStyles } from '@material-ui/core/styles';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import TableCell from '@material-ui/core/TableCell';
-import Tooltip from '@material-ui/core/Tooltip';
-import IconButton from '@material-ui/core/IconButton';
-import FilterListIcon from '@material-ui/icons/FilterList';
import TablePagination from '@material-ui/core/TablePagination';
import ResultTablePaginationActions from './ResultTablePaginationActions';
// import InfoIcon from '@material-ui/icons/InfoOutlined';
@@ -14,11 +11,11 @@ import ResultTablePaginationActions from './ResultTablePaginationActions';
const styles = () => ({
paginationRow: {
- borderBottom: '1px solid lightgrey'
+ //borderBottom: '1px solid lightgrey'
},
paginationRoot: {
display: 'flex',
- justifyContent: 'flex-start'
+ justifyContent: 'flex-start',
}
});
@@ -99,9 +96,9 @@ class ResultTableHead extends React.Component {
this.setState({ order, orderBy });
};
- handleFacetButtonOnClick = property => () => {
- this.props.openFacetDialog(property);
- }
+ // handleFacetButtonOnClick = property => () => {
+ // this.props.openFacetDialog(property);
+ // }
// <TableSortLabel
// active={orderBy === column.property}
@@ -137,15 +134,6 @@ class ResultTableHead extends React.Component {
key={column.property}
>
{column.label}
- {column.filter &&
- <Tooltip title={'Filter ' + column.label.toLowerCase()}>
- <IconButton
- onClick={this.handleFacetButtonOnClick(column.property)}
- aria-label="Filter"
- >
- <FilterListIcon />
- </IconButton>
- </Tooltip>}
</TableCell>
);
})}
@@ -162,7 +150,6 @@ ResultTableHead.propTypes = {
updatePage: PropTypes.func.isRequired,
fetchManuscripts: PropTypes.func.isRequired,
routeProps: PropTypes.object.isRequired,
- openFacetDialog: PropTypes.func.isRequired
};
export default withStyles(styles)(ResultTableHead);
diff --git a/src/client/components/Tree.js b/src/client/components/Tree.js
index da41a0cf91078a0fc25f8084165da871c91d9c46..af4350350a3fd8abc3b85bed96c970e2c0939cb9 100644
--- a/src/client/components/Tree.js
+++ b/src/client/components/Tree.js
@@ -10,14 +10,13 @@ import FormControlLabel from '@material-ui/core/FormControlLabel';
const styles = () => ({
root: {
height: '100%',
- width: 600
},
searchForm: {
display: 'inline-block',
height: 50,
},
treeContainer: {
- height: 'calc(100% - 50px)',
+ height: '100%',
},
treeNode: {
fontFamily: 'Roboto',
@@ -70,64 +69,67 @@ class Tree extends Component {
searchQuery &&
node.title.toLowerCase().indexOf(searchQuery.toLowerCase()) > -1;
- const selectPrevMatch = () =>
- this.setState({
- searchFocusIndex:
- searchFocusIndex !== null
- ? (searchFoundCount + searchFocusIndex - 1) % searchFoundCount
- : searchFoundCount - 1,
- });
+ // const selectPrevMatch = () =>
+ // this.setState({
+ // searchFocusIndex:
+ // searchFocusIndex !== null
+ // ? (searchFoundCount + searchFocusIndex - 1) % searchFoundCount
+ // : searchFoundCount - 1,
+ // });
+ //
+ // const selectNextMatch = () =>
+ // this.setState({
+ // searchFocusIndex:
+ // searchFocusIndex !== null
+ // ? (searchFocusIndex + 1) % searchFoundCount
+ // : 0,
+ // });
+
+ // <form
+ // className={classes.searchForm}
+ // onSubmit={event => {
+ // event.preventDefault();
+ // }}
+ // >
+ // <input
+ // id="find-box"
+ // type="text"
+ // placeholder="Search..."
+ // style={{ fontSize: '1rem' }}
+ // value={searchString}
+ // onChange={event =>
+ // this.setState({ searchString: event.target.value })
+ // }
+ // />
+ //
+ // <button
+ // type="button"
+ // disabled={!searchFoundCount}
+ // onClick={selectPrevMatch}
+ // >
+ // <
+ // </button>
+ //
+ // <button
+ // type="submit"
+ // disabled={!searchFoundCount}
+ // onClick={selectNextMatch}
+ // >
+ // >
+ // </button>
+ //
+ // <span>
+ //
+ // {searchFoundCount > 0 ? searchFocusIndex + 1 : 0}
+ // /
+ // {searchFoundCount || 0}
+ // </span>
+ // </form>
- const selectNextMatch = () =>
- this.setState({
- searchFocusIndex:
- searchFocusIndex !== null
- ? (searchFocusIndex + 1) % searchFoundCount
- : 0,
- });
return (
<div className={classes.root}>
- <form
- className={classes.searchForm}
- onSubmit={event => {
- event.preventDefault();
- }}
- >
- <input
- id="find-box"
- type="text"
- placeholder="Search..."
- style={{ fontSize: '1rem' }}
- value={searchString}
- onChange={event =>
- this.setState({ searchString: event.target.value })
- }
- />
-
- <button
- type="button"
- disabled={!searchFoundCount}
- onClick={selectPrevMatch}
- >
- <
- </button>
-
- <button
- type="submit"
- disabled={!searchFoundCount}
- onClick={selectNextMatch}
- >
- >
- </button>
- <span>
-
- {searchFoundCount > 0 ? searchFocusIndex + 1 : 0}
- /
- {searchFoundCount || 0}
- </span>
- </form>
<div className={classes.treeContainer}>
<SortableTree
treeData={this.state.treeData}
diff --git a/src/client/components/ViewTabs.js b/src/client/components/ViewTabs.js
index bea2438d3036566521c026c1a83f98176d78f5be..7d70ea8550562157501421bc6ed3888ba04a11a6 100644
--- a/src/client/components/ViewTabs.js
+++ b/src/client/components/ViewTabs.js
@@ -1,6 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
-import Paper from '@material-ui/core/Paper';
import { withStyles } from '@material-ui/core/styles';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
@@ -9,15 +8,16 @@ import AddLocationIcon from '@material-ui/icons/AddLocation';
import RedoIcon from '@material-ui/icons/Redo';
import PieChartIcon from '@material-ui/icons/PieChart';
import { Link } from 'react-router-dom';
+import Paper from '@material-ui/core/Paper';
-const styles = {
+
+const styles = () => ({
root: {
- width: 'calc(100% - 8px)',
- position: 'absolute',
- top: 64,
- //backgroundColor: 'rgb(238, 238, 238)',
+ flexGrow: 1,
+ borderBottomLeftRadius: 0,
+ borderBottomRightRadius: 0,
},
-};
+});
class ViewTabs extends React.Component {
constructor(props) {
@@ -56,18 +56,20 @@ class ViewTabs extends React.Component {
this.setState({ value });
};
+
+
render() {
const { classes } = this.props;
return (
- <Paper square className={classes.root}>
+ <Paper className={classes.root}>
<Tabs
value={this.state.value}
onChange={this.handleChange}
- fullWidth
indicatorColor="secondary"
textColor="secondary"
+ fullWidth
>
- <Tab icon={<CalendarViewDayIcon />} label="manuscripts table" component={Link} to="/manuscripts" />
+ <Tab icon={<CalendarViewDayIcon />} label="table" component={Link} to="/manuscripts" />
<Tab icon={<AddLocationIcon />} label="production places" component={Link} to="/manuscripts/production_places" />
<Tab icon={<RedoIcon />} label="migrations" component={Link} to="/manuscripts/migrations" />
<Tab icon={<PieChartIcon />} label="statistics" component={Link} to="/manuscripts/statistics"/>
diff --git a/src/client/containers/MapApp.js b/src/client/containers/MapApp.js
index 403e2640aac340705131e21ee5cdc8792dc49137..400df488dce584773134fe7d3a73e8fba61ecf46 100644
--- a/src/client/containers/MapApp.js
+++ b/src/client/containers/MapApp.js
@@ -10,7 +10,10 @@ import Footer from '../components/Footer';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Manuscripts from '../components/Manuscripts';
import Main from '../components/Main';
-import FacetDialog from '../components/FacetDialog';
+import FacetBar from '../components/FacetBar';
+import Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
+
import {
fetchManuscripts,
@@ -43,18 +46,30 @@ const styles = theme => ({
//minHeight: 700
},
mainContainer: {
- display: 'flex',
- width: '100%',
marginTop: 64,
height: 'calc(100% - 128px)',
[theme.breakpoints.down(600)]: {
marginTop: 56,
height: 'calc(100% - 122px)',
},
- borderRight: '4px solid' + theme.palette.primary.main,
- borderLeft: '4px solid' + theme.palette.primary.main,
- //backgroundColor: 'rgb(238, 238, 238)'
- backgroundColor: theme.palette.background.paper
+ backgroundColor: '#bdbdbd',
+ padding: theme.spacing.unit,
+ },
+ facetBarContainer: {
+ height: '100%',
+ overflow: 'auto',
+ paddingTop: '0px !important',
+ paddingBottom: '0px !important'
+ },
+ resultsContainer: {
+ height: '100%',
+ overflow: 'auto',
+ paddingTop: '0px !important',
+ paddingBottom: '0px !important'
+ },
+ resultsContainerPaper: {
+ height: '100%'
+
}
});
@@ -69,32 +84,39 @@ let MapApp = (props) => {
<Router>
<React.Fragment>
<TopBar />
- <div className={classes.mainContainer}>
+ <Grid container spacing={8} className={classes.mainContainer}>
<Route exact path="/" component={Main} />
<Route
path="/manuscripts"
render={routeProps =>
- <Manuscripts
- search={props.search}
- facetFilters={props.facet.facetFilters}
- fetchManuscripts={props.fetchManuscripts}
- fetchPlaces={props.fetchPlaces}
- fetchPlace={props.fetchPlace}
- updatePage={props.updatePage}
- openFacetDialog={props.openFacetDialog}
- routeProps={routeProps}
- />}
+ <React.Fragment>
+ <Grid item sm={12} md={3} className={classes.facetBarContainer}>
+ <FacetBar
+ facet={props.facet}
+ fetchFacet={props.fetchFacet}
+ updateFilter={props.updateFilter}
+ updatePage={props.updatePage}
+ />
+ </Grid>
+ <Grid item sm={12} md={9} className={classes.resultsContainer}>
+ <Paper className={classes.resultsContainerPaper}>
+ <Manuscripts
+ search={props.search}
+ facetFilters={props.facet.facetFilters}
+ fetchManuscripts={props.fetchManuscripts}
+ fetchPlaces={props.fetchPlaces}
+ fetchPlace={props.fetchPlace}
+ updatePage={props.updatePage}
+ routeProps={routeProps}
+ />
+ </Paper>
+ </Grid>
+ </React.Fragment>
+ }
/>
- </div>
+ </Grid>
</React.Fragment>
</Router>
- <FacetDialog
- facet={props.facet}
- fetchFacet={props.fetchFacet}
- updateFilter={props.updateFilter}
- updatePage={props.updatePage}
- closeFacetDialog={props.closeFacetDialog}
- />
<Footer />
</div>
</div>
diff --git a/src/client/index.html b/src/client/index.html
index d69c4f17d1613d8829e071b534ba06461d02f278..21bf582cdfff57f228fd195f7567f06e2466b4b7 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -22,11 +22,6 @@
#root, #app {
height: 100%;
}
- .leaflet-outer-container {
- /* height: calc(100% - 72px); */
- width: 100%;
- margin-top: 72px
- }
a, a:visited, a:hover, a:active {
color: blue;
}