PyCafe - Solara - scientific-soup

app.py
counter.css
counter.js
requirements.txt

app.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import anywidget
import traitlets
from pathlib import Path

class CounterWidget(anywidget.AnyWidget):
    _esm = Path("counter.js")
    _css = Path("counter.css")
    count = traitlets.Int(0).tag(sync=True)

counter = CounterWidget()
counter.count = 42
counter

page = counter 

counter.css

1
2
3
4
.counter-button { background-color: #ea580c; }
.counter-button:hover { background-color: #9a3412; }

counter.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
    function render({ model, el }) {
      let getCount = () => model.get("count");
      let button = document.createElement("button");
      button.classList.add("counter-button");
      button.innerHTML = `count is ${getCount()}`;
      button.addEventListener("click", () => {
        model.set("count", getCount() + 1);
        model.save_changes();
      });
      model.on("change:count", () => {
        button.innerHTML = `count is ${getCount()}`;
      });
      el.appendChild(button);
    }
	export default { render };