Make room for facets

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 =>

src/client/components/ResultTable.js

@@ -15,9 +15,10 @@ import { parse } from 'query-string';
 
 const styles = (theme) => ({
   tableContainer: {
-    marginTop: 72,
+    //marginTop: 72,
     overflow: 'auto',
-    width: 'calc(100% - 8px)'
+    width: '100%',
+    height: '100%'
   },
   table: {
     //marginTop: 72,
@@ -87,7 +88,7 @@ class ResultTable extends React.Component {
       this.props.fetchManuscripts();
     }
   }
-  
+
   stringListRenderer = cell => {
     if (cell == null || cell === '-'){
       return '-';

src/client/components/ViewTabs.js

@@ -12,9 +12,9 @@ import { Link } from 'react-router-dom';
 
 const styles = {
   root: {
-    width: 'calc(100% - 8px)',
-    position: 'absolute',
-    top: 64,
+    flexGrow: 1,
+    //position: 'absolute',
+    //top: 64,
     //backgroundColor: 'rgb(238, 238, 238)',
   },
 };
@@ -63,9 +63,9 @@ class ViewTabs extends React.Component {
         <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={<AddLocationIcon />} label="production places" component={Link} to="/manuscripts/production_places" />

src/client/containers/MapApp.js

@@ -11,6 +11,8 @@ 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 Grid from '@material-ui/core/Grid';
+import Paper from '@material-ui/core/Paper';
 
 import {
   fetchManuscripts,
@@ -43,18 +45,12 @@ 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
   }
 });
 
@@ -69,23 +65,28 @@ 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}
-                  />}
-              />
-            </div>
+              <Grid item xs={12} sm={4}>
+                <Paper></Paper>
+              </Grid>
+              <Grid item xs={12} sm={8}>
+                <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}
+                    />}
+                />
+              </Grid>
+            </Grid>
           </React.Fragment>
         </Router>
         <FacetDialog

src/server/sparql/Manuscripts.js

@@ -99,7 +99,7 @@ const getFacet = (facetConfig, filters) => {
     facetQuery = facetQuery.replace('<FILTER>', generateFacetFilter(facetConfig, filters));
   }
   facetQuery = facetQuery.replace('<PREDICATE>', facetConfig.predicate);
-  console.log(facetQuery)
+  //console.log(facetQuery)
   let mapper = facetConfig.type === 'hierarchical' ? mapHierarchicalFacet : makeObjectList;
   return sparqlSearchEngine.doSearch(facetQuery, endpoint, mapper);
 };