hastic
/
hastic-grafana-app
5
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Highlight segments that were used in learning process #63 (#65) 

labeled segment border color (black)
master
rozetko 6 years ago committed by Alexey Velikiy
parent
29436baacf
commit
8ce895f4a5
2 changed files with 67 additions and 56 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 93
      src/controllers/analytic_controller.ts
  2. 30
      src/graph_renderer.ts

93
src/controllers/analytic_controller.ts
Unescape View File

@ -23,6 +23,7 @@ export const REGION_FILL_ALPHA = 0.7;
export const REGION_STROKE_ALPHA = 0.9; export const REGION_STROKE_ALPHA = 0.9;
export const REGION_DELETE_COLOR_LIGHT = '#d1d1d1'; export const REGION_DELETE_COLOR_LIGHT = '#d1d1d1';
export const REGION_DELETE_COLOR_DARK = 'white'; export const REGION_DELETE_COLOR_DARK = 'white';
const LABELED_SEGMENT_BORDER_COLOR = 'black';
export class AnalyticController { export class AnalyticController {
@ -105,7 +106,7 @@ export class AnalyticController {
async toggleAnomalyTypeLabelingMode(id: AnalyticUnitId) { async toggleAnomalyTypeLabelingMode(id: AnalyticUnitId) {
if(this.labelingAnomaly && this.labelingAnomaly.saving) { 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) { if(this._selectedAnalyticUnitId === id) {
return this.disableLabeling(); return this.disableLabeling();
@ -192,20 +193,20 @@ export class AnalyticController {
return Promise.all(tasks); return Promise.all(tasks);
} }
async fetchSegments(anomalyType: AnalyticUnit, from: number, to: number): Promise<void> { async fetchSegments(analyticUnit: AnalyticUnit, from: number, to: number): Promise<void> {
if(!_.isNumber(+from)) { if(!_.isNumber(+from)) {
throw new Error('from isn`t number'); throw new Error('from isn`t number');
} }
if(!_.isNumber(+to)) { if(!_.isNumber(+to)) {
throw new Error('to isn`t number'); 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); var allSegmentsSet = new SegmentArray(allSegmentsList);
if(anomalyType.selected) { if(analyticUnit.selected) {
this._labelingDataAddedSegments.getSegments().forEach(s => allSegmentsSet.addSegment(s)); this._labelingDataAddedSegments.getSegments().forEach(s => allSegmentsSet.addSegment(s));
this._labelingDataDeletedSegments.getSegments().forEach(s => allSegmentsSet.remove(s.id)); this._labelingDataDeletedSegments.getSegments().forEach(s => allSegmentsSet.remove(s.id));
} }
anomalyType.segments = allSegmentsSet; analyticUnit.segments = allSegmentsSet;
} }
private async _saveLabelingData(): Promise<SegmentId[]> { private async _saveLabelingData(): Promise<SegmentId[]> {
@ -233,15 +234,15 @@ export class AnalyticController {
} }
for(var i = 0; i < this.analyticUnits.length; i++) { for(var i = 0; i < this.analyticUnits.length; i++) {
var anomalyType = this.analyticUnits[i]; var analyticUnit = this.analyticUnits[i];
var borderColor = addAlphaToRGB(anomalyType.color, REGION_STROKE_ALPHA); var borderColor = addAlphaToRGB(analyticUnit.color, REGION_STROKE_ALPHA);
var fillColor = addAlphaToRGB(anomalyType.color, REGION_FILL_ALPHA); var fillColor = addAlphaToRGB(analyticUnit.color, REGION_FILL_ALPHA);
var segments = anomalyType.segments.getSegments(); var segments = analyticUnit.segments.getSegments();
if(!anomalyType.visible) { if(!analyticUnit.visible) {
continue; continue;
} }
if(isEditMode && this.labelingMode) { if(isEditMode && this.labelingMode) {
if(anomalyType.selected) { if(analyticUnit.selected) {
borderColor = addAlphaToRGB(borderColor, 0.7); borderColor = addAlphaToRGB(borderColor, 0.7);
fillColor = addAlphaToRGB(borderColor, 0.7); fillColor = addAlphaToRGB(borderColor, 0.7);
} else { } else {
@ -250,7 +251,17 @@ export class AnalyticController {
} }
var rangeDist = +options.xaxis.max - +options.xaxis.min; 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 => { segments.forEach(s => {
let segmentBorderColor;
if(s.labeled) {
segmentBorderColor = labeledSegmentBorderColor;
} else {
segmentBorderColor = fillColor;
}
var expanded = s.expandDist(rangeDist, 0.01); var expanded = s.expandDist(rangeDist, 0.01);
options.grid.markings.push({ options.grid.markings.push({
xaxis: { from: expanded.from, to: expanded.to }, xaxis: { from: expanded.from, to: expanded.to },
@ -258,11 +269,11 @@ export class AnalyticController {
}); });
options.grid.markings.push({ options.grid.markings.push({
xaxis: { from: expanded.from, to: expanded.from }, xaxis: { from: expanded.from, to: expanded.from },
color: borderColor color: segmentBorderColor
}); });
options.grid.markings.push({ options.grid.markings.push({
xaxis: { from: expanded.to, to: expanded.to }, xaxis: { from: expanded.to, to: expanded.to },
color: borderColor color: segmentBorderColor
}); });
}); });
} }
@ -293,57 +304,57 @@ export class AnalyticController {
this._analyticUnitsSet.removeItem(id); this._analyticUnitsSet.removeItem(id);
} }
private async _runStatusWaiter(anomalyType: AnalyticUnit) { private async _runStatusWaiter(analyticUnit: AnalyticUnit) {
if(anomalyType === undefined || anomalyType === null) { if(analyticUnit === undefined || analyticUnit === null) {
throw new Error('anomalyType not defined'); throw new Error('analyticUnit not defined');
} }
if(anomalyType.id === undefined) { if(analyticUnit.id === undefined) {
throw new Error('anomalyType.id is undefined'); throw new Error('analyticUnit.id is undefined');
} }
if(this._statusRunners.has(anomalyType.id)) { if(this._statusRunners.has(analyticUnit.id)) {
return; return;
} }
this._statusRunners.add(anomalyType.id); this._statusRunners.add(analyticUnit.id);
var statusGenerator = this._analyticService.getStatusGenerator( var statusGenerator = this._analyticService.getStatusGenerator(
anomalyType.id, 1000 analyticUnit.id, 1000
); );
for await (const data of statusGenerator) { for await (const data of statusGenerator) {
let status = data.status; let status = data.status;
let error = data.errorMessage; let error = data.errorMessage;
if(anomalyType.status !== status) { if(analyticUnit.status !== status) {
anomalyType.status = status; analyticUnit.status = status;
if(error !== undefined) { 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; break;
} }
} }
this._statusRunners.delete(anomalyType.id); this._statusRunners.delete(analyticUnit.id);
} }
// async runEnabledWaiter(anomalyType: AnalyticUnit) { // async runEnabledWaiter(analyticUnit: AnalyticUnit) {
// var enabled = await this._analyticService.getAlertEnabled(anomalyType.id); // var enabled = await this._analyticService.getAlertEnabled(analyticUnit.id);
// if(anomalyType.alertEnabled !== enabled) { // if(analyticUnit.alertEnabled !== enabled) {
// anomalyType.alertEnabled = enabled; // analyticUnit.alertEnabled = enabled;
// this._emitter.emit('anomaly-type-alert-change', anomalyType); // this._emitter.emit('anomaly-type-alert-change', analyticUnit);
// } // }
// } // }
async toggleAlertEnabled(anomalyType: AnalyticUnit) { async toggleAlertEnabled(analyticUnit: AnalyticUnit) {
var enabled = anomalyType.alertEnabled; var enabled = analyticUnit.alertEnabled;
anomalyType.alertEnabled = undefined; analyticUnit.alertEnabled = undefined;
await this._analyticService.setAlertEnabled(anomalyType.id, enabled); await this._analyticService.setAlertEnabled(analyticUnit.id, enabled);
anomalyType.alertEnabled = enabled; analyticUnit.alertEnabled = enabled;
this._emitter.emit('anomaly-type-alert-change', anomalyType); this._emitter.emit('anomaly-type-alert-change', analyticUnit);
} }
public getNewTempSegmentId(): SegmentId { public getNewTempSegmentId(): SegmentId {
@ -352,11 +363,11 @@ export class AnalyticController {
} }
public toggleVisibility(id: AnalyticUnitId, value?: boolean) { public toggleVisibility(id: AnalyticUnitId, value?: boolean) {
var anomaly = this._analyticUnitsSet.byId(id); var analyticUnit = this._analyticUnitsSet.byId(id);
if(value !== undefined) { if(value !== undefined) {
anomaly.visible = value; analyticUnit.visible = value;
} else { } else {
anomaly.visible = !anomaly.visible; analyticUnit.visible = !analyticUnit.visible;
} }
} }

30
src/graph_renderer.ts
Unescape View File

@ -38,7 +38,7 @@ const COLOR_SELECTION = '#666';
export class GraphRenderer { export class GraphRenderer {
private _ananlyticController: AnalyticController; private _analyticController: AnalyticController;
private data: any; private data: any;
private tooltip: GraphTooltip; private tooltip: GraphTooltip;
private thresholdManager: ThresholdManager; private thresholdManager: ThresholdManager;
@ -71,9 +71,9 @@ export class GraphRenderer {
this.contextSrv = contextSrv; this.contextSrv = contextSrv;
this.scope = scope; this.scope = scope;
this._ananlyticController = this.ctrl.analyticsController; this._analyticController = this.ctrl.analyticsController;
if(this._ananlyticController === undefined) { if(this._analyticController === undefined) {
throw new Error('ananlyticController is undefined'); throw new Error('analyticController is undefined');
} }
@ -85,7 +85,7 @@ export class GraphRenderer {
this.thresholdManager = new ThresholdManager(this.ctrl); this.thresholdManager = new ThresholdManager(this.ctrl);
this.tooltip = new GraphTooltip( this.tooltip = new GraphTooltip(
$elem, this.dashboard, scope, () => this.sortedSeries, $elem, this.dashboard, scope, () => this.sortedSeries,
this._ananlyticController.getSegmentsSearcher() this._analyticController.getSegmentsSearcher()
); );
// panel events // panel events
@ -111,18 +111,18 @@ export class GraphRenderer {
if(this._isAnomalyEvent(selectionEvent)) { if(this._isAnomalyEvent(selectionEvent)) {
this.plot.clearSelection(); this.plot.clearSelection();
var id = this._ananlyticController.getNewTempSegmentId(); var id = this._analyticController.getNewTempSegmentId();
var segment = new Segment( var segment = new Segment(
id, id,
Math.round(selectionEvent.xaxis.from), Math.round(selectionEvent.xaxis.from),
Math.round(selectionEvent.xaxis.to) Math.round(selectionEvent.xaxis.to)
); );
if(this._ananlyticController.labelingDeleteMode) { if(this._analyticController.labelingDeleteMode) {
this._ananlyticController.deleteLabelingAnomalySegmentsInRange( this._analyticController.deleteLabelingAnomalySegmentsInRange(
segment.from, segment.to segment.from, segment.to
); );
} else { } else {
this._ananlyticController.addLabelSegment(segment); this._analyticController.addLabelSegment(segment);
} }
this._renderPanel(); this._renderPanel();
return; return;
@ -186,12 +186,12 @@ export class GraphRenderer {
}); });
$elem.mousedown(e => { $elem.mousedown(e => {
this._ananlyticController.graphLocked = true; this._analyticController.graphLocked = true;
this._chooseSelectionColor(e); this._chooseSelectionColor(e);
}); });
$(document).mouseup(e => { $(document).mouseup(e => {
this._ananlyticController.graphLocked = false; this._analyticController.graphLocked = false;
}) })
} }
@ -336,7 +336,7 @@ export class GraphRenderer {
this._configureYAxisOptions(this.data); this._configureYAxisOptions(this.data);
this.thresholdManager.addFlotOptions(this.flotOptions, this.panel); this.thresholdManager.addFlotOptions(this.flotOptions, this.panel);
// this.eventManager.addFlotEvents(this.annotations, this.flotOptions); // 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.sortedSeries = this._sortSeries(this.data, this.panel);
this._callPlot(true); this._callPlot(true);
@ -347,12 +347,12 @@ export class GraphRenderer {
var fillAlpha = 0.4; var fillAlpha = 0.4;
var strokeAlpha = 0.4; var strokeAlpha = 0.4;
if(this._isAnomalyEvent(e)) { if(this._isAnomalyEvent(e)) {
if(this._ananlyticController.labelingDeleteMode) { if(this._analyticController.labelingDeleteMode) {
color = this.contextSrv.user.lightTheme ? color = this.contextSrv.user.lightTheme ?
ANOMALY_REGION_DELETE_COLOR_LIGHT : ANOMALY_REGION_DELETE_COLOR_LIGHT :
ANOMALY_REGION_DELETE_COLOR_DARK; ANOMALY_REGION_DELETE_COLOR_DARK;
} else { } else {
color = this._ananlyticController.labelingAnomaly.color; color = this._analyticController.labelingAnomaly.color;
} }
fillAlpha = ANOMALY_REGION_FILL_ALPHA; fillAlpha = ANOMALY_REGION_FILL_ALPHA;
strokeAlpha = ANOMALY_REGION_STROKE_ALPHA; strokeAlpha = ANOMALY_REGION_STROKE_ALPHA;
@ -814,7 +814,7 @@ export class GraphRenderer {
private _isAnomalyEvent(obj: any) { private _isAnomalyEvent(obj: any) {
return (obj.ctrlKey || obj.metaKey) && return (obj.ctrlKey || obj.metaKey) &&
this.contextSrv.isEditor && this.contextSrv.isEditor &&
this._ananlyticController.labelingMode; this._analyticController.labelingMode;
} }
} }

Write Preview
Loading…
Cancel
Save