This repo contains the visualization website for MATSim/EpiSim, available at https://matsim-vsp.github.io/covid-sim. 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
/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
Good luck and thanks for the help! -- Billy