commit 83d6c155ac08479ed02cf39c120fd19eea646cf7
author Austin Schuh <austin.linux@gmail.com> Mon Jul 18 18:38:57 2022 -0700
committer Austin Schuh <austin.linux@gmail.com> Tue Jul 19 12:22:17 2022 -0700
tree 29643084240fd45c741d567521f0b9ddd7568f94
parent fcd56940687ed2a9ee5d3c0fb8e2e239469c88ac

Add support for hiding and showing lines

If you click on the line icon, it will now hide or show the line.  Very
handy for figuring out what is happening.

Change-Id: I752f15ed9bb4928cea0704ece685054e7fc661da
Signed-off-by: Austin Schuh <austin.linux@gmail.com>

aos/network/www/plotter.ts

diff --git a/aos/network/www/plotter.ts b/aos/network/www/plotter.ts
index f9271bb..89b360c 100644
--- a/aos/network/www/plotter.ts
+++ b/aos/network/www/plotter.ts
@@ -105,6 +105,7 @@
   private colorLocation: WebGLUniformLocation | null;
   private pointSizeLocation: WebGLUniformLocation | null;
   private _label: string|null = null;
+  private _hidden: boolean = false;
   constructor(
       private readonly ctx: WebGLRenderingContext,
       private readonly program: WebGLProgram,
@@ -190,6 +191,15 @@
     }
   }
 
+  hidden(): boolean {
+    return this._hidden;
+  }
+
+  setHidden(hidden: boolean) {
+    this._hasUpdate = true;
+    this._hidden = hidden;
+  }
+
   getPoints(): Point[] {
     return this.points;
   }
@@ -220,6 +230,10 @@
       return;
     }
 
+    if (this._hidden) {
+      return;
+    }
+
     this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.buffer);
     // Note: if this is generating errors associated with the buffer size,
     // confirm that this.points really is a Float32Array.
@@ -297,7 +311,9 @@
 export class Legend {
   // Location, in pixels, of the legend in the text canvas.
   private location: number[] = [0, 0];
-  constructor(private lines: Line[], private legend: HTMLDivElement) {
+  constructor(
+      private plot: Plot, private lines: Line[],
+      private legend: HTMLDivElement) {
     this.setPosition([80, 30]);
   }
 
@@ -396,6 +412,17 @@
             pointSize);
       }
 
+      c.addEventListener('click', (e) => {
+        if (!line.hidden()) {
+          l.classList.add('aos_legend_line_hidden');
+        } else {
+          l.classList.remove('aos_legend_line_hidden');
+        }
+
+        line.setHidden(!line.hidden());
+        this.plot.draw();
+      });
+
       l.prepend(c);
     }
   }
@@ -934,7 +961,7 @@
     const textCtx = this.textCanvas.getContext("2d");
     this.axisLabels =
         new AxisLabels(textCtx, this.drawer, this.axisLabelBuffer);
-    this.legend = new Legend(this.drawer.getLines(), this.legendDiv);
+    this.legend = new Legend(this, this.drawer.getLines(), this.legendDiv);
 
     this.zoomRectangle = this.getDrawer().addLine(false);
     this.zoomRectangle.setColor(Colors.WHITE);