From 955041b33433cae0808a816d01b5681b39e9b77d Mon Sep 17 00:00:00 2001 From: linozen Date: Mon, 30 Aug 2021 16:20:40 +0200 Subject: [PATCH] refined section rendering with query params --- explorer/civsoc.py | 102 +++++++++++++++++++++++---------------------- explorer/media.py | 93 ++++++++++++++++++++++------------------- explorer/merged.py | 87 ++++++++++++++++++++------------------ 3 files changed, 149 insertions(+), 133 deletions(-) diff --git a/explorer/civsoc.py b/explorer/civsoc.py index b539457..13620d5 100644 --- a/explorer/civsoc.py +++ b/explorer/civsoc.py @@ -1,4 +1,5 @@ import streamlit as st +import streamlit.components.v1 as components import pandas as pd import numpy as np import plotly.graph_objects as go @@ -1164,49 +1165,45 @@ def get_cs_df(): # Sidebar | Filter logic ############################################################################### +# This is getting triggered when section is changed +def callback(): + st.experimental_set_query_params(section=st.session_state.section) + + +sections = [ + "Overview", + "Resources", + "Public Campaigning", + "Policy Advocacy", + "Strategic Litigation", + "Protection", + "Constraints", + "Attitudes", + "Appendix", +] + try: - sections = [ - "Overview", - "Resources", - "Public Campaigning", - "Policy Advocacy", - "Strategic Litigation", - "Protection", - "Constraints", - "Attitudes", - "Appendix", - ] query_params = st.experimental_get_query_params() query_section = query_params["section"][0] - section = st.sidebar.radio( - "Choose section", - sections, - index=sections.index(query_section), - key="section_with_param", - ) - -except: - sections = [ - "Overview", - "Resources", - "Public Campaigning", - "Policy Advocacy", - "Strategic Litigation", - "Protection", - "Constraints", - "Attitudes", - "Appendix", - ] + if "section" not in st.session_state: + st.session_state.section = query_section + +except KeyError: st.experimental_set_query_params(section=sections[0]) query_params = st.experimental_get_query_params() query_section = query_params["section"][0] - section = st.sidebar.radio( - "Choose section", - sections, - index=sections.index(query_section), - key="section_no_param", - ) + if "section" not in st.session_state: + st.session_state.section = query_section + +selected_section = st.sidebar.radio( + "Choose section", + sections, + index=sections.index(query_section), + key="section", + on_change=callback +) +st.write(selected_section) filters = { "country": st.sidebar.selectbox( @@ -1233,9 +1230,19 @@ def get_cs_df(): ############################################################################### -# Custom CSS +# Custom JS/CSS ############################################################################### +# This causes the page to scroll to top when section is changed +components.html( + f""" + + + """, + height=0 +) st.markdown( """ """, @@ -1251,7 +1258,7 @@ def get_cs_df(): st.title("IOI Survey Data Explorer") st.write("... of the responses given by __civil society organisation__ representatives") -if section == "Overview": +if selected_section == "Overview": st.write("# Overview") merged_markdown = read_markdown_file("explorer/markdown/media.md") @@ -1284,7 +1291,7 @@ def get_cs_df(): ) ) -if section == "Resources": +if selected_section == "Resources": st.write("# Resources") st.write("## Human Resources") @@ -1715,7 +1722,7 @@ def get_cs_df(): ) ) -if section == "Public Campaigning": +if selected_section == "Public Campaigning": st.write("## Activity") @@ -1967,7 +1974,7 @@ def get_cs_df(): else: st.write("_no answers given_") -if section == "Policy Advocacy": +if selected_section == "Policy Advocacy": st.write("## Activity") st.write( @@ -2208,7 +2215,7 @@ def get_cs_df(): else: st.write("_no answers given_") -if section == "Strategic Litigation": +if selected_section == "Strategic Litigation": st.write("## Activity") st.write( @@ -2519,7 +2526,7 @@ def get_cs_df(): st.write("_no answers given_") -if section == "Protection": +if selected_section == "Protection": st.write("# Protection") @@ -2850,7 +2857,7 @@ def get_cs_df(): else: st.write("_no answers given_") -if section == "Constraints": +if selected_section == "Constraints": st.write("# Constraints") @@ -3197,7 +3204,7 @@ def get_cs_df(): else: st.write("_no answers given_") -if section == "Attitudes": +if selected_section == "Attitudes": st.write("# CSattitudes") @@ -3300,7 +3307,7 @@ def get_cs_df(): ) st.plotly_chart(render_ranking_plot("CSattitude6")) -if section == "Appendix": +if selected_section == "Appendix": st.write("# Appendix") st.write("## Raw data") @@ -3336,6 +3343,3 @@ def get_cs_df(): if show_sig: fig_sig = get_significance_matrix(df) st.plotly_chart(fig_sig, use_container_width=True) - -if section: - st.experimental_set_query_params(section=section) diff --git a/explorer/media.py b/explorer/media.py index 559d281..0ba4a59 100644 --- a/explorer/media.py +++ b/explorer/media.py @@ -1,4 +1,5 @@ import streamlit as st +import streamlit.components.v1 as components import pandas as pd import numpy as np import plotly.graph_objects as go @@ -975,45 +976,44 @@ def get_ms_df(): # Sidebar | Filter logic ############################################################################### + +# This is getting triggered when section is changed +def callback(): + st.experimental_set_query_params(section=st.session_state.section) + + +sections = [ + "Overview", + "Resources", + "Media Reporting", + "Protection", + "Constraints", + "Attitudes", + "Appendix", +] + try: - sections = [ - "Overview", - "Resources", - "Media Reporting", - "Protection", - "Constraints", - "Attitudes", - "Appendix", - ] query_params = st.experimental_get_query_params() query_section = query_params["section"][0] - section = st.sidebar.radio( - "Choose section", - sections, - index=sections.index(query_section), - key="section_with_param", - ) - -except: - sections = [ - "Overview", - "Resources", - "Media Reporting", - "Protection", - "Constraints", - "Attitudes", - "Appendix", - ] + if "section" not in st.session_state: + st.session_state.section = query_section + +except KeyError: st.experimental_set_query_params(section=sections[0]) query_params = st.experimental_get_query_params() query_section = query_params["section"][0] - section = st.sidebar.radio( - "Choose section", - sections, - index=sections.index(query_section), - key="section_no_param", - ) + if "section" not in st.session_state: + st.session_state.section = query_section + +selected_section = st.sidebar.radio( + "Choose section", + sections, + index=sections.index(query_section), + key="section", + on_change=callback +) +st.write(selected_section) filters = { "country": st.sidebar.selectbox( @@ -1040,9 +1040,19 @@ def get_ms_df(): ############################################################################### -# Custom CSS +# Custom JS/CSS ############################################################################### +# This causes the page to scroll to top when section is changed +components.html( + f""" + + + """, + height=0 +) st.markdown( """ """, @@ -1058,7 +1068,7 @@ def get_ms_df(): st.title("IOI Survey Data Explorer") st.write("... of the responses given by __media__ representatives") -if section == "Overview": +if selected_section == "Overview": st.write("# Overview") merged_markdown = read_markdown_file("explorer/markdown/media.md") @@ -1082,7 +1092,7 @@ def get_ms_df(): use_container_width=True, ) -if section == "Resources": +if selected_section == "Resources": st.write("# Resources") st.write("## Human Resources") @@ -1532,7 +1542,7 @@ def get_ms_df(): use_container_width=True, ) -if section == "Media Reporting": +if selected_section == "Media Reporting": st.write("# Media Reporting") st.write("## Scope of Coverage") @@ -1915,7 +1925,7 @@ def get_ms_df(): if type(i) != float: st.write("- " + i) -if section == "Protection": +if selected_section == "Protection": st.write("# Protection") st.write("## Operational Protection") @@ -2450,7 +2460,7 @@ def get_ms_df(): use_container_width=True, ) -if section == "Constraints": +if selected_section == "Constraints": st.write("# Constraints") st.write("## Censorship") @@ -2899,7 +2909,7 @@ def get_ms_df(): if type(i) != float: st.write("- " + i) -if section == "Attitudes": +if selected_section == "Attitudes": st.write("# Attitudes") st.write( @@ -3001,7 +3011,7 @@ def get_ms_df(): st.plotly_chart(render_ranking_plot("MSattitude6"), use_container_width=True) -if section == "Appendix": +if selected_section == "Appendix": st.write("# Appendix") st.write("## Raw data") @@ -3037,6 +3047,3 @@ def get_ms_df(): if show_sig: fig_sig = get_significance_matrix(df) st.plotly_chart(fig_sig, use_container_width=True) - -if section: - st.experimental_set_query_params(section=section) diff --git a/explorer/merged.py b/explorer/merged.py index dd18e9f..4d69fb9 100644 --- a/explorer/merged.py +++ b/explorer/merged.py @@ -1,4 +1,5 @@ import streamlit as st +import streamlit.components.v1 as components import pandas as pd import numpy as np import plotly.graph_objects as go @@ -893,43 +894,41 @@ def get_merged_ms_df(): ############################################################################### +def callback(): + st.experimental_set_query_params(section=st.session_state.section) + + +sections = [ + "Overview", + "Resources", + "Protection", + "Constraints", + "Attitudes", + "Appendix", +] + try: - sections = [ - "Overview", - "Resources", - "Protection", - "Constraints", - "Attitudes", - "Appendix", - ] query_params = st.experimental_get_query_params() query_section = query_params["section"][0] - section = st.sidebar.radio( - "Choose section", - sections, - index=sections.index(query_section), - key="section_with_param", - ) - -except: - sections = [ - "Overview", - "Resources", - "Protection", - "Constraints", - "Attitudes", - "Appendix", - ] + if "section" not in st.session_state: + st.session_state.section = query_section + +except KeyError: st.experimental_set_query_params(section=sections[0]) query_params = st.experimental_get_query_params() query_section = query_params["section"][0] - section = st.sidebar.radio( - "Choose section", - sections, - index=sections.index(query_section), - key="section_no_param", - ) + if "section" not in st.session_state: + st.session_state.section = query_section + +selected_section = st.sidebar.radio( + "Choose section", + sections, + index=sections.index(query_section), + key="section", + on_change=callback, +) +st.write(selected_section) filters = { "surveytype": st.sidebar.selectbox( @@ -959,9 +958,19 @@ def get_merged_ms_df(): ############################################################################### -# Custom CSS +# Custom JS/CSS ############################################################################### +# This causes the page to scroll to top when section is changed +components.html( + f""" + + + """, + height=0, +) st.markdown( """ """, @@ -979,7 +988,7 @@ def get_merged_ms_df(): "... of the responses given by __media__ and __civil society organisation__ representatives" ) -if section == "Overview": +if selected_section == "Overview": st.write("# Overview") merged_markdown = read_markdown_file("explorer/markdown/merged.md") @@ -1024,7 +1033,7 @@ def get_merged_ms_df(): use_container_width=True, ) -if section == "Resources": +if selected_section == "Resources": st.write("# Resources") st.write("## Human Resources") @@ -1370,7 +1379,7 @@ def get_merged_ms_df(): if type(i) != float: st.write("- " + i) -if section == "Protection": +if selected_section == "Protection": st.write("# Protection") st.write("## Operational Protection") @@ -1696,7 +1705,7 @@ def get_merged_ms_df(): if type(i) != float: st.write("- " + i) -if section == "Constraints": +if selected_section == "Constraints": st.write("# Constraints") st.write("## Interference by state authorities") @@ -1949,7 +1958,7 @@ def get_merged_ms_df(): if type(i) != float: st.write("- " + i) -if section == "Attitudes": +if selected_section == "Attitudes": st.write("# Attitudes") st.write( @@ -2050,7 +2059,7 @@ def get_merged_ms_df(): st.plotly_chart(render_ranking_plot("attitude6"), use_container_width=True) -if section == "Appendix": +if selected_section == "Appendix": st.write("# Appendix") st.write("## Raw data") @@ -2086,7 +2095,3 @@ def get_merged_ms_df(): if show_sig: fig_sig = get_significance_matrix(df) st.plotly_chart(fig_sig, use_container_width=True) - - -if section: - st.experimental_set_query_params(section=section)