Fixes for deleted segments (#185)

- Change deleted segment color to #00f0ff #181
- Always show deleted segments #183
- Labeled segment is created on deletion #184

src/panel/graph_panel/controllers/analytic_controller.ts

@@ -21,12 +21,13 @@ import { Emitter } from 'grafana/app/core/utils/emitter';
 import _ from 'lodash';
 import * as tinycolor from 'tinycolor2';
 
-export const REGION_FILL_ALPHA = 0.7;
+export const REGION_FILL_ALPHA = 0.5;
-export const REGION_STROKE_ALPHA = 0.9;
+export const REGION_STROKE_ALPHA = 0.8;
+const LABELING_MODE_ALPHA = 0.7;
 export const REGION_DELETE_COLOR_LIGHT = '#d1d1d1';
 export const REGION_DELETE_COLOR_DARK = 'white';
 const LABELED_SEGMENT_BORDER_COLOR = 'black';
-const DELETED_SEGMENT_FILL_COLOR = 'black';
+const DELETED_SEGMENT_FILL_COLOR = '#00f0ff';
 const DELETED_SEGMENT_BORDER_COLOR = 'black';
 
 
@@ -185,8 +186,8 @@ export class AnalyticController {
     return this.labelingUnit.deleteMode;
   }
 
-  addLabelSegment(segment: Segment, deleted?: boolean) {
+  addLabelSegment(segment: Segment, deleted = false) {
-    var asegment = this.labelingUnit.addLabeledSegment(segment, deleted);
+    const asegment = this.labelingUnit.addLabeledSegment(segment, deleted);
     this._labelingDataAddedSegments.addSegment(asegment);
   }
 
@@ -253,58 +254,50 @@ export class AnalyticController {
   }
 
   // TODO: move to renderer
-  updateFlotEvents(isEditMode, options) {
+  updateFlotEvents(isEditMode: boolean, options: any) {
     if(options.grid.markings === undefined) {
       options.markings = [];
     }
 
     for(var i = 0; i < this.analyticUnits.length; i++) {
-      var analyticUnit = this.analyticUnits[i];
+      const analyticUnit = this.analyticUnits[i];
-      var borderColor = addAlphaToRGB(analyticUnit.color, REGION_STROKE_ALPHA);
-      var fillColor = addAlphaToRGB(analyticUnit.color, REGION_FILL_ALPHA);
-      var segments = analyticUnit.segments.getSegments();
       if(!analyticUnit.visible) {
         continue;
       }
-      if(isEditMode && this.labelingMode) {
-        if(analyticUnit.selected) {
-          borderColor = addAlphaToRGB(borderColor, 0.7);
-          fillColor = addAlphaToRGB(borderColor, 0.7);
-        } else {
-          continue;
-        }
-      }
-
-      var rangeDist = +options.xaxis.max - +options.xaxis.min;
 
+      let borderColor = addAlphaToRGB(analyticUnit.color, REGION_STROKE_ALPHA);
+      let fillColor = addAlphaToRGB(analyticUnit.color, REGION_FILL_ALPHA);
       let labeledSegmentBorderColor = tinycolor(LABELED_SEGMENT_BORDER_COLOR).toRgbString();
       labeledSegmentBorderColor = addAlphaToRGB(labeledSegmentBorderColor, REGION_STROKE_ALPHA);
       let deletedSegmentFillColor = tinycolor(DELETED_SEGMENT_FILL_COLOR).toRgbString();
-      deletedSegmentFillColor = addAlphaToRGB(deletedSegmentFillColor, REGION_STROKE_ALPHA);
+      deletedSegmentFillColor = addAlphaToRGB(deletedSegmentFillColor, REGION_FILL_ALPHA);
       let deletedSegmentBorderColor = tinycolor(DELETED_SEGMENT_BORDER_COLOR).toRgbString();
       deletedSegmentBorderColor = addAlphaToRGB(deletedSegmentBorderColor, REGION_STROKE_ALPHA);
 
+      if(isEditMode && this.labelingMode && analyticUnit.selected) {
+        borderColor = addAlphaToRGB(borderColor, LABELING_MODE_ALPHA);
+        fillColor = addAlphaToRGB(fillColor, LABELING_MODE_ALPHA);
+        labeledSegmentBorderColor = addAlphaToRGB(labeledSegmentBorderColor, LABELING_MODE_ALPHA);
+        deletedSegmentFillColor = addAlphaToRGB(deletedSegmentFillColor, LABELING_MODE_ALPHA);
+        deletedSegmentBorderColor = addAlphaToRGB(deletedSegmentBorderColor, LABELING_MODE_ALPHA);
+      }
+
+      const segments = analyticUnit.segments.getSegments();
+      const rangeDist = +options.xaxis.max - +options.xaxis.min;
+
       segments.forEach(s => {
-        let segmentBorderColor;
+        let segmentBorderColor = borderColor;
         let segmentFillColor = fillColor;
 
-        if(this.labelingDeleteMode) {
+        if(s.deleted) {
-          if(s.deleted) {
+          segmentBorderColor = deletedSegmentBorderColor;
-            segmentBorderColor = deletedSegmentBorderColor;
+          segmentFillColor = deletedSegmentFillColor;
-            segmentFillColor = deletedSegmentFillColor;
-          }
         } else {
-          if(s.deleted) {
+          if(s.labeled) {
-            return;
+            segmentBorderColor = labeledSegmentBorderColor;
           }
         }
 
-        if(s.labeled) {
-          segmentBorderColor = labeledSegmentBorderColor;
-        } else {
-          segmentBorderColor = borderColor;
-        }
-
         var expanded = s.expandDist(rangeDist, 0.01);
         options.grid.markings.push({
           xaxis: { from: expanded.from, to: expanded.to },
@@ -324,10 +317,11 @@ export class AnalyticController {
   }
 
   deleteLabelingAnalyticUnitSegmentsInRange(from: number, to: number) {
-    var allRemovedSegs = this.labelingUnit.removeSegmentsInRange(from, to);
+    let allRemovedSegs = this.labelingUnit.removeSegmentsInRange(from, to);
     allRemovedSegs.forEach(s => {
       if(!this._labelingDataAddedSegments.has(s.id)) {
         this._labelingDataDeletedSegments.addSegment(s);
+        this.labelingUnit.addLabeledSegment(s, true);
       }
     });
     this._labelingDataAddedSegments.removeInRange(from, to);

src/panel/graph_panel/graph_renderer.ts

@@ -150,10 +150,9 @@ export class GraphRenderer {
         this._analyticController.deleteLabelingAnalyticUnitSegmentsInRange(
           segment.from, segment.to
         );
+      } else {
+        this._analyticController.addLabelSegment(segment);
       }
-      this._analyticController.addLabelSegment(
-        segment, this._analyticController.labelingDeleteMode
-      );
 
       this.renderPanel();
       return;

src/panel/graph_panel/graph_tooltip.ts

@@ -200,12 +200,8 @@ export class GraphTooltip {
       var from = this.dashboard.formatDate(s.segment.from, 'HH:mm:ss.SSS');
       var to = this.dashboard.formatDate(s.segment.to, 'HH:mm:ss.SSS');
 
-      if(s.segment.deleted && !s.analyticUnit.deleteMode) {
-        return;
-      }
-
       let icon;
-      if (s.segment.labeled) {
+      if(s.segment.labeled) {
         icon = 'fa-thumb-tack';
       } else if (s.segment.deleted) {
         icon = 'fa-trash';

src/panel/graph_panel/models/analytic_unit.ts

@@ -81,7 +81,7 @@ export class AnalyticUnit {
   }
 
   addLabeledSegment(segment: Segment, deleted: boolean): AnalyticSegment {
-    var asegment = new AnalyticSegment(true, segment.id, segment.from, segment.to, deleted);
+    const asegment = new AnalyticSegment(!deleted, segment.id, segment.from, segment.to, deleted);
     this._segmentSet.addSegment(asegment);
     return asegment;
   }