diff --git a/.gitignore b/.gitignore index b831a6a41625ba853d5bd543ca938edc9bb9edbd..d36a28cc6f4ad9898b6d8b4ae57ed017617073ce 100644 --- a/.gitignore +++ b/.gitignore @@ -15,3 +15,4 @@ log *.swp *.swo /js/tmp/ +/conf/was_dev_erose.json diff --git a/assets/custom-functions.js b/assets/custom-functions.js index 5d5ac6b0c85c8d8b170a7ce3700849a5c4525d9f..0d005059062c1f9768528e9175f270f7f3451c11 100644 --- a/assets/custom-functions.js +++ b/assets/custom-functions.js @@ -75,19 +75,6 @@ $(document).ready(function () { }); }); -// Remove yellow from rc-slider-mark-text when moved -$(document).ready(function () { - $(document).on('click','.rc-slider' , function () { - const handle = document.getElementsByClassName('rc-slider-handle')[0]; - const text = document.getElementsByClassName('rc-slider-mark-text')[0]; - if (handle.style.left == '100%') { - text.style.color = '#999'; - } else { - text.style.color = '#F1B545'; - } - }) -}); - // Add logos for the animated gifs $(document).ready(function () { $(document).on('click', "#slider-graph", function () { @@ -146,15 +133,19 @@ $(window).on('load', function removeFullscreen () { // Move datepicker above the time series area $(document).ready(function () { - $(document).on('click', ".SingleDatePickerInput_clearDate, .SingleDatePicker", function moveDatePicker () { - const element = document.getElementsByClassName('DayPicker')[0]; - if (element != null) { - element.style.position = 'absolute'; - element.style.bottom = '78px'; - } else { - setTimeout(moveDatePicker, 20); - }; - }); + $(document).on('click', ".SingleDatePickerInput_clearDate, .SingleDatePicker", function moveDatePicker () { + const element = document.getElementsByClassName('DayPicker')[0]; + //we still want the menu to go below on eval/vis for modis + const evalVis = document.getElementById('eval-date'); + if (evalVis != null) { + return + }else if (element != null) { + element.style.position = 'absolute'; + element.style.bottom = '78px'; + }else { + setTimeout(moveDatePicker, 20); + }; + }); }); // COLLAPSE NAVBAR HAMBURGER RESIZE LARGER @@ -200,13 +191,16 @@ $(document).ready(function () { }); }); + //================== Stats table carets =============================================== // The aeronet stats table changes the position/index of the regions when they // are clicked, so we cannot easily assign a class to the regions that will maintain on click, // so we must remove the carets on click, and then add them back after the table has finished + // changing it's state + // ADD FUNCTION TO WAIT FOR TABLE TO FINISH CHANGING -function waitForMutation(selector) { +function waitForMutation(selector, func) { return new Promise(resolve => { if (document.querySelector(selector)) { return resolve(document.querySelector(selector)); @@ -214,17 +208,8 @@ function waitForMutation(selector) { const observer = new MutationObserver(mutations => { if (document.querySelector(selector)) { resolve(document.querySelector(selector)); - //Carets will populate in the wrong rows after click, so we must remove them - for (const element of mutations) { - if (['Mediterranean','NAfrica', 'MiddleEast'].includes(element.oldValue)) { - //GET ELEMENTS PARENT NODE 2 ABOVE AS IT CONTAINS THE TARGET CLASS - const target = element.target.parentNode.parentNode; - target.classList.remove('table_caret_up'); - target.classList.remove('table_caret_down'); - }; - } - // Now add the carets back in where appropriate - flipCarets(); + // console.log(mutations); + func(mutations); } }); observer.observe(document.body, { @@ -236,6 +221,21 @@ function waitForMutation(selector) { }); } +//FIND THE REGIONS TO REMOVE THE CARETS BEFORE FLIPPING THEM +function targetRegions(mutations) { + //Carets will populate in the wrong rows after click, so we must remove them + for (const element of mutations) { + if (['Mediterranean','NAfrica', 'MiddleEast'].includes(element.oldValue)) { + //GET ELEMENTS PARENT NODE 2 ABOVE AS IT CONTAINS THE TARGET CLASS + const target = element.target.parentNode.parentNode; + target.classList.remove('table_caret_up'); + target.classList.remove('table_caret_down'); + }; + } + // Now add the carets back in where appropriate + flipCarets(); +} + //CREATE FUNCTION TO FIND REGIONS AND FLIP CARETS AS NEEDED function flipCarets() { var areas = "td:contains('Europe'), td:contains('Mediterranean'),td:contains('NAfrica'),td:contains('MiddleEast')"; @@ -267,7 +267,53 @@ function flipCarets() { //ADD FUNCTION TO WAIT FOR CLICKS ON AREAS THAT SHOULD TRIGGER CARET FLIPS $(document).ready(function () { $(document).on('click', "td:contains('Europe'), td:contains('Mediterranean'),td:contains('NAfrica'),td:contains('MiddleEast'), #scores-apply, #evaluation-tab", function () { - waitForMutation('td.dash-cell.column-0'); + waitForMutation('td.dash-cell.column-0', targetRegions); }) }) //================== Stats table carets END =============================================== + + +//==================Functions to flip adjust colorbar values for only concentration var === +//GET THE VARIABLE VALUE +function getVars() { + const search = window.location.search + const urlParams = new URLSearchParams(search); + const currentVar = urlParams.get('var'); + return currentVar; +} + +function tiltValues() { + if (getVars() == 'concentration') { + const containers = document.querySelectorAll('.leaflet-control-colorbar'); + containers.forEach(container => { + const secondDiv = container.querySelectorAll('div')[1]; + const spans = secondDiv.querySelectorAll('span'); + spans.forEach(span => { + span.style.transform = 'rotate(30deg)'; + span.style.paddingTop = '2px'; + }); + }); + }; +}; + +function setWidthForColorbars(nothing) { + const colorbars = document.querySelectorAll('.leaflet-control-colorbar'); + colorbars.forEach(colorbar => { + const info = document.querySelector('.info').offsetWidth; + colorbar.style.maxWidth = info.toString() + 'px'; + }); +} + +$(document).ready(function () { + $(document).on('click', "#models-apply, .DayPicker, .SingleDatePickerInput_clearDate", function () { + setTimeout(tiltValues, 500); + setTimeout(setWidthForColorbars, 500); + }) +}) + +$(document).ready(function () { + setTimeout(tiltValues, 1500); + setTimeout(setWidthForColorbars, 1500); +}); +//==================END Funcfions to flip adjust colorbar values for only concentration var ========== + diff --git a/assets/sidebar.css b/assets/sidebar.css index a5cf5deb94c3ce10e1df20ba08691f763e82323b..6b51a62363bf225fd8f7e3f7aca6b012bc23aef5 100644 --- a/assets/sidebar.css +++ b/assets/sidebar.css @@ -61,13 +61,12 @@ .sidebar .card-header { padding-left: .5rem; - padding-right: 0px; + padding-right: 0px; } .sidebar-item { height: 2rem; margin: 1rem 0; - /*border-bottom: 1px solid lightgrey;*/ } .sidebar-item>label { @@ -89,17 +88,11 @@ color: var(--blue); } -.sidebar-first-item .Select-menu-outer { +#variable-dropdown-forecast div.Select-menu-outer .Select-menu { + height: auto !important; background-color: var(--yellow) !important; - overflow: hidden; } -/* -.sidebar-first-item .Select-menu-outer .ReactVirtualized__Grid.ReactVirtualized__List.VirtualSelectGrid { - height: 100% !important; -} -*/ - .sidebar-dropdown { max-height: 46vh; overflow-y: auto; @@ -121,8 +114,8 @@ /* Custom control: Classes recently added by Francesco */ .custom-control { - padding-left: 0; - padding-right: 0; + padding-left: 0; + padding-right: 0; } .custom-control-label { @@ -221,7 +214,7 @@ background-image: url("./images/Icon_Info.png"); background-position: center; width: 52px !important; - height: 5vh; + height: 48px; background-color: var(--dark_grey); border-right: 4px solid #4f4f4f !important; } @@ -238,7 +231,7 @@ background-position: 10% 55%; background-color: var(--dark_grey); width: 100%; - height: 5vh; + height: 48px; color: white; padding-top: 0.6rem; } @@ -262,7 +255,7 @@ span>#was-apply { margin: 0.5rem 0; } -.sidebar-bottom .btn { +.sidebar-bottom .btn { border-radius: 0; background-repeat: no-repeat; height: 10px; diff --git a/assets/style.css b/assets/style.css index 6dddcfcaaa4387479af02905936e948b2860b04e..f7584c9e78a8ef9fb3562609713e6d862362a339 100644 --- a/assets/style.css +++ b/assets/style.css @@ -97,14 +97,14 @@ a.modebar-btn { #graph-eval-aeronet { padding: 0; margin: 0; - height: 69vh !important; + height: 83vh !important; overflow: hidden; } #graph-eval-modis-obs, #graph-eval-modis-mod { padding: 0; margin: 0; - height: 67vh !important; + height: 80vh !important; overflow: hidden; } @@ -154,10 +154,32 @@ a.modebar-btn { margin-right: 1rem; } +#eval-graph .disclaimer { + display: flex; + justify-content: flex-start; + bottom: 1px; +} + +#eval-vis-modis-disclaimer{ + justify-content: flex-end !important; +} + +#graph-eval-aeronet .disclaimer { + display: flex; + justify-content: flex-end !important; + bottom: 1px; + margin-right: 16px; +} + .layout-dropdown .disclaimer>p { margin: .3rem 0rem; } +#scores-map-modal .disclaimer { + display: block; + position: initial; +} + .btn-link { color: var(--blue); font-family: "Roboto", sans-serif !important; @@ -255,7 +277,7 @@ div.SingleDatePickerInput { width: 34px; height: 34px; outline: none !important; - margin-top: 2px; + margin-top: 1px; margin-right: 5px; } @@ -349,6 +371,7 @@ div.SingleDatePickerInput { width: 34px; height: 34px; margin-right: 0.5rem; + margin-top: 3px; border: none !important; outline: none !important; color: var(--blue); @@ -406,6 +429,10 @@ div.SingleDatePickerInput { display: block !important; } +#eval-date-picker .SingleDatePickerInput { + background-color: white !important; +} + .linetool .dropdown>button { width: 9.5rem; text-align: left; @@ -420,6 +447,14 @@ div.SingleDatePickerInput { padding-left: 1rem; } +.statistics-inputs .dropdown-menu.show { + padding-right: 0.4rem !important; +} + +#obs-models-dropdown { + padding-right: .7rem; +} + .linetool .DateInput { height: 36px; line-height: 36px !important; @@ -457,6 +492,7 @@ div.SingleDatePickerInput { } .navbar-timebar { + height: 48px; display: flex; flex-direction: row; justify-content: flex-start; @@ -515,7 +551,7 @@ div.SingleDatePickerInput { height: 100%; background-color: var(--blue); border-right: 1px solid var(--dark_grey); - height: 5vh; + height: 48px; } .timeslider { @@ -645,7 +681,7 @@ div.dropdown-menu.show { margin-bottom: 0; overflow: hidden; text-overflow: ellipsis; - font-size: 0.8vw; + font-size: 0.8rem; } .popup-map-point { @@ -774,9 +810,18 @@ div.dropdown-menu.show { .leaflet-control-colorbar { top: 42px !important; font-size: .8em !important; - white-space: nowrap; + +} + +#prob-graph .leaflet-control-colorbar.leaflet-control { + top: 122px !important; + position: fixed; } +/* .leaflet-control-colorbar div:nth-child(2) span { */ +/* transform: rotate(20deg) !important; */ +/* } */ +/**/ .leaflet-control-zoom-fullscreen { display: none !important; } @@ -878,6 +923,14 @@ div.dropdown-menu.show { right: 5px; } +#prob-graph .leaflet-interactive, #was-graph .leaflet-interactive , #graph-eval-modis-mod .leaflet-interactive, #obs-vis-graph .leaflet-interactive { + cursor: pointer !important; +} + +#prob-graph .leaflet-interactive:active, #was-graph .leaflet-interactive:active , #graph-eval-modis-mod .leaflet-interactive:active , #obs-vis-graph .leaflet-interactive:active { + cursor: grabbing !important; +} + .leaflet-interactive { cursor: crosshair !important; } diff --git a/data_handler.py b/data_handler.py index 402d31c5353e5fc0a483ee60e1b47ef7895fe987..a662232c9171437b89e0f1bd1f9af719da1f05d4 100644 --- a/data_handler.py +++ b/data_handler.py @@ -187,7 +187,7 @@ INFO_STYLE = { "zIndex": "1000", "fontFamily": '"Roboto", sans-serif', "fontSize": "14px", - "fontWeight": "bold" + "fontWeight": "bold", } DISCLAIMER_NO_FORECAST = [html.Span(html.P("""Dust data ©2023 WMO Barcelona Dust Regional Center."""), id='forecast-disclaimer')] @@ -1019,7 +1019,10 @@ class FigureHandler(object): if zoom is None: zoom = 3.5 -(aspect[0]-aspect[0]*0.4) if colorbar is not None: - colorbar.width = 320 - 37 * aspect[0] + colorbar.width = 320 - 15 * aspect[0] + colorbar.style = {'overflow':'hidden', 'white-space':'nowrap'} + if aspect == (3,4): + colorbar.width = 320 - 38 * aspect[0] colorbar.height = 8 if DEBUG: print("ZOOM", zoom) if DEBUG: print("CENTER", center) @@ -1045,6 +1048,8 @@ class FigureHandler(object): )) if self.model is not None: CUR_INFO_STYLE = INFO_STYLE.copy() + if colorbar is not None: + CUR_INFO_STYLE['width'] = str(colorbar.width) + "px" if aspect[0] > 2: CUR_INFO_STYLE['fontSize'] = "{}px".format(int(INFO_STYLE['fontSize'][:-2])-aspect[0]+ 0.3) info = html.Div( diff --git a/tabs/evaluation_callbacks.py b/tabs/evaluation_callbacks.py index 843c4ebdfbb4b66cc17d40b7de764790b39df6cf..197defa835a1552c0734d575b80710e5b16e5a58 100644 --- a/tabs/evaluation_callbacks.py +++ b/tabs/evaluation_callbacks.py @@ -700,9 +700,14 @@ def update_eval_aeronet(n_clicks, sdate, edate, obs): edate = end_date stations, points_layer = get_obs1d(sdate, edate, obs, DEFAULT_VAR) - fig = get_figure(model=None, var=DEFAULT_VAR, layer=points_layer) - # if DEBUG: print("---", fig) - return stations.to_dict(), fig + eval_graph = html.Div([ + get_figure(model=None, var=DEFAULT_VAR, layer=points_layer), + html.Div(DISCLAIMER_OBS, + className='disclaimer') + ], + id='graph-eval-aeronet', + ) + return stations.to_dict(), eval_graph @dash.callback( @@ -787,9 +792,12 @@ def update_eval(obs): updatemode='bothdates', )] - eval_graph = html.Div( + eval_graph = html.Div([ get_figure(), - id='graph-eval-aeronet', + html.Div(DISCLAIMER_OBS, + className='disclaimer') + ], + id='graph-eval-aeronet', ) style = { 'display': 'none' } @@ -830,7 +838,9 @@ def update_eval(obs): id='graph-eval-modis-mod', ), html.Div(DISCLAIMER_NO_FORECAST, - className='disclaimer') + className='disclaimer', + id='eval-vis-modis-disclaimer' + ) ], ) eval_graph = [dbc.Row([