Improve bit selection

stat/id_viewer.py

@@ -39,15 +39,38 @@ def plot_bits(df, byte_cols, can_id, title):
     colors = ['#e41a1c', '#377eb8', '#4daf4a', '#984ea3', '#ff7f00', '#ffff33', '#a65628', '#f781bf']
 
     for i, col in enumerate(byte_cols):
+        fig.add_trace(go.Scatter(
+            x=[None], y=[None],
+            mode='markers',
+            marker=dict(symbol='square', size=10, color=colors[i]),
+            name=col.upper(),
+            showlegend=True,
+            legendgroup=col.upper(),
+            hoverinfo='skip'
+        ))
         fig.add_trace(go.Scatter(
             x=df['Timestamp'],
             y=df[col],
             mode='lines',
             line=dict(shape='hv', width=2, color=colors[i]),
             name=col.upper(),
+            showlegend=False,
+            legendgroup=col.upper(),
             hovertemplate=f"<b>{col.upper()}</b><br>Time: %{{x}}<br>Value: %{{y}}<extra></extra>"
         ))
 
+    all_button = dict(
+        label='ALL',
+        method='restyle',
+        args=[{'visible': [True] * 16}]
+    )
+
+    none_button = dict(
+        label='NONE',
+        method='restyle',
+        args=[{'visible': ['legendonly'] * 16}]
+    )
+
     fig.update_layout(
         height=600,
         autosize=True,
@@ -62,13 +85,21 @@ def plot_bits(df, byte_cols, can_id, title):
         hoverlabel=dict(
             bgcolor="white", font_size=13, font_family="Segoe UI", bordercolor='#cccccc'
         ),
-        margin=dict(l=60, r=40, t=120, b=60),
+        margin=dict(l=60, r=40, t=120, b=140),
         legend=dict(
-            title=dict(text="Bytes"),
+            orientation='h',
-            bgcolor="rgba(255,255,255,0.8)",
+            x=0.5,
-            bordercolor="#cccccc",
+            xanchor='center',
+            y=-0.18,
+            yanchor='top',
+            title=None,
+            bgcolor='white',
+            bordercolor='#cccccc',
             borderwidth=1,
-            font=dict(size=12, color="#2a2a2a")
+            font=dict(size=12, color="#2a2a2a"),
+            itemsizing='constant',
+            itemclick='toggle',
+            itemdoubleclick='toggleothers'
         ),
         xaxis=dict(
             title=dict(text="Timestamp", font=dict(size=13, color="#1a1a1a")),
@@ -84,7 +115,23 @@ def plot_bits(df, byte_cols, can_id, title):
             zeroline=False, linecolor="#bdbdbd",
             tickfont=dict(size=12, color="#2a2a2a"),
             ticks="outside", ticklen=4, tickcolor="#cccccc"
-        )
+        ),
+        updatemenus=[
+            dict(
+                type='buttons',
+                direction='right',
+                x=0.5,
+                xanchor='center',
+                y=-0.06,
+                yanchor='top',
+                buttons=[all_button, none_button],
+                bgcolor='white',
+                bordercolor='#cccccc',
+                borderwidth=1,
+                font=dict(size=11, color='#2a2a2a'),
+                pad=dict(l=5, r=5, t=5, b=5)
+            )
+        ]
     )
 
     return fig