Skip to content

Latest commit

 

History

History
127 lines (88 loc) · 4.16 KB

README.md

File metadata and controls

127 lines (88 loc) · 4.16 KB
Raw

COVID Episim Website

EpiSim

This repo contains the visualization website for MATSim/EpiSim, available at https://covid-sim.info. See that website for information on the use of MATSim for COVID-19 disease propagation, given various measures for combating its spread.

This README details build instructions for the website itself.

Project pre-requisites

The site uses npm and yarn, and was developed using VS Code.

  • You should install VS Code, npm, and yarn first.
  • All code is TypeScript and shall remain so.

The following VS Code plugins are used:

  • Prettier to force code style consistencey
  • Vetur, for Vuejs support. This site is a Vue SPA.
  • Shader languages support

Foundational technologies

You will need to know this tech in order to hack on this website:

  • TypeScript - typesafe JavaScript
  • Vue - the glue that connects UI elements to code. Similar to React but lightweight and awesome
  • ThreeJS - WebGL library for the fancy animations.
  • Pug - the template language used in Vue files. Pug uses Python-style indentation instead of open/close XML tags, which makes it far easier to read than bare HTML.

First time install

One line fetches everything from the npm database:

yarn install

Development Commands

Compiling and hot-reloads during development

This command runs a local server with hot reload for testing, usually listens on http://localhost:8080

yarn serve

Compiles and minifies for production

yarn build

Run your unit tests

Well... I have not written tests but the infrastructure is there to use jest.

yarn test:unit

Pushing to the live site

Travis-CI is configured to automatically build the site with every push to master, so don't push to master until you are ready for your code to go live.

  • Travis config is in .travis.yml

Issues

I (kn) need to fix the npm version on something older. The command is

nvm use --lts

Needed to install nvm to make this work. Can't remember how I did that; possibly through macports.

Project Layout

  • /src: all TypeScript and Vue files go here
  • /src/assets: images, .csvs, etc that get packaged by webpack
  • /src/components: shared Vue components go here
  • /src/HomeIndex.vue: the front page. Add new thumbnails for pages or other content here.
  • /src/runs: Each page has its own folder under the /src/runs folder.
    • Connect up your new pages by adding a new folder here, and also adding a new URL to /src/router.ts. Anyone who knows the URL can then see the page. When you are ready for the public to also find it, add a link to /src/components/TopBar.vue and to the homepage.
    • Each run should use a readme.md file under /src/assets so that researchers can add notes without having to learn the build system.
  • /scripts: Python scripts go here, which are used for preprocessing EpiSim results
  • /public: large .zip files, project notes, etc go in public. These files are pushed as-is by webpack; i.e. they are not packaged in any way

YAML Configuration

yaml file

  • viewerVersion (optional, number)
  • city (required, string)
  • info (required, string)
  • readme (required, string)
  • zipFolder (required, string)
  • timestamp (required, string)
  • offset (optional, number[])
  • startDate (optional, string)
  • endDate (optional, string)
  • defaultStartDate (optional, string)
  • startDates (optional, string[])
  • ignoredPlots (optional, string[])
  • graphStartDate (required, string)
  • heatMapMaxValue (optional, number)
  • rValueDate (optional, string)
  • optionGroups (required, optionGroups[])

optionGroups

  • day (optional, number)
  • heading (required, string)
  • subheading (optional, string)
  • measures (required, measures[])

measures

  • measure (required, string)
  • title (required, string)
  • order (optional, string)
  • options (optional, number[])
  • asPercent (optional, boolean)

Thank you!

Good luck and thanks for the help! -- Billy