diff --git a/webapp/TargetedMS/css/qcTrendPlotReport.css b/webapp/TargetedMS/css/qcTrendPlotReport.css index 2efcc589a..559674d9a 100644 --- a/webapp/TargetedMS/css/qcTrendPlotReport.css +++ b/webapp/TargetedMS/css/qcTrendPlotReport.css @@ -118,10 +118,15 @@ background-color: #f0f0f0; } +/* Cursors stay in CSS: Batik rejects zoom-in/zoom-out in an inline style when exporting the SVG. */ .y-zoom-overlay { cursor: zoom-in; } +.y-zoom-overlay.zoomed { + cursor: zoom-out; +} + .y-zoom-pending-line { stroke: rgba(20, 204, 201, 1); stroke-width: 2px; diff --git a/webapp/TargetedMS/js/QCPlotHelperBase.js b/webapp/TargetedMS/js/QCPlotHelperBase.js index fd11d3ede..1f2593187 100644 --- a/webapp/TargetedMS/js/QCPlotHelperBase.js +++ b/webapp/TargetedMS/js/QCPlotHelperBase.js @@ -1265,12 +1265,12 @@ Ext4.define("LABKEY.targetedms.QCPlotHelperBase", { let isZoomed = !!(zoomEntry && zoomEntry[axis]); let overlayEl = svg.append('rect') - .attr('class', 'y-zoom-overlay') + .attr('class', 'y-zoom-overlay' + (isZoomed ? ' zoomed' : '')) .attr('x', overlayX) .attr('y', gridTop) .attr('width', overlayW) .attr('height', gridBottom - gridTop) - .style({'fill': 'transparent', 'cursor': isZoomed ? 'zoom-out' : 'zoom-in'}); + .style({'fill': '#ffffff', 'fill-opacity': 0, 'pointer-events': 'all'}); if (isZoomed) { overlayEl.on('click', function() { me.resetYZoom(plotId, axis); }); @@ -1301,7 +1301,7 @@ Ext4.define("LABKEY.targetedms.QCPlotHelperBase", { .attr('x', 0).attr('y', 0) .attr('width', parseFloat(svg.attr('width')) || (gridRight + 80)) .attr('height', parseFloat(svg.attr('height')) || (gridBottom + 50)) - .style({'fill': 'transparent', 'pointer-events': 'all', 'cursor': 'default'}); + .style({'fill': '#ffffff', 'fill-opacity': 0, 'pointer-events': 'all', 'cursor': 'default'}); zoomButtonGroup = svg.append('g').attr('class', 'y-zoom-buttons'); @@ -1374,7 +1374,7 @@ Ext4.define("LABKEY.targetedms.QCPlotHelperBase", { plotClickCapture = svg.append('rect') .attr('x', gridLeft).attr('y', gridTop) .attr('width', gridRight - gridLeft).attr('height', gridBottom - gridTop) - .style({'fill': 'transparent', 'cursor': 'crosshair'}) + .style({'fill': '#ffffff', 'fill-opacity': 0, 'pointer-events': 'all', 'cursor': 'crosshair'}) .on('click', function() { let clickY = clampY(d3.mouse(svg.node())[1]); let firstY = pendingStartY; diff --git a/webapp/TargetedMS/js/QCTrendPlotPanel.js b/webapp/TargetedMS/js/QCTrendPlotPanel.js index 4fe3c9499..e0e59077f 100644 --- a/webapp/TargetedMS/js/QCTrendPlotPanel.js +++ b/webapp/TargetedMS/js/QCTrendPlotPanel.js @@ -1741,7 +1741,7 @@ Ext4.define('LABKEY.targetedms.QCTrendPlotPanel', { if (!d || !d.name || d.separator) return; let isHidden = !!(hidden[d.hoverText || d.name.split(LABKEY.targetedms.QCPlotHelperBase.SERIES_NAME_SEP)[0]]); let item = d3.select(this); - item.select('path').attr('fill', isHidden ? 'transparent' : (d.color || null)); + item.select('path').attr('fill', d.color || null).attr('fill-opacity', isHidden ? 0 : null); item.select('text').attr('opacity', isHidden ? 0.3 : 1); item.select('.legend-check').remove(); if (!isHidden) { @@ -1790,7 +1790,7 @@ Ext4.define('LABKEY.targetedms.QCTrendPlotPanel', { let isHidden = !!hidden[frag]; let isActive = d.name.indexOf(fragment + (hasYRightMetric ? LABKEY.targetedms.QCPlotHelperBase.SERIES_NAME_SEP : '')) === 0; let item = d3.select(this); - item.select('path').attr('fill', isHidden ? 'transparent' : (d.color || null)); + item.select('path').attr('fill', d.color || null).attr('fill-opacity', isHidden ? 0 : null); item.select('text').attr('opacity', isHidden ? 0.1 : (isActive ? 1 : 0.1)); }); @@ -1881,7 +1881,7 @@ Ext4.define('LABKEY.targetedms.QCTrendPlotPanel', { if (!d || !d.name || d.separator) return; let isHidden = !!hidden[d.hoverText || d.name.split(LABKEY.targetedms.QCPlotHelperBase.SERIES_NAME_SEP)[0]]; let item = d3.select(this); - item.select('path').attr('fill', isHidden ? 'transparent' : (d.color || null)); + item.select('path').attr('fill', d.color || null).attr('fill-opacity', isHidden ? 0 : null); item.select('text').attr('opacity', isHidden ? 0.3 : 1); item.select('.legend-check').remove(); if (!isHidden) {