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:43 UTC
[incubator-streampipes] 01/05: Working on new image visualization
for data explorer
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 {