Click/drag zooming for QC plots (#1209)

Author: ankurjuneja

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

@@ -904,6 +904,36 @@ public String toString()
         }
     }
 
+    public void performYAxisZoom(QCPlot qcPlot)
+    {
+        WebElement plotEl = qcPlot.getPlot();
+        WebElement overlay = elementCache().yZoomOverlay.findElement(plotEl);
+        getWrapper().scrollIntoView(overlay);
+
+        int clickOffset = 40;
+        new Actions(getWrapper().getDriver())
+                .moveToElement(overlay, 0, -clickOffset)
+                .click()
+                .moveToElement(overlay, 0, clickOffset)
+                .click()
+                .perform();
+
+        WebDriverWrapper.waitFor(() -> !elementCache().yZoomConfirmBtn.findElements(plotEl).isEmpty(),
+                "Zoom buttons did not appear after y-axis clicks", WAIT_FOR_JAVASCRIPT);
+
+        elementCache().yZoomConfirmBtn.findElement(plotEl).click();
+    }
+
+    public boolean isZoomActive(QCPlot qcPlot)
+    {
+        return !elementCache().yZoomBorder.findElements(qcPlot.getPlot()).isEmpty();
+    }
+
+    public void clickResetZoom(QCPlot qcPlot)
+    {
+        elementCache().yZoomOverlay.findElement(qcPlot.getPlot()).click();
+    }
+
     public class Elements extends BodyWebPart<?>.ElementCache
     {
         WebElement startDate = Locator.css("#start-date-field input").findWhenNeeded(this);
@@ -939,6 +969,9 @@ public class Elements extends BodyWebPart<?>.ElementCache
         WebElement plotPanel = Locator.css("div.tiledPlotPanel").findWhenNeeded(this);
         WebElement paginationPanel = Locator.css("div.plotPaginationHeaderPanel").findWhenNeeded(this);
         Locator extFormDisplay = Locator.css("div.x4-form-display-field");
+        Locator.CssLocator yZoomOverlay = Locator.css("svg rect.y-zoom-overlay");
+        Locator.CssLocator yZoomConfirmBtn = Locator.css("svg g.y-zoom-btn-zoom rect");
+        Locator.CssLocator yZoomBorder = Locator.css("svg rect.y-zoom-border");
         Locator.CssLocator guideSetTrainingRect = Locator.css("svg rect.training");
         Locator.CssLocator experimentRangeRect = Locator.css("svg rect.expRange");
         Locator.CssLocator guideSetSvgButton = Locator.css("svg g.guideset-svg-button text");

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

@@ -1148,6 +1148,56 @@ private void verifyRow(DataRegionTable drt, int row, String sampleName, String s
         assertEquals(skylineDocName, drt.getDataAsText(row, "File"));
     }
 
+    @Test
+    public void testQCPlotYAxisZoom()
+    {
+        PanoramaDashboard qcDashboard = new PanoramaDashboard(this);
+        QCPlotsWebPart qcPlotsWebPart = qcDashboard.getQcPlotsWebPart();
+        qcPlotsWebPart.filterQCPlotsToInitialData(PRECURSORS.length, true);
+
+        List<QCPlot> plots = qcPlotsWebPart.getPlots();
+        assertTrue("Expected at least 2 plots for y-axis zoom test", plots.size() >= 2);
+
+        // 1. Verify zooming is possible: drag on y-axis, confirm zoom, border appears
+        log("Verifying y-axis zoom can be applied");
+        qcPlotsWebPart.performYAxisZoom(plots.get(0));
+        waitForElement(Locator.css("svg rect.y-zoom-border"), WAIT_FOR_JAVASCRIPT);
+
+        plots = qcPlotsWebPart.getPlots();
+        QCPlot firstPlot = plots.get(0);
+        QCPlot secondPlot = plots.get(1);
+
+        assertTrue("Zoom border should appear on first plot after zoom", qcPlotsWebPart.isZoomActive(firstPlot));
+
+        // 2. Verify zoom is per-plot: second plot is unaffected
+        log("Verifying zoom is independent per plot");
+        assertFalse("Second plot should not be zoomed", qcPlotsWebPart.isZoomActive(secondPlot));
+
+        // 3. Verify reset works: clicking the zoomed y-axis (zoom-out cursor) resets zoom
+        log("Verifying clicking the y-axis resets zoom on the target plot");
+        qcPlotsWebPart.clickResetZoom(firstPlot);
+        waitForElementToDisappear(Locator.css("svg rect.y-zoom-border"), WAIT_FOR_JAVASCRIPT);
+
+        plots = qcPlotsWebPart.getPlots();
+        firstPlot = plots.get(0);
+
+        assertFalse("Zoom border should be gone after reset", qcPlotsWebPart.isZoomActive(firstPlot));
+
+        // 4. Verify zoom is not persisted after page reload
+        log("Verifying zoom state is cleared on page reload");
+        qcPlotsWebPart.performYAxisZoom(firstPlot);
+        waitForElement(Locator.css("svg rect.y-zoom-border"), WAIT_FOR_JAVASCRIPT);
+
+        refresh();
+        qcDashboard = new PanoramaDashboard(this);
+        qcPlotsWebPart = qcDashboard.getQcPlotsWebPart();
+
+        plots = qcPlotsWebPart.getPlots();
+        firstPlot = plots.get(0);
+
+        assertFalse("Zoom should not persist after page reload", qcPlotsWebPart.isZoomActive(firstPlot));
+    }
+
     private void createAndInsertAnnotations()
     {
         clickTab("Annotations");

webapp/TargetedMS/css/qcTrendPlotReport.css

@@ -115,4 +115,24 @@
 
 .qc-combined-tree-legend .qc-tree-precursor:hover {
     background-color: #f0f0f0;
-}
+}
+
+.y-zoom-overlay {
+    cursor: zoom-in;
+}
+
+.y-zoom-pending-line {
+    stroke: rgba(20, 204, 201, 1);
+    stroke-width: 2px;
+    stroke-dasharray: 6, 3;
+}
+
+.y-zoom-selection {
+    fill: rgba(20, 204, 201, 0.3);
+    stroke: rgba(20, 204, 201, 1);
+    stroke-width: 1px;
+}
+
+.y-zoom-buttons g {
+    cursor: pointer;
+}