From b8b7b009de64b794a148e4ec0d3a1dac840c06c1 Mon Sep 17 00:00:00 2001 From: Andre Daniel Paredes <34843515+ADParedes@users.noreply.github.com> Date: Tue, 20 Sep 2022 14:20:50 -0500 Subject: [PATCH 1/2] Update README.md --- visualization_interface/README.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/visualization_interface/README.md b/visualization_interface/README.md index 58beeacc..0bde16d8 100644 --- a/visualization_interface/README.md +++ b/visualization_interface/README.md @@ -1,6 +1,14 @@ -# Getting Started with Create React App +# OpenDBM Visual Analytics Interface -This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). +![Name](https://img.shields.io/badge/OpenDBM-Visualization%20Interface%20Tool-orange)![Name](https://img.shields.io/badge/Version-v0.1-blue) +opendbm_vistool_overview + +## Cohort Panel +https://user-images.githubusercontent.com/34843515/191345803-2a74ab15-bf45-4746-bd9e-507ca28ed404.mp4 + + +## Individual Panel +https://user-images.githubusercontent.com/34843515/191345766-5e284854-f2a1-4a2d-b3fc-8bab98293f0a.mp4 ## Available Scripts From 61a391b177f5136348dfa41f32c8b3d5a6c99050 Mon Sep 17 00:00:00 2001 From: Andre Daniel Paredes <34843515+ADParedes@users.noreply.github.com> Date: Wed, 5 Oct 2022 15:42:04 -0400 Subject: [PATCH 2/2] Update README.md --- visualization_interface/README.md | 153 ++++++++++++++++++------------ 1 file changed, 94 insertions(+), 59 deletions(-) diff --git a/visualization_interface/README.md b/visualization_interface/README.md index 0bde16d8..9e2fcf79 100644 --- a/visualization_interface/README.md +++ b/visualization_interface/README.md @@ -10,69 +10,104 @@ https://user-images.githubusercontent.com/34843515/191345803-2a74ab15-bf45-4746- ## Individual Panel https://user-images.githubusercontent.com/34843515/191345766-5e284854-f2a1-4a2d-b3fc-8bab98293f0a.mp4 -## Available Scripts +## Setting up and Running the Visual Analytics Interface -In the project directory, you can run: +Note for Linux Distributions (e.g. Ubuntu or WLS on Windows): +It can help to run the following from time to time +```bash +sudo apt upgrade && sudo apt update +``` +### Prerequisites -### `npm start` +- Install OpenDBM following the documentation link or pull the latest changes in the Github repository +- Install nvm (latest version; remember to restart shell) +- Install node with nvm (nmv install npm, latest version of npm +- Nvm use node +```bash +$ Node -v +> v18.7.0 +``` +or +```bash +$ Npm -v +> 8.15.0 +``` +- Make sure your OpenDBM output folder is in the main directory - open_dbm folder, ( if you have a folder called output_data, it needs to contain the OpenDBM output data format, in other words, it needs to contain the derived_variables and (optional) raw_variables folders) -Runs the app in the development mode.\ +### Running the visualization_interface + +If everything is stood up correctly, and your python interpreter can pull from the respective virtual environment do the following: +#### Windows: +```bash +./run_dashboard.sh +``` +#### Linux: +```bash +$ sudo chmod 777 run_dashboard.sh +$ ./run_dashboard.sh +``` +#### Mac: +- If you want to run the app with the OpenDBM output folder from the repository’s sample_data, you can run +```bash +$ ./run_dashboard.sh sample_output +``` + +### Extra Attributes (metadata grouping of cohort) +If you want to run the app with a metadata file for the videos (e.g. if you wish to add an extra attribute such as gender, age range, health condition, treatment etc) you can add a csv file with two columns: id for the video ids and attr for the extra attribute. There can be at most `10` different values for the attr value. +This file has to be placed inside the output data folder, along with the derived_variables and raw_variables folders. To run the VIZ interface with the metadata file use: +```bash +$ ./run_dashboard.sh .csv. +``` + +You can test this with the sample metadata file from the repository by running: +```bash +$ ./run_dashboard.sh sample_output metadata.csv +``` + +### Manual Startup +If you cannot run the bash scripts, it's likely because your dependencies were not made available through the setup virtual environment. To work around this you can install the dependencies manually +#### Prerequisites +- Have an updated npm( V8+) and Node version (V16+) installed on your computer +- Move your data folder (e.g. sample_output) in the open_dbm/visualization_interface /flask-server folder. +- Install dependencies: pandas, scikit-learn, and update your numpy +Note for Linux distrubtions: +- all are pip installable +- Need to use python3 vs python when running the backend + +#### Install Dependencies +When running the VIZ tool you need do the following only once. +##### Linux (includes Ubuntu, WSL, MACOS) +- Sudo apt update and sudo apt upgrade +- Sudo apt install npm (this will give you npm v-6, node v10; these versions are not sufficient to run VIZ interface - and you will need to update them) +- Update versions of npm to v8+ and node v16+ +Recommended: install nvm Set up Node.js on WSL 2 | Microsoft Docs Follow instructions. +Remember once installed you will need to close and open a new terminal +- PIP install flask; flask –version (flask 2.2.2, python 3.91) +- PIP install pandas (v1.4) numpy (v1.23) +- PIP install scikit-learn +- Move to ~/open_dbm/visualization_interface +- $ npm install + +Once the dependencies are completed, you only need to perform the following 2 steps to start up the visualization_interface . +#### Step 1: Front end +- run npm start to get the frontend starting - this will open a new browser window with the visualization_interface. You will proxy error, which is to be expected because you have yet tell it from where to get the data from (backend part) +#### Step 2: Backend +-Move your data output folder into open_dbm/dashboad/flask-server folder +-if your data folder is in the right location, enter the open_dbm/dashboad/flask-server folder and run source venv/Scripts/activate to activate a virtual environment that will make all the backend dependencies available without any installation. If your terminal prompter contains (venv)(base) you’re good to go and run the backend +- Run the following command python server.py . Refresh the visualization_interface in the browser and you should see it populated with all the data. +#### Additional +Extra Attributes (metadata) +- To run the visualization_interface with metadata, run the following: python server.py . +Killing Operations +Linux: +```bash +$ kill $(lsof -t -i:5000) +``` + + +## Additional React Information +To run the app in the development mode. Open [http://localhost:3000](http://localhost:3000) to view it in your browser. The page will reload when you make changes.\ You may also see any lint errors in the console. - -### `npm test` - -Launches the test runner in the interactive watch mode.\ -See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. - -### `npm run build` - -Builds the app for production to the `build` folder.\ -It correctly bundles React in production mode and optimizes the build for the best performance. - -The build is minified and the filenames include the hashes.\ -Your app is ready to be deployed! - -See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. - -### `npm run eject` - -**Note: this is a one-way operation. Once you `eject`, you can't go back!** - -If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. - -Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own. - -You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it. - -## Learn More - -You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). - -To learn React, check out the [React documentation](https://reactjs.org/). - -### Code Splitting - -This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting) - -### Analyzing the Bundle Size - -This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size) - -### Making a Progressive Web App - -This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app) - -### Advanced Configuration - -This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration) - -### Deployment - -This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment) - -### `npm run build` fails to minify - -This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)