Added tooltip for TiledHeatmapMesh #1193

loichuder · 2022-08-18T13:32:00Z

Related to #1177

Tried an analytical method as using the raycaster was not convienient at all. Indeed, as the whole layer group is intersected by the ray, we still need to filter manually the tiles. Perhaps I missed something so I could revisit this later.

The tooltip is not working properly for two cases:

with flipped axes
with transforms

I am fairly confident I can fix it for flipped axes but we can already discuss the current implementation.

apps/storybook/src/TiledHeatmapMesh.stories.tsx

packages/lib/src/vis/tiles/TiledHeatmapMesh.tsx

packages/lib/src/vis/tiles/utils.ts

t20100

As we already discussed, flipped axes support is needed and transforms support would be nice to have but not needed for now.

To me in the end, the tooltip mesh will need to be handled outside of the TiledHeatmapMesh because it should handle more than one mesh, but that's better to go step by step and it's fine for me like it is in this PR.

apps/storybook/src/TiledHeatmapMesh.stories.tsx

packages/lib/src/vis/tiles/TiledHeatmapMesh.tsx

loichuder · 2022-08-25T12:13:24Z

To me in the end, the tooltip mesh will need to be handled outside of the TiledHeatmapMesh because it should handle more than one mesh

Agreed. But it means the variables computed in TiledHeatmapMesh (tooltipLayer and meshSize) should somehow be available outside of it

loichuder · 2022-08-25T13:09:53Z

apps/storybook/src/TiledHeatmapMesh.stories.tsx

@@ -152,11 +172,7 @@ const Template: Story<TiledHeatmapStoryProps> = (args) => {
      <Zoom />
      <SelectToZoom keepRatio modifierKey="Control" />
      <ResetZoomButton />
-      <group
-        scale={[abscissaConfig.flip ? -1 : 1, ordinateConfig.flip ? -1 : 1, 1]}
-      >


The flip is now handled at the layer level to avoid flipping the TiledTooltipMesh

loichuder · 2022-08-25T13:12:04Z

packages/lib/src/vis/tiles/TiledHeatmapMesh.tsx

@@ -46,9 +50,11 @@ function TiledHeatmapMesh(props: Props) {
  );
  const visibleBox = getObject3DVisibleBox(ndcToLocalMatrix);

-  const bounds = scaleToLayer(visibleBox, baseLayerSize, meshSize);
+  const { xScale, yScale } = useLayerScales(baseLayerSize, meshSize);


Scales are now computed by a hook outside of scaleToLayer (renamed scaleBox) to be able to access the AxisContext and take the flip in account

t20100 · 2022-08-25T13:41:02Z

My bad, transforms (scale and position) also need to be supported, and flipped axes handled outside of the TiledHeatmaComponent.

axelboc · 2022-09-05T13:29:51Z

To me in the end, the tooltip mesh will need to be handled outside of the TiledHeatmapMesh because it should handle more than one mesh

Agreed. But it means the variables computed in TiledHeatmapMesh (tooltipLayer and meshSize) should somehow be available outside of it

IMO, the most important is that the rendering of the tooltip content be the responsibility of the consumer, so there has to be a renderTooltip prop somewhere in the public API, and this prop should accept a function that gets called with all the necessary info.

renderTooltip can be a prop of TiledHeatmapMesh for now. If the prop is not set then TiledHeatmapMesh doesn't render a TooltipMesh at all.

Then, you can help consumers by providing a component to use inside renderTooltip - e.g. TiledTooltip (pretty much like TiledTooltipMesh but without the TooltipMesh): renderTooltip={tooltipProps => <TiledTooltip {...tooltipProps} />}

In the long term, maybe #988 will bring out some refactoring opportunities to allow having a fully separate TiledTooltipMesh component, I don't know... Or maybe a custom hook for consumers to use together with TiledHeatmapMesh and TiledTooltipMesh could be an option...

loichuder · 2022-09-15T09:27:52Z

As the support of transform is needed, I will need to rework this. I am drafting it in the mean time.

loichuder · 2022-09-29T14:06:38Z

Now handling transforms. I may revert the refactoring of scaleToLayer as the new implementation does not need it.

loichuder · 2022-09-29T14:08:03Z

packages/lib/src/vis/tiles/TiledHeatmapMesh.tsx

+          />
+        ))}
+      </group>
+      {showTooltip && <TiledTooltipMesh size={meshSize} />}


This is to make the size of TooltipMesh match the size of the TiledHeatmap

loichuder · 2022-09-29T14:08:34Z

packages/lib/src/vis/tiles/TiledTooltipMesh.tsx

+  return (
+    <TooltipMesh
+      size={size}
+      renderTooltip={() => {


renderTooltip could be exposed

Yeah this is great for this PR. It can be passed down as prop in a separate PR.

axelboc

I reckon that the tooltip store is taking us really close to a shared solution for both the heatmap and the tiled heatmap, where the TooltipMesh would remain outside of/decoupled from the (Tiled)HeatmapMesh component. This has great potential: it could allow, for instance, consumers of the lib replace the tooltip with a status bar, a bit like on vector graphics software:

packages/lib/src/vis/tiles/Tile.tsx

packages/lib/src/vis/tiles/utils.ts

axelboc · 2022-09-30T13:54:02Z

packages/lib/src/vis/tiles/TiledTooltipMesh.tsx

+  return (
+    <TooltipMesh
+      size={size}
+      renderTooltip={() => {


Yeah this is great for this PR. It can be passed down as prop in a separate PR.

packages/lib/src/vis/tiles/TiledLayer.tsx

packages/lib/src/vis/tiles/utils.ts

axelboc · 2022-09-30T14:08:06Z

Now handling transforms. I may revert the refactoring of scaleToLayer as the new implementation does not need it.

No need, it's clear what's what, and the refactoring is nice 👍

loichuder commented Aug 18, 2022

View reviewed changes

apps/storybook/src/TiledHeatmapMesh.stories.tsx Show resolved Hide resolved

packages/lib/src/vis/tiles/TiledHeatmapMesh.tsx Outdated Show resolved Hide resolved

packages/lib/src/vis/tiles/utils.ts Outdated Show resolved Hide resolved

packages/lib/src/vis/tiles/utils.ts Show resolved Hide resolved

loichuder requested a review from t20100 August 18, 2022 13:44

t20100 reviewed Aug 24, 2022

View reviewed changes

apps/storybook/src/TiledHeatmapMesh.stories.tsx Show resolved Hide resolved

packages/lib/src/vis/tiles/TiledHeatmapMesh.tsx Outdated Show resolved Hide resolved

packages/lib/src/vis/tiles/TiledHeatmapMesh.tsx Outdated Show resolved Hide resolved

loichuder commented Aug 25, 2022

View reviewed changes

loichuder requested a review from t20100 August 25, 2022 13:12

loichuder marked this pull request as draft September 15, 2022 09:27

loichuder force-pushed the tiled-tooltip branch 5 times, most recently from 5b44cb2 to 6143e56 Compare September 29, 2022 14:00

loichuder requested a review from axelboc September 29, 2022 14:03

loichuder marked this pull request as ready for review September 29, 2022 14:03

loichuder force-pushed the tiled-tooltip branch from 6143e56 to f5198ad Compare September 29, 2022 14:05

loichuder commented Sep 29, 2022

View reviewed changes

axelboc approved these changes Sep 30, 2022

View reviewed changes

loichuder force-pushed the tiled-tooltip branch from f5198ad to c6044a6 Compare October 3, 2022 15:04

Added tooltip for TiledHeatmapMesh

228e41c

loichuder force-pushed the tiled-tooltip branch from c6044a6 to 228e41c Compare October 3, 2022 15:08

loichuder merged commit 984d36b into main Oct 3, 2022

loichuder deleted the tiled-tooltip branch October 3, 2022 15:13

loichuder mentioned this pull request Nov 9, 2022

Leave flip handling out of TiledHeatmapMesh #1270

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added tooltip for TiledHeatmapMesh #1193

Added tooltip for TiledHeatmapMesh #1193

loichuder commented Aug 18, 2022

t20100 left a comment

loichuder commented Aug 25, 2022

loichuder Aug 25, 2022

loichuder Aug 25, 2022

t20100 commented Aug 25, 2022

axelboc commented Sep 5, 2022 •

edited

Loading

loichuder commented Sep 15, 2022

loichuder commented Sep 29, 2022

loichuder Sep 29, 2022

loichuder Sep 29, 2022

axelboc Sep 30, 2022

axelboc left a comment •

edited

Loading

axelboc Sep 30, 2022

axelboc commented Sep 30, 2022

Added tooltip for TiledHeatmapMesh #1193

Added tooltip for TiledHeatmapMesh #1193

Conversation

loichuder commented Aug 18, 2022

t20100 left a comment

Choose a reason for hiding this comment

loichuder commented Aug 25, 2022

loichuder Aug 25, 2022

Choose a reason for hiding this comment

loichuder Aug 25, 2022

Choose a reason for hiding this comment

t20100 commented Aug 25, 2022

axelboc commented Sep 5, 2022 • edited Loading

loichuder commented Sep 15, 2022

loichuder commented Sep 29, 2022

loichuder Sep 29, 2022

Choose a reason for hiding this comment

loichuder Sep 29, 2022

Choose a reason for hiding this comment

axelboc Sep 30, 2022

Choose a reason for hiding this comment

axelboc left a comment • edited Loading

Choose a reason for hiding this comment

axelboc Sep 30, 2022

Choose a reason for hiding this comment

axelboc commented Sep 30, 2022

axelboc commented Sep 5, 2022 •

edited

Loading

axelboc left a comment •

edited

Loading