Option to make x-axis calendar-scaled

src/org/labkey/targetedms/TargetedMSController.java

@@ -956,6 +956,7 @@ public static class LeveyJenningsPlotOptions
         private String _metric2;
         private String _yAxisScale;
         private Boolean _groupedX;
+        private Boolean _calendarX;
         private Boolean _singlePlot;
         private Boolean _showExcluded;
         private Boolean _showExcludedPrecursors;
@@ -981,6 +982,8 @@ public Map<String, String> getAsMapOfStrings()
                 valueMap.put("yAxisScale", _yAxisScale);
             if (_groupedX != null)
                 valueMap.put("groupedX", Boolean.toString(_groupedX));
+            if (_calendarX != null)
+                valueMap.put("calendarX", Boolean.toString(_calendarX));
             if (_singlePlot != null)
                 valueMap.put("singlePlot", Boolean.toString(_singlePlot));
             if (_showExcluded != null)
@@ -1027,6 +1030,11 @@ public void setGroupedX(Boolean groupedX)
             _groupedX = groupedX;
         }
 
+        public void setCalendarX(Boolean calendarX)
+        {
+            _calendarX = calendarX;
+        }
+
         public void setSinglePlot(Boolean singlePlot)
         {
             _singlePlot = singlePlot;

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

@@ -248,12 +248,14 @@ public Set<QCPlotType> getCurrentQCPlotTypes()
 
     public void setGroupXAxisValuesByDate(boolean check)
     {
-        if (isGroupXAxisValuesByDateChecked() != check)
+        if (check)
         {
-            if (check)
+            if (!isGroupXAxisValuesByDateChecked())
                 doAndWaitForUpdate(() -> elementCache().xAxisGroupingDateRadio.check());
-            else
-                doAndWaitForUpdate(() -> elementCache().xAxisGroupingReplicateRadio.check());
+        }
+        else
+        {
+            setGroupXAxisValuesByReplicate();
         }
     }
 
@@ -270,6 +272,52 @@ public boolean isGroupXAxisValuesByDateChecked()
         }
     }
 
+    public void setGroupXAxisValuesByCalendar(boolean check)
+    {
+        if (check)
+        {
+            if (!isGroupXAxisValuesByCalendarChecked())
+                doAndWaitForUpdate(() -> elementCache().xAxisGroupingCalendarRadio.check());
+        }
+        else
+        {
+            setGroupXAxisValuesByReplicate();
+        }
+    }
+
+    // check the replicate radio's own state - another radio's state misses the case where the third one is selected
+    public void setGroupXAxisValuesByReplicate()
+    {
+        if (!isGroupXAxisValuesByReplicateChecked())
+            doAndWaitForUpdate(() -> elementCache().xAxisGroupingReplicateRadio.check());
+    }
+
+    public boolean isGroupXAxisValuesByReplicateChecked()
+    {
+        try
+        {
+            return elementCache().xAxisGroupingReplicateRadio.isSelected();
+        }
+        catch (NoSuchElementException | StaleElementReferenceException e)
+        {
+            // Fallback: if radios are not present yet, treat as default so we don't click a missing radio
+            return true;
+        }
+    }
+
+    public boolean isGroupXAxisValuesByCalendarChecked()
+    {
+        try
+        {
+            return elementCache().xAxisGroupingCalendarRadio.isSelected();
+        }
+        catch (NoSuchElementException | StaleElementReferenceException e)
+        {
+            // Fallback: if radios are not present yet, assume unchecked
+            return false;
+        }
+    }
+
     public void setShowAllPeptidesInSinglePlot(boolean check)
     {
         // 'check' means show all series combined in a single plot
@@ -948,6 +996,7 @@ public class Elements extends BodyWebPart<?>.ElementCache
 
         RadioButton xAxisGroupingReplicateRadio = new RadioButton.RadioButtonFinder().withLabel("per replicate").findWhenNeeded(getDriver());
         RadioButton xAxisGroupingDateRadio = new RadioButton.RadioButtonFinder().withLabel("per date").findWhenNeeded(getDriver());
+        RadioButton xAxisGroupingCalendarRadio = new RadioButton.RadioButtonFinder().withLabel("calendar").findWhenNeeded(getDriver());
 
         RadioButton plotsCombinedRadio = new RadioButton.RadioButtonFinder().withLabel("combined").findWhenNeeded(getDriver());
         RadioButton plotsPerPrecursorRadio = new RadioButton.RadioButtonFinder().withLabel("per precursor").findWhenNeeded(getDriver());

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

@@ -307,6 +307,12 @@ public void testQCPlotInputs()
         assertNotEquals(initialSVGText, qcPlotsWebPart.getSVGPlotText("precursorPlot0"));
         qcPlotsWebPart.setGroupXAxisValuesByDate(false);
 
+        // test option to group X-Axis values by Calendar (time-scaled date axis)
+        initialSVGText = qcPlotsWebPart.getSVGPlotText("precursorPlot0");
+        qcPlotsWebPart.setGroupXAxisValuesByCalendar(true);
+        assertNotEquals(initialSVGText, qcPlotsWebPart.getSVGPlotText("precursorPlot0"));
+        qcPlotsWebPart.setGroupXAxisValuesByCalendar(false);
+
         // test that plot0 changes based on scale
         for (QCPlotsWebPart.Scale scale : QCPlotsWebPart.Scale.values())
         {
@@ -410,6 +416,13 @@ public void testQCPlotInputsPersistence()
         goToProjectHome();
         qcPlotsWebPart = qcDashboard.getQcPlotsWebPart();
 
+        // verify the Calendar X-axis grouping option also round-trips on refresh
+        qcPlotsWebPart.setGroupXAxisValuesByCalendar(true);
+        refresh();
+        qcPlotsWebPart = qcDashboard.getQcPlotsWebPart();
+        qcPlotsWebPart.waitForPlots(2);
+        assertTrue("Calendar X-Axis grouping not round tripped as expected", qcPlotsWebPart.isGroupXAxisValuesByCalendarChecked());
+
         // reset plot type selection
         qcPlotsWebPart.resetInitialQCPlotFields();
     }
@@ -602,7 +615,8 @@ public void testDocsWithOverlappingSampleFiles()
         PanoramaDashboard qcDashboard = new PanoramaDashboard(this);
         QCPlotsWebPart qcPlotsWebPart = qcDashboard.getQcPlotsWebPart();
         qcPlotsWebPart.resetInitialQCPlotFields();
-        assertEquals("2014-07-20", qcPlotsWebPart.getCurrentStartDate());
+        // the date fields hold the default "Last 180 days" window from page load, which is inclusive of both ends: 2015-01-16 - 179
+        assertEquals("2014-07-21", qcPlotsWebPart.getCurrentStartDate());
         assertEquals("2015-01-16", qcPlotsWebPart.getCurrentEndDate());
 
         // Check for the newly added precursors.

webapp/TargetedMS/js/QCPlotHelperBase.js

@@ -169,8 +169,14 @@ Ext4.define("LABKEY.targetedms.QCPlotHelperBase", {
 
     processPlotData: function() {
         var parsed = this.lastParsedResponse;
-        if (!parsed)
+        if (!parsed) {
+            // nothing to lay out yet (e.g. a plot option changed before the first load); drop any mask we put up
+            const plotDiv = this.plotDivId ? Ext4.get(this.plotDivId) : null;
+            if (plotDiv) {
+                plotDiv.unmask();
+            }
             return;
+        }
 
         var plotDataRows = parsed.plotDataRows;
         const metricProps = {};
@@ -186,6 +192,8 @@ Ext4.define("LABKEY.targetedms.QCPlotHelperBase", {
 
         // process the data to shape it for the JS LeveyJenningsPlot API call
         this.fragmentPlotData = {};
+        // indices below are into the rebuilt fragmentPlotData, so stale ones from a previous layout would splice the wrong rows
+        this.filterPoints = null;
 
         if (this.showMetricValuePlot()) {
             this.processLJGuideSetData(plotDataRows);
@@ -353,14 +361,6 @@ Ext4.define("LABKEY.targetedms.QCPlotHelperBase", {
             }
         }
 
-        var maxPointsPerSeries = 0;
-        for (var i = 0; i < this.precursors.length; i++) {
-            if (this.fragmentPlotData[this.precursors[i]]) {
-                maxPointsPerSeries = Math.max(this.fragmentPlotData[this.precursors[i]].data.length, maxPointsPerSeries);
-            }
-        }
-        this.showDataPoints = maxPointsPerSeries <= LABKEY.targetedms.QCPlotHelperBase.maxPointsPerSeries;
-
         if (this.showExpRunRange && this.filterPoints) {
 
             for (let i = 0; i < plotDataRows.length; i++) {
@@ -393,6 +393,21 @@ Ext4.define("LABKEY.targetedms.QCPlotHelperBase", {
         this.renderPlots();
     },
 
+    // True when the time-scaled calendar X-axis is in effect (under "always show" the guide-set block becomes an ordinal prefix via calendarPrefixField/Value below, so truncation + separator keep working).
+    isCalendarAxisActive: function() {
+        return this.calendarX === true;
+    },
+
+    // Under calendar + "always show", tell plot.js the ordinal prefix = guide-set training rows (ReferenceRangeSeries "GuideSet"); harmless otherwise since plot.js only reads these when timeBasedXTick is set.
+    applyCalendarPrefixProps: function(trendLineProps) {
+        if (this.calendarX === true && this.filterQCPoints) {
+            trendLineProps.calendarPrefixField = 'ReferenceRangeSeries';
+            trendLineProps.calendarPrefixValue = 'GuideSet';
+            // the range-start marker has no data, so name it explicitly as the day the time-scaled window starts
+            trendLineProps.calendarWindowStartDate = this.startDate ? this.formatDate(this.startDate) : undefined;
+        }
+    },
+
     // filterPoints indices include injected 'missing' entries, but AcquiredTime only exists on raw
     // plotDataRow.data - translate to raw-space by counting non-missing entries, and guard the lookup.
     setStartDateFromFilterIndex: function(plotDataRow, fragIndex) {
@@ -424,10 +439,27 @@ Ext4.define("LABKEY.targetedms.QCPlotHelperBase", {
         }
     },
 
+    // Points are only drawn when a series is small enough to be legible; the combined plot shares one flag, so use the largest.
+    updateShowDataPoints: function() {
+        let maxPointsPerSeries = 0;
+        for (let i = 0; i < this.precursors.length; i++) {
+            if (this.fragmentPlotData[this.precursors[i]]) {
+                maxPointsPerSeries = Math.max(this.fragmentPlotData[this.precursors[i]].data.length, maxPointsPerSeries);
+            }
+        }
+        this.showDataPoints = maxPointsPerSeries <= LABKEY.targetedms.QCPlotHelperBase.maxPointsPerSeries;
+    },
+
     renderPlots: function() {
         if (this.filterQCPoints) {
             this.truncateOutOfRangeQCPoints();
+            this.addRangeStartMarkers();
         }
+        // pad the axis out to the selected date range (all three x-axis groupings) whether or not data reaches the edges
+        this.addRangeBoundaryMarkers();
+
+        // after truncation, so an out-of-range guide set doesn't count the points it just removed
+        this.updateShowDataPoints();
         // do not persist plot options in qc folder if changed after coming through experimental folder link
         if (!this.showExpRunRange) {
             this.persistSelectedFormOptions();
@@ -472,26 +504,109 @@ Ext4.define("LABKEY.targetedms.QCPlotHelperBase", {
                 // Points are date-sorted with both metrics interleaved, so the out-of-range block (guide set
                 // training end -> start date) is one contiguous range spanning both metrics. Splicing the
                 // per-metric ranges separately would overlap and corrupt indices, so combine them: start after
-                // the last training point of any metric, end at the last "first in-range" point of any metric.
+                // the last training point of any metric, end before the first in-range point of any metric.
                 let firstIndex, lastIndex;
                 Ext4.Object.each(this.filterPoints[label], function(metricId, range) {
                     if (range['skipTruncation'] || range['filterPointsFirstIndex'] === undefined
                             || range['filterPointsLastIndex'] === undefined) {
                         return;
                     }
                     firstIndex = firstIndex === undefined ? range['filterPointsFirstIndex'] : Math.max(firstIndex, range['filterPointsFirstIndex']);
-                    lastIndex = lastIndex === undefined ? range['filterPointsLastIndex'] : Math.max(lastIndex, range['filterPointsLastIndex']);
+                    lastIndex = lastIndex === undefined ? range['filterPointsLastIndex'] : Math.min(lastIndex, range['filterPointsLastIndex']);
                 }, this);
 
                 if (firstIndex !== undefined && lastIndex !== undefined) {
-                    for (let i = lastIndex; i >= firstIndex; i--) {
+                    // filterPointsLastIndex is the first in-range point, which belongs in the plot - stop before it (showExpRunRange already trimmed to its own end index)
+                    const removeThrough = this.showExpRunRange ? lastIndex : lastIndex - 1;
+                    for (let i = removeThrough; i >= firstIndex; i--) {
                         fragmentData.data.splice(i, 1);
                     }
                 }
             }
         }, this);
     },
 
+    // Blank entry + x-axis tick at the start of the selected date range, so an out-of-range guide set reads as
+    // separate from the plotted window instead of running straight into it. No-op if that day already has data.
+    addRangeStartMarkers: function() {
+        const rangeStart = this.startDate ? this.formatDate(this.startDate) : null;
+        if (!rangeStart) {
+            return;
+        }
+
+        Ext4.Object.each(this.fragmentPlotData, function(label, fragmentData) {
+            const data = fragmentData.data;
+            let insertAt = data.length;
+            for (let i = 0; i < data.length; i++) {
+                const rowDate = this.formatDate(data[i].fullDate);
+                if (rowDate === rangeStart) {
+                    return; // that day is already on the axis
+                }
+                if (insertAt === data.length && rowDate > rangeStart) {
+                    insertAt = i;
+                }
+            }
+            data.splice(insertAt, 0, {
+                type: 'missing',
+                rangeTick: true, // meaningful dateless tick (range start) - kept through axis thinning
+                fullDate: rangeStart,
+                date: rangeStart,
+                groupedXTick: rangeStart
+            });
+        }, this);
+    },
+
+    // Force x-axis ticks at the selected date-range endpoints even when no data lands on them, so per-replicate,
+    // per-date, and calendar all span the chosen window. An endpoint outside the data renders as a bare tick (no point).
+    addRangeBoundaryMarkers: function() {
+        const rangeStart = this.startDate ? this.formatDate(this.startDate) : null;
+        const rangeEnd = this.endDate ? this.formatDate(this.endDate) : null;
+        if (!rangeStart && !rangeEnd) {
+            return;
+        }
+
+        Ext4.Object.each(this.fragmentPlotData, function(label, fragmentData) {
+            const data = fragmentData.data;
+            let earliest = null, latest = null;
+            for (let i = 0; i < data.length; i++) {
+                if (data[i].type === 'missing' || data[i].type === 'empty') {
+                    continue; // skip filler rows so we measure the real data extent
+                }
+                const rowDate = this.formatDate(data[i].fullDate);
+                if (earliest === null || rowDate < earliest) { earliest = rowDate; }
+                if (latest === null || rowDate > latest) { latest = rowDate; }
+            }
+            // left endpoint only when the selected start predates the first data point; right only when it postdates the last
+            if (rangeStart && (earliest === null || rangeStart < earliest)) {
+                this.insertMissingMarker(data, rangeStart);
+            }
+            if (rangeEnd && (latest === null || rangeEnd > latest)) {
+                this.insertMissingMarker(data, rangeEnd);
+            }
+        }, this);
+    },
+
+    // Insert a blank (no-value) row at dateStr in date-sorted order, unless that day already has a row.
+    insertMissingMarker: function(data, dateStr) {
+        let insertAt = data.length;
+        for (let i = 0; i < data.length; i++) {
+            const rowDate = this.formatDate(data[i].fullDate);
+            if (rowDate === dateStr) {
+                return; // that day is already on the axis
+            }
+            if (insertAt === data.length && rowDate > dateStr) {
+                insertAt = i;
+            }
+        }
+        data.splice(insertAt, 0, {
+            type: 'missing',
+            rangeTick: true, // meaningful dateless tick (selected-range endpoint) - kept through axis thinning
+            fullDate: dateStr,
+            date: dateStr,
+            groupedXTick: dateStr
+        });
+    },
+
     getBasePlotConfig : function(id, data, legenddata) {
         return {
             rendererType : 'd3',
@@ -818,6 +933,7 @@ Ext4.define("LABKEY.targetedms.QCPlotHelperBase", {
             mouseOutFn: this.plotPointMouseOut,
             mouseOutFnScope: this,
             position: this.groupedX ? 'sequential' : undefined,
+            timeBasedXTick: this.isCalendarAxisActive(),
             legendMouseOverFn: this.legendMouseOver,
             legendMouseOverFnScope: this,
             legendMouseOutFn: this.plotPointMouseOut,
@@ -832,6 +948,7 @@ Ext4.define("LABKEY.targetedms.QCPlotHelperBase", {
             hideSDLines: true
         };
 
+        this.applyCalendarPrefixProps(trendLineProps);
 
         if (treeColorMap) {
             trendLineProps.colorMap = treeColorMap;
@@ -975,6 +1092,7 @@ Ext4.define("LABKEY.targetedms.QCPlotHelperBase", {
             mouseOverFn: this.plotPointMouseOver,
             mouseOverFnScope: this,
             position: this.groupedX ? 'sequential' : undefined,
+            timeBasedXTick: this.isCalendarAxisActive(),
             disableRangeDisplay: this.isMultiSeries(),
             hoverTextFn: !showDataPoints ? function() { return 'Narrow the date range to show individual data points.' } : undefined,
             hideSDLines: true,
@@ -987,6 +1105,8 @@ Ext4.define("LABKEY.targetedms.QCPlotHelperBase", {
             trendLineProps.groupBy = "ReferenceRangeSeries";
         }
 
+        this.applyCalendarPrefixProps(trendLineProps);
+
         Ext4.apply(trendLineProps, this.getPlotTypeProperties(precursorInfo, plotType, isCUSUMMean, metricProps));
 
         let yZoomDomain = this.getYZoomDomain ? this.getYZoomDomain(id) : null;