Proposal for graphics-centric minimized time slider #505

bobular · 2023-09-15T14:02:18Z

Fixes #514

This is a draft until we get UX approval.

I went further than anticipated and did the following

changed the background to match the header - though I see there's a hardcoded === 'VectorBase' that I copied - do we not have a VectorBase theme? @asizemore was asking about this the other day
changed the layout
- variable name picker is the axis label in expanded mode
- no more text to show the selected range, removed "choose a different date variable:"
- timeline is slimmer when minimized
hiding behaviour is now fully manual
z-index changes
- header (including EZ slider) is now only at level 2 - this allows draggable panels to be placed over the header (and EZ-slider). Before, it was possible to lose the handle of the draggable under the header or EZ slider.
- left hand menu is at 10 - it is now not possible to cover the menu expand handle with a draggable.

Still do to

z-axis issues w.r.t. floaters (may wait until after refactor merge)
when switched off, the x-axis label is not greyed out.
rename components
remove subset-sensitivity of the timeslider x-axis (the black bars will still be subset-sensitive of course)
comment out fake controlled behaviour and investigate any "drift" that might occur from saved analyses (hopefully not)
add ticket for figuring out extending "little filters" throughout the app, e.g. the little filter from the marker variable config to the timeslider and floating viz.

bobular · 2023-09-15T14:19:27Z

Video on Slack https://epvb.slack.com/archives/CMQ8K9XRS/p1694787354770699

If you look carefully, there's a bit of a clash of drop shadows (in the join between header and the slider) - not sure how to fix that.

…ical

bobular · 2023-10-06T15:22:33Z

Ready for review. Open to styling/layout suggestions as always!

jernestmyers

I think this is looking good, but I have some questions/comments that come to mind that may serve as a start to a future UX discussion.

Should we have an info icon w/ tooltip as part of the on/off toggle that articulates what the actual component is doing? Or does this icon w/ tooltip need to be in a position that would render in the "unexpanded" state?
Because I'm clearly seeing something in the "unexpanded" state that first renders, my brain sort of overlooks the toggle as a way to expand the filter. Instead, my brain sees that toggle as a way to collapse the filter in spite of the arrow down (which should suggest to me that it expands). Perhaps the cognitive dissonance is specific to my feeble brain, though!
Nothing comes to mind as a fix for the drop shadow clashing, though it's not that severe either.

…-filters

bobular · 2023-10-06T18:43:04Z

Thanks @jernestmyers - I think we need a small group to figure out the UX issues. Maybe unexpanded is still showing too much?

…estion1 Timeslider help icon and further slimming

…ical

bobular · 2023-10-18T14:39:39Z

I merged the filter-sensitivity into this PR.

Then I found an edge case where if you make a selection in the time slider and then change the filters so that the old selection is outside the time range of the current filtered data, that selection lives "off screen" and is still applied as a little filter, giving no results and a 500 (see VEuPathDB/EdaDataService#312)

I thought it would be better to remove the selection/little filter if it has gone off-screen, so added this in the recent commit.

It uses a useEffect however, so would appreciate @dmfalke giving it the once-over.

dmfalke · 2023-10-18T16:39:23Z

I merged the filter-sensitivity into this PR.

Then I found an edge case where if you make a selection in the time slider and then change the filters so that the old selection is outside the time range of the current filtered data, that selection lives "off screen" and is still applied as a little filter, giving no results and a 500 (see VEuPathDB/EdaDataService#312)

I thought it would be better to remove the selection/little filter if it has gone off-screen, so added this in the recent commit.

It uses a useEffect however, so would appreciate @dmfalke giving it the once-over.

I'm not sure I like the UX here, since it might not be obvious that the time filter was removed. Instead, could we extend the range of the filter to include the selection? Or maybe we should always show the full range (at least for this phase)?

bobular · 2023-10-18T17:49:42Z

Yes, this is a good point. I was wondering about a snackbar.

But extending the range to include the selection might be good - hadn't thought of that!

dmfalke · 2023-10-19T16:30:37Z

One other idea... we can turn the slider off and have a message indicating that it contains a selection outside of the subset, and that the user must change the selection to enable it again (or something like that).

bobular · 2023-10-19T17:12:21Z

Thanks @dmfalke - I have been working on this today and will have something available for testing soon.

I got into a bit of a rabbit hole with semantic zooming and making sure the histogram is robustly showing the correct bin start/ends etc. Nearly done!

bobular · 2023-10-23T10:21:28Z

Hi all - @jernestmyers @dmfalke @moontrip @chowington

On Friday I did some major readjustments:

The "key hack" to make the visx Brush behave like a controlled component wasn't actually working. When I fixed it, it introduced a secondary bug where the brush selection drifted wider with each handle adjustment. I made a very hacky fix (see the +2/-2 discussion). I don't think reverting to uncontrolled behaviour is a great idea (I'm pretty sure the drifting would still happen upon every fresh render of the object (e.g. when opening a saved analysis)).
The timeslider visualisation only deals in binStart coordinates. It renders the final bin with a width of zero. Selecting/brushing the entire timeslider was NOT applying a little filter for the whole time range because the right-most date was the binStart of the final bin, not the bin end. Therefore in this line an extra "bin" is added as input to the slider component.
The filter-aware (big filters directly on the date variable) behaviour needed to also set the bin width resolution (year/month/week/day).
The black bars drawn on the timeslider needed to be different widths in February vs August (for example) - fixed
The "auto zoom" (filter and subset sensitive at the moment) behaviour also takes into account the user's pink selection. This means that the selection doesn't go off-screen while still active.
Structured, and hopefully improved, the tooltip text

bobular

Thanks to @dmfalke and @jernestmyers for the sync review. Notes below

bobular · 2023-11-02T15:23:17Z

packages/libs/components/src/components/plotControls/EzTimeFilter.tsx

Call it TimeSlider.tsx?

bobular · 2023-11-02T15:37:10Z

packages/libs/components/src/components/plotControls/EzTimeFilter.tsx

@@ -143,23 +149,28 @@ function EzTimeFilter(props: EzTimeFilterProps) {
    () =>
      selectedRange != null
        ? {
-            start: { x: xBrushScale(new Date(selectedRange.start)) },
-            end: { x: xBrushScale(new Date(selectedRange.end)) },
+            // The +2 and -2 are a nasty hack that seems to solve a problem


Suggestion to remove fake controlled behaviour - bring it back only when we need to (date picker inputs)

Investigate need for adjustment +2/-2 when loading saved analysis - check for no "drift" at either end of range after adjusting the other... - remove it if not needed.

bobular · 2023-11-02T15:55:36Z

packages/libs/eda/src/lib/map/analysis/EZTimeFilter.tsx

Maybe don't let the range be subset sensitive

Also take care of non-date number handling

…ved Number support

bobular · 2023-11-05T00:24:46Z

I removed the "controlled" nature of the Brush.

If you duplicate a browser tab with a pink date range, it will shift to the left a bit, but the underlying little filter does not change. I think this OK.

bobular · 2023-11-07T00:20:08Z

This is ready for final review. Feedback from our meeting has been taken on board and sorted, thanks! :-) @dmfalke @jernestmyers

bobular · 2023-11-07T00:37:33Z

packages/libs/components/src/components/plotControls/TimeSlider.tsx

+          end: xAxisRange
+            ? endDate > xAxisRange.end
+              ? xAxisRange.end
+              : endDate


Just spotted I need to fix up the dependencies below. Will do so.

Done ✔️

bobular · 2023-11-07T11:08:40Z

With react-query's client-side caching we are a step closer to DIY timeline animations.
To demo this, expand the tab, make a time selection and toggle it on and off.

If we add the ⬅️ and ➡️ buttons that move the selection left/right, that will eventually all get cached.

However, such controls will need re-enabling the fake controlled component behaviour.

jernestmyers · 2023-11-07T18:12:45Z

If I have no filters and select the entire time slider, should my View count not also match the All and Filtered counts?

dmfalke

This seems good to me

dmfalke · 2023-11-07T18:42:49Z

packages/libs/eda/src/lib/core/hooks/workspace.ts

+                              new Date(filterRange.max as string),
+                              unit as DateMath.Unit
+                            );
+                            return diff >= 12;


How did you arrive at 12?

I left home at about 11:30 !

But it was more "if there are more than 12 days, use weeks. If there are more than 12 weeks, use months, and so on."

Maybe it's too small. If there are 13 months, do we really want year bins? Perhaps 30 would be better.

Yeah, I'll go with 30. And leave a comment.

dmfalke · 2023-11-07T18:46:07Z

If I have no filters and select the entire time slider, should my View count not also match the All and Filtered counts?

Could this be explained by only a subset of markers having data for the time filter variable?

bobular · 2023-11-08T14:16:08Z

Could this be explained by only a subset of markers having data for the time filter variable?

Yes, and/or lat/long and/or the marker variable (though species has 100% coverage - a rarity)

…ical

bobular added 2 commits September 15, 2023 14:42

made more changes than I anticipated...

a12e5a9

get background colors properly

3f3b378

bobular added 4 commits September 15, 2023 20:19

added filter sensitivity to timeslider

952d591

manual open and close - fix layouts a bit

4addd3a

grey out axis label when inactive

03e88d7

sorted out z-index issues

dbb861f

bobular marked this pull request as ready for review October 6, 2023 15:17

Merge remote-tracking branch 'origin/main' into timeslider-mini-graph…

d60bc9c

…ical

bobular requested a review from jernestmyers October 6, 2023 15:21

bobular assigned moontrip Oct 6, 2023

bobular assigned chowington Oct 6, 2023

jernestmyers reviewed Oct 6, 2023

View reviewed changes

bobular added 2 commits October 6, 2023 19:29

Merge remote-tracking branch 'origin/main' into timeslider-honour-big…

981f21f

…-filters

tidy up comments

5ed753e

bobular added 2 commits October 9, 2023 14:33

shrunk even more

8673a94

added help icon and preliminary text

55a0c05

jernestmyers self-requested a review October 12, 2023 19:46

jernestmyers approved these changes Oct 12, 2023

View reviewed changes

bobular added 5 commits October 18, 2023 11:14

Merge pull request #542 from VEuPathDB/timeslider-mini-graphical-sugg…

9c752c1

…estion1 Timeslider help icon and further slimming

Merge remote-tracking branch 'origin/main' into timeslider-mini-graph…

19d5087

…ical

fixed merge

e27c56b

improved tooltip text

702f423

add edge case handling

9b7e137

bobular requested a review from dmfalke October 18, 2023 14:36

bobular added 2 commits October 19, 2023 23:01

WIP

a637a4c

mostly fixed behaviours

90a9906

bobular added 3 commits October 25, 2023 17:18

Merge branch 'main' into timeslider-mini-graphical

896f64b

comment about number var support

5560104

merge conflict resolved - main world seems broken

c8a0752

bobular requested a review from jernestmyers November 1, 2023 13:45

bobular commented Nov 2, 2023

View reviewed changes

bobular added 4 commits November 4, 2023 21:23

renamed EzTimeFilter to TimeSlider in components only

2d7999c

TimeSliderQuickFilter rename on EDA side

fe6e7fb

remove fake controlled behaviour and subset sensitive range

9faf455

fixed the unwanted data requests by changing the range handling; remo…

e480f36

…ved Number support

bobular commented Nov 7, 2023

View reviewed changes

fix dependencies

9e46306

dmfalke approved these changes Nov 7, 2023

View reviewed changes

bobular added 3 commits November 9, 2023 14:58

Merge remote-tracking branch 'origin/main' into timeslider-mini-graph…

921d9fd

…ical

change date bin units threshold

374a356

change date bin units threshold back

c38eb9c

bobular merged commit 5c2a920 into main Nov 9, 2023
1 check passed

bobular deleted the timeslider-mini-graphical branch November 9, 2023 16:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Proposal for graphics-centric minimized time slider #505

Proposal for graphics-centric minimized time slider #505

bobular commented Sep 15, 2023 •

edited

Loading

bobular commented Sep 15, 2023

bobular commented Oct 6, 2023

jernestmyers left a comment

bobular commented Oct 6, 2023

bobular commented Oct 18, 2023 •

edited

Loading

dmfalke commented Oct 18, 2023 •

edited

Loading

bobular commented Oct 18, 2023

dmfalke commented Oct 19, 2023

bobular commented Oct 19, 2023

bobular commented Oct 23, 2023

bobular left a comment •

edited

Loading

bobular Nov 2, 2023

bobular Nov 2, 2023

bobular Nov 2, 2023

bobular Nov 2, 2023

bobular commented Nov 5, 2023

bobular commented Nov 7, 2023

bobular Nov 7, 2023

bobular Nov 7, 2023

bobular commented Nov 7, 2023

jernestmyers commented Nov 7, 2023

dmfalke left a comment

dmfalke Nov 7, 2023

bobular Nov 8, 2023

bobular Nov 8, 2023

bobular Nov 8, 2023

dmfalke commented Nov 7, 2023

bobular commented Nov 8, 2023 •

edited

Loading

Proposal for graphics-centric minimized time slider #505

Proposal for graphics-centric minimized time slider #505

Conversation

bobular commented Sep 15, 2023 • edited Loading

bobular commented Sep 15, 2023

bobular commented Oct 6, 2023

jernestmyers left a comment

Choose a reason for hiding this comment

bobular commented Oct 6, 2023

bobular commented Oct 18, 2023 • edited Loading

dmfalke commented Oct 18, 2023 • edited Loading

bobular commented Oct 18, 2023

dmfalke commented Oct 19, 2023

bobular commented Oct 19, 2023

bobular commented Oct 23, 2023

bobular left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bobular commented Nov 5, 2023

bobular commented Nov 7, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bobular commented Nov 7, 2023

jernestmyers commented Nov 7, 2023

dmfalke left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dmfalke commented Nov 7, 2023

bobular commented Nov 8, 2023 • edited Loading

bobular commented Sep 15, 2023 •

edited

Loading

bobular commented Oct 18, 2023 •

edited

Loading

dmfalke commented Oct 18, 2023 •

edited

Loading

bobular left a comment •

edited

Loading

bobular commented Nov 8, 2023 •

edited

Loading