diff --git a/src/controllers/analytic_controller.ts b/src/controllers/analytic_controller.ts index bfa379f..22420b4 100644 --- a/src/controllers/analytic_controller.ts +++ b/src/controllers/analytic_controller.ts @@ -23,6 +23,7 @@ export const REGION_FILL_ALPHA = 0.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'; export class AnalyticController { @@ -105,7 +106,7 @@ export class AnalyticController { async toggleAnomalyTypeLabelingMode(id: AnalyticUnitId) { if(this.labelingAnomaly && this.labelingAnomaly.saving) { - throw new Error('Can`t toggel during saving'); + throw new Error('Can`t toggle during saving'); } if(this._selectedAnalyticUnitId === id) { return this.disableLabeling(); @@ -192,20 +193,20 @@ export class AnalyticController { return Promise.all(tasks); } - async fetchSegments(anomalyType: AnalyticUnit, from: number, to: number): Promise { + async fetchSegments(analyticUnit: AnalyticUnit, from: number, to: number): Promise { if(!_.isNumber(+from)) { throw new Error('from isn`t number'); } if(!_.isNumber(+to)) { throw new Error('to isn`t number'); } - var allSegmentsList = await this._analyticService.getSegments(anomalyType.id, from, to); + var allSegmentsList = await this._analyticService.getSegments(analyticUnit.id, from, to); var allSegmentsSet = new SegmentArray(allSegmentsList); - if(anomalyType.selected) { + if(analyticUnit.selected) { this._labelingDataAddedSegments.getSegments().forEach(s => allSegmentsSet.addSegment(s)); this._labelingDataDeletedSegments.getSegments().forEach(s => allSegmentsSet.remove(s.id)); } - anomalyType.segments = allSegmentsSet; + analyticUnit.segments = allSegmentsSet; } private async _saveLabelingData(): Promise { @@ -233,15 +234,15 @@ export class AnalyticController { } for(var i = 0; i < this.analyticUnits.length; i++) { - var anomalyType = this.analyticUnits[i]; - var borderColor = addAlphaToRGB(anomalyType.color, REGION_STROKE_ALPHA); - var fillColor = addAlphaToRGB(anomalyType.color, REGION_FILL_ALPHA); - var segments = anomalyType.segments.getSegments(); - if(!anomalyType.visible) { + var 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(anomalyType.selected) { + if(analyticUnit.selected) { borderColor = addAlphaToRGB(borderColor, 0.7); fillColor = addAlphaToRGB(borderColor, 0.7); } else { @@ -250,7 +251,17 @@ export class AnalyticController { } var rangeDist = +options.xaxis.max - +options.xaxis.min; + + let labeledSegmentBorderColor = tinycolor(LABELED_SEGMENT_BORDER_COLOR).toRgbString(); + labeledSegmentBorderColor = addAlphaToRGB(labeledSegmentBorderColor, REGION_STROKE_ALPHA); segments.forEach(s => { + let segmentBorderColor; + if(s.labeled) { + segmentBorderColor = labeledSegmentBorderColor; + } else { + segmentBorderColor = fillColor; + } + var expanded = s.expandDist(rangeDist, 0.01); options.grid.markings.push({ xaxis: { from: expanded.from, to: expanded.to }, @@ -258,11 +269,11 @@ export class AnalyticController { }); options.grid.markings.push({ xaxis: { from: expanded.from, to: expanded.from }, - color: borderColor + color: segmentBorderColor }); options.grid.markings.push({ xaxis: { from: expanded.to, to: expanded.to }, - color: borderColor + color: segmentBorderColor }); }); } @@ -293,57 +304,57 @@ export class AnalyticController { this._analyticUnitsSet.removeItem(id); } - private async _runStatusWaiter(anomalyType: AnalyticUnit) { - if(anomalyType === undefined || anomalyType === null) { - throw new Error('anomalyType not defined'); + private async _runStatusWaiter(analyticUnit: AnalyticUnit) { + if(analyticUnit === undefined || analyticUnit === null) { + throw new Error('analyticUnit not defined'); } - if(anomalyType.id === undefined) { - throw new Error('anomalyType.id is undefined'); + if(analyticUnit.id === undefined) { + throw new Error('analyticUnit.id is undefined'); } - if(this._statusRunners.has(anomalyType.id)) { + if(this._statusRunners.has(analyticUnit.id)) { return; } - this._statusRunners.add(anomalyType.id); + this._statusRunners.add(analyticUnit.id); var statusGenerator = this._analyticService.getStatusGenerator( - anomalyType.id, 1000 + analyticUnit.id, 1000 ); for await (const data of statusGenerator) { let status = data.status; let error = data.errorMessage; - if(anomalyType.status !== status) { - anomalyType.status = status; + if(analyticUnit.status !== status) { + analyticUnit.status = status; if(error !== undefined) { - anomalyType.error = error; + analyticUnit.error = error; } - this._emitter.emit('anomaly-type-status-change', anomalyType); + this._emitter.emit('anomaly-type-status-change', analyticUnit); } - if(!anomalyType.isActiveStatus) { + if(!analyticUnit.isActiveStatus) { break; } } - this._statusRunners.delete(anomalyType.id); + this._statusRunners.delete(analyticUnit.id); } - // async runEnabledWaiter(anomalyType: AnalyticUnit) { - // var enabled = await this._analyticService.getAlertEnabled(anomalyType.id); - // if(anomalyType.alertEnabled !== enabled) { - // anomalyType.alertEnabled = enabled; - // this._emitter.emit('anomaly-type-alert-change', anomalyType); + // async runEnabledWaiter(analyticUnit: AnalyticUnit) { + // var enabled = await this._analyticService.getAlertEnabled(analyticUnit.id); + // if(analyticUnit.alertEnabled !== enabled) { + // analyticUnit.alertEnabled = enabled; + // this._emitter.emit('anomaly-type-alert-change', analyticUnit); // } // } - async toggleAlertEnabled(anomalyType: AnalyticUnit) { - var enabled = anomalyType.alertEnabled; - anomalyType.alertEnabled = undefined; - await this._analyticService.setAlertEnabled(anomalyType.id, enabled); - anomalyType.alertEnabled = enabled; - this._emitter.emit('anomaly-type-alert-change', anomalyType); + async toggleAlertEnabled(analyticUnit: AnalyticUnit) { + var enabled = analyticUnit.alertEnabled; + analyticUnit.alertEnabled = undefined; + await this._analyticService.setAlertEnabled(analyticUnit.id, enabled); + analyticUnit.alertEnabled = enabled; + this._emitter.emit('anomaly-type-alert-change', analyticUnit); } public getNewTempSegmentId(): SegmentId { @@ -352,11 +363,11 @@ export class AnalyticController { } public toggleVisibility(id: AnalyticUnitId, value?: boolean) { - var anomaly = this._analyticUnitsSet.byId(id); + var analyticUnit = this._analyticUnitsSet.byId(id); if(value !== undefined) { - anomaly.visible = value; + analyticUnit.visible = value; } else { - anomaly.visible = !anomaly.visible; + analyticUnit.visible = !analyticUnit.visible; } } diff --git a/src/graph_renderer.ts b/src/graph_renderer.ts index 231aa5a..870b804 100644 --- a/src/graph_renderer.ts +++ b/src/graph_renderer.ts @@ -38,7 +38,7 @@ const COLOR_SELECTION = '#666'; export class GraphRenderer { - private _ananlyticController: AnalyticController; + private _analyticController: AnalyticController; private data: any; private tooltip: GraphTooltip; private thresholdManager: ThresholdManager; @@ -71,9 +71,9 @@ export class GraphRenderer { this.contextSrv = contextSrv; this.scope = scope; - this._ananlyticController = this.ctrl.analyticsController; - if(this._ananlyticController === undefined) { - throw new Error('ananlyticController is undefined'); + this._analyticController = this.ctrl.analyticsController; + if(this._analyticController === undefined) { + throw new Error('analyticController is undefined'); } @@ -85,7 +85,7 @@ export class GraphRenderer { this.thresholdManager = new ThresholdManager(this.ctrl); this.tooltip = new GraphTooltip( $elem, this.dashboard, scope, () => this.sortedSeries, - this._ananlyticController.getSegmentsSearcher() + this._analyticController.getSegmentsSearcher() ); // panel events @@ -111,18 +111,18 @@ export class GraphRenderer { if(this._isAnomalyEvent(selectionEvent)) { this.plot.clearSelection(); - var id = this._ananlyticController.getNewTempSegmentId(); + var id = this._analyticController.getNewTempSegmentId(); var segment = new Segment( id, Math.round(selectionEvent.xaxis.from), Math.round(selectionEvent.xaxis.to) ); - if(this._ananlyticController.labelingDeleteMode) { - this._ananlyticController.deleteLabelingAnomalySegmentsInRange( + if(this._analyticController.labelingDeleteMode) { + this._analyticController.deleteLabelingAnomalySegmentsInRange( segment.from, segment.to ); } else { - this._ananlyticController.addLabelSegment(segment); + this._analyticController.addLabelSegment(segment); } this._renderPanel(); return; @@ -186,12 +186,12 @@ export class GraphRenderer { }); $elem.mousedown(e => { - this._ananlyticController.graphLocked = true; + this._analyticController.graphLocked = true; this._chooseSelectionColor(e); }); $(document).mouseup(e => { - this._ananlyticController.graphLocked = false; + this._analyticController.graphLocked = false; }) } @@ -336,7 +336,7 @@ export class GraphRenderer { this._configureYAxisOptions(this.data); this.thresholdManager.addFlotOptions(this.flotOptions, this.panel); // this.eventManager.addFlotEvents(this.annotations, this.flotOptions); - this._ananlyticController.updateFlotEvents(this.contextSrv.isEditor, this.flotOptions); + this._analyticController.updateFlotEvents(this.contextSrv.isEditor, this.flotOptions); this.sortedSeries = this._sortSeries(this.data, this.panel); this._callPlot(true); @@ -347,12 +347,12 @@ export class GraphRenderer { var fillAlpha = 0.4; var strokeAlpha = 0.4; if(this._isAnomalyEvent(e)) { - if(this._ananlyticController.labelingDeleteMode) { + if(this._analyticController.labelingDeleteMode) { color = this.contextSrv.user.lightTheme ? ANOMALY_REGION_DELETE_COLOR_LIGHT : ANOMALY_REGION_DELETE_COLOR_DARK; } else { - color = this._ananlyticController.labelingAnomaly.color; + color = this._analyticController.labelingAnomaly.color; } fillAlpha = ANOMALY_REGION_FILL_ALPHA; strokeAlpha = ANOMALY_REGION_STROKE_ALPHA; @@ -814,7 +814,7 @@ export class GraphRenderer { private _isAnomalyEvent(obj: any) { return (obj.ctrlKey || obj.metaKey) && this.contextSrv.isEditor && - this._ananlyticController.labelingMode; + this._analyticController.labelingMode; } }