feature/#140-collapsable-detail-drawer (#147)

* #140 - make collapsable drawer default to closed, but with a larger, more obvious, control mechanism; also fix bug #145 by including  when necessary in graph URL

app/src/components/app/App.js

@@ -6,6 +6,7 @@ import Home from "../home/Home";
 import Results from "../results/Results";
 import GraphContainer from "../graph/GraphContainer";
 import Notifier from '../notifier/Notifier';
+import ErrorPage from '../errorPage/ErrorPage';
 
 export default class App extends Component {
   render() {
@@ -17,6 +18,8 @@ export default class App extends Component {
           <Route exact path="/" component={Home} />
           <Route path="/results" component={Results} />
           <Route path="/graph/:uidOrQsl" component={GraphContainer} />
+          {/* catch-all route in case of no earlier match */}
+          <Route component={ErrorPage} />
         </Switch>
       </div>
     );

app/src/components/errorPage/ErrorPage.css

@@ -0,0 +1,14 @@
+.Error {
+  min-height: 5vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 1vmin);
+}
+
+.Error-logo-full {
+  height: auto;
+  width: auto;
+  margin: 20px;
+}

app/src/components/errorPage/ErrorPage.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { withRouter } from 'react-router-dom';
+import { withStyles } from '@material-ui/core/styles';
+
+import './ErrorPage.css';
+import logo from './katlas-logo-blue-300px.png';
+
+const styles = () => ({
+  title: {
+    textAlign: 'center'
+  }
+});
+
+class ErrorPage extends React.Component {
+  render() {
+    const { classes } = this.props;
+    return (
+      <div className='Error'>
+        <div className={classes.title}>
+          <h3>Something appears to have gone wrong. Please retry your operation.</h3>
+        </div>
+        <img src={logo} className='Error-logo-full' alt='logo' />
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(withRouter(ErrorPage));

app/src/components/graph/GraphContainer.js

@@ -107,7 +107,7 @@ class GraphContainer extends Component {
             </div>
           ) : null
         }
-        <SplitterLayout percentage={true} secondaryInitialSize={30}>
+        <SplitterLayout percentage={true} secondaryInitialSize={0}>
           <Graph dataSet={entity.results}/>
           <EntityDetails selectedObj={entity.results}/>
         </SplitterLayout>

app/src/components/results/ResultList.js

@@ -15,6 +15,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 import { ResultPaginationActionsWrapped } from './ResultPaginationActions';
 import { getQueryLayout, rowCellsFromLayout } from './layoutComposer';
 import { addResourceIdFilterQSL } from "../../utils/validate";
+import history from '../../history';
 
 // Customized table cell theme
 export const CustomTableCell = withStyles(theme => ({
@@ -115,9 +116,12 @@ class ResultList extends Component {
 
         tableRows = query.results.map((item, idx) => {
           let cells = rowCellsFromLayout(item, layout);
+          //build url to use for QSL in graph action; include basename, if applicable
+          let rowUrl = (history.basename ? history.basename : '' ) + '/graph/' +
+            addResourceIdFilterQSL(query.current, item.resourceid);
           cells.unshift(
             <CustomTableCell key={item.uid}>
-              <a className={classes.link} href={'/graph/' + addResourceIdFilterQSL(query.current, item.resourceid)}>
+              <a className={classes.link} href={rowUrl}>
                 <Tooltip title="Response Object in Graph View" aria-label="Response in Graph">
                   <IconButton className={classes.button} variant='contained' color='primary' size='small'>
                     {'\uf0e8'}

app/src/components/results/Results.css

@@ -0,0 +1,6 @@
+.splitter-layout > .layout-splitter {
+  width: 12px;
+  background-image: url("./grabIcon.png");
+  background-position: center;
+  background-repeat: no-repeat;
+}

app/src/components/results/Results.js

@@ -16,6 +16,8 @@ import EntityDetails from '../entityDetails/EntityDetails';
 import * as queryActions from '../../actions/queryActions';
 import { getQueryParam } from '../../utils/url';
 
+import './Results.css';
+
 const styles = theme => ({
   progress: {
     margin: theme.spacing.unit * 2
@@ -144,7 +146,7 @@ class Results extends Component {
         ) : (
           <SplitterLayout
             percentage={true}
-            secondaryInitialSize={30}
+            secondaryInitialSize={0}
             customClassName={classes.resultContainer}
           >
             <ResultList