Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wire marker selection to floaters #821

Merged
merged 23 commits into from
Feb 12, 2024
Merged

Conversation

bobular
Copy link
Member

@bobular bobular commented Feb 2, 2024

Resolves #432

Currently branched off #794

First off, as suggested by Dave months ago, I have moved the event handling of "single click to unselect all" out of MapVEuMap and into SemanticMarkers. This sets the scene for wiring up selected markers to appState per marker mode (which makes sense, because some marker modes might have no markers!)

Testing the floaters is tricky - there's a performance issue with sample-level variables, and assays are affected by this VEuPathDB/EdaDataService#351 However, for PoC you can make a floating barplot on "continent" and click around to see what happens quite quickly. SOLVED ✔️

  • check story still works
  • wire up donut mode
  • and bar and bubble
  • and wire to floaters
  • address double data-requests made by histogram
  • think more about UX and feedback for users (what if they select markers with no floater - nothing will really happen) - and then just implement a straw man and have a meeting
  • move snackbars to top
  • make multiple select require shift-click
  • add extra snackbar to explain shift-click for multiple select
  • fix flashing popups after selection
  • increase mouse wheel sensitivity
  • roll out to other marker modes and viz types

image

@bobular bobular changed the base branch from main to little-filter-refactor February 2, 2024 15:57
...prevSelectedMarkers,
props.id,
]);
const handleClick = useCallback(
Copy link
Member Author

@bobular bobular Feb 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useCallback doesn't seem essential but seems sensible given it is debounced and this may avoid the debouncing being reset unnecessarily.

Especially as we are adding selectedMarkers to the function. Previously we were using "functional update" prevSelectedMarkers

Base automatically changed from little-filter-refactor to main February 6, 2024 11:51
@bobular
Copy link
Member Author

bobular commented Feb 6, 2024

How about just having a yellow border around the floating plot when it is showing data from selected markers? @dmfalke @moontrip @chowington

I think we probably need a Map UX meeting this Thurs.

@bobular
Copy link
Member Author

bobular commented Feb 6, 2024

Playing with the clickable markers and floaters, I'm finding it really misleading that we currently don't apply the "marker-config little filter" to the floaters.

In the example screenshotted below, if you click on the bubble marker, the "study tags" floating bar plot would lead you to believe that the tick data you just clicked on was provided by the WIN or Powell lab networks (which both work on mosquitoes not ticks).

What's actually happening is that the floating plot is being filtered by the geohash rectangle that the marker lies within.

I think this is probably an argument in favour of having floating plots always filtered by "marker-config little filters". It's something we could trial in QA at least.

image

),
],
};
const distributionDataPromise = usePromise(
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed the double-nested useCallback

@@ -560,13 +552,6 @@ function HistogramViz(props: VisualizationProps<Options>) {
)
return undefined;

// wait till distributionDataPromise is ready
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There was no need to wait for this - it was indirectly causing a double data request due to distributionDataPromise.* being added as dependencies.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Though waiting for it probably avoided the runtime bug that I later fixed.

@bobular bobular marked this pull request as ready for review February 8, 2024 22:24
@bobular bobular requested a review from moontrip February 8, 2024 22:24
@bobular bobular marked this pull request as draft February 8, 2024 22:26
@bobular
Copy link
Member Author

bobular commented Feb 8, 2024

Sorry, will roll out new logic to all modes/viz and un-draft tomorrow.

@bobular bobular marked this pull request as ready for review February 9, 2024 14:34
@bobular
Copy link
Member Author

bobular commented Feb 9, 2024

All good for review now!

@@ -902,6 +903,7 @@ function BarplotViz(props: VisualizationProps<Options>) {
.every((reqdVar) => !!(vizConfig as any)[reqdVar[0]]);

const LayoutComponent = options?.layoutComponent ?? PlotLayout;
const plotSubtitle = options?.getPlotSubtitle?.();
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

see standaloneVisPlugins.ts

@moontrip
Copy link
Contributor

moontrip commented Feb 12, 2024

Hi @bobular 👋 I started looking at this and tried to test the map with Field-based vector popolation studies at first. But I found a couple of issues so far:

I tried many cases but couldn't see any snack bar
I think that you wired up other Vizs beyond histogram and could see some changes in plot (e.g., lineplot, time series, etc.) when selecting markers. However, they lack of message in the plot which we could see at Histogram viz, like (for all visible data on map) <-> (for selected markers)
Even for histogram Viz, I noticed that the message, (for all visible data on map) <-> (for selected markers), did not change for bar plot and bubble markers. It only works for Donut marker

In the meantime, I will try to address a message for null case of binspec etc. (to be no/empty data message) as we discussed in the meeting.

Update 1: nevermind I will test again as I just realized that my branch was old

Update 2: all above observations worked just fine after updating my local branch, so strikethrough. Sorry for confusion!

Copy link
Contributor

@moontrip moontrip left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall, it worked fine and I couldn't find specific issues after careful tests. Also I didn't notice specific issues on codes. 👍

One note is that there still exists handling null of binslider/binspec on Histogram Viz. Will try to use similar approach used in #826. But this does not block the approval of this PR as it will be handled in the other ticket/PR

@bobular bobular merged commit 2512f45 into main Feb 12, 2024
1 check passed
@bobular bobular deleted the wire-marker-selection-to-floaters branch February 12, 2024 20:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Map - have floating plots respond to selected markers
4 participants