Skip to content

Commit 0444f63

Browse files
georgedouzasgeorgedouzas
committed
feat: Make GUI responsive
1 parent 33c1fa5 commit 0444f63

File tree

6 files changed

+210
-246
lines changed

6 files changed

+210
-246
lines changed

‎src/sportsbet/gui/app/components.py‎

Lines changed: 98 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,6 @@
33
import reflex as rx
44
from reflex_ag_grid import ag_grid
55

6-
SIDEBAR_OPTIONS = {
7-
'spacing': '0',
8-
'position': 'fixed',
9-
'left': '50px',
10-
'top': '100px',
11-
'padding_x': '1em',
12-
'padding_y': "1.5em",
13-
'bg': rx.color('blue', 3),
14-
'height': '600px',
15-
'width': '20em',
16-
}
17-
186

197
def navbar() -> rx.Component:
208
"""The navigation bar component."""
@@ -33,20 +21,11 @@ def navbar() -> rx.Component:
3321
)
3422

3523

36-
def home() -> rx.Component:
37-
"""Home title."""
38-
return rx.vstack(
39-
rx.text('Sports Betting', size='4', weight='bold'),
40-
rx.divider(width='18em'),
41-
)
42-
43-
4424
def title(name: str, icon_name: str) -> rx.Component:
4525
"""The title component."""
4626
return rx.hstack(
4727
rx.icon(icon_name),
4828
rx.text(name, size="4"),
49-
width="100%",
5029
color=rx.color("accent", 11),
5130
)
5231

@@ -75,6 +54,20 @@ def mode(state: rx.State, content: str) -> rx.Component:
7554
)
7655

7756

57+
def sidebar(*components: rx.Component, control: rx.Component) -> rx.Component:
58+
"""The sidebar component."""
59+
return rx.vstack(
60+
rx.vstack(*components),
61+
control,
62+
spacing='2',
63+
padding='10px',
64+
bg=rx.color('blue', 3),
65+
height='600px',
66+
width='270px',
67+
justify='between',
68+
)
69+
70+
7871
def dataloader(state: rx.State, visibility_level: int) -> rx.Component:
7972
"""The dataloader component."""
8073
return rx.vstack(
@@ -141,117 +134,102 @@ def model(state: rx.State, visibility_level: int) -> rx.Component:
141134
)
142135

143136

144-
def submit_reset(state: rx.State, disabled: bool, url: str | None = None) -> rx.Component:
145-
"""Submit and reset buttons of UI."""
146-
return rx.vstack(
147-
rx.divider(top='630px', position='fixed', width='18em'),
148-
rx.hstack(
149-
rx.link(
150-
rx.button(
151-
'Submit',
152-
on_click=state.submit_state,
153-
disabled=disabled | state.dataloader_error,
154-
loading=state.loading,
155-
position='fixed',
156-
top='650px',
157-
width='70px',
158-
),
159-
href=url,
160-
),
161-
rx.link(
162-
rx.button(
163-
'Reset',
164-
on_click=state.reset_state,
165-
position='fixed',
166-
top='650px',
167-
left='150px',
168-
width='70px',
169-
),
170-
href='/',
171-
),
172-
),
137+
def save_dataloader(state: rx.State, visibility_level: int | None = None) -> rx.Component:
138+
"""The save component."""
139+
return rx.button(
140+
rx.icon('download'),
141+
on_click=state.download_dataloader,
142+
disabled=state.visibility_level < visibility_level if visibility_level is not None else True,
173143
)
174144

175145

176-
def save_dataloader(state: rx.State, visibility_level: int) -> rx.Component:
146+
def save_model(state: rx.State, visibility_level: int | None = None) -> rx.Component:
177147
"""The save component."""
178-
return rx.cond(
179-
state.visibility_level > visibility_level,
180-
rx.button(
181-
'Save',
182-
position='fixed',
183-
top='650px',
184-
left='275px',
185-
width='70px',
186-
on_click=state.download_dataloader,
187-
),
148+
return rx.button(
149+
rx.icon('download'),
150+
on_click=state.download_model,
151+
disabled=state.visibility_level < visibility_level if visibility_level is not None else True,
188152
)
189153

190154

191-
def save_model(state: rx.State, visibility_level: int) -> rx.Component:
192-
"""The save component."""
193-
return rx.cond(
194-
state.visibility_level > visibility_level,
195-
rx.button(
196-
'Save',
197-
position='fixed',
198-
top='650px',
199-
left='275px',
200-
width='70px',
201-
on_click=state.download_model,
155+
def control(state: rx.State, disabled: bool, save: rx.Component, url: str | None = None) -> rx.Component:
156+
"""The control component."""
157+
return rx.vstack(
158+
rx.divider(),
159+
rx.hstack(
160+
rx.hstack(
161+
rx.link(
162+
rx.button(
163+
rx.icon('check'),
164+
on_click=state.submit_state,
165+
disabled=disabled | state.dataloader_error,
166+
loading=state.loading,
167+
),
168+
href=url,
169+
),
170+
rx.link(
171+
rx.button(
172+
rx.icon('x'),
173+
on_click=state.reset_state,
174+
),
175+
href='/',
176+
),
177+
),
178+
save,
179+
justify='between',
180+
width='100%',
202181
),
182+
width='100%',
203183
)
204184

205185

206186
def dataloader_data(state: rx.State, visibility_level: int) -> rx.Component:
207187
"""Data component of UI."""
208188
return rx.cond(
209189
state.visibility_level == visibility_level,
210-
rx.vstack(
211-
rx.heading(state.data_title),
190+
rx.box(
212191
rx.vstack(
213-
rx.divider(width='900px'),
192+
rx.heading(state.data_title),
214193
ag_grid(
215194
id='data',
216195
row_data=state.data,
217196
column_defs=state.data_cols,
218-
height='470px',
219-
width='900px',
220197
theme='balham',
198+
width='100%',
199+
height='100%',
221200
),
222-
rx.divider(width='900px'),
223-
),
224-
rx.hstack(
225-
rx.cond(
226-
state.X_fix,
201+
rx.hstack(
202+
rx.cond(
203+
state.X_fix,
204+
rx.tooltip(
205+
rx.button(
206+
rx.icon('database'),
207+
on_click=state.switch_displayed_data_category,
208+
variant='surface',
209+
loading=state.loading_db,
210+
),
211+
content='Switch between training or fixtures data',
212+
),
213+
rx.tooltip(
214+
rx.button(rx.icon('database'), variant='surface', disabled=True),
215+
content='Fixtures are not currently available',
216+
),
217+
),
227218
rx.tooltip(
228219
rx.button(
229-
rx.icon('database'),
230-
on_click=state.switch_displayed_data_category,
220+
rx.icon('arrow-up-down'),
221+
on_click=state.switch_displayed_data_type,
231222
variant='surface',
232223
loading=state.loading_db,
233224
),
234-
content='Switch between training or fixtures data',
235-
),
236-
rx.tooltip(
237-
rx.button(rx.icon('database'), variant='surface', disabled=True),
238-
content='Fixtures are not currently available',
239-
),
240-
),
241-
rx.tooltip(
242-
rx.button(
243-
rx.icon('arrow-up-down'),
244-
on_click=state.switch_displayed_data_type,
245-
variant='surface',
246-
loading=state.loading_db,
225+
content='Switch between input, output or odds data',
247226
),
248-
content='Switch between input, output or odds data',
227+
width='100%',
228+
justify='end',
249229
),
250-
margin_top='10px',
230+
height='590px',
251231
),
252-
position='fixed',
253-
left='400px',
254-
top='90px',
232+
width='100%',
255233
),
256234
)
257235

@@ -260,52 +238,44 @@ def model_data(state: rx.State, visibility_level: int) -> rx.Component:
260238
"""Data component of UI."""
261239
return rx.cond(
262240
state.visibility_level == visibility_level,
263-
rx.cond(
264-
state.evaluation_selection == 'Backtesting',
265-
rx.vstack(
266-
rx.heading('Backtesting results'),
241+
rx.box(
242+
rx.cond(
243+
state.evaluation_selection == 'Backtesting',
267244
rx.vstack(
268-
rx.divider(width='900px'),
245+
rx.heading('Results'),
269246
ag_grid(
270247
id='backtesting',
271248
row_data=state.backtesting_results,
272249
column_defs=state.backtesting_results_cols,
273-
height='225px',
274-
width='900px',
275250
theme='balham',
251+
width='100%',
252+
height='100%',
276253
),
254+
rx.heading('Optimal parameters'),
277255
ag_grid(
278256
id='parameters',
279257
row_data=state.optimal_params,
280258
column_defs=state.optimal_params_cols,
281-
height='225px',
282-
width='900px',
283259
theme='balham',
260+
width='100%',
261+
height='100%',
284262
),
285-
rx.divider(width='900px'),
263+
height='600px',
286264
),
287-
position='fixed',
288-
left='400px',
289-
top='90px',
290-
),
291-
rx.vstack(
292-
rx.heading('Value bets'),
293265
rx.vstack(
294-
rx.divider(width='900px'),
266+
rx.heading('Value bets'),
295267
ag_grid(
296268
id='value_bets',
297269
row_data=state.value_bets,
298270
column_defs=state.value_bets_cols,
299-
height='460px',
300-
width='900px',
301271
theme='balham',
272+
width='100%',
273+
height='100%',
302274
),
303-
rx.divider(width='900px'),
275+
height='600px',
304276
),
305-
position='fixed',
306-
left='400px',
307-
top='90px',
308277
),
278+
width='100%',
309279
),
310280
)
311281

@@ -319,11 +289,9 @@ def bot(state: rx.State, visibility_level: int) -> rx.Component:
319289
rx.icon('bot-message-square', size=70),
320290
rx.html(state.streamed_message),
321291
),
322-
position='fixed',
323-
left='600px',
324-
top='100px',
325-
width='500px',
292+
width='100%',
293+
height='600px',
326294
background_color=rx.color('gray', 2),
327-
padding='30px',
295+
padding='20px',
328296
),
329297
)

0 commit comments

Comments
 (0)