From 02d9ec77bc6472b2347999f6f928ac5553077c88 Mon Sep 17 00:00:00 2001 From: Lissa Pearson Date: Mon, 1 Jul 2024 11:22:54 -0500 Subject: [PATCH 1/2] Adding text section --- src/app.py | 145 +++++++++++++++++++-------------------- src/assets/tab_text.json | 20 ++++++ src/assets/testmd.md | 3 + src/tab_contents.py | 6 ++ 4 files changed, 98 insertions(+), 76 deletions(-) create mode 100644 src/assets/tab_text.json create mode 100644 src/assets/testmd.md create mode 100644 src/tab_contents.py diff --git a/src/app.py b/src/app.py index d8c2b3d..59ac462 100644 --- a/src/app.py +++ b/src/app.py @@ -18,6 +18,11 @@ import logging +# Tab text content +tab_text_url = "https://raw.githubusercontent.com/TACC/a2cps-datastore-imaging/latest/src/assets/tab_text.json" +resp = requests.get(tab_text_url) +tab_text = json.loads(resp.text) + # Bar Chart options bar_chart_options = {'None':'None', 'MCC':'mcc', 'Site':'site','Visit':'ses','Scan':'scan'} @@ -81,34 +86,6 @@ app.logger.handlers = gunicorn_logger.handlers app.logger.setLevel(logging.INFO) -# ---------------------------------------------------------------------------- -# DASH HTML COMPONENTS -# ---------------------------------------------------------------------------- - -offcanvas_content = html.Div([ - html.Div([ - html.P([' '], style={'background-color':'ForestGreen', 'height': '20px', 'width':'20px','float':'left'}), - html.P(['no known issues'], style={'padding-left': '30px', 'margin': '0px'}) - ]), - html.Div([ - html.P([' '], style={'background-color':'Gold', 'height': '20px', 'width':'20px','float':'left', 'clear':'both'}), - html.P(['minor variations/issues; correctable'], style={'padding-left': '30px', 'margin': '0px'}) - ]), - html.Div([ - html.P([' '], style={'background-color':'FireBrick', 'height': '20px', 'width':'20px','float':'left', 'clear':'both'}), - html.P(['significant variations/issues; not expected to be comparable'], style={'padding-left': '30px', 'margin': '0px'}) - ]), -]) - -offcanvas = html.Div([ - dbc.Button("Legend", id="open-offcanvas", n_clicks=0), - dbc.Offcanvas( - offcanvas_content, - id="offcanvas", - title="Title", - is_open=False, - ), -]) # ---------------------------------------------------------------------------- # DASH APP COMPONENT FUNCTIONS @@ -562,50 +539,55 @@ def switch_tab(at): id="loading-overview", children=[ html.Div([ - dbc.Row([ - dbc.Col([ - html.H3('Scan sessions for pre-surgery (V1) and 3 month post surgery (V3) visits'), - html.Div(id='overview_div') - ]) - ]), - dbc.Row([ - dbc.Col([html.H3('Quality ratings for individual scans (up to six scans per session: T1, DWI, REST1, CUFF1, CUFF2, REST2)')]), - ]), - dbc.Row([ - dbc.Col([ - html.Div(id='graph_stackedbar_div') - ], width=10), - dbc.Col([ - html.H3('Bar Chart Settings'), - html.Label('Chart Type'), - daq.ToggleSwitch( - id='toggle_stackedbar', - label=['Count','Stacked Percent'], - value=False - ), - html.Label('Separate by Visit'), - daq.ToggleSwitch( - id='toggle_visit', - label=['Combined','Split'], - value=False - ), - - html.Label('Chart Selection'), - dcc.Dropdown( - id='dropdown-bar', - options=[ - {'label': ' Site and MCC', 'value': 1}, - {'label': ' Site', 'value': 2}, - {'label': ' MCC', 'value': 3}, - {'label': ' Combined', 'value': 4}, - ], - multi=False, - clearable=False, - value=1 - ), - ],width=2), - ]), - ]) + dbc.Row([ + dbc.Col([ + dcc.Markdown(tab_text['overview']['text']) + ]) + ]), + dbc.Row([ + dbc.Col([ + html.H3('Scan sessions for pre-surgery (V1) and 3 month post surgery (V3) visits'), + html.Div(id='overview_div') + ]) + ]), + dbc.Row([ + dbc.Col([html.H3('Quality ratings for individual scans (up to six scans per session: T1, DWI, REST1, CUFF1, CUFF2, REST2)')]), + ]), + dbc.Row([ + dbc.Col([ + html.Div(id='graph_stackedbar_div') + ], width=10), + dbc.Col([ + html.H3('Bar Chart Settings'), + html.Label('Chart Type'), + daq.ToggleSwitch( + id='toggle_stackedbar', + label=['Count','Stacked Percent'], + value=False + ), + html.Label('Separate by Visit'), + daq.ToggleSwitch( + id='toggle_visit', + label=['Combined','Split'], + value=False + ), + + html.Label('Chart Selection'), + dcc.Dropdown( + id='dropdown-bar', + options=[ + {'label': ' Site and MCC', 'value': 1}, + {'label': ' Site', 'value': 2}, + {'label': ' MCC', 'value': 3}, + {'label': ' Combined', 'value': 4}, + ], + multi=False, + clearable=False, + value=1 + ), + ],width=2), + ]), + ]) ], type="circle", ) @@ -616,10 +598,16 @@ def switch_tab(at): id="loading-discrepancies", children=[ html.Div([ - dbc.Row([ - dbc.Col([html.Div(id='discrepancies_section')]) - ]), - ]) + dbc.Row([ + dbc.Col([ + dcc.Markdown(tab_text['discrepancies']['text']) + ]) + ]), + + dbc.Row([ + dbc.Col([html.Div(id='discrepancies_section')]) + ]), + ]) ], type="circle", ) @@ -629,6 +617,7 @@ def switch_tab(at): id="loading-completions", children=[ html.Div([ + html.Div( dcc.Markdown(tab_text['completions']['text'])), html.Div(id='completions_section') ]) ], @@ -639,6 +628,7 @@ def switch_tab(at): pies = dcc.Loading( id="loading-pie", children=[ + html.Div( dcc.Markdown(tab_text['pie']['text'])), html.Div(id='pie_charts') ], type="circle", @@ -651,6 +641,8 @@ def switch_tab(at): cuff = dcc.Loading( id="loading-heatmap", children=[ + + html.Div( dcc.Markdown(tab_text['cuff']['text'])), html.Div([ dbc.Row([ dbc.Col([html.Div(id='cuff_section')]) @@ -867,6 +859,7 @@ def update_heatmap(sites, data): if not df.empty: fig_heatmap = generate_heat_matrix(df.T, color_mapping_list) # transpose df to generate horizontal graph heatmap = html.Div([ + html.Div( dcc.Markdown(tab_text['heatmap']['text'])), dcc.Graph(id='graph_heatmap', figure=fig_heatmap) ]) else: diff --git a/src/assets/tab_text.json b/src/assets/tab_text.json new file mode 100644 index 0000000..5a482dd --- /dev/null +++ b/src/assets/tab_text.json @@ -0,0 +1,20 @@ +{ + "overview":{ + "text": "# Add text \n treat this as Markdown" + }, + "discrepancies":{ + "text": "# Add text \n treat this as Markdown" + }, + "completions":{ + "text": "# Add text \n treat this as Markdown" + }, + "pie":{ + "text": "# Add text \n treat this as Markdown" + }, + "heart_map":{ + "text": "# Add text \n treat this as Markdown" + }, + "cuff":{ + "text": "# Add text \n treat this as Markdown" + } +} \ No newline at end of file diff --git a/src/assets/testmd.md b/src/assets/testmd.md new file mode 100644 index 0000000..99a7e06 --- /dev/null +++ b/src/assets/testmd.md @@ -0,0 +1,3 @@ +# Test Md File + +lets see what happens when I try to load this \ No newline at end of file diff --git a/src/tab_contents.py b/src/tab_contents.py new file mode 100644 index 0000000..a1cdd7e --- /dev/null +++ b/src/tab_contents.py @@ -0,0 +1,6 @@ +from dash import dcc + +testmd = dcc.Markdown(''' + This is a test markdown +''') + From 8983a9df847fb12aa3466442320d9b2dd8418d0e Mon Sep 17 00:00:00 2001 From: Lissa Pearson Date: Mon, 1 Jul 2024 15:29:35 -0500 Subject: [PATCH 2/2] Adding text content for tabs --- src/app.py | 30 ++++++++++++++++++++++++------ src/assets/tab_text.json | 17 ++++++++++------- 2 files changed, 34 insertions(+), 13 deletions(-) diff --git a/src/app.py b/src/app.py index 59ac462..a97a443 100644 --- a/src/app.py +++ b/src/app.py @@ -18,10 +18,6 @@ import logging -# Tab text content -tab_text_url = "https://raw.githubusercontent.com/TACC/a2cps-datastore-imaging/latest/src/assets/tab_text.json" -resp = requests.get(tab_text_url) -tab_text = json.loads(resp.text) # Bar Chart options bar_chart_options = {'None':'None', 'MCC':'mcc', 'Site':'site','Visit':'ses','Scan':'scan'} @@ -248,6 +244,24 @@ def build_boxplot(df): # ---------------------------------------------------------------------------- # DASH APP LAYOUT FUNCTION # ---------------------------------------------------------------------------- +def load_tab_text(): + """ + Load content to display in the markdown component of the tabs from the 'tab_text' file in the github repo. + If this isn't accessible, load from a local file. + """ + try: + # try to load from github url + tab_text_url = "https://raw.githubusercontent.com/TACC/a2cps-datastore-imaging/latest/src/assets/tab_text.json" + resp = requests.get(tab_text_url) + tab_text = json.loads(resp.text) + except: + # load from local json file if github url fails + tab_text_path = "assets/tab_text.json" + with open(tab_text_path) as f: + tab_text = json.load(f) + print(tab_text) + return tab_text + def load_data_source(url_data_path, local_data_path, source): imaging, imaging_source = load_imaging(url_data_path, local_data_path, source) qc, qc_source = load_qc(url_data_path, local_data_path, source) @@ -362,10 +376,12 @@ def serve_raw_data_store(url_data_path, local_data_path, source): return raw_data_dictionary def create_data_stores(source, raw_data_dictionary): + tab_text = load_tab_text() sites = raw_data_dictionary['sites'] data_date = raw_data_dictionary['date'] data_stores = html.Div([ dcc.Store(id='session_data', data = raw_data_dictionary), #storage_type='session', + dcc.Store(id='tab_text', data=tab_text), dcc.Store(id='report_data'), dcc.Store(id='filtered_data'), # html.P('Imaging Source: ' + data_dictionary['imaging_source']), @@ -532,8 +548,10 @@ def see_filtering(filtered_data): @app.callback(Output("tab-content", "children"), Output('dropdown-sites-col','style'), - Input("tabs", "active_tab")) -def switch_tab(at): + Input("tabs", "active_tab"), + State("tab_text","data") + ) +def switch_tab(at, tab_text): if at == "tab-overview": overview = dcc.Loading( id="loading-overview", diff --git a/src/assets/tab_text.json b/src/assets/tab_text.json index 5a482dd..f8aa2e3 100644 --- a/src/assets/tab_text.json +++ b/src/assets/tab_text.json @@ -1,20 +1,23 @@ { + "template": { + "text": "Add Markdown text. \n Use newline to break." + }, "overview":{ - "text": "# Add text \n treat this as Markdown" + "text": "Click each tab to load a different report page.\n Refresh the page if needed to get the latest nightly update." }, "discrepancies":{ - "text": "# Add text \n treat this as Markdown" + "text": "These are cases that are flagged for attention; note that in some cases BIDS conversion may be in progress." }, "completions":{ - "text": "# Add text \n treat this as Markdown" + "text": "This panel shows completion rates of individual scans (top) and combinations of scans (bottom)." }, "pie":{ - "text": "# Add text \n treat this as Markdown" + "text": "The graphs here show quality levels across sites and scans." }, - "heart_map":{ - "text": "# Add text \n treat this as Markdown" + "heatmap":{ + "text": "This scan-level overview is currently being overhauled." }, "cuff":{ - "text": "# Add text \n treat this as Markdown" + "text": "This panel shows the individually determined inflatable cuff pressure used in each Cuff1 fMRI scan.\n Note that Cuff2 uses a standard pressure level (120 mmHg)." } } \ No newline at end of file