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.
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
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.
One line fetches everything from the npm database:
yarn install
This command runs a local server with hot reload for testing, usually listens on http://localhost:8080
yarn serve
yarn build
Well... I have not written tests but the infrastructure is there to use jest.
yarn test:unit
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
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.
/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/runsfolder.- 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.vueand to the homepage. - Each run should use a
readme.mdfile under/src/assetsso that researchers can add notes without having to learn the build system.
- Connect up your new pages by adding a new folder here, and also adding a new URL to
/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
- 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[])
- day (optional, number)
- heading (required, string)
- subheading (optional, string)
- measures (required, measures[])
- measure (required, string)
- title (required, string)
- order (optional, string)
- options (optional, number[])
- asPercent (optional, boolean)
Good luck and thanks for the help! -- Billy