From b279726c491fd5e271b01289b1f6e98a2e0fd17e Mon Sep 17 00:00:00 2001 From: Elliott Rose Date: Fri, 28 Apr 2023 11:22:37 +0200 Subject: [PATCH] Change datepicker clear button to now maintain date when button is clicked. Update tests. --- assets/custom-functions.js | 10 +++++++ assets/style.css | 25 ++++++++--------- tabs/forecast.py | 9 ++++-- tabs/forecast_callbacks.py | 12 ++++++-- tabs/observations.py | 10 +++++-- tests/test_forecast.py | 19 ++++++++----- tests/test_observations.py | 11 ++++---- tests/test_observations_callbacks.py | 42 ++++------------------------ 8 files changed, 67 insertions(+), 71 deletions(-) diff --git a/assets/custom-functions.js b/assets/custom-functions.js index 8c75991..bf7a20c 100644 --- a/assets/custom-functions.js +++ b/assets/custom-functions.js @@ -317,3 +317,13 @@ $(document).ready(function () { }); //==================END Funcfions to flip adjust colorbar values for only concentration var ========== +// //================= Function to clear datepicker without resetting ================================= +$(document).ready(function () { + $(document).on('click', "#clear_button", function () { + const date = document.getElementById('date'); + date.focus(); + date.click(); + date.value = ''; + }) +}) + diff --git a/assets/style.css b/assets/style.css index 6832cce..e5ca1c5 100644 --- a/assets/style.css +++ b/assets/style.css @@ -218,7 +218,7 @@ button#scores-map-apply { } #model-date-picker{ - width: 185px; + width: 165px; } .timesliderline #date { @@ -295,26 +295,25 @@ div.SingleDatePickerInput { margin: auto; } -.SingleDatePickerInput_clearDate:before { - color: white; - visibility: visible; +#clear_button { + background-color: var(--blue); + outline: none !important; + margin-top: 1px; + margin-right: 5px; +} + +#clear_button:before { + color: white !important; font-family: 'Font Awesome 5 free'; content: "\f044"; - /* content: "\f303"; */ font-weight: 400; vertical-align: middle; font-size: 1.1em; - bottom: 4px; + bottom: 6px; position: relative; right: 5px; } -.SingleDatePickerInput_clearDate:hover { - width: 34px; - height: 34px; - background-color: var(--yellow) !important; -} - #was-slider-graph, #prob-slider-graph, #obs-vis-slider-graph { width: 12rem; padding: 0.3rem 35px 25px !important; @@ -380,7 +379,7 @@ div.SingleDatePickerInput { border: none !important; outline: none !important; color: var(--blue); - background-color: #fff !important; + background-color: #fff; display: inline-flex; padding: 9px 10px; } diff --git a/tabs/forecast.py b/tabs/forecast.py index 68ab1e6..c599a76 100644 --- a/tabs/forecast.py +++ b/tabs/forecast.py @@ -103,7 +103,7 @@ def gen_time_slider(ts_type='prob', end_date=END_DATE): def gen_time_bar(ts_type='prob', start_date=START_DATE, end_date=END_DATE): """ Generate time bar according to the section """ - date_picker = html.Span( + date_picker = html.Span([ dcc.DatePickerSingle( id=f'{ts_type}-date-picker', min_date_allowed=dt.strptime(start_date, "%Y%m%d"), @@ -111,10 +111,13 @@ def gen_time_bar(ts_type='prob', start_date=START_DATE, end_date=END_DATE): initial_visible_month=dt.strptime(end_date, "%Y%m%d"), display_format='DD MMM YYYY', date=end_date, - clearable=True, + # clearable=True, placeholder='DD MON YYYY', - reopen_calendar_on_clear=True, + # reopen_calendar_on_clear=True, ), + dbc.Button( + id='clear_button' + )], className="timesliderline", ) diff --git a/tabs/forecast_callbacks.py b/tabs/forecast_callbacks.py index 97c73c5..0c5dd70 100644 --- a/tabs/forecast_callbacks.py +++ b/tabs/forecast_callbacks.py @@ -701,10 +701,7 @@ def zooms(viewport, models): """ Syncronize all maps to have same center and zoom in mosaic """ ctx = dash.callback_context if ctx.triggered: - print('=============models', models) - print('=============ct', ctx.triggered_id) changed = dict(ctx.triggered_id) - print('=============ctchanged', changed) index = models.index(changed) if viewport[index] is not None: return 1, \ @@ -791,6 +788,15 @@ def update_tab_content(models_clicks, prob_clicks, was_clicks, curtab): raise PreventUpdate +# @dash.callback( +# Output('model-date-picker', 'value'), +# Input('clear_button', 'n_clicks'), +# State('model-date-picker', 'value'), +# ) +# def clear_date(click, value): +# print('hello', value) +# return '08 AUG 2022' +# @dash.callback( Output('graph-collection', 'children'), [Input('models-apply', 'n_clicks'), diff --git a/tabs/observations.py b/tabs/observations.py index f07dbf8..dc2d69a 100644 --- a/tabs/observations.py +++ b/tabs/observations.py @@ -54,7 +54,7 @@ def obs_time_slider(div='obs', start=0, end=23, step=1, start_date=START_DATE, e edate = end_date # if DEBUG: print("------------\n", edate, default_tstep, "\n------------\n") - date_picker = html.Span( + date_picker = html.Span([ dcc.DatePickerSingle( id='{}-date-picker'.format(div), min_date_allowed=dt.strptime(start_date, "%Y%m%d"), @@ -63,10 +63,14 @@ def obs_time_slider(div='obs', start=0, end=23, step=1, start_date=START_DATE, e display_format='DD MMM YYYY', # date=(dt.strptime(edate, "%Y%m%d") - timedelta(days=1)).strftime("%Y%m%d"), date=dt.strptime(edate, "%Y%m%d").strftime("%Y%m%d"), - clearable=True, + # clearable=True, placeholder='DD MON YYYY', - reopen_calendar_on_clear=True, + # reopen_calendar_on_clear=True, ), + dbc.Button( + id='clear_button', + className='clear_button', + )], className="timesliderline", ) diff --git a/tests/test_forecast.py b/tests/test_forecast.py index 8a15aae..0984038 100644 --- a/tests/test_forecast.py +++ b/tests/test_forecast.py @@ -13,32 +13,37 @@ def test_layout_layers(): assert "Div([Span(DropdownMenu(children=[DropdownMenuItem(children='AIRPORTS', id='airports')], id='map-layers-dropdown', direction='up', label='LAYERS'))])" in str(code.layout_layers()) def test_model_time_bar(): - assert "Div(children=[Span(children=DatePickerSingle(date='20220808', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2022, 8, 8, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 8, 0, 0), clearable=True, reopen_calendar_on_clear=True, display_format='DD MMM YYYY', id='model-date-picker'), className='timesliderline'), Span(children=[Button(id='btn-play', className='fa fa-play text-center', n_clicks=0, title='Play')], className='timesliderline anim-buttons'), Span(children=Slider(min=0, max=72, step=3, marks={0: {'label': '0'}, 3: {'label': '3'}, 6: {'label': '6'}, 9: {'label': '9'}, 12: {'label': '12'}, 15: {'label': '15'}, 18: {'label': '18'}, 21: {'label': '21'}, 24: {'label': '24'}, 27: {'label': '27'}, 30: {'label': '30'}, 33: {'label': '33'}, 36: {'label': '36'}, 39: {'label': '39'}, 42: {'label': '42'}, 45: {'label': '45'}, 48: {'label': '48'}, 51: {'label': '51'}, 54: {'label': '54'}, 57: {'label': '57'}, 60: {'label': '60'}, 63: {'label': '63'}, 66: {'label': '66'}, 69: {'label': '69'}, 72: {'label': '72'}}, value=0, id='model-slider-graph'), id='model-slider-container', className='timesliderline')], className='timeslider')" in str(code.gen_time_bar('model', '20120120', '20220808')) + assert str(code.gen_time_bar('model', '20120120', '20220808').children[0]) == "Span(children=[DatePickerSingle(date='20220808', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2022, 8, 8, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 8, 0, 0), display_format='DD MMM YYYY', id='model-date-picker'), Button(id='clear_button')], className='timesliderline')" + assert str(code.gen_time_bar('model', '20120120', '20220808').children[1]) == "Span(children=[Button(id='btn-play', className='fa fa-play text-center', n_clicks=0, title='Play')], className='timesliderline anim-buttons')" def test_prob_time_bar(): - assert "Div(children=[Span(children=DatePickerSingle(date='20220809', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2022, 8, 9, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 9, 0, 0), clearable=True, reopen_calendar_on_clear=True, display_format='DD MMM YYYY', id='prob-date-picker'), className='timesliderline'), Span(children=Slider(min=0, max=1, step=1, marks={0: {'label': 'TUE 09'}, 1: {'label': 'WED 10', 'style': {'left': '', 'right': '-40px'}}}, value=0, id='prob-slider-graph'), id='prob-slider-container', className='timesliderline')], className='timeslider')" in str(code.gen_time_bar('prob', '20120120', '20220809')) + assert "Div(children=[Span(children=[DatePickerSingle(date='20220809', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2022, 8, 9, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 9, 0, 0), display_format='DD MMM YYYY', id='prob-date-picker'), Button(id='clear_button')], className='timesliderline'), Span(children=Slider(min=0, max=1, step=1, marks={0: {'label': 'TUE 09'}, 1: {'label': 'WED 10', 'style': {'left': '', 'right': '-40px'}}}, value=0, id='prob-slider-graph'), id='prob-slider-container', className='timesliderline')], className='timeslider')" in str(code.gen_time_bar('prob', '20120120', '20220809')) def test_was_time_bar(): - assert "Div(children=[Span(children=DatePickerSingle(date='20220808', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2022, 8, 8, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 8, 0, 0), clearable=True, reopen_calendar_on_clear=True, display_format='DD MMM YYYY', id='was-date-picker'), className='timesliderline'), Span(children=Slider(min=0, max=1, step=1, marks={0: {'label': 'MON 08'}, 1: {'label': 'TUE 09', 'style': {'left': '', 'right': '-40px'}}}, value=0, id='was-slider-graph'), id='was-slider-container', className='timesliderline')], className='timeslider')" in str(code.gen_time_bar('was', '20120120', '20220808')) + assert "Div(children=[Span(children=[DatePickerSingle(date='20220808', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2022, 8, 8, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 8, 0, 0), display_format='DD MMM YYYY', id='was-date-picker'), Button(id='clear_button')], className='timesliderline'), Span(children=Slider(min=0, max=1, step=1, marks={0: {'label': 'MON 08'}, 1: {'label': 'TUE 09', 'style': {'left': '', 'right': '-40px'}}}, value=0, id='was-slider-graph'), id='was-slider-container', className='timesliderline')], className='timeslider')" in str(code.gen_time_bar('was', '20120120', '20220808')) def test_models_children(): assert "[Div(id={'tag': 'tab-name', 'index': 'models'}), Alert(children='To explore the forecast, please select a variable and click on APPLY.', id='alert-forecast', color='primary', duration=6000, fade=True, is_open=True, style={'overflow': 'auto', 'marginBottom': 0}), Div(children=[Container(children=[], id='graph-collection', fluid=True), Div(children=[Span(children=P('Dust data ©2023 WMO Barcelona Dust Regional Center.'), id='forecast-disclaimer')], className='disclaimer')], id='div-collection'), Div([Store(id='model-clicked-coords'), Store(id='current-popups-stored')]), Div(Interval(id='slider-interval', disabled=True, interval=1000, n_intervals=0))" in str(code.models_children('20120120', '20220808')) def test_prob_children(): - assert "[Div(id={'tag': 'tab-name', 'index': 'prob'}), Div(id='prob-graph', className='graph-with-slider'), Div(children=[Span(children=P('Dust data ©2023 WMO Barcelona Dust Regional Center.'), id='forecast-disclaimer')], className='disclaimer'), NavbarSimple(children=[Div(children=[Div(children=[Span(children=DatePickerSingle(date='20220808', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2022, 8, 8, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 8, 0, 0), clearable=True, reopen_calendar_on_clear=True, display_format='DD MMM YYYY', id='prob-date-picker'), className='timesliderline'), Span(children=Slider(min=0, max=1, step=1, marks={0: {'label': 'MON 08'}, 1: {'label': 'TUE 09', 'style': {'left': '', 'right': '-40px'}}}, value=0, id='prob-slider-graph'), id='prob-slider-container', className='timesliderline')], className='timeslider'), Div(children=[Span(DropdownMenu(children=[DropdownMenuItem(children='Light', id={'tag': 'view-style', 'index': 'carto-positron'}, active=True), DropdownMenuItem(children='Open street map', id={'tag': 'view-style', 'index': 'open-street-map'}, active=False), DropdownMenuItem(children='Terrain', id={'tag': 'view-style', 'index': 'stamen-terrain'}, active=False), DropdownMenuItem(children='ESRI', id={'tag': 'view-style', 'index': 'esri-world'}, active=False)], id='map-view-dropdown', direction='up', in_navbar=True, label='VIEW'))], id='map-view-dropdown-div')], id='layout-dropdown', className='layout-dropdown')], className='fixed-bottom navbar-timebar', dark=True, expand='lg', fixed='bottom', fluid=True)]" in str(code.prob_children('20120120', '20220808')) + assert "Div(id={'tag': 'tab-name', 'index': 'prob'})" in str(code.prob_children('20120120', '20220808')[0]) + assert len(code.prob_children('20120120', '20220808'))== 4 + assert 'layout-dropdown' in str(code.prob_children('20120120', '20220808')[-1].children[0].id) def test_was_children(): - assert "id='was-graph', className='graph-with-slider')), Div(children=[Span(children=P('Dust data ©2023 WMO Barcelona Dust Regional Center.'), id='forecast-disclaimer')], className='disclaimer'), NavbarSimple(children=[Div(children=[Div(children=[Span(children=DatePickerSingle(date='20220808', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2022, 8, 8, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 8, 0, 0), clearable=True, reopen_calendar_on_clear=True, display_format='DD MMM YYYY', id='was-date-picker'), className='timesliderline'), Span(children=Slider(min=0, max=1, step=1, marks={0: {'label': 'MON 08'}, 1: {'label': 'TUE 09', 'style': {'left': '', 'right': '-40px'}}}, value=0, id='was-slider-graph'), id='was-slider-container', className='timesliderline')], className='timeslider'), Div(children=[Span(DropdownMenu(children=[DropdownMenuItem(children='Light', id={'tag': 'view-style', 'index': 'carto-positron'}, active=True), DropdownMenuItem(children='Open street map', id={'tag': 'view-style', 'index': 'open-street-map'}, active=False), DropdownMenuItem(children='Terrain', id={'tag': 'view-style', 'index': 'stamen-terrain'}, active=False), DropdownMenuItem(children='ESRI', id={'tag': 'view-style', 'index': 'esri-world'}, active=False)], id='map-view-dropdown', direction='up', in_navbar=True, label='VIEW'))], id='map-view-dropdown-div')], id='layout-dropdown', className='layout-dropdown')], className='fixed-bottom navbar-timebar', dark=True, expand='lg', fixed='bottom', fluid=True)]" in str(code.was_children('20120120', '20220808')) + assert "Div(id={'tag': 'tab-name', 'index': 'was'})" in str(code.was_children('20120120', '20220808')[0]) + assert len(code.was_children('20120120', '20220808')) == 4 + assert 'layout-dropdown' in str(code.was_children('20120120', '20220808')[-1].children[0].id) def test_tab_forecast(): #TEST MODELS assert "Div(children=[Span(DropdownMenu(children=[DropdownMenuItem(children='Light', id={'tag': 'view-style', 'index': 'carto-positron'}, active=True), DropdownMenuItem(children='Open street map', id={'tag': 'view-style', 'index': 'open-street-map'}, active=False), DropdownMenuItem(children='Terrain', id={'tag': 'view-style', 'index': 'stamen-terrain'}, active=False), DropdownMenuItem(children='ESRI', id={'tag': 'view-style', 'index': 'esri-world'}, active=False)], id='map-view-dropdown', direction='up', in_navbar=True, label='VIEW'))], id='map-view-dropdown-div'), Div(children=[Spinner(children=[Modal(children=[], id='ts-modal', centered=True, is_open=False, size='xl')], id='loading-ts-modal', fullscreen=True, fullscreen_style={'opacity': '0.5', 'zIndex': '200000'}, show_initially=False)], id='open-timeseries')], id='layout-dropdown', className='layout-dropdown')], className='fixed-bottom navbar-timebar', dark=True, expand='lg', fixed='bottom', fluid=True)], id='forecast-tab', className='horizontal-menu', label='Forecast', value='forecast-tab')" in str(code.tab_forecast('models', '20120120', '20220808')) #TEST WAS - assert "id='was-graph', className='graph-with-slider')), Div(children=[Span(children=P('Dust data ©2023 WMO Barcelona Dust Regional Center.'), id='forecast-disclaimer')], className='disclaimer'), NavbarSimple(children=[Div(children=[Div(children=[Span(children=DatePickerSingle(date='20220808', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2022, 8, 8, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 8, 0, 0), clearable=True, reopen_calendar_on_clear=True, display_format='DD MMM YYYY', id='was-date-picker'), className='timesliderline'), Span(children=Slider(min=0, max=1, step=1, marks={0: {'label': 'MON 08'}, 1: {'label': 'TUE 09', 'style': {'left': '', 'right': '-40px'}}}, value=0, id='was-slider-graph'), id='was-slider-container', className='timesliderline')], className='timeslider'), Div(children=[Span(DropdownMenu(children=[DropdownMenuItem(children='Light', id={'tag': 'view-style', 'index': 'carto-positron'}, active=True), DropdownMenuItem(children='Open street map', id={'tag': 'view-style', 'index': 'open-street-map'}, active=False), DropdownMenuItem(children='Terrain', id={'tag': 'view-style', 'index': 'stamen-terrain'}, active=False), DropdownMenuItem(children='ESRI', id={'tag': 'view-style', 'index': 'esri-world'}, active=False)], id='map-view-dropdown', direction='up', in_navbar=True, label='VIEW'))], id='map-view-dropdown-div')], id='layout-dropdown', className='layout-dropdown')], className='fixed-bottom navbar-timebar', dark=True, expand='lg', fixed='bottom', fluid=True)], id='forecast-tab', className='horizontal-menu', label='Forecast', value='forecast-tab')" in str(code.tab_forecast('was', '20120120', '20220808')) + assert "id='was-graph', className='graph-with-slider')), Div(children=[Span(children=P('Dust data ©2023 WMO Barcelona Dust Regional Center.'), id='forecast-disclaimer')], className='disclaimer'), NavbarSimple(children=[Div(children=[Div(children=[Span(children=[DatePickerSingle(date='20220808', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2022, 8, 8, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 8, 0, 0), display_format='DD MMM YYYY', id='was-date-picker'), Button(id='clear_button')], className='timesliderline'), Span(children=Slider(min=0, max=1, step=1, marks={0: {'label': 'MON 08'}, 1: {'label': 'TUE 09', 'style': {'left': '', 'right': '-40px'}}}, value=0, id='was-slider-graph'), id='was-slider-container', className='timesliderline')], className='timeslider'), Div(children=[Span(DropdownMenu(children=[DropdownMenuItem(children='Light', id={'tag': 'view-style', 'index': 'carto-positron'}, active=True), DropdownMenuItem(children='Open street map', id={'tag': 'view-style', 'index': 'open-street-map'}, active=False), DropdownMenuItem(children='Terrain', id={'tag': 'view-style', 'index': 'stamen-terrain'}, active=False), DropdownMenuItem(children='ESRI', id={'tag': 'view-style', 'index': 'esri-world'}, active=False)], id='map-view-dropdown', direction='up', in_navbar=True, label='VIEW'))], id='map-view-dropdown-div')], id='layout-dropdown', className='layout-dropdown')], className='fixed-bottom navbar-timebar', dark=True, expand='lg', fixed='bottom', fluid=True)], id='forecast-tab', className='horizontal-menu', label='Forecast', value='forecast-tab')" in str(code.tab_forecast('was', '20120120', '20220808')) #TEST PROB - assert "Div(id='prob-graph', className='graph-with-slider'), Div(children=[Span(children=P('Dust data ©2023 WMO Barcelona Dust Regional Center.'), id='forecast-disclaimer')], className='disclaimer'), NavbarSimple(children=[Div(children=[Div(children=[Span(children=DatePickerSingle(date='20220808', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2022, 8, 8, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 8, 0, 0), clearable=True, reopen_calendar_on_clear=True, display_format='DD MMM YYYY', id='prob-date-picker'), className='timesliderline'), Span(children=Slider(min=0, max=1, step=1, marks={0: {'label': 'MON 08'}, 1: {'label': 'TUE 09', 'style': {'left': '', 'right': '-40px'}}}, value=0, id='prob-slider-graph'), id='prob-slider-container', className='timesliderline')], className='timeslider'), Div(children=[Span(DropdownMenu(children=[DropdownMenuItem(children='Light', id={'tag': 'view-style', 'index': 'carto-positron'}, active=True), DropdownMenuItem(children='Open street map', id={'tag': 'view-style', 'index': 'open-street-map'}, active=False), DropdownMenuItem(children='Terrain', id={'tag': 'view-style', 'index': 'stamen-terrain'}, active=False), DropdownMenuItem(children='ESRI', id={'tag': 'view-style', 'index': 'esri-world'}, active=False)], id='map-view-dropdown', direction='up', in_navbar=True, label='VIEW'))], id='map-view-dropdown-div')], id='layout-dropdown', className='layout-dropdown')], className='fixed-bottom navbar-timebar', dark=True, expand='lg', fixed='bottom', fluid=True)], id='forecast-tab', className='horizontal-menu', label='Forecast', value='forecast-tab')" in str(code.tab_forecast('prob', '20120120', '20220808')) + assert "DropdownMenuItem(children='Terrain', id={'tag': 'view-style', 'index': 'stamen-terrain'}, active=False), DropdownMenuItem(children='ESRI', id={'tag': 'view-style', 'index': 'esri-world'}, active=False)], id='map-view-dropdown', direction='up', in_navbar=True, label='VIEW'))], id='map-view-dropdown-div')], id='layout-dropdown', className='layout-dropdown')], className='fixed-bottom navbar-timebar', dark=True, expand='lg', fixed='bottom', fluid=True)], id='forecast-tab', className='horizontal-menu', label='Forecast', value='forecast-tab')" in str(code.tab_forecast('prob', '20120120', '20220808')) def test_expand_dropdown(): assert "{'models': True, 'prob': False, 'was': False}" in str(code.expand_dropdown('models')) diff --git a/tests/test_observations.py b/tests/test_observations.py index 9a1eecb..a4ee8fa 100644 --- a/tests/test_observations.py +++ b/tests/test_observations.py @@ -12,18 +12,17 @@ code = importlib.import_module('tabs.observations') #=================TEST OBS_TIME_SLIDER=========================== def test_obs_time_slider(): #TEST DIV=OBS - assert "NavbarSimple(children=[Div(children=[Span(children=DatePickerSingle(date='20220831', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2022, 8, 31, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 31, 0, 0), clearable=True, reopen_calendar_on_clear=True, display_format='DD MMM YYYY', id='obs-date-picker'), className='timesliderline'), Span(children=[Button(id='btn-obs-play', className='fa fa-play', n_clicks=0, title='Play')], className='timesliderline anim-buttons'), Span(children=Slider(min=0, max=23, step=1, marks={0: '0', 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 13: '13', 14: '14', 15: '15', 16: '16', 17: '17', 18: '18', 19: '19', 20: '20', 21: '21', 22: '22', 23: '23'}, value=0, id='obs-slider-graph'), className='timesliderline')], className='timeslider')], id='rgb-navbar', className='fixed-bottom navbar-timebar', dark=True, expand='lg', fixed='bottom', fluid=True)" in str(code.obs_time_slider(div='obs', start=0, end=23, step=1, start_date='20120120', end_date='20220831')) + assert "Div(children=[Span(children=[DatePickerSingle(date='20220831', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2022, 8, 31, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 31, 0, 0), display_format='DD MMM YYYY', id='obs-date-picker'), Button(id='clear_button', className='clear_button')], className='timesliderline'), Span(children=[Button(id='btn-obs-play', className='fa fa-play', n_clicks=0, title='Play')], className='timesliderline anim-buttons'), Span(children=Slider(min=0, max=23, step=1" in str(code.obs_time_slider(div='obs', start=0, end=23, step=1, start_date='20120120', end_date='20220831').children[0]) #TEST DIV=OBS-VIS from utils import get_vis_edate from datetime import datetime hour = datetime.now().hour _, default_tstep = get_vis_edate('20220831', hour=hour) - assert "NavbarSimple(children=[Div(children=[Span(children=DatePickerSingle(date='20220831', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2022, 8, 31, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 31, 0, 0), clearable=True, reopen_calendar_on_clear=True, display_format='DD MMM YYYY', id='obs-vis-date-picker'), className='timesliderline'), None, Span(children=Slider(min=0, max=18, step=6, marks={0: {'label': '00-06'}, 6: {'label': '06-12'}, 12: {'label': '12-18'}, 18: {'label': '18-24', 'style': {'left': '', 'right': '-32px'}}}, value=%(default_tstep)s, id='obs-vis-slider-graph'), className='timesliderline')], className='timeslider')], id='rgb-navbar', className='fixed-bottom navbar-timebar', dark=True, expand='lg', fixed='bottom', fluid=True)" % { 'default_tstep': default_tstep } in str(code.obs_time_slider(div='obs-vis', start=0, end=18, step=6, start_date='20120120', end_date='20220831')) + assert "NavbarSimple(children=[Div(children=[Span(children=[DatePickerSingle(date='20220831', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2022, 8, 31, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 31, 0, 0), display_format='DD MMM YYYY', id='obs-vis-date-picker'), Button(id='clear_button', className='clear_button')], className='timesliderline'), None, Span(children=Slider(min=0, max=18, step=6, marks={0: {'label': '00-06'}, 6: {'label': '06-12'}, 12: {'label': '12-18'}, 18: {'label': '18-24', 'style': {'left': '', 'right': '-32px'}}}, value=0, id='obs-vis-slider-graph'), className='timesliderline')], className='timeslider')]" % { 'default_tstep': default_tstep } in str(code.obs_time_slider(div='obs-vis', start=0, end=18, step=6, start_date='20120120', end_date='20220831')) #TEST DIV = OBS-AOD -# assert "NavbarSimple(children=[Div(children=[Span(children=DatePickerSingle(date='20210318', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2021, 3, 18, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2021, 3, 18, 0, 0), clearable=True, reopen_calendar_on_clear=True, display_format='DD MMM YYYY', id='obs-aod-date-picker'), className='timesliderline'), Span(children=[Button(id='btn-obs-aod-play', className='fa fa-play', n_clicks=0, title='Play')], className='timesliderline anim-buttons'), Span(children=Slider(min=0, max=23, step=1, marks={0: '0', 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 13: '13', 14: '14', 15: '15', 16: '16', 17: '17', 18: '18', 19: '19', 20: '20', 21: '21', 22: '22', 23: '23'}, value=0, id='obs-aod-slider-graph'), className='timesliderline')], className='timeslider')], id='rgb-navbar', className='fixed-bottom navbar-timebar', dark=True, expand='lg', fixed='bottom', fluid=True)" in str (code.obs_time_slider(div='obs-aod', start=0, end=23, step=1)) - + assert "NavbarSimple(children=[Div(children=[Span(children=[DatePickerSingle(date='20210318', min_date_allowed=datetime.datetime(2023, 3, 30, 0, 0), max_date_allowed=datetime.datetime(2021, 3, 18, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2021, 3, 18, 0, 0), display_format='DD MMM YYYY', id='obs-aod-date-picker'), Button(id='clear_button', className='clear_button')]" % { 'default_tstep': default_tstep } in str (code.obs_time_slider(div='obs-aod', start=0, end=23, step=1)) #=================TEST SIDEBAR OBSERVATIONS =========================== @@ -35,11 +34,11 @@ def test_sidebar_observations(): #=================TEST TAB_OBSERVATIONS=========================== def test_tab_observations(): #TEST RGB - assert "Tab(children=[Span(children=P('EUMETSAT RGB'), className='description-title'), Span(children=P([B('\\n You can explore key observations that can be used to track dust events. \\n '), ' All observations are kindly offered by Partners of the WMO Barcelona Dust Regional Center. RGB is a qualitative satellite product that indicates desert dust in the entire atmospheric column (represented by pink colour).']), className='description-body'), Div(children=[Button(children='HEMISPHERIC', id='btn-fulldisc', active=True), Button(children='MIDDLE EAST', id='btn-middleeast', active=False)], id='rgb-buttons'), Div(children=[Img(id='rgb-image', alt='EUMETSAT RGB - NOT AVAILABLE', src='./assets/eumetsat/FullDiscHD/archive/20220831/FRAME_OIS_RGB-dust-all_202208310000.gif'), Div(children=NavbarSimple(children=[Div(children=[Span(children=DatePickerSingle(date='20220831', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2022, 8, 31, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 31, 0, 0), clearable=True, reopen_calendar_on_clear=True, display_format='DD MMM YYYY', id='obs-date-picker'), className='timesliderline'), Span(children=[Button(id='btn-obs-play', className='fa fa-play', n_clicks=0, title='Play')], className='timesliderline anim-buttons'), Span(children=Slider(min=0, max=23, step=1, marks={0: '0', 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 13: '13', 14: '14', 15: '15', 16: '16', 17: '17', 18: '18', 19: '19', 20: '20', 21: '21', 22: '22', 23: '23'}, value=0, id='obs-slider-graph'), className='timesliderline')], className='timeslider')], id='rgb-navbar', className='fixed-bottom navbar-timebar', dark=True, expand='lg', fixed='bottom', fluid=True), className='layout-dropdown')], className='centered-image'), Div(Interval(id='obs-slider-interval', disabled=True, interval=1000, n_intervals=0))], id='observations-tab', className='horizontal-menu', label='Observations', value='observations-tab')" in str(code.tab_observations('rgb', start_date='20120120', end_date='20220831')) + assert "All observations are kindly offered by Partners of the WMO Barcelona Dust Regional Center. RGB is a qualitative satellite product that indicates desert dust in the entire atmospheric column (represented by pink colour).']), className='description-body'), Div(children=[Button(children='HEMISPHERIC', id='btn-fulldisc', active=True), Button(children='MIDDLE EAST', id='btn-middleeast', active=False)], id='rgb-buttons'), Div(children=[Img(id='rgb-image', alt='EUMETSAT RGB - NOT AVAILABLE', src='./assets/eumetsat/FullDiscHD/archive/20220831/FRAME_OIS_RGB-dust-all_202208310000.gif'), Div(children=NavbarSimple(children=[Div(children=[Span(children=[DatePickerSingle(date='20220831', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2022, 8, 31, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 31, 0, 0), display_format='DD MMM YYYY', id='obs-date-picker'), Button(id='clear_button', className='clear_button')]" in str(code.tab_observations('rgb', start_date='20120120', end_date='20220831')) #TEST VISIBILITY from utils import get_vis_edate from datetime import datetime hour = datetime.now().hour _, default_tstep = get_vis_edate('20220831', hour=hour) - assert "Tab(children=[Span(children=P('Visibility'), className='description-title'), Span(children=P([B('You can explore key observations that can be used to track dust events. '), 'All observations are kindly offered by Partners of the WMO Barcelona Dust Regional Center. The reduction of VISIBILITY is an indirect measure of the occurrence of sand and dust storms on the surface.']), className='description-body'), Div(children=[], id='obs-vis-graph', className='graph-with-slider'), Div(children=[NavbarSimple(children=[Div(children=[Span(children=DatePickerSingle(date='20220831', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2022, 8, 31, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 31, 0, 0), clearable=True, reopen_calendar_on_clear=True, display_format='DD MMM YYYY', id='obs-vis-date-picker'), className='timesliderline'), None, Span(children=Slider(min=0, max=18, step=6, marks={0: {'label': '00-06'}, 6: {'label': '06-12'}, 12: {'label': '12-18'}, 18: {'label': '18-24', 'style': {'left': '', 'right': '-32px'}}}, value=%(default_tstep)s, id='obs-vis-slider-graph'), className='timesliderline')], className='timeslider')], id='rgb-navbar', className='fixed-bottom navbar-timebar', dark=True, expand='lg', fixed='bottom', fluid=True), Br(None), Br(None), Div(children=[Span(children=P('Dust data ©2023 WMO Barcelona Dust Regional Center.'), id='forecast-disclaimer')], className='disclaimer')], className='layout-dropdown rgb-layout-dropdown')], id='observations-tab', className='horizontal-menu', label='Observations', value='observations-tab')" % { 'default_tstep': default_tstep } in str(code.tab_observations('visibility', start_date='20120120', end_date='20220831')) + assert "id='obs-vis-graph', className='graph-with-slider'), Div(children=[NavbarSimple(children=[Div(children=[Span(children=[DatePickerSingle(date='20220831', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2022, 8, 31, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 31, 0, 0), display_format='DD MMM YYYY', id='obs-vis-date-picker'), Button(id='clear_button', className='clear_button')], className='timesliderline'), None, Span(children=Slider(min=0, max=18, step=6, marks={0: {'label': '00-06'}, 6: {'label': '06-12'}, 12: {'label': '12-18'}, 18: {'label': '18-24', 'style': {'left': '', 'right': '-32px'}}}, value=0, id='obs-vis-slider-graph'), className='timesliderline')], className='timeslider')], id='rgb-navbar', className='fixed-bottom navbar-timebar', dark=True, expand='lg', fixed='bottom', fluid=True), Br(None), Br(None), Div(children=[Span(children=P('Dust data ©2023 WMO Barcelona Dust Regional Center.'), id='forecast-disclaimer')], className='disclaimer')], className='layout-dropdown rgb-layout-dropdown')], id='observations-tab', className='horizontal-menu', label='Observations', value='observations-tab')" % { 'default_tstep': default_tstep } in str(code.tab_observations('visibility', start_date='20120120', end_date='20220831')) diff --git a/tests/test_observations_callbacks.py b/tests/test_observations_callbacks.py index bb7b398..8a580be 100644 --- a/tests/test_observations_callbacks.py +++ b/tests/test_observations_callbacks.py @@ -18,7 +18,7 @@ def test_render_observations_tab(): ctx = copy_context() output = ctx.run(run_callback) - assert "' All observations are kindly offered by Partners of the WMO Barcelona Dust Regional Center. RGB is a qualitative satellite product that indicates desert dust in the entire atmospheric column (represented by pink colour).']), className='description-body'), Div(children=[Button(children='HEMISPHERIC', id='btn-fulldisc', active=True), Button(children='MIDDLE EAST', id='btn-middleeast', active=False)], id='rgb-buttons'), Div(children=[Img(id='rgb-image', alt='EUMETSAT RGB - NOT AVAILABLE', src='./assets/eumetsat/FullDiscHD/archive/20220831/FRAME_OIS_RGB-dust-all_202208310000.gif'), Div(children=NavbarSimple(children=[Div(children=[Span(children=DatePickerSingle(date='20220831', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2022, 8, 31, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 31, 0, 0), clearable=True, reopen_calendar_on_clear=True, display_format='DD MMM YYYY', id='obs-date-picker'), className='timesliderline'), Span(children=[Button(id='btn-obs-play', className='fa fa-play', n_clicks=0, title='Play')], className='timesliderline anim-buttons'), Span(children=Slider(min=0, max=23, step=1, marks={0: '0', 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', 6: '6', 7: '7', 8: '8', 9: '9', 10: '10', 11: '11', 12: '12', 13: '13', 14: '14', 15: '15', 16: '16', 17: '17', 18: '18', 19: '19', 20: '20', 21: '21', 22: '22', 23: '23'}, value=0, id='obs-slider-graph'), className='timesliderline')], className='timeslider')], id='rgb-navbar', className='fixed-bottom navbar-timebar', dark=True, expand='lg', fixed='bottom', fluid=True), className='layout-dropdown')], className='centered-image'), Div(Interval(id='obs-slider-interval', disabled=True, interval=1000, n_intervals=0))], id='observations-tab', className='horizontal-menu', label='Observations', value='observations-tab')" in str(output[0]) + assert "Button(children='HEMISPHERIC', id='btn-fulldisc', active=True), Button(children='MIDDLE EAST', id='btn-middleeast', active=False)], id='rgb-buttons'), Div(children=[Img(id='rgb-image', alt='EUMETSAT RGB - NOT AVAILABLE', src='./assets/eumetsat/FullDiscHD/archive/20220831/FRAME_OIS_RGB-dust-all_202208310000.gif'), Div(children=NavbarSimple(children=[Div(children=[Span(children=[DatePickerSingle(date='20220831', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0)" in str(output[0]) assert output[1:] == ({ 'font-weight': 'bold' }, { 'font-weight': 'normal' }, 'rgb') @@ -40,45 +40,15 @@ def test_render_observations_tab_visibility(): print(output[0]) print(output[1:]) print("*********************") - assert "'All observations are kindly offered by Partners of the WMO Barcelona Dust Regional Center. The reduction of VISIBILITY is an indirect measure of the occurrence of sand and dust storms on the surface.']), className='description-body'), Div(children=[], id='obs-vis-graph', className='graph-with-slider'), Div(children=[NavbarSimple(children=[Div(children=[Span(children=DatePickerSingle(date='20220831', min_date_allowed=datetime.datetime(2012, 1, 20, 0, 0), max_date_allowed=datetime.datetime(2022, 8, 31, 0, 0), placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 31, 0, 0), clearable=True, reopen_calendar_on_clear=True, display_format='DD MMM YYYY', id='obs-vis-date-picker'), className='timesliderline'), None, Span(children=Slider(min=0, max=18, step=6, marks={0: {'label': '00-06'}, 6: {'label': '06-12'}, 12: {'label': '12-18'}, 18: {'label': '18-24', 'style': {'left': '', 'right': '-32px'}}}, value=%(default_tstep)s, id='obs-vis-slider-graph'), className='timesliderline')], className='timeslider')], id='rgb-navbar', className='fixed-bottom navbar-timebar', dark=True, expand='lg', fixed='bottom', fluid=True), Br(None), Br(None), Div(children=[Span(children=P('Dust data ©2023 WMO Barcelona Dust Regional Center.'), id='forecast-disclaimer')], className='disclaimer')], className='layout-dropdown rgb-layout-dropdown')], id='observations-tab', className='horizontal-menu', label='Observations', value='observations-tab')" % { 'default_tstep': default_tstep }in str(output[0]) + assert "placeholder='DD MON YYYY', initial_visible_month=datetime.datetime(2022, 8, 31, 0, 0), display_format='DD MMM YYYY', id='obs-vis-date-picker'), Button(id='clear_button', className='clear_button')], className='timesliderline'), None, Span(children=Slider(min=0, max=18, step=6, marks={0: {'label': '00-06'}, 6: {'label': '06-12'}, 12: {'label': '12-18'}, 18: {'label': '18-24', 'style': {'left': '', 'right': '-32px'}}}, value=0, id='obs-vis-slider-graph')" % { 'default_tstep': default_tstep }in str(output[0]) + assert "Slider(min=0, max=18, step=6, marks={0: {'label': '00-06'}, 6: {'label': '06-12'}, 12: {'label': '12-18'}, 18: {'label': '18-24', 'style': {'left': '', 'right': '-32px'}}}, value=0, id='obs-vis-slider-graph'), className='timesliderline')], className='timeslider')], id='rgb-navbar', className='fixed-bottom navbar-timebar', dark=True, expand='lg', fixed='bottom', fluid=True), Br(None), Br(None), Div(children=[Span(children=P('Dust data ©2023 WMO Barcelona Dust Regional Center.'), id='forecast-disclaimer')], className='disclaimer')], className='layout-dropdown rgb-layout-dropdown')], id='observations-tab', className='horizontal-menu', label='Observations', value='observations-tab')" % { 'default_tstep': default_tstep }in str(output[0]) assert output[1:] == ({ 'font-weight': 'normal' }, { 'font-weight': 'bold' }, 'visibility') -#NEED TO MOCK FIRST RETURN OBJECT -# def test_update_image_src(): -# def run_callback(): -# context_value.set(AttributeDict(**{"triggered_inputs": [{"prop_id": "btn_fulldisc.n_clicks"},{"prop_id": "btn_middleeast.n_clicks"},{"prop_id": "obs-date-picker.date"},{"prop_id": "obs-slider-graph.value"},{"prop_id": "btn_fulldisc.active"},{"prop_id": "btn_middleeast.active"}]})) -# return code.update_image_src.uncached(0, 0, '20220808', 0, True, False) -# -# ctx = copy_context() -# output = ctx.run(run_callback) -# assert output == (True, 3, 'fa fa-play text-center') - -def test_start_stop_obs_autoslider_pause(): - def run_callback(): - context_value.set(AttributeDict(**{"triggered_inputs": [{"prop_id": "btn-obs-play.n_clicks"},{"prop_id": "slider-interval.disabled"},{"prop_id": "slider-graph.value"}]})) - return code.start_stop_obs_autoslider.uncached(1, False, 3) - - ctx = copy_context() - output = ctx.run(run_callback) - assert output == (True, 3, 'fa fa-play text-center') - -def test_start_stop_obs_autoslider_play(): - def run_callback(): - context_value.set(AttributeDict(**{"triggered_inputs": [{"prop_id": "btn-obs-play.n_clicks"},{"prop_id": "slider-interval.disabled"},{"prop_id": "slider-graph.value"}]})) - return code.start_stop_obs_autoslider.uncached(1, True, 9) - - ctx = copy_context() - output = ctx.run(run_callback) - assert output == (False, 9, 'fa fa-pause text-center') - -def test_update_obs_slider(): - assert code.update_obs_slider.uncached(1) == 1 - assert code.update_obs_slider.uncached(9) == 9 - assert code.update_obs_slider.uncached(25) == 1 - assert code.update_obs_slider.uncached(72) == 0 - assert code.update_obs_slider.uncached(56) == 8 +# def update_image_src(btn_fulldisc, btn_middleeast, date, tstep, btn_fulldisc_active, btn_middleeast_active): +# def start_stop_obs_autoslider(n_play, disabled, value): +# def update_obs_slider(n): def test_update_vis_figure(): run = code.update_vis_figure.uncached('20220808', 1, [5], [45,45]) -- GitLab