mrspiffyclean / covidtrends Goto Github PK

It works, but I wouldn't want a hanging error in the finished build.

TypeError: "this.$refs.graph.querySelector(...).querySelector(...).querySelector(...) is null"
    calculateAngle http://localhost:8000/covidtrends-hide-doubling-time_v1/vue-definitions.js?7:85
    handler http://localhost:8000/covidtrends-hide-doubling-time_v1/vue-definitions.js?7:133
    VueJS 4

As of now, the code only does the World, as I haven't yet done the work for the subregions and JHU doesn't supply the ISO codes for them.

There seems to be a (rare) issue in load, which is that the program thinks there are no countries to load, which I think is because of a race condition between what file processes first. Investigating async locks could solve this.

I need to understand and reorganize the rename logic, as the URL creation and its recognition by the engine is getting entangled a bit.

• Do subregion code
• Either use https://github.com/olahol/iso-3166-2.js/blob/master/data.csv or
• "Hardcode" the existing regions (as a way to save data)
• Check/solve the race condition
• Reorganize the code for legacy issues

Searching in google (https://www.google.com/search?q=facebook+link+truncating) lead me to some results suggesting lack of encoding as the reason. Here are the first results:

• https://stackoverflow.com/questions/14108377/how-do-i-stop-facebook-sharer-php-from-ignoring-numbers-from-the-target-url
• https://stackoverflow.com/questions/14118184/url-get-truncated-while-posting-in-facebook
• https://stackoverflow.com/questions/27354741/facebook-share-ignores-custom-query-string-parameters
• https://stackoverflow.com/questions/40383510/android-stetho-google-developer-tools-resources-truncated
• https://stackoverflow.com/questions/14108377/how-do-i-stop-facebook-sharer-php-from-ignoring-numbers-from-the-target-url

RFC 39... something something is the reference for URL parsing / encoding, using + isn't good, as that is usually encoded as a space, a comma should work, though I don't remember a lot of sites using it.
Need to know what sorts of addresses break Facebook, such that we can understand the root cause.

steps to fix.

1. encapsulate top of countries (i.e. search bar, buttons) in a div
2. give position sticky and top to said div
3. check for issues
4. optional, give return to start labels to parameters and countries title

Loading a new Region also makes a call to pullData, which means a call to external resources, which might make stuff slower to respond. Storing the CSV once and then using it might be better performance wise. I don't know if there is caching being used, but it would be easy to check using the Network Analyzer. The csvs' are I assume cached (as well as everything else).

As the title says. Easy to reproduce, seems to reference onLayoutChange and updateGraph.

Steps to reproduce (Firefox):

1. Press Alt, then View, Zoom, Apply to text only.
2. Zoom in/out

The Graph text remains unchanged, while everything else changes. The Graph also doesn't scale to the overall new position.
The Tooltips when hovering the graph however are changed, being huge.

After some review, the only 'object' that doesn't trigger a recount/relist of all selected countries is the 'Select Region' selectbox. This is because whenever it changes, it reverts to the 'default' selection (i.e. notable countries/locations, the 10 with most cases).
With this being said, then the whole naming scheme I had in the start of the branch becomes mute, as both select and checkboxes trigger the relist.

The idea is then as follows:

• Rename createURLFromSelect to createURLFromRegion, and have the region selectbox the only one calling this.
• Everything else calls a... createURLFromChange (renaming the previous createURLFromCheckbox)
• checkbox function parameter changed to change. The biggest issue here is communicating what exactly change is, because changing a region is also change of sorts... For the time being, I don't see a good name.

Basic to-do list, in order to document remaining changes.

• Change changeURL in order to detect whether defaults have been set
• Deal with Select All / Deselect All buttons (first idea is having just a new URL parameter with select=all/none)
• Investigate weird performance issue (seems slower now than just calling changeURL without arguments) with how I'm now calling changeURL

2020-05-07

• Changing Region after selecting all doesn't update correctly the URL (the url still thinks everything is selected, even though it is not)
• Making Vue.js recognize the new select parameter

Steps to reproduce:

1. Select Canada
2. Select Reported Deaths
3. Press Select All
4. Select Confirmed Cases

What should be the result:

• URL bar should only say ?region=Canada, and the countries should be all of them (as there are only 9, so they autoselect)

What happens:

• URL bar stays at ?region=Canada&select=all but the countries are just the 4 that have reported deaths.

Not sure if this is intended or not, but pressing the Show Label button doesn't change the URL. Now, there wasn't anything before I started working on the code that suggested that it would do anything to the URL, and the Vue.js app initialization doesn't seem to have anything related to it.

I can see how it is good that Labels are always on at start, because that can reduce confusion and it would be harder to mislead someone. It is something to point out on the pull request.

The URL bar only updates if I decheck and recheck the button for showing the line.
This is due to how the if clause is written on createURL.
I might need to check the app initialization, as the code seems similar.