Replace hospscotch tooltip JS library for QC Plots with tippy

src/org/labkey/targetedms/view/qcSummary.jsp

@@ -24,8 +24,7 @@
     {
         dependencies.add("Ext4");
         dependencies.add("vis/vis");
-        dependencies.add("hopscotch/css/hopscotch.min.css");
-        dependencies.add("hopscotch/js/hopscotch.min.js");
+        dependencies.add("internal/tippy");
         dependencies.add("targetedms/js/BaseQCPlotPanel.js");
         dependencies.add("targetedms/css/QCSummary.css");
         dependencies.add("targetedms/js/QCSummaryPanel.js");

src/org/labkey/targetedms/view/qcTrendPlotReport.jsp

@@ -30,8 +30,7 @@
         dependencies.add("Ext4");
         dependencies.add("Ext4ClientApi");
         dependencies.add("vis/vis");
-        dependencies.add("hopscotch/css/hopscotch.min.css");
-        dependencies.add("hopscotch/js/hopscotch.min.js");
+        dependencies.add("internal/tippy");
         dependencies.add("targetedms/css/SVGExportIcon.css");
         dependencies.add("targetedms/css/qcTrendPlotReport.css");
         dependencies.add("targetedms/js/QCPlotHelperBase.js");
@@ -99,24 +98,53 @@
             });
         }
 
+        let plotTypeTooltipInstance = null;
+
         function createPlotTypeTooltip(tgt, plotType) {
-            let calloutMgr = hopscotch.getCalloutManager();
-            calloutMgr.removeAllCallouts();
-            calloutMgr.createCallout({
-                id: Ext4.id(),
-                target: tgt,
+            destroyPlotTypeTooltip();
+
+            const title = plotType.trim() + ' Plot Type';
+            const content = getPlotTypeHelpTooltip(plotType.trim());
+
+            plotTypeTooltipInstance = tippy(tgt, {
+                content: '<div style="padding: 15px;">' +
+                         '<div style="font-size: 18px; font-weight: bold; margin-bottom: 10px; color: #000;">' +
+                         LABKEY.Utils.encodeHtml(title) + '</div><div style="font-size: 14px; line-height: 1.5; color: #000;">' +
+                         content + '</div></div>',
+                allowHTML: true,
                 placement: 'top',
-                width: 300,
-                xOffset: -250,
-                arrowOffset: 270,
-                showCloseButton: false,
-                title: plotType.trim() + ' Plot Type',
-                content: this.getPlotTypeHelpTooltip(plotType.trim())
-            }, this);
+                maxWidth: 350,
+                showOnCreate: true,
+                trigger: 'manual',
+                hideOnClick: false,
+                offset: [-250, 10],
+                onShow(instance) {
+                    const tippyBox = instance.popper.querySelector('.tippy-box');
+                    if (tippyBox) {
+                        tippyBox.style.border = '5px solid #5d5c5c';
+                        tippyBox.style.backgroundColor = 'white';
+                        tippyBox.style.borderRadius = '4px';
+                    }
+
+                    const arrow = instance.popper.querySelector('.tippy-arrow');
+                    if (arrow) {
+                        arrow.style.color = '#5d5c5c';
+                        arrow.style.width = '20px';
+                        arrow.style.height = '20px';
+                        const arrowBorder = arrow.querySelector('svg');
+                        if (arrowBorder) {
+                            arrowBorder.style.fill = '#5d5c5c';
+                        }
+                    }
+                }
+            });
         }
 
         function destroyPlotTypeTooltip() {
-            hopscotch.getCalloutManager().removeAllCallouts();
+            if (plotTypeTooltipInstance) {
+                plotTypeTooltipInstance.destroy();
+                plotTypeTooltipInstance = null;
+            }
         }
 
         function  getPlotTypeHelpTooltip(plotTypeName) {

test/src/org/labkey/test/components/targetedms/QCPlotsWebPart.java

@@ -85,7 +85,6 @@ private void doAndWaitForUpdate(Runnable action)
     {
         WebElement plot = waitForPlotPanel();
 
-        closeBubble();
         action.run();
 
         getWrapper().shortWait().until(ExpectedConditions.stalenessOf(plot));
@@ -159,7 +158,6 @@ private void setMetricType(MetricType metricType, MetricType currentMetricType,
         {
             doAndWaitForUpdate(() ->
             {
-                // scroll to prevent inadvertent hover over QC Summary webpart items that show hopscotch tooltips
                 getWrapper().scrollIntoView(metricTypeCombo, true);
                 getWrapper()._ext4Helper.selectComboBoxItem(metricTypeCombo, metricType.toString());
             });
@@ -530,10 +528,11 @@ public WebElement openExclusionBubble(String acquiredDate)
                     WebElement point = getPointByAcquiredDate(acquiredDate);
                     ScrollUtils.scrollIntoView(point, center, center);
                     getWrapper().mouseOverWithoutScrolling(point);
-                    return getWrapper().isElementPresent(Locator.tagWithClass("div", "x4-form-display-field")
-                            .containing(acquiredDate.substring(0, 16))); // drop seconds part (e.g. "2013-08-12 04:54") for trailing mean/CV
+                    return getWrapper().isElementPresent(Locator.tagWithClass("div", "qc-plot-hover-panel")
+                            .withDescendant(Locator.tagWithClass("div", "qc-hover-field")
+                                    .containing(acquiredDate.substring(0, 16)))); // drop seconds part (e.g. "2013-08-12 04:54") for trailing mean/CV
                 });
-        return elementCache().hopscotchBubble.findElement(getDriver());
+        return elementCache().tippyBubble.findElement(getDriver());
     }
 
     @LogMethod
@@ -676,21 +675,6 @@ public void checkPlotType(QCPlotType plotType)
         }
     }
 
-    private void dismissTooltip()
-    {
-        int halfWidth = elementCache().webPartTitle.getSize().getWidth() / 2;
-        int xOffset = elementCache().webPartTitle.getLocation().getX() + halfWidth; // distance to edge of window from center of element
-        getWrapper().scrollIntoView(elementCache().webPartTitle);
-        new Actions(getDriver())
-                .moveToElement(elementCache().webPartTitle) // Start at the center of the title
-                .moveByOffset(-xOffset, 0) // Move all the way to the left edge of the window
-                .perform(); // Should dismiss hover tooltips
-        WebElement closeHopscotch = Locator.byClass("hopscotch-close").findElementOrNull(getDriver());
-        if (closeHopscotch != null && closeHopscotch.isDisplayed())
-            closeHopscotch.click();
-        getWrapper().shortWait().until(ExpectedConditions.invisibilityOfElementLocated(Locator.byClass("hopscotch-callout")));
-    }
-
     public boolean isPlotTypeSelected(QCPlotType plotType)
     {
         return getCurrentQCPlotTypes().contains(plotType);
@@ -708,37 +692,19 @@ public void checkAllPlotTypes(boolean selected)
         }
     }
 
-    public void closeBubble()
-    {
-        Optional<WebElement> optCloseButton = elementCache().hopscotchBubbleClose.findOptionalElement(getDriver());
-        optCloseButton.ifPresent(closeButton -> {
-            WebDriverWait wait = new WebDriverWait(getDriver(), Duration.ofSeconds(2));
-            wait.until(ExpectedConditions.elementToBeClickable(closeButton)).click();
-            wait.until(ExpectedConditions.stalenessOf(closeButton));
-        });
-    }
-
     public void goToPreviousPage()
     {
-        closeBubble();
         getWrapper().doAndWaitForPageToLoad(() -> elementCache().paginationPrevBtn.findElement(this).click());
     }
 
     public void goToNextPage()
     {
-        closeBubble();
         getWrapper().doAndWaitForPageToLoad(() -> elementCache().paginationNextBtn.findElement(this).click());
     }
 
-    public Locator.XPathLocator getBubble()
-    {
-        return Locator.byClass("hopscotch-bubble-container");
-    }
-
     public Locator.XPathLocator getBubbleContent()
     {
-        Locator.XPathLocator hopscotchBubble = Locator.byClass("hopscotch-bubble-container");
-        return hopscotchBubble.append(Locator.byClass("hopscotch-bubble-content").append(Locator.byClass("hopscotch-content").withText()));
+        return elementCache().tippyBubble;
     }
 
     public ConfigureMetricsUIPage clickConfigureQCMetrics()
@@ -970,8 +936,7 @@ public class Elements extends BodyWebPart<?>.ElementCache
         Locator.CssLocator paginationPrevBtn = Locator.css(".qc-paging-prev");
         Locator.CssLocator paginationNextBtn = Locator.css(".qc-paging-next");
         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");
 
         List<WebElement> findSeriesPanels()
         {

test/src/org/labkey/test/components/targetedms/QCSummaryWebPart.java

@@ -65,22 +65,17 @@ public UtilizationCalendarWebPart gotoUtilizationCalendar()
 
     public Locator.XPathLocator getBubble()
     {
-        return Locators.hopscotchBubble;
-    }
-
-    public void closeBubble()
-    {
-        getWrapper().click(Locators.hopscotchBubbleClose);
+        return Locators.tippyBubble;
     }
 
     public Locator.XPathLocator getBubbleContent()
     {
-        return Locators.hopscotchBubbleContent;
+        return Locators.tippyBubbleContent;
     }
 
     public String getBubbleText()
     {
-        return Locators.hopscotchBubbleContent.withText().waitForElement(getDriver(), 1000).getText();
+        return Locators.tippyBubbleContent.withText().waitForElement(getDriver(), 1000).getText();
     }
 
     public List<QcSummaryTile> getQcSummaryTiles()
@@ -130,9 +125,8 @@ public List<QcSummaryTile> summaryTiles()
 
     private static abstract class Locators
     {
-        static final Locator.XPathLocator hopscotchBubble = Locator.byClass("hopscotch-bubble-container");
-        static final Locator.XPathLocator hopscotchBubbleContent = hopscotchBubble.append(Locator.byClass("hopscotch-bubble-content").append(Locator.byClass("hopscotch-content")));
-        static final Locator.XPathLocator hopscotchBubbleClose = Locator.byClass("hopscotch-bubble-close");
+        static final Locator.XPathLocator tippyBubble = Locator.byClass("tippy-box");
+        static final Locator.XPathLocator tippyBubbleContent = Locator.byClass("tippy-content");
         static final Locator summaryTile = Locator.tagWithClass("div", "summary-tile");
         static final Locator recentSampleFilesLoading = Locator.tagWithClass("div", "sample-file-details-loading");
         static final Locator recentSampleFile = Locator.css("div.sample-file-item");

test/src/org/labkey/test/tests/panoramapremium/TargetedMSiRTMetricsTest.java

@@ -94,7 +94,6 @@ public void testFileWithIRTMetricValue()
         qcPlotsWebPart.openExclusionBubble(acquiredDate);
         String ticAreaHoverText = waitForElement(qcPlotsWebPart.getBubbleContent()).getText();
         checker().withScreenshot("IRTCorrelation").verifyTrue("Incorrect iRT Correlation value calculated", ticAreaHoverText.contains("0.999"));
-        qcPlotsWebPart.closeBubble();
 
         log("Verifying the iRT Intercept plot values");
         acquiredDate = "2014-03-16 05:21:58";
@@ -103,17 +102,15 @@ public void testFileWithIRTMetricValue()
         qcPlotsWebPart.openExclusionBubble(acquiredDate);
         ticAreaHoverText = waitForElement(qcPlotsWebPart.getBubbleContent()).getText();
         checker().withScreenshot("IRTIntercept").verifyTrue("Incorrect  iRT Intercept value calculated", ticAreaHoverText.contains("34.2"));
-        qcPlotsWebPart.closeBubble();
 
         log("Verifying the iRT Slope plot values");
         acquiredDate = "2014-03-17 06:46:14";
         qcPlotsWebPart.setMetric1Type(QCPlotsWebPart.MetricType.IRTSLOPE);
         checker().verifyEquals("Incorrect plot displayed for iRT Slope metric", Arrays.asList("iRT Slope"), qcPlotsWebPart.getPlotTitles());
         qcPlotsWebPart.openExclusionBubble(acquiredDate);
-        waitForElement(qcPlotsWebPart.getBubble());
+        waitForElement(qcPlotsWebPart.getBubbleContent());
         ticAreaHoverText = waitForElement(qcPlotsWebPart.getBubbleContent()).getText();
         checker().withScreenshot("IRTSlope").verifyTrue("Incorrect iRT Slope value calculated", ticAreaHoverText.contains("0.646"));
-        qcPlotsWebPart.closeBubble();
         mouseOut();
 
         log("Verifying the tooltip area of QC summary web part");

test/src/org/labkey/test/tests/targetedms/TargetedMSQCSummaryTest.java

@@ -369,9 +369,8 @@ private void validateSampleFile(int fileDetailIndex, Map<String, String> fileDet
                     fail("The bubble text for the file detail not as expected. Bubble text: '" + actualText + "' Missing: '" + perBubbleTexts.stream().filter(s -> !actualText.contains(s)).collect(Collectors.joining(",")) + "'");
                 }
             }
-            qcSummaryWebPart.closeBubble();
-
-            log("Move the mouse to avoid another hopscotch bubble.");
+
+            log("Move the mouse to avoid another tippy bubble.");
             mouseOver(Locator.css(".labkey-page-nav"));
             waitForElementToDisappear(qcSummaryWebPart.getBubble());
 

test/src/org/labkey/test/tests/targetedms/TargetedMSQCTest.java

@@ -812,22 +812,13 @@ public void testSmallMoleculeQC()
         //Check for clickable PDF and PNG export icons for Combined plot
         verifyDownloadablePlotIcons(1);
 
-        checkAndCloseTooltip();
-
         //deselect "Show All Peptides in Single Plot"
         qcPlotsWebPart.setShowAllPeptidesInSinglePlot(false, currentPagePlotCount);
 
         //Check for no. of PDF and PNG export icons for individual plots
         verifyDownloadablePlotIcons(currentPagePlotCount);
     }
 
-    private void checkAndCloseTooltip()
-    {
-        Locator bubbleClose = Locator.byClass("hopscotch-bubble-close");
-        if (isElementPresent(bubbleClose) && isElementVisible(bubbleClose))
-            click(bubbleClose);
-    }
-
     @Test
     public void testQCPlotExclusions()
     {
@@ -1001,23 +992,26 @@ private void verifyExclusionButtonSelection(String acquiredDate, QCPlotsWebPart.
     {
         QCPlotsWebPart qcPlotsWebPart = new PanoramaDashboard(this).getQcPlotsWebPart();
         WebElement bubble = qcPlotsWebPart.openExclusionBubble(acquiredDate);
-        RadioButton radioButton = RadioButton.RadioButton().withLabel(state.getLabel()).find(bubble);
-        assertTrue("QC data point exclusion selection not as expected:" + state.getLabel(), radioButton.isChecked());
-        qcPlotsWebPart.closeBubble();
+        WebElement radioButton = Locator.tag("input").withAttribute("type", "radio")
+                .withAttribute("name", "exclusion-status")
+                .followingSibling("label").withText(state.getLabel())
+                .precedingSibling("input").findElement(bubble);
+        assertTrue("QC data point exclusion selection not as expected:" + state.getLabel(), radioButton.isSelected());
     }
 
     private void changePointExclusionState(String acquiredDate, QCPlotsWebPart.QCPlotExclusionState state, int waitForPlotCount)
     {
         QCPlotsWebPart qcPlotsWebPart = new PanoramaDashboard(this).getQcPlotsWebPart();
         WebElement bubble = qcPlotsWebPart.openExclusionBubble(acquiredDate);
-        RadioButton radioButton = RadioButton.RadioButton().withLabel(state.getLabel()).find(bubble);
-        if (!radioButton.isChecked())
+        WebElement radioButton = Locator.tag("input").withAttribute("type", "radio")
+                .withAttribute("name", "exclusion-status")
+                .followingSibling("label").withText(state.getLabel())
+                .precedingSibling("input").findElement(bubble);
+        if (!radioButton.isSelected())
         {
-            radioButton.check();
-            clickAndWait(Ext4Helper.Locators.ext4Button("Save").findElement(bubble));
+            radioButton.click();
+            clickAndWait(Locator.tagWithClass("button", "labkey-button").withText("Save").findElement(bubble));
         }
-        else
-            qcPlotsWebPart.closeBubble();
         qcPlotsWebPart.waitForPlots(waitForPlotCount);
     }
 

test/src/org/labkey/test/tests/targetedms/TargetedMSTrailingMeanAndCVTest.java

@@ -167,7 +167,6 @@ public void testTrailingCVPlotType()
                 3 runs average
                 Acquired:
                 2013-08-09 11:39 - 2013-08-12 04:54""", toolTipText);
-        qcPlotsWebPart.closeBubble();
         log("Verifying the count of points on the plot");
         Assert.assertEquals("Invalid point count for all replicates", REPLICATE_COUNT * RUN_COUNT,
                 qcPlotsWebPart.getPointElements("d", SvgShapes.CIRCLE.getPathPrefix(), true).size());
@@ -191,7 +190,6 @@ public void testTrailingCVPlotType()
                 3 runs average
                 Acquired:
                 2013-08-21 04:46 - 2013-08-21 09:07""", toolTipText);
-        qcPlotsWebPart.closeBubble();
 
         log("Verifying the count of points on the plot with guide set");
         Assert.assertEquals("Invalid number of point count for all replicates - plots with guide set", REPLICATE_COUNT * RUN_COUNT ,

webapp/TargetedMS/css/QCSummary.css

@@ -81,16 +81,6 @@
     margin: 0;
 }
 
-div.hopscotch-bubble .hopscotch-actions,
-div.hopscotch-bubble .hopscotch-content {
-    margin: 0;
-    padding: 0;
-}
-
-div.hopscotch-bubble .hopscotch-title {
-    padding-bottom: 5px;
-}
-
 td.outlier-column-header, td.outlier-metric-label {
     white-space: nowrap;
 }

webapp/TargetedMS/css/qcTrendPlotReport.css

@@ -82,10 +82,6 @@
     cursor: pointer;
 }
 
-.hopscotch-bubble-container .qc-hover-value-break {
-    word-break: break-all;
-}
-
 .qc-trend-plot-panel .x4-panel-header,
 .qc-trend-plot-panel .x4-toolbar-footer {
     background: #EEEEEE;