From 483039aef09d57ca3d77834050972bbc4d7f6246 Mon Sep 17 00:00:00 2001 From: rozetko Date: Mon, 25 Feb 2019 01:06:55 +0300 Subject: [PATCH 1/7] Deleted segments --- .../graph_panel/controllers/analytic_controller.ts | 7 +++---- src/panel/graph_panel/models/analytic_unit.ts | 3 --- src/panel/graph_panel/services/analytic_service.ts | 12 +++++++----- 3 files changed, 10 insertions(+), 12 deletions(-) diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts index d6311df..3469652 100644 --- a/src/panel/graph_panel/controllers/analytic_controller.ts +++ b/src/panel/graph_panel/controllers/analytic_controller.ts @@ -162,7 +162,7 @@ export class AnalyticController { this.labelingUnit.segments.remove(s.id); }); this._labelingDataDeletedSegments.getSegments().forEach(s => { - s.deleted = false; + this.labelingUnit.segments.addSegment(s); }); this.dropLabeling(); } @@ -298,7 +298,7 @@ export class AnalyticController { } } - var expanded = s.expandDist(rangeDist, 0.01); + const expanded = s.expandDist(rangeDist, 0.01); options.grid.markings.push({ xaxis: { from: expanded.from, to: expanded.to }, color: segmentFillColor @@ -317,11 +317,10 @@ export class AnalyticController { } deleteLabelingAnalyticUnitSegmentsInRange(from: number, to: number) { - let allRemovedSegs = this.labelingUnit.removeSegmentsInRange(from, to); + const 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); diff --git a/src/panel/graph_panel/models/analytic_unit.ts b/src/panel/graph_panel/models/analytic_unit.ts index 3a7ea50..2841548 100644 --- a/src/panel/graph_panel/models/analytic_unit.ts +++ b/src/panel/graph_panel/models/analytic_unit.ts @@ -88,9 +88,6 @@ export class AnalyticUnit { removeSegmentsInRange(from: number, to: number): AnalyticSegment[] { let deletedSegments = this._segmentSet.removeInRange(from, to); - deletedSegments.forEach(s => { - s.deleted = true; - }); return deletedSegments; } diff --git a/src/panel/graph_panel/services/analytic_service.ts b/src/panel/graph_panel/services/analytic_service.ts index cb4f6e3..01663d7 100644 --- a/src/panel/graph_panel/services/analytic_service.ts +++ b/src/panel/graph_panel/services/analytic_service.ts @@ -66,20 +66,22 @@ export class AnalyticService { } async updateSegments( - id: AnalyticUnitId, addedSegments: SegmentsSet, removedSegments: SegmentsSet + id: AnalyticUnitId, addedSegments: SegmentsSet, removedSegments: SegmentsSet ): Promise { - const getJSONs = (segs: SegmentsSet) => segs.getSegments().map(segment => ({ + const getJSONs = (segs: SegmentsSet) => segs.getSegments().map(segment => ({ from: segment.from, - to: segment.to + to: segment.to, + labeled: segment.labeled, + deleted: segment.deleted })); - var payload = { + const payload = { id, addedSegments: getJSONs(addedSegments), removedSegments: removedSegments.getSegments().map(s => s.id) }; - var data = await this.patch('/segments', payload); + const data = await this.patch('/segments', payload); if(data.addedIds === undefined) { throw new Error('Server didn`t send addedIds'); } From 35ce72c6a6bd7d5f3673b2f9b451a9a6b6f0d890 Mon Sep 17 00:00:00 2001 From: rozetko Date: Mon, 25 Feb 2019 01:06:59 +0300 Subject: [PATCH 2/7] Codestyle fixes --- src/panel/graph_panel/graph_ctrl.ts | 1 - src/panel/graph_panel/graph_renderer.ts | 7 ++++--- src/panel/graph_panel/models/segment_array.ts | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/panel/graph_panel/graph_ctrl.ts b/src/panel/graph_panel/graph_ctrl.ts index 745b45f..ebbc3cc 100644 --- a/src/panel/graph_panel/graph_ctrl.ts +++ b/src/panel/graph_panel/graph_ctrl.ts @@ -35,7 +35,6 @@ class GraphCtrl extends MetricsPanelCtrl { private _datasourceRequest: DatasourceRequest; private _datasources: any; - private _panelPath: any; private _renderError: boolean = false; // annotationsPromise: any; diff --git a/src/panel/graph_panel/graph_renderer.ts b/src/panel/graph_panel/graph_renderer.ts index 0a419d8..2f474aa 100644 --- a/src/panel/graph_panel/graph_renderer.ts +++ b/src/panel/graph_panel/graph_renderer.ts @@ -140,8 +140,8 @@ export class GraphRenderer { if(this._isHasticEvent(selectionEvent)) { this.plot.clearSelection(); - var id = this._analyticController.getNewTempSegmentId(); - var segment = new Segment( + const id = this._analyticController.getNewTempSegmentId(); + const segment = new Segment( id, Math.round(selectionEvent.xaxis.from), Math.round(selectionEvent.xaxis.to) @@ -150,8 +150,9 @@ export class GraphRenderer { this._analyticController.deleteLabelingAnalyticUnitSegmentsInRange( segment.from, segment.to ); + this._analyticController.addLabelSegment(segment, true); } else { - this._analyticController.addLabelSegment(segment); + this._analyticController.addLabelSegment(segment, false); } this.renderPanel(); diff --git a/src/panel/graph_panel/models/segment_array.ts b/src/panel/graph_panel/models/segment_array.ts index a07ffa4..5038eeb 100644 --- a/src/panel/graph_panel/models/segment_array.ts +++ b/src/panel/graph_panel/models/segment_array.ts @@ -47,7 +47,7 @@ export class SegmentArray implements SegmentsSet { findSegments(point: number, rangeDist: number): T[] { return this._segments.filter(s => { - var expanded = s.expandDist(rangeDist, 0.01); + const expanded = s.expandDist(rangeDist, 0.01); return (expanded.from <= point) && (point <= expanded.to); }); } From 256ba3796911e4c11a00246976bfad4432e71683 Mon Sep 17 00:00:00 2001 From: rozetko Date: Mon, 25 Feb 2019 01:08:18 +0300 Subject: [PATCH 3/7] _labelingDataDeletedSegments -> _labelingDataRemovedSegments --- .../controllers/analytic_controller.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts index 3469652..6c2b0a9 100644 --- a/src/panel/graph_panel/controllers/analytic_controller.ts +++ b/src/panel/graph_panel/controllers/analytic_controller.ts @@ -37,7 +37,7 @@ export class AnalyticController { private _selectedAnalyticUnitId: AnalyticUnitId = null; private _labelingDataAddedSegments: SegmentsSet; - private _labelingDataDeletedSegments: SegmentsSet; + private _labelingDataRemovedSegments: SegmentsSet; private _newAnalyticUnit: AnalyticUnit = null; private _creatingNewAnalyticType: boolean = false; private _savingNewAnalyticUnit: boolean = false; @@ -54,7 +54,7 @@ export class AnalyticController { _panelObject.analyticUnits = _panelObject.anomalyTypes || []; } this._labelingDataAddedSegments = new SegmentArray(); - this._labelingDataDeletedSegments = new SegmentArray(); + this._labelingDataRemovedSegments = new SegmentArray(); this._analyticUnitsSet = new AnalyticUnitsSet(this._panelObject.analyticUnits); this._thresholds = []; this.updateThresholds(); @@ -161,7 +161,7 @@ export class AnalyticController { this._labelingDataAddedSegments.getSegments().forEach(s => { this.labelingUnit.segments.remove(s.id); }); - this._labelingDataDeletedSegments.getSegments().forEach(s => { + this._labelingDataRemovedSegments.getSegments().forEach(s => { this.labelingUnit.segments.addSegment(s); }); this.dropLabeling(); @@ -169,7 +169,7 @@ export class AnalyticController { dropLabeling() { this._labelingDataAddedSegments.clear(); - this._labelingDataDeletedSegments.clear(); + this._labelingDataRemovedSegments.clear(); this.labelingUnit.selected = false; this._selectedAnalyticUnitId = null; this._tempIdCounted = -1; @@ -228,7 +228,7 @@ export class AnalyticController { var allSegmentsSet = new SegmentArray(allSegmentsList); if(analyticUnit.selected) { this._labelingDataAddedSegments.getSegments().forEach(s => allSegmentsSet.addSegment(s)); - this._labelingDataDeletedSegments.getSegments().forEach(s => allSegmentsSet.remove(s.id)); + this._labelingDataRemovedSegments.getSegments().forEach(s => allSegmentsSet.remove(s.id)); } analyticUnit.segments = allSegmentsSet; } @@ -241,7 +241,7 @@ export class AnalyticController { if( this._labelingDataAddedSegments.length === 0 && - this._labelingDataDeletedSegments.length === 0 + this._labelingDataRemovedSegments.length === 0 ) { return []; } @@ -249,7 +249,7 @@ export class AnalyticController { await this._analyticService.updateMetric(unit.id, this._currentMetric, this._currentDatasource); return this._analyticService.updateSegments( - unit.id, this._labelingDataAddedSegments, this._labelingDataDeletedSegments + unit.id, this._labelingDataAddedSegments, this._labelingDataRemovedSegments ); } @@ -320,7 +320,7 @@ export class AnalyticController { const allRemovedSegs = this.labelingUnit.removeSegmentsInRange(from, to); allRemovedSegs.forEach(s => { if(!this._labelingDataAddedSegments.has(s.id)) { - this._labelingDataDeletedSegments.addSegment(s); + this._labelingDataRemovedSegments.addSegment(s); } }); this._labelingDataAddedSegments.removeInRange(from, to); From c0b44f587ebadf652bbe073e9cb9401763ecd00c Mon Sep 17 00:00:00 2001 From: rozetko Date: Mon, 25 Feb 2019 02:07:39 +0300 Subject: [PATCH 4/7] Choose deleted segment color #182 --- src/panel/graph_panel/colors.ts | 8 +++- .../controllers/analytic_controller.ts | 43 ++++++++++--------- src/panel/graph_panel/graph_ctrl.ts | 4 +- src/panel/graph_panel/graph_renderer.ts | 9 ++-- src/panel/graph_panel/graph_tooltip.ts | 2 +- src/panel/graph_panel/models/analytic_unit.ts | 10 +++-- .../graph_panel/partials/tab_analytics.html | 14 ++++-- 7 files changed, 57 insertions(+), 33 deletions(-) diff --git a/src/panel/graph_panel/colors.ts b/src/panel/graph_panel/colors.ts index 33b9f9f..72886fe 100644 --- a/src/panel/graph_panel/colors.ts +++ b/src/panel/graph_panel/colors.ts @@ -76,6 +76,12 @@ export const ANALYTIC_UNIT_COLORS = [ '#f8c171', ]; +export const REGION_DELETE_COLOR_LIGHT = '#d1d1d1'; +export const REGION_DELETE_COLOR_DARK = 'white'; +export const LABELED_SEGMENT_BORDER_COLOR = 'black'; +export const DELETED_SEGMENT_FILL_COLOR = '#00f0ff'; +export const DELETED_SEGMENT_BORDER_COLOR = 'black'; + export function hexToHsl(color) { return tinycolor(color).toHsl(); } @@ -85,4 +91,4 @@ export function hslToHex(color) { } -export default colors; \ No newline at end of file +export default colors; diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts index 6c2b0a9..abcbbe7 100644 --- a/src/panel/graph_panel/controllers/analytic_controller.ts +++ b/src/panel/graph_panel/controllers/analytic_controller.ts @@ -14,7 +14,12 @@ import { SegmentArray } from '../models/segment_array'; import { ServerInfo } from '../models/info'; import { Threshold, Condition } from '../models/threshold'; -import { ANALYTIC_UNIT_COLORS } from '../colors'; +import { + ANALYTIC_UNIT_COLORS, + LABELED_SEGMENT_BORDER_COLOR, + DELETED_SEGMENT_FILL_COLOR, + DELETED_SEGMENT_BORDER_COLOR +} from '../colors'; import { Emitter } from 'grafana/app/core/utils/emitter'; @@ -23,13 +28,7 @@ import * as tinycolor from 'tinycolor2'; export const REGION_FILL_ALPHA = 0.5; 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 = '#00f0ff'; -const DELETED_SEGMENT_BORDER_COLOR = 'black'; - +export const LABELING_MODE_ALPHA = 0.7; export class AnalyticController { @@ -87,11 +86,11 @@ export class AnalyticController { this._creatingNewAnalyticType = true; this._savingNewAnalyticUnit = false; if (this.analyticUnits.length === 0) { - this._newAnalyticUnit.color = ANALYTIC_UNIT_COLORS[0]; + this._newAnalyticUnit.labeledColor = ANALYTIC_UNIT_COLORS[0]; } else { - let colorIndex = ANALYTIC_UNIT_COLORS.indexOf(_.last(this.analyticUnits).color) + 1; + let colorIndex = ANALYTIC_UNIT_COLORS.indexOf(_.last(this.analyticUnits).labeledColor) + 1; colorIndex %= ANALYTIC_UNIT_COLORS.length; - this._newAnalyticUnit.color = ANALYTIC_UNIT_COLORS[colorIndex]; + this._newAnalyticUnit.labeledColor = ANALYTIC_UNIT_COLORS[colorIndex]; } } @@ -195,11 +194,15 @@ export class AnalyticController { return this._analyticUnitsSet.items; } - onAnalyticUnitColorChange(id: AnalyticUnitId, value: string) { + onAnalyticUnitColorChange(id: AnalyticUnitId, value: string, deleted: boolean) { if(id === undefined) { throw new Error('id is undefined'); } - this._analyticUnitsSet.byId(id).color = value; + if(deleted) { + this._analyticUnitsSet.byId(id).deletedColor = value; + } else { + this._analyticUnitsSet.byId(id).labeledColor = value; + } } fetchAnalyticUnitsStatuses() { @@ -265,18 +268,18 @@ export class AnalyticController { continue; } - let borderColor = addAlphaToRGB(analyticUnit.color, REGION_STROKE_ALPHA); - let fillColor = addAlphaToRGB(analyticUnit.color, REGION_FILL_ALPHA); + let defaultBorderColor = addAlphaToRGB(analyticUnit.labeledColor, REGION_STROKE_ALPHA); + let defaultFillColor = addAlphaToRGB(analyticUnit.labeledColor, 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(); + let deletedSegmentFillColor = tinycolor(analyticUnit.deletedColor).toRgbString(); 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); + defaultBorderColor = addAlphaToRGB(defaultBorderColor, LABELING_MODE_ALPHA); + defaultFillColor = addAlphaToRGB(defaultFillColor, LABELING_MODE_ALPHA); labeledSegmentBorderColor = addAlphaToRGB(labeledSegmentBorderColor, LABELING_MODE_ALPHA); deletedSegmentFillColor = addAlphaToRGB(deletedSegmentFillColor, LABELING_MODE_ALPHA); deletedSegmentBorderColor = addAlphaToRGB(deletedSegmentBorderColor, LABELING_MODE_ALPHA); @@ -286,8 +289,8 @@ export class AnalyticController { const rangeDist = +options.xaxis.max - +options.xaxis.min; segments.forEach(s => { - let segmentBorderColor = borderColor; - let segmentFillColor = fillColor; + let segmentBorderColor = defaultBorderColor; + let segmentFillColor = defaultFillColor; if(s.deleted) { segmentBorderColor = deletedSegmentBorderColor; diff --git a/src/panel/graph_panel/graph_ctrl.ts b/src/panel/graph_panel/graph_ctrl.ts index ebbc3cc..72ef6ab 100644 --- a/src/panel/graph_panel/graph_ctrl.ts +++ b/src/panel/graph_panel/graph_ctrl.ts @@ -580,11 +580,11 @@ class GraphCtrl extends MetricsPanelCtrl { this.analyticsController.fetchAnalyticUnitName(analyticUnit); } - onColorChange(id: AnalyticUnitId, value: string) { + onColorChange(id: AnalyticUnitId, deleted: boolean, value: string) { if(id === undefined) { throw new Error('id is undefined'); } - this.analyticsController.onAnalyticUnitColorChange(id, value); + this.analyticsController.onAnalyticUnitColorChange(id, value, deleted); this.render(); } diff --git a/src/panel/graph_panel/graph_renderer.ts b/src/panel/graph_panel/graph_renderer.ts index 2f474aa..2a81e58 100644 --- a/src/panel/graph_panel/graph_renderer.ts +++ b/src/panel/graph_panel/graph_renderer.ts @@ -5,10 +5,13 @@ import { convertValuesToHistogram, getSeriesValues } from './histogram'; import { AnalyticController, REGION_FILL_ALPHA, - REGION_STROKE_ALPHA, + REGION_STROKE_ALPHA +} from './controllers/analytic_controller'; + +import { REGION_DELETE_COLOR_LIGHT, REGION_DELETE_COLOR_DARK -} from './controllers/analytic_controller'; +} from './colors'; import { GraphCtrl } from './graph_ctrl'; @@ -345,7 +348,7 @@ export class GraphRenderer { REGION_DELETE_COLOR_LIGHT : REGION_DELETE_COLOR_DARK; } else { - color = this._analyticController.labelingUnit.color; + color = this._analyticController.labelingUnit.labeledColor; } fillAlpha = REGION_FILL_ALPHA; strokeAlpha = REGION_STROKE_ALPHA; diff --git a/src/panel/graph_panel/graph_tooltip.ts b/src/panel/graph_panel/graph_tooltip.ts index 46761eb..97c5f31 100644 --- a/src/panel/graph_panel/graph_tooltip.ts +++ b/src/panel/graph_panel/graph_tooltip.ts @@ -211,7 +211,7 @@ export class GraphTooltip { result += `
- + ${s.analyticUnit.name}:
diff --git a/src/panel/graph_panel/models/analytic_unit.ts b/src/panel/graph_panel/models/analytic_unit.ts index 2841548..8a19cb3 100644 --- a/src/panel/graph_panel/models/analytic_unit.ts +++ b/src/panel/graph_panel/models/analytic_unit.ts @@ -36,7 +36,8 @@ export class AnalyticUnit { } _.defaults(this._panelObject, { name: 'AnalyticUnitName', - color: ANALYTIC_UNIT_COLORS[0], + labeledColor: ANALYTIC_UNIT_COLORS[0], + deletedColor: '#00f0ff', detectorType: 'pattern', type: 'GENERAL', alert: false @@ -58,8 +59,11 @@ export class AnalyticUnit { set confidence(value: number) { this._panelObject.confidence = value; } get confidence(): number { return this._panelObject.confidence; } - set color(value: string) { this._panelObject.color = value; } - get color(): string { return this._panelObject.color; } + set labeledColor(value: string) { this._panelObject.labeledColor = value; } + get labeledColor(): string { return this._panelObject.labeledColor; } + + set deletedColor(value: string) { this._panelObject.deletedColor = value; } + get deletedColor(): string { return this._panelObject.deletedColor; } set alert(value: boolean) { this._panelObject.alert = value; } get alert(): boolean { return this._panelObject.alert; } diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html index 8a4e3f7..066ee09 100644 --- a/src/panel/graph_panel/partials/tab_analytics.html +++ b/src/panel/graph_panel/partials/tab_analytics.html @@ -39,11 +39,19 @@ /> --> - + + + + + + From a9a82d374ba8d06f5cd886226f5dace30ea3bebf Mon Sep 17 00:00:00 2001 From: rozetko Date: Mon, 25 Feb 2019 03:52:37 +0300 Subject: [PATCH 5/7] Unlabeling mode --- src/panel/graph_panel/colors.ts | 9 ++- .../controllers/analytic_controller.ts | 55 +++++++++++-------- src/panel/graph_panel/graph_ctrl.ts | 33 ++++++++--- src/panel/graph_panel/graph_renderer.ts | 44 ++++++++------- src/panel/graph_panel/models/analytic_unit.ts | 13 ++++- .../graph_panel/partials/tab_analytics.html | 15 ++--- .../graph_panel/services/analytic_service.ts | 4 ++ 7 files changed, 109 insertions(+), 64 deletions(-) diff --git a/src/panel/graph_panel/colors.ts b/src/panel/graph_panel/colors.ts index 72886fe..778fea7 100644 --- a/src/panel/graph_panel/colors.ts +++ b/src/panel/graph_panel/colors.ts @@ -76,12 +76,15 @@ export const ANALYTIC_UNIT_COLORS = [ '#f8c171', ]; -export const REGION_DELETE_COLOR_LIGHT = '#d1d1d1'; -export const REGION_DELETE_COLOR_DARK = 'white'; +export const REGION_UNLABEL_COLOR_LIGHT = '#d1d1d1'; +export const REGION_UNLABEL_COLOR_DARK = 'white'; export const LABELED_SEGMENT_BORDER_COLOR = 'black'; -export const DELETED_SEGMENT_FILL_COLOR = '#00f0ff'; export const DELETED_SEGMENT_BORDER_COLOR = 'black'; +export const SEGMENT_FILL_ALPHA = 0.5; +export const SEGMENT_STROKE_ALPHA = 0.8; +export const LABELING_MODE_ALPHA = 0.7; + export function hexToHsl(color) { return tinycolor(color).toHsl(); } diff --git a/src/panel/graph_panel/controllers/analytic_controller.ts b/src/panel/graph_panel/controllers/analytic_controller.ts index abcbbe7..f5c878b 100644 --- a/src/panel/graph_panel/controllers/analytic_controller.ts +++ b/src/panel/graph_panel/controllers/analytic_controller.ts @@ -4,7 +4,8 @@ import { AnalyticService } from '../services/analytic_service' import { AnalyticUnitId, AnalyticUnit, - AnalyticUnitsSet, AnalyticSegment, AnalyticSegmentsSearcher, AnalyticSegmentPair + AnalyticUnitsSet, AnalyticSegment, AnalyticSegmentsSearcher, AnalyticSegmentPair, + LabelingMode } from '../models/analytic_unit'; import { MetricExpanded } from '../models/metric'; import { DatasourceRequest } from '../models/datasource'; @@ -14,11 +15,13 @@ import { SegmentArray } from '../models/segment_array'; import { ServerInfo } from '../models/info'; import { Threshold, Condition } from '../models/threshold'; -import { +import { ANALYTIC_UNIT_COLORS, LABELED_SEGMENT_BORDER_COLOR, - DELETED_SEGMENT_FILL_COLOR, - DELETED_SEGMENT_BORDER_COLOR + DELETED_SEGMENT_BORDER_COLOR, + SEGMENT_FILL_ALPHA, + SEGMENT_STROKE_ALPHA, + LABELING_MODE_ALPHA } from '../colors'; import { Emitter } from 'grafana/app/core/utils/emitter'; @@ -26,10 +29,6 @@ import { Emitter } from 'grafana/app/core/utils/emitter'; import _ from 'lodash'; import * as tinycolor from 'tinycolor2'; -export const REGION_FILL_ALPHA = 0.5; -export const REGION_STROKE_ALPHA = 0.8; -export const LABELING_MODE_ALPHA = 0.7; - export class AnalyticController { private _analyticUnitsSet: AnalyticUnitsSet; @@ -174,15 +173,15 @@ export class AnalyticController { this._tempIdCounted = -1; } - get labelingMode(): boolean { + get inLabelingMode(): boolean { return this._selectedAnalyticUnitId !== null; } - get labelingDeleteMode(): boolean { - if(!this.labelingMode) { - return false; + get labelingMode(): LabelingMode { + if(!this.inLabelingMode) { + return LabelingMode.NOT_IN_LABELING_MODE; } - return this.labelingUnit.deleteMode; + return this.labelingUnit.labelingMode; } addLabelSegment(segment: Segment, deleted = false) { @@ -251,9 +250,13 @@ export class AnalyticController { await this._analyticService.updateMetric(unit.id, this._currentMetric, this._currentDatasource); - return this._analyticService.updateSegments( + const newIds = await this._analyticService.updateSegments( unit.id, this._labelingDataAddedSegments, this._labelingDataRemovedSegments ); + if(unit.labelingMode !== LabelingMode.UNLABELING) { + await this._analyticService.runDetect(unit.id); + } + return newIds; } // TODO: move to renderer @@ -268,16 +271,16 @@ export class AnalyticController { continue; } - let defaultBorderColor = addAlphaToRGB(analyticUnit.labeledColor, REGION_STROKE_ALPHA); - let defaultFillColor = addAlphaToRGB(analyticUnit.labeledColor, REGION_FILL_ALPHA); + let defaultBorderColor = addAlphaToRGB(analyticUnit.labeledColor, SEGMENT_STROKE_ALPHA); + let defaultFillColor = addAlphaToRGB(analyticUnit.labeledColor, SEGMENT_FILL_ALPHA); let labeledSegmentBorderColor = tinycolor(LABELED_SEGMENT_BORDER_COLOR).toRgbString(); - labeledSegmentBorderColor = addAlphaToRGB(labeledSegmentBorderColor, REGION_STROKE_ALPHA); + labeledSegmentBorderColor = addAlphaToRGB(labeledSegmentBorderColor, SEGMENT_STROKE_ALPHA); let deletedSegmentFillColor = tinycolor(analyticUnit.deletedColor).toRgbString(); - deletedSegmentFillColor = addAlphaToRGB(deletedSegmentFillColor, REGION_FILL_ALPHA); + deletedSegmentFillColor = addAlphaToRGB(deletedSegmentFillColor, SEGMENT_FILL_ALPHA); let deletedSegmentBorderColor = tinycolor(DELETED_SEGMENT_BORDER_COLOR).toRgbString(); - deletedSegmentBorderColor = addAlphaToRGB(deletedSegmentBorderColor, REGION_STROKE_ALPHA); + deletedSegmentBorderColor = addAlphaToRGB(deletedSegmentBorderColor, SEGMENT_STROKE_ALPHA); - if(isEditMode && this.labelingMode && analyticUnit.selected) { + if(isEditMode && this.inLabelingMode && analyticUnit.selected) { defaultBorderColor = addAlphaToRGB(defaultBorderColor, LABELING_MODE_ALPHA); defaultFillColor = addAlphaToRGB(defaultFillColor, LABELING_MODE_ALPHA); labeledSegmentBorderColor = addAlphaToRGB(labeledSegmentBorderColor, LABELING_MODE_ALPHA); @@ -329,11 +332,15 @@ export class AnalyticController { this._labelingDataAddedSegments.removeInRange(from, to); } - toggleDeleteMode() { - if(!this.labelingMode) { - throw new Error('Cant enter delete mode is labeling mode disabled'); + toggleLabelingMode(mode: LabelingMode) { + if(!this.inLabelingMode) { + throw new Error(`Can't enter ${mode} mode when labeling mode is disabled`); + } + if(this.labelingUnit.labelingMode === mode) { + this.labelingUnit.labelingMode = LabelingMode.LABELING; + } else { + this.labelingUnit.labelingMode = mode; } - this.labelingUnit.deleteMode = !this.labelingUnit.deleteMode; } async removeAnalyticUnit(id: AnalyticUnitId, silent: boolean = false) { diff --git a/src/panel/graph_panel/graph_ctrl.ts b/src/panel/graph_panel/graph_ctrl.ts index 72ef6ab..0329e15 100644 --- a/src/panel/graph_panel/graph_ctrl.ts +++ b/src/panel/graph_panel/graph_ctrl.ts @@ -7,7 +7,7 @@ import { GraphLegend } from './graph_legend'; import { DataProcessor } from './data_processor'; import { MetricExpanded } from './models/metric'; import { DatasourceRequest } from './models/datasource'; -import { AnalyticUnitId, AnalyticUnit } from './models/analytic_unit'; +import { AnalyticUnitId, AnalyticUnit, LabelingMode } from './models/analytic_unit'; import { AnalyticService } from './services/analytic_service'; import { AnalyticController } from './controllers/analytic_controller'; import { PanelInfo } from './models/info'; @@ -156,19 +156,28 @@ class GraphCtrl extends MetricsPanelCtrl { this.events.on('init-edit-mode', this.onInitEditMode.bind(this)); } - rebindDKey() { + rebindKeys() { + const dKeyCode = 68; + const uKeyCode = 85; + $(document).off('keydown.hasticDKey'); $(document).on('keydown.hasticDKey', (e) => { - // 68 is 'd' key kode - if(e.keyCode === 68) { + if(e.keyCode === dKeyCode) { this.onDKey(); } }); + + $(document).off('keydown.hasticUKey'); + $(document).on('keydown.hasticUKey', (e) => { + if(e.keyCode === uKeyCode) { + this.onUKey(); + } + }); } editPanel() { super.editPanel(); - this.rebindDKey(); + this.rebindKeys(); } async getBackendURL(): Promise { @@ -299,7 +308,7 @@ class GraphCtrl extends MetricsPanelCtrl { onInitEditMode() { - this.rebindDKey(); // a small hask: bind if we open page in edit mode + this.rebindKeys(); // a small hask: bind if we open page in edit mode const partialPath = this.panelPath + '/partials'; this.addEditorTab('Analytics', `${partialPath}/tab_analytics.html`, 2); @@ -623,10 +632,18 @@ class GraphCtrl extends MetricsPanelCtrl { } onDKey() { - if(!this.analyticsController.labelingMode) { + if(!this.analyticsController.inLabelingMode) { + return; + } + this.analyticsController.toggleLabelingMode(LabelingMode.DELETING); + this.refresh(); + } + + onUKey() { + if(!this.analyticsController.inLabelingMode) { return; } - this.analyticsController.toggleDeleteMode(); + this.analyticsController.toggleLabelingMode(LabelingMode.UNLABELING); this.refresh(); } diff --git a/src/panel/graph_panel/graph_renderer.ts b/src/panel/graph_panel/graph_renderer.ts index 2a81e58..9537249 100644 --- a/src/panel/graph_panel/graph_renderer.ts +++ b/src/panel/graph_panel/graph_renderer.ts @@ -1,16 +1,15 @@ import { Segment } from './models/segment'; +import { LabelingMode } from './models/analytic_unit'; import { GraphTooltip } from './graph_tooltip'; import { convertValuesToHistogram, getSeriesValues } from './histogram'; import { - AnalyticController, - REGION_FILL_ALPHA, - REGION_STROKE_ALPHA + AnalyticController } from './controllers/analytic_controller'; import { - REGION_DELETE_COLOR_LIGHT, - REGION_DELETE_COLOR_DARK + REGION_UNLABEL_COLOR_LIGHT, + REGION_UNLABEL_COLOR_DARK } from './colors'; import { GraphCtrl } from './graph_ctrl'; @@ -149,14 +148,20 @@ export class GraphRenderer { Math.round(selectionEvent.xaxis.from), Math.round(selectionEvent.xaxis.to) ); - if(this._analyticController.labelingDeleteMode) { + if(this._analyticController.labelingMode === LabelingMode.DELETING) { this._analyticController.deleteLabelingAnalyticUnitSegmentsInRange( segment.from, segment.to ); this._analyticController.addLabelSegment(segment, true); - } else { + } + if(this._analyticController.labelingMode === LabelingMode.LABELING) { this._analyticController.addLabelSegment(segment, false); } + if(this._analyticController.labelingMode === LabelingMode.UNLABELING) { + this._analyticController.deleteLabelingAnalyticUnitSegmentsInRange( + segment.from, segment.to + ); + } this.renderPanel(); return; @@ -339,21 +344,22 @@ export class GraphRenderer { } private _chooseSelectionColor(e) { - var color = COLOR_SELECTION; - var fillAlpha = 0.4; - var strokeAlpha = 0.4; + let color = COLOR_SELECTION; + if(this._isHasticEvent(e)) { - if(this._analyticController.labelingDeleteMode) { - color = this.contextSrv.user.lightTheme ? - REGION_DELETE_COLOR_LIGHT : - REGION_DELETE_COLOR_DARK; - } else { + if(this._analyticController.labelingMode === LabelingMode.DELETING) { + color = this._analyticController.labelingUnit.deletedColor; + } + if(this._analyticController.labelingMode === LabelingMode.LABELING) { color = this._analyticController.labelingUnit.labeledColor; } - fillAlpha = REGION_FILL_ALPHA; - strokeAlpha = REGION_STROKE_ALPHA; + if(this._analyticController.labelingMode === LabelingMode.UNLABELING) { + color = this.contextSrv.user.lightTheme ? + REGION_UNLABEL_COLOR_LIGHT : + REGION_UNLABEL_COLOR_DARK; + } } - this.plot.getOptions().selection.color = color + this.plot.getOptions().selection.color = color; } private _buildFlotPairs(data) { @@ -810,7 +816,7 @@ export class GraphRenderer { private _isHasticEvent(obj: any) { return (obj.ctrlKey || obj.metaKey) && this.contextSrv.isEditor && - this._analyticController.labelingMode; + this._analyticController.inLabelingMode; } } diff --git a/src/panel/graph_panel/models/analytic_unit.ts b/src/panel/graph_panel/models/analytic_unit.ts index 8a19cb3..8d81310 100644 --- a/src/panel/graph_panel/models/analytic_unit.ts +++ b/src/panel/graph_panel/models/analytic_unit.ts @@ -7,6 +7,13 @@ import { ANALYTIC_UNIT_COLORS } from '../colors'; import _ from 'lodash'; +export enum LabelingMode { + LABELING = 'LABELING', + UNLABELING = 'UNLABELING', + DELETING = 'DELETING', + NOT_IN_LABELING_MODE = 'NOT_IN_LABELING_MODE' +}; + export type AnalyticSegmentPair = { analyticUnit: AnalyticUnit, segment: AnalyticSegment }; export type AnalyticSegmentsSearcher = (point: number, rangeDist: number) => AnalyticSegmentPair[]; @@ -23,8 +30,8 @@ export class AnalyticSegment extends Segment { export class AnalyticUnit { + private _labelingMode: LabelingMode = LabelingMode.LABELING; private _selected: boolean = false; - private _deleteMode: boolean = false; private _saving: boolean = false; private _segmentSet = new SegmentArray(); private _status: string; @@ -71,8 +78,8 @@ export class AnalyticUnit { get selected(): boolean { return this._selected; } set selected(value: boolean) { this._selected = value; } - get deleteMode(): boolean { return this._deleteMode; } - set deleteMode(value: boolean) { this._deleteMode = value; } + get labelingMode(): LabelingMode { return this._labelingMode; } + set labelingMode(value: LabelingMode) { this._labelingMode = value; } get saving(): boolean { return this._saving; } set saving(value: boolean) { this._saving = value; } diff --git a/src/panel/graph_panel/partials/tab_analytics.html b/src/panel/graph_panel/partials/tab_analytics.html index 066ee09..dc8a519 100644 --- a/src/panel/graph_panel/partials/tab_analytics.html +++ b/src/panel/graph_panel/partials/tab_analytics.html @@ -11,7 +11,7 @@
-