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/08/26 15:16:42 UTC
[incubator-streampipes] branch dev updated (ad6e73c -> ecb4672)
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a change to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git.
from ad6e73c [STREAMPIPES-200] Add custom typography to theming provider
new f348f96 Working on new image visualization for data explorer
new 6d74083 Fix image bar
new 8c4e0c8 Remove css form html code in image bar
new 5d380e9 [STREAMPIPES-107] Fix image widget in data explorer
new ecb4672 Merge branch 'dev' of github.com:apache/incubator-streampipes into dev
The 5 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:
.../app-image-labeling.component.html | 2 +-
.../app-image-labeling.component.ts | 60 +++++
ui/src/app/core-ui/core-ui.module.ts | 45 ++--
.../components/image-bar/image-bar.component.css | 10 +-
.../components/image-bar/image-bar.component.html | 27 ++-
.../components/image-bar/image-bar.component.ts | 33 +--
.../image-container/image-container.component.ts | 5 +-
.../image-categorize.component.html | 18 +-
.../image-labeling/image-labeling.component.html | 112 ++++-----
.../image-labeling/image-labeling.component.ts | 265 +++++++++++----------
.../image/image-viewer/image-viewer.component.html | 12 +-
.../image/image-viewer/image-viewer.component.ts | 100 +-------
.../widgets/image/image-widget.component.html | 10 +-
.../widgets/image/image-widget.component.ts | 42 ++--
.../line-chart/line-chart-widget.component.html | 12 -
15 files changed, 376 insertions(+), 377 deletions(-)
[incubator-streampipes] 04/05: [STREAMPIPES-107] Fix image widget
in data explorer
Posted by ze...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 5d380e9cf7ecfa898217287679c14dc6c483ce1b
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Wed Aug 26 17:14:27 2020 +0200
[STREAMPIPES-107] Fix image widget in data explorer
---
.../app-image-labeling.component.html | 2 +-
.../components/image-bar/image-bar.component.html | 4 +--
.../components/image-bar/image-bar.component.ts | 2 +-
.../image/image-viewer/image-viewer.component.html | 1 -
.../image/image-viewer/image-viewer.component.ts | 37 +---------------------
.../widgets/image/image-widget.component.html | 10 ++----
.../widgets/image/image-widget.component.ts | 27 +++++-----------
.../line-chart/line-chart-widget.component.html | 12 -------
8 files changed, 14 insertions(+), 81 deletions(-)
diff --git a/ui/src/app/app-image-labeling/app-image-labeling.component.html b/ui/src/app/app-image-labeling/app-image-labeling.component.html
index 818003e..e38f32e 100644
--- a/ui/src/app/app-image-labeling/app-image-labeling.component.html
+++ b/ui/src/app/app-image-labeling/app-image-labeling.component.html
@@ -30,6 +30,6 @@
</div>
<div class="fixed-height page-container-padding-inner" fxLayout="column" fxFlex="100">
- <sp-image-labeling [measureName]="selectedMeasure?.measureName" [eventSchema]="selectedMeasure?.eventSchema"></sp-image-labeling>
+ <sp-image-labeling [measureName]="selectedMeasure?.measureName"></sp-image-labeling>
</div>
</div>
\ No newline at end of file
diff --git a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html
index 54040d8..66fc60e 100644
--- a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html
+++ b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html
@@ -24,14 +24,13 @@
<div fxLayout="row" fxLayoutAlign="center center" class="imageBar">
<div fxFlex="40" fxLayoutAlign="end center">
- <img class="imagePreview" *ngIf="selectedIndex >= 3" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex - 3])}}" (click)="changeImage(selectedIndex - 3)">
<img class="imagePreview" *ngIf="selectedIndex >= 2" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex - 2])}}" (click)="changeImage(selectedIndex - 2)">
<img class="imagePreview" *ngIf="selectedIndex >= 1" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex - 1])}}" (click)="changeImage(selectedIndex - 1)">
</div>
<div fxFlex="20">
<div fxLayout="row" fxLayoutAlign="center">
- <img class="imagePreview imageFocus" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex])}}" (click)="changeImage(3)">
+ <img class="imagePreview imageFocus" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex])}}" (click)="changeImage(selectedIndex)">
</div>
</div>
@@ -39,7 +38,6 @@
<div fxLayout="row" fxLayoutAlign="start center">
<img class="imagePreview" *ngIf="selectedIndex < maxImages - 1" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex + 1])}}" (click)="changeImage(selectedIndex + 1)">
<img class="imagePreview" *ngIf="selectedIndex < maxImages - 2" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex + 2])}}" (click)="changeImage(selectedIndex + 2)">
- <img class="imagePreview" *ngIf="selectedIndex < maxImages - 3" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex + 3])}}" (click)="changeImage(selectedIndex + 3)">
</div>
</div>
</div>
diff --git a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts
index 32be1b2..a62ecb1 100644
--- a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts
+++ b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts
@@ -41,7 +41,7 @@ export class ImageBarComponent implements OnInit {
public maxImages;
- constructor(private restService: DatalakeRestService) { }
+ constructor(public restService: DatalakeRestService) { }
ngOnInit(): void {
}
diff --git a/ui/src/app/core-ui/image/image-viewer/image-viewer.component.html b/ui/src/app/core-ui/image/image-viewer/image-viewer.component.html
index 7ed9789..6f29f71 100644
--- a/ui/src/app/core-ui/image/image-viewer/image-viewer.component.html
+++ b/ui/src/app/core-ui/image/image-viewer/image-viewer.component.html
@@ -27,7 +27,6 @@
</div>
<br />
-<!-- <div fxLayout="row" fxLayoutAlign="center center"><div>{{pageIndex + 1}} / {{pageSum}}</div></div>-->
<sp-image-bar style="width: 100%"
[imagesRoutes]="imagesRoutes"
[selectedIndex]="imagesIndex"
diff --git a/ui/src/app/core-ui/image/image-viewer/image-viewer.component.ts b/ui/src/app/core-ui/image/image-viewer/image-viewer.component.ts
index d816505..e8d99c3 100644
--- a/ui/src/app/core-ui/image/image-viewer/image-viewer.component.ts
+++ b/ui/src/app/core-ui/image/image-viewer/image-viewer.component.ts
@@ -23,51 +23,16 @@ import { DatalakeRestService } from '../../../core-services/datalake/datalake-re
templateUrl: './image-viewer.component.html',
styleUrls: ['./image-viewer.component.css']
})
-export class ImageViewerComponent implements OnInit {
+export class ImageViewerComponent {
@Input()
public imagesRoutes;
public imagesIndex = 0;
- // public imagesIndex: number;
-
- // @Input()
- // measureName; // TODO: Remove hard coded Index, should be injected
-
- // eventSchema = undefined; // TODO: event schema should be also injected
- // imageField = undefined;
- // pageIndex = undefined;
- // pageSum = undefined;
-
- // Flags
- // private setImagesIndexToFirst = false;
- // private setImagesIndexToLast = false;
constructor() {}
- ngOnInit(): void {
- // this.imagesSrcs = [];
- // this.imagesRoutes.forEach(route => {
- // this.imagesSrcs.push(this.restService.getImageUrl(route));
- // });
- }
-
- // /* sp-image-bar */
handleImageIndexChange(index) {
this.imagesIndex = index;
}
- // handleImagePageUp(e) {
- // this.pageIndex += 1;
- // this.setImagesIndexToLast = true;
- // this.loadData();
- // }
- //
- // handleImagePageDown(e) {
- // if (this.pageIndex - 1 >= 0) {
- // this.pageIndex -= 1;
- // this.setImagesIndexToFirst = true;
- // this.loadData();
- // }
- // }
-
}
diff --git a/ui/src/app/data-explorer/components/widgets/image/image-widget.component.html b/ui/src/app/data-explorer/components/widgets/image/image-widget.component.html
index 686c710..a2061e5 100644
--- a/ui/src/app/data-explorer/components/widgets/image/image-widget.component.html
+++ b/ui/src/app/data-explorer/components/widgets/image/image-widget.component.html
@@ -21,7 +21,6 @@
<div class="widget-inner-options" style="margin-left: 0;margin-right: 0;margin-top: 0;">
<div fxFlex="100" fxLayout="row">
<div fxFlex="100" fxLayout="row" fxLayoutAlign="start center" style="margin-left: 0px;margin-right: 0px;">
-<!-- <sp-select-properties (changeSelectedProperties)="setSelectedColumn($event)" [availableProperties]="availableColumns" [selectedProperties]="selectedColumn"></sp-select-properties>-->
<sp-select-properties [availableProperties]="availableColumns" [selectedProperties]="selectedColumn"></sp-select-properties>
</div>
</div>
@@ -29,12 +28,7 @@
<div class="widget-inner-content">
<sp-load-data-spinner *ngIf="showIsLoadingData"></sp-load-data-spinner>
- <sp-no-data-in-date-range *ngIf="showNoDataInDateRange" [viewDateRange]="viewDateRange"></sp-no-data-in-date-range>
-<!-- <sp-image [availableImageData]="availableImageData"></sp-image>-->
- <sp-image-viewer [imagesRoutes]="imagesRoutes"></sp-image-viewer>
- <div class="image-container">
-
- </div>
-
+ <sp-no-data-in-date-range *ngIf="imagesRoutes.length === 0" [viewDateRange]="viewDateRange"></sp-no-data-in-date-range>
+ <sp-image-viewer *ngIf="imagesRoutes.length > 0" [imagesRoutes]="imagesRoutes"></sp-image-viewer>
</div>
</div>
diff --git a/ui/src/app/data-explorer/components/widgets/image/image-widget.component.ts b/ui/src/app/data-explorer/components/widgets/image/image-widget.component.ts
index be507a3..033fa88 100644
--- a/ui/src/app/data-explorer/components/widgets/image/image-widget.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/image/image-widget.component.ts
@@ -16,14 +16,13 @@
*
*/
-import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
-import {MatSort} from '@angular/material/sort';
-import {MatTableDataSource} from '@angular/material/table';
-import {DataResult} from '../../../../core-model/datalake/DataResult';
-import {DatalakeRestService} from '../../../../core-services/datalake/datalake-rest.service';
-import {BaseDataExplorerWidget} from '../base/base-data-explorer-widget';
-import {MatDialog} from '@angular/material/dialog';
-import {EventPropertyUnion, EventSchema} from "../../../../core-model/gen/streampipes-model";
+import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { DataResult } from '../../../../core-model/datalake/DataResult';
+import { DatalakeRestService } from '../../../../core-services/datalake/datalake-rest.service';
+import { BaseDataExplorerWidget } from '../base/base-data-explorer-widget';
+import { MatDialog } from '@angular/material/dialog';
+import { EventPropertyUnion, EventSchema } from '../../../../core-model/gen/streampipes-model';
@Component({
selector: 'sp-data-explorer-image-widget',
@@ -36,16 +35,12 @@ export class ImageWidgetComponent extends BaseDataExplorerWidget implements OnIn
availableColumns: EventPropertyUnion[];
selectedColumn: EventPropertyUnion;
- columnNames: string[];
-
- // availableImageData: DataResult;
public imagesRoutes = [];
constructor(
protected dataLakeRestService: DatalakeRestService,
- protected dialog: MatDialog,
- private restService: DatalakeRestService) {
+ protected dialog: MatDialog) {
super(dataLakeRestService, dialog);
}
@@ -73,18 +68,12 @@ export class ImageWidgetComponent extends BaseDataExplorerWidget implements OnIn
const imageField = res.headers.findIndex(name => name === this.selectedColumn.runtimeName);
res.rows.forEach(row => {
this.imagesRoutes.push(row[imageField]);
- // this.imagesSrcs.push(this.restService.getImageUrl(row[this.selectedColumn.runtimeName]));
});
}
}
);
}
- // setSelectedColumn(selectedColumns: EventPropertyUnion[]) {
- // this.selectedColumn = selectedColumns;
- // this.columnNames = this.getRuntimeNames(this.selectedColumns);
- // }
-
ngOnDestroy(): void {
}
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 a75f3fe..1e4690a 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
@@ -74,15 +74,3 @@
</plotly-plot>
</div>
</div>
-<!--<div fxLayout="column" fxLayoutAlign="stretch">-->
-
-<!-- <div fxFlex="100" fxLayout="column" style="width: 100%;">-->
-<!-- <div fxLayout="column" fxFlex="100" fxLayoutAlign="center center">-->
-<!-- -->
-
- <!-- Chart -->
-
-<!-- </div>-->
-<!-- </div>-->
-<!--</div>-->
-
[incubator-streampipes] 02/05: Fix image bar
Posted by ze...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 6d740836ad13d8f4fcfc69cb575d38961b3d3e8b
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Wed Aug 26 16:32:06 2020 +0200
Fix image bar
---
.../components/image-bar/image-bar.component.html | 30 +++++-
.../components/image-bar/image-bar.component.ts | 13 ++-
.../image-categorize.component.html | 18 ++--
.../image-labeling/image-labeling.component.html | 112 ++++++++++-----------
.../image/image-viewer/image-viewer.component.html | 2 +-
5 files changed, 104 insertions(+), 71 deletions(-)
diff --git a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html
index d768eaf..718d794 100644
--- a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html
+++ b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html
@@ -16,13 +16,37 @@
~
-->
+<div fxLayout="row" fxLayoutAlign="center center"><div>{{selectedIndex + 1}} / {{maxImages}}</div></div>
+
<div fxLayout="row" fxLayoutAlign="space-around center" >
<button mat-icon-button (click)="nextPage()"> <mat-icon>skip_previous</mat-icon></button>
<button mat-icon-button (click)="nextImage()"> <mat-icon>keyboard_arrow_left</mat-icon></button>
- <div fxLayout="row" fxLayoutAlign="center " class="imageBar">
- <img *ngFor="let src of imagesSrcs; let i = index" src="{{this.restService.getImageUrl(src)}}" (click)="changeImage(i)"
- [style.border]="i == selectedIndex ? '5px solid #39b54a' : 'none'" style="height: 65px">
+<!-- <div fxLayout="row" fxLayoutAlign="center " class="imageBar">-->
+<!-- <img *ngFor="let src of _imageRoutes; let i = index" src="{{this.restService.getImageUrl(src)}}" (click)="changeImage(i)"-->
+<!-- [style.border]="i == selectedIndex ? '5px solid #39b54a' : 'none'" style="height: 65px">-->
+<!-- </div>-->
+
+ <div fxLayout="row" fxLayoutAlign="center center" class="imageBar">
+ <div fxFlex="40" fxLayoutAlign="end center">
+ <img *ngIf="selectedIndex >= 3" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex - 3])}}" (click)="changeImage(selectedIndex - 3)" style="height: 65px">
+ <img *ngIf="selectedIndex >= 2" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex - 2])}}" (click)="changeImage(selectedIndex - 2)" style="height: 65px">
+ <img *ngIf="selectedIndex >= 1" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex - 1])}}" (click)="changeImage(selectedIndex - 1)" style="height: 65px">
+ </div>
+
+ <div fxFlex="20">
+ <div fxLayout="row" fxLayoutAlign="center">
+ <img src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex])}}" (click)="changeImage(3)" style="border: '5px solid #39b54a'; height: 65px">
+ </div>
+ </div>
+
+ <div fxFlex="40">
+ <div fxLayout="row" fxLayoutAlign="start center">
+ <img *ngIf="selectedIndex < maxImages - 1" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex + 1])}}" (click)="changeImage(selectedIndex + 1)" style="height: 65px">
+ <img *ngIf="selectedIndex < maxImages - 2" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex + 2])}}" (click)="changeImage(selectedIndex + 2)" style="height: 65px">
+ <img *ngIf="selectedIndex < maxImages - 3" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex + 3])}}" (click)="changeImage(selectedIndex + 3)" style="height: 65px">
+ </div>
+ </div>
</div>
diff --git a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts
index 08ccbd6..bdccea4 100644
--- a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts
+++ b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts
@@ -17,6 +17,7 @@
import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
import { DatalakeRestService } from '../../../../core-services/datalake/datalake-rest.service';
+import { DetectedBoxModel } from '../../../../app-transport-monitoring/model/detected-box.model';
@Component({
selector: 'sp-image-bar',
@@ -25,11 +26,19 @@ import { DatalakeRestService } from '../../../../core-services/datalake/datalake
})
export class ImageBarComponent implements OnInit {
- @Input() imagesSrcs: string [];
+ public _imageRoutes;
+
+ @Input()
+ set imagesRoutes(imageRoutes) {
+ this.maxImages = imageRoutes.length;
+ this._imageRoutes = imageRoutes;
+ }
@Input() selectedIndex: number;
@Input() enableShortCuts: boolean;
@Output() indexChange: EventEmitter<number> = new EventEmitter<number>();
+
+ public maxImages;
// @Output() pageUp: EventEmitter<void> = new EventEmitter<void>();
// @Output() pageDown: EventEmitter<void> = new EventEmitter<void>();
@@ -48,7 +57,7 @@ export class ImageBarComponent implements OnInit {
}
previousImage() {
- if (this.selectedIndex < this.imagesSrcs.length - 1) {
+ if (this.selectedIndex < this._imageRoutes.length - 1) {
this.indexChange.emit(this.selectedIndex + 1);
} else {
// this.pageDown.emit();
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 2b090d1..1cb3110 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
@@ -46,14 +46,14 @@
</div>
</div>
<br />
- <div fxLayout="row" fxLayoutAlign="center center"><div>{{pageIndex + 1}} / {{pageSum}}</div></div>
- <sp-image-bar style="width: 100%"
- [imagesSrcs]="imagesSrcs"
- [selectedIndex]="imagesIndex"
- [enableShortCuts]="true"
- (indexChange)="handleImageIndexChange($event)"
- (pageUp)="handleImagePageUp($event)"
- (pageDown)="handleImagePageDown($event)">
- </sp-image-bar>
+<!-- <div fxLayout="row" fxLayoutAlign="center center"><div>{{pageIndex + 1}} / {{pageSum}}</div></div>-->
+<!-- <sp-image-bar style="width: 100%"-->
+<!-- [imagesSrcs]="imagesSrcs"-->
+<!-- [selectedIndex]="imagesIndex"-->
+<!-- [enableShortCuts]="true"-->
+<!-- (indexChange)="handleImageIndexChange($event)"-->
+<!-- (pageUp)="handleImagePageUp($event)"-->
+<!-- (pageDown)="handleImagePageDown($event)">-->
+<!-- </sp-image-bar>-->
</div>
</div>
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 c464c71..66c4db8 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,64 +21,64 @@
<div fxLayout="column" fxLayoutAlign="space-between " >
<div fxLayout="row" fxLayoutAlign="space-around start">
- <sp-image-labels style="width: 270px"
- [labels]="labels"
- [enableShortCuts]="isHoverComponent"
- (labelChange)="handleLabelChange($event)">
- </sp-image-labels>
+<!-- <sp-image-labels style="width: 270px"-->
+<!-- [labels]="labels"-->
+<!-- [enableShortCuts]="isHoverComponent"-->
+<!-- (labelChange)="handleLabelChange($event)">-->
+<!-- </sp-image-labels>-->
- <div fxLayout="column" fxLayoutAlign="space-between " >
- <div style="display: flex; position: relative">
- <button mat-button matTooltip="Edit Annotations"
- (click)="labelingMode.setNoneMode()" [style.background-color]="labelingMode.isNoneMode() ? 'lightgrey' : 'white'"> <mat-icon>create</mat-icon></button>
- <button mat-button matTooltip="Create React Annotation"
- (click)="labelingMode.setReactMode()" [style.background-color]="labelingMode.isReactMode() ? 'lightgrey' : 'white'"> <mat-icon>crop_3_2</mat-icon></button>
- <button mat-button matTooltip="Create Polygon Annotation"
- (click)="labelingMode.setPolygonMode()" [style.background-color]="labelingMode.isPolygonMode() ? 'lightgrey' : 'white'"> <mat-icon>details</mat-icon></button>
- <button mat-button matTooltip="Create Brush Annotation"
- (click)="labelingMode.setBrushMode()" [style.background-color]="labelingMode.isBrushMode() ? 'lightgrey' : 'white'"> <mat-icon>blur_circular</mat-icon></button>
- <mat-slider [min]="1" [max]="50" [step]="1" [thumbLabel]="true" [(ngModel)]="brushSize"></mat-slider>
- <button mat-button (click)="save()" style="position: absolute; right: 0px;"> <mat-icon>save</mat-icon></button>
- <button mat-button matTooltip="Description" [matMenuTriggerFor]="aboveMenu">
- <span class="material-icons">
- info
- </span></button>
- <mat-menu #aboveMenu="matMenu" yPosition="above">
- <p><em>The Description of the selected image</em></p>
- </mat-menu>
-
- </div>
+<!-- <div fxLayout="column" fxLayoutAlign="space-between " >-->
+<!-- <div style="display: flex; position: relative">-->
+<!-- <button mat-button matTooltip="Edit Annotations"-->
+<!-- (click)="labelingMode.setNoneMode()" [style.background-color]="labelingMode.isNoneMode() ? 'lightgrey' : 'white'"> <mat-icon>create</mat-icon></button>-->
+<!-- <button mat-button matTooltip="Create React Annotation"-->
+<!-- (click)="labelingMode.setReactMode()" [style.background-color]="labelingMode.isReactMode() ? 'lightgrey' : 'white'"> <mat-icon>crop_3_2</mat-icon></button>-->
+<!-- <button mat-button matTooltip="Create Polygon Annotation"-->
+<!-- (click)="labelingMode.setPolygonMode()" [style.background-color]="labelingMode.isPolygonMode() ? 'lightgrey' : 'white'"> <mat-icon>details</mat-icon></button>-->
+<!-- <button mat-button matTooltip="Create Brush Annotation"-->
+<!-- (click)="labelingMode.setBrushMode()" [style.background-color]="labelingMode.isBrushMode() ? 'lightgrey' : 'white'"> <mat-icon>blur_circular</mat-icon></button>-->
+<!-- <mat-slider [min]="1" [max]="50" [step]="1" [thumbLabel]="true" [(ngModel)]="brushSize"></mat-slider>-->
+<!-- <button mat-button (click)="save()" style="position: absolute; right: 0px;"> <mat-icon>save</mat-icon></button>-->
+<!-- <button mat-button matTooltip="Description" [matMenuTriggerFor]="aboveMenu">-->
+<!-- <span class="material-icons">-->
+<!-- info-->
+<!-- </span></button>-->
+<!-- <mat-menu #aboveMenu="matMenu" yPosition="above">-->
+<!-- <p><em>The Description of the selected image</em></p>-->
+<!-- </mat-menu>-->
+<!-- -->
+<!-- </div>-->
- <sp-image-container
- [imageSrc]="imagesSrcs[imagesIndex]"
- (childRedraw)="handleChildRedraw($event[0], $event[1])"
- (mouseDownLeft)="handleMouseDownLeft($event[0], $event[1], $event[2])"
- (mouseMove)="handleMouseMove($event[0], $event[1], $event[2])"
- (mouseMoveLeft)="handleMouseMoveLeft($event[0], $event[1], $event[2])"
- (mouseUpLeft)="handleMouseUpLeft($event[0], $event[1], $event[2], $event[3])"
- (shortCut)="handleImageViewShortCuts($event)"
- (dbclick)="handleImageViewDBClick($event[0], $event[1], $event[2])"
- (mouseDownRight)="handleMouseDownRight($event[0], $event[1], $event[2])"
- (isDrawing)="handleIsDrawing($event)">
- </sp-image-container>
- </div>
+<!-- <sp-image-container-->
+<!-- [imageSrc]="imagesSrcs[imagesIndex]"-->
+<!-- (childRedraw)="handleChildRedraw($event[0], $event[1])"-->
+<!-- (mouseDownLeft)="handleMouseDownLeft($event[0], $event[1], $event[2])"-->
+<!-- (mouseMove)="handleMouseMove($event[0], $event[1], $event[2])"-->
+<!-- (mouseMoveLeft)="handleMouseMoveLeft($event[0], $event[1], $event[2])"-->
+<!-- (mouseUpLeft)="handleMouseUpLeft($event[0], $event[1], $event[2], $event[3])"-->
+<!-- (shortCut)="handleImageViewShortCuts($event)"-->
+<!-- (dbclick)="handleImageViewDBClick($event[0], $event[1], $event[2])"-->
+<!-- (mouseDownRight)="handleMouseDownRight($event[0], $event[1], $event[2])"-->
+<!-- (isDrawing)="handleIsDrawing($event)">-->
+<!-- </sp-image-container>-->
+<!-- </div>-->
- <sp-image-annotations style="width: 270px"
- [annotations]="this.cocoFiles[this.imagesIndex]?.annotations"
- [labels]="labels"
- (changeAnnotationLabel)="handleChangeAnnotationLabel($event)"
- (deleteAnnotation)="handleDeleteAnnotation($event)">
- </sp-image-annotations>
- </div>
- <br />
- <div fxLayout="row" fxLayoutAlign="center center"><div>{{pageIndex + 1}} / {{pageSum}}</div></div>
- <sp-image-bar style="width: 100%"
- [imagesSrcs]="imagesSrcs"
- [selectedIndex]="imagesIndex"
- [enableShortCuts]="isHoverComponent"
- (indexChange)="handleImageIndexChange($event)"
- (pageUp)="handleImagePageUp($event)"
- (pageDown)="handleImagePageDown($event)">
- </sp-image-bar>
+<!-- <sp-image-annotations style="width: 270px"-->
+<!-- [annotations]="this.cocoFiles[this.imagesIndex]?.annotations"-->
+<!-- [labels]="labels"-->
+<!-- (changeAnnotationLabel)="handleChangeAnnotationLabel($event)"-->
+<!-- (deleteAnnotation)="handleDeleteAnnotation($event)">-->
+<!-- </sp-image-annotations>-->
+<!-- </div>-->
+<!-- <br />-->
+<!-- <div fxLayout="row" fxLayoutAlign="center center"><div>{{pageIndex + 1}} / {{pageSum}}</div></div>-->
+<!-- <sp-image-bar style="width: 100%"-->
+<!-- [imagesSrcs]="imagesSrcs"-->
+<!-- [selectedIndex]="imagesIndex"-->
+<!-- [enableShortCuts]="isHoverComponent"-->
+<!-- (indexChange)="handleImageIndexChange($event)"-->
+<!-- (pageUp)="handleImagePageUp($event)"-->
+<!-- (pageDown)="handleImagePageDown($event)">-->
+<!-- </sp-image-bar>-->
</div>
</div>
\ No newline at end of file
diff --git a/ui/src/app/core-ui/image/image-viewer/image-viewer.component.html b/ui/src/app/core-ui/image/image-viewer/image-viewer.component.html
index 87e4a3c..adcc65d 100644
--- a/ui/src/app/core-ui/image/image-viewer/image-viewer.component.html
+++ b/ui/src/app/core-ui/image/image-viewer/image-viewer.component.html
@@ -29,7 +29,7 @@
<!-- <div fxLayout="row" fxLayoutAlign="center center"><div>{{pageIndex + 1}} / {{pageSum}}</div></div>-->
<sp-image-bar style="width: 100%"
- [imagesSrcs]="imagesRoutes"
+ [imagesRoutes]="imagesRoutes"
[selectedIndex]="imagesIndex"
[enableShortCuts]="true"
(indexChange)="handleImageIndexChange($event)">
[incubator-streampipes] 05/05: Merge branch 'dev' of
github.com:apache/incubator-streampipes into dev
Posted by ze...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit ecb4672dc21eecba640986c9f9f0a507d6d70f3e
Merge: 5d380e9 ad6e73c
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Wed Aug 26 17:16:27 2020 +0200
Merge branch 'dev' of github.com:apache/incubator-streampipes into dev
.../matching/PipelineVerificationHandler.java | 53 ++++++++++++----------
.../apache/streampipes/sdk/StaticProperties.java | 16 ++++++-
.../builder/AbstractProcessingElementBuilder.java | 2 +-
.../sdk/extractor/AbstractParameterExtractor.java | 17 +++++--
.../streampipes/sdk/helpers/EpRequirements.java | 5 ++
.../sdk/helpers/RequirementsSelector.java | 36 +++++++++++++++
ui/package.json | 2 -
.../endpoint-installation.component.html | 2 +-
.../static-collection.component.ts | 9 +++-
.../static-group/static-group.component.html | 9 +++-
.../static-mapping-unary.component.html | 2 +-
.../static-property.component.html | 3 ++
ui/src/scss/sp/sp-theme.scss | 3 ++
13 files changed, 123 insertions(+), 36 deletions(-)
[incubator-streampipes] 03/05: Remove css form html code in image
bar
Posted by ze...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit 8c4e0c8c04749700ad7ae6b094be397f94fc78e1
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Wed Aug 26 16:40:52 2020 +0200
Remove css form html code in image bar
---
.../components/image-bar/image-bar.component.css | 10 +++++++++-
.../components/image-bar/image-bar.component.html | 23 +++++++++-------------
.../components/image-bar/image-bar.component.ts | 17 ++++++----------
.../image/image-viewer/image-viewer.component.html | 2 --
4 files changed, 24 insertions(+), 28 deletions(-)
diff --git a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.css b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.css
index b0f2e09..53539c2 100644
--- a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.css
+++ b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.css
@@ -19,4 +19,12 @@
.imageBar {
height: 70px;
width: 1000px;
-}
\ No newline at end of file
+}
+
+.imagePreview {
+ height: 65px
+}
+
+.imageFocus {
+ border: 5px solid #39b54a
+}
diff --git a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html
index 718d794..54040d8 100644
--- a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html
+++ b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html
@@ -19,38 +19,33 @@
<div fxLayout="row" fxLayoutAlign="center center"><div>{{selectedIndex + 1}} / {{maxImages}}</div></div>
<div fxLayout="row" fxLayoutAlign="space-around center" >
- <button mat-icon-button (click)="nextPage()"> <mat-icon>skip_previous</mat-icon></button>
+ <button mat-icon-button (click)="goToStart()"> <mat-icon>skip_previous</mat-icon></button>
<button mat-icon-button (click)="nextImage()"> <mat-icon>keyboard_arrow_left</mat-icon></button>
-<!-- <div fxLayout="row" fxLayoutAlign="center " class="imageBar">-->
-<!-- <img *ngFor="let src of _imageRoutes; let i = index" src="{{this.restService.getImageUrl(src)}}" (click)="changeImage(i)"-->
-<!-- [style.border]="i == selectedIndex ? '5px solid #39b54a' : 'none'" style="height: 65px">-->
-<!-- </div>-->
-
<div fxLayout="row" fxLayoutAlign="center center" class="imageBar">
<div fxFlex="40" fxLayoutAlign="end center">
- <img *ngIf="selectedIndex >= 3" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex - 3])}}" (click)="changeImage(selectedIndex - 3)" style="height: 65px">
- <img *ngIf="selectedIndex >= 2" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex - 2])}}" (click)="changeImage(selectedIndex - 2)" style="height: 65px">
- <img *ngIf="selectedIndex >= 1" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex - 1])}}" (click)="changeImage(selectedIndex - 1)" style="height: 65px">
+ <img class="imagePreview" *ngIf="selectedIndex >= 3" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex - 3])}}" (click)="changeImage(selectedIndex - 3)">
+ <img class="imagePreview" *ngIf="selectedIndex >= 2" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex - 2])}}" (click)="changeImage(selectedIndex - 2)">
+ <img class="imagePreview" *ngIf="selectedIndex >= 1" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex - 1])}}" (click)="changeImage(selectedIndex - 1)">
</div>
<div fxFlex="20">
<div fxLayout="row" fxLayoutAlign="center">
- <img src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex])}}" (click)="changeImage(3)" style="border: '5px solid #39b54a'; height: 65px">
+ <img class="imagePreview imageFocus" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex])}}" (click)="changeImage(3)">
</div>
</div>
<div fxFlex="40">
<div fxLayout="row" fxLayoutAlign="start center">
- <img *ngIf="selectedIndex < maxImages - 1" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex + 1])}}" (click)="changeImage(selectedIndex + 1)" style="height: 65px">
- <img *ngIf="selectedIndex < maxImages - 2" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex + 2])}}" (click)="changeImage(selectedIndex + 2)" style="height: 65px">
- <img *ngIf="selectedIndex < maxImages - 3" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex + 3])}}" (click)="changeImage(selectedIndex + 3)" style="height: 65px">
+ <img class="imagePreview" *ngIf="selectedIndex < maxImages - 1" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex + 1])}}" (click)="changeImage(selectedIndex + 1)">
+ <img class="imagePreview" *ngIf="selectedIndex < maxImages - 2" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex + 2])}}" (click)="changeImage(selectedIndex + 2)">
+ <img class="imagePreview" *ngIf="selectedIndex < maxImages - 3" src="{{this.restService.getImageUrl(_imageRoutes[selectedIndex + 3])}}" (click)="changeImage(selectedIndex + 3)">
</div>
</div>
</div>
<button mat-icon-button (click)="previousImage()"> <mat-icon>keyboard_arrow_right</mat-icon></button>
- <button mat-icon-button (click)="previousPage()"> <mat-icon>skip_next</mat-icon></button>
+ <button mat-icon-button (click)="goToEnd()"> <mat-icon>skip_next</mat-icon></button>
</div>
diff --git a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts
index bdccea4..32be1b2 100644
--- a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts
+++ b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts
@@ -39,8 +39,6 @@ export class ImageBarComponent implements OnInit {
@Output() indexChange: EventEmitter<number> = new EventEmitter<number>();
public maxImages;
- // @Output() pageUp: EventEmitter<void> = new EventEmitter<void>();
- // @Output() pageDown: EventEmitter<void> = new EventEmitter<void>();
constructor(private restService: DatalakeRestService) { }
@@ -52,27 +50,24 @@ export class ImageBarComponent implements OnInit {
this.indexChange.emit(index);
}
- previousPage() {
- // this.pageDown.emit();
-
+ goToStart() {
+ this.indexChange.emit(0);
}
+
previousImage() {
if (this.selectedIndex < this._imageRoutes.length - 1) {
this.indexChange.emit(this.selectedIndex + 1);
- } else {
- // this.pageDown.emit();
}
}
+
nextImage() {
if (this.selectedIndex > 0) {
this.indexChange.emit(this.selectedIndex - 1);
- } else {
- // this.pageUp.emit();
}
}
- nextPage() {
- // this.pageUp.emit();
+ goToEnd() {
+ this.indexChange.emit(this.maxImages - 1);
}
@HostListener('document:keydown', ['$event'])
diff --git a/ui/src/app/core-ui/image/image-viewer/image-viewer.component.html b/ui/src/app/core-ui/image/image-viewer/image-viewer.component.html
index adcc65d..7ed9789 100644
--- a/ui/src/app/core-ui/image/image-viewer/image-viewer.component.html
+++ b/ui/src/app/core-ui/image/image-viewer/image-viewer.component.html
@@ -33,8 +33,6 @@
[selectedIndex]="imagesIndex"
[enableShortCuts]="true"
(indexChange)="handleImageIndexChange($event)">
-<!-- (pageUp)="handleImagePageUp($event)"-->
-<!-- (pageDown)="handleImagePageDown($event)">-->
</sp-image-bar>
</div>
</div>
[incubator-streampipes] 01/05: Working on new image visualization
for data explorer
Posted by ze...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit f348f96155c4a0970365dcefc2c79a9050e0fca3
Author: Philipp Zehnder <ze...@fzi.de>
AuthorDate: Wed Aug 26 14:52:43 2020 +0200
Working on new image visualization for data explorer
---
.../app-image-labeling.component.ts | 60 +++++
ui/src/app/core-ui/core-ui.module.ts | 45 ++--
.../components/image-bar/image-bar.component.html | 2 +-
.../components/image-bar/image-bar.component.ts | 15 +-
.../image-container/image-container.component.ts | 5 +-
.../image-labeling/image-labeling.component.html | 2 +-
.../image-labeling/image-labeling.component.ts | 265 +++++++++++----------
.../image/image-viewer/image-viewer.component.html | 15 +-
.../image/image-viewer/image-viewer.component.ts | 121 +++-------
.../widgets/image/image-widget.component.html | 4 +-
.../widgets/image/image-widget.component.ts | 33 ++-
11 files changed, 302 insertions(+), 265 deletions(-)
diff --git a/ui/src/app/app-image-labeling/app-image-labeling.component.ts b/ui/src/app/app-image-labeling/app-image-labeling.component.ts
index e867e3f..704d309 100644
--- a/ui/src/app/app-image-labeling/app-image-labeling.component.ts
+++ b/ui/src/app/app-image-labeling/app-image-labeling.component.ts
@@ -18,6 +18,7 @@
import {Component, EventEmitter, OnInit, Output} from '@angular/core';
import {DatalakeRestService} from "../core-services/datalake/datalake-rest.service";
import {DataLakeMeasure} from "../core-model/gen/streampipes-model";
+import { CocoFormat } from '../core-model/coco/Coco.format';
@Component({
selector: 'app-image-labeling',
@@ -26,12 +27,16 @@ import {DataLakeMeasure} from "../core-model/gen/streampipes-model";
})
export class AppImageLabelingComponent implements OnInit {
+ public imagesSrcs = [];
dataLakeMeasures: DataLakeMeasure[] = [];
selectedMeasure: DataLakeMeasure;
@Output() appOpened = new EventEmitter<boolean>();
+ public pageIndex;
+ public measureName;
+
constructor(private restService: DatalakeRestService) {
}
@@ -44,4 +49,59 @@ export class AppImageLabelingComponent implements OnInit {
}
);
}
+
+
+ // loadData() {
+ // if (this.pageIndex === undefined) {
+ // this.restService.getDataPageWithoutPage(this.measureName, 10).subscribe(
+ // res => this.processData(res)
+ // );
+ // } else {
+ // this.restService.getDataPage(this.measureName, 10, this.pageIndex).subscribe(
+ // res => this.processData(res)
+ // );
+ // }
+ // }
+
+ // processData(pageResult) {
+ // if (pageResult.rows === undefined) {
+ // this.pageIndex = pageResult.pageSum - 1;
+ // this.openSnackBar('No new data found');
+ // } else {
+ // pageResult.rows = pageResult.rows.reverse();
+ // this.pageIndex = pageResult.page;
+ // this.pageSum = pageResult.pageSum;
+ //
+ // if (this.setImagesIndexToFirst) {
+ // this.imagesIndex = 0;
+ // } else if (this.setImagesIndexToLast) {
+ // this.imagesIndex = pageResult.rows.length - 1;
+ // }
+ // this.setImagesIndexToLast = false;
+ // this.setImagesIndexToFirst = false;
+ //
+ // const imageIndex = pageResult.headers.findIndex(name => name === this.imageField.runtimeName);
+ // const tmp = [];
+ // this.cocoFiles = [];
+ // pageResult.rows.forEach(row => {
+ // tmp.push(this.restService.getImageUrl(row[imageIndex]));
+ //
+ // // This is relevant for coco
+ // this.restService.getCocoFileForImage(row[imageIndex]).subscribe(
+ // coco => {
+ // if (coco === null) {
+ // const cocoFile = new CocoFormat();
+ // this.cocoFormatService.addImage(cocoFile, (row[imageIndex]));
+ // this.cocoFiles.push(cocoFile);
+ // } else {
+ // this.cocoFiles.push(coco as CocoFormat);
+ // }
+ // }
+ // );
+ //
+ // });
+ // this.imagesSrcs = tmp;
+ // }
+ // }
+
}
diff --git a/ui/src/app/core-ui/core-ui.module.ts b/ui/src/app/core-ui/core-ui.module.ts
index 4dc50f3..8d16215 100644
--- a/ui/src/app/core-ui/core-ui.module.ts
+++ b/ui/src/app/core-ui/core-ui.module.ts
@@ -138,28 +138,29 @@ import {CodemirrorModule} from "@ctrl/ngx-codemirror";
],
entryComponents: [
],
- exports: [
- ImageComponent,
- ImageLabelingComponent,
- StandardDialogComponent,
- PanelDialogComponent,
- ConfirmDialogComponent,
- StaticAnyInput,
- StaticPropertyComponent,
- StaticFreeInputComponent,
- StaticSecretInputComponent,
- StaticFileInputComponent,
- StaticMappingNaryComponent,
- StaticMappingUnaryComponent,
- StaticGroupComponent,
- StaticAlternativesComponent,
- StaticCollectionComponent,
- StaticColorPickerComponent,
- StaticCodeInputComponent,
- StaticOneOfInputComponent,
- StaticRuntimeResolvableAnyInputComponent,
- StaticRuntimeResolvableOneOfInputComponent,
- ]
+ exports: [
+ ImageComponent,
+ ImageLabelingComponent,
+ StandardDialogComponent,
+ PanelDialogComponent,
+ ConfirmDialogComponent,
+ StaticAnyInput,
+ StaticPropertyComponent,
+ StaticFreeInputComponent,
+ StaticSecretInputComponent,
+ StaticFileInputComponent,
+ StaticMappingNaryComponent,
+ StaticMappingUnaryComponent,
+ StaticGroupComponent,
+ StaticAlternativesComponent,
+ StaticCollectionComponent,
+ StaticColorPickerComponent,
+ StaticCodeInputComponent,
+ StaticOneOfInputComponent,
+ StaticRuntimeResolvableAnyInputComponent,
+ StaticRuntimeResolvableOneOfInputComponent,
+ ImageViewerComponent
+ ]
})
export class CoreUiModule {
}
diff --git a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html
index adb53bd..d768eaf 100644
--- a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html
+++ b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.html
@@ -21,7 +21,7 @@
<button mat-icon-button (click)="nextImage()"> <mat-icon>keyboard_arrow_left</mat-icon></button>
<div fxLayout="row" fxLayoutAlign="center " class="imageBar">
- <img *ngFor="let src of imagesSrcs; let i = index" src="{{src}}" (click)="changeImage(i)"
+ <img *ngFor="let src of imagesSrcs; let i = index" src="{{this.restService.getImageUrl(src)}}" (click)="changeImage(i)"
[style.border]="i == selectedIndex ? '5px solid #39b54a' : 'none'" style="height: 65px">
</div>
diff --git a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts
index cd04b14..08ccbd6 100644
--- a/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts
+++ b/ui/src/app/core-ui/image/components/image-bar/image-bar.component.ts
@@ -16,6 +16,7 @@
*/
import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
+import { DatalakeRestService } from '../../../../core-services/datalake/datalake-rest.service';
@Component({
selector: 'sp-image-bar',
@@ -29,11 +30,11 @@ export class ImageBarComponent implements OnInit {
@Input() enableShortCuts: boolean;
@Output() indexChange: EventEmitter<number> = new EventEmitter<number>();
- @Output() pageUp: EventEmitter<void> = new EventEmitter<void>();
- @Output() pageDown: EventEmitter<void> = new EventEmitter<void>();
+ // @Output() pageUp: EventEmitter<void> = new EventEmitter<void>();
+ // @Output() pageDown: EventEmitter<void> = new EventEmitter<void>();
- constructor() { }
+ constructor(private restService: DatalakeRestService) { }
ngOnInit(): void {
}
@@ -43,26 +44,26 @@ export class ImageBarComponent implements OnInit {
}
previousPage() {
- this.pageDown.emit();
+ // this.pageDown.emit();
}
previousImage() {
if (this.selectedIndex < this.imagesSrcs.length - 1) {
this.indexChange.emit(this.selectedIndex + 1);
} else {
- this.pageDown.emit();
+ // this.pageDown.emit();
}
}
nextImage() {
if (this.selectedIndex > 0) {
this.indexChange.emit(this.selectedIndex - 1);
} else {
- this.pageUp.emit();
+ // this.pageUp.emit();
}
}
nextPage() {
- this.pageUp.emit();
+ // this.pageUp.emit();
}
@HostListener('document:keydown', ['$event'])
diff --git a/ui/src/app/core-ui/image/components/image-container/image-container.component.ts b/ui/src/app/core-ui/image/components/image-container/image-container.component.ts
index 70fa34c..30dd48d 100644
--- a/ui/src/app/core-ui/image/components/image-container/image-container.component.ts
+++ b/ui/src/app/core-ui/image/components/image-container/image-container.component.ts
@@ -18,6 +18,7 @@
import { AfterViewInit, Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';
import Konva from 'konva';
import { ICoordinates } from '../../model/coordinates';
+import { DatalakeRestService } from '../../../../core-services/datalake/datalake-rest.service';
@Component({
selector: 'sp-image-container',
@@ -72,7 +73,7 @@ export class ImageContainerComponent implements OnInit, AfterViewInit {
public isDrawingVar: boolean;
- constructor() { }
+ constructor(private restService: DatalakeRestService) { }
ngOnInit(): void {
this.scale = 1;
@@ -112,7 +113,7 @@ export class ImageContainerComponent implements OnInit, AfterViewInit {
this.initLayers();
this.redrawAll();
};
- this.image.src = src;
+ this.image.src = this.restService.getImageUrl(src);
}
getShift() {
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 fe8d593..c464c71 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
@@ -44,7 +44,7 @@
info
</span></button>
<mat-menu #aboveMenu="matMenu" yPosition="above">
- <p><em>{{imageDescription}}</em></p>
+ <p><em>The Description of the selected image</em></p>
</mat-menu>
</div>
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 64ab20e..429521c 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
@@ -17,35 +17,41 @@
*/
-import {AfterViewInit, Component, Input, OnChanges, OnInit, ViewChild} from '@angular/core';
-import {MatSnackBar} from '@angular/material/snack-bar';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+import { MatSnackBar } from '@angular/material/snack-bar';
import Konva from 'konva';
-import {Annotation} from '../../../core-model/coco/Annotation';
-import {CocoFormat} from '../../../core-model/coco/Coco.format';
-import {DatalakeRestService} from '../../../core-services/datalake/datalake-rest.service';
-import {ImageContainerComponent} from '../components/image-container/image-container.component';
-import {ICoordinates} from '../model/coordinates';
-import {LabelingMode} from '../model/labeling-mode';
-import {BrushLabelingService} from '../services/BrushLabeling.service';
-import {CocoFormatService} from '../services/CocoFormat.service';
-import {LabelingModeService} from '../services/LabelingMode.service';
-import {PolygonLabelingService} from '../services/PolygonLabeling.service';
-import {ReactLabelingService} from '../services/ReactLabeling.service';
+import { Annotation } from '../../../core-model/coco/Annotation';
+import { CocoFormat } from '../../../core-model/coco/Coco.format';
+import { DatalakeRestService } from '../../../core-services/datalake/datalake-rest.service';
+import { ImageContainerComponent } from '../components/image-container/image-container.component';
+import { ICoordinates } from '../model/coordinates';
+import { LabelingMode } from '../model/labeling-mode';
+import { BrushLabelingService } from '../services/BrushLabeling.service';
+import { CocoFormatService } from '../services/CocoFormat.service';
+import { LabelingModeService } from '../services/LabelingMode.service';
+import { PolygonLabelingService } from '../services/PolygonLabeling.service';
+import { ReactLabelingService } from '../services/ReactLabeling.service';
@Component({
selector: 'sp-image-labeling',
templateUrl: './image-labeling.component.html',
styleUrls: ['./image-labeling.component.css']
})
-export class ImageLabelingComponent implements OnInit, AfterViewInit, OnChanges {
+export class ImageLabelingComponent implements OnInit {
// label
public labels;
public selectedLabel: {category, label};
// images
+
+ @Input()
public imagesSrcs = [];
+ // public imagesSrcs = [];
+ @Input()
public imagesIndex: number;
+ // public imagesIndex: number;
+
imageDescription: string;
public cocoFiles: CocoFormat[] = [];
@@ -53,15 +59,16 @@ export class ImageLabelingComponent implements OnInit, AfterViewInit, OnChanges
public isHoverComponent;
public brushSize: number;
- public isDrawing: boolean = false;
+ public isDrawing = false;
@ViewChild(ImageContainerComponent) imageView: ImageContainerComponent;
- @Input() measureName = 'image'; // TODO: Remove default value for production
- @Input() eventSchema = undefined; // TODO: event schema should be always injected by production
- imageField = undefined;
- pageIndex = undefined;
- pageSum = undefined;
+ @Input()
+ measureName;
+ // eventSchema = undefined; // TODO: event schema should be always injected by production
+ // imageField = undefined;
+ // pageIndex = undefined;
+ // pageSum = undefined;
// Flags
private setImagesIndexToFirst = false;
@@ -77,101 +84,129 @@ export class ImageLabelingComponent implements OnInit, AfterViewInit, OnChanges
ngOnInit(): void {
this.isHoverComponent = false;
this.brushSize = 5;
- this.imagesIndex = 0;
- this.imageDescription = "The Description of the selected image"
+ // this.imagesIndex = 0;
this.labels = this.restService.getLabels();
- // TODO remove for production, if default dev values are not necessary
- if (this.eventSchema === undefined) {
- this.restService.getAllInfos().subscribe(res => {
- this.eventSchema = res.find(elem => elem.measureName === this.measureName).eventSchema;
- const properties = this.eventSchema.eventProperties;
- for (const prop of properties) {
- // if (prop.domainProperties.find(type => type === 'https://image.com')) {
- if (prop.domainProperty === 'https://image.com') {
- this.imageField = prop;
- break;
- }
- }
- this.loadData();
- }
- );
- }
+ // // TODO remove for production, if default dev values are not necessary
+ // if (this.eventSchema === undefined) {
+ // this.restService.getAllInfos().subscribe(res => {
+ // this.eventSchema = res.find(elem => elem.measureName === this.measureName).eventSchema;
+ // const properties = this.eventSchema.eventProperties;
+ // for (const prop of properties) {
+ // if (prop.domainProperties.find(type => type === 'https://image.com')) {
+ // // if (prop.domainProperty === 'https://image.com') {
+ // this.imageField = prop;
+ // break;
+ // }
+ // }
+ // this.loadData();
+ // }
+ // );
+ // }
}
- ngOnChanges() {
- if (this.eventSchema !== null) {
- const properties = this.eventSchema.eventProperties;
- for (const prop of properties) {
- if (prop.domainProperty === 'https://image.com') {
- this.imageField = prop;
- break;
- }
- }
- this.pageIndex = undefined;
- this.pageSum = undefined;
- this.imagesIndex = 0;
-
- this.loadData();
+ /* sp-image-bar */
+ handleImageIndexChange(index) {
+ if (!this.isDrawing) {
+ this.save();
+ this.imagesIndex = index;
}
}
- ngAfterViewInit(): void {
- this.imagesIndex = 0;
- }
-
- loadData() {
- if (this.pageIndex === undefined) {
- this.restService.getDataPageWithoutPage(this.measureName, 10).subscribe(
- res => this.processData(res)
- );
- } else {
- this.restService.getDataPage(this.measureName, 10, this.pageIndex).subscribe(
- res => this.processData(res)
- );
+ handleImagePageUp(e) {
+ if (!this.isDrawing) {
+ // this.save();
+ // this.pageIndex += 1;
+ this.setImagesIndexToLast = true;
+ // this.loadData();
}
}
- processData(pageResult) {
- if (pageResult.rows === undefined) {
- this.pageIndex = pageResult.pageSum - 1;
- this.openSnackBar('No new data found');
- } else {
- pageResult.rows = pageResult.rows.reverse();
- this.pageIndex = pageResult.page;
- this.pageSum = pageResult.pageSum;
-
- if (this.setImagesIndexToFirst) {
- this.imagesIndex = 0;
- } else if (this.setImagesIndexToLast) {
- this.imagesIndex = pageResult.rows.length - 1;
- }
- this.setImagesIndexToLast = false;
- this.setImagesIndexToFirst = false;
-
- const imageIndex = pageResult.headers.findIndex(name => name === this.imageField.runtimeName);
- const tmp = [];
- this.cocoFiles = [];
- pageResult.rows.forEach(row => {
- tmp.push(this.restService.getImageUrl(row[imageIndex]));
- this.restService.getCocoFileForImage(row[imageIndex]).subscribe(
- coco => {
- if (coco === null) {
- const cocoFile = new CocoFormat();
- this.cocoFormatService.addImage(cocoFile, (row[imageIndex]));
- this.cocoFiles.push(cocoFile);
- } else {
- this.cocoFiles.push(coco as CocoFormat);
- }
- }
- );
-
- });
- this.imagesSrcs = tmp;
+ handleImagePageDown(e) {
+ if (!this.isDrawing) {
+ this.save();
+ // if (this.pageIndex - 1 >= 0) {
+ // this.pageIndex -= 1;
+ this.setImagesIndexToFirst = true;
+ // this.loadData();
+ // }
}
+ }
- }
+ // ngOnChanges() {
+ // if (this.eventSchema !== null) {
+ // const properties = this.eventSchema.eventProperties;
+ // for (const prop of properties) {
+ // if (prop.domainProperty === 'https://image.com') {
+ // this.imageField = prop;
+ // break;
+ // }
+ // }
+ // this.pageIndex = undefined;
+ // this.pageSum = undefined;
+ // this.imagesIndex = 0;
+ //
+ // this.loadData();
+ // }
+ // }
+
+ // ngAfterViewInit(): void {
+ // this.imagesIndex = 0;
+ // }
+
+ // loadData() {
+ // if (this.pageIndex === undefined) {
+ // this.restService.getDataPageWithoutPage(this.measureName, 10).subscribe(
+ // res => this.processData(res)
+ // );
+ // } else {
+ // this.restService.getDataPage(this.measureName, 10, this.pageIndex).subscribe(
+ // res => this.processData(res)
+ // );
+ // }
+ // }
+
+ // processData(pageResult) {
+ // if (pageResult.rows === undefined) {
+ // this.pageIndex = pageResult.pageSum - 1;
+ // this.openSnackBar('No new data found');
+ // } else {
+ // pageResult.rows = pageResult.rows.reverse();
+ // this.pageIndex = pageResult.page;
+ // this.pageSum = pageResult.pageSum;
+ //
+ // if (this.setImagesIndexToFirst) {
+ // this.imagesIndex = 0;
+ // } else if (this.setImagesIndexToLast) {
+ // this.imagesIndex = pageResult.rows.length - 1;
+ // }
+ // this.setImagesIndexToLast = false;
+ // this.setImagesIndexToFirst = false;
+ //
+ // const imageIndex = pageResult.headers.findIndex(name => name === this.imageField.runtimeName);
+ // const tmp = [];
+ // this.cocoFiles = [];
+ // pageResult.rows.forEach(row => {
+ // tmp.push(this.restService.getImageUrl(row[imageIndex]));
+ //
+ // // This is relevant for coco
+ // this.restService.getCocoFileForImage(row[imageIndex]).subscribe(
+ // coco => {
+ // if (coco === null) {
+ // const cocoFile = new CocoFormat();
+ // this.cocoFormatService.addImage(cocoFile, (row[imageIndex]));
+ // this.cocoFiles.push(cocoFile);
+ // } else {
+ // this.cocoFiles.push(coco as CocoFormat);
+ // }
+ // }
+ // );
+ //
+ // });
+ // this.imagesSrcs = tmp;
+ // }
+ // }
/* sp-image-view handler */
@@ -292,32 +327,6 @@ export class ImageLabelingComponent implements OnInit, AfterViewInit, OnChanges
this.selectedLabel = label;
}
- /* sp-image-bar */
- handleImageIndexChange(index) {
- if (!this.isDrawing) {
- this.save();
- this.imagesIndex = index;
- }
- }
- handleImagePageUp(e) {
- if (!this.isDrawing) {
- this.save();
- this.pageIndex += 1;
- this.setImagesIndexToLast = true;
- this.loadData();
- }
- }
-
- handleImagePageDown(e) {
- if (!this.isDrawing) {
- this.save();
- if (this.pageIndex - 1 >= 0) {
- this.pageIndex -= 1;
- this.setImagesIndexToFirst = true;
- this.loadData();
- }
- }
- }
/* sp-image-annotations handlers */
handleChangeAnnotationLabel(change: [Annotation, string, string]) {
diff --git a/ui/src/app/core-ui/image/image-viewer/image-viewer.component.html b/ui/src/app/core-ui/image/image-viewer/image-viewer.component.html
index 5990922..87e4a3c 100644
--- a/ui/src/app/core-ui/image/image-viewer/image-viewer.component.html
+++ b/ui/src/app/core-ui/image/image-viewer/image-viewer.component.html
@@ -20,20 +20,21 @@
<div fxLayout="column" fxLayoutAlign="space-between " >
<div fxLayout="row" fxLayoutAlign="space-around start">
<div fxLayout="column" fxLayoutAlign="space-between " >
- <sp-image-container
- [imageSrc]="imagesSrcs[imagesIndex]">
+ <sp-image-container *ngIf="imagesRoutes.length > 0"
+ [imageSrc]="imagesRoutes[imagesIndex]">
</sp-image-container>
</div>
</div>
<br />
- <div fxLayout="row" fxLayoutAlign="center center"><div>{{pageIndex + 1}} / {{pageSum}}</div></div>
+
+<!-- <div fxLayout="row" fxLayoutAlign="center center"><div>{{pageIndex + 1}} / {{pageSum}}</div></div>-->
<sp-image-bar style="width: 100%"
- [imagesSrcs]="imagesSrcs"
+ [imagesSrcs]="imagesRoutes"
[selectedIndex]="imagesIndex"
[enableShortCuts]="true"
- (indexChange)="handleImageIndexChange($event)"
- (pageUp)="handleImagePageUp($event)"
- (pageDown)="handleImagePageDown($event)">
+ (indexChange)="handleImageIndexChange($event)">
+<!-- (pageUp)="handleImagePageUp($event)"-->
+<!-- (pageDown)="handleImagePageDown($event)">-->
</sp-image-bar>
</div>
</div>
diff --git a/ui/src/app/core-ui/image/image-viewer/image-viewer.component.ts b/ui/src/app/core-ui/image/image-viewer/image-viewer.component.ts
index afa3b7c..d816505 100644
--- a/ui/src/app/core-ui/image/image-viewer/image-viewer.component.ts
+++ b/ui/src/app/core-ui/image/image-viewer/image-viewer.component.ts
@@ -15,8 +15,8 @@
* limitations under the License.
*/
-import {Component, OnInit} from '@angular/core';
-import {DatalakeRestService} from '../../../core-services/datalake/datalake-rest.service';
+import { Component, Input, OnInit } from '@angular/core';
+import { DatalakeRestService } from '../../../core-services/datalake/datalake-rest.service';
@Component({
selector: 'sp-image-viewer',
@@ -25,100 +25,49 @@ import {DatalakeRestService} from '../../../core-services/datalake/datalake-rest
})
export class ImageViewerComponent implements OnInit {
- // images
- public imagesSrcs;
- public imagesIndex: number;
+ @Input()
+ public imagesRoutes;
- measureName = 'image'; // TODO: Remove hard coded Index, should be injected
- eventSchema = undefined; // TODO: event schema should be also injected
- imageField = undefined;
- pageIndex = undefined;
- pageSum = undefined;
+ public imagesIndex = 0;
+ // public imagesIndex: number;
- // Flags
- private setImagesIndexToFirst = false;
- private setImagesIndexToLast = false;
-
- constructor(private restService: DatalakeRestService) { }
-
- ngOnInit(): void {
-
- // getVisualizableData(): Observable<DataLakeMeasure[]> {
- // return this.dataLakeRestService.getAllInfos().map(data => {
- // return this.tsonLdSerializerService.fromJsonLdContainer(data, 'sp:DataLakeMeasure');
- // });
- // }
-
- this.restService.getAllInfos().subscribe( res => {
- this.eventSchema = res.find(elem => elem.measureName === this.measureName).eventSchema;
- const properties = this.eventSchema.eventProperties;
- for (const prop of properties) {
- // if (prop.domainProperties.find(type => type === 'https://image.com')) {
- if (prop.domainProperty === 'https://image.com') {
- this.imageField = prop;
- break;
- }
- }
- this.loadData();
- }
- );
-
- this.imagesIndex = 0;
- }
+ // @Input()
+ // measureName; // TODO: Remove hard coded Index, should be injected
- loadData() {
- if (this.pageIndex === undefined) {
- this.restService.getDataPageWithoutPage(this.measureName, 10).subscribe(
- res => this.processData(res)
- );
- } else {
- this.restService.getDataPage(this.measureName, 10, this.pageIndex).subscribe(
- res => this.processData(res)
- );
- }
- }
+ // eventSchema = undefined; // TODO: event schema should be also injected
+ // imageField = undefined;
+ // pageIndex = undefined;
+ // pageSum = undefined;
- processData(pageResult) {
- if (pageResult.rows === undefined) {
- this.pageIndex = pageResult.pageSum - 1;
- } else {
- pageResult.rows = pageResult.rows.reverse();
- this.pageIndex = pageResult.page;
- this.pageSum = pageResult.pageSum;
+ // Flags
+ // private setImagesIndexToFirst = false;
+ // private setImagesIndexToLast = false;
- if (this.setImagesIndexToFirst) {
- this.imagesIndex = 0;
- } else if (this.setImagesIndexToLast) {
- this.imagesIndex = pageResult.rows.length - 1;
- }
- this.setImagesIndexToLast = false;
- this.setImagesIndexToFirst = false;
+ constructor() {}
- const imageIndex = pageResult.headers.findIndex(name => name === this.imageField.runtimeName);
- const tmp = [];
- pageResult.rows.forEach(row => {
- tmp.push(this.restService.getImageUrl(row[imageIndex]));
- });
- this.imagesSrcs = tmp;
- }
+ ngOnInit(): void {
+ // this.imagesSrcs = [];
+ // this.imagesRoutes.forEach(route => {
+ // this.imagesSrcs.push(this.restService.getImageUrl(route));
+ // });
}
- /* sp-image-bar */
+ // /* sp-image-bar */
handleImageIndexChange(index) {
this.imagesIndex = index;
}
- handleImagePageUp(e) {
- this.pageIndex += 1;
- this.setImagesIndexToLast = true;
- this.loadData();
- }
-
- handleImagePageDown(e) {
- if (this.pageIndex - 1 >= 0) {
- this.pageIndex -= 1;
- this.setImagesIndexToFirst = true;
- this.loadData();
- }
- }
+ // handleImagePageUp(e) {
+ // this.pageIndex += 1;
+ // this.setImagesIndexToLast = true;
+ // this.loadData();
+ // }
+ //
+ // handleImagePageDown(e) {
+ // if (this.pageIndex - 1 >= 0) {
+ // this.pageIndex -= 1;
+ // this.setImagesIndexToFirst = true;
+ // this.loadData();
+ // }
+ // }
}
diff --git a/ui/src/app/data-explorer/components/widgets/image/image-widget.component.html b/ui/src/app/data-explorer/components/widgets/image/image-widget.component.html
index ce441e2..686c710 100644
--- a/ui/src/app/data-explorer/components/widgets/image/image-widget.component.html
+++ b/ui/src/app/data-explorer/components/widgets/image/image-widget.component.html
@@ -21,7 +21,8 @@
<div class="widget-inner-options" style="margin-left: 0;margin-right: 0;margin-top: 0;">
<div fxFlex="100" fxLayout="row">
<div fxFlex="100" fxLayout="row" fxLayoutAlign="start center" style="margin-left: 0px;margin-right: 0px;">
- <sp-select-properties multiple="true" (changeSelectedProperties)="setSelectedColumn($event)" [availableProperties]="availableColumns" [selectedProperties]="selectedColumns"></sp-select-properties>
+<!-- <sp-select-properties (changeSelectedProperties)="setSelectedColumn($event)" [availableProperties]="availableColumns" [selectedProperties]="selectedColumn"></sp-select-properties>-->
+ <sp-select-properties [availableProperties]="availableColumns" [selectedProperties]="selectedColumn"></sp-select-properties>
</div>
</div>
</div>
@@ -30,6 +31,7 @@
<sp-load-data-spinner *ngIf="showIsLoadingData"></sp-load-data-spinner>
<sp-no-data-in-date-range *ngIf="showNoDataInDateRange" [viewDateRange]="viewDateRange"></sp-no-data-in-date-range>
<!-- <sp-image [availableImageData]="availableImageData"></sp-image>-->
+ <sp-image-viewer [imagesRoutes]="imagesRoutes"></sp-image-viewer>
<div class="image-container">
</div>
diff --git a/ui/src/app/data-explorer/components/widgets/image/image-widget.component.ts b/ui/src/app/data-explorer/components/widgets/image/image-widget.component.ts
index d37c077..be507a3 100644
--- a/ui/src/app/data-explorer/components/widgets/image/image-widget.component.ts
+++ b/ui/src/app/data-explorer/components/widgets/image/image-widget.component.ts
@@ -35,23 +35,28 @@ export class ImageWidgetComponent extends BaseDataExplorerWidget implements OnIn
@ViewChild(MatSort, {static: true}) sort: MatSort;
availableColumns: EventPropertyUnion[];
- selectedColumns: EventPropertyUnion[];
+ selectedColumn: EventPropertyUnion;
columnNames: string[];
- availableImageData: DataResult;
+ // availableImageData: DataResult;
- constructor(protected dataLakeRestService: DatalakeRestService, protected dialog: MatDialog,) {
+ public imagesRoutes = [];
+
+ constructor(
+ protected dataLakeRestService: DatalakeRestService,
+ protected dialog: MatDialog,
+ private restService: DatalakeRestService) {
super(dataLakeRestService, dialog);
}
ngOnInit(): void {
this.availableColumns = this.getImageProperties(this.dataExplorerWidget.dataLakeMeasure.eventSchema);
- this.selectedColumns = [this.availableColumns[0]];
+ this.selectedColumn = this.availableColumns[0];
this.updateData();
}
getImageProperties(eventSchema: EventSchema): EventPropertyUnion[] {
- return eventSchema.eventProperties.filter(ep => ep.domainProperties.some(dp => dp === "https://image.com"));
+ return eventSchema.eventProperties.filter(ep => ep.domainProperties.some(dp => dp === 'https://image.com'));
}
updateData() {
@@ -61,16 +66,24 @@ export class ImageWidgetComponent extends BaseDataExplorerWidget implements OnIn
this.dataExplorerWidget.dataLakeMeasure.measureName, this.viewDateRange.startDate.getTime(), this.viewDateRange.endDate.getTime())
.subscribe(
(res: DataResult) => {
- this.availableImageData = res;
+ // this.availableImageData = res;
this.showIsLoadingData = false;
+ this.imagesRoutes = [];
+ if (res.rows !== null) {
+ const imageField = res.headers.findIndex(name => name === this.selectedColumn.runtimeName);
+ res.rows.forEach(row => {
+ this.imagesRoutes.push(row[imageField]);
+ // this.imagesSrcs.push(this.restService.getImageUrl(row[this.selectedColumn.runtimeName]));
+ });
+ }
}
);
}
- setSelectedColumn(selectedColumns: EventPropertyUnion[]) {
- this.selectedColumns = selectedColumns;
- this.columnNames = this.getRuntimeNames(this.selectedColumns);
- }
+ // setSelectedColumn(selectedColumns: EventPropertyUnion[]) {
+ // this.selectedColumn = selectedColumns;
+ // this.columnNames = this.getRuntimeNames(this.selectedColumns);
+ // }
ngOnDestroy(): void {