Perf: Fix slow selectAll and deselectAll highcharts controller methods

Author: coalest

app/javascript/controllers/highchart_controller.js

@@ -18,14 +18,20 @@ export default class extends Controller {
 
   deselectAll() {
     this.chart.series.forEach((s) => {
-      s.hide();
+      // Change series visibility to hidden (first param) without redrawing (second param)
+      s.setVisible(false, false);
     })
+    // Redraw chart only once at the end for performance reasons.
+    this.chart.redraw();
   }
 
   selectAll() {
     this.chart.series.forEach((s) => {
-      s.show();
+      // Change series visibility to visible (first param) without redrawing (second param)
+      s.setVisible(true, false);
     })
+    // Redraw chart only once at the end for performance reasons.
+    this.chart.redraw();
   }
 
 }

app/views/shared/_highcharts.html.erb

@@ -1,6 +1,6 @@
 <div data-controller="highchart" data-highchart-config-value="<%= config %>">
   <div data-highchart-target="chart"></div>
-  <div>
+  <div class="pl-3">
     <button type="button" class="btn btn-sm btn-secondary" data-action="click->highchart#selectAll">Select All</button>
     <button type="button" class="btn btn-sm btn-info" data-action="click->highchart#deselectAll">Deselect All</button>
   </div>