Allow deselecting topics via checkbox list

assets/main.css

@@ -9,3 +9,21 @@
 #range_count {
     width: 30%;
 }
+
+
+.checklist-container {
+    display:flex;
+    flex-direction:column;
+}
+
+
+@media (max-width: 1080px) {
+.checklist-container {
+    font-size: 24pt;
+}
+
+.checklist-input {
+    width: 36pt;
+    height: 36pt;
+
+}

tsplot

@@ -75,7 +75,9 @@ plot_page = html.Div([
             value='d'
         ),
     ]),
-    dcc.Graph(id='graph', animate=False),
+    dcc.Graph(id='graph', animate=False, responsive=True),
+    dcc.Checklist(id='topic-checklist', className="checklist-container",
+                  inputClassName="checklist-input"),
     dcc.Link('Back', href='/')
 ])
 
@@ -89,14 +91,29 @@ def get_timedelta(range_str, count):
     return range_to_delta[range_str]
 
 
+@app.callback([Output('topic-checklist', 'options'),
+               Output('topic-checklist', 'value')],
+              [Input('url', 'pathname')])
+def update_topic_checklist(pathname):
+    pathname = pathname.strip('/')
+    if pathname:
+        topics = pathname.strip('/').split('+')
+        selected = topics
+    else:
+        topics = all_topics
+        selected = []
+
+    return [{"label":topic, "value":topic, "disabled":False} for topic in sorted(topics)], selected
+
 @app.callback(Output('graph', 'figure'),
               [Input('interval-component', 'n_intervals'),
                Input('timerange', 'value'),
                Input('range_count', 'value'),
-               Input('url', 'pathname')])
-def update_graph(interval, timerange, range_count, pathname):
-    topics = pathname.strip('/').split('+')
-    if len(topics):
+               Input('topic-checklist', 'value')])
+def update_graph(interval, timerange, range_count, topics):
+    if topics:
+        print(f"topics: {topics}")
+
         delta = get_timedelta(timerange, range_count)
         now = int(time.time()) // update_interval_s
         def make_data(df, name):
@@ -107,19 +124,18 @@ def update_graph(interval, timerange, range_count, pathname):
                 'mode': 'lines',
                 'name': name
             }
+
         return {
             'data': [make_data(get_data(topic, delta, now), topic) for topic in topics]}
+
     else:
-        return {}
+        return {}, []
 
 # Update the index
 @app.callback(dash.dependencies.Output('page-content', 'children'),
               [dash.dependencies.Input('url', 'pathname')])
 def display_page(pathname):
-    if pathname == '/':
-        return index_page
-    else:
-        return plot_page
+    return plot_page
     # You could also return a 404 "URL not found" page here
 
 
@@ -134,10 +150,10 @@ if __name__ == '__main__':
     db = args.db
 
     conn = sqlite3.connect(db)
-    topics = get_topics(conn)
+    all_topics = get_topics(conn)
 
     index_page = html.Div(sum([[
         dcc.Link(f'Go to {page}', href=f'/{page}'),
-        html.Br()] for page in topics], []))
+        html.Br()] for page in all_topics], []))
 
     app.run_server(debug=args.debug, host='0.0.0.0')