Merge pull request #264 from nyu-mlab/patch

UI/UX Patches

Author: crazyideas21

.gitignore

@@ -1,3 +1,7 @@
+# Ignore packet dumps
+*.pcap
+*.pcapng
+
 *~
 .*
 !.gitattributes

src/libinspector/common.py

@@ -61,17 +61,16 @@ def show_warning():
     else:
         # ID is missing or invalid -> BLOCK and show input form
         st.subheader("Prolific ID Required")
-        st.warning("Please enter your Prolific ID to proceed. This ID is essential for data labeling.")
+        st.warning("Please enter your Prolific ID to proceed. This ID is essential for data labeling and your payment.")
 
         with st.form("prolific_id_form"):
             input_id = st.text_input(
-                "Enter your Prolific ID (1-50 Alphanumeric Characters):",
+                "Enter your Prolific ID:",
                 value="",
                 key="prolific_id_input"
             ).strip()
 
             submitted = st.form_submit_button("Submit ID")
-
             if submitted:
                 if is_prolific_id_valid(input_id):
                     config_set("prolific_id", input_id)
@@ -141,7 +140,8 @@ def bar_graph_data_frame(mac_address: str, now: int):
 
 def plot_traffic_volume(df: pd.DataFrame, now: int, chart_title: str):
     """
-    Plots the traffic volume over time.
+    Plots the traffic volume over time. The bar goes from right to left,
+    like Task Manager in Windows.
 
     Args:
         df (pd.DataFrame): DataFrame containing 'Time' and 'Bits' columns.
@@ -153,9 +153,9 @@ def plot_traffic_volume(df: pd.DataFrame, now: int, chart_title: str):
     else:
         st.markdown(f"#### {chart_title}")
         df['seconds_ago'] = now - df['timestamp'].astype(int)
-        df = df.set_index('seconds_ago').reindex(range(0, 60), fill_value=0).reset_index()
-        st.bar_chart(df.set_index('seconds_ago')['Bits'], width='content')
-
+        df_reindexed = df.set_index('seconds_ago').reindex(range(0, 60), fill_value=0).reset_index()
+        df_reindexed = df_reindexed.sort_values(by='seconds_ago', ascending=False)
+        st.bar_chart(df_reindexed.set_index('seconds_ago')['Bits'], width='content')
 
 def get_device_metadata(mac_address: str) -> dict:
     """

src/libinspector/device_detail_page.py

@@ -54,6 +54,9 @@ def worker_thread():
                     custom_name = api_output["Vendor"]
                     if api_output["Vendor"] != "":
                         common.config_set(custom_name_key, custom_name)
+                    else:
+                        # If API is down, just try using OUI vendor
+                        common.config_set(custom_name_key, meta_data.get('oui_vendor', 'Unknown Device, likely a Mobile Phone'))
             except Exception as e:
                 logger.info("[Device ID API] Exception when calling API: %s", str(e))
                 continue
@@ -214,8 +217,13 @@ def show_device_card(device_dict: dict):
         # --- Add bar charts for upload/download ---
         now = int(time.time())
         df_upload_bar_graph, df_download_bar_graph = common.bar_graph_data_frame(device_dict['mac_address'], now)
-        common.plot_traffic_volume(df_upload_bar_graph, now, "Upload Traffic (sent by device) in the last 60 seconds")
-        common.plot_traffic_volume(df_download_bar_graph, now,"Download Traffic (received by device) in the last 60 seconds")
+        chart_col_upload, chart_col_download = st.columns(2)
+        with chart_col_upload:
+            common.plot_traffic_volume(df_upload_bar_graph, now,
+                                       "Upload Traffic (sent by device) in the last 60 seconds")
+        with chart_col_download:
+            common.plot_traffic_volume(df_download_bar_graph, now,
+                                       "Download Traffic (received by device) in the last 60 seconds")
 
     # Set whether a device is to be inspected, favorite, or blocked
     with c2:

src/libinspector/device_list_page.py

@@ -75,6 +75,7 @@ def start_inspector_once():
         # Same with the general warning
         common.config_set("suppress_warning", False)
         common.config_set("labeling_in_progress", False)
+        common.config_set("api_message", "")
         libinspector.core.start_threads()
         api_thread = threading.Thread(
             name="Device API Thread",

src/libinspector/page_manager.py

@@ -173,20 +173,26 @@ def label_packets():
 
 def make_pcap_filename(start_time: int, end_time: int) -> str:
     """
-    Generates a pcap filename using the start and end epoch timestamps.
+    Generates a pcap filename that is both human-readable and informative.
+    The format is: 'Mon-DD-YYYY_HHMMSSAM/PM_DurationSeconds.pcap'
+
+    Example: 'Oct-31-2025_11:31:00AM_6s.pcap'
 
     Args:
         start_time (int): Start time in seconds since the epoch.
         end_time (int): End time in seconds since the epoch.
 
     Returns:
-        str: Filename in the format 'YYYYMMDD_HHMMSS-YYYYMMDD_HHMMSS.pcap'.
+        str: Human-readable filename.
     """
     start_dt = datetime.datetime.fromtimestamp(start_time)
-    end_dt = datetime.datetime.fromtimestamp(end_time)
-    safe_start = start_dt.strftime("%Y%m%d_%H%M%S")
-    safe_end = end_dt.strftime("%Y%m%d_%H%M%S")
-    filename = f"{safe_start}-{safe_end}.pcap"
+    duration_seconds = end_time - start_time
+
+    # Format the start time: e.g., 'Oct-31-2025_113100AM'
+    safe_start = start_dt.strftime("%b-%d-%Y_%I:%M:%S%p")
+
+    # Generate the filename with duration
+    filename = f"{safe_start}_{duration_seconds}s.pcap"
     return filename
 
 

src/libinspector/server/packet_collector.py

@@ -4,17 +4,16 @@
 
 def show():
     """
-    This page shows a toggle to connect to IoT Inspector cloud.
     This will generate a list of all favorite devices found in IoT Inspector derived from config.json
     """
-    with st.container(border=True):
-        st.toggle(
-            "Connect to the IoT Inspector Cloud for enhanced features (Recommended)",
-            key='connect_to_nyu_inspector_cloud',
-            value=common.config_get('connect_to_nyu_inspector_cloud', False),
-            help="Toggle ON if you need help with identifying devices and detecting anonymous devices and activities, but provided that you are okay with IoT Inspector sharing anonymous data with New York University researchers.",
-            on_change=lambda: common.config_set('connect_to_nyu_inspector_cloud', st.session_state['connect_to_nyu_inspector_cloud'])
-    )
+    #with st.container(border=True):
+    #    st.toggle(
+    #        "Connect to the IoT Inspector Cloud for enhanced features (Recommended)",
+    #        key='connect_to_nyu_inspector_cloud',
+    #        value=common.config_get('connect_to_nyu_inspector_cloud', False),
+    #        help="Toggle ON if you need help with identifying devices and detecting anonymous devices and activities, but provided that you are okay with IoT Inspector sharing anonymous data with New York University researchers.",
+    #        on_change=lambda: common.config_set('connect_to_nyu_inspector_cloud', st.session_state['connect_to_nyu_inspector_cloud'])
+    #)
     show_favorite_device_list()
 
 

src/libinspector/sidebar.py

@@ -88,15 +88,40 @@ $streamlitAppPath = "$PSScriptRoot\src\libinspector\dashboard.py"
 # The entire argument list is passed to uv.
 $StreamlitArgs = @("run", "streamlit", "run", "`"$streamlitAppPath`"")
 
-Start-Process -FilePath "uv" `
+$streamlitProcess = Start-Process -FilePath "uv" `
     -ArgumentList $StreamlitArgs `
     -PassThru `
     -NoNewWindow
-# Wait for a few seconds to let the server start
-Start-Sleep -Seconds 3
 
+
+$isReady = $false
+$pollingDelaySeconds = 3
+$appUrl = "http://localhost:33721/"
+# Loop indefinitely until $isReady becomes $true
+while (-not $isReady) {
+    try {
+        # Use Invoke-WebRequest to check for a successful connection (Status Code 200).
+        # We set a short TimeoutSec on the request itself to prevent hanging.
+        $request = Invoke-WebRequest -Uri $appUrl -TimeoutSec 5 -ErrorAction Stop
+        if ($request.StatusCode -eq 200) {
+            $isReady = $true
+            Write-Host "✅ Server is ready. Launching browser."
+        }
+    } catch {
+        # Server is not ready yet, or connection failed. Ignore the error.
+        Write-Host "Still waiting for Streamlit server..."
+    }
+
+    if (-not $isReady) {
+        Start-Sleep -Seconds $pollingDelaySeconds
+    }
+}
 # Open the browser to the application URL
-Start-Process -FilePath "http://localhost:33721/"
+Start-Process -FilePath $appUrl
 
 # Wait for the Streamlit process to finish or for the user to close this window
 Write-Host "IoT Inspector is running. Close this window to stop the application."
+if ($streamlitProcess) {
+    $streamlitProcess.WaitForExit()
+}
+Write-Host "IoT Inspector has been closed. Exiting setup script."