Fixes for deleted segments

src/panel/graph_panel/controllers/analytic_controller.ts

@@ -26,7 +26,7 @@ export const REGION_STROKE_ALPHA = 0.9;
 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,7 +185,7 @@ export class AnalyticController {
     return this.labelingUnit.deleteMode;
   }
 
-  addLabelSegment(segment: Segment, deleted?: boolean) {
+  addLabelSegment(segment: Segment, deleted = false) {
     var asegment = this.labelingUnit.addLabeledSegment(segment, deleted);
     this._labelingDataAddedSegments.addSegment(asegment);
   }
@@ -288,23 +288,17 @@ export class AnalyticController {
         let segmentBorderColor;
         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;
+          } else {
+            segmentBorderColor = borderColor;
           }
         }
 
-        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 +318,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);
+    var asegment = new AnalyticSegment(!deleted, segment.id, segment.from, segment.to, deleted);
     this._segmentSet.addSegment(asegment);
     return asegment;
   }