GithubHelp home page GithubHelp logo

dlr-sc / esid Goto Github PK

View Code? Open in Web Editor NEW
15.0 4.0 3.0 8.19 MB

This is the repository to the ESID frontend for visualization of infectious disease propagation.

License: Apache License 2.0

JavaScript 0.25% HTML 0.13% SCSS 0.27% TypeScript 76.66% Dockerfile 0.33% Shell 0.20% Python 22.17%
pandemic pandemic-analysis pandemic-disease-tracker pandemic-preparedness pandemic-response visualization

esid's Introduction

ESID - Epidemiological Scenarios for Infectious Diseases

ESID is a visualization of infectious disease propagation developed at the German Aerospace Center (DLR). It allows displaying historical data, as well as analyzing simulation results of pandemics.

Table of Contents

Features

You can find a list of the latest changes in the changelog.

Developer Documentation

You can find the developer documentation for the front- and backend in the corresponding folders:

Contributing to ESID

Whenever you encounter a πŸͺ² bug or have πŸŽ‰ feature request, report this via Github issues.

We are happy to receive contributions to ESID in the form of pull requests via Github. Feel free to fork the repository, implement your changes and create a merge request to the develop branch. There is a forking guide available to get you started!

Branching Guidelines

The development of ESID follows a simplified version of git-flow: The main branch always contains stable code. New features and bug fixes are implemented in feature/* or fix/* branches and are merged to develop once they are finished. When a new milestone is reached, the content of develop will be merged to main and a tag is created.

Github Actions are used for continuous integration. All pull requests and pushes to main and develop are built automatically.

Git Commit Messages

Commits should start with a Capital letter and should be written in present tense (e.g. πŸŽ‰ Add cool new feature instead of πŸŽ‰ Added cool new feature). It's a great idea to start the commit message with an applicable emoji. This does not only look great but also makes you rethink what to add to a commit.

  • πŸŽ‰ :tada: when adding a cool new feature
  • πŸ”§ :wrench: when refactoring / improving a small piece of code
  • πŸ”¨ :hammer: when refactoring / improving large parts of the code
  • ✨ :sparkles: when formatting code
  • 🎨 :art: improving / adding assets like textures or images
  • πŸš€ :rocket: when improving performance
  • πŸ“ :memo: when writing docs
  • πŸͺ² :beetle: when fixing a bug
  • πŸ’š :green_heart: when fixing the CI build
  • βœ”οΈ :heavy_check_mark: when working on tests
  • πŸ”Ό :arrow_up_small: when adding / upgrading dependencies
  • πŸ”½ :arrow_down_small: when removing / downgrading dependencies
  • πŸ”€ :twisted_rightwards_arrows: when merging branches
  • πŸ”₯ :fire: when removing files
  • 🚚 :truck: when moving / renaming files or namespaces

A good way to enforce this on your side is to use a commit-hook. To do this, paste the following script into .git/hooks/commit-msg.

#!/bin/bash

# regex to validate in commit msg
commit_regex='(:(tada|wrench|hammer|sparkles|art|rocket|memo|beetle|green_heart|arrow_up_small|arrow_down_small|twisted_rightwards_arrows|fire|truck|heavy_check_mark):(.+))'
error_msg="Aborting commit. Your commit message is missing an emoji as described in the contributing guideline."

if ! grep -xqE "$commit_regex" "$1"; then
    echo "$error_msg" >&2
    exit 1
fi

And make sure that it is executable:

chmod +x .git/hooks/commit-msg

Forking ESID

This is pretty straight-forward. Just click the Fork button on the top right of this page. Then clone the forked repository, perform your changes, push to a feature branch and create a pull request to ESID's develop branch.

git clone [email protected]:<your user name>/ESID.git
cd ESID
git remote add upstream [email protected]:DLR-SC/ESID.git
git checkout develop

git checkout -b feature/your-new-feature
# or
git checkout -b fix/your-bugfix

# ... do and commit your changes!

git push origin feature/your-new-feature

When there were changes in ESID's develop branch, you will need to merge those to your fork before creating a pull request:

git fetch upstream
git merge upstream/develop

Then you can create a pull request on GitHub to ESID's develop branch.

Contributor Covenant Code of Conduct

Our Pledge

In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.

Our Standards

Examples of behavior that contributes to creating a positive environment include:

  • Using welcoming and inclusive language
  • Being respectful of differing viewpoints and experiences
  • Gracefully accepting constructive criticism
  • Focusing on what is best for the community
  • Showing empathy towards other community members

Examples of unacceptable behavior by participants include:

  • The use of sexualized language or imagery and unwelcome sexual attention or advances
  • Trolling, insulting/derogatory comments, and personal or political attacks
  • Public or private harassment
  • Publishing others' private information, such as a physical or electronic address, without explicit permission
  • Other conduct which could reasonably be considered inappropriate in a professional setting

Our Responsibilities

Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.

Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.

Scope

This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.

Enforcement

Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at [email protected]. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.

Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.

Attribution

This Code of Conduct is adapted from the Contributor Covenant, version 1.4, available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html

For answers to common questions about this code of conduct, see https://www.contributor-covenant.org/faq

Current Contributors

German Aerospace Center (DLR):

  • Martin KΓΌhn
  • Jonas Gilg
  • Luca Spataro
  • Moritz Zeumer
  • Pawandeep Kaur-Betz

Previous Contributors

German Aerospace Center (DLR):

  • Margrit Klitz
  • Kerem Balci
  • Selma Dahmani
  • Laurin Kerkloh

Hochschule fΓΌr Gestaltung SchwΓ€bisch GmΓΌnd (HfG):

  • Julien Stoll
  • Valerie Grappendorf

License

Copyright 2021-2023 German Aerospace Center (DLR)

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

esid's People

Contributors

annawendler avatar dependabot[bot] avatar hudaif747 avatar jonasgilg avatar kanakanajm avatar kerembalci111 avatar lorenzoserloni avatar luca-spataro avatar lucaspataro avatar mknaranja avatar nxxr avatar pawankaur avatar qacwnfq avatar selmadm avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

esid's Issues

Add Libraries

Add the following libraries:

  • React
  • Redux
  • Material UI
  • AmCharts
  • Jest

Accessibility

Since we are a public organisation we have to fulfil accessibility requirements. We need to create a strategy to meet the requirements. I would suggest we comply to the WCAG standards.

TODOs:

  • choose a standard
  • find out how to help developers meet these standards during development
  • automatically test for these standards using unit and integration tests
  • automatically test for these standards using CI
  • write appropriate developer documentation

Add README

  • Project Overview
  • Screenshots
  • How to build
  • How to contribute
  • Code of Conduct

Add CI

  • Automatic Tests
  • Code Coverage
  • Formatting Checker
  • Linting Checker

Select an OpenSource License

Select an open source license and add it to the project:

  • License selected
  • LICENSE.txt added
  • Additional steps?

amCharts animated theme created lag

am4core.useTheme(am4themes_animated) in the simulation chart seems to propagate to the district map in the sidebar leading to lag on the hover effect and tooltip.

Upgrade to amCharts 5

amCharts has a new major release. The API has changed quite significantly, but it has some major improvements, which are relevant for us:

  • New rendering pipeline which promises a significant performance improvement
  • Fast data processing
  • React support out of the box
  • Theming
  • Accessibility
  • Build with TypeScript

Related Issues

Add Template for Pull Requests

Add a template for PRs that enhances the software quality. It should contain:

  • Check Formatting
  • Check Best Practices
  • Check Tests and Coverage
  • Check Documentation

@lucaspataro do you have anything to add?

Select Project Template

The Project Template should set up the Project and ideally create a project including the libraries from issue #2.

It should also add Typescript support out of the box.

[Epic]: DistrictComparison

Related Issues


Tooltip

Improve tooltip with a lens highlighting the selected disctrict and show scenario p25, p50, and p75 of selected scenario (and real value)

  • Tooltip Example:
    LensMockup
    • Lens highlights selected District (might take up too much space)
    • Left gradient shows scenario's p50 (center dot), p25 and p75 (gradient start/end)
    • Right shows tooltip text
    • Border colored depending on selected scenario
    • selected District colored in current real value (?)

Scenario Comparison

Allow scenarios to be compared in the district map

  • display heatmap with relative difference between two scenarios or scenario and real value
  • reduce districts to a node map with colored nodes
    • colored with a heat legend based on the differece between scenarios
    • colored with both scenarios as gradients from p25 to p75
    • Node with borders colored according to scenario and real value in center:
      NodeMockup
    • Node without borders:
      NodeMockup_noBorder

Save the state in localstorage

[x] using redux-persist to save the state of the store to local storage
[ ] fix/figure out errors related to this (the heatlegend component breaks when loading state from localstorage)
[ ] think about breaking edgecases (backend data changed, or something like that)

make the design more responsive

  • create a responsive layout strategy for narrow viewports
  • implement strategy
    • changes do not break existing layout
    • frontend layout for narrow viewports shows no bugs or layout issues

Will probably fix issue #55

  • adjusting the box-sizing property to border-box to include borders and padding may alleviate the problems with the scrollbars showing up

Improve the heat legend layout

  • add customizable multi-color gradient for heat Legend
  • set heat legend to accept single color gradients as per the design documents
  • add editor for custom heat legends
    • Mockup Example:
      HeatLegendEditor

[Epic]: CompartmentFilters

Related Issues:


In the future, with models with many states of "infected" like "infected vaccinated" or "infected unvaccinated", aggregation of compartments should be possible to be visualized.

The idea is to create a visual editor to aggregate different compartments:
image.png

One idea is to do it similar to this feature in factorio, where you can chain "and" and "or" queries:
li36lr44bbb51.webp

The editor could be opened here:
image.png

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.