From e1196201db3f73ec2cbf8d045da74de56706dab5 Mon Sep 17 00:00:00 2001 From: MeeseeksMachine <39504233+meeseeksmachine@users.noreply.github.com> Date: Tue, 11 Apr 2023 15:18:36 +0200 Subject: [PATCH 1/3] Backport PR #1541: fix: axis formatting depended on initial values or changes (#1597) Co-authored-by: Maarten Breddels --- js/src/Axis.ts | 67 ++++++++++++++++++--------------------------- js/src/ColorAxis.ts | 12 ++++++-- 2 files changed, 37 insertions(+), 42 deletions(-) diff --git a/js/src/Axis.ts b/js/src/Axis.ts index 416548a1d..2134c6c42 100644 --- a/js/src/Axis.ts +++ b/js/src/Axis.ts @@ -56,12 +56,14 @@ export class Axis extends WidgetView { Promise.all([scale_promise, offset_promise]).then(() => { this.create_listeners(); - this.tick_format = this.generate_tick_formatter(); + this.create_axis(); this.set_scales_range(); + this.update_scales(); + this.set_tick_values(); + this.tickformat_changed(); this.append_axis(); }); } - create_listeners() { // Creates all event listeners @@ -122,7 +124,10 @@ export class Axis extends WidgetView { update_display() { this.g_axisline.remove(); + this.create_axis(); + this.set_tick_values(); this.set_scales_range(); + this.tickformat_changed(); this.append_axis(); } @@ -191,16 +196,6 @@ export class Axis extends WidgetView { this.axis.tickValues(this.axis_scale.scale.ticks()); } } - if ( - this.model.get('tick_format') === null || - this.model.get('tick_format') === undefined - ) { - if (!isOrdinalScale(this.axis_scale)) { - this.tick_format = this.guess_tick_format(this.axis.tickValues()); - } - } - this.axis.tickFormat(this.tick_format); - if (this.g_axisline) { this.g_axisline .transition('set_tick_values') @@ -228,9 +223,11 @@ export class Axis extends WidgetView { apply_tick_styling() { // Applies current tick styling to all displayed ticks - const tickText = this.g_axisline.selectAll('.tick text'); - applyStyles(tickText, this.model.get('tick_style')); - tickText.attr('transform', this.get_tick_transforms()); + if (this.g_axisline) { + const tickText = this.g_axisline.selectAll('.tick text'); + applyStyles(tickText, this.model.get('tick_style')); + tickText.attr('transform', this.get_tick_transforms()); + } } get_tick_transforms() { @@ -364,7 +361,6 @@ export class Axis extends WidgetView { } append_axis() { - this.create_axis(); this.update_scales(); // Create initial SVG element @@ -383,7 +379,6 @@ export class Axis extends WidgetView { applyAttrs(lineText, this.get_label_attributes()); // Apply custom settings - this.set_tick_values(); this.update_grid_lines(); this.update_color(); this.apply_tick_styling(); @@ -679,6 +674,7 @@ export class Axis extends WidgetView { //animate axis and grid lines on domain changes const animate = true; this.set_tick_values(animate); + this.tickformat_changed(); this.update_grid_lines(animate); } @@ -856,14 +852,11 @@ export class Axis extends WidgetView { }; } - _linear_scale_precision(ticks?: any[]): number { + _linear_scale_precision(): number { if (!(isLinearScale(this.axis_scale) || isColorScale(this.axis_scale))) { return -1; } - ticks = - ticks === undefined || ticks === null - ? this.axis_scale.scale.ticks() - : ticks; + let ticks: any[] = this.axis.tickValues(); // Case where all data is concentrated into one point. if (ticks.length === 1) { return 1; @@ -894,19 +887,16 @@ export class Axis extends WidgetView { } } - linear_sc_format(ticks?: any[]) { - return this.get_format_func(this._linear_scale_precision(ticks)); + linear_sc_format() { + return this.get_format_func(this._linear_scale_precision()); } - date_sc_format(ticks?: any[]) { + date_sc_format() { // assumes that scale is a linear date scale if (!isDateScale(this.axis_scale)) { return; } - ticks = - ticks === undefined || ticks === null - ? this.axis_scale.scale.ticks() - : ticks; + let ticks: any[] = this.axis.tickValues(); // diff is the difference between ticks in milliseconds const diff = Math.abs(ticks[1] - ticks[0]); @@ -977,18 +967,15 @@ export class Axis extends WidgetView { }; } - log_sc_format(ticks?: any[]) { - return this.get_format_func(this._log_sc_precision(ticks)); + log_sc_format() { + return this.get_format_func(this._log_sc_precision()); } - _log_sc_precision(ticks?: any[]): number { + _log_sc_precision(): number { if (!isLogScale(this.axis_scale)) { return -1; } - ticks = - ticks === undefined || ticks === null - ? this.axis_scale.scale.ticks() - : ticks; + let ticks: any[] = this.axis.tickValues(); const ratio = Math.abs(Math.log10(ticks[1] / ticks[0])); if (ratio >= 0.301) { @@ -1000,16 +987,16 @@ export class Axis extends WidgetView { } } - guess_tick_format(ticks?: any[]) { + guess_tick_format() { if (isDateScale(this.axis_scale) || isDateColorScale(this.axis_scale)) { - return this.date_sc_format(ticks); + return this.date_sc_format(); } else if ( isLinearScale(this.axis_scale) || isColorScale(this.axis_scale) ) { - return this.linear_sc_format(ticks); + return this.linear_sc_format(); } else if (isLogScale(this.axis_scale)) { - return this.log_sc_format(ticks); + return this.log_sc_format(); } } diff --git a/js/src/ColorAxis.ts b/js/src/ColorAxis.ts index d8688c10c..0d535b1b7 100644 --- a/js/src/ColorAxis.ts +++ b/js/src/ColorAxis.ts @@ -40,6 +40,8 @@ class ColorBar extends Axis { const that = this; return scale_promise.then(() => { that.create_listeners(); + this.create_axis(); + this.set_tick_values(); that.tick_format = that.generate_tick_formatter(); that.set_scales_range(); that.append_axis(); @@ -70,7 +72,7 @@ class ColorBar extends Axis { ); } - update_display() { + create_axis(): void { this.side = this.model.get('side'); this.vertical = this.model.get('orientation') === 'vertical'; if (this.vertical) { @@ -84,7 +86,11 @@ class ColorBar extends Axis { ? d3.axisTop(this.axis_scale.scale as d3.AxisScale) : d3.axisBottom(this.axis_scale.scale as d3.AxisScale); } + } + + update_display() { this.g_axisline.remove(); + this.create_axis(); this.g_axisline = this.d3el .select('#colorBarG' + this.cid) .append('g') @@ -415,7 +421,9 @@ class ColorBar extends Axis { transform = 'translate(0, ' + (this.side === 'top' ? 0 : this.bar_height) + ')'; } - this.g_axisline.attr('transform', transform).call(this.axis); + if (this.g_axisline) { + this.g_axisline.attr('transform', transform).call(this.axis); + } } } From c06084a3cf4674e32d636933662d9360ac38a289 Mon Sep 17 00:00:00 2001 From: Mario Buikhuizen Date: Tue, 11 Apr 2023 15:19:09 +0200 Subject: [PATCH 2/3] fix: resize not always working (#1598) The intersectObserver, used to determine if an element is visible, can contain multiple entries for the same target element. The last entry represents the last observed state, so we should use the last instead of the first for the visibility test. See: https://github.com/spacetelescope/jdaviz/issues/2129 --- js/src/Figure.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/js/src/Figure.ts b/js/src/Figure.ts index 2a013fcfe..4ba6c299b 100644 --- a/js/src/Figure.ts +++ b/js/src/Figure.ts @@ -73,10 +73,10 @@ export class Figure extends widgets.DOMWidgetView { this.intersectObserver = new IntersectionObserver( (entries: IntersectionObserverEntry[]) => { - if (entries[0].isIntersecting) { + if (entries[entries.length - 1].isIntersecting) { this.visible = true; this.debouncedRelayout(); - } else if (entries[0].rootBounds != null) { + } else if (entries[entries.length - 1].rootBounds != null) { /* When 'rootBounds' is null, 'isIntersecting' is 'false', but the plot is visible, so only change 'visible' * if rootBonds is set. I can't find any info on this behaviour. */ this.visible = false; From 4f73bd4f9b81b2a473dc8313e4d903011f008189 Mon Sep 17 00:00:00 2001 From: "Maarten A. Breddels" Date: Tue, 11 Apr 2023 16:57:53 +0200 Subject: [PATCH 3/3] Release 0.12.39 Signed-off-by: Maarten A. Breddels --- bqplot/_version.py | 2 +- js/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bqplot/_version.py b/bqplot/_version.py index ffd135eac..e9d1e6765 100644 --- a/bqplot/_version.py +++ b/bqplot/_version.py @@ -1,4 +1,4 @@ -version_info = (0, 12, 38, 'final', 0) +version_info = (0, 12, 39, 'final', 0) _specifier_ = {'alpha': 'a', 'beta': 'b', 'candidate': 'rc', 'final': ''} diff --git a/js/package.json b/js/package.json index 1880efd42..def72d121 100644 --- a/js/package.json +++ b/js/package.json @@ -1,6 +1,6 @@ { "name": "bqplot", - "version": "0.5.39", + "version": "0.5.40", "description": "bqplot", "keywords": [ "jupyter",