PyCafe - Solara - Using ipyreact to expose flexlayout to Python / Solara

app.py
requirements.txt

app.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import ipyreact
import pathlib
import solara
import traitlets
from ipywidgets import Widget, widget_serialization


class FlexLayout(ipyreact.ValueWidget):
    _esm = pathlib.Path("confetti.tsx")
    flex_layout = traitlets.Any({}, allow_none=True).tag(sync=True, **widget_serialization)
    # components = traitlets.Any({}, allow_none=True).tag(sync=True, **widget_serialization)



flex_layout = {
  "global": {
    "tabEnableClose": True,
    "tabSetHeaderHeight": 44,
    "tabSetTabStripHeight": 44,
    "borderBarSize": 44,
    "enableRotateBorderIcons": False,
  },
  "borders": [
    {
      "type": "border",
      "location": "bottom",
      "size": 200,
      "show": True,
      "selected": 0,
      "enableDrop": False,
      "children": [
        {
          "type": "tab",
          "name": "Messages",
        #   "icon": `/icons/terminal.svg`,
          "component": 0,
          "enableClose": False,
          "enableRenderOnDemand": False,
        },
      ],
    },
    {
      "type": "border",
      "location": "left",
      "size": 175,
      "barSize": 44,
      "enableDrop": False,
      "selected": 0,
      "children": [
        {
          "type": "tab",
          "name": "Files",
          "id": "file-browser",
          "component": 1,
        #   "icon": "/icons/folder.svg",
          "enableClose": False,
          "config": {
            "path": "/",
          },
        },
      ],
    },
  ],    
    "layout": {
        "type": "row",
        "weight": 100,
        "children": [
            {
                "type": "tabset",
                "weight": 50,
                "children": [
                    {
                        "type": "tab",
                        "name": "One",
                        "component": 2,
                    }
                ]
            },
            {
                "type": "tabset",
                "weight": 50,
                "children": [
                    {
                        "type": "tab",
                        "name": "Two",
                        "component": 3,
                    }
                ]
            }
        ]
    }
};

@solara.component
def Page():
    clicks = solara.use_reactive(0)
    with solara.Card("Second tab") as second:
        def increment():
            clicks.value += 1
        solara.Button(f"Click {clicks}", on_click=increment)
    children = [
        solara.Text("Bottom border"),
        solara.Text("Left border"),
        solara.Card("First tab", children=[solara.Button("I do nothing")]),
        second,
    ]
    with solara.Column(style={"height": "100%"}):
        FlexLayout.element(flex_layout=flex_layout, value=1, children=children, layout={"height": "100%"})
        solara.Style(pathlib.Path("light.css"))

confetti.tsx

1
Could not load content

Py.Cafe

ipyflexlayout

Using ipyreact to expose flexlayout to Python / Solara