Replace Plotly graph-based tables with Dash DataTable

logs/view.py

@@ -1,14 +1,13 @@
-# File: logs.py
+# File: logs_view.py
 # Copyright (C) 2026 Erick Ahmed
 # SPDX-License-Identifier: AGPL-3.0-or-later
 
 import pandas as pd
-import plotly.graph_objects as go
-from dash import html, dcc
+from dash import html, dash_table
 
-def render_logs_table(df: pd.DataFrame):
+def prepare_logs_data(df: pd.DataFrame) -> pd.DataFrame:
     if df is None or df.empty:
-        return html.Div("No data available")
+        return pd.DataFrame()
 
     df = df.copy()
 
@@ -36,34 +35,40 @@ def render_logs_table(df: pd.DataFrame):
     display_cols = ['Timestamp', 'ID', 'DLC', 'b0', 'b1', 'b2', 'b3', 'b4', 'b5', 'b6', 'b7', 'Priority', 'PF', 'PS', 'SA', 'DA', 'PGN']
     display_df = df[[c for c in display_cols if c in df.columns]]
 
-    display_df = display_df.fillna("")
-
-    max_rows = 1000
-    total_rows = len(display_df)
-    if total_rows > max_rows:
-        display_df = display_df.iloc[:max_rows]
-
-    fig = go.Figure(data=[go.Table(
-        header=dict(
-            values=["<b>" + str(c) + "</b>" for c in display_df.columns],
-            fill_color='#1a1a1a',
-            font=dict(color='white', size=12),
-            align='center'
-        ),
-        cells=dict(
-            values=[display_df[col] for col in display_df.columns],
-            fill_color='#f8f9fa',
-            font=dict(color='#2a2a2a', size=11),
-            align='center'
-        )
-    )])
-
-    fig.update_layout(
-        height=800,
-        margin=dict(l=0, r=0, t=10, b=0)
-    )
+    return display_df.fillna("")
 
+def get_logs_table_component():
     return html.Div([
-        html.Div(f"Displaying first {len(display_df)} of {total_rows} total frames.", className="text-muted mb-2"),
-        dcc.Graph(figure=fig, style={'height': '80vh'})
+        html.Div(id='logs-info-text', className="text-muted mb-2"),
+        dash_table.DataTable(
+            id='logs-table',
+            virtualization=True,
+            page_action='none',
+            style_table={'overflowX': 'auto', 'height': '75vh', 'overflowY': 'auto'},
+            style_header={
+                'backgroundColor': '#1a1a1a',
+                'color': 'white',
+                'fontWeight': 'bold',
+                'textAlign': 'center',
+                'position': 'sticky',
+                'top': 0
+            },
+            style_data={
+                'backgroundColor': '#f8f9fa',
+                'color': '#2a2a2a',
+                'textAlign': 'center'
+            },
+            style_data_conditional=[
+                {
+                    'if': {'row_index': 'odd'},
+                    'backgroundColor': 'rgb(240, 240, 240)'
+                }
+            ],
+            style_cell={
+                'minWidth': '80px',
+                'padding': '5px',
+                'textAlign': 'center',
+                'fontFamily': 'Segoe UI, Arial, sans-serif'
+            }
+        )
     ])