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
Split 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_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<void> {
async fetchSegments(analyticUnit: AnalyticUnit, from: number, to: number): Promise<void> {
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<SegmentId[]> {
@ -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;
}
}

30
src/graph_renderer.ts
Unescape View File

@ -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;
}
}

Write Preview
Loading…
Cancel
Save