From d27f73579b72d255bb90959146efc7bb53eee11f Mon Sep 17 00:00:00 2001
From: David Tsay <3614296+davetsay@users.noreply.github.com>
Date: Mon, 19 Oct 2020 10:07:51 -0700
Subject: [PATCH] [Plots] Toggle grid lines (#3313)

* add toggle button

* enable toggle grid lines in plots

* fix merge issue

* change to new glyphs

Co-authored-by: Deep Tailor <deep.j.tailor@nasa.gov>
---
 src/plugins/plot/res/templates/mct-plot.html  | 14 ++++++----
 src/plugins/plot/res/templates/plot.html      | 19 ++++++++-----
 .../plot/res/templates/stacked-plot.html      | 27 +++++++++++--------
 .../plot/src/plot/MCTPlotController.js        |  7 +++++
 .../plot/src/telemetry/PlotController.js      |  6 +++++
 .../src/telemetry/StackedPlotController.js    |  5 ++++
 6 files changed, 55 insertions(+), 23 deletions(-)

diff --git a/src/plugins/plot/res/templates/mct-plot.html b/src/plugins/plot/res/templates/mct-plot.html
index 4810977489..8205de291f 100644
--- a/src/plugins/plot/res/templates/mct-plot.html
+++ b/src/plugins/plot/res/templates/mct-plot.html
@@ -188,15 +188,19 @@
                          ng-style="{
                              right: (100 * (max - tick.value) / interval) + '%',
                              height: '100%'
-                         }">
-                     </div>
+                         }"
+                         ng-show="plot.gridLines"
+                    >
+                    </div>
                 </mct-ticks>
 
                 <mct-ticks axis="yAxis">
-                     <div class="gl-plot-hash hash-h"
+                    <div class="gl-plot-hash hash-h"
                           ng-repeat="tick in ticks track by tick.value"
-                          ng-style="{ bottom: (100 * (tick.value - min) / interval) + '%', width: '100%' }">
-                     </div>
+                          ng-style="{ bottom: (100 * (tick.value - min) / interval) + '%', width: '100%' }"
+                          ng-show="plot.gridLines"
+                    >
+                    </div>
                 </mct-ticks>
 
                 <mct-chart config="config"
diff --git a/src/plugins/plot/res/templates/plot.html b/src/plugins/plot/res/templates/plot.html
index a9c8a98f55..559ae97f9e 100644
--- a/src/plugins/plot/res/templates/plot.html
+++ b/src/plugins/plot/res/templates/plot.html
@@ -22,16 +22,16 @@
 <div ng-controller="PlotController as controller"
     class="c-plot holder holder-plot has-control-bar">
     <div class="c-control-bar" ng-show="!controller.hideExportButtons">
-         <span class="c-button-set c-button-set--strip-h">
+        <span class="c-button-set c-button-set--strip-h">
             <button class="c-button icon-download"
-               ng-click="controller.exportPNG()"
-               title="Export This View's Data as PNG">
-                 <span class="c-button__label">PNG</span>
+                ng-click="controller.exportPNG()"
+                title="Export This View's Data as PNG">
+                <span class="c-button__label">PNG</span>
             </button>
             <button class="c-button"
-               ng-click="controller.exportJPG()"
-               title="Export This View's Data as JPG">
-                 <span class="c-button__label">JPG</span>
+                ng-click="controller.exportJPG()"
+                title="Export This View's Data as JPG">
+                <span class="c-button__label">JPG</span>
             </button>
         </span>
         <button class="c-button icon-crosshair"
@@ -39,6 +39,11 @@
                 ng-click="controller.toggleCursorGuide($event)"
                 title="Toggle cursor guides">
         </button>
+        <button class="c-button"
+                ng-class="{ 'icon-grid-on': controller.gridLines, 'icon-grid-off': !controller.gridLines }"
+                ng-click="controller.toggleGridLines($event)"
+                title="Toggle grid lines">
+        </button>
     </div>
 
     <div class="l-view-section">
diff --git a/src/plugins/plot/res/templates/stacked-plot.html b/src/plugins/plot/res/templates/stacked-plot.html
index 73abef3d38..11dc1a55a3 100644
--- a/src/plugins/plot/res/templates/stacked-plot.html
+++ b/src/plugins/plot/res/templates/stacked-plot.html
@@ -22,23 +22,28 @@
 <div ng-controller="StackedPlotController as stackedPlot"
       class="c-plot c-plot--stacked holder holder-plot has-control-bar">
     <div class="c-control-bar" ng-show="!stackedPlot.hideExportButtons">
-       <span class="c-button-set c-button-set--strip-h">
-          <button class="c-button icon-download"
-             ng-click="stackedPlot.exportPNG()"
-             title="Export This View's Data as PNG">
-              <span class="c-button__label">PNG</span>
-          </button>
-          <button class="c-button"
-             ng-click="stackedPlot.exportJPG()"
-             title="Export This View's Data as JPG">
-              <span class="c-button__label">JPG</span>
-          </button>
+        <span class="c-button-set c-button-set--strip-h">
+            <button class="c-button icon-download"
+                ng-click="stackedPlot.exportPNG()"
+                title="Export This View's Data as PNG">
+                <span class="c-button__label">PNG</span>
+            </button>
+            <button class="c-button"
+                ng-click="stackedPlot.exportJPG()"
+                title="Export This View's Data as JPG">
+                <span class="c-button__label">JPG</span>
+            </button>
         </span>
         <button class="c-button icon-crosshair"
                 ng-class="{ 'is-active': stackedPlot.cursorGuide }"
                 ng-click="stackedPlot.toggleCursorGuide($event)"
                 title="Toggle cursor guides">
         </button>
+        <button class="c-button"
+                ng-class="{ 'icon-grid-on': stackedPlot.gridLines, 'icon-grid-off': !stackedPlot.gridLines }"
+                ng-click="stackedPlot.toggleGridLines($event)"
+                title="Toggle grid lines">
+        </button>
     </div>
     <div class="l-view-section">
         <div class="c-loading--overlay loading"
diff --git a/src/plugins/plot/src/plot/MCTPlotController.js b/src/plugins/plot/src/plot/MCTPlotController.js
index 5570e22a35..d9491fda3b 100644
--- a/src/plugins/plot/src/plot/MCTPlotController.js
+++ b/src/plugins/plot/src/plot/MCTPlotController.js
@@ -96,7 +96,10 @@ define([
         this.cursorGuideHorizontal = this.$element[0].querySelector('.js-cursor-guide--h');
         this.cursorGuide = false;
 
+        this.gridLines = true;
+
         this.listenTo(this.$scope, 'cursorguide', this.toggleCursorGuide, this);
+        this.listenTo(this.$scope, 'toggleGridLines', this.toggleGridLines, this);
 
         this.listenTo(this.$scope, '$destroy', this.destroy, this);
         this.listenTo(this.$scope, 'plot:tickWidth', this.onTickWidthChange, this);
@@ -554,6 +557,10 @@ define([
         this.cursorGuide = !this.cursorGuide;
     };
 
+    MCTPlotController.prototype.toggleGridLines = function ($event) {
+        this.gridLines = !this.gridLines;
+    };
+
     MCTPlotController.prototype.getXKeyOption = function (key) {
         return this.$scope.xKeyOptions.find(option => option.key === key);
     };
diff --git a/src/plugins/plot/src/telemetry/PlotController.js b/src/plugins/plot/src/telemetry/PlotController.js
index 1853b0d157..2a08730121 100644
--- a/src/plugins/plot/src/telemetry/PlotController.js
+++ b/src/plugins/plot/src/telemetry/PlotController.js
@@ -60,6 +60,7 @@ define([
         this.objectService = objectService;
         this.exportImageService = exportImageService;
         this.cursorGuide = false;
+        this.gridLines = true;
 
         $scope.pending = 0;
 
@@ -331,6 +332,11 @@ define([
         this.$scope.$broadcast('cursorguide', $event);
     };
 
+    PlotController.prototype.toggleGridLines = function ($event) {
+        this.gridLines = !this.gridLines;
+        this.$scope.$broadcast('toggleGridLines', $event);
+    };
+
     return PlotController;
 
 });
diff --git a/src/plugins/plot/src/telemetry/StackedPlotController.js b/src/plugins/plot/src/telemetry/StackedPlotController.js
index 1259113b4d..c45e2417e4 100644
--- a/src/plugins/plot/src/telemetry/StackedPlotController.js
+++ b/src/plugins/plot/src/telemetry/StackedPlotController.js
@@ -160,5 +160,10 @@ define([], function () {
         this.$scope.$broadcast('cursorguide', $event);
     };
 
+    StackedPlotController.prototype.toggleGridLines = function ($event) {
+        this.gridLines = !this.gridLines;
+        this.$scope.$broadcast('toggleGridLines', $event);
+    };
+
     return StackedPlotController;
 });