Upgrade EpiVis dashboard #36

rzats · 2024-02-28T17:04:54Z

Summary of changes:

prevents tutorial "tour" from automatically reappearing after first visit
replaces default signal with a live FluView example instead of a static wave
adds "autozoom" functionality to keep entirety of signals within the canvas view
inverts colors of "active" toggle buttons for visibility
increments "minor" version number (2.0.x-->2.1.x)

Fixes:

melange396

Do you have a preview instance/installation for this branch somewhere?

I think we need make the automatic fitData() calls a toggle-able option, perhaps its own "mode" (joining the three existing modes already available in the top menu). For instance, if a user is looking at a number of signals in a particular time window, and they turn some off and on to get a better look at the other signals, they will lose the specific view they had.

One way to handle this would be that we could switch to "auto-fit mode" when adding a new signal to the canvas (but not when simply toggling an existing signal). While in "auto-fit mode", clicking the mouse inside the view canvas or using the scroll wheel should switch to "pan mode". It might be nice to be able to opt out of "auto-fit mode" when adding new signals, which could be done with a checkbox in the signal load dialog.

src/components/Chart.svelte

src/tour.ts

rzats · 2024-03-20T17:28:54Z

Notes from the meeting:

Reword the comment about include/exclude to make sure it refers specifically to the dataset variable
Add a button to disable the new autofitting (but it's enabled by default)

rzats · 2024-03-27T14:28:54Z

@melange396 updated this PR as well!

dshemetov

Some notes:

https://cmu-delphi.atlassian.net/browse/OKRS24-62 looks done, the tour doesn't show up every time and now there's a button to show it later
- However the 'h' hotkey doesn't bring up the help tour (other keyboard commands work for me)
When I click import datasets from API and I select FluView, the app hangs indefinitely, which didn't happen before. Something about the way the initial dataset is loaded might be off?
https://cmu-delphi.atlassian.net/browse/OKRS24-61 the sample signals is removed, but I'm not sure what "match defaults with COVIDcast dashboard" means; do we want FluView to be the default? if so, this is done, if not, then we should decide what to display
https://cmu-delphi.atlassian.net/browse/OKRS24-63 zoom to signals seems to work well, I've tried importing a number of signals and sources, turning them on and off works quite seamlessly
I see the EpiVis sample is still in the menu, though deactivated. We should probably remove this completely, seems unnecessary and distracting.
I would choose a different icon than a gear for the autofit functionality. Gear made me think it was a "general settings" button. Maybe something more like this or like this?

src/tour.ts

rzats · 2024-05-22T14:25:05Z

@dshemetov this is ready for a re-review! A couple of notes:

the 'h' hotkey doesn't bring up the help tour

Fixed!

When I click import datasets from API and I select FluView, the app hangs indefinitely, which didn't happen before. Something about the way the initial dataset is loaded might be off?

This would happen before if you were to try loading the same dataset twice. I added an extra check for that.

I'm not sure what "match defaults with COVIDcast dashboard" means; do we want FluView to be the default? if so, this is done, if not, then we should decide what to display

IMO this is done, but I can set the default to something else as well.

I see the EpiVis sample is still in the menu, though deactivated. We should probably remove this completely, seems unnecessary and distracting.

Done!

I would choose a different icon than a gear for the autofit functionality. Gear made me think it was a "general settings" button. Maybe something more like this or like this?

Done, went for the up-down icon.

dshemetov

My previous concerns have been addressed, thanks!

If we want to be strict with the first JIRA ticket:

"match defaults with COVIDcast dashboard" - the default signal for COVIDcast dashboard is COVID Hospitalizations, so that would be better
- a subissue here is that I can't seem to select US National when using the COVID Hospitalization dataset; is this a bug or an api limitation or something else?
- this issue might be moot, since COVID Hospitalizations is out of date and we should use a different signal as default on the dashboard anyway
I'm getting very strange behavior with automatic resizing when adding the COVID Hospitalizations as a dataset; when the dropdown for the COVID Hosp signals is closed, the sizing is right, but when the dropdown is open, the sizing gets distorted, the plot stretches down (see the images below). It's like it considers the bottom of the scrollbar on the left to be the bottom of the viewport on the right?

rzats · 2024-05-31T12:46:08Z

@dshemetov

a subissue here is that I can't seem to select US National when using the COVID Hospitalization dataset; is this a bug or an api limitation or something else?

It is indeed an API limitation! That dataset works on the state level only. It seems to be a subset of the overall HHS dataset, which does offer more geo resolutions.

very strange behavior with automatic resizing when adding the COVID Hospitalizations as a dataset

This seems to be a CSS issue: if too many datasets are added to the left sidebar, it overflows offscreen. I've fixed this with the latest commit!

melange396

This looks great, but there are things id like to look at before we merge.

I made a number of suggestions for verbiage on the "tour", a few readability suggestions, and one for inverting the color on toggled buttons.
I see what youre doing with the include and exclude arguments to Chart.svelte:fitData(), but something tells me those shouldnt be necessary... I thought i figured out some ways around it and put them into #41, but now i cant get that to generate a Netlify preview to test. Do you know what i am missing? Do you think that approach has merit?
This current implementation doesnt do the automatic "fit" operation on page load when a signal is specified in the base64-encoded url (such as this one; it requires a post-load press of the "fit data to screen" button before the signal is visible). I think my exploration in #41 might address this (or open a easier avenue to accomplish it), but as i said, its not currently rendering a preview.
obviously not a result of the changes in this PR, but worth mentioning: there is a typo which alters the tooltip behavior for one of the buttons, please s/tootlip/tooltip/ on

www-epivis/src/components/TopMenu.svelte

Line 134 in d48e3b0

uk-tootlip

And then there are some things that dont need to be in this PR, but i will make separate issues for them:

support time_type:week (aka EpiWeek format time values) for covidcast signals (first priority is to support them in signals encoded in url param, then to support them in the signal picker) -- see

www-epivis/src/api/EpiData.ts

Lines 181 to 182 in 6e310a1

time_type: 'day',

time_values: epiRange(firstDate.covidcast, currentDate),
turn autofit into a mode, as mentioned in #36 (review)

src/tour.ts

melange396 · 2024-07-17T16:38:00Z

src/components/tree/TreeInnerNode.svelte

@@ -28,7 +30,7 @@
  {#if expanded}
    {#each node.datasets as child (child.title)}
      {#if child instanceof DataSet}
-        <TreeLeafNode node={child} />
+        <TreeLeafNode {chart} node={child} />


plz name attribute/arg for clarity

Suggested change

<TreeLeafNode {chart} node={child} />

<TreeLeafNode chart={chart} node={child} />

The Svelte linter actually reverts this change when I try to apply it :) I could disable this in the config, but shorthand attributes like this show up a lot in the code base, e.g. a couple lines before:

<side class="left" {style} data-tour="browser"> ^^^^^^^

and elsewhere:

<select class="uk-select" required {name} {id} bind:value> ^^^^^^ ^^^^

So I think it might be fairly clear what's going on with these.

i dont love it, but if thats the preferred style in Svelte, we might as well go with it.

src/components/LeftMenu.svelte

src/components/TopMenu.svelte

src/api/EpiData.ts

src/components/Chart.svelte

This reverts commit 9314d2c.

…nstead of 'datasets' argument (#41) * revert Chart.svelte * remove 'datasets' argument from Chart component, replace with reactive reference to 'activeDatasets' store * revert chart.fitData() calls in TreeLeafNode component * Force reactive updates --------- Co-authored-by: Rostyslav Zatserkovnyi <[email protected]>

rzats · 2024-07-18T17:08:45Z

@melange396 applied all of your suggestions except a particular codestyle one!

include and exclude arguments in Chart.svelte:fitData()

These are removed in #41...

no automatic "fit" when a signal is specified in the base64-encoded URL

...and I doublechecked that this is now working as well.

melange396

a few boolean comparison nits, but otherwise this looks fantastic and i think its ready to go!

melange396 · 2024-07-29T18:42:19Z

src/components/tree/TreeInnerNode.svelte

@@ -28,7 +30,7 @@
  {#if expanded}
    {#each node.datasets as child (child.title)}
      {#if child instanceof DataSet}
-        <TreeLeafNode node={child} />
+        <TreeLeafNode {chart} node={child} />


i dont love it, but if thats the preferred style in Svelte, we might as well go with it.

src/components/tree/TreeLeafNode.svelte

src/components/TopMenu.svelte

melange396 · 2024-07-29T19:11:16Z

You should probably also bump the version number for this:

www-epivis/package.json

Line 3 in 6e310a1

"version": "2.0.3",

rzats · 2024-07-30T13:16:04Z

@melange396 applied the changes!

melange396

nice!

addressed

rzats added 5 commits February 28, 2024 00:27

Dismiss tour once cancelled or completed

1d5df9c

Set default as FluView

ec3bfdb

Make sure signals never appear offscreen

35616b4

fix null issues

2affbc7

Comment

cce8598

rlunde requested a review from melange396 March 1, 2024 17:25

melange396 requested changes Mar 19, 2024

View reviewed changes

src/components/Chart.svelte Outdated Show resolved Hide resolved

src/tour.ts Show resolved Hide resolved

Update tour & autofitting

b03faab

rzats requested a review from melange396 March 27, 2024 14:28

Make sure shared datasets are displayed in sidebar

9358b84

dshemetov requested changes May 16, 2024

View reviewed changes

src/tour.ts Show resolved Hide resolved

Dmitry review

640b4cc

Svelte tour

7fd07f8

rzats requested a review from dshemetov May 22, 2024 14:26

dshemetov previously requested changes May 30, 2024

View reviewed changes

Prevent left panel going offscreen

d48e3b0

rzats requested a review from dshemetov May 31, 2024 12:46

melange396 requested changes Jul 18, 2024

View reviewed changes

melange396 mentioned this pull request Jul 18, 2024

allow custom naming and/or recreate full dropdown for url-provided signals #42

Open

rzats and others added 5 commits July 18, 2024 17:20

Try deploy preview for #41

9314d2c

Revert "Try deploy preview for #41"

111a19e

This reverts commit 9314d2c.

Review fixes

9bdb378

Button classes

5f500ed

rzats requested a review from melange396 July 18, 2024 17:08

melange396 requested changes Jul 29, 2024

View reviewed changes

melange396 mentioned this pull request Jul 29, 2024

Make "autofit" a proper mode #44

Closed

Fix booleans, release 2.1.0

ffb46a5

rzats requested a review from melange396 July 30, 2024 13:15

melange396 approved these changes Jul 30, 2024

View reviewed changes

melange396 merged commit 422769a into dev Jul 30, 2024
6 checks passed

melange396 deleted the rzatserkovnyi/epivis-upgrade branch July 30, 2024 13:50

This was referenced Jul 31, 2024

Release v2.1.1 (attempt 1) #48

Merged

update to EPIVis v2.1.2 cmu-delphi/www-main#1003

Merged

rzats mentioned this pull request Aug 7, 2024

Improve top panel elements & autofit mode #54

Merged

	time_type: 'day',
	time_values: epiRange(firstDate.covidcast, currentDate),

	<TreeLeafNode {chart} node={child} />
	<TreeLeafNode chart={chart} node={child} />

Upgrade EpiVis dashboard #36

Upgrade EpiVis dashboard #36

Uh oh!

Conversation

rzats commented Feb 28, 2024 • edited by melange396 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

melange396 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

rzats commented Mar 20, 2024

Uh oh!

rzats commented Mar 27, 2024

Uh oh!

dshemetov left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rzats commented May 22, 2024

Uh oh!

dshemetov left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rzats commented May 31, 2024

Uh oh!

melange396 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

melange396 Jul 17, 2024

Choose a reason for hiding this comment

Uh oh!

rzats Jul 18, 2024

Choose a reason for hiding this comment

Uh oh!

melange396 Jul 29, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

rzats commented Jul 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

melange396 left a comment

Choose a reason for hiding this comment

Uh oh!

melange396 Jul 29, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

melange396 commented Jul 29, 2024

Uh oh!

rzats commented Jul 30, 2024

Uh oh!

melange396 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

rzats commented Feb 28, 2024 •

edited by melange396

Loading

dshemetov left a comment •

edited

Loading

dshemetov left a comment •

edited

Loading

rzats commented Jul 18, 2024 •

edited

Loading