Update app/internal_loads.py

app/internal_loads.py

@@ -20,6 +20,7 @@ import uuid
 import plotly.graph_objects as go
 import plotly.express as px
 from typing import Dict, List, Any, Optional, Tuple, Union
+from streamlit_vertical_slider import vertical_slider  # Add import for vertical slider
 
 # Configure logging
 logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')
@@ -922,40 +923,47 @@ def display_ventilation_infiltration_tab():
             st.session_state.module_rerun_flags["internal_loads"] = True
             st.rerun()
 
-# Custom CSS for vertical sliders resembling a column chart
+# Updated CSS for vertical sliders with tighter spacing
 st.markdown("""
     <style>
         .slider-container {
             display: flex;
             flex-direction: row;
-            justify-content: space-evenly;
+            justify-content: space-between;
             align-items: flex-end;
-            gap: 4px;
-            padding: 20px 0;
+            gap: 2px;  /* Reduced gap for tighter spacing */
+            padding: 10px 0;
+            flex-wrap: nowrap;
         }
         .slider-item {
             display: flex;
             flex-direction: column;
             align-items: center;
-            width: 40px;
-        }
-        .vertical-slider {
-            writing-mode: bt-lr;
-            transform: rotate(-90deg);
-            height: 200px;
-            width: 30px;
+            width: 35px;  /* Narrower width for compact layout */
         }
         .hour-label {
             text-align: center;
-            font-size: 12px;
-            margin-top: 5px;
+            font-size: 11px;  /* Slightly smaller font */
+            margin-top: 3px;
             font-weight: bold;
+            white-space: nowrap;
+        }
+        /* Style the vertical slider track and thumb */
+        .stVerticalSlider {
+            height: 180px !important;  /* Shorter height for better fit */
+        }
+        .stVerticalSlider .slider-track {
+            background: #e0e0e0 !important;
+        }
+        .stVerticalSlider .slider-filled {
+            background: #4CAF50 !important;  /* Weekday color */
         }
-        .stSlider > div > div > div > div {
-            background-color: #4CAF50 !important;
+        .stVerticalSlider.weekend .slider-filled {
+            background: #2196F3 !important;  /* Weekend color */
         }
-        .stSlider > div > div > div > div > div {
-            background-color: #2196F3 !important;
+        .stVerticalSlider .slider-thumb {
+            background: #333 !important;
+            border: 2px solid #fff !important;
         }
     </style>
 """, unsafe_allow_html=True)
@@ -1010,19 +1018,23 @@ def display_schedules_tab():
     for hour in range(24):
         with st.container():
             st.markdown('<div class="slider-item">', unsafe_allow_html=True)
-            val = st.slider(
+            val = vertical_slider(
                 label="",
+                key=f"weekday_{hour}",
+                height=180,  # Matches CSS height
+                thumb_shape="circle",
+                step=0.01,
+                default_value=float(weekday_values[hour]),
                 min_value=0.0,
                 max_value=1.0,
-                step=0.01,
-                value=float(weekday_values[hour]),
-                key=f"weekday_{hour}",
-                help=f"Hour {hour}:00 weekday value",
-                format="%.2f"
+                track_color="#e0e0e0",
+                slider_color="#4CAF50",  # Green for weekday
+                thumb_color="#333",
+                value_always_visible=False
             )
             st.markdown(f'<div class="hour-label">{hour:02d}:00</div>', unsafe_allow_html=True)
             st.markdown('</div>', unsafe_allow_html=True)
-            weekday_schedule.append(val)
+            weekday_schedule.append(val if val is not None else float(weekday_values[hour]))
     st.markdown('</div>', unsafe_allow_html=True)
     
     # Weekend schedule with vertical sliders
@@ -1032,19 +1044,24 @@ def display_schedules_tab():
     for hour in range(24):
         with st.container():
             st.markdown('<div class="slider-item">', unsafe_allow_html=True)
-            val = st.slider(
+            val = vertical_slider(
                 label="",
+                key=f"weekend_{hour}",
+                height=180,  # Matches CSS height
+                thumb_shape="circle",
+                step=0.01,
+                default_value=float(weekend_values[hour]),
                 min_value=0.0,
                 max_value=1.0,
-                step=0.01,
-                value=float(weekend_values[hour]),
-                key=f"weekend_{hour}",
-                help=f"Hour {hour}:00 weekend value",
-                format="%.2f"
+                track_color="#e0e0e0",
+                slider_color="#2196F3",  # Blue for weekend
+                thumb_color="#333",
+                value_always_visible=False,
+                class_name="weekend"  # Custom class for weekend styling
             )
             st.markdown(f'<div class="hour-label">{hour:02d}:00</div>', unsafe_allow_html=True)
             st.markdown('</div>', unsafe_allow_html=True)
-            weekend_schedule.append(val)
+            weekend_schedule.append(val if val is not None else float(weekend_values[hour]))
     st.markdown('</div>', unsafe_allow_html=True)
     
     # Display saved schedules table
@@ -1089,7 +1106,7 @@ def display_schedules_tab():
                 st.session_state.module_rerun_flags["internal_loads"] = True
                 st.rerun()
     
-    with col2:
+    with col2]:
         if st.button("Cancel"):
             st.session_state.schedule_editor = {}
             st.session_state.module_rerun_flags["internal_loads"] = True