extend demo example

Author: clarasb

chartlets.py/demo/my_extension/my_panel_8.py

@@ -1,8 +1,17 @@
 import altair as alt
+from attr.validators import disabled
 
 from chartlets import Component, Input, State, Output
-from chartlets.components import (Tabs, Tab, Typography, Box,
-                                  VegaChart, Table)
+from chartlets.components import (
+    Tabs,
+    Tab,
+    Typography,
+    Box,
+    VegaChart,
+    Table,
+    IconButton,
+    Button,
+)
 from chartlets.components.table import TableColumn, TableRow
 
 from server.context import Context
@@ -37,25 +46,31 @@ def render_panel(
         ["3", "Peter", "Jones", 40],
     ]
 
+    open_button = Button(
+        id="open_button", startIcon="Insights", text="Please click here!"
+    )
+
     table = Table(id="table", rows=rows, columns=columns, hover=True)
 
     info_text = Typography(id="info_text", children=["This is a text."])
     chart = VegaChart(
-        id="chart", chart=(
-        alt.Chart(dataset)
-        .mark_bar()
-        .encode(
-            x=alt.X("x:N", title="x"),
-            y=alt.Y("a:Q", title="a"))
-        .properties(width=290, height=300, title="Vega charts")
-    ), style={"flexGrow": 1}
+        id="chart",
+        chart=(
+            alt.Chart(dataset)
+            .mark_bar()
+            .encode(x=alt.X("x:N", title="x"), y=alt.Y("a:Q", title="a"))
+            .properties(width=290, height=300, title="Vega charts")
+        ),
+        style={"flexGrow": 1},
     )
 
-    tab1 = Tab(id = "tab1", label="Tab 1", children=[table])
-    tab2 = Tab(id = "tab2", label="Tab 2", children=[info_text])
+    tab1 = Tab(id="tab1", label="Tab 1", children=[table])
+    tab2 = Tab(id="tab2", label="Tab 2", children=[info_text])
     tab3 = Tab(id="tab3", label="Tab 3", children=[chart])
 
-    tabs = Tabs(id = "tabs", value = 0, children=[tab1,tab2,tab3])
+    tabs = Tabs(
+        id="tabs", value=0, children=[tab1, tab2, tab3], style={"visibility": "hidden"}
+    )
 
     return Box(
         style={
@@ -64,6 +79,11 @@ def render_panel(
             "width": "100%",
             "height": "100%",
         },
-        children=[ tabs ],
+        children=[open_button, tabs],
     )
 
+
+# noinspection PyUnusedLocal
+@panel.callback(Input("open_button", "clicked"), Output("tabs", "style"))
+def tabs_on_open(ctx: Context, button) -> dict:
+    return {"visibility": "visible"}