extract plot detail view into its own component

pdb-js/src/app/plot-view/plot-view.component.html

@@ -1,21 +1,42 @@
 <div
-  *ngIf="imageUrl"
-  [style.cursor]="imageCursor"
-  (mousedown)="dragStart($event)"
-  (mousemove)="dragging($event)"
-  (mouseup)="dragStop($event)"
-  (mouseout)="dragAbort($event)"
-  (wheel)="zoomByScroll($event)">
-  <img
+  *ngIf="imageUrl">
+  <div 
+    *ngIf="!showStats"
+    [style.cursor]="imageCursor"
+    (mousedown)="dragStart($event)"
+    (mousemove)="dragging($event)"
+    (mouseup)="dragStop($event)"
+    (mouseout)="dragAbort($event)"
+    (wheel)="zoomByScroll($event)">
+    <img
     id="result-image"
     src="{{imageUrl}}"
-     />
-  <div 
-     id="zoom-in-slider"
-     [style.display]="zoomInSliderStyleDisplay"
-     [style.top]="zoomInSliderStyleTopMargin"
-     [style.bottom]="zoomInSliderStyleBottomMargin"
-     [style.left]="zoomInSliderStyleLeft"
-     [style.width]="zoomInSliderStyleWidth"
-  ></div>
+    />
+    <div class="top-right">
+      <img 
+        id="plot-view-info"
+        class="icon-small clickable"
+        (click)="showDetails()"
+        src="assets/img/exclamation-round.svg"
+        title="show details" />
+    </div>
+    <div 
+       id="zoom-in-slider"
+       [style.display]="zoomInSliderStyleDisplay"
+       [style.top]="zoomInSliderStyleTopMargin"
+       [style.bottom]="zoomInSliderStyleBottomMargin"
+       [style.left]="zoomInSliderStyleLeft"
+       [style.width]="zoomInSliderStyleWidth"
+    ></div>
+  </div>
+  <div *ngIf="showStats" class="plot-view-overlay">
+    <pdb-plot-details [stats]="stats"></pdb-plot-details>
+    <div class="top-right">
+      <img 
+        class="icon-small clickable"
+        (click)="hideDetails()"
+        src="assets/img/close.svg"
+        title="close" />
+    </div>
+  </div>
 </div>

pdb-js/src/app/plot-view/plot-view.component.scss

@@ -8,4 +8,15 @@ img {
   position: absolute;
   background: #ccc;
   opacity:0.4;
+}
+
+
+.plot-view-overlay {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  right: 5px;
+  bottom: 5px;
+  background-color: white;
+  box-shadow: 5px 5px 10px 0px #e0e0e0;
 }

pdb-js/src/app/plot-view/plot-view.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit, Output, EventEmitter } from '@angular/core';
-import { DataType, AxesTypes  } from '../plot.service';
+import { DataType, AxesTypes, PlotResponseStats  } from '../plot.service';
 
 @Component({
   selector: 'pdb-plot-view',
@@ -16,6 +16,7 @@ export class PlotViewComponent implements OnInit {
 
 
   imageUrl : string;
+  stats : PlotResponseStats;
   
   axes: AxesTypes;
   
@@ -38,6 +39,8 @@ export class PlotViewComponent implements OnInit {
   zoomInSliderStyleLeft = "0";
   zoomInSliderStyleWidth = "0";
 
+  showStats = false; 
+
   constructor() { }
 
   ngOnInit() {
@@ -175,6 +178,14 @@ export class PlotViewComponent implements OnInit {
       this.zoomWithDateAnchor.emit(new DateAnchor(cursorPercentOfDateRange, zoomFactor));
     }
   }
+
+  showDetails() {
+    this.showStats = true;
+  }
+
+  hideDetails() {
+    this.showStats = false;
+  }
 }
 
 export class SelectionRange {