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

@@ -270,6 +270,30 @@ public boolean isGroupXAxisValuesByDateChecked()
         }
     }
 
+    public void setGroupXAxisValuesByCalendar(boolean check)
+    {
+        if (isGroupXAxisValuesByCalendarChecked() != check)
+        {
+            if (check)
+                doAndWaitForUpdate(() -> elementCache().xAxisGroupingCalendarRadio.check());
+            else
+                doAndWaitForUpdate(() -> elementCache().xAxisGroupingReplicateRadio.check());
+        }
+    }
+
+    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 +972,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();
     }

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);
@@ -393,6 +401,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) {
@@ -427,6 +450,7 @@ Ext4.define("LABKEY.targetedms.QCPlotHelperBase", {
     renderPlots: function() {
         if (this.filterQCPoints) {
             this.truncateOutOfRangeQCPoints();
+            this.addRangeStartMarkers();
         }
         // do not persist plot options in qc folder if changed after coming through experimental folder link
         if (!this.showExpRunRange) {
@@ -492,6 +516,35 @@ Ext4.define("LABKEY.targetedms.QCPlotHelperBase", {
         }, 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',
+                fullDate: rangeStart,
+                date: rangeStart,
+                groupedXTick: rangeStart
+            });
+        }, this);
+    },
+
     getBasePlotConfig : function(id, data, legenddata) {
         return {
             rendererType : 'd3',
@@ -818,6 +871,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 +886,7 @@ Ext4.define("LABKEY.targetedms.QCPlotHelperBase", {
             hideSDLines: true
         };
 
+        this.applyCalendarPrefixProps(trendLineProps);
 
         if (treeColorMap) {
             trendLineProps.colorMap = treeColorMap;
@@ -975,6 +1030,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 +1043,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;