Use visibility: hidden on hidden tabs (bokeh#8661)

bokehjs/src/lib/core/dom.ts

@@ -116,14 +116,22 @@ export function empty(element: HTMLElement): void {
   }
 }
 
-export function show(element: HTMLElement): void {
+export function display(element: HTMLElement): void {
   element.style.display = ""
 }
 
-export function hide(element: HTMLElement): void {
+export function undisplay(element: HTMLElement): void {
   element.style.display = "none"
 }
 
+export function show(element: HTMLElement): void {
+  element.style.visibility = ""
+}
+
+export function hide(element: HTMLElement): void {
+  element.style.visibility = "hidden"
+}
+
 export function offset(element: HTMLElement) {
   const rect = element.getBoundingClientRect()
   return {

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

@@ -4,7 +4,7 @@ import {Signal0} from "core/signaling"
 import {LineScalar, FillScalar} from "core/property_mixins"
 import {Line, Fill} from "core/visuals"
 import {SpatialUnits, RenderMode} from "core/enums"
-import {show, hide} from "core/dom"
+import {display, undisplay} from "core/dom"
 import * as p from "core/properties"
 import {BBox, CoordinateTransform} from "core/util/bbox"
 
@@ -23,7 +23,7 @@ export class BoxAnnotationView extends AnnotationView {
     super.initialize(options)
     this.plot_view.canvas_overlays.appendChild(this.el)
     this.el.classList.add("bk-shading")
-    hide(this.el)
+    undisplay(this.el)
   }
 
   connect_signals(): void {
@@ -42,14 +42,14 @@ export class BoxAnnotationView extends AnnotationView {
 
   render(): void {
     if (!this.model.visible && this.model.render_mode == 'css')
-      hide(this.el)
+      undisplay(this.el)
 
     if (!this.model.visible)
       return
 
     // don't render if *all* position are null
     if (this.model.left == null && this.model.right == null && this.model.top == null && this.model.bottom == null) {
-      hide(this.el)
+      undisplay(this.el)
       return
     }
 
@@ -101,7 +101,7 @@ export class BoxAnnotationView extends AnnotationView {
     const ld = this.model.properties.line_dash.value().length < 2 ? "solid" : "dashed"
     this.el.style.borderStyle = ld
 
-    show(this.el)
+    display(this.el)
   }
 
   protected _canvas_box(sleft: number, sright: number, sbottom: number, stop: number): void {

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

@@ -1,6 +1,6 @@
 import {TextAnnotation, TextAnnotationView} from "./text_annotation"
 import {SpatialUnits, AngleUnits} from "core/enums"
-import {hide} from "core/dom"
+import {undisplay} from "core/dom"
 import {Size} from "core/layout"
 import * as mixins from "core/property_mixins"
 import * as p from "core/properties"
@@ -24,7 +24,7 @@ export class LabelView extends TextAnnotationView {
 
   render(): void {
     if (!this.model.visible && this.model.render_mode == 'css')
-      hide(this.el)
+      undisplay(this.el)
 
     if (!this.model.visible)
       return

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

@@ -4,7 +4,7 @@ import {ColumnDataSource} from "../sources/column_data_source"
 import {TextVector} from "core/property_mixins"
 import {LineJoin, LineCap} from "core/enums"
 import {SpatialUnits} from "core/enums"
-import {div, show, hide} from "core/dom"
+import {div, display, undisplay} from "core/dom"
 import * as p from "core/properties"
 import {Size} from "core/layout"
 import {Arrayable} from "core/types"
@@ -93,7 +93,7 @@ export class LabelSetView extends TextAnnotationView {
 
   render(): void {
     if (!this.model.visible && this.model.render_mode == 'css')
-      hide(this.el)
+      undisplay(this.el)
 
     if (!this.model.visible)
       return
@@ -182,7 +182,7 @@ export class LabelSetView extends TextAnnotationView {
       el.style.borderColor = `${this.visuals.border_line.color_value()}`
     }
 
-    show(el)
+    display(el)
   }
 }
 

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

@@ -3,7 +3,7 @@ import {Scale} from "../scales/scale"
 import {LineScalar} from "core/property_mixins"
 import {Line} from "core/visuals"
 import {SpatialUnits, RenderMode, Dimension} from "core/enums"
-import {show, hide} from "core/dom"
+import {display, undisplay} from "core/dom"
 import * as p from "core/properties"
 import {CoordinateTransform} from "core/util/bbox"
 
@@ -15,7 +15,7 @@ export class SpanView extends AnnotationView {
     super.initialize(options)
     this.plot_view.canvas_overlays.appendChild(this.el)
     this.el.style.position = "absolute"
-    hide(this.el)
+    undisplay(this.el)
   }
 
   connect_signals(): void {
@@ -35,7 +35,7 @@ export class SpanView extends AnnotationView {
 
   render(): void {
     if (!this.model.visible && this.model.render_mode == 'css')
-      hide(this.el)
+      undisplay(this.el)
 
     if (!this.model.visible)
       return
@@ -46,7 +46,7 @@ export class SpanView extends AnnotationView {
   protected _draw_span(): void {
     const loc = this.model.for_hover ? this.model.computed_location : this.model.location
     if (loc == null) {
-      hide(this.el)
+      undisplay(this.el)
       return
     }
 
@@ -86,7 +86,7 @@ export class SpanView extends AnnotationView {
       this.el.style.height = `${height}px`
       this.el.style.backgroundColor = this.model.properties.line_color.value()
       this.el.style.opacity = this.model.properties.line_alpha.value()
-      show(this.el)
+      display(this.el)
     } else if (this.model.render_mode == "canvas") {
       const {ctx} = this.plot_view.canvas_view
       ctx.save()

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

@@ -1,6 +1,6 @@
 import {Annotation, AnnotationView} from "./annotation"
 import {Text, Line, Fill} from "core/visuals"
-import {show, hide} from "core/dom"
+import {display, undisplay} from "core/dom"
 import {RenderMode} from "core/enums"
 import * as p from "core/properties"
 import {get_text_height} from "core/util/text"
@@ -100,7 +100,7 @@ export abstract class TextAnnotationView extends AnnotationView {
   }
 
   protected _css_text(ctx: Context2d, text: string, sx: number, sy: number, angle: number): void {
-    hide(this.el)
+    undisplay(this.el)
 
     this.visuals.text.set_value(ctx)
     const bbox_dims = this._calculate_bounding_box_dimensions(ctx, text)
@@ -135,7 +135,7 @@ export abstract class TextAnnotationView extends AnnotationView {
     }
 
     this.el.textContent = text
-    show(this.el)
+    display(this.el)
   }
 }
 

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

@@ -1,6 +1,6 @@
 import {TextAnnotation, TextAnnotationView} from "./text_annotation"
 import {FontStyle, VerticalAlign, TextAlign, TextBaseline} from "core/enums"
-import {hide} from "core/dom"
+import {undisplay} from "core/dom"
 import {Size} from "core/layout"
 import {Text} from "core/visuals"
 import * as mixins from "core/property_mixins"
@@ -81,7 +81,7 @@ export class TitleView extends TextAnnotationView {
   render(): void {
     if (!this.model.visible) {
       if (this.model.render_mode == 'css')
-        hide(this.el)
+        undisplay(this.el)
       return
     }
 

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

@@ -2,7 +2,7 @@ import {Annotation, AnnotationView} from "./annotation"
 import {Toolbar} from "../tools/toolbar"
 import {ToolbarBaseView} from "../tools/toolbar_base"
 import {build_views, remove_views} from "core/build_views"
-import {empty, position, show, hide} from "core/dom"
+import {empty, position, display, undisplay} from "core/dom"
 import {Size} from "core/layout"
 import * as p from "core/properties"
 
@@ -30,7 +30,7 @@ export class ToolbarPanelView extends AnnotationView {
   render(): void {
     super.render()
     if (!this.model.visible) {
-      hide(this.el)
+      undisplay(this.el)
       return
     }
 
@@ -44,7 +44,7 @@ export class ToolbarPanelView extends AnnotationView {
 
     empty(this.el)
     this.el.appendChild(toolbar_view.el)
-    show(this.el)
+    display(this.el)
   }
 
   protected _get_size(): Size {

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

@@ -1,6 +1,6 @@
 import {Annotation, AnnotationView} from "./annotation"
 import {TooltipAttachment} from "core/enums"
-import {div, show, hide, empty} from "core/dom"
+import {div, display, undisplay, empty} from "core/dom"
 import * as p from "core/properties"
 
 export function compute_side(attachment: TooltipAttachment, sx: number, sy: number, hcenter: number, vcenter: number) {
@@ -25,7 +25,7 @@ export class TooltipView extends AnnotationView {
     super.initialize(options)
     // TODO (bev) really probably need multiple divs
     this.plot_view.canvas_overlays.appendChild(this.el)
-    hide(this.el)
+    undisplay(this.el)
   }
 
   connect_signals(): void {
@@ -47,7 +47,7 @@ export class TooltipView extends AnnotationView {
   protected _draw_tips(): void {
     const {data} = this.model
     empty(this.el)
-    hide(this.el)
+    undisplay(this.el)
 
     if (this.model.custom)
       this.el.classList.add("bk-tooltip-custom")
@@ -78,7 +78,7 @@ export class TooltipView extends AnnotationView {
 
     const arrow_size = 10  // XXX: keep in sync with less
 
-    show(this.el)  // XXX: {offset,client}Width() gives 0 when display="none"
+    display(this.el)  // XXX: {offset,client}Width() gives 0 when display="none"
 
     // slightly confusing: side "left" (for example) is relative to point that
     // is being annotated but CS class "bk-left" is relative to the tooltip itself
@@ -118,7 +118,7 @@ export class TooltipView extends AnnotationView {
       this.el.style.top = `${top}px`
       this.el.style.left = `${left}px`
     } else
-      hide(this.el)
+      undisplay(this.el)
   }
 }
 

bokehjs/src/lib/models/widgets/autocomplete_input.ts

@@ -1,6 +1,6 @@
 import {TextInput, TextInputView} from "./text_input"
 
-import {empty, show, hide, div, Keys} from "core/dom"
+import {empty, display, undisplay, div, Keys} from "core/dom"
 import * as p from "core/properties"
 
 export class AutocompleteInputView extends TextInputView {
@@ -21,7 +21,7 @@ export class AutocompleteInputView extends TextInputView {
     this.menu = div({class: ["bk-menu", "bk-below"]})
     this.menu.addEventListener("click", (event) => this._menu_click(event))
     this.el.appendChild(this.menu)
-    hide(this.menu)
+    undisplay(this.menu)
   }
 
   protected _update_completions(completions: string[]): void {
@@ -36,7 +36,7 @@ export class AutocompleteInputView extends TextInputView {
   protected _show_menu(): void {
     if (!this._open) {
       this._open = true
-      show(this.menu)
+      display(this.menu)
 
       const listener = (event: MouseEvent) => {
         const {target} = event
@@ -52,7 +52,7 @@ export class AutocompleteInputView extends TextInputView {
   protected _hide_menu(): void {
     if (this._open) {
       this._open = false
-      hide(this.menu)
+      undisplay(this.menu)
     }
   }
 

bokehjs/src/lib/models/widgets/dropdown.ts

@@ -2,7 +2,7 @@ import {AbstractButton, AbstractButtonView} from "./abstract_button"
 import {CallbackLike1} from "../callbacks/callback"
 
 import {ButtonClick, MenuItemClick} from "core/bokeh_events"
-import {div, show, hide} from "core/dom"
+import {div, display, undisplay} from "core/dom"
 import * as p from "core/properties"
 import {isString} from "core/util/types"
 
@@ -44,13 +44,13 @@ export class DropdownView extends AbstractButtonView {
 
     this.menu = div({class: ["bk-menu", "bk-below"]}, items)
     this.el.appendChild(this.menu)
-    hide(this.menu)
+    undisplay(this.menu)
   }
 
   protected _show_menu(): void {
     if (!this._open) {
       this._open = true
-      show(this.menu)
+      display(this.menu)
 
       const listener = (event: MouseEvent) => {
         const {target} = event
@@ -66,7 +66,7 @@ export class DropdownView extends AbstractButtonView {
   protected _hide_menu(): void {
     if (this._open) {
       this._open = false
-      hide(this.menu)
+      undisplay(this.menu)
     }
   }