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

Merged
ankurjuneja merged 16 commits into from
Jan 2, 2026
Merged

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

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
16 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
4a11cf8
Update webapp/TargetedMS/js/QCTrendPlotPanel.js
ankurjuneja Dec 29, 2025
9dcf307
support for automation testing
ankurjuneja Dec 29, 2025
fbe2842
Merge branch 'develop' into fb_createGuidesetForCombinedPlots
ankurjuneja Dec 30, 2025
3ec4e1a
change visible guide sets numbers in test
ankurjuneja Dec 31, 2025
cbfba6a
delete combined guide set after creation
ankurjuneja Dec 31, 2025
aed6303
put back setup code
ankurjuneja Dec 31, 2025
a2d3c31
put back code
ankurjuneja Dec 31, 2025
da461fe
update guide set creation warning from data points count to replicate…
ankurjuneja Dec 31, 2025
0bc508a
delete combined guide set
ankurjuneja Dec 31, 2025
04af0e3
delete correct combined guide set
ankurjuneja Jan 1, 2026
4c18ed0
add log statement before saving
ankurjuneja Jan 2, 2026
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',
Comment thread
ankurjuneja marked this conversation as resolved.
Outdated
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