Add scroll log with ReactiveHTML

[ahuang11]

Closes #5137 and addresses #5177 (comment)

Not sure if this ScrollLog is the best name for it (or simply Logs / Log / Scroll), but pretty happy that I learned how to use ReactiveHTML-ish~

I envision that ChatBox will replace the generic Column with this once this is merged.

Also, I wonder if this should have pagination built-in?

import panel as pn
pn.extension(template="fast")

def add_item(event):
    scroll_log.objects = [*scroll_log.objects, str(len(scroll_log.objects))]

scroll_log = pn.ScrollLog(
    *[str(i) for i in range(0, 5)]
)
button = pn.widgets.Button(name="Add")
button.on_click(add_item)

pn.Column(scroll_log, button).servable()

Screen.Recording.2023-07-04.at.9.48.41.PM.mov

[codecov]

Codecov Report

Merging #5212 (202dc23) into main (f7f9ea9) will increase coverage by 0.00%.
The diff coverage is 81.25%.

@@           Coverage Diff           @@
##             main    #5212   +/-   ##
=======================================
  Coverage   83.82%   83.83%           
=======================================
  Files         274      275    +1     
  Lines       39594    39610   +16     
=======================================
+ Hits        33189    33206   +17     
+ Misses       6405     6404    -1     

Flag	Coverage Δ
ui-tests	40.57% <81.25%> (+0.02%)	⬆️
unitexamples-tests	73.77% <81.25%> (+<0.01%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
panel/__init__.py	100.00% <ø> (ø)
panel/layout/scrolllog.py	80.00% <80.00%> (ø)
panel/layout/__init__.py	100.00% <100.00%> (ø)

... and 1 file with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[MarcSkovMadsen]

Awesome

Somehow we are missing a Concept for adding "actions" like AutoScroll, FullScreen, Sort, etc. to a Column without having to implement a new container component each time @philippjfr

[philippjfr]

While this functionality is great, I too do not think we should implement a new container component every time we want to add some functionality like this.

[ahuang11]

Sure. So as a way forward, should Column should be refactored with ReactiveHTML with an features parameter (like tools to Bokeh plots) or a completely new layout that encapsulates other Column-like layouts, and eventually supersede those?

[philippjfr]

I think a component as fundamental as Row and Column should still be implemented as a Bokeh model, so we'd have to subclass Column.

[ahuang11]

Suggestions on what it would be called? ReactiveColumn?

[philippjfr]

Sorry, if I wasn't clear, pn.layout.Column would remain the same, the change would be to implement a Typescript subclass of the Bokeh Column that adds the features we want.

[ahuang11]

Any docs/resources/steps to take/existing examples in the repo on how create a typescript file that subscripts Bokeh Column?

[ahuang11]

Okay, I attempted to convert to Typescript, but I would like some pointers on how to connect all the pieces together.
https://github.com/holoviz/panel/pull/5237/files

[philippjfr]

Nice, maybe let's do a session together tomorrow or Tuesday.

[ahuang11]

Closed in favor of #5245