Update app.py

app.py

@@ -358,7 +358,7 @@ def main():
     # --- HORIZONTAL LAYOUT: LEFT (INPUTS) | RIGHT (ANALYSIS) ---
     left_col, right_col = st.columns([1, 1.5])
     
-    # ========== LEFT COLUMN: PARAMETER INPUTS ==========
+    # ========== LEFT COLUMN: PARAMETER INPUTS (2x3 GRID) ==========
     with left_col:
         st.markdown('<div class="section-title">📊 Engine Parameters</div>', unsafe_allow_html=True)
         
@@ -372,132 +372,129 @@ def main():
             'oil_temp': {'warning_high': 110, 'critical_high': 130}
         }
         
-        # --- RPM ---
-        st.markdown('<div class="param-card">', unsafe_allow_html=True)
-        st.markdown('<div class="param-header"><span class="param-icon">⚡</span><span class="param-name">Engine RPM</span></div>', unsafe_allow_html=True)
+        # ROW 1: RPM and FUEL
+        row1_col1, row1_col2 = st.columns(2)
         
-        input_col1, input_col2 = st.columns([1, 3])
-        with input_col1:
-            rpm_num = st.number_input("", 0, 2500, value=st.session_state.rpm, step=50, key="rpm_num", label_visibility="collapsed")
-        with input_col2:
-            rpm_sld = st.slider("", 0, 2500, value=st.session_state.rpm, step=50, key="rpm_sld", label_visibility="collapsed")
-        
-        # Sync logic
-        if rpm_num != st.session_state.rpm:
-            st.session_state.rpm = rpm_num
-            st.rerun()
-        elif rpm_sld != st.session_state.rpm:
-            st.session_state.rpm = rpm_sld
-            st.rerun()
-        
-        st.markdown(f'<div class="param-value-display" style="color: #00d4ff;">{st.session_state.rpm}</div>', unsafe_allow_html=True)
-        st.plotly_chart(create_gauge(st.session_state.rpm, 2500, "#00d4ff"), use_container_width=True, config={'displayModeBar': False})
-        st.markdown('</div>', unsafe_allow_html=True)
-        
-        # --- FUEL PRESSURE ---
-        st.markdown('<div class="param-card">', unsafe_allow_html=True)
-        st.markdown('<div class="param-header"><span class="param-icon">⛽</span><span class="param-name">Fuel Pressure (Bar)</span></div>', unsafe_allow_html=True)
-        
-        input_col1, input_col2 = st.columns([1, 3])
-        with input_col1:
-            fuel_num = st.number_input("", 0.0, 25.0, value=st.session_state.fuel_p, step=0.1, key="fuel_num", label_visibility="collapsed")
-        with input_col2:
-            fuel_sld = st.slider("", 0.0, 25.0, value=st.session_state.fuel_p, step=0.1, key="fuel_sld", label_visibility="collapsed")
-        
-        if fuel_num != st.session_state.fuel_p:
-            st.session_state.fuel_p = fuel_num
-            st.rerun()
-        elif fuel_sld != st.session_state.fuel_p:
-            st.session_state.fuel_p = fuel_sld
-            st.rerun()
-        
-        st.markdown(f'<div class="param-value-display" style="color: #ff6b35;">{st.session_state.fuel_p:.1f}</div>', unsafe_allow_html=True)
-        st.plotly_chart(create_gauge(st.session_state.fuel_p, 25, "#ff6b35"), use_container_width=True, config={'displayModeBar': False})
-        st.markdown('</div>', unsafe_allow_html=True)
-        
-        # --- OIL PRESSURE ---
-        st.markdown('<div class="param-card">', unsafe_allow_html=True)
-        st.markdown('<div class="param-header"><span class="param-icon">🛢️</span><span class="param-name">Oil Pressure (Bar)</span></div>', unsafe_allow_html=True)
-        
-        input_col1, input_col2 = st.columns([1, 3])
-        with input_col1:
-            oil_p_num = st.number_input("", 0.0, 10.0, value=st.session_state.oil_p, step=0.1, key="oil_p_num", label_visibility="collapsed")
-        with input_col2:
-            oil_p_sld = st.slider("", 0.0, 10.0, value=st.session_state.oil_p, step=0.1, key="oil_p_sld", label_visibility="collapsed")
-        
-        if oil_p_num != st.session_state.oil_p:
-            st.session_state.oil_p = oil_p_num
-            st.rerun()
-        elif oil_p_sld != st.session_state.oil_p:
-            st.session_state.oil_p = oil_p_sld
-            st.rerun()
-        
-        st.markdown(f'<div class="param-value-display" style="color: #ffaa00;">{st.session_state.oil_p:.2f}</div>', unsafe_allow_html=True)
-        st.plotly_chart(create_gauge(st.session_state.oil_p, 10, "#ffaa00"), use_container_width=True, config={'displayModeBar': False})
-        st.markdown('</div>', unsafe_allow_html=True)
-        
-        # --- COOLANT TEMP ---
-        st.markdown('<div class="param-card">', unsafe_allow_html=True)
-        st.markdown('<div class="param-header"><span class="param-icon">🌡️</span><span class="param-name">Coolant Temp (°C)</span></div>', unsafe_allow_html=True)
-        
-        input_col1, input_col2 = st.columns([1, 3])
-        with input_col1:
-            coolant_t_num = st.number_input("", 0.0, 200.0, value=st.session_state.coolant_temp, step=1.0, key="coolant_t_num", label_visibility="collapsed")
-        with input_col2:
-            coolant_t_sld = st.slider("", 0.0, 200.0, value=st.session_state.coolant_temp, step=1.0, key="coolant_t_sld", label_visibility="collapsed")
-        
-        if coolant_t_num != st.session_state.coolant_temp:
-            st.session_state.coolant_temp = coolant_t_num
-            st.rerun()
-        elif coolant_t_sld != st.session_state.coolant_temp:
-            st.session_state.coolant_temp = coolant_t_sld
-            st.rerun()
-        
-        st.markdown(f'<div class="param-value-display" style="color: #ff3366;">{st.session_state.coolant_temp:.1f}</div>', unsafe_allow_html=True)
-        st.plotly_chart(create_gauge(st.session_state.coolant_temp, 200, "#ff3366"), use_container_width=True, config={'displayModeBar': False})
-        st.markdown('</div>', unsafe_allow_html=True)
-        
-        # --- COOLANT PRESSURE ---
-        st.markdown('<div class="param-card">', unsafe_allow_html=True)
-        st.markdown('<div class="param-header"><span class="param-icon">💧</span><span class="param-name">Coolant Pressure (Bar)</span></div>', unsafe_allow_html=True)
+        with row1_col1:
+            st.markdown('<div class="param-card">', unsafe_allow_html=True)
+            st.markdown('<div class="param-header"><span class="param-icon">⚡</span><span class="param-name">Engine RPM</span></div>', unsafe_allow_html=True)
+            
+            input_col1, input_col2 = st.columns([1, 3])
+            with input_col1:
+                rpm_num = st.number_input("", 0, 2500, value=st.session_state.rpm, step=50, key="rpm_num", label_visibility="collapsed")
+            with input_col2:
+                rpm_sld = st.slider("", 0, 2500, value=st.session_state.rpm, step=50, key="rpm_sld", label_visibility="collapsed")
+            
+            # Update session state from whichever changed
+            if rpm_num != st.session_state.rpm:
+                st.session_state.rpm = rpm_num
+            if rpm_sld != st.session_state.rpm:
+                st.session_state.rpm = rpm_sld
+            
+            st.markdown(f'<div class="param-value-display" style="color: #00d4ff;">{st.session_state.rpm}</div>', unsafe_allow_html=True)
+            st.plotly_chart(create_gauge(st.session_state.rpm, 2500, "#00d4ff"), use_container_width=True, config={'displayModeBar': False}, key="g_rpm")
+            st.markdown('</div>', unsafe_allow_html=True)
         
-        input_col1, input_col2 = st.columns([1, 3])
-        with input_col1:
-            coolant_p_num = st.number_input("", 0.0, 10.0, value=st.session_state.coolant_p, step=0.1, key="coolant_p_num", label_visibility="collapsed")
-        with input_col2:
-            coolant_p_sld = st.slider("", 0.0, 10.0, value=st.session_state.coolant_p, step=0.1, key="coolant_p_sld", label_visibility="collapsed")
+        with row1_col2:
+            st.markdown('<div class="param-card">', unsafe_allow_html=True)
+            st.markdown('<div class="param-header"><span class="param-icon">⛽</span><span class="param-name">Fuel Pressure (Bar)</span></div>', unsafe_allow_html=True)
+            
+            input_col1, input_col2 = st.columns([1, 3])
+            with input_col1:
+                fuel_num = st.number_input("", 0.0, 25.0, value=st.session_state.fuel_p, step=0.1, key="fuel_num", label_visibility="collapsed")
+            with input_col2:
+                fuel_sld = st.slider("", 0.0, 25.0, value=st.session_state.fuel_p, step=0.1, key="fuel_sld", label_visibility="collapsed")
+            
+            if fuel_num != st.session_state.fuel_p:
+                st.session_state.fuel_p = fuel_num
+            if fuel_sld != st.session_state.fuel_p:
+                st.session_state.fuel_p = fuel_sld
+            
+            st.markdown(f'<div class="param-value-display" style="color: #ff6b35;">{st.session_state.fuel_p:.1f}</div>', unsafe_allow_html=True)
+            st.plotly_chart(create_gauge(st.session_state.fuel_p, 25, "#ff6b35"), use_container_width=True, config={'displayModeBar': False}, key="g_fuel")
+            st.markdown('</div>', unsafe_allow_html=True)
         
-        if coolant_p_num != st.session_state.coolant_p:
-            st.session_state.coolant_p = coolant_p_num
-            st.rerun()
-        elif coolant_p_sld != st.session_state.coolant_p:
-            st.session_state.coolant_p = coolant_p_sld
-            st.rerun()
+        # ROW 2: OIL PRESSURE and COOLANT TEMP
+        row2_col1, row2_col2 = st.columns(2)
         
-        st.markdown(f'<div class="param-value-display" style="color: #00ff88;">{st.session_state.coolant_p:.2f}</div>', unsafe_allow_html=True)
-        st.plotly_chart(create_gauge(st.session_state.coolant_p, 10, "#00ff88"), use_container_width=True, config={'displayModeBar': False})
-        st.markdown('</div>', unsafe_allow_html=True)
+        with row2_col1:
+            st.markdown('<div class="param-card">', unsafe_allow_html=True)
+            st.markdown('<div class="param-header"><span class="param-icon">🛢️</span><span class="param-name">Oil Pressure (Bar)</span></div>', unsafe_allow_html=True)
+            
+            input_col1, input_col2 = st.columns([1, 3])
+            with input_col1:
+                oil_p_num = st.number_input("", 0.0, 10.0, value=st.session_state.oil_p, step=0.1, key="oil_p_num", label_visibility="collapsed")
+            with input_col2:
+                oil_p_sld = st.slider("", 0.0, 10.0, value=st.session_state.oil_p, step=0.1, key="oil_p_sld", label_visibility="collapsed")
+            
+            if oil_p_num != st.session_state.oil_p:
+                st.session_state.oil_p = oil_p_num
+            if oil_p_sld != st.session_state.oil_p:
+                st.session_state.oil_p = oil_p_sld
+            
+            st.markdown(f'<div class="param-value-display" style="color: #ffaa00;">{st.session_state.oil_p:.2f}</div>', unsafe_allow_html=True)
+            st.plotly_chart(create_gauge(st.session_state.oil_p, 10, "#ffaa00"), use_container_width=True, config={'displayModeBar': False}, key="g_oil_p")
+            st.markdown('</div>', unsafe_allow_html=True)
         
-        # --- OIL TEMP ---
-        st.markdown('<div class="param-card">', unsafe_allow_html=True)
-        st.markdown('<div class="param-header"><span class="param-icon">🔥</span><span class="param-name">Oil Temp (°C)</span></div>', unsafe_allow_html=True)
+        with row2_col2:
+            st.markdown('<div class="param-card">', unsafe_allow_html=True)
+            st.markdown('<div class="param-header"><span class="param-icon">🌡️</span><span class="param-name">Coolant Temp (°C)</span></div>', unsafe_allow_html=True)
+            
+            input_col1, input_col2 = st.columns([1, 3])
+            with input_col1:
+                coolant_t_num = st.number_input("", 0.0, 200.0, value=st.session_state.coolant_temp, step=1.0, key="coolant_t_num", label_visibility="collapsed")
+            with input_col2:
+                coolant_t_sld = st.slider("", 0.0, 200.0, value=st.session_state.coolant_temp, step=1.0, key="coolant_t_sld", label_visibility="collapsed")
+            
+            if coolant_t_num != st.session_state.coolant_temp:
+                st.session_state.coolant_temp = coolant_t_num
+            if coolant_t_sld != st.session_state.coolant_temp:
+                st.session_state.coolant_temp = coolant_t_sld
+            
+            st.markdown(f'<div class="param-value-display" style="color: #ff3366;">{st.session_state.coolant_temp:.1f}</div>', unsafe_allow_html=True)
+            st.plotly_chart(create_gauge(st.session_state.coolant_temp, 200, "#ff3366"), use_container_width=True, config={'displayModeBar': False}, key="g_coolant_t")
+            st.markdown('</div>', unsafe_allow_html=True)
         
-        input_col1, input_col2 = st.columns([1, 3])
-        with input_col1:
-            oil_t_num = st.number_input("", 0.0, 150.0, value=st.session_state.oil_temp, step=1.0, key="oil_t_num", label_visibility="collapsed")
-        with input_col2:
-            oil_t_sld = st.slider("", 0.0, 150.0, value=st.session_state.oil_temp, step=1.0, key="oil_t_sld", label_visibility="collapsed")
+        # ROW 3: COOLANT PRESSURE and OIL TEMP
+        row3_col1, row3_col2 = st.columns(2)
         
-        if oil_t_num != st.session_state.oil_temp:
-            st.session_state.oil_temp = oil_t_num
-            st.rerun()
-        elif oil_t_sld != st.session_state.oil_temp:
-            st.session_state.oil_temp = oil_t_sld
-            st.rerun()
+        with row3_col1:
+            st.markdown('<div class="param-card">', unsafe_allow_html=True)
+            st.markdown('<div class="param-header"><span class="param-icon">💧</span><span class="param-name">Coolant Pressure (Bar)</span></div>', unsafe_allow_html=True)
+            
+            input_col1, input_col2 = st.columns([1, 3])
+            with input_col1:
+                coolant_p_num = st.number_input("", 0.0, 10.0, value=st.session_state.coolant_p, step=0.1, key="coolant_p_num", label_visibility="collapsed")
+            with input_col2:
+                coolant_p_sld = st.slider("", 0.0, 10.0, value=st.session_state.coolant_p, step=0.1, key="coolant_p_sld", label_visibility="collapsed")
+            
+            if coolant_p_num != st.session_state.coolant_p:
+                st.session_state.coolant_p = coolant_p_num
+            if coolant_p_sld != st.session_state.coolant_p:
+                st.session_state.coolant_p = coolant_p_sld
+            
+            st.markdown(f'<div class="param-value-display" style="color: #00ff88;">{st.session_state.coolant_p:.2f}</div>', unsafe_allow_html=True)
+            st.plotly_chart(create_gauge(st.session_state.coolant_p, 10, "#00ff88"), use_container_width=True, config={'displayModeBar': False}, key="g_coolant_p")
+            st.markdown('</div>', unsafe_allow_html=True)
         
-        st.markdown(f'<div class="param-value-display" style="color: #a855f7;">{st.session_state.oil_temp:.1f}</div>', unsafe_allow_html=True)
-        st.plotly_chart(create_gauge(st.session_state.oil_temp, 150, "#a855f7"), use_container_width=True, config={'displayModeBar': False})
-        st.markdown('</div>', unsafe_allow_html=True)
+        with row3_col2:
+            st.markdown('<div class="param-card">', unsafe_allow_html=True)
+            st.markdown('<div class="param-header"><span class="param-icon">🔥</span><span class="param-name">Oil Temp (°C)</span></div>', unsafe_allow_html=True)
+            
+            input_col1, input_col2 = st.columns([1, 3])
+            with input_col1:
+                oil_t_num = st.number_input("", 0.0, 150.0, value=st.session_state.oil_temp, step=1.0, key="oil_t_num", label_visibility="collapsed")
+            with input_col2:
+                oil_t_sld = st.slider("", 0.0, 150.0, value=st.session_state.oil_temp, step=1.0, key="oil_t_sld", label_visibility="collapsed")
+            
+            if oil_t_num != st.session_state.oil_temp:
+                st.session_state.oil_temp = oil_t_num
+            if oil_t_sld != st.session_state.oil_temp:
+                st.session_state.oil_temp = oil_t_sld
+            
+            st.markdown(f'<div class="param-value-display" style="color: #a855f7;">{st.session_state.oil_temp:.1f}</div>', unsafe_allow_html=True)
+            st.plotly_chart(create_gauge(st.session_state.oil_temp, 150, "#a855f7"), use_container_width=True, config={'displayModeBar': False}, key="g_oil_t")
+            st.markdown('</div>', unsafe_allow_html=True)
     
     # ========== RIGHT COLUMN: ANALYSIS ==========
     with right_col: