Toggle trace/field visibility (#664)

* Toggle trace/field visibility

* Fix sonar issues

* Fix onClick flickering

* Open analyser by clicking on settings and value

Author: atomgomba

css/main.css

@@ -792,6 +792,10 @@ html.has-config .configuration-list {
     padding-right: 0.7em;
 }
 
+.graph-legend-field-name:hover {
+    text-decoration: underline;
+}
+
 .graph-legend-field-value {
     float: right;
 }
@@ -814,6 +818,11 @@ html.has-config .configuration-list {
     margin-left: 0.7em;
 }
 
+.graph-legend-field-visibility {
+    float: right;
+    margin-left: 0.7em;
+}
+
 html.has-video .graph-row,
 html.has-log .graph-row {
     display:-webkit-flex;

js/graph_config.js

@@ -19,6 +19,8 @@ function GraphConfig(graphConfig) {
     this.highlightGraphIndex = null;
     this.highlightFieldIndex = null;
 
+    const hiddenGraphFields = new Set();
+
     this.getGraphs = function() {
         return graphs;
     };
@@ -29,6 +31,8 @@ function GraphConfig(graphConfig) {
     this.setGraphs = function(newGraphs) {
         graphs = newGraphs;
 
+        hiddenGraphFields.clear();
+
         notifyListeners();
     };
 
@@ -129,6 +133,19 @@ function GraphConfig(graphConfig) {
     this.addListener = function(listener) {
         listeners.push(listener);
     };
+
+    this.toggleGraphField = (graphIndex, fieldIndex) => {
+        const item = graphIndex + ":" + fieldIndex;
+        if (hiddenGraphFields.has(item)) {
+            hiddenGraphFields.delete(item);
+        } else {
+            hiddenGraphFields.add(item);
+        }
+    };
+
+    this.isGraphFieldHidden = (graphIndex, fieldIndex) => {
+        return hiddenGraphFields.has(graphIndex + ":" + fieldIndex);
+    };
 }
 
 GraphConfig.PALETTE = [

js/graph_legend.js

@@ -8,7 +8,7 @@ function GraphLegend(targetElem, config, onVisibilityChange, onNewSelectionChang
         var 
             graphs = config.getGraphs(),
             i, j;
-        
+
         targetElem.empty();
 
         for (i = 0; i < graphs.length; i++) {
@@ -27,10 +27,11 @@ function GraphLegend(targetElem, config, onVisibilityChange, onNewSelectionChang
                     li = $('<li class="graph-legend-field field-quick-adjust" name="' + field.name + '" graph="' + i + '" field="' + j +'"></li>'),
                     nameElem = $('<span class="graph-legend-field-name field-quick-adjust" name="' + field.name + '" graph="' + i + '" field="' + j +'"></span>'),
                     valueElem = $('<span class="graph-legend-field-value field-quick-adjust" name="' + field.name + '" graph="' + i + '" field="' + j +'"></span>'),
-                    settingsElem = $('<div class="graph-legend-field-settings field-quick-adjust" name="' + field.name + '" graph="' + i + '" field="' + j +'"></div>'),
-                    analyseElem = $('<span class="glyphicon glyphicon-equalizer"></span>');
+                    settingsElem = $('<div class="graph-legend-field-settings field-quick-adjust" name="' + field.name + '" graph="' + i + '" field="' + j + '"></div>'),
+                    visibilityIcon = config.isGraphFieldHidden(i, j) ? "glyphicon-eye-close" : "glyphicon-eye-open",
+                    visibilityElem = $('<span class="glyphicon ' + visibilityIcon + ' graph-legend-field-visibility" graph="' + i + '" field="' + j + '"></span>');
                 li.append(nameElem);
-                li.append(analyseElem);
+                li.append(visibilityElem);
                 li.append(valueElem);
                 li.append(settingsElem);
 
@@ -63,7 +64,7 @@ function GraphLegend(targetElem, config, onVisibilityChange, onNewSelectionChang
         });
 
         // Add a trigger on legend; select the analyser graph/field to plot
-        $('.graph-legend-field').on('click', function(e) {
+        $('.graph-legend-field-name, .graph-legend-field-settings, .graph-legend-field-value').on('click', function (e) {
 
             if(e.which!=1) return; // only accept left mouse clicks
 
@@ -134,7 +135,31 @@ function GraphLegend(targetElem, config, onVisibilityChange, onNewSelectionChang
         });
 
         // on first show, hide the analyser button
-        if(!config.selectedFieldName) $('.hide-analyser-window').hide();
+        if (!config.selectedFieldName) $('.hide-analyser-window').hide();
+
+        // Add a trigger on legend; select the analyser graph/field to plot
+        $('.graph-legend-field-visibility').on('click', function (e) {
+            if (e.which != 1) {
+                return; // only accept left mouse clicks
+            }
+
+            const $this = $(this),
+                graphIndex = $this.attr('graph'),
+                fieldIndex = $this.attr('field');
+
+            config.toggleGraphField(graphIndex, fieldIndex);
+            onHighlightChange();
+
+            if (config.isGraphFieldHidden(graphIndex, fieldIndex)) {
+                $this.removeClass("glyphicon-eye-open");
+                $this.addClass("glyphicon-eye-close");
+            } else {
+                $this.addClass("glyphicon-eye-open");
+                $this.removeClass("glyphicon-eye-close");
+            }
+
+            e.preventDefault();
+        });
     }
 
     this.updateValues = function (flightLog, frame) {

js/grapher.js

@@ -800,6 +800,9 @@ function FlightLogGrapher(flightLog, graphConfig, canvas, stickCanvas, craftCanv
                         drawAxisBackground(canvas.height * graph.height);
 
                     for (j = 0; j < graph.fields.length; j++) {
+                        if (graphConfig.isGraphFieldHidden(i, j)) {
+                            continue;
+                        }
                         var field = graph.fields[j];
                         plotField(chunks, startFrameIndex, field.index, field.curve, canvas.height * graph.height / 2, 
                             field.color ? field.color : GraphConfig.PALETTE[j % GraphConfig.PALETTE.length],