Update app.py

app.py

@@ -2,7 +2,9 @@ import streamlit as st
 from azure.cosmos import CosmosClient, PartitionKey
 import os
 import pandas as pd
-from streamlit.components.v1 import html
+
+# Streamlit page configuration for wide mode
+st.set_page_config(layout="wide")
 
 # Cosmos DB configuration
 ENDPOINT = "https://acae-afd.documents.azure.com:443/"
@@ -47,69 +49,6 @@ def delete_records(ids):
     except Exception as e:
         return False, f"Error deleting records: {str(e)}"
 
-def create_html_component(records):
-    html_template = """
-    <style>
-        .record-list {
-            font-family: Arial, sans-serif;
-        }
-        .record-item {
-            display: flex;
-            align-items: center;
-            margin-bottom: 10px;
-            padding: 10px;
-            border: 1px solid #ddd;
-            border-radius: 5px;
-        }
-        .record-image {
-            width: 50px;
-            height: 50px;
-            margin-right: 10px;
-        }
-        .record-details {
-            flex-grow: 1;
-        }
-        .record-title {
-            font-weight: bold;
-        }
-        .record-description {
-            font-style: italic;
-            color: #666;
-        }
-        .record-actions {
-            display: flex;
-            align-items: center;
-        }
-        .record-actions button {
-            margin-left: 5px;
-        }
-    </style>
-    <div class="record-list">
-    """
-    
-    for record in records:
-        html_template += f"""
-        <div class="record-item">
-            <img src="https://via.placeholder.com/50" class="record-image" alt="Record thumbnail">
-            <div class="record-details">
-                <div class="record-title">{record['name']}</div>
-                <div class="record-description">{record['document']}</div>
-            </div>
-            <div class="record-actions">
-                <button onclick="Streamlit.setComponentValue({{action: 'extend', id: '{record['id']}'}})">Extend</button>
-                <label>
-                    Public
-                    <input type="checkbox" onclick="Streamlit.setComponentValue({{action: 'toggle_public', id: '{record['id']}'}})">
-                </label>
-                <button onclick="Streamlit.setComponentValue({{action: 'like', id: '{record['id']}'}})">👍</button>
-                <button onclick="Streamlit.setComponentValue({{action: 'dislike', id: '{record['id']}'}})">👎</button>
-            </div>
-        </div>
-        """
-    
-    html_template += "</div>"
-    return html_template
-
 # Streamlit app
 st.title("🌟 Cosmos DB Record Management")
 
@@ -141,57 +80,23 @@ else:
     edited_df = st.sidebar.data_editor(records_df, num_rows="dynamic", key="sidebar_editor")
 
     # Main Content Area
-    st.subheader("📊 All Records")
-    
-    # Create and render the HTML component
-    html_component = create_html_component(edited_df.to_dict('records'))
-    component_value = html(html_component, height=400)
-    
-    # Handle component interactions
-    if component_value:
-        try:
-            action = component_value['action']
-            record_id = component_value['id']
-            if action == 'extend':
-                st.write(f"Extending record {record_id}")
-            elif action == 'toggle_public':
-                st.write(f"Toggling public status for record {record_id}")
-            elif action == 'like':
-                st.write(f"Liked record {record_id}")
-            elif action == 'dislike':
-                st.write(f"Disliked record {record_id}")
-        except KeyError:
-            st.write("Interaction detected, but action or id not found.")
-
-    # Add delete and download buttons
     col1, col2 = st.columns(2)
-    with col1:
-        if st.button("🗑️ Delete Selected"):
-            st.warning("Deletion functionality needs to be implemented for the new component")
 
-    with col2:
-        if st.download_button("📥 Download Data", edited_df.to_csv(index=False), "cosmos_db_data.csv", "text/csv"):
-            st.success("Data downloaded successfully!")
-
-    # Input fields for new record
-    st.subheader("📝 Enter New Record Details")
-    new_id = st.text_input("ID")
-    new_name = st.text_input("Name")
-    new_document = st.text_area("Document")
-    new_evaluation_text = st.text_area("Evaluation Text")
-    new_evaluation_score = st.number_input("Evaluation Score", min_value=0, max_value=100, step=1)
-
-    col1, col2 = st.columns(2)
-    
-    # Insert Record button
     with col1:
+        st.subheader("📝 Enter Record Details")
+        id = st.text_input("ID")
+        name = st.text_input("Name")
+        document = st.text_area("Document")
+        evaluation_text = st.text_area("Evaluation Text")
+        evaluation_score = st.number_input("Evaluation Score", min_value=0, max_value=100, step=1)
+
         if st.button("💾 Insert Record"):
             record = {
-                "id": new_id,
-                "name": new_name,
-                "document": new_document,
-                "evaluationText": new_evaluation_text,
-                "evaluationScore": new_evaluation_score
+                "id": id,
+                "name": name,
+                "document": document,
+                "evaluationText": evaluation_text,
+                "evaluationScore": evaluation_score
             }
             
             success, response = insert_record(record)
@@ -200,17 +105,16 @@ else:
                 st.json(response)
             else:
                 st.error(f"❌ Failed to insert record: {response}")
-            st.rerun()
 
-    # Call Procedure button
     with col2:
-        if st.button("🔧 Call Procedure"):
+        st.subheader("🔧 Call Stored Procedure")
+        if st.button("Call Procedure"):
             record = {
-                "id": new_id,
-                "name": new_name,
-                "document": new_document,
-                "evaluationText": new_evaluation_text,
-                "evaluationScore": new_evaluation_score
+                "id": id,
+                "name": name,
+                "document": document,
+                "evaluationText": evaluation_text,
+                "evaluationScore": evaluation_score
             }
             
             success, response = call_stored_procedure(record)
@@ -220,6 +124,27 @@ else:
             else:
                 st.error(f"❌ Failed to execute stored procedure: {response}")
 
+    st.subheader("📊 All Records")
+    st.dataframe(edited_df)
+
+    col3, col4 = st.columns(2)
+    with col3:
+        if st.button("🗑️ Delete Selected"):
+            selected_ids = edited_df[edited_df['select']]['id'].tolist() if 'select' in edited_df.columns else []
+            if selected_ids:
+                success, message = delete_records(selected_ids)
+                if success:
+                    st.success(message)
+                else:
+                    st.error(message)
+                st.rerun()
+            else:
+                st.warning("No records selected for deletion.")
+
+    with col4:
+        if st.download_button("📥 Download Data", edited_df.to_csv(index=False), "cosmos_db_data.csv", "text/csv"):
+            st.success("Data downloaded successfully!")
+
     # Logout button
     if st.button("🚪 Logout"):
         st.session_state.logged_in = False
@@ -231,8 +156,4 @@ else:
     st.sidebar.text(f"Endpoint: {ENDPOINT}")
     st.sidebar.text(f"Subscription ID: {SUBSCRIPTION_ID}")
     st.sidebar.text(f"Database: {DATABASE_NAME}")
-    st.sidebar.text(f"Container: {CONTAINER_NAME}")
-
-# Preview section
-st.markdown("---")
-st.markdown("### Select a record to preview.")
+    st.sidebar.text(f"Container: {CONTAINER_NAME}")