-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathapp.jl.html
193 lines (193 loc) · 10.9 KB
/
app.jl.html
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<nav></nav>
<div id="iifltv" class="container">
<div id="iwo8" class="st-gap-lg">
<div id="inlv"><a href="#reactive-variables">Reactive variables</a></div>
<div id="ih1yf"><a href="#inputs">Inputs</a></div>
<div id="ipif1"><a href="#plots">Plots</a></div>
<div id="i5c66"><a href="#flow-control">Flow control</a></div>
<div id="ixnh3"><a href="#tabs">Tabs</a></div>
<div id="ivr34"><a href="#popup">Popup</a></div>
<div id="io4tr"><a href="#table">Table</a></div>
<div><a href="#table-server-side">Table with server-side pagination</a></div>
</div><a id="i2uahy" href="https://github.com/BuiltWithGenie/GenieBuilderTutorial">
<q-img id="i856vi" src="/github-logo.png" width="25px" height="25px"></q-img>
</a>
</div>
<h6 id="reactive-variables">Reactive variables</h6>
<div id="i6sl" class="row">
<div class="st-col col-12 col-sm st-module">
<p>This section demonstrates the use of reactive variables that enable real-time, two-way synchronization between the browser UI and the Julia backend. </p>
<div>Variable A is an input variable (@in), which can be modified both from the browser and the backend. </div>
<div><br></div>
<div>
<p>Variable B is an output variable (@out), modifiable only by the backend. Any changes made in the browser are not propagated to the Julia code.</p>
</div>
<div><br></div>
<div>
<p>Variable C is automatically recalculated whenever A changes. Changes to B won't trigger recalculation.</p>
</div>
<p></p>
</div>
<div id="i5h6" class="st-col col-12 col-sm st-module">
<p>@in A: {{A}}</p>
<p>@out B: {{B}}</p>
<p>@in C: {{C}}</p>
<p>{{msg}}</p>
</div>
<div id="i8v02" class="st-col col-12 col-sm st-module">
<q-badge id="i7w7v" icon="danger" color="primary" label="A "></q-badge>
<q-slider id="i1ea" color="primary" :label="true" :max="10" :min="1" :step="1" v-model="A" :markers="true"></q-slider>
<q-badge id="i6c7b8" icon="danger" color="primary" label="B "></q-badge>
<q-slider id="i5jhd" color="primary" :label="true" :max="10" :min="1" :step="1" v-model="B"></q-slider>
</div>
</div>
<h6 id="inputs">Inputs</h6>
<div class="row">
<div class="st-col col-12 col-sm st-module">
<p>This section showcases a variety of input components such as checkboxes, radio buttons, text inputs, sliders, range selectors, dropdowns, and buttons. Each input is bound to a reactive variable in the Julia backend, allowing for immediate, real-time interaction between the user interface and the server. </p>
</div>
</div>
<div id="igne6" class="row">
<div class="st-col col-12 col-sm st-module">
<q-checkbox id="iinzk" color="primary" label="Checked" v-model="checked"></q-checkbox>
<q-radio id="i68m9" v-model="radio" color="primary" label="radio 1" val="radio_1"></q-radio>
<q-radio id="i68m9-2" v-model="radio" color="primary" label="radio 2" val="radio_2"></q-radio>
<q-input id="iyddr" :dense="true" label="Input" v-model="input_text"></q-input>
<q-slider id="i19dt" class="q-mt-sm" color="primary" :label="true" :max="10" :min="1" :step="1" v-model="N"></q-slider>
<q-range id="ick05" class="q-mt-sm" color="primary" :label="true" :marker-labels="true" :markers="true" :max="10" :min="1" :step="1" v-model="range"></q-range>
<q-select id="iqz7g" class="q-mt-sm" label="Choices" :options="choices" v-model="selected_choice"></q-select>
<q-btn id="ib4du" class="q-mt-sm" color="primary" icon="true" label="button" v-on:click="trigger = true" :loading="trigger"></q-btn>
<p>Button process running: {{trigger}}</p>
</div>
<div class="st-col col-12 col-sm st-module">
<q-input iscomposite="true" id="iq5j4" :clearable="true" :filled="true" label="Pick a date" v-model="date_text">
<q-icon id="i69kl" class="cursor-pointer" name="event">
<q-popup-proxy id="io4gq">
<q-date id="ih7co" mask="YYYY-MM-DD" :no-unset="true" :today-btn="true" v-model="date_text"></q-date>
</q-popup-proxy>
</q-icon>
</q-input>
<q-date id="ianlp" class="q-mt-md" mask="YYYY-MM-DD" v-model="date_text"></q-date>
<p>Note: the date field has a date picker nested inside of it. To configure its binding in the visual editor, go to the Layers panel and expand the component treee.</p>
</div>
<div id="iioc3" class="st-col col-12 col-sm st-module">
<q-input id="ijmre" :clearable="true" :filled="true" label="Pick a time" v-model="time_text">
<q-icon id="iu26p" class="cursor-pointer" name="alarm">
<q-popup-proxy id="imcvy">
<q-time id="ikzkf" v-model="undefined" mask="HH:mm:ss"></q-time>
</q-popup-proxy>
</q-icon>
</q-input>
<q-time id="i12yu" class="q-mt-md" mask="HH:mm" v-model="time_text"></q-time>
</div>
</div>
<h6 id="plots">Plots</h6>
<div class="row">
<div class="st-col st-module col-12">
<p id="i5jcf"></p>
<p>This figure plots the contents of an array as a line chart, configured via the chart editor. The buttons to the right will add new entries to the array or erase its contents.</p>
</div>
</div>
<div class="row">
<div class="st-col col-12 col-sm st-module">
<plotly id="id8oh" data="W3siZ2J0eXBlIjoiTGluZSBDaGFydCIsIngiOiIkX3t4fSIsInkiOiIkX3t5fSIsInR5cGUiOiJzY2F0dGVyIiwibW9kZSI6ImxpbmVzIiwibmFtZSI6IlRyYWNlIn1d" config="e30=" layout="eyJ0aXRsZSI6Ik15IENoYXJ0In0="></plotly>
</div>
<div id="issgfr" class="st-module">
<q-btn id="i7c08" color="primary" label="Add data" v-on:click="add_data = true"></q-btn>
<q-btn id="is8jf" class="q-mt-xl" color="primary" label="Reset data" v-on:click="reset_data = true"></q-btn>
</div>
</div>
<div class="row">
<div class="st-col col-12 col-sm st-module">
<p>This figure showcases dynamic generation of plots, where the number of traces is controlled with a slider. The plot is implemented with PlotlyBase in the Julia code, and the traces vector is updated when the slider moves.</p>
</div>
</div>
<div class="row">
<div class="st-col col-12 col-sm st-module">
<plotly id="ig5pq" :data="traces" config="eyJhdXRvc2l6YWJsZSI6dHJ1ZSwiZGlzcGxheWxvZ28iOnRydWUsInNjcm9sbFpvb20iOnRydWUsImVkaXRhYmxlIjp0cnVlLCJkaXNwbGF5TW9kZUJhciI6dHJ1ZX0=" layout="eyJ0aXRsZSI6Ik15IENoYXJ0IiwibGVnZW5kIjp7Im9yaWVudGF0aW9uIjoiaCIsIngiOiIwIiwieSI6IjEuMSJ9LCJ4YXhpcyI6eyJ0aXRsZSI6eyJ0ZXh0IjoieCJ9fSwieWF4aXMiOnsidGl0bGUiOnsidGV4dCI6InkifX19"></plotly>
</div>
<div id="it5lvc" class="st-col st-module col-2">
<q-badge icon="danger" id="ixdzcz" color="primary" label="Number of traces"></q-badge>
<q-slider id="imoco" color="primary" :label="true" :max="10" :min="1" :step="1" v-model="N_traces"></q-slider>
</div>
</div>
<h6 id="flow-control">Flow control</h6>
<div class="row">
<div class="st-col col-12 col-sm st-module">
<p>The Conditional component is a container that shows or hides its contents according to the value of its binding. The same binding can be attached to another control, such as a toggle, to manually control visibility.</p>
</div>
<div class="st-col col-12 col-sm st-module">
<q-toggle id="ijyyy" color="blue" label="Show image" v-model="show"></q-toggle>
<div conditional="" iscomposite="true" id="ikwfg" v-if="show">
<q-img id="iy7xf" src="https://cdn.quasar.dev/img/parallax2.jpg" width="50px"></q-img>
</div>
</div>
<div class="st-col col-12 col-sm st-module">
<p>The Looper component is a container that loops over an array and replicates the container's contents for each item in the array.</p>
</div>
<div class="st-col col-12 col-sm st-module">
<q-slider id="iqyg5" color="primary" :label="true" :max="4" :min="1" :step="1" v-model="N_blocks"></q-slider>
<div looper="" iscomposite="true" id="i2q8w" v-for="item in indexes">
<q-img id="i073k" src="https://cdn.quasar.dev/img/parallax2.jpg" width="50px"></q-img>
</div>
</div>
</div>
<h6 id="tabs">Tabs</h6>
<div class="row">
<div class="st-col col-12 col-sm st-module">
<p>Tabs enable the implementation of a tabbed interface where the content displayed changes dynamically based on the selected tab. The tabs are bound to reactive variables in the Julia backend, allowing the server to respond to tab selection changes.</p>
</div>
</div>
<div class="row">
<div class="st-col col-12 col-sm st-module">
<st-tabs id="ikxpx" class="bg-primary text-white shadow-2" :ids="tab_ids" :labels="tab_labels" v-model="selected_tab"></st-tabs>
<q-tab-panels id="if8ec" v-model="selected_tab">
<q-tab-panel id="ihkl" name="tab_cars">
<q-icon id="iq6t" color="primary" name="car_rental" size="200px"></q-icon>
</q-tab-panel>
<q-tab-panel id="i3nw" name="tab_scooters">
<q-icon id="ixy1" color="primary" name="moped" size="200px"></q-icon>
</q-tab-panel>
<q-tab-panel id="itoj" name="tab_bikes">
<q-icon id="i2gh" color="primary" name="bike_scooter" size="200px"></q-icon>
</q-tab-panel>
</q-tab-panels>
</div>
</div>
<div class="row"></div>
<h6 id="popup">Popup</h6>
<div class="row">
<div class="st-col col-12 col-sm st-module">
<p>The popup proxy can be added to any nestable component, and it'll make a popup window appear when the user clicks on the component.</p>
</div>
<div class="st-col col-12 col-sm st-module">
<q-btn id="ibru7" color="primary" label="Click me!">
<q-popup-proxy id="i63f">
<p>Popup content</p>
<q-img id="ilqk" src="https://cdn.quasar.dev/img/parallax2.jpg"></q-img>
</q-popup-proxy>
</q-btn>
</div>
</div>
<h6 id="table">Table</h6>
<div class="row">
<div class="st-col col-12 col-sm st-module">
<p>The StippleTable component has built-in browser-side pagination, server-side pagination, and integrated search text field. Any DataFrame can be displayed as a table by wrapping it into a DataTable object.<br></p>
</div>
</div>
<div class="row">
<div class="st-col col-12 col-sm st-module">
<st-table id="i0n3h" :dense="true" server_side_event="request" :loading="false" :data_table="dt1"></st-table>
</div>
</div>
<h6 id="table-server-side">Table with server-side pagination</h6>
<div class="row">
<div class="st-col col-12 col-sm st-module">
<p>Instead of loading all data at once, this table loads data in chunks as the user navigates through pages. The pagination is managed by an event handler in the Julia code.</p>
</div>
</div>
<div class="row">
<div class="st-col col-12 col-sm st-module">
<st-table id="ik48t" :dense="true" server_side_event="request" :loading="false" :data_table="dt2"></st-table>
</div>
</div>