Active labeling is hidden #164 (#167)

* refactor onclikc in graph renderer

* add rendering after labeling

* remove empty setTimeout

src/panel/graph_panel/graph_ctrl.ts

@@ -288,7 +288,7 @@ class GraphCtrl extends MetricsPanelCtrl {
     var $graphElem = $(elem[0]).find('#graphPanel');
     var $legendElem = $(elem[0]).find('#graphLegend');
     this._graphRenderer = new GraphRenderer(
-      $graphElem, this.timeSrv, this.popoverSrv, this.contextSrv, this.$scope
+      $graphElem, this.timeSrv, this.contextSrv, this.$scope
     );
     this._graphLegend = new GraphLegend($legendElem, this.popoverSrv, this.$scope);
 

src/panel/graph_panel/graph_renderer.ts

@@ -52,12 +52,11 @@ export class GraphRenderer {
   private $elem: JQuery<HTMLElement>;
   // private annotations: any[];
   private contextSrv: any;
-  private popoverSrv: any;
   private scope: any;
   private timeSrv: any;
   private _graphMousePosition: any;
 
-  constructor ($elem: JQuery<HTMLElement>, timeSrv, popoverSrv, contextSrv, scope) {
+  constructor ($elem: JQuery<HTMLElement>, timeSrv, contextSrv, scope) {
 
     var self = this;
     this.$elem = $elem;
@@ -66,7 +65,6 @@ export class GraphRenderer {
     this.panel = this.ctrl.panel;
 
     this.timeSrv = timeSrv;
-    this.popoverSrv = popoverSrv;
     this.contextSrv = contextSrv;
     this.scope = scope;
 
@@ -89,7 +87,6 @@ export class GraphRenderer {
 
     // panel events
     this.ctrl.events.on('panel-teardown', () => {
-
       if (this.plot) {
         this.plot.destroy();
         this.plot = null;
@@ -100,7 +97,42 @@ export class GraphRenderer {
     appEvents.on('graph-hover', this._onGraphHover.bind(this), scope);
     appEvents.on('graph-hover-clear', this._onGraphHoverClear.bind(this), scope);
 
-    $elem.bind('plotselected', (event, selectionEvent) => {
+    $elem.bind('plotselected', this._onPlotSelected.bind(this));
+    $elem.bind('plotclick', this._onPlotClick.bind(this));
+
+    $elem.mouseleave(() => {
+      if (this.panel.tooltip.shared) {
+        var plot = $elem.data().plot;
+        if (plot) {
+          this.tooltip.clear(plot);
+        }
+      }
+      appEvents.emit('graph-hover-clear');
+    });
+
+    $elem.bind("plothover", (event, pos, item) => {
+      self.tooltip.show(pos, item);
+      pos.panelRelY = (pos.pageY - $elem.offset().top) / $elem.height();
+      self._graphMousePosition = this.plot.p2c(pos);
+      appEvents.emit('graph-hover', { pos: pos, panel: this.panel });
+    });
+
+    $elem.bind("plotclick", (event, pos, item) => {
+      appEvents.emit('graph-click', { pos: pos, panel: this.panel, item: item });
+    });
+
+    $elem.mousedown(e => {
+      this._analyticController.graphLocked = true;
+      this._chooseSelectionColor(e);
+    });
+
+    $(document).mouseup(e => {
+      this._analyticController.graphLocked = false;
+    })
+
+  }
+
+  private _onPlotSelected(event, selectionEvent) {
     if (this.panel.xaxis.mode !== 'time') {
       // Skip if panel in histogram or series mode
       this.plot.clearSelection();
@@ -122,25 +154,26 @@ export class GraphRenderer {
       } else {
         this._analyticController.addLabelSegment(segment);
       }
+      this.renderPanel();
       return;
     }
 
-      if ((selectionEvent.ctrlKey || selectionEvent.metaKey) && contextSrv.isEditor) {
+    if ((selectionEvent.ctrlKey || selectionEvent.metaKey) && this.contextSrv.isEditor) {
       // Add annotation
-        setTimeout(() => {
+      // setTimeout(() => {
       //   this.eventManager.updateTime(selectionEvent.xaxis);
-        }, 100);
+      // }, 100);
     } else {
-        scope.$apply(function() {
+      this.scope.$apply(function() {
-          timeSrv.setTime({
+        this.timeSrv.setTime({
           from: moment.utc(selectionEvent.xaxis.from),
           to: moment.utc(selectionEvent.xaxis.to),
         });
       });
     }
-    });
+  }
 
-    $elem.bind('plotclick', (event, flotEvent, item) => {
+  private _onPlotClick(event, flotEvent, item) {
     if (this.panel.xaxis.mode !== 'time') {
       // Skip if panel in histogram or series mode
       return;
@@ -150,47 +183,15 @@ export class GraphRenderer {
       return;
     }
 
-      if ((flotEvent.ctrlKey || flotEvent.metaKey) && contextSrv.isEditor) {
+    if ((flotEvent.ctrlKey || flotEvent.metaKey) && this.contextSrv.isEditor) {
       // Skip if range selected (added in "plotselected" event handler)
-        let isRangeSelection = flotEvent.x !== flotEvent.x1;
+      // let isRangeSelection = flotEvent.x !== flotEvent.x1;
-        if (!isRangeSelection) {
+      // if (!isRangeSelection) {
-          setTimeout(() => {
+      //   setTimeout(() => {
       //     this.eventManager.updateTime({ from: flotEvent.x, to: null });
-          }, 100);
+      //   }, 100);
-        }
+      // }
     }
-    });
-
-    $elem.mouseleave(() => {
-      if (this.panel.tooltip.shared) {
-        var plot = $elem.data().plot;
-        if (plot) {
-          this.tooltip.clear(plot);
-        }
-      }
-      appEvents.emit('graph-hover-clear');
-    });
-
-    $elem.bind("plothover", (event, pos, item) => {
-      self.tooltip.show(pos, item);
-      pos.panelRelY = (pos.pageY - $elem.offset().top) / $elem.height();
-      self._graphMousePosition = this.plot.p2c(pos);
-      appEvents.emit('graph-hover', { pos: pos, panel: this.panel });
-    });
-
-    $elem.bind("plotclick", (event, pos, item) => {
-      appEvents.emit('graph-click', { pos: pos, panel: this.panel, item: item });
-    });
-
-    $elem.mousedown(e => {
-      this._analyticController.graphLocked = true;
-      this._chooseSelectionColor(e);
-    });
-
-    $(document).mouseup(e => {
-      this._analyticController.graphLocked = false;
-    })
-
   }
 
   public render(renderData) {