Skip to content

Replace hospscotch tooltip JS library for QC Plots with tippy#1172

Open
ankurjuneja wants to merge 11 commits intodevelopfrom
fb_tippy
Open

Replace hospscotch tooltip JS library for QC Plots with tippy#1172
ankurjuneja wants to merge 11 commits intodevelopfrom
fb_tippy

Conversation

@ankurjuneja
Copy link
Contributor

@ankurjuneja ankurjuneja commented Jan 28, 2026

Rationale

https://github.com/LabKey/internal-issues/issues/787

Related Pull Requests

Changes

  • change qc plots data point tooltip from hopscotch to tippy
  • transform qcplothoverpanel from ext js implementation to plain js implementation

@ankurjuneja ankurjuneja marked this pull request as ready for review January 31, 2026 00:10
Copy link
Contributor

@labkey-jeckels labkey-jeckels left a comment

Choose a reason for hiding this comment

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

Can we remove hopscotch as a dependency from this module? It looks like qcTrendPlotReport.jsp still references it. qcSummary.jsp does too. The latter looks like it's still actively using it. There are other references to hopscotch in the codebase - could they be replaced (they may just be CSS style names, etc)

@ankurjuneja
Copy link
Contributor Author

Can we remove hopscotch as a dependency from this module? It looks like qcTrendPlotReport.jsp still references it. qcSummary.jsp does too. The latter looks like it's still actively using it. There are other references to hopscotch in the codebase - could they be replaced (they may just be CSS style names, etc)

Will do, I just replaced the qc plots data points tooltip, will replace other usage too.

Copy link
Contributor

@labkey-jeckels labkey-jeckels left a comment

Choose a reason for hiding this comment

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

Code is looking good, though see comments.

We should get manual testing on this before merging. I haven't had a chance to do that yet.

{
Locator.XPathLocator hopscotchBubble = Locator.byClass("hopscotch-bubble-container");
return hopscotchBubble.append(Locator.byClass("hopscotch-bubble-content").append(Locator.byClass("hopscotch-content").withText()));
return Locator.tagWithClass("div", "qc-plot-hover-panel");
Copy link
Contributor

Choose a reason for hiding this comment

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

Seems redundant with getBubble() now.

Locator.CssLocator svgBackgrounds = Locator.css("svg g.brush rect.background");
Locator.XPathLocator hopscotchBubble = Locator.byClass("hopscotch-bubble-container");
Locator.XPathLocator hopscotchBubbleClose = Locator.byClass("hopscotch-bubble-close");
Locator.XPathLocator tippyBubble = Locator.tagWithClass("div", "qc-plot-hover-panel");
Copy link
Contributor

Choose a reason for hiding this comment

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

Should this use getBubble()? Or should that use this?

valueSpan.className = 'qc-hover-field-value';
valueSpan.style.flex = '1';
valueSpan.style.wordBreak = 'break-all';
valueSpan.innerHTML = value;
Copy link
Contributor

Choose a reason for hiding this comment

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

I don't see where HTML encoding is happening. Should this be innerText, or is the caller responsible for encoding (and actually doing it)?

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.

2 participants