Backports for 3.7.3 (bokeh#14455)

* Update switcher.json

* Fix Legend's glyph rendering for `dpr != 1` (bokeh#14443)

* Fix Legend's glyph rendering for dpr != 1

* Allow to override screen scaling in testing

* Add regression tests

* Fix Legend's inactive visuals in CSS mode (bokeh#14454)

* Fix Legend's inactive visuals in CSS mode

* Add visual regression tests

* Update child views without removing their elements (bokeh#14459)

* Implement LayoutDOM.update_children without explicitly removing nodes

* Fix lint

* Fix logic

* More lint

* Simplify for loop

* No tabs

* Also update handling of element views

* Remove empty line

* Fix self_target children lookup

* Fix type errors

* Fix and simplify logic

* Fix element views

* Apply suggestions from code review

* Simplify further

* Fix lint

* Revert to append (instead of appendChild)

Rever

* Compare DOM nodes non-structurally by identity

* Add regression tests

* Unify all rebuilding of child views

---------

Co-authored-by: Mateusz Paprocki <[email protected]>

* update docs for DatetimeTickFormatter (bokeh#14452)

* Updated formatters.py

---------

Co-authored-by: Chinmay <[email protected]>

* fix links to code pen (bokeh#14471)

* add jquery to fix links to code pen

* remove jquery dependency

* remove patched show function

* use Node.COMMENT_NODE instead of number

* avoid line breaks in templates and code pen

* fix missing title

* Fix positioning of DOM rendered Legend annotations (bokeh#14457)

* Fix positioning of DOM rendered Legend annotations

* Treat inner canvas panels equally to outer

* Robustify resize of canvas after layout

* Update visual baselines

* Make sticky toolbar work correctly

* Refactor PlotView._update_layout()

* Invalidate layout if renderers change

* Add more regression tests

* Update visual baselines

* Always repaint Legend's glyphs after rendering

* Update visual baselines

* Implement move semantics in Plot.add_layout()

* Tighten regressions' baseline viewports

* Fix types of splattable figure's attributes (bokeh#14401)

* Fix types of splattable figure's attributes

* Add rudimentary typing tests

* Python 3.10 compatibility

* Improve corner case handling in datetime formatter (bokeh#14473)

* Add release notes

---------

Co-authored-by: Philipp Rudiger <[email protected]>
Co-authored-by: Moritz Schreiber <[email protected]>
Co-authored-by: Chinmay <[email protected]>

Author: 4 people

bokehjs/src/less/canvas.less

@@ -10,9 +10,16 @@
 }
 
 .bk-events {
+  display: grid;
+  grid-template-areas:
+    ".    above  .    "
+    "left center right"
+    ".    below  .    ";
+
   touch-action: none;
   overflow: visible;
   cursor: default;
+
 }
 
 .bk-events:focus, .bk-events:focus-visible {

bokehjs/src/less/cartesian_frame.less

@@ -0,0 +1,11 @@
+@import "./_mixins.less";
+
+:host {
+  display: grid;
+  grid-template-areas:
+    ".    above  .    "
+    "left center right"
+    ".    below  .    ";
+  grid-template-rows: max-content 1fr max-content;
+  grid-template-columns: max-content 1fr max-content;
+}

bokehjs/src/less/legend.less

@@ -56,14 +56,25 @@
   background-color: var(--item-background-color);
 }
 
-.bk-item.bk-active {
-  background-color: var(--item-background-active-color);
-}
-
 :host(.bk-interactive) .bk-item {
   cursor: pointer;
 }
 
 .bk-glyph {
   position: relative;
 }
+
+.bk-overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.bk-item.bk-inactive {
+  .bk-overlay {
+    background-color: var(--item-background-inactive-color);
+  }
+}

bokehjs/src/less/toolbar.less

@@ -12,6 +12,7 @@
   flex-wrap: nowrap;
   align-items: center;
   .no-user-select();
+  pointer-events: all;
 }
 
 :host(.bk-inner) {

bokehjs/src/lib/core/util/eq.ts

@@ -234,19 +234,23 @@ export class Comparator {
   }
 
   nodes(a: Node, b: Node): boolean {
-    if (a.nodeType != b.nodeType) {
-      return false
-    }
+    if (this.structural) {
+      if (a.nodeType != b.nodeType) {
+        return false
+      }
 
-    if (a.textContent != b.textContent) {
-      return false
-    }
+      if (a.textContent != b.textContent) {
+        return false
+      }
 
-    if (!this.iterables(a.childNodes, b.childNodes)) {
-      return false
-    }
+      if (!this.iterables(a.childNodes, b.childNodes)) {
+        return false
+      }
 
-    return true
+      return true
+    } else {
+      return a === b
+    }
   }
 }
 

bokehjs/src/lib/core/util/templating.ts

@@ -24,10 +24,21 @@ export const DEFAULT_FORMATTERS: {[key in BuiltinFormatter]: FormatterFunc} = {
   raw:      (value: unknown, _format: string, _special_vars: Vars) => to_string(value),
   basic:    (value: unknown,  format: string,  special_vars: Vars) => basic_formatter(value, format, special_vars),
   numeral:  (value: unknown,  format: string, _special_vars: Vars) => Numbro.format(value, format),
-  datetime: (value: unknown,  format: string, _special_vars: Vars) => tz(value, format),
+  datetime: (value: unknown,  format: string, _special_vars: Vars) => datetime(value, format),
   printf:   (value: unknown,  format: string, _special_vars: Vars) => sprintf(format, value),
 }
 
+/**
+ * Format finite numbers as dates or return NaN.
+ */
+export function datetime(value: unknown, format?: string): string {
+  if (isNumber(value) && isFinite(value)) {
+    return tz(value, format)
+  } else {
+    return "NaN"
+  }
+}
+
 export function sprintf(format: string, ...args: unknown[]): string {
   return sprintf_js(format, ...args)
 }

bokehjs/src/lib/models/annotations/legend.ts

@@ -154,6 +154,10 @@ export class LegendView extends AnnotationView {
     return false
   }
 
+  protected _toggle_inactive({el, item}: Entry): void {
+    el.classList.toggle(legend_css.inactive, !this.is_active(item))
+  }
+
   protected _render_items(): void {
     this.entries = []
 
@@ -169,17 +173,20 @@ export class LegendView extends AnnotationView {
 
         const glyph_el = glyph.canvas
         const label_el = div({class: legend_css.label}, `${label}`)
-        const item_el = div({class: legend_css.item}, glyph_el, label_el)
+        const overlay_el = div({class: legend_css.overlay})
+        const item_el = div({class: legend_css.item}, glyph_el, label_el, overlay_el)
         item_el.classList.toggle(legend_css.hidden, !item.visible)
 
+        const entry: Entry = {el: item_el, glyph, label_el, item, label, i: i++, row: 0, col: 0}
+        this.entries.push(entry)
+
         item_el.addEventListener("pointerdown", () => {
           this.model.trigger_event(new LegendItemClick(this.model, item))
           for (const renderer of item.renderers) {
             click_policy(renderer)
           }
+          this._toggle_inactive(entry)
         })
-
-        this.entries.push({el: item_el, glyph, label_el, item, label, i: i++, row: 0, col: 0})
       }
     }
 
@@ -235,11 +242,8 @@ export class LegendView extends AnnotationView {
       }
     }
 
-    const {is_active} = this
-    for (const {el, item} of this.entries) {
-      if (!is_active(item)) {
-        el.classList.add(legend_css.active)
-      }
+    for (const entry of this.entries) {
+      this._toggle_inactive(entry)
     }
 
     for (const {el, i, row, col} of this.entries) {
@@ -339,7 +343,7 @@ export class LegendView extends AnnotationView {
       const {color} = this.visuals.inactive_fill.computed_values()
       this.style.append(`
       .${legend_css.item} {
-        --item-background-active-color: ${color};
+        --item-background-inactive-color: ${color};
       }
       `)
     }
@@ -411,6 +415,7 @@ export class LegendView extends AnnotationView {
   override after_render(): void {
     super.after_render()
     this.update_position()
+    this.request_paint()   // paint glyphs
   }
 
   get location(): {x: HAlign | number, y: VAlign | number} {
@@ -616,7 +621,7 @@ export class LegendView extends AnnotationView {
 
       ctx.layer.undo_transform(() => {
         const glyph_el = glyph.canvas
-        const glyph_bbox = bounding_box(glyph_el).relative_to(canvas_bbox)
+        const glyph_bbox = bounding_box(glyph_el).relative_to(canvas_bbox).scale(ctx.layer.pixel_ratio)
         ctx.drawImage(glyph_el, glyph_bbox.x, glyph_bbox.y)
       })
 

bokehjs/src/lib/models/annotations/toolbar_panel.ts

@@ -3,21 +3,15 @@ import type {ToolbarView} from "../tools/toolbar"
 import {Toolbar} from "../tools/toolbar"
 import type {IterViews} from "core/build_views"
 import {build_view} from "core/build_views"
-import {empty, position, display, undisplay} from "core/dom"
 import type {Size, Layoutable} from "core/layout"
 import {SideLayout} from "core/layout/side_panel"
-import {BBox} from "core/util/bbox"
 import type * as p from "core/properties"
 
 export class ToolbarPanelView extends AnnotationView {
   declare model: ToolbarPanel
 
   declare layout: Layoutable
 
-  override rendering_target(): HTMLElement {
-    return this.plot_view.canvas_view.events_el
-  }
-
   override update_layout(): void {
     this.layout = new SideLayout(this.panel!, () => this.get_size(), true)
   }
@@ -70,33 +64,27 @@ export class ToolbarPanelView extends AnnotationView {
     this.toolbar_view.render_to(this.shadow_el)
   }
 
-  private _previous_bbox: BBox = new BBox()
+  private get is_horizontal(): boolean {
+    return this.toolbar_view.model.horizontal
+  }
 
   protected _paint(): void {
-    // TODO this shouldn't be necessary
-    display(this.el)
-
-    // TODO: this should be handled by the layout
-    const {bbox} = this.layout
-    if (!this._previous_bbox.equals(bbox)) {
-      position(this.el, bbox)
-      this._previous_bbox = bbox
-
-      empty(this.el)
-      this.el.style.position = "absolute"
-
-      const {style} = this.toolbar_view.el
-      if (this.toolbar_view.model.horizontal) {
-        style.width = "100%"
-        style.height = "unset"
-      } else {
-        style.width = "unset"
-        style.height = "100%"
-      }
+    const {style} = this.toolbar_view.el
+    if (this.is_horizontal) {
+      style.width = "100%"
+      style.height = "unset"
+    } else {
+      style.width = "unset"
+      style.height = "100%"
     }
 
-    if (!this.model.visible) {
-      undisplay(this.el)
+    // allow shrinking past content size in flex layouts
+    if (this.is_horizontal) {
+      this.el.style.minWidth = "0"
+      this.el.style.minHeight = "unset"
+    } else {
+      this.el.style.minWidth = "unset"
+      this.el.style.minHeight = "0"
     }
   }
 

bokehjs/src/lib/models/canvas/canvas_panel.ts

@@ -4,9 +4,11 @@ import type {Node} from "../coordinates/node"
 import type * as p from "core/properties"
 import {InlineStyleSheet} from "core/dom"
 import type {StyleSheetLike} from "core/dom"
+import type {RenderingTarget} from "core/dom_view"
 import type {XY} from "core/util/bbox"
 import {BBox} from "core/util/bbox"
 import {Place} from "core/enums"
+import {Bool} from "core/kinds"
 import {isNumber} from "core/util/types"
 import * as css from "styles/canvas_panel.css"
 
@@ -25,8 +27,12 @@ export class CanvasPanelView extends StyledElementView {
     return [...super.stylesheets(), css.default, this.position]
   }
 
-  override rendering_target(): HTMLElement {
-    return this.parent.canvas_view.events_el
+  override rendering_target(): RenderingTarget {
+    if (this.model.inner) {
+      return this.parent.frame_view.shadow_el
+    } else {
+      return this.parent.canvas_view.events_el
+    }
   }
 
   override render(): void {
@@ -72,6 +78,7 @@ export namespace CanvasPanel {
   export type Attrs = p.AttrsOf<Props>
   export type Props = StyledElement.Props & {
     place: p.Property<Place>
+    inner: p.Property<boolean>
   }
 }
 
@@ -90,6 +97,7 @@ export class CanvasPanel extends StyledElement {
 
     this.define<CanvasPanel.Props>({
       place: [ Place ],
+      inner: [ Bool, false ],
     })
   }
 }

bokehjs/src/lib/models/canvas/cartesian_frame.ts

@@ -11,7 +11,9 @@ import type {BBox} from "core/util/bbox"
 import {entries} from "core/util/object"
 import {assert} from "core/util/assert"
 import type {Dict} from "core/types"
+import type {StyleSheetLike} from "core/dom"
 import type * as p from "core/properties"
+import * as css from "styles/cartesian_frame.css"
 
 type Ranges = Dict<Range>
 type Scales = Dict<Scale>
@@ -29,6 +31,10 @@ export class CartesianFrameView extends CanvasPanelView {
     super.remove()
   }
 
+  override stylesheets(): StyleSheetLike[] {
+    return [...super.stylesheets(), css.default]
+  }
+
   override connect_signals(): void {
     super.connect_signals()
     const {x_range, y_range, x_scale, y_scale, extra_x_ranges, extra_y_ranges, extra_x_scales, extra_y_scales} = this.model.properties