diff --git a/webapp/TargetedMS/js/QCPlotHelperBase.js b/webapp/TargetedMS/js/QCPlotHelperBase.js index 935e91b88..652739377 100644 --- a/webapp/TargetedMS/js/QCPlotHelperBase.js +++ b/webapp/TargetedMS/js/QCPlotHelperBase.js @@ -694,7 +694,7 @@ Ext4.define("LABKEY.targetedms.QCPlotHelperBase", { return precursor; }, - addEachCombinedPrecursorPlot: function(plotIndex, id, combinePlotData, groupColors, yAxisCount, metricProps, showLogInvalid, legendMargin, plotType, isCUSUMMean) { + addEachCombinedPrecursorPlot: function(plotIndex, id, combinePlotData, groupColors, yAxisCount, metricProps, showLogInvalid, legendMargin, plotType, isCUSUMMean, scope) { let plotLegendData = this.getCombinedPlotLegendData(metricProps, groupColors, yAxisCount, plotType, isCUSUMMean); if (plotType !== LABKEY.vis.TrendingLinePlotType.CUSUM) { @@ -794,6 +794,24 @@ Ext4.define("LABKEY.targetedms.QCPlotHelperBase", { visibility: this.isMultiSeries() ? undefined : 'hidden' } }, + brushing: !this.allowGuideSetBrushing() ? undefined : { + dimension: 'x', + fillOpacity: 0.4, + fillColor: 'rgba(20, 204, 201, 1)', + strokeColor: 'rgba(20, 204, 201, 1)', + brushstart: function(event, data, extent, plot, layerSelections) { + scope.plotBrushStartEvent(plot); + }, + brush: function(event, data, extent, plot, layerSelections) { + scope.plotBrushEvent(extent, plot, layerSelections); + }, + brushend: function(event, data, extent, plot, layerSelections) { + scope.plotBrushEndEvent(data[data.length - 1], extent, plot); + }, + brushclear: function(event, data, plot, layerSelections) { + scope.plotBrushClearEvent(data[data.length - 1], plot); + } + }, properties: trendLineProps }); diff --git a/webapp/TargetedMS/js/QCPlotHelperWrapper.js b/webapp/TargetedMS/js/QCPlotHelperWrapper.js index 0178168c7..686efef74 100644 --- a/webapp/TargetedMS/js/QCPlotHelperWrapper.js +++ b/webapp/TargetedMS/js/QCPlotHelperWrapper.js @@ -128,6 +128,7 @@ Ext4.define("LABKEY.targetedms.QCPlotHelperWrapper", { }, addCombinedPeptideSinglePlot : function(metricProps) { + const me = this; // for plot brushing let yAxisCount = this.isMultiSeries() ? 2 : 1, //Will only have a right if there is already a left y-axis groupColors = this.getColorRange(), combinePlotData = this.getCombinedPlotInitData(), @@ -195,25 +196,25 @@ Ext4.define("LABKEY.targetedms.QCPlotHelperWrapper", { legendMargin = 300; if (this.showMetricValuePlot()) { - this.addEachCombinedPrecursorPlot(plotIndex, ids[plotIndex++], combinePlotData, groupColors, yAxisCount, metricProps, showLogInvalid, legendMargin, LABKEY.vis.TrendingLinePlotType.LeveyJennings); + this.addEachCombinedPrecursorPlot(plotIndex, ids[plotIndex++], combinePlotData, groupColors, yAxisCount, metricProps, showLogInvalid, legendMargin, LABKEY.vis.TrendingLinePlotType.LeveyJennings, false, me); } if (this.showMovingRangePlot()) { - this.addEachCombinedPrecursorPlot(plotIndex, ids[plotIndex++], combinePlotData, groupColors, yAxisCount, metricProps, showLogInvalid, legendMargin, LABKEY.vis.TrendingLinePlotType.MovingRange); + this.addEachCombinedPrecursorPlot(plotIndex, ids[plotIndex++], combinePlotData, groupColors, yAxisCount, metricProps, showLogInvalid, legendMargin, LABKEY.vis.TrendingLinePlotType.MovingRange, false, me); } if (this.showMeanCUSUMPlot()) { - this.addEachCombinedPrecursorPlot(plotIndex, ids[plotIndex++], combinePlotData, groupColors, yAxisCount, metricProps, showLogInvalid, legendMargin, LABKEY.vis.TrendingLinePlotType.CUSUM, true); + this.addEachCombinedPrecursorPlot(plotIndex, ids[plotIndex++], combinePlotData, groupColors, yAxisCount, metricProps, showLogInvalid, legendMargin, LABKEY.vis.TrendingLinePlotType.CUSUM, true, me); } if (this.showVariableCUSUMPlot()) { - this.addEachCombinedPrecursorPlot(plotIndex, ids[plotIndex], combinePlotData, groupColors, yAxisCount, metricProps, showLogInvalid, legendMargin, LABKEY.vis.TrendingLinePlotType.CUSUM, false); + this.addEachCombinedPrecursorPlot(plotIndex, ids[plotIndex], combinePlotData, groupColors, yAxisCount, metricProps, showLogInvalid, legendMargin, LABKEY.vis.TrendingLinePlotType.CUSUM, false, me); } if (this.showTrailingMeanPlot()) { - this.addEachCombinedPrecursorPlot(plotIndex, ids[plotIndex], combinePlotData, groupColors, yAxisCount, metricProps, showLogInvalid, legendMargin, LABKEY.vis.TrendingLinePlotType.TrailingMean, false); + this.addEachCombinedPrecursorPlot(plotIndex, ids[plotIndex], combinePlotData, groupColors, yAxisCount, metricProps, showLogInvalid, legendMargin, LABKEY.vis.TrendingLinePlotType.TrailingMean, false, me); } if (this.showTrailingCVPlot()) { - this.addEachCombinedPrecursorPlot(plotIndex, ids[plotIndex], combinePlotData, groupColors, yAxisCount, metricProps, showLogInvalid, legendMargin, LABKEY.vis.TrendingLinePlotType.TrailingCV, false); + this.addEachCombinedPrecursorPlot(plotIndex, ids[plotIndex], combinePlotData, groupColors, yAxisCount, metricProps, showLogInvalid, legendMargin, LABKEY.vis.TrendingLinePlotType.TrailingCV, false, me); } - + this.setPlotBrushingDisplayStyle(); return true; }, diff --git a/webapp/TargetedMS/js/QCTrendPlotPanel.js b/webapp/TargetedMS/js/QCTrendPlotPanel.js index 16b5e3aae..89489a698 100644 --- a/webapp/TargetedMS/js/QCTrendPlotPanel.js +++ b/webapp/TargetedMS/js/QCTrendPlotPanel.js @@ -1169,7 +1169,7 @@ Ext4.define('LABKEY.targetedms.QCTrendPlotPanel', { if (!this.createGuideSetToggleButton) { this.createGuideSetToggleButton = Ext4.create('Ext.button.Button', { text: 'Create Guide Set', - tooltip: 'Enable/disable guide set creation mode. Supported for separate plots, not grouped by date, when ' + LABKEY.targetedms.QCPlotHelperBase.maxPointsPerSeries + ' or fewer samples are shown', + tooltip: 'Enable/disable guide set creation mode. Supported for plots, when ' + LABKEY.targetedms.QCPlotHelperBase.maxPointsPerSeries + ' or fewer samples are shown', disabled: !this.canCreateGuideSetFromPlot(), enableToggle: true, handler: function(btn) { @@ -1183,11 +1183,11 @@ Ext4.define('LABKEY.targetedms.QCTrendPlotPanel', { }, canCreateGuideSetFromPlot : function() { - return !(this.groupedX || this.singlePlot || this.isMultiSeries() || this.showExpRunRange || !this.showDataPoints); + return !(this.showExpRunRange || !this.showDataPoints); }, setBrushingEnabled : function(enabled) { - // we don't currently allow creation of guide sets in single plot mode, grouped x-axis mode, multi series mode or when showingExpRunRange + // we don't currently allow creation when showingExpRunRange this.getGuideSetCreateButton().setDisabled(!this.canCreateGuideSetFromPlot()); this.enableBrushing = enabled; @@ -1552,7 +1552,7 @@ Ext4.define('LABKEY.targetedms.QCTrendPlotPanel', { this.bringSvgElementToFront(plot, "g.guideset-svg-button"); }, - plotBrushClearEvent : function(data, plot) { + plotBrushClearEvent : function() { this.plotBrushSelection = undefined; }, @@ -1561,7 +1561,7 @@ Ext4.define('LABKEY.targetedms.QCTrendPlotPanel', { }, allowGuideSetBrushing : function() { - return this.canUserEdit() && !this.groupedX; + return this.canUserEdit(); }, createGuideSetSvgButton : function(plot, text, xLeftPos, width) { @@ -1586,8 +1586,9 @@ Ext4.define('LABKEY.targetedms.QCTrendPlotPanel', { setPlotBrushingDisplayStyle : function() { // hide the brushing related components for all plots if not in "create guide set" mode var displayStyle = this.enableBrushing ? 'inline' : 'none'; - d3.selectAll('.brush').style({'display': displayStyle}); - d3.selectAll('.x-axis-handle').style({'display': displayStyle}); + // Scope the selection to only plots within the current plotDivId to avoid affecting other plot types + d3.select('#' + this.plotDivId).selectAll('.brush').style({'display': displayStyle}); + d3.select('#' + this.plotDivId).selectAll('.x-axis-handle').style({'display': displayStyle}); }, clearPlotBrush : function(plot) {