fix: Drill to detail blocked by tooltip by michael-s-molina · Pull Request #22082 · apache/superset

michael-s-molina · 2022-11-09T15:24:23Z

SUMMARY

Implements a custom tooltip positioning function that ensures that the tooltip never overlaps with the pointer during normal use. In addition this fixes a bug that would cause the tooltip to stay on screen if the tooltip was visible when the user navigated away from the page.

This PR also cleans up some types on the ECharts plugin package (these kinda needed to be fixed as the code was becoming difficult to manage.

AFTER

Now tooltips are allowed to overflow other charts:

hover3.mp4

In addition, the sticky hover bug is also gone:

nav_after.mp4

BEFORE

Before, the pointer would overflow the tooltip if the chart was small enough and never utilized free space next to the chart:

overlap_before.mp4

Also navigating away from the page with the chart would sometimes leave the tooltip stuck in the middle of the screen:

nav_before.mp4

TESTING INSTRUCTIONS

Go to eph env and open the "tooltip test" dashboard.
Try to make the tooltip overlap the pointer of fall outside the screen (note that scrolling can still make the tooltip go outside)
Navigate away from the dashboard page while the tooltip is open (by using keyboard shortcuts) - the tooltip will no longer be stuck on the screen after navigation.

ADDITIONAL INFORMATION

Has associated issue

:

Required feature flags:
Changes UI
Includes DB Migration (follow approval process in SIP-59)
- Migration is atomic, supports rollback & is backwards-compatible
- Confirm DB migration upgrade and downgrade tested
- Runtime estimates and downtime expectations provided
Introduces new feature or API
Removes existing feature or API

michael-s-molina · 2022-11-09T15:27:15Z

@villebro and @kgabryje I added you as reviewers because this PR is changing the code that you wrote and you may have additional context.

codecov · 2022-11-09T16:24:44Z

Codecov Report

Merging #22082 (7ad716d) into master (a77b2d6) will decrease coverage by 0.03%.
The diff coverage is 24.24%.

@@            Coverage Diff             @@
##           master   #22082      +/-   ##
==========================================
- Coverage   65.49%   65.46%   -0.04%     
==========================================
  Files        1835     1835              
  Lines       69927    69983      +56     
  Branches     7590     7610      +20     
==========================================
+ Hits        45802    45814      +12     
- Misses      22159    22203      +44     
  Partials     1966     1966

Flag	Coverage Δ
javascript	`53.75% <24.24%> (-0.05%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...rts/src/BigNumber/BigNumberTotal/transformProps.ts	`0.00% <0.00%> (ø)`
...lugin-chart-echarts/src/BigNumber/BigNumberViz.tsx	`0.00% <0.00%> (ø)`
...lugin-chart-echarts/src/BoxPlot/EchartsBoxPlot.tsx	`0.00% <ø> (ø)`
.../plugins/plugin-chart-echarts/src/BoxPlot/types.ts	`0.00% <ø> (ø)`
.../plugin-chart-echarts/src/Funnel/EchartsFunnel.tsx	`0.00% <ø> (ø)`
...d/plugins/plugin-chart-echarts/src/Funnel/types.ts	`100.00% <ø> (ø)`
...ns/plugin-chart-echarts/src/Gauge/EchartsGauge.tsx	`0.00% <ø> (ø)`
...nd/plugins/plugin-chart-echarts/src/Gauge/types.ts	`100.00% <ø> (ø)`
...ns/plugin-chart-echarts/src/Graph/EchartsGraph.tsx	`0.00% <ø> (ø)`
...nd/plugins/plugin-chart-echarts/src/Graph/types.ts	`100.00% <ø> (ø)`
... and 28 more

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

villebro

Some thoughts, let me know if you wanna discuss this

villebro

I left a long reply to your comment, but TL;DR, even if we don't implement an exotic position callback, I think your solution might be better than the current behavior, which isn't completely unproblematic, either. So I'm approving this, but it could be fun to try to create a better positioning function and maybe contribute that upstream? Happy to pair on it if you're interested 🙂

michael-s-molina · 2022-11-16T13:30:53Z

I left a long reply to your comment, but TL;DR, even if we don't implement an exotic position callback, I think your solution might be better than the current behavior, which isn't completely unproblematic, either. So I'm approving this, but it could be fun to try to create a better positioning function and maybe contribute that upstream? Happy to pair on it if you're interested 🙂

Looking at the examples you posted I'm still not happy with the final result. I agree we should try to improve the algorithm. Did you see this one? I'll leave this open so we can collaborate.

villebro · 2022-11-23T11:53:12Z

/testenv up

github-actions · 2022-11-23T11:54:58Z

@villebro Ephemeral environment spinning up at http://34.220.125.160:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

michael-s-molina · 2022-11-23T15:06:43Z

/testenv up

github-actions · 2022-11-23T15:10:44Z

@michael-s-molina Ephemeral environment spinning up at http://54.188.153.91:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

michael-s-molina · 2022-11-23T15:44:53Z

  const { emitFilter, stack } = formData;
  const echartRef = useRef<EchartsHandler | null>(null);
+  // eslint-disable-next-line no-param-reassign
+  refs.echartRef = echartRef;


It seems echartRef is only being used internally in EchartsTimeseries. Do we need to add it to refs?

It was previously being passed to the Echart component in a separate dedicated ref field. To avoid having two properties (one for the div ref and one for the echart ref), I decided to just place both of them in that refs object (I was becoming tired at this point and running low on imagination 😄 )

Echart is not using echartRef

villebro · 2022-11-23T15:48:50Z

    timeFormat,
    yAxisFormat,
  } = formData;
+  const refs: Refs = {};


the refs object is needed here so the downstream code (transformProps -> Chart plugin component -> Echart component) can add the reference to the chart div for the tooltip positioning callback to calculate the current location of the pointer.

villebro · 2022-11-23T15:50:05Z

      <div className={className} style={{ height }}>
        {this.renderFallbackWarning()}
-        {this.renderKicker(kickerFontSize * height)}
+        {this.renderKicker((kickerFontSize || 0) * height)}


lots of minor checks that needed to be added when the interfaces/types where updated

villebro · 2022-11-23T15:51:06Z


 export type TimeSeriesDatum = [number, number | null];
+
+export type BigNumberVizProps = {


note: This whole chart should be refactored to be a functional component

villebro · 2022-11-23T15:52:06Z

-} & EchartsTitleFormData;
+} & TitleFormData;


I decided to remove the Echarts prefix from some types as it felt slightly redundant (this is an ECharts plugin, after all)

villebro · 2022-11-23T15:53:30Z

+  BaseTransformedProps<EchartsGaugeFormData> &
+    ContextMenuTransformedProps &
+    CrossFilterTransformedProps;


I decided to split out the context menu and cross filtering props into separate types to avoid code duplication.

villebro · 2022-11-23T15:55:18Z

  // did mount
  useEffect(() => {
    handleSizeChange({ width, height });
+    return () => chartRef.current?.dispose();


This fixes the sticky tooltip bug (disposes the chart instance during cleanup)

jinghua-qa

LGTM

kgabryje

I looked through the code and tested the flows on eph env. Looks great to me!

github-actions · 2022-11-23T19:50:28Z

Ephemeral environment shutdown and build artifacts deleted.

Co-authored-by: Ville Brofeldt <ville.brofeldt@apple.com>

fix: Drill to detail blocked by tooltip

bf5cd42

michael-s-molina requested review from geido, kgabryje and villebro November 9, 2022 15:24

pull-request-size Bot added the size/XS label Nov 9, 2022

villebro reviewed Nov 11, 2022

View reviewed changes

Comment thread superset-frontend/plugins/plugin-chart-echarts/src/defaults.ts Outdated

villebro approved these changes Nov 16, 2022

View reviewed changes

Comment thread superset-frontend/plugins/plugin-chart-echarts/src/defaults.ts Outdated

villebro added 2 commits November 17, 2022 11:43

Merge branch 'master' into fix-d2d-blocked-by-tooltip

a09ec93

implement improved positioning algo

c8ce2ab

pull-request-size Bot added size/M and removed size/XS labels Nov 17, 2022

villebro added 2 commits November 22, 2022 09:40

Merge branch 'master' into fix-d2d-blocked-by-tooltip

2b78498

add reference to chart div

45c7df7

pull-request-size Bot added size/XL and removed size/M labels Nov 23, 2022

villebro added 2 commits November 23, 2022 10:00

Merge branch 'master' into fix-d2d-blocked-by-tooltip

060812f

add license header

f8a1e8d

pull-request-size Bot added size/XXL and removed size/XL labels Nov 23, 2022

villebro added 2 commits November 23, 2022 13:00

fix tests and do more cleanup

93ce8da

more fixing

26ee293

villebro force-pushed the fix-d2d-blocked-by-tooltip branch from f331477 to 26ee293 Compare November 23, 2022 11:18

pull-request-size Bot added size/XL and removed size/XXL labels Nov 23, 2022

add refs to BigNumberWithTrendline

58ccf03

add cleanup

7ad716d

michael-s-molina commented Nov 23, 2022

View reviewed changes

villebro reviewed Nov 23, 2022

View reviewed changes

michael-s-molina requested a review from jinghua-qa November 23, 2022 16:13

jinghua-qa approved these changes Nov 23, 2022

View reviewed changes

kgabryje approved these changes Nov 23, 2022

View reviewed changes

villebro merged commit 3bc0865 into apache:master Nov 23, 2022

villebro mentioned this pull request Nov 24, 2022

fix(plugin-chart-echarts): tooltip overflow bug #22218

Merged

9 tasks

mistercrunch added the 🚢 2.1.3 First shipped in 2.1.3 label Feb 18, 2024

mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 2.1.0 First shipped in 2.1.0 and removed 🚢 2.1.3 First shipped in 2.1.3 labels Mar 13, 2024

qfcwell pushed a commit to qfcwell/superset that referenced this pull request May 12, 2026

fix: Drill to detail blocked by tooltip (apache#22082)

8860f39

Co-authored-by: Ville Brofeldt <ville.brofeldt@apple.com>


		export type TimeSeriesDatum = [number, number \| null];

		export type BigNumberVizProps = {

Conversation

michael-s-molina commented Nov 9, 2022 • edited by villebro Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SUMMARY

AFTER

BEFORE

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Uh oh!

michael-s-molina commented Nov 9, 2022

Uh oh!

codecov Bot commented Nov 9, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

villebro left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

villebro left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

michael-s-molina commented Nov 16, 2022

Uh oh!

villebro commented Nov 23, 2022

Uh oh!

github-actions Bot commented Nov 23, 2022

Uh oh!

michael-s-molina commented Nov 23, 2022

Uh oh!

github-actions Bot commented Nov 23, 2022

Uh oh!

michael-s-molina Nov 23, 2022

Choose a reason for hiding this comment

Uh oh!

villebro Nov 23, 2022 • 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!

michael-s-molina Nov 23, 2022 • 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!

villebro Nov 23, 2022 • 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!

villebro Nov 23, 2022

Choose a reason for hiding this comment

Uh oh!

villebro Nov 23, 2022

Choose a reason for hiding this comment

Uh oh!

villebro Nov 23, 2022

Choose a reason for hiding this comment

Uh oh!

villebro Nov 23, 2022

Choose a reason for hiding this comment

Uh oh!

villebro Nov 23, 2022

Choose a reason for hiding this comment

Uh oh!

jinghua-qa left a comment

Choose a reason for hiding this comment

Uh oh!

kgabryje left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Nov 23, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

michael-s-molina commented Nov 9, 2022 •

edited by villebro

Loading

codecov Bot commented Nov 9, 2022 •

edited

Loading

villebro Nov 23, 2022 •

edited

Loading

michael-s-molina Nov 23, 2022 •

edited

Loading

villebro Nov 23, 2022 •

edited

Loading