You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by eb...@apache.org on 2020/05/13 10:37:34 UTC
[incubator-streampipes] 09/09: Add updating labels in database
after leaving labeling mode
This is an automated email from the ASF dual-hosted git repository.
ebi pushed a commit to branch timeseries-labeling
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit f672e44cfdcc0562b95d356da679b3c971f136b1
Author: Daniel Ebi <eb...@fzi.de>
AuthorDate: Wed May 13 11:10:58 2020 +0200
Add updating labels in database after leaving labeling mode
---
.../app/core-ui/linechart/lineChart.component.ts | 58 +++++++++++++++++++---
1 file changed, 52 insertions(+), 6 deletions(-)
diff --git a/ui/src/app/core-ui/linechart/lineChart.component.ts b/ui/src/app/core-ui/linechart/lineChart.component.ts
index c966b5c..49efcab 100644
--- a/ui/src/app/core-ui/linechart/lineChart.component.ts
+++ b/ui/src/app/core-ui/linechart/lineChart.component.ts
@@ -21,6 +21,7 @@ import { MatDialog } from '@angular/material/dialog';
import { PlotlyService } from 'angular-plotly.js';
import { DataResult } from '../../core-model/datalake/DataResult';
import { GroupedDataResult } from '../../core-model/datalake/GroupedDataResult';
+import { DatalakeRestService } from '../../core-services/datalake/datalake-rest.service';
import { BaseChartComponent } from '../chart/baseChart.component';
import { ChangeChartmodeDialog } from './labeling-tool/dialogs/change-chartmode/change-chartmode.dialog';
import { LabelingDialog } from './labeling-tool/dialogs/labeling/labeling.dialog';
@@ -37,7 +38,7 @@ export class LineChartComponent extends BaseChartComponent implements OnChanges
@Output() zoomEvent = new EventEmitter<[number, number]>();
constructor(public dialog: MatDialog, public plotlyService: PlotlyService, public colorService: ColorService,
- public renderer: Renderer2) {
+ public renderer: Renderer2, private restService: DatalakeRestService) {
super();
}
@@ -56,6 +57,9 @@ export class LineChartComponent extends BaseChartComponent implements OnChanges
// indicator variable if labeling mode is activated
private labelingModeOn = false;
+ // indicator variable if labels has been changed
+ private changedLabels = false;
+
updatemenus = [
{
buttons: [
@@ -146,7 +150,7 @@ export class LineChartComponent extends BaseChartComponent implements OnChanges
transformedData.rows.forEach(serie => {
if (serie.name === key) {
tmp.push(serie);
-
+
// adding customdata property in order to store labels in graph
if (transformedData.labels !== undefined && transformedData.labels.length !== 0) {
serie['customdata'] = transformedData.labels;
@@ -345,11 +349,9 @@ export class LineChartComponent extends BaseChartComponent implements OnChanges
for (const point of series['selectedpoints']) {
series['customdata'][point] = result;
}
-
- /**
- * TODO: saving labels persistently in database
- */
}
+ this.dataToDisplay['labels'] = this.dataToDisplay[0]['customdata'];
+ this.setChangedLabels(true);
// adding coloured shape (based on selected label) to graph (equals selected time interval)
this.addShapeToGraph(this.selectedStartX, this.selectedEndX, this.colorService.getColor(result));
@@ -442,6 +444,42 @@ export class LineChartComponent extends BaseChartComponent implements OnChanges
// changing dragmode to 'zoom'
this.graph.layout.dragmode = 'zoom';
+
+ // saving labels persistently
+ if (this.getChangedLabels()) {
+ this.saveLabelsInDatabase();
+ }
+ }
+
+ private saveLabelsInDatabase() {
+ let currentLabel = undefined;
+ let indices = [];
+ for (const label in this.dataToDisplay['labels']) {
+ if (currentLabel !== this.dataToDisplay['labels'][label] && indices.length > 0) {
+ const startdate = new Date(this.dataToDisplay[0]['x'][indices[0]]).getTime() - 1;
+ const enddate = new Date(this.dataToDisplay[0]['x'][indices[indices.length - 1]]).getTime() + 1;
+ this.restService.saveLabelsInDatabase(this.dataToDisplay['measureName'], startdate, enddate, currentLabel).subscribe(
+ res => {
+ // console.log('Successfully wrote label ' + currentLabel + ' into database.');
+ }
+ );
+ currentLabel = undefined;
+ indices = [];
+ indices.push(label);
+ } else {
+ indices.push(label);
+ }
+
+ currentLabel = this.dataToDisplay['labels'][label];
+ }
+ const last_startdate = new Date(this.dataToDisplay[0]['x'][indices[0]]).getTime() - 1;
+ const last_enddate = new Date(this.dataToDisplay[0]['x'][indices[indices.length - 1]]).getTime() + 1;
+ this.restService.saveLabelsInDatabase(this.dataToDisplay['measureName'], last_startdate, last_enddate, currentLabel).subscribe(
+ res => {
+ // console.log('Successfully wrote label ' + currentLabel + ' in last iterastion into database.');
+ });
+ this.setChangedLabels(false);
+
}
private addInitialColouredShapesToGraph() {
@@ -500,4 +538,12 @@ export class LineChartComponent extends BaseChartComponent implements OnChanges
};
this.graph.layout.shapes.push(shape);
}
+
+ public setChangedLabels(state: boolean) {
+ this.changedLabels = state;
+ }
+
+ public getChangedLabels() {
+ return this.changedLabels;
+ }
}