KPMP-521: Initial copy of cassiopeia-web

KPMP · Dec 13, 2018 · 33f9b4b · 33f9b4b
1 parent 86fe3e3
commit 33f9b4b
Show file tree

Hide file tree

Showing 46 changed files with 20,043 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,6 @@
+node_modules/
+build/
+.project
+**/*.css
+.idea
+*.iml
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "cassiopeia-web",
+  "version": "0.1.0",
+  "private": true,
+  "devDependencies": {
+    "node-sass-chokidar": "1.3.4",
+    "npm-run-all": "4.1.5",
+    "react-scripts": "2.1.1"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "1.2.8",
+    "@fortawesome/free-solid-svg-icons": "5.5.0",
+    "@fortawesome/react-fontawesome": "0.1.3",
+    "antd": "3.11.0",
+    "axios": "0.18.0",
+    "bootstrap": "4.1.3",
+    "es6-shim": "0.35.4",
+    "history": "4.7.2",
+    "html-react-parser": "0.4.7",
+    "lodash": "4.17.11",
+    "openseadragon": "2.4.0",
+    "react": "16.6.3",
+    "react-burger-menu": "2.5.4",
+    "react-dom": "16.6.3",
+    "react-ga": "2.5.6",
+    "react-redux": "5.1.1",
+    "react-router-dom": "4.3.1",
+    "reactstrap": "6.5.0",
+    "redux": "4.0.1",
+    "redux-thunk": "2.3.0"
+  },
+  "scripts": {
+    "start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-css start-js",
+    "build-js": "react-scripts build",
+    "build": "npm-run-all build-css build-js",
+    "build-css": "node-sass-chokidar src/ -o src/",
+    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/public/.DS_Store b/public/.DS_Store
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/img/logo.png b/public/img/logo.png
diff --git a/public/img/summary/biopsy-process.png b/public/img/summary/biopsy-process.png
diff --git a/public/img/summary/col1-glomerulus.png b/public/img/summary/col1-glomerulus.png
diff --git a/public/img/summary/col2-nephron.png b/public/img/summary/col2-nephron.png
diff --git a/public/img/summary/col3-renal-cortex.png b/public/img/summary/col3-renal-cortex.png
diff --git a/public/img/summary/step-1.png b/public/img/summary/step-1.png
diff --git a/public/img/summary/step-2.png b/public/img/summary/step-2.png
diff --git a/public/img/summary/step-3.png b/public/img/summary/step-3.png
diff --git a/public/img/summary/step-4.png b/public/img/summary/step-4.png
diff --git a/public/img/tn_KPMP-Ex2_TRI_1of1.jpeg b/public/img/tn_KPMP-Ex2_TRI_1of1.jpeg
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      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>Patient Slide Viewer</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import NavBar from './components/Nav/NavBar';
+import Summary from './components/Summary/Summary';
+import Slides from './components/Slides/Slides';
+import { Container } from 'reactstrap';
+import { Provider } from 'react-redux';
+import { createStore, applyMiddleware } from 'redux';
+import thunk from 'redux-thunk';
+import loadedState from './initialState';
+import rootReducer from './reducers';
+import { HashRouter, Switch, Route } from 'react-router-dom';
+import SlidePrintManager from './components/Slides/Menu/SlidePrintManager';
+import ReactGA from 'react-ga';
+import createHistory from 'history/createBrowserHistory';
+
+const cacheStore = window.sessionStorage.getItem("redux-store");
+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()));
+};
+const GA_TRACKING_ID = 'UA-124331187-3';
+
+ReactGA.initialize(GA_TRACKING_ID);
+function logPageView(location, action) {
+    ReactGA.set({ page: location.pathname + location.search });
+    ReactGA.pageview(location.pathname + location.search);
+}
+const history = createHistory();
+history.listen((location, action) => {
+    logPageView(location, action);
+});
+
+store.subscribe(function () {
+    console.log(store.getState())
+});
+
+store.subscribe(saveState);
+
+SlidePrintManager.getInstance().setReduxStore(store);
+
+class App extends Component {
+
+    componentWillMount() {
+        logPageView(window.location, "");
+    }
+
+    render() {
+        return (
+            <Provider store={store}>
+                <Container fluid>
+                    <HashRouter>
+                        <div>
+                            <NavBar/>
+                            <Switch>
+                                <Route exact path="/" component={Summary}/>
+                                <Route path="/slides" component={Slides}/>
+                            </Switch>
+                        </div>
+                    </HashRouter>
+                </Container>
+            </Provider>
+        );
+    }
+}
+
+export default App;
diff --git a/src/actions/Patients/patientActions.js b/src/actions/Patients/patientActions.js
@@ -0,0 +1,31 @@
+import actionNames from '../actionNames';
+import axios from 'axios';
+import patientSelectSorter from '../../components/Summary/patientSelectSorter';
+
+export const setSelectedPatient = (patient) => {
+    return {
+        type: actionNames.SET_SELECTED_PATIENT,
+        payload: patient
+    }
+}
+
+export const setSelectedSlide = (slide) => {
+	return {
+		type: actionNames.SET_SELECTED_SLIDE,
+		payload: slide
+	}
+}
+
+export const getPatientSlides = (patientId) => {
+	return (dispatch) => {
+		axios.get('/api/v1/slides/' + patientId)
+			.then(result => {
+				let slides = patientSelectSorter(result.data);
+				dispatch(setSelectedPatient({id: patientId, slides: slides, selectedSlide: slides[0]}));
+				window.location.href = "/#/slides";
+			})
+			.catch(err => {
+
+			});
+	}
+}
diff --git a/src/actions/Patients/patientActions.test.js b/src/actions/Patients/patientActions.test.js
@@ -0,0 +1,15 @@
+import { setSelectedPatient } from './patientActions';
+import actionNames from '../actionNames';
+
+
+describe('setSelectedPatient', () => {
+	it('should pass the argument through to the payload and set the action', () => {
+		let payload = "I am a payload";
+		let actionName = actionNames.SET_SELECTED_PATIENT;
+
+		let result = setSelectedPatient(payload);
+
+		expect(result).toEqual( { payload: payload, type: actionName });
+	});
+});
+
diff --git a/src/actions/actionNames.js b/src/actions/actionNames.js
@@ -0,0 +1,7 @@
+const actionNames = {
+    SET_SELECTED_PATIENT: "SET_SELECTED_PATIENT",
+    GET_PATIENT_SLIDES: "GET_PATIENT_SLIDES",
+    SET_SELECTED_SLIDE: "SET_SELECTED_SLIDE"
+};
+
+export default actionNames;
diff --git a/src/common-values.scss b/src/common-values.scss
@@ -0,0 +1,8 @@
+$header-height: 60px;
+$menu-margin: 15px;
+$menu-button-width: 36px;
+$standard-padding: 15px;
+$link-blue: #0275d8;
+$kpmp-blue: rgba(40, 60, 94, 1);
+$thumbnail-height: 70px;
+$thumbnail-width: 70px;
diff --git a/src/components/Nav/NavBar.js b/src/components/Nav/NavBar.js
@@ -0,0 +1,17 @@
+import React, { Component } from 'react';
+import { Row, NavbarBrand } from 'reactstrap';
+
+class NavBar extends Component {
+	render() {
+		return (
+			<Row className="nav-container container-fluid">
+				<NavbarBrand href="/">
+					<img src="img/logo.png" alt="Patient Slide Viewer" className="logo"/>
+				</NavbarBrand>
+			</Row>
+
+		);
+	}
+}
+
+export default NavBar;
diff --git a/src/components/Slides/Menu/Header.js b/src/components/Slides/Menu/Header.js
@@ -0,0 +1,75 @@
+import React, { Component } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCaretLeft, faChevronRight, faChevronLeft, faPrint, faDownload } from '@fortawesome/free-solid-svg-icons';
+import { Col, Row } from 'reactstrap';
+import ReactGA from 'react-ga';
+import SlidePrintManager from './SlidePrintManager';
+import { getNextSlide, getPreviousSlide, downloadSlide } from '../slideHelpers.js';
+
+class Header extends Component {
+
+	constructor(props) {
+		super(props);
+        this.onPrint = this.onPrint.bind(this);
+        this.handleDownload = this.handleDownload.bind(this);
+	}
+
+    handleNextSlide() {
+        let nextSlide = getNextSlide(this.props.selectedPatient.slides, this.props.selectedPatient.selectedSlide);
+        this.props.setSelectedSlide(nextSlide);
+        this.props.toggleMenu(true);
+    }
+
+    handlePreviousSlide() {
+        let previousSlide = getPreviousSlide(this.props.selectedPatient.slides, this.props.selectedPatient.selectedSlide);
+        this.props.setSelectedSlide(previousSlide);
+        this.props.toggleMenu(true);
+    }
+
+    handleDownload() {
+        ReactGA.event({
+            category: 'Slide View',
+            action: 'Download Slide',
+            label: this.props.selectedPatient.selectedSlide.slideName
+        });
+    	let downloadFileName = this.props.selectedPatient.selectedSlide.slideName + ".jpg";
+    	downloadSlide(downloadFileName);
+    }
+
+    onPrint() {
+        ReactGA.event({
+            category: 'Slide View',
+            action: 'Print Slide',
+            label: this.props.selectedPatient.selectedSlide.slideName
+        });
+        SlidePrintManager.getInstance().beforePrint();
+        setTimeout(window.print, 10);
+    }
+
+	render() {
+		return(
+			<div className="menu-slide-list-header">
+				<Row>
+					<Col sm="11" className="menu-title">WHOLE SLIDE IMAGES</Col>
+					<Col sm="1" className="menu-control"><FontAwesomeIcon icon={faCaretLeft} className="clickable" onClick={this.props.toggleMenu} size="lg"/></Col>
+				</Row>
+				<Row>
+					<Col className="float-left" sm="6">
+						<FontAwesomeIcon icon={faChevronLeft} className="clickable hoverable pad-right" onClick={() => this.handlePreviousSlide()} size="lg"/>
+						<FontAwesomeIcon icon={faChevronRight} className="clickable hoverable" onClick={() => this.handleNextSlide()} size="lg"/>
+					</Col>
+				    <Col sm="6">
+				    	<div className="float-right">
+				    		<FontAwesomeIcon icon={faPrint} onClick={this.onPrint} className="clickable hoverable pad-right" size="lg"/>
+				            <a id="download" //eslint-disable-line
+				            ><FontAwesomeIcon icon={faDownload} className="clickable hoverable" onClick={this.handleDownload} size="lg" /></a>
+			            </div>
+				    </Col>
+				</Row>
+        	</div>
+		);
+	}
+
+}
+
+export default Header;
diff --git a/src/components/Slides/Menu/Menu.js b/src/components/Slides/Menu/Menu.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import { slide as BurgerMenu } from 'react-burger-menu';
+import SlideListContainer from './SlideListContainer';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faBars, faHome } from '@fortawesome/free-solid-svg-icons';
+import { Link } from 'react-router-dom';
+import StainInformationContainer from './StainInformationContainer';
+
+class Menu extends Component {
+
+	constructor(props) {
+		super(props);
+		this.state = { isOpen: true };
+	}
+
+	toggleMenu = (newState) => {
+		let openState = !this.state.isOpen;
+		if (newState !== undefined || newState !== null) {
+			openState = newState;
+		}
+		this.setState( { isOpen: openState } );
+	}
+
+	render() {
+		return (
+			<div id="side-menu">
+				<BurgerMenu isOpen={ this.state.isOpen } width={ '450px' } noOverlay customBurgerIcon={ <FontAwesomeIcon icon={faBars} /> }
+					customCrossIcon={ false } >
+					<SlideListContainer toggleMenu={this.toggleMenu}/>
+					<StainInformationContainer />
+				</BurgerMenu>
+                <Link id="btn-home" to="/">
+                    <FontAwesomeIcon icon={faHome} size="2x"/>
+                </Link>
+            </div>
+		);
+	}
+
+}
+
+export default Menu;