refined section rendering with query params

linozen · Aug 30, 2021 · 955041b · 955041b
1 parent 3a385e1
commit 955041b
Show file tree

Hide file tree

Showing 3 changed files with 149 additions and 133 deletions.
diff --git 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"""
+        <!--{st.session_state.section}-->
+        <script>
+            window.parent.document.querySelector('section.main').scrollTo(0, 0);
+        </script>
+    """,
+    height=0
+)
 
 st.markdown(
     """ <style> h3 {line-height: 1.3} </style> """,
@@ -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
@@ -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"""
+        <!--{st.session_state.section}-->
+        <script>
+            window.parent.document.querySelector('section.main').scrollTo(0, 0);
+        </script>
+    """,
+    height=0
+)
 
 st.markdown(
     """ <style> h3 {line-height: 1.3} </style> """,
@@ -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)