Inherit new scroll functionalities from Column in ChatBox log

examples/reference/layouts/Column.ipynb

@@ -22,7 +22,9 @@
     "\n",
     "* **``objects``** (list): The list of objects to display in the Column, should not generally be modified directly except when replaced in its entirety.\n",
     "* **``scroll``** (boolean): Enable scrollbars if the content overflows the size of the container.\n",
-    "\n",
+    "* **``auto_scroll_limit``** (int): Max pixel distance from the latest object in the Column to activate automatic scrolling upon update. Setting to 0 disables auto-scrolling\n",
+    "* **``scroll_button_threshold``** (int): Min pixel distance from the latest object in the Column to display the scroll button. Setting to 0 disables the scroll button.\"\"\"\n",
+    "* **``view_latest``** (bool): Whether to scroll to the latest object on init. If not enabled the view will be on the first object.\"\"\"\n",
     "___"
    ]
   },

panel/dist/css/listpanel.css

@@ -1,3 +1,46 @@
 :host(.scrollable) {
-  overflow: scroll;
+  overflow: auto;
+}
+
+:host(.scrollable-vertical) {
+  overflow-y: auto;
+}
+
+:host(.scrollable-horizontal) {
+  overflow-x: auto;
+}
+
+.scroll-button {
+  /* For location */
+  position: sticky;
+  top: calc(100% - 38px);
+  left: calc(100% - 60px);
+  /* For icon */
+  cursor: pointer;
+  visibility: hidden;
+  font-size: 18px;
+  border-radius: 50%;
+  background-color: rgba(0, 0, 0, 0.25);
+  color: white;
+  width: 36px;
+  min-height: 36px;
+  margin-bottom: -36px; /* Remove space taken */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  /* For animation */
+  opacity: 0;
+  transition:
+    visibility 0s,
+    opacity 0.2s ease-in-out;
+}
+
+.visible {
+  visibility: visible;
+  opacity: 1;
+}
+
+.scroll-button:before {
+  content: '⬇';
 }

panel/layout/__init__.py

@@ -59,6 +59,7 @@
     "Panel",
     "Row",
     "Spacer",
+    "Swipe",
     "Tabs",
     "VSpacer",
     "WidgetBox"

panel/layout/base.py

@@ -12,11 +12,12 @@
 
 import param
 
-from bokeh.models import Column as BkColumn, Row as BkRow
+from bokeh.models import Row as BkRow
 
 from ..io.model import hold
 from ..io.resources import CDN_DIST
 from ..io.state import state
+from ..models import Column as PnColumn
 from ..reactive import Reactive
 from ..util import param_name, param_reprs
 
@@ -792,11 +793,14 @@ def _linked_properties(self):
         )
 
     def _process_param_change(self, params: Dict[str, Any]) -> Dict[str, Any]:
-        scroll = params.pop('scroll', None)
-        css_classes = self.css_classes or []
-        if scroll:
-            params['css_classes'] = css_classes + ['scrollable']
-        elif scroll == False:
+        if 'scroll' in params:
+            scroll = params['scroll']
+            css_classes = params.get('css_classes', self.css_classes)
+            if scroll:
+                if self._direction is not None:
+                    css_classes += [f'scrollable-{self._direction}']
+                else:
+                    css_classes += ['scrollable']
             params['css_classes'] = css_classes
         return super()._process_param_change(params)
 
@@ -825,10 +829,13 @@ class NamedListPanel(NamedListLike, Panel):
 
     def _process_param_change(self, params: Dict[str, Any]) -> Dict[str, Any]:
         if 'scroll' in params:
-            scroll = params.pop('scroll')
-            css_classes = list(self.css_classes or [])
+            scroll = params['scroll']
+            css_classes = params.get('css_classes', self.css_classes)
             if scroll:
-                css_classes += ['scrollable']
+                if self._direction is not None:
+                    css_classes += [f'scrollable-{self._direction}']
+                else:
+                    css_classes += ['scrollable']
             params['css_classes'] = css_classes
         return super()._process_param_change(params)
 
@@ -879,12 +886,35 @@ class Column(ListPanel):
     >>> pn.Column(some_widget, some_pane, some_python_object)
     """
 
-    _bokeh_model: ClassVar[Type[Model]] = BkColumn
+    auto_scroll_limit = param.Integer(bounds=(0, None), doc="""
+        Max pixel distance from the latest object in the Column to
+        activate automatic scrolling upon update. Setting to 0
+        disables auto-scrolling.""")
+
+    scroll_button_threshold = param.Integer(bounds=(0, None), doc="""
+        Min pixel distance from the latest object in the Column to
+        display the scroll button. Setting to 0
+        disables the scroll button.""")
+
+    view_latest = param.Boolean(default=False, doc="""
+        Whether to scroll to the latest object on init. If not
+        enabled the view will be on the first object.""")
+
+    _bokeh_model: ClassVar[Type[Model]] = PnColumn
 
     _direction = 'vertical'
 
     _stylesheets: ClassVar[list[str]] = [f'{CDN_DIST}css/listpanel.css']
 
+    @param.depends("auto_scroll_limit", "scroll_button_threshold", "view_latest", watch=True, on_init=True)
+    def _set_scrollable(self):
+        self.scroll = (
+            self.scroll or
+            bool(self.auto_scroll_limit) or
+            bool(self.scroll_button_threshold) or
+            self.view_latest
+        )
+
 
 class WidgetBox(ListPanel):
     """
@@ -929,7 +959,7 @@ class WidgetBox(ListPanel):
 
     @property
     def _bokeh_model(self) -> Type[Model]: # type: ignore
-        return BkRow if self.horizontal else BkColumn
+        return BkRow if self.horizontal else PnColumn
 
     @property
     def _direction(self):

panel/layout/card.py

@@ -8,7 +8,7 @@
 
 from ..io.resources import CDN_DIST
 from ..models import Card as BkCard
-from .base import Column, ListPanel, Row
+from .base import Column, Row
 
 if TYPE_CHECKING:
     from bokeh.model import Model
@@ -95,15 +95,6 @@ def _cleanup(self, root: Model | None = None) -> None:
         super()._cleanup(root)
         self._header_layout._cleanup(root)
 
-    def _process_param_change(self, params):
-        scroll = params.pop('scroll', None)
-        css_classes = self.css_classes or []
-        if scroll:
-            params['css_classes'] = css_classes + ['scrollable']
-        elif scroll == False:
-            params['css_classes'] = css_classes
-        return super(ListPanel, self)._process_param_change(params)
-
     def _update_header(self, *events):
         from ..pane import HTML, panel
         if self.header is None:

panel/models/__init__.py

@@ -7,7 +7,7 @@
 
 from .datetime_picker import DatetimePicker  # noqa
 from .ipywidget import IPyWidget  # noqa
-from .layout import Card  # noqa
+from .layout import Card, Column  # noqa
 from .location import Location  # noqa
 from .markup import HTML, JSON, PDF  # noqa
 from .reactive_html import ReactiveHTML  # noqa

panel/models/card.ts

@@ -1,4 +1,4 @@
-import {Column, ColumnView} from "@bokehjs/models/layouts/column"
+import {Column, ColumnView} from "./column"
 import * as DOM from "@bokehjs/core/dom"
 import * as p from "@bokehjs/core/properties"
 

panel/models/column.ts

@@ -0,0 +1,112 @@
+import { Column as BkColumn, ColumnView as BkColumnView } from "@bokehjs/models/layouts/column";
+import * as DOM from "@bokehjs/core/dom"
+import * as p from "@bokehjs/core/properties";
+
+export class ColumnView extends BkColumnView {
+  model: Column;
+  scroll_down_arrow_el: HTMLElement;
+
+  connect_signals(): void {
+    super.connect_signals();
+
+    const { children, scroll_button_threshold } = this.model.properties;
+
+    this.on_change(children, () => this.trigger_auto_scroll());
+    this.on_change(scroll_button_threshold, () => this.toggle_scroll_arrow())
+  }
+
+  get distance_from_latest(): number {
+    return this.el.scrollHeight - this.el.scrollTop - this.el.clientHeight;
+  }
+
+  scroll_to_latest(): void {
+    // Waits for the child to be rendered before scrolling
+    requestAnimationFrame(() => {
+      this.el.scrollTop = this.el.scrollHeight;
+    });
+  }
+
+  trigger_auto_scroll(): void {
+    const limit = this.model.auto_scroll_limit
+    const within_limit = this.distance_from_latest <= limit
+    if (limit == 0 || !within_limit)
+      return
+
+    this.scroll_to_latest()
+  }
+
+  toggle_scroll_arrow(): void {
+    const threshold = this.model.scroll_button_threshold
+    const exceeds_threshold = this.distance_from_latest >= threshold
+    this.scroll_down_arrow_el.classList.toggle(
+      "visible", threshold !== 0 && exceeds_threshold
+    )
+  }
+
+  render(): void {
+    super.render()
+    this.empty()
+    this._update_stylesheets()
+    this._update_css_classes()
+    this._apply_styles()
+    this._apply_visible()
+
+    this.class_list.add(...this.css_classes())
+    this.scroll_down_arrow_el = DOM.createElement('div', { class: 'scroll-button' });
+    this.shadow_el.appendChild(this.scroll_down_arrow_el);
+
+    this.el.addEventListener("scroll", () => {
+      this.toggle_scroll_arrow();
+    });
+    this.scroll_down_arrow_el.addEventListener("click", () => {
+      this.scroll_to_latest();
+    });
+
+    for (const child_view of this.child_views) {
+      this.shadow_el.appendChild(child_view.el)
+      child_view.render()
+      child_view.after_render()
+    }
+  }
+
+  after_render(): void {
+    super.after_render()
+    requestAnimationFrame(() => {
+      if (this.model.view_latest) {
+        this.scroll_to_latest();
+      }
+      this.toggle_scroll_arrow();
+    });
+  }
+}
+
+export namespace Column {
+  export type Attrs = p.AttrsOf<Props>;
+  export type Props = BkColumn.Props & {
+    auto_scroll_limit: p.Property<number>;
+    scroll_button_threshold: p.Property<number>;
+    view_latest: p.Property<boolean>;
+  };
+}
+
+export interface Column extends Column.Attrs { }
+
+export class Column extends BkColumn {
+  properties: Column.Props;
+
+  constructor(attrs?: Partial<Column.Attrs>) {
+    super(attrs);
+  }
+
+  static __module__ = "panel.models.layout";
+
+  static {
+    this.prototype.default_view = ColumnView;
+
+    this.define<Column.Props>(({ Int, Boolean }) => ({
+      auto_scroll_limit: [Int, 0],
+      scroll_button_threshold: [Int, 0],
+      view_latest: [Boolean, false],
+    }));
+  }
+}

panel/models/index.ts

@@ -2,6 +2,7 @@ export {AcePlot} from "./ace"
 export {Audio} from "./audio"
 export {BrowserInfo} from "./browser"
 export {Card} from "./card"
+export {Column} from "./column"
 export {CommManager} from "./comm_manager"
 export {CustomSelect} from "./customselect"
 export {DataTabulator} from "./tabulator"

panel/models/layout.py

@@ -1,35 +1,65 @@
 from bokeh.core.properties import (
-    Bool, List, Nullable, String,
+    Bool, Int, List, Nullable, String,
 )
-from bokeh.models import Column
+from bokeh.models import Column as BkColumn
 from bokeh.models.layouts import LayoutDOM
 
 __all__ = (
     "Card",
     "HTMLBox",
+    "Column",
 )
 
+
 class HTMLBox(LayoutDOM):
     """ """
 
-class Card(Column):
 
-    active_header_background = Nullable(String, help="Background color of active Card header.")
+class Column(BkColumn):
+
+    auto_scroll_limit = Int(
+        default=0,
+        help="""
+        Max pixel distance from the latest object in the Column to
+        activate automatic scrolling upon update. Setting to 0
+        disables auto-scrolling.""")
+
+    scroll_button_threshold = Int(
+        default=0,
+        help="""
+        Min pixel distance from the latest object in the Column to
+        display the scroll button. Setting to 0
+        disables the scroll button.""")
+
+    view_latest = Bool(
+        default=False,
+        help="""
+        Whether to scroll to the latest object on init. If not
+        enabled the view will be on the first object.""")
+
+class Card(Column):
+    active_header_background = Nullable(
+        String, help="Background color of active Card header."
+    )
 
-    button_css_classes = List(String, help="CSS classes to add to the Card collapse button.")
+    button_css_classes = List(
+        String, help="CSS classes to add to the Card collapse button."
+    )
 
     collapsed = Bool(True, help="Whether the Card is collapsed.")
 
-    collapsible = Bool(True, help="Whether the Card should have a button to collapse it.")
+    collapsible = Bool(
+        True, help="Whether the Card should have a button to collapse it."
+    )
 
     header_background = Nullable(String, help="Background color of the Card header.")
 
     header_color = Nullable(String, help="Color of the header text and button.")
 
     header_css_classes = List(String, help="CSS classes to add to the Card header.")
 
-    header_tag = String('div', help="HTML tag to use for the Card header.")
+    header_tag = String("div", help="HTML tag to use for the Card header.")
 
     hide_header = Bool(False, help="Whether to hide the Card header")
 
-    tag = String('tag', help="CSS class to use for the Card as a whole.")
+    tag = String("tag", help="CSS class to use for the Card as a whole.")