Skip to content

Support creating guide sets via drag/drop for combined plots #1153

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ankurjuneja wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

Support creating guide sets via drag/drop for combined plots #1153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4732df5
create guide sets with drag & drop for combined plots
ankurjuneja Dec 20, 2025
547972b
Merge branch 'develop' into fb_createGuidesetForCombinedPlots
ankurjuneja Dec 23, 2025
c4b24dc
enable create guide sets for multi metrics plots
ankurjuneja Dec 23, 2025
a1eaf62
enable create guide sets for grouped by date plots
ankurjuneja Dec 24, 2025
675cd4f
update tooltip
ankurjuneja Dec 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion webapp/TargetedMS/js/QCPlotHelperBase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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
});

Expand Down
15 changes: 8 additions & 7 deletions webapp/TargetedMS/js/QCPlotHelperWrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down Expand Up @@ -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;
},

Expand Down
15 changes: 8 additions & 7 deletions webapp/TargetedMS/js/QCTrendPlotPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Copy link
Contributor

@labkey-jeckels labkey-jeckels Dec 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
tooltip: 'Enable/disable guide set creation mode. Supported for plots, 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) {
Expand All @@ -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;
Expand Down Expand Up @@ -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;
},

Expand All @@ -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) {
Expand All @@ -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) {
Expand Down