neherlab / covid19_scenarios Goto Github PK

The folder/file name "aux" is forbidden in windows.
Could you rename it?

Hi,
Thanks for developing this tool! We are trying to develop a tool that helps local/regional mitigation efforts within a country (Bolivia). Using your scripts would be quite useful by saving us tons of time in developing the model. We would then include idiosyncratic conditions, such as local hospital coverage, new cases emerging, etc. We expect this to support targeted interventions in very low capabilities environments. However, I have not been able to spot the piece of the script that contains the pure contagion/recovery/death modeling part (the backbone of the tool). Would you please be so kind to refer me to where I can find it? Sincerely appreciate it.
Thanks and best,
Rodrigo

Current bundle size is huge, ~10 MBytes before gzip

• investigate Home.js bundle size
• trim and tree-shake libraries
• add more code splitting

The bundle analyzer can be run with yarn alalyze or yarn alalyze:watch.

The results plot on mobile is squished in portrait mode.

Hi.
I am looking at the case_counts.json and was wondering where the data comes from since when aggregating on national level, it greatly deviates from other sources such as John Hopkins or swissinfo?
thanks in advance,
JC

The numbers for hospital beds of Swiss cantons were guessed on a pro-rata bases from national numbers. It would be great to have more accurate figures here:

https://github.com/neherlab/covid19_scenarios_data/blob/master/populationData.tsv#L33

Please edit this file while keeping tsv structure intact.

Browser (include version): Chrome 80
Operative System: Mac OS Catalina

The current behavior

On mobile, the y-axis text on the mitigation chart overlaps to the point where the chart is unreadable.

Iphone X Chrome:

The expected behavior

Text should be displayed to the user clearly

related:

#71

In order to perform refactoring and to add new features with more confidence, we need unit, integration and end-to-end tests for:

• algorithm parts. Seesrc/algorithms

• React parts - components and pages. See src/components and src/pages

• State management: redux reducers and sagas. See src/state

The infrastructure:

• jest and @testing-libraryare already set up. Unit and integration tests can be ran with yarn test or yarn test:watch

• cypressis planned for e2e tests

• We plan either Travis CI or CircleCI for continuous integration

Any help is appreciated!

This may include:

• debounce run() calls
• hide feature behind the checkbox, disabled by default

Issues:

• formik does not allow to subscribe to the form state changes. It requires submit to be called
• formik does not expose the form state. We currently grab the state in validation callback, which arguably, is a hack
• formik seem to be re-rendering the entire form on changing any field. This is a performance problem - In automatic mode editing fields is very uncomfortable. There are ways to workaround it, but I don't want to introduce any more workarounds.

Solutions:

• Replace formik with redux-form? It will require quite substantial changes, for example reimplementing the validation.

I posted a cry for help in the Formik's chat:
https://spectrum.chat/palmer/formik/retrieve-values-without-submit-re-rendering-covid-19-scientists-need-help~d595a68c-2090-4a16-8a21-6f0772ff48e7

The following gif shows how on changing one value the entire form including mitigation plot is being re-rendered:

Hi! Based on issues #71 and #13 me and @arieltonglet are assessing improvements to the general user experience. We're planning on altering text, button and help icon styles to improve readability and information hierarchy on both desktop and mobile.

Later on we intend to work on the charts, but it'd be best to open a separate issue for that.

"Severly ill" should be "Severely ill" in the "Cases through time" figure legend.

It would be great for people to link to custom configured scenarios via a dynamically generated URL. This would allow people to easily share their results.

Currently we only support Unix-based platforms and the dev configuration contains some Unix-isms that Windows cannot digest.

We want to support running the app on windows as well, to reach more contributors.

See also:

• #18 (comment)

Again thanks for the project. Yet another suggestion and by no means it is a priority. I've read from various sources that the exposed individuals, who have no symptoms, can also infect others. With what probability I don't know. Maybe this can be another reasonable parameter.

Thanks!

Maybe working and adding on data of people who works now for country with lockdown to simulate virus propagation diminution and how many time needed to stop?

I have good experience in React. How can I help ?
For eg: I cloned and made changes to the README.md, adding instructions to setup on windows

Browser (include version): NA
Operative System: Windows

Documentation

Run

This will run the application in development mode (with hot reloading):

on Mac / Linux

git clone https://github.com/neherlab/covid19_scenarios
cd covid19_scenarios/
cp .env.example .env
yarn install
yarn dev

on Windows

git clone https://github.com/neherlab/covid19_scenarios
cd covid19_scenarios/
ren .env.example .env
yarn install
yarn dev

I get this (@ https://neherlab.org/covid19/ ):

503 ERROR
The request could not be satisfied.
The Lambda function associated with the CloudFront distribution is invalid or doesn't have the required permissions. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner.
If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.
Generated by cloudfront (CloudFront)
Request ID: GAFG3HbuNjLQJ23ZM6YcuAtgC8tDCRKXNgHBW2TbsdIvn4HY7VSBvA==

To use Spanish regions as preset populations, we need their population sizes and some estimates of the number of cases they had on March 1st (today/200 is probably not too bad)

@mserranom, do you have those numbers?

They would need to go into the populationData.tsv in analogy to the Italian provinces:

https://github.com/neherlab/covid19_scenarios_data/blob/master/populationData.tsv#L76

Our current mobile experience is suboptimal.

Key defects:

• Situation is particularly bad with charts and plots, which is a central aspect of the application.
• Some of the elements are needlessly large, some are to small
• Scrolling is awkward
• Tapping "Run" button gives no clue that there is more content appeared below
• Calendar is cut-off

We currently use reactstrap as a frontend library with some Sass stylesheets and bootstrap utility classes sprinkled here and there. As a team of 3 people, we would not able to change that. But if we find knowledgeable contributor(s) in UI/UX space, then the transition to another styling solution will become more realistic, including the full revamp of the UI.

Our main focus is desktop, with 720p or 1080p screen at least, but having broken mobile experience hurts the outreach, because we mostly promote our project on social media (Twitter). People are coming from there on the phones first, and they are probably not very impressed and are less compelled to switch or return with a larger device.

Related issues:

• Improve desktop user experience: #13

Screencast of "iPhone X" simulation in Chrome:

Steps To Reproduce

1. Refresh the main page
2. Mouse-focus into one of the form fields, for example increment "Imports per day" number.
3. Without blurring (moving the cursor out of the form field), try to drag a black dot on the "Mitigation" plot

The current behavior

The "Mitigation" plot dot being dragged is not moving until mouse button is up

The expected behavior

The "Mitigation" plot dot being dragged is not moving as the cursor moves

Hypotheses

The blur event out of the field coincides with the initial click on the plot's dot. After the blur, the form rerenders and also causes the plot to rerenders.
Currently there is a hack. This .html(null) on every render clears the entire plot:

This also causes the destruction of the black dot we are dragging. The new dot will be rendered only on mouse up. Meanwhile we are dragging nothing.

Potential solution

We need to remove the hack shown above and to figure out proper dependencies for the `useEffect hook here:

such that the plot is properly cleared when it is needed, that it is responsive (to screen size) and not causing unnecessary rerenders at the same time

D3-React interop in this component should be properly audited for additional bugs and performance problems.

The link to the Chinese CDC data from which our severity data is broken.

Attempting to directly navigate to https://neherlab.org/covid19/about displays a page about a broken link.

A UZH colleague of mine, Barbora Trubenova, has spotted that the model results depend on the chosen time window. For example, with default parameter values, the default time span until 12th September 2020 predicts 484 cumulative deaths by 1st August 2020. Changing the time span to 15th May 2021 changes the prediction to 920 deaths by 1st August 2020. The same applies to all other predicted values (see screenshots below). For an intermediate date, the predictions are intermediate. Therefore, at best, the model can be valid only for one particular time span.

Thank you for this useful resource! Unfortunately it is rather difficult to work with in the web browser because of the rigid boxy layout. Labels, values, and column headers are truncated and/or difficult to read.

Please consider a more flexible web layout; perhaps moving the Results box to the bottom might help.

It would be really useful to support translations to other languages.

https://react.i18next.com/ is a reasonable option given the current tech stack

~18 month is the ETA of the vaccine. That seems like the most natural time range to simulate.

Commended for great work!

Wondering if you have a global data of this?

In some situations, it might be more convenient to specify the mitigation scenarios as time intervals:

--2020-03-01                    100%
2020-03-01 -- 2020-03-15         50%
2020-03-16 -- 2020-03-31         75%
2020-04-01 -- 2020-05-31         60%
2020-06-01 --                    50%

The data structure for this would work just about the same way as a time series of adjacent intervals, the main difference would be UI. Need to think about how to enforce that intervals tile time.

Increasing the Infectious Period results in a less severe scenario and vice versa. I assume this is a bug.

The second-last column, proportions/outcome, is not updated with the simulated values. E.g., Fatal is always at 0.81 percent, even when switching between "no mitigation" and "strong mitigation".

This may include:

• Improve readme, add more details on how to run the app in dev and prod mode, in docker or without
• Add Contributing guide
• Add Code of conduct
• Add Issue templates
• Add Pull request template

See also:

• https://opensource.guide/

We need to figure out at least the basic infrastructure:

• automated builds and deployment to production from release branch
• automated builds and deployment to staging from master branch
• automated builds and deployment of pull requests

TODO:

• create domain names for production and staging
• setup Travis or CircleCI, deploy on pushes

Thanks for your work to help the people in need! Your site has been added! I currently maintain the Open-Source-COVID-19 page, which collects all open source projects related to COVID-19, including maps, data, news, api, analysis, medical and supply information, etc. Please share to anyone who might need the information in the list, or will possibly contribute to some of those projects. You are also welcome to recommend more projects.

https://weileizeng.github.io/Open-Source-COVID-19/

Cheers!

We want to add an initial modal popup with a sort of a "user agreement" info, and consent

• non-liability disclaimer
• eventually, GDPR compliance info and consent
• eventually, local storage or cookies options, when we have those

Not sure if this is the right place to report but on https://neherlab.org/covid19/about the differential equation for dRa(t) / dt should end with (1 - ca) Ha(t) / th.

I'm a Node.js developer and I'd like to help, however, I'm not really proficient with React. If there is any non-React work that I could help with (either server-side or business logic isolated from React rendering), I would be most happy to contribute.

I believe you might have that on the roadmap since there is an option to export.
It would be great to name and compare scenarios with simple KPI.

Changing the window of time that one simulates and then choosing a different mitigation strategy forces the time window back to the default value.

The label "Annual average R₀" does not seem to be correct.
R₀ is defined as the number of infections per case. It's not annual.

Thanks for the model and the simulation. That's amazing.

Some explanation would be nice for non-research folks. For example, What's the meaning of Imports per Day? Thanks!

A minor issue: Peak hospitalisations should be given to the nearest integer (i.e. "Number of individuals") in the lower bar chart, in which the other variables are already rounded. I think you could do this by adding round() on line 40 of PlotAgeAndParams.tsx. Relatedly, agesFrac in the upper bar chart could be given to fewer significant figures.

We target to support browsers starting with Internet Explorer 10, and other browsers of the same era.

Currently Internet Explorer is broken, despite us transpiling the code and having many polyfills

Instant crash. Running on Chrome Version 80.0.3987.132 (Official Build) (64-bit Windows)

"Latency" & "Infection Period" in reality are not a single value but have pretty wide distribution what can impact the results significantly. Similar to Age distribution used for evaluation you can incorporate a simple histogram or function based distribution for both terms.

But great Job, congratulations

Currently we are looking for case counts data and other statistical information from different countries as well as for people who can maintain this data (add, curate, update).

The entire process should be automated as much as possible. The README in the directory covid19_scenarios/data contains some information on how to get started:

https://github.com/neherlab/covid19_scenarios/data

It also contains the preprocessed data ready for the consumption by the build system of the app.

If you think you may know where to find the relevant data for a country, please let us know either in this thread, or open an issue. If you are ready to contribute, feel free to open a pull request.

Don't hesitate to ask if you have any questions or if you need something to get started!

cc @nnoll @rneher

Please allow us to edit hospital beds and ICU beds.

I'm trying to get ventilated beds expanded in my institution in anticipation of an onslaught. Switzerland is doing well for ICM beds in comparison to my home country, we have far fewer. Being able to show our own nation's Total Hospital Beds and ICU beds overwhelmed under different scenarios would be useful for those of us who have to persuade the people with the dollars.

Thank you for your hard work.

Hopefully a legend "ICU beds" can be added. I guess it's important to compare ICU beds with critical?

For simplicity all age classes could be randomly assigned to an ICU bed. When bed space is exceeded, the fatality rate of remaining severe / critical cases should increase.

The number of ICU beds should also be editable. In Switzerland we have 1000 beds, total, not 40,000.

I just spoke with @colinmegill about what could be done to improve the performance of the visualizations.

Small wins:

Don't render any visualization that is not on the screen

There are a variety of ways to do this, IntersectionObserver is a solid tool for that, and it should be an easy win. It exists in every browser but IE. (I highly recommend ditching support for IE.. if we're talking about working on something that will help save lives, we shouldn't slow down progress for a browser that is dead in a year) If IE must be supported, then we'd gate the functionality on the existence of IntersectionObserver.

Bigger Wins

Render all "circles" in the tree view to Canvas overlay

• Use a transparent canvas to render, just the circles alone, they move on their own between views, there are a LOT of them, and Canvas can easily render these circles quickly and efficientely.
• For user interactions, you would use a transparent <div> overlay that intercepts all user interactions to check to see if the mousemove or click, etc events are "over" one of the circles. This can be done via simple and efficient coordinate lookup with a library called RBush.
• The brush overlay would be another layer, so as to prevent the re-rendering of the circles underneath during brushing, helping performance.

Render all circles in the map view as a Leaflet canvas overlay

There are a number of examples around of how to do this. The first one I found was here. The same general idea as above. It might be that you want to do more than one overlay. one fo the circles, and one for the bezier arcs, so as you're brushing the number of updates required are minimal.

Other thoughts

It's going to become important to abstract the location/positioning data away from any component they may currently be residing in now. This is so it can be reused effectively by newer code as you transition from SVG to Canvas. The upside is that the coordinate system between 2d canvas and SVG is basically the same, X,Y coords originating from the top left.

It's also worth mentioning that the calculations are very unlikely to be the bottleneck to good performance here. So it's probably best not to waste too much effort on those. Computers are pretty fast at dealing with sets of numbers and calculations, even in JavaScript. At the moment that does become an issue we can address it.. move it to a worker, WASM, etc. But for now, the biggest choke point is the DOM rendering.

Actions to be taken

• analyze the positioning algorithms used, and try to abstract them away from any rendering logic
• Attempt to implement a canvas layer for the tree circles
  • Render the circles to canvas
  • Create position indexing with RBush
  • Add transparent div to handle user events like hovers and clicks
  • Have transparent div handle scrolling and update the canvas rendering and position index (rbush)
• Attempt to implement the map overlays
  • Create a map overlay for pie charts
    • Create a drawing function for drawing a pie chart with Canvas context
    • Add the Leaflet canvas layer and render the pie charts
  • Create a map overlay for the "circles" for the connected circles visualization
  • Create a map overlay for the brush-animated arcs, and wire it up to update on brush selection
• Look into the easy win of not rendering visualizations that are off-screen.
  • Create a component that will render a different set of children if it is some specified percentage offscreen, something like: <OffscreenChecker percent={80}>{(isOffscreen) => isOffscreen ? <div className="greyplaceholder"></div> : <ActualComponent/></OffscreenChecker>... There may even be existing components that can do this.