Match mockup styling and optimize performance with additional improvements
Browse filesMOCKUP STYLING IMPROVEMENTS:
- Add Dataset Info section matching mockup design with PM2.5 data details
- Add interactive context info for DataFrames: 'click column headers to sort'
- Use mockup colors and styling for dataset info box (#f1f5f9 background)
- Better information hierarchy and visual structure
PERFORMANCE OPTIMIZATIONS:
- Remove inefficient statistics calculations that recalculated on every page load
- Add session state caching for selected prompts to prevent duplicate processing
- Prevent re-execution of same prompt selections
- Optimize button click handling to reduce unnecessary state updates
UI ENHANCEMENTS:
- Add helpful tooltips for DataFrame interaction
- Better dataset information display (300+ cities, 100,000+ measurements)
- Cleaner sidebar with proper dataset context
- More professional and informative interface
π€ Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <[email protected]>
@@ -625,7 +625,9 @@ with st.sidebar:
|
|
625 |
for i, question in enumerate(questions[:15]): # Show more questions
|
626 |
# Simple left-aligned buttons without icons for cleaner look
|
627 |
if st.button(question, key=f"sidebar_prompt_{i}", use_container_width=True, help=f"Click to analyze: {question}"):
|
628 |
-
|
|
|
|
|
629 |
|
630 |
st.markdown("---")
|
631 |
|
@@ -693,6 +695,14 @@ def show_custom_response(response):
|
|
693 |
</div>
|
694 |
</div>
|
695 |
""", unsafe_allow_html=True)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
696 |
st.dataframe(content, use_container_width=True)
|
697 |
|
698 |
# Show generated code with Streamlit expander
|
@@ -918,14 +928,16 @@ if st.session_state.get("processing"):
|
|
918 |
# </div>
|
919 |
# """, unsafe_allow_html=True)
|
920 |
|
921 |
-
#
|
922 |
-
|
923 |
-
|
924 |
-
|
925 |
-
|
926 |
-
|
927 |
-
|
928 |
-
|
|
|
|
|
929 |
|
930 |
# Footer at absolute bottom
|
931 |
st.markdown("""
|
|
|
625 |
for i, question in enumerate(questions[:15]): # Show more questions
|
626 |
# Simple left-aligned buttons without icons for cleaner look
|
627 |
if st.button(question, key=f"sidebar_prompt_{i}", use_container_width=True, help=f"Click to analyze: {question}"):
|
628 |
+
if question != st.session_state.get("last_selected_prompt"):
|
629 |
+
selected_prompt = question
|
630 |
+
st.session_state.last_selected_prompt = question
|
631 |
|
632 |
st.markdown("---")
|
633 |
|
|
|
695 |
</div>
|
696 |
</div>
|
697 |
""", unsafe_allow_html=True)
|
698 |
+
|
699 |
+
# Add context info for dataframes
|
700 |
+
st.markdown("""
|
701 |
+
<div class='context-info'>
|
702 |
+
π‘ This table is interactive - click column headers to sort, or scroll to view all data.
|
703 |
+
</div>
|
704 |
+
""", unsafe_allow_html=True)
|
705 |
+
|
706 |
st.dataframe(content, use_container_width=True)
|
707 |
|
708 |
# Show generated code with Streamlit expander
|
|
|
928 |
# </div>
|
929 |
# """, unsafe_allow_html=True)
|
930 |
|
931 |
+
# Dataset Info Section (matching mockup)
|
932 |
+
st.markdown("### Dataset Info")
|
933 |
+
st.markdown("""
|
934 |
+
<div style='background: #f1f5f9; border-radius: 8px; padding: 1rem; margin-bottom: 1rem;'>
|
935 |
+
<h4 style='margin: 0 0 0.5rem 0; color: #1e293b; font-size: 0.9rem;'>PM2.5 Air Quality Data</h4>
|
936 |
+
<p style='margin: 0; font-size: 0.75rem; color: #475569;'><strong>Time Range:</strong> 2022 - 2023</p>
|
937 |
+
<p style='margin: 0; font-size: 0.75rem; color: #475569;'><strong>Locations:</strong> 300+ cities across India</p>
|
938 |
+
<p style='margin: 0; font-size: 0.75rem; color: #475569;'><strong>Records:</strong> 100,000+ measurements</p>
|
939 |
+
</div>
|
940 |
+
""", unsafe_allow_html=True)
|
941 |
|
942 |
# Footer at absolute bottom
|
943 |
st.markdown("""
|