From 886dd498e9323eba1c379100bb40cc8e082581a9 Mon Sep 17 00:00:00 2001
From: Arthur de Jong <arthur@arthurdejong.org>
Date: Sat, 29 Jul 2023 17:44:37 +0200
Subject: Add buttons to toggle selection of values in graph

This adds "Select all", "Toggle selection" and "Select none" buttons to
the legend to allow bulk enabling and disabling individual metrics in
graphs.

This also switches to using Plotly.newPlot() over Plotly.redraw() (or
Plotly.react()) because Plotly has some issues if all traces are removed
from a graph and later re-added.
---
 src/index.html    |  9 +++++++-
 src/munin-plot.js | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 67 insertions(+), 4 deletions(-)

diff --git a/src/index.html b/src/index.html
index d5281af..2a6d9d7 100644
--- a/src/index.html
+++ b/src/index.html
@@ -79,7 +79,14 @@
             </div>
             <div class="card-rightbody">
               <div class="container-fluid px-0">
-                <div class="row graphtitle small"></div>
+                <div class="row small">
+                  <div class="col graphtitle"></div>
+                  <div class="col text-end">
+                    <span class="selectall mx-2" title="Select all"><i class="fa-solid fa-circle-check fa-xs"></i></span>
+                    <span class="selecttoggle mx-2" title="Toggle selection"><i class="fa-solid fa-circle-half-stroke fa-xs"></i></span>
+                    <span class="selectnone mx-2" title="Select none"><i class="fa-regular fa-circle fa-xs"></i></span>
+                  </div>
+                </div>
                 <div class="row">
                   <div class="myplot col col-8">
                     <div class="loading loading-small"></div>
diff --git a/src/munin-plot.js b/src/munin-plot.js
index ae35c60..2d6359a 100644
--- a/src/munin-plot.js
+++ b/src/munin-plot.js
@@ -332,9 +332,9 @@ $(document).ready(function () {
     const legend = clone.find('.mylegend')
     plot.graph = graph
     // update graph title
-    clone.find('.graphtitle').append($('<div>').addClass('col').text(graph.host + ' / ')
+    clone.find('.graphtitle').text(graph.host + ' / ')
       .append($('<b>').text(graph.graph_title))
-      .attr('title', graph.graph_info || ''))
+      .attr('title', graph.graph_info || '')
     // set the size changing actions
     clone.find('.sizesm').click(function () {
       clone.find('.sizeactive').removeClass('sizeactive')
@@ -369,6 +369,62 @@ $(document).ready(function () {
         saveCurrentGraphs()
       })
     })
+    // set the selection changing actions
+    clone.find('.selectall').click(function () {
+      if (plot.data) {
+        traces.slice().reverse().forEach(function (trace) {
+          if (trace.showlegend !== false) {
+            plot.legendbyfield[trace.field_name].style.opacity = 1
+            plot.data.forEach(function (t) {
+              if (t.field_name === trace.field_name) {
+                t.visible = true
+              }
+            })
+          }
+        })
+        saveCurrentGraphs()
+        Plotly.newPlot(plot, plot.data, plot.layout, plot.config)
+      }
+    })
+    clone.find('.selecttoggle').click(function () {
+      if (plot.data) {
+        traces.slice().reverse().forEach(function (trace) {
+          if (trace.showlegend !== false) {
+            const visible = (trace.visible === false)
+            plot.legendbyfield[trace.field_name].style.opacity = visible ? 1 : 0.2
+            plot.data.forEach(function (t) {
+              if (t.field_name === trace.field_name) {
+                t.visible = visible
+              }
+            })
+          }
+        })
+        saveCurrentGraphs()
+        Plotly.newPlot(plot, plot.data, plot.layout, plot.config)
+      }
+    })
+    clone.find('.selectnone').click(function () {
+      if (plot.data) {
+        traces.slice().reverse().forEach(function (trace) {
+          if (trace.field_name === 'idle') {
+            console.log(trace)
+            console.log(trace.name, trace.field_name, trace.visible)
+          }
+        })
+        traces.slice().reverse().forEach(function (trace) {
+          if (trace.showlegend !== false) {
+            plot.legendbyfield[trace.field_name].style.opacity = 0.2
+            plot.data.forEach(function (t) {
+              if (t.field_name === trace.field_name) {
+                t.visible = false
+              }
+            })
+          }
+        })
+        saveCurrentGraphs()
+        Plotly.newPlot(plot, plot.data, plot.layout, plot.config)
+      }
+    })
     // set the wanted size
     $(plot).addClass('plot-' + size)
     legend.addClass('legend-' + size)
@@ -479,7 +535,7 @@ $(document).ready(function () {
               }
             })
             saveCurrentGraphs()
-            Plotly.redraw(plot)
+            Plotly.newPlot(plot, plot.data, plot.layout, plot.config)
           }
         })
         // highlight the trace by lowering the opacity of the others traces
-- 
cgit v1.2.3