Merge branch 'develop'

KPMP · Sep 5, 2019 · 495fff7 · 495fff7
2 parents bb37571 + 9c4db29
commit 495fff7
Show file tree

Hide file tree

Showing 43 changed files with 11,812 additions and 12,479 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,6 @@
 # delphinus-web
 This project is the web front-end for the Digital Pathology Repository for the Kidney Precision Medicine Project.
 
+NOTE: Doesn't build with Node 12+
+
 
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,24 +2,27 @@
   "name": "delphinus-web",
   "version": "0.1.0",
   "private": true,
-  "homepage": "/dpr",
   "devDependencies": {
     "node-sass-chokidar": "1.3.4",
     "npm-run-all": "4.1.5",
-    "react-scripts": "2.1.1"
+    "react-scripts": "3.0.1"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "1.2.8",
     "@fortawesome/free-solid-svg-icons": "5.5.0",
     "@fortawesome/react-fontawesome": "0.1.3",
+    "ajv": "6.10.2",
     "antd": "3.11.0",
-    "axios": "0.18.0",
-    "bootstrap": "4.1.3",
+    "axios": "0.18.1",
+    "bootstrap": "4.3.1",
     "es6-shim": "0.35.4",
     "history": "4.7.2",
     "html-react-parser": "0.4.7",
-    "lodash": "4.17.11",
+    "jquery": "3.4.1",
+    "lodash": "4.17.15",
     "openseadragon": "2.4.0",
+    "popper.js": "1.15.0",
+    "prop-types": "15.7.2",
     "react": "16.6.3",
     "react-burger-menu": "2.5.4",
     "react-dom": "16.6.3",
@@ -28,7 +31,8 @@
     "react-router-dom": "4.3.1",
     "reactstrap": "6.5.0",
     "redux": "4.0.1",
-    "redux-thunk": "2.3.0"
+    "redux-thunk": "2.3.0",
+    "typescript": "3.5.3"
   },
   "scripts": {
     "start-js": "react-scripts start",

diff --git a/public/img/logo.png b/public/img/logo.png
diff --git a/public/img/oops.png b/public/img/oops.png
diff --git a/public/index.html b/public/index.html
@@ -14,7 +14,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>Slide Viewer Concept</title>
+    <title>Digital Pathology Repository</title>
     <script> Function.prototype.call = function(t) { return this.apply(t, Array.prototype.slice.apply(arguments, [1])); } </script>
   </head>
   <body>

diff --git a/src/App.js b/src/App.js
@@ -8,18 +8,21 @@ import { createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk';
 import loadedState from './initialState';
 import rootReducer from './reducers';
-import { HashRouter, Route } from 'react-router-dom';
+import { Router, Route } from 'react-router-dom';
 import SlidePrintManager from './components/Slides/Menu/SlidePrintManager';
 import ReactGA from 'react-ga';
 import createHistory from 'history/createBrowserHistory';
+import Oops from './components/Error/Oops';
+import ErrorBoundaryContainer from "./components/Error/ErrorBoundaryContainer";
 
-const cacheStore = window.sessionStorage.getItem("redux-store");
+
+const cacheStore = window.sessionStorage.getItem("dpr");
 const initialState = cacheStore ?
     JSON.parse(cacheStore) :
     loadedState;
 const store = applyMiddleware(thunk)(createStore)(rootReducer, initialState, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
 const saveState = () => {
-    window.sessionStorage.setItem("redux-store", JSON.stringify(store.getState()));
+    window.sessionStorage.setItem("dpr", JSON.stringify(store.getState()));
 };
 const GA_TRACKING_ID = 'UA-124331187-3';
 
@@ -51,13 +54,16 @@ class App extends Component {
     	return (
             <Provider store={store}>
                 <Container fluid>
-                	<NavBar/>
-                    <HashRouter basename='/dpr'>
+                    <Router history={history}>
                     	<div>
-	                        <Route exact path="/" component={Summary}/>
-	                        <Route path="/slides" component={Slides}/>
-                        </div>
-                    </HashRouter>
+	                    	<ErrorBoundaryContainer>
+	                            <NavBar/>
+		                        <Route exact path={process.env.PUBLIC_URL} component={Summary}/>
+		                        <Route path={process.env.PUBLIC_URL + "/slides"} component={Slides}/>
+	                        </ErrorBoundaryContainer>
+	                        <Route  exact path={process.env.PUBLIC_URL + "/oops"} component={Oops} />
+	                    </div>
+                    </Router>
                 </Container>
             </Provider>
         );

diff --git a/src/actions/Error/errorActions.js b/src/actions/Error/errorActions.js
@@ -0,0 +1,17 @@
+import Api from '../../helpers/Api';
+
+const api = Api.getInstance();
+
+export const handleError = () => {
+    return (dispatch) => {
+        window.location.href = "/oops";
+    }
+};
+
+export const sendMessageToBackend = (error) => {
+	let errorMessage = { error: error.message , stackTrace: error.stack }
+	return (dispatch) => {
+		dispatch(handleError());
+		api.post('/api/v1/error', errorMessage);
+	};
+}
diff --git a/src/actions/Participants/participantActions.js b/src/actions/Participants/participantActions.js
@@ -0,0 +1,56 @@
+import actionNames from '../actionNames';
+import axios from 'axios';
+import participantSelectSorter from '../../components/Summary/participantSelectSorter';
+import { sendMessageToBackend } from '../Error/errorActions';
+
+export const setSelectedParticipant = (participant) => {
+    return {
+        type: actionNames.SET_SELECTED_PARTICIPANT,
+        payload: participant
+    }
+}
+
+export const setSelectedSlide = (slide) => {
+	return {
+		type: actionNames.SET_SELECTED_SLIDE,
+		payload: slide
+	}
+}
+
+export const setParticipants = (participants) => {
+	return {
+		type: actionNames.SET_PARTICIPANTS,
+		payload: participants
+	}
+}
+
+export const getParticipantSlides = (participantId, props) => {
+	return (dispatch) => {
+		var config = { headers: {'Content-Type': 'application/json', 'Cache-control': 'no-cache'}};
+		axios.get('/api/v1/slides/' + participantId, config)
+			.then(result => {
+				let slides = participantSelectSorter(result.data);
+				dispatch(setSelectedParticipant({id: participantId, slides: slides, selectedSlide: slides[0]}));
+				props.history.push(process.env.PUBLIC_URL + "/slides");
+			})
+			.catch(err => {
+				console.log("We were unable to get a list of slides for  " + participantId);
+				dispatch(sendMessageToBackend(err));
+			});
+	}
+}
+
+export const getAllParticipants = () => {
+	return (dispatch) => {
+		var config = { headers: {'Content-Type': 'application/json', 'Cache-control': 'no-cache'}}
+		axios.get('/api/v1/slides', config)
+			.then(result => {
+				let participants = result.data;
+				dispatch(setParticipants(participants));
+			})
+			.catch(err => {
+				console.log("We were unable to get the slides.");
+				dispatch(sendMessageToBackend(err));
+			});
+	}
+}
diff --git a/src/actions/Participants/participantActions.test.js b/src/actions/Participants/participantActions.test.js
@@ -0,0 +1,26 @@
+import { setSelectedParticipant, setParticipants } from './participantActions';
+import actionNames from '../actionNames';
+
+
+describe('setSelectedParticipant', () => {
+	it('should pass the argument through to the payload and set the action', () => {
+		let payload = "I am a payload";
+		let actionName = actionNames.SET_SELECTED_PARTICIPANT;
+
+		let result = setSelectedParticipant(payload);
+
+		expect(result).toEqual( { payload: payload, type: actionName });
+	});
+});
+
+describe('setParticipants', () => {
+	it('should pass the argument through to the payload and set the action', () => {
+		let payload = "I am a payload";
+		let actionName = actionNames.SET_PARTICIPANTS;
+
+		let result = setParticipants(payload);
+
+		expect(result).toEqual( { payload: payload, type: actionName });
+	});
+});
+
diff --git a/src/actions/Patients/patientActions.js b/src/actions/Patients/patientActions.js
diff --git a/src/actions/Patients/patientActions.test.js b/src/actions/Patients/patientActions.test.js
diff --git a/src/actions/actionNames.js b/src/actions/actionNames.js
@@ -1,6 +1,6 @@
 const actionNames = {
-    SET_SELECTED_PATIENT: "SET_SELECTED_PATIENT",
-    GET_PATIENT_SLIDES: "GET_PATIENT_SLIDES",
+    SET_SELECTED_PARTICIPANT: "SET_SELECTED_PARTICIPANT",
+    SET_PARTICIPANTS: "SET_PARTICIPANTS",
     SET_SELECTED_SLIDE: "SET_SELECTED_SLIDE"
 };
 

diff --git a/src/components/Error/ErrorBoundary.js b/src/components/Error/ErrorBoundary.js
@@ -0,0 +1,20 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+
+class ErrorBoundary extends Component {
+
+	componentDidCatch(error) {
+		this.props.handleError(error);
+	}
+
+	render() {
+		return this.props.children;
+	}
+}
+
+ErrorBoundary.propTypes = {
+	handleError: PropTypes.func.isRequired,
+	children: PropTypes.node
+};
+
+export default ErrorBoundary;
diff --git a/src/components/Error/ErrorBoundaryContainer.js b/src/components/Error/ErrorBoundaryContainer.js
@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+import ErrorBoundary from './ErrorBoundary';
+import { sendMessageToBackend } from '../../actions/Error/errorActions';
+import { withRouter } from 'react-router-dom';
+
+const mapStateToProps = (state, props) =>
+({
+
+});
+
+const mapDispatchToProps = (dispatch, props) =>
+({
+	handleError(error) {
+		dispatch(sendMessageToBackend(error));
+	}
+});
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ErrorBoundary));
diff --git a/src/components/Error/Oops.js b/src/components/Error/Oops.js
@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+import { Col, Row, Button } from 'reactstrap';
+
+class Oops extends Component {
+    render() {
+        return (
+            <article className="container-fluid">
+                <Row id="oops-content">
+                    <Col xs={0} md={2}>&nbsp;</Col>
+                    <Col xs={12} md={4} className={"text-center"}>
+                        <img src="img/oops.png" alt="Oops, something went wrong" id="oops-image"/>
+                    </Col>
+                    <Col xs={12} md={6}>
+                        <p className="oops-big">Oops...</p>
+                        <p className="oops-small">Looks like something went wrong.<br/>We&#39;re working on it.</p>
+                        <p className="oops-button-container">
+                            <Button className="btn btn-primary"
+                                    onClick={() => window.location.href = "/"}>
+                                    Back to Home
+                            </Button>
+                        </p>
+                    </Col>
+                </Row>
+            </article>
+        );
+    }
+}
+
+export default Oops;
diff --git a/src/components/Nav/NavBar.js b/src/components/Nav/NavBar.js
@@ -1,23 +1,20 @@
 import React, { Component } from 'react';
-import { Row, NavbarBrand, Col, Button } from 'reactstrap';
+import { Navbar, NavbarBrand, Col } from 'reactstrap';
+import { Link } from 'react-router-dom';
 
 class NavBar extends Component {
 	render() {
 		return (
-			<Row className="nav-container container-fluid">
-				<Col xs="3">
-					<NavbarBrand href={process.env.PUBLIC_URL + "/"}>
-						<img src="img/logo.png" alt="Digital Pathology Repository" className="logo"/>
-					</NavbarBrand>
+			<Navbar id="navbar" className="px-1 py-1 fixed-top">
+				<Col sm={6}>
+					<Link to="/" className="navbar-header">
+						<NavbarBrand className="d-flex align-items-center">
+							<img src="img/logo.png" alt="Kidney Precision Medicine Project Digital Pathology Repository" className="logo" />
+							<span className="ml-2 text-dark">Digital Pathology Repository</span>
+						</NavbarBrand>
+					</Link>
 				</Col>
-				<Col xs="6" id="demo-text">Slide Viewer Concept
-				</Col>
-				<Col xs="6" id="demo-text-small"></Col>
-				<Col xs="3">
-					<div className="float-right" id="feedback-button"><Button color="primary" onClick={() => window.open("https://goo.gl/forms/WkyC7PZM8AIe3NoI3", "_blank")}>Send Feedback</Button></div>
-				</Col>
-			</Row>
-
+			</Navbar>
 		);
 	}
 }