PyCafe - Solara - Plotly Express Figure Annotation Explorer

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
110
111
112
113
114
115
116
import solara
import plotly.graph_objects as go
import plotly.express as px
from reacton.ipyvuetify import RadioGroup, Radio


@solara.component
def PlotlyFigure():
    textposition = solara.use_reactive("bottom left")
    xanchor = solara.use_reactive("center")
    yanchor = solara.use_reactive("bottom")
    padding = solara.use_reactive(35)
    shape = solara.use_reactive('rect')

    def update_figure():
        fig = px.line(x=[0], y=[0])
        
        fig.update_layout(
            xaxis_range=[-10, 10],
            yaxis_range=[-10, 10],
            width=800,
            height=300,
            title=f"Position: {textposition.value}, X Anchor: {xanchor.value}, Y Anchor: {yanchor.value}"
        )

        fig.add_shape(
            type=shape.value,
            line_width=2,
            x0=-5, x1=-5, 
            y0=0.25, y1=0.75,
            line=dict(color="red"),
            fillcolor='red',
            xref="x",
            yref="paper",
            # fillcolor="red",
            label=dict(
                font=dict(size=16),
                text="Annotation",
                textposition=textposition.value,
                textangle=0,
                padding=padding.value,
                xanchor=xanchor.value,
                yanchor=yanchor.value,
                )
        )



        return fig

    fig = update_figure()

    def button_color(value, current):
        return "primary" if value == current else "secondary"


    with solara.Column():
        solara.FigurePlotly(fig),
        # 3x3 grid for textposition buttons
        solara.ToggleButtonsSingle(value=shape, values=['line', 'rect'])
        with solara.Card(title="textposition"):
            with solara.GridFixed(columns=3):
                for pos in ["top left", "top center", "top right", 
                            "middle left", "middle center", "middle right", 
                            "bottom left", "bottom center", "bottom right"]:
                    solara.Button(
                        pos, 
                        on_click=lambda p=pos: textposition.set(p), 
                        color=button_color(pos, textposition.value)
                    )

                # # with solara.Row():
                # solara.Button("top left", on_click=lambda: textposition.set("top left"))
                # solara.Button("top center", on_click=lambda: textposition.set("top center"))
                # solara.Button("top right", on_click=lambda: textposition.set("top right"))
                # # with solara.Row():
                # solara.Button("middle left", on_click=lambda: textposition.set("middle left"))
                # solara.Button("middle center", on_click=lambda: textposition.set("middle center"))
                # solara.Button("middle right", on_click=lambda: textposition.set("middle right"))
                # # with solara.Row():
                # solara.Button("bottom left", on_click=lambda: textposition.set("bottom left"))
                # solara.Button("bottom center", on_click=lambda: textposition.set("bottom center"))
                # solara.Button("bottom right", on_click=lambda: textposition.set("bottom right"))



        with solara.Card():
            solara.SliderInt('padding', value = padding, min=0, max=50)
            with solara.Columns(2):
                with solara.Column():
                    solara.Text("xanchor")
                    for anchor in ["left", "center", "right"]:
                        solara.Button(
                            anchor, 
                            on_click=lambda a=anchor: xanchor.set(a),
                            color=button_color(anchor, xanchor.value)
                        )
                with solara.Column():
                    solara.Text("yanchor")
                    for anchor in ["top", "middle", "bottom"]:
                        solara.Button(
                            anchor, 
                            on_click=lambda a=anchor: yanchor.set(a),
                            color=button_color(anchor, yanchor.value)
                        )




@solara.component
def Page():
    solara.Title("Plotly Express Line Figure with Annotation")
    PlotlyFigure()


Page()
Py.Cafe

plotly-express-figure-annotation-explorer

Plotly Express Figure Annotation Explorer
