jessecoleman / nsf-viz

visualization of nsf data as bar charts with search
3 stars 0 forks source link

Grant Explorer

GitHub release (latest SemVer including pre-releases)

This project is built with React, Redux, Typescript, Recharts on the frontend and FastAPI, Gensim, Elasticsearch on the backend.

Building

Frontend

yarn && yarn start

Backend

poetry install && poetry run python app.py

Docker

In the base directory, run:

docker-compose --compatibility up --build

(The --compatibility flag may be needed for docker-compose to respect the memory limit specified in the docker-compose.yaml file.)

The app will be served at http://localhost:8080

This needs the elasticsearch data to be available in directory: ./elasticsearch_data.

Deploying (with Docker)

# build the frontend
docker-compose run frontend build

# save the frontend-prod image
docker-compose -f docker-compose-prod.yaml build frontend-prod \
  && docker save -o deploy/nsf-viz_frontend-prod.docker.tar nsf-viz_frontend-prod

# save the backend-prod image
docker-compose -f docker-compose-prod.yaml build backend-prod \
  && docker save -o deploy/nsf-viz_backend-prod.docker.tar nsf-viz_backend-prod

# upload the two images to the server
scp -r deploy <address_and_path_to_server>

# run the following commands on the server

# load the docker images
docker load -i deploy/nsf-viz_frontend-prod.docker.tar \
  && docker load -i deploy/nsf-viz_backend-prod.docker.tar

# may be necessary to change permissions on `elasticsearch_data` directory
sudo chown -R elasticsearch:elasticsearch elasticsearch_data/ \
  && sudo chmod -R a+w elasticsearch_data/

# start all the containers
docker-compose -f docker-compose-prod.yaml --compatibility up

The app will be served on port 8080.

Contributing

The frontend is structured according to the Redux Toolkit standard conventions. Within the /src/app directory, you'll find a directory /components which contains all the UI elements for the site. There are two reducers: filterReducer.ts and dataReducer.ts which are responsible for the user filters and server response data respectively.