You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ze...@apache.org on 2020/10/01 21:04:39 UTC
[incubator-streampipes] branch STREAMPIPES-234 updated (4332e1e ->
70cc1b1)
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a change to branch STREAMPIPES-234
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git.
from 4332e1e Merge branch 'dev' into STREAMPIPES-234
new edbc416 Move labels component
new 70cc1b1 Create configure labels component
The 2 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
Summary of changes:
ui/src/app/core-ui/core-ui.module.ts | 117 +++++++++++----------
.../image-categorize.component.html | 4 +-
.../image-categorize/image-categorize.component.ts | 2 +-
.../image-labeling/image-labeling.component.html | 4 +-
.../image-labeling/image-labeling.component.ts | 2 +-
.../configure-labels.component.css | 0
.../configure-labels.component.html} | 19 +---
.../configure-labels/configure-labels.component.ts | 39 +++++++
.../select-label/select-label.component.css} | 0
.../select-label/select-label.component.html} | 0
.../select-label/select-label.component.ts} | 10 +-
.../app/core-ui/labels/services/label.service.ts | 26 +++++
...data-explorer-dashboard-overview.component.html | 7 +-
.../data-explorer-dashboard-overview.component.ts | 7 ++
.../label-selection/label-selection.component.css | 19 ----
.../label-selection/label-selection.component.html | 32 ------
.../label-selection/label-selection.component.ts | 61 -----------
.../dialogs/labeling/labeling.dialog.css | 36 -------
.../dialogs/labeling/labeling.dialog.html | 36 -------
.../line-chart/dialogs/labeling/labeling.dialog.ts | 52 ---------
.../line-chart/line-chart-widget.component.html | 4 +-
.../line-chart/line-chart-widget.component.ts | 1 -
ui/src/app/data-explorer/data-explorer.module.ts | 5 -
23 files changed, 152 insertions(+), 331 deletions(-)
create mode 100644 ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.css
copy ui/src/app/core-ui/{image/components/image-labels/image-labels.component.html => labels/components/configure-labels/configure-labels.component.html} (59%)
create mode 100644 ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts
rename ui/src/app/core-ui/{image/components/image-labels/image-labels.component.css => labels/components/select-label/select-label.component.css} (100%)
rename ui/src/app/core-ui/{image/components/image-labels/image-labels.component.html => labels/components/select-label/select-label.component.html} (100%)
rename ui/src/app/core-ui/{image/components/image-labels/image-labels.component.ts => labels/components/select-label/select-label.component.ts} (89%)
create mode 100644 ui/src/app/core-ui/labels/services/label.service.ts
delete mode 100644 ui/src/app/data-explorer/components/widgets/line-chart/components/label-selection/label-selection.component.css
delete mode 100644 ui/src/app/data-explorer/components/widgets/line-chart/components/label-selection/label-selection.component.html
delete mode 100644 ui/src/app/data-explorer/components/widgets/line-chart/components/label-selection/label-selection.component.ts
delete mode 100644 ui/src/app/data-explorer/components/widgets/line-chart/dialogs/labeling/labeling.dialog.css
delete mode 100644 ui/src/app/data-explorer/components/widgets/line-chart/dialogs/labeling/labeling.dialog.html
delete mode 100644 ui/src/app/data-explorer/components/widgets/line-chart/dialogs/labeling/labeling.dialog.ts
[incubator-streampipes] 02/02: Create configure labels component
Posted by ze...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch STREAMPIPES-234
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 70cc1b19d9dead0c0900aafaff958ebaeba9c4f8
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Thu Oct 1 23:04:18 2020 +0200
Create configure labels component
---
ui/src/app/core-ui/core-ui.module.ts | 3 ++
.../configure-labels.component.html | 23 +++++++-
.../configure-labels/configure-labels.component.ts | 30 +++++++++--
.../app/core-ui/labels/services/label.service.ts | 26 +++++++++
...data-explorer-dashboard-overview.component.html | 7 ++-
.../data-explorer-dashboard-overview.component.ts | 7 +++
.../label-selection/label-selection.component.css | 19 -------
.../label-selection/label-selection.component.html | 32 ------------
.../label-selection/label-selection.component.ts | 61 ----------------------
.../dialogs/labeling/labeling.dialog.css | 36 -------------
.../dialogs/labeling/labeling.dialog.html | 36 -------------
.../line-chart/dialogs/labeling/labeling.dialog.ts | 52 ------------------
.../line-chart/line-chart-widget.component.ts | 1 -
ui/src/app/data-explorer/data-explorer.module.ts | 5 --
14 files changed, 91 insertions(+), 247 deletions(-)
diff --git a/ui/src/app/core-ui/core-ui.module.ts b/ui/src/app/core-ui/core-ui.module.ts
index 80d04b8..c68d52d 100644
--- a/ui/src/app/core-ui/core-ui.module.ts
+++ b/ui/src/app/core-ui/core-ui.module.ts
@@ -73,6 +73,7 @@ import { ColorPickerModule } from 'ngx-color-picker';
import { QuillModule } from 'ngx-quill';
import { CodemirrorModule } from '@ctrl/ngx-codemirror';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import { ConfigureLabelsComponent } from './labels/components/configure-labels/configure-labels.component';
@NgModule({
imports: [
@@ -97,6 +98,7 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
QuillModule.forRoot()
],
declarations: [
+ ConfigureLabelsComponent,
ConfirmDialogComponent,
DisplayRecommendedPipe,
ImageComponent,
@@ -141,6 +143,7 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
entryComponents: [
],
exports: [
+ ConfigureLabelsComponent,
ImageComponent,
ImageLabelingComponent,
SelectLabelComponent,
diff --git a/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.html b/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.html
index 2dfb465..3645ced 100644
--- a/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.html
+++ b/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.html
@@ -1 +1,22 @@
-<p>configure-labels works!</p>
+<div fxLayout="column" fxLayoutAlign="space-around center">
+
+ <h2>Labels</h2>
+ <div style="padding-left: 5px; padding-right: 5px; border-radius: 50px; font-size: 20px;">
+ <mat-form-field style="margin-top: -15px; margin-bottom: -10px">
+ <mat-select [(value)]="selectedCategory">
+ <mat-option *ngFor="let category of categories" [value]="category">
+ {{category}}
+ </mat-option>
+ </mat-select>
+ </mat-form-field>
+ </div>
+ <mat-list>
+ <mat-list-item *ngFor="let label of _labels[selectedCategory]; index as i"
+ [style.background-color]="_selectedLabel.label == label ? 'lightgrey' : 'white'"
+ style="height: 30px; padding-top: 5px; padding-buttom: 5px; border-radius: 50px; margin-bottom: 5px"
+ (click)="selectLabel({category: labelCategory, label: label})">
+ <mat-icon matListIcon [style.color]="colorService.getColor(label)" style="margin-top: -8px;">color_lens</mat-icon>
+ <h4 style="margin-top: -3px;"> {{label}} <label *ngIf="i < 10"> #{{i+1}}</label> </h4>
+ </mat-list-item>
+ </mat-list>
+</div>
diff --git a/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts b/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts
index b07c3f3..c013f15 100644
--- a/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts
+++ b/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts
@@ -1,15 +1,39 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
+import { ColorService } from '../../../image/services/color.service';
+import { LabelService } from '../../services/label.service';
@Component({
- selector: 'configure-labels',
+ selector: 'sp-configure-labels',
templateUrl: './configure-labels.component.html',
styleUrls: ['./configure-labels.component.css']
})
export class ConfigureLabelsComponent implements OnInit {
- constructor() { }
+ @Input() enableShortCuts: boolean;
+ @Output() labelChange: EventEmitter<{category, label}> = new EventEmitter<{category, label}>();
+
+ public _labels;
+ public _selectedLabel: {category, label};
+ public categories;
+ public selectedCategory;
+
+ constructor(public colorService: ColorService, public labelService: LabelService) { }
ngOnInit(): void {
+ this._labels = this.labelService.getLabels();
+ this.update();
+ }
+
+ update() {
+ this.categories = Object.keys(this._labels);
+ this.selectedCategory = this.categories[0];
+ this._selectedLabel = {category: this.selectedCategory, label: this._labels[this.selectedCategory][0]};
+ this.labelChange.emit(this._selectedLabel);
+ }
+
+ selectLabel(e: {category, label}) {
+ this._selectedLabel = e;
+ this.labelChange.emit(this._selectedLabel);
}
}
diff --git a/ui/src/app/core-ui/labels/services/label.service.ts b/ui/src/app/core-ui/labels/services/label.service.ts
new file mode 100644
index 0000000..bfef61e
--- /dev/null
+++ b/ui/src/app/core-ui/labels/services/label.service.ts
@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class LabelService {
+
+ constructor() { }
+
+ getLabels() {
+ return {
+ 'boxes': ['blue', 'red'],
+ 'sign': ['trafficsign'],
+ 'person': ['person', 'Child'],
+ 'vehicle': ['bicycle', 'car', 'motorcycle', 'airplane', 'bus', 'train', 'truck', 'boat'],
+ 'outdoor': ['traffic light', 'fire hydrant', 'stop sign', 'parking meter', 'bench'],
+ 'animal': ['bird', 'cat', 'dog'],
+ 'accessory': ['backpack', 'umbrella', 'handbag', 'suitcase'],
+ 'sports': ['frisbee', 'sports ball', 'skis', 'frisbee', 'baseball bat'],
+ 'kitchen': ['bottle', 'cup', 'fork', 'knife', 'spoon'],
+ 'furniture': ['chair', 'couch', 'bed', 'table'],
+ 'electronic': ['tv', 'laptop', 'mouse', 'keyboard']
+ };
+ }
+
+}
diff --git a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.html b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.html
index a9049fa..d4251a4 100644
--- a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.html
+++ b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.html
@@ -22,8 +22,11 @@
<button mat-button mat-raised-button color="primary" (click)="openNewDataViewDialog()">
New Data View
</button>
+ <button mat-button mat-raised-button color="primary" (click)="openEditLabelView()">
+ Edit Labels
+ </button>
</div>
- <div fxFlex="100" fxLayout="row wrap" fxLayoutAlign="start stretch">
+ <div *ngIf="!editLabels" fxFlex="100" fxLayout="row wrap" fxLayoutAlign="start stretch">
<div fxFlex="100" class="assemblyOptions sp-blue-bg" style="padding:5px;">
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
<h4>My Data Views</h4>
@@ -73,4 +76,6 @@
</div>
</div>
</div>
+
+ <sp-configure-labels *ngIf="editLabels"></sp-configure-labels>
</div>
\ No newline at end of file
diff --git a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.ts b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.ts
index 3169d1d..5dba063 100644
--- a/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.ts
+++ b/ui/src/app/data-explorer/components/overview/data-explorer-dashboard-overview.component.ts
@@ -37,6 +37,8 @@ export class DataExplorerDashboardOverviewComponent implements OnInit {
dataSource = new MatTableDataSource<IDataViewDashboard>();
displayedColumns: string[] = ['name', 'open', 'delete'];
+ editLabels: boolean;
+
constructor(private dashboardService: DataViewDataExplorerService,
public dialog: MatDialog) {
@@ -44,6 +46,7 @@ export class DataExplorerDashboardOverviewComponent implements OnInit {
ngOnInit(): void {
this.dataSource.data = this.dataViewDashboards;
+ this.editLabels = false;
}
openNewDataViewDialog() {
@@ -53,6 +56,10 @@ export class DataExplorerDashboardOverviewComponent implements OnInit {
this.openDataViewModificationDialog(true, dataViewDashboard);
}
+ openEditLabelView() {
+ this.editLabels = true;
+ }
+
openDataViewModificationDialog(createMode: boolean, dashboard: IDataViewDashboard) {
const dialogRef = this.dialog.open(DataExplorerEditDataViewDialogComponent, {
width: '70%',
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/components/label-selection/label-selection.component.css b/ui/src/app/data-explorer/components/widgets/line-chart/components/label-selection/label-selection.component.css
deleted file mode 100644
index 2026376..0000000
--- a/ui/src/app/data-explorer/components/widgets/line-chart/components/label-selection/label-selection.component.css
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-/* empty stylesheet */
\ No newline at end of file
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/components/label-selection/label-selection.component.html b/ui/src/app/data-explorer/components/widgets/line-chart/components/label-selection/label-selection.component.html
deleted file mode 100644
index e085373..0000000
--- a/ui/src/app/data-explorer/components/widgets/line-chart/components/label-selection/label-selection.component.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!--
- ~ Licensed to the Apache Software Foundation (ASF) under one or more
- ~ contributor license agreements. See the NOTICE file distributed with
- ~ this work for additional information regarding copyright ownership.
- ~ The ASF licenses this file to You under the Apache License, Version 2.0
- ~ (the "License"); you may not use this file except in compliance with
- ~ the License. You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- ~
- -->
-<mat-form-field style="width: 100%; margin-top: 3px" appearance="none">
- <mat-label>label selection</mat-label>
- <mat-select [(value)]="_selectedCategory" placeholder="selected category">
- <mat-option *ngFor="let category of _categories" [value]="category">
- {{category}}
- </mat-option>
- </mat-select>
-</mat-form-field>
-<mat-chip-list style="margin-bottom: 20px">
- <mat-chip *ngFor="let label of _labels[_selectedCategory]" [selectable]="selectable"
- [removable]="removable" [style.color]="colorService.getColor(label)" (click)="selectLabel({category: _selectedCategory, name: label})">
- <!--<mat-icon matListIcon [style.color]="getColor(label)" style="margin-top: 7px; margin-right: 0px; font-size: 16px">speaker_notes</mat-icon>-->
- <span style="margin-left: 0px; position: relative">{{label}}</span>
- </mat-chip>
-</mat-chip-list>
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/components/label-selection/label-selection.component.ts b/ui/src/app/data-explorer/components/widgets/line-chart/components/label-selection/label-selection.component.ts
deleted file mode 100644
index fe3b7b4..0000000
--- a/ui/src/app/data-explorer/components/widgets/line-chart/components/label-selection/label-selection.component.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import { ColorService } from '../../services/color.service';
-
-@Component({
- selector: 'sp-label-selection',
- templateUrl: './label-selection.component.html',
- styleUrls: ['./label-selection.component.css']
-})
-export class LabelSelectionComponent implements OnInit {
-
- @Output() selectedLabelChange: EventEmitter<{category, name}> = new EventEmitter<{category, name}>();
-
- @Input()
- set labels(labels) {
- this._labels = labels;
- this.setup();
- }
-
- public _labels;
- public _selectedLabel: {category, name};
- public _categories;
- public _selectedCategory: string;
-
- private selectable = true;
- private removable = false;
-
- constructor(public colorService: ColorService) {
- }
-
- ngOnInit(): void {
- }
-
- setup() {
- this._categories = Object.keys(this._labels);
- this._selectedCategory = this._categories[0];
- this._selectedLabel = {category: this._selectedCategory, name: this._labels[this._selectedCategory][0]};
- this.selectedLabelChange.emit(this._selectedLabel);
- }
-
- selectLabel(label: {category, name}) {
- this._selectedLabel = label;
- this.selectedLabelChange.emit(this._selectedLabel);
- }
-}
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/labeling/labeling.dialog.css b/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/labeling/labeling.dialog.css
deleted file mode 100644
index 3d01810..0000000
--- a/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/labeling/labeling.dialog.css
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.mat-dialog-title {
- margin: -24px -24px 0px -24px !important;
- padding: 10px 24px;
- background: #39B54A;
- color: #fff;
- cursor: move;
-}
-
-.mat-dialog-title .mat-icon {
- float: right;
- top: 5px;
- padding: 5px 24px;
- cursor: grab;
-}
-
-.mat-dialog-container {
- padding-top: 0px;
- margin-top: 0px;
-}
\ No newline at end of file
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/labeling/labeling.dialog.html b/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/labeling/labeling.dialog.html
deleted file mode 100644
index 650aae3..0000000
--- a/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/labeling/labeling.dialog.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!--
- ~ Licensed to the Apache Software Foundation (ASF) under one or more
- ~ contributor license agreements. See the NOTICE file distributed with
- ~ this work for additional information regarding copyright ownership.
- ~ The ASF licenses this file to You under the Apache License, Version 2.0
- ~ (the "License"); you may not use this file except in compliance with
- ~ the License. You may obtain a copy of the License at
- ~
- ~ http://www.apache.org/licenses/LICENSE-2.0
- ~
- ~ Unless required by applicable law or agreed to in writing, software
- ~ distributed under the License is distributed on an "AS IS" BASIS,
- ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- ~ See the License for the specific language governing permissions and
- ~ limitations under the License.
- ~
- -->
-<h1 mat-dialog-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle xmlns="http://www.w3.org/1999/html">
- Labeling<mat-icon matTooltip="You can move this dialog." >drag_handle</mat-icon></h1>
-<div mat-dialog-content style="overflow: hidden">
- <sp-point-selection-info
- [startX]="data.startX"
- [endX]="data.endX"
- [n_selected_points]="data.n_selected_points">
- </sp-point-selection-info>
- <sp-label-selection
- [labels]="data.labels"
- (selectedLabelChange) ="handleSelectedLabelChange($event)">
- </sp-label-selection>
-</div>
-<div mat-dialog-actions>
- <button mat-button (click)="onNoClick()"
- matTooltip="Abort labeling of selected data points." cdkFocusInitial>Close</button>
- <button mat-button [mat-dialog-close]="data.selected_label"
- matTooltip="Confirm labeling of selected data points.">Done</button>
-</div>
\ No newline at end of file
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/labeling/labeling.dialog.ts b/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/labeling/labeling.dialog.ts
deleted file mode 100644
index 771b9f3..0000000
--- a/ui/src/app/data-explorer/components/widgets/line-chart/dialogs/labeling/labeling.dialog.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { Component, EventEmitter, Inject, Input, OnInit, Output } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-
-export interface IDialogData {
- startX: string;
- endX: string;
- n_selected_points: number;
- labels: object;
- selected_label: string;
-}
-
-@Component({
- selector: 'sp-dialog-labeling',
- templateUrl: './labeling.dialog.html',
- styleUrls: ['./labeling.dialog.css']
-})
-export class LabelingDialog implements OnInit {
-
- constructor(
- public dialogRef: MatDialogRef<LabelingDialog>,
- @Inject(MAT_DIALOG_DATA) public data: IDialogData) {
- }
-
- ngOnInit(): void {
- }
-
- onNoClick(): void {
- this.dialogRef.close();
- }
-
- handleSelectedLabelChange(label: {category, name}) {
- this.data.selected_label = label.name;
- }
-
-}
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.ts b/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.ts
index 696ce86..b4c07b3 100644
--- a/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.ts
@@ -22,7 +22,6 @@ 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 { LabelingDialog } from './dialogs/labeling/labeling.dialog';
import { ColorService } from './services/color.service';
import { BaseDataExplorerWidget } from '../base/base-data-explorer-widget';
import { EventPropertyUnion } from '../../../../core-model/gen/streampipes-model';
diff --git a/ui/src/app/data-explorer/data-explorer.module.ts b/ui/src/app/data-explorer/data-explorer.module.ts
index 508383e..bc62e40 100644
--- a/ui/src/app/data-explorer/data-explorer.module.ts
+++ b/ui/src/app/data-explorer/data-explorer.module.ts
@@ -66,8 +66,6 @@ import { ResizeService } from './services/resize.service';
import { GroupConfigurationComponent } from './components/widgets/utils/group-configuration/group-configuration.component';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { PointSelectionInfoComponent } from './components/widgets/line-chart/components/point-selection-info/point-selection-info.component';
-import { LabelSelectionComponent } from './components/widgets/line-chart/components/label-selection/label-selection.component';
-import { LabelingDialog } from './components/widgets/line-chart/dialogs/labeling/labeling.dialog';
import { ColorService } from './components/widgets/line-chart/services/color.service';
const dashboardWidgets = [];
@@ -130,9 +128,7 @@ export const MY_NATIVE_FORMATS = {
NoDataInDateRangeComponent,
LoadDataSpinnerComponent,
DataDownloadDialog,
- LabelingDialog,
SelectPropertiesComponent,
- LabelSelectionComponent ,
PointSelectionInfoComponent,
AggregateConfigurationComponent,
GroupConfigurationComponent
@@ -157,7 +153,6 @@ export const MY_NATIVE_FORMATS = {
DataExplorerComponent,
DataExplorerAddVisualizationDialogComponent,
DataDownloadDialog,
- LabelingDialog,
DataExplorerEditDataViewDialogComponent
]
})
[incubator-streampipes] 01/02: Move labels component
Posted by ze...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch STREAMPIPES-234
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit edbc416a02c6a4d4497a980a9a5e0b196e560a43
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Thu Oct 1 22:23:42 2020 +0200
Move labels component
---
ui/src/app/core-ui/core-ui.module.ts | 114 ++++++++++-----------
.../image-categorize.component.html | 4 +-
.../image-categorize/image-categorize.component.ts | 2 +-
.../image-labeling/image-labeling.component.html | 4 +-
.../image-labeling/image-labeling.component.ts | 2 +-
.../configure-labels.component.css | 0
.../configure-labels.component.html | 1 +
.../configure-labels/configure-labels.component.ts | 15 +++
.../select-label/select-label.component.css} | 0
.../select-label/select-label.component.html} | 0
.../select-label/select-label.component.ts} | 10 +-
.../line-chart/line-chart-widget.component.html | 4 +-
12 files changed, 86 insertions(+), 70 deletions(-)
diff --git a/ui/src/app/core-ui/core-ui.module.ts b/ui/src/app/core-ui/core-ui.module.ts
index dd54a06..80d04b8 100644
--- a/ui/src/app/core-ui/core-ui.module.ts
+++ b/ui/src/app/core-ui/core-ui.module.ts
@@ -16,63 +16,63 @@
*
*/
-import {CommonModule} from '@angular/common';
-import {NgModule} from '@angular/core';
-import {FlexLayoutModule} from '@angular/flex-layout';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FlexLayoutModule } from '@angular/flex-layout';
-import {CdkTableModule} from '@angular/cdk/table';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatNativeDateModule} from '@angular/material/core';
-import {MatDatepickerModule} from '@angular/material/datepicker';
-import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-import {MatSnackBarModule} from '@angular/material/snack-bar';
-import {CustomMaterialModule} from '../CustomMaterial/custom-material.module';
+import { CdkTableModule } from '@angular/cdk/table';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
-import {MatChipsModule} from '@angular/material/chips';
-import {MatSliderModule} from '@angular/material/slider';
-import {PlotlyViaWindowModule} from 'angular-plotly.js';
-import {ImageAnnotationsComponent} from './image/components/image-annotations/image-annotations.component';
-import {ImageBarComponent} from './image/components/image-bar/image-bar.component';
-import {ImageContainerComponent} from './image/components/image-container/image-container.component';
-import {ImageLabelsComponent} from './image/components/image-labels/image-labels.component';
-import {ImageCategorizeComponent} from './image/image-categorize/image-categorize.component';
-import {ImageLabelingComponent} from './image/image-labeling/image-labeling.component';
-import {ImageViewerComponent} from './image/image-viewer/image-viewer.component';
-import {ImageComponent} from './image/image.component';
-import {BrushLabelingService} from './image/services/BrushLabeling.service';
-import {ColorService} from './image/services/color.service';
-import {PolygonLabelingService} from './image/services/PolygonLabeling.service';
-import {ReactLabelingService} from './image/services/ReactLabeling.service';
-import {CocoFormatService} from "./image/services/CocoFormat.service";
-import {LabelingModeService} from "./image/services/LabelingMode.service";
-import {StandardDialogComponent} from "./dialog/standard-dialog/standard-dialog.component";
-import {PanelDialogComponent} from "./dialog/panel-dialog/panel-dialog.component";
-import {DialogService} from "./dialog/base-dialog/base-dialog.service";
-import {PortalModule} from "@angular/cdk/portal";
-import {OverlayModule} from "@angular/cdk/overlay";
-import {ConfirmDialogComponent} from "./dialog/confirm-dialog/confirm-dialog.component";
-import {StaticAnyInput} from "./static-properties/static-any-input/static-any-input.component";
-import {StaticPropertyComponent} from "./static-properties/static-property.component";
-import {StaticFreeInputComponent} from "./static-properties/static-free-input/static-free-input.component";
-import {StaticSecretInputComponent} from "./static-properties/static-secret-input/static-secret-input.component";
-import {StaticFileInputComponent} from "./static-properties/static-file-input/static-file-input.component";
-import {StaticMappingNaryComponent} from "./static-properties/static-mapping-nary/static-mapping-nary.component";
-import {StaticMappingUnaryComponent} from "./static-properties/static-mapping-unary/static-mapping-unary.component";
-import {StaticGroupComponent} from "./static-properties/static-group/static-group.component";
-import {StaticAlternativesComponent} from "./static-properties/static-alternatives/static-alternatives.component";
-import {StaticCollectionComponent} from "./static-properties/static-collection/static-collection.component";
-import {StaticColorPickerComponent} from "./static-properties/static-color-picker/static-color-picker.component";
-import {StaticCodeInputComponent} from "./static-properties/static-code-input/static-code-input.component";
-import {StaticOneOfInputComponent} from "./static-properties/static-one-of-input/static-one-of-input.component";
-import {StaticRuntimeResolvableAnyInputComponent} from "./static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component";
-import {StaticRuntimeResolvableOneOfInputComponent} from "./static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component";
-import {RuntimeResolvableService} from "./static-properties/static-runtime-resolvable-input/runtime-resolvable.service";
-import {StaticFileRestService} from "./static-properties/static-file-input/static-file-rest.service";
-import {DisplayRecommendedPipe} from "./static-properties/filter/display-recommended.pipe";
-import {ColorPickerModule} from "ngx-color-picker";
-import {QuillModule} from "ngx-quill";
-import {CodemirrorModule} from "@ctrl/ngx-codemirror";
-import {MatAutocompleteModule} from "@angular/material/autocomplete";
+import { MatChipsModule } from '@angular/material/chips';
+import { MatSliderModule } from '@angular/material/slider';
+import { PlotlyViaWindowModule } from 'angular-plotly.js';
+import { ImageAnnotationsComponent } from './image/components/image-annotations/image-annotations.component';
+import { ImageBarComponent } from './image/components/image-bar/image-bar.component';
+import { ImageContainerComponent } from './image/components/image-container/image-container.component';
+import { SelectLabelComponent } from './labels/components/select-label/select-label.component';
+import { ImageCategorizeComponent } from './image/image-categorize/image-categorize.component';
+import { ImageLabelingComponent } from './image/image-labeling/image-labeling.component';
+import { ImageViewerComponent } from './image/image-viewer/image-viewer.component';
+import { ImageComponent } from './image/image.component';
+import { BrushLabelingService } from './image/services/BrushLabeling.service';
+import { ColorService } from './image/services/color.service';
+import { PolygonLabelingService } from './image/services/PolygonLabeling.service';
+import { ReactLabelingService } from './image/services/ReactLabeling.service';
+import { CocoFormatService } from './image/services/CocoFormat.service';
+import { LabelingModeService } from './image/services/LabelingMode.service';
+import { StandardDialogComponent } from './dialog/standard-dialog/standard-dialog.component';
+import { PanelDialogComponent } from './dialog/panel-dialog/panel-dialog.component';
+import { DialogService } from './dialog/base-dialog/base-dialog.service';
+import { PortalModule } from '@angular/cdk/portal';
+import { OverlayModule } from '@angular/cdk/overlay';
+import { ConfirmDialogComponent } from './dialog/confirm-dialog/confirm-dialog.component';
+import { StaticAnyInput } from './static-properties/static-any-input/static-any-input.component';
+import { StaticPropertyComponent } from './static-properties/static-property.component';
+import { StaticFreeInputComponent } from './static-properties/static-free-input/static-free-input.component';
+import { StaticSecretInputComponent } from './static-properties/static-secret-input/static-secret-input.component';
+import { StaticFileInputComponent } from './static-properties/static-file-input/static-file-input.component';
+import { StaticMappingNaryComponent } from './static-properties/static-mapping-nary/static-mapping-nary.component';
+import { StaticMappingUnaryComponent } from './static-properties/static-mapping-unary/static-mapping-unary.component';
+import { StaticGroupComponent } from './static-properties/static-group/static-group.component';
+import { StaticAlternativesComponent } from './static-properties/static-alternatives/static-alternatives.component';
+import { StaticCollectionComponent } from './static-properties/static-collection/static-collection.component';
+import { StaticColorPickerComponent } from './static-properties/static-color-picker/static-color-picker.component';
+import { StaticCodeInputComponent } from './static-properties/static-code-input/static-code-input.component';
+import { StaticOneOfInputComponent } from './static-properties/static-one-of-input/static-one-of-input.component';
+import { StaticRuntimeResolvableAnyInputComponent } from './static-properties/static-runtime-resolvable-any-input/static-runtime-resolvable-any-input.component';
+import { StaticRuntimeResolvableOneOfInputComponent } from './static-properties/static-runtime-resolvable-oneof-input/static-runtime-resolvable-oneof-input.component';
+import { RuntimeResolvableService } from './static-properties/static-runtime-resolvable-input/runtime-resolvable.service';
+import { StaticFileRestService } from './static-properties/static-file-input/static-file-rest.service';
+import { DisplayRecommendedPipe } from './static-properties/filter/display-recommended.pipe';
+import { ColorPickerModule } from 'ngx-color-picker';
+import { QuillModule } from 'ngx-quill';
+import { CodemirrorModule } from '@ctrl/ngx-codemirror';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
@NgModule({
imports: [
@@ -102,7 +102,7 @@ import {MatAutocompleteModule} from "@angular/material/autocomplete";
ImageComponent,
ImageContainerComponent,
ImageLabelingComponent,
- ImageLabelsComponent,
+ SelectLabelComponent,
ImageBarComponent,
ImageAnnotationsComponent,
ImageCategorizeComponent,
@@ -143,7 +143,7 @@ import {MatAutocompleteModule} from "@angular/material/autocomplete";
exports: [
ImageComponent,
ImageLabelingComponent,
- ImageLabelsComponent,
+ SelectLabelComponent,
StandardDialogComponent,
PanelDialogComponent,
ConfirmDialogComponent,
diff --git a/ui/src/app/core-ui/image/image-categorize/image-categorize.component.html b/ui/src/app/core-ui/image/image-categorize/image-categorize.component.html
index 1cb3110..6f50352 100644
--- a/ui/src/app/core-ui/image/image-categorize/image-categorize.component.html
+++ b/ui/src/app/core-ui/image/image-categorize/image-categorize.component.html
@@ -20,11 +20,11 @@
<div fxLayout="column" fxLayoutAlign="space-between " >
<div fxLayout="row" fxLayoutAlign="space-around start">
- <sp-image-labels
+ <sp-select-label
[labels]="labels"
[enableShortCuts]="true"
(labelChange)="handleLabelChange($event)">
- </sp-image-labels>
+ </sp-select-label>
<div fxLayout="column" fxLayoutAlign="space-between " >
<div fxLayout="row" fxLayoutAlign="center center" >
diff --git a/ui/src/app/core-ui/image/image-categorize/image-categorize.component.ts b/ui/src/app/core-ui/image/image-categorize/image-categorize.component.ts
index bead55f..dac99d0 100644
--- a/ui/src/app/core-ui/image/image-categorize/image-categorize.component.ts
+++ b/ui/src/app/core-ui/image/image-categorize/image-categorize.component.ts
@@ -116,7 +116,7 @@ export class ImageCategorizeComponent implements OnInit, AfterViewInit {
/* sp-image-view handler */
- /* sp-image-labels handler */
+ /* sp-select-label handler */
handleLabelChange(label: {category, label}) {
this.selectedLabels.push(label);
}
diff --git a/ui/src/app/core-ui/image/image-labeling/image-labeling.component.html b/ui/src/app/core-ui/image/image-labeling/image-labeling.component.html
index 005943f..8940538 100644
--- a/ui/src/app/core-ui/image/image-labeling/image-labeling.component.html
+++ b/ui/src/app/core-ui/image/image-labeling/image-labeling.component.html
@@ -21,11 +21,11 @@
<div fxLayout="column" fxLayoutAlign="space-between " >
<div fxLayout="row" fxLayoutAlign="space-around start">
- <sp-image-labels style="width: 270px"
+ <sp-select-label style="width: 270px"
[labels]="labels"
[enableShortCuts]="isHoverComponent"
(labelChange)="handleLabelChange($event)">
- </sp-image-labels>
+ </sp-select-label>
<div fxLayout="column" fxLayoutAlign="space-between " >
<div style="display: flex; position: relative">
diff --git a/ui/src/app/core-ui/image/image-labeling/image-labeling.component.ts b/ui/src/app/core-ui/image/image-labeling/image-labeling.component.ts
index 16c82c8..1fe46db 100644
--- a/ui/src/app/core-ui/image/image-labeling/image-labeling.component.ts
+++ b/ui/src/app/core-ui/image/image-labeling/image-labeling.component.ts
@@ -206,7 +206,7 @@ export class ImageLabelingComponent implements OnInit {
this.isDrawing = bool;
}
- /* sp-image-labels handler */
+ /* sp-select-label handler */
handleLabelChange(label: {category, label}) {
this.selectedLabel = label;
}
diff --git a/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.css b/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.html b/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.html
new file mode 100644
index 0000000..2dfb465
--- /dev/null
+++ b/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.html
@@ -0,0 +1 @@
+<p>configure-labels works!</p>
diff --git a/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts b/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts
new file mode 100644
index 0000000..b07c3f3
--- /dev/null
+++ b/ui/src/app/core-ui/labels/components/configure-labels/configure-labels.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'configure-labels',
+ templateUrl: './configure-labels.component.html',
+ styleUrls: ['./configure-labels.component.css']
+})
+export class ConfigureLabelsComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit(): void {
+ }
+
+}
diff --git a/ui/src/app/core-ui/image/components/image-labels/image-labels.component.css b/ui/src/app/core-ui/labels/components/select-label/select-label.component.css
similarity index 100%
rename from ui/src/app/core-ui/image/components/image-labels/image-labels.component.css
rename to ui/src/app/core-ui/labels/components/select-label/select-label.component.css
diff --git a/ui/src/app/core-ui/image/components/image-labels/image-labels.component.html b/ui/src/app/core-ui/labels/components/select-label/select-label.component.html
similarity index 100%
rename from ui/src/app/core-ui/image/components/image-labels/image-labels.component.html
rename to ui/src/app/core-ui/labels/components/select-label/select-label.component.html
diff --git a/ui/src/app/core-ui/image/components/image-labels/image-labels.component.ts b/ui/src/app/core-ui/labels/components/select-label/select-label.component.ts
similarity index 89%
rename from ui/src/app/core-ui/image/components/image-labels/image-labels.component.ts
rename to ui/src/app/core-ui/labels/components/select-label/select-label.component.ts
index 928c646..43b3144 100644
--- a/ui/src/app/core-ui/image/components/image-labels/image-labels.component.ts
+++ b/ui/src/app/core-ui/labels/components/select-label/select-label.component.ts
@@ -17,14 +17,14 @@
*/
import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
-import { ColorService } from '../../services/color.service';
+import { ColorService } from '../../../image/services/color.service';
@Component({
- selector: 'sp-image-labels',
- templateUrl: './image-labels.component.html',
- styleUrls: ['./image-labels.component.css']
+ selector: 'sp-select-label',
+ templateUrl: './select-label.component.html',
+ styleUrls: ['./select-label.component.css']
})
-export class ImageLabelsComponent implements OnInit {
+export class SelectLabelComponent implements OnInit {
@Input()
set labels(labels) {
diff --git a/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.html b/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.html
index 5153f61..5decf46 100644
--- a/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.html
+++ b/ui/src/app/data-explorer/components/widgets/line-chart/line-chart-widget.component.html
@@ -70,11 +70,11 @@
<sp-no-data-in-date-range *ngIf="showNoDataInDateRange" [viewDateRange]="viewDateRange"></sp-no-data-in-date-range>
- <sp-image-labels *ngIf="labelingModeOn"
+ <sp-select-label *ngIf="labelingModeOn"
[labels]="possibleLabels"
[enableShortCuts]="true"
(labelChange)="handleLabelChange($event)">
- </sp-image-labels>
+ </sp-select-label>
<plotly-plot *ngIf="data !== undefined && !showNoDataInDateRange && !showIsLoadingData"
class="plotly-container"