You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2020/09/01 11:15:09 UTC
[incubator-streampipes] branch dev updated: [hotfix] Improve
pipeline element recommendation
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new 192490e [hotfix] Improve pipeline element recommendation
new 82582b6 Merge branch 'dev' of github.com:apache/incubator-streampipes into dev
192490e is described below
commit 192490e2b576c66c154962a51d97f162f2a2927f
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Tue Sep 1 13:14:45 2020 +0200
[hotfix] Improve pipeline element recommendation
---
.../pipeline-element-options.component.ts | 19 +++---
.../pipeline-element-recommendation.component.html | 4 +-
.../pipeline-element-recommendation.component.ts | 79 +++++++++++++---------
.../components/pipeline/pipeline.component.ts | 3 +-
.../app/editor/services/object-provider.service.ts | 2 +-
5 files changed, 61 insertions(+), 46 deletions(-)
diff --git a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts
index 67d8a4b..6a84660 100644
--- a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts
+++ b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.component.ts
@@ -80,17 +80,14 @@ export class PipelineElementOptionsComponent implements OnInit{
private PipelineElementRecommendationService: PipelineElementRecommendationService,
private DialogService: DialogService,
private EditorService: EditorService,
- //private InitTooltips: InitTooltips,
private JsplumbBridge: JsplumbBridge,
private JsplumbService: JsplumbService,
- //private TransitionService: TransitionService,
private PipelineValidationService: PipelineValidationService,
private RestApi: RestApi) {
this.recommendationsAvailable = false;
this.possibleElements = [];
this.recommendedElements = [];
this.recommendationsShown = false;
-
}
ngOnInit() {
@@ -103,14 +100,13 @@ export class PipelineElementOptionsComponent implements OnInit{
});
this.pipelineElementCssType = this.pipelineElement.type;
- if (this.pipelineElement.type === 'stream') {
+ if (this.pipelineElement.type === 'stream' || this.pipelineElement.settings.completed) {
this.initRecs(this.pipelineElement.payload.dom);
}
}
removeElement(pipelineElement: PipelineElementConfig) {
this.delete.emit(pipelineElement);
- //this.$rootScope.$broadcast("pipeline.validate");
}
customizeElement(pipelineElement: PipelineElementConfig) {
@@ -127,15 +123,20 @@ export class PipelineElementOptionsComponent implements OnInit{
//this.EditorDialogManager.showCustomizeStreamDialog(this.pipelineElement.payload);
}
- initRecs(elementId) {
-
- var currentPipeline = this.ObjectProvider.makePipeline(cloneDeep(this.rawPipelineModel));
+ initRecs(pipelineElementDomId) {
+ let clonedModel: PipelineElementConfig[] = cloneDeep(this.rawPipelineModel);
+ clonedModel.forEach(pe => {
+ if (pe.payload.dom === pipelineElementDomId && (pe.type !== 'stream')) {
+ pe.settings.completed = false;
+ (pe.payload as InvocablePipelineElementUnion).configured = false;
+ }
+ })
+ var currentPipeline = this.ObjectProvider.makePipeline(clonedModel);
this.EditorService.recommendPipelineElement(currentPipeline).subscribe((result) => {
if (result.success) {
this.possibleElements = this.PipelineElementRecommendationService.collectPossibleElements(this.allElements, result.possibleElements);
this.recommendedElements = this.PipelineElementRecommendationService.populateRecommendedList(this.allElements, result.recommendedElements);
this.recommendationsAvailable = true;
- //this.InitTooltips.initTooltips();
}
});
}
diff --git a/ui/src/app/editor/components/pipeline-element-recommendation/pipeline-element-recommendation.component.html b/ui/src/app/editor/components/pipeline-element-recommendation/pipeline-element-recommendation.component.html
index 10a883c..cab19b8 100644
--- a/ui/src/app/editor/components/pipeline-element-recommendation/pipeline-element-recommendation.component.html
+++ b/ui/src/app/editor/components/pipeline-element-recommendation/pipeline-element-recommendation.component.html
@@ -19,8 +19,8 @@
<div *ngIf="recommendationsPrepared && recommendedElements.length > 0" class="cv-wrapper" [ngClass]="recommendationsShown ? 'opened-nav' : ''">
<ul>
<li *ngFor="let recommendedElement of recommendedElements"
- [style]="recommendedElement.layoutSettings.skewStyle | safeCss">
- <a [style]="recommendedElement.layoutSettings.unskewStyle | safeCss" [ngClass]="recommendedElement.layoutSettings.type" (click)="create(recommendedElement)" *ngIf="recommendedElement.name">
+ [style]="recommendedElement.layoutSettings.skewStyle">
+ <a [style]="recommendedElement.layoutSettings.unskewStyle" [ngClass]="recommendedElement.layoutSettings.type" (click)="create(recommendedElement)" *ngIf="recommendedElement.name">
</a>
<div (click)="create(recommendedElement)" [style]="recommendedElement.layoutSettings.unskewStyleLabel | safeCss"
class="{{recommendedElement.layoutSettings.type}}">
diff --git a/ui/src/app/editor/components/pipeline-element-recommendation/pipeline-element-recommendation.component.ts b/ui/src/app/editor/components/pipeline-element-recommendation/pipeline-element-recommendation.component.ts
index 17ba75e..c682f24 100644
--- a/ui/src/app/editor/components/pipeline-element-recommendation/pipeline-element-recommendation.component.ts
+++ b/ui/src/app/editor/components/pipeline-element-recommendation/pipeline-element-recommendation.component.ts
@@ -38,8 +38,7 @@ export class PipelineElementRecommendationComponent implements OnInit {
@Input()
pipelineElementDomId: string;
- @Input()
- recommendedElements: any;
+ _recommendedElements: any;
recommendationsPrepared: boolean = false;
@@ -49,21 +48,21 @@ export class PipelineElementRecommendationComponent implements OnInit {
}
ngOnInit() {
- this.prepareStyles();
+
}
- prepareStyles() {
- this.recommendedElements.forEach((element, index) => {
- this.setLayoutSettings(element, index);
+ prepareStyles(recommendedElements) {
+ this.fillRemainingItems(recommendedElements);
+ recommendedElements.forEach((element, index) => {
+ this.setLayoutSettings(element, index, recommendedElements);
});
- this.recommendationsPrepared = true;
}
- setLayoutSettings(element, index) {
+ setLayoutSettings(element, index, recommendedElements) {
element.layoutSettings = {
- skewStyle: element.name ? this.getSkewStyle(index) : {'opacity': 0},
- unskewStyle: this.getUnskewStyle(element, index),
- unskewStyleLabel: this.getUnskewStyleLabel(index),
+ skewStyle: element.name ? this.getSkewStyle(index, recommendedElements) : {'opacity': 0},
+ unskewStyle: this.getUnskewStyle(element, index,recommendedElements),
+ unskewStyleLabel: this.getUnskewStyleLabel(index, recommendedElements),
type: element instanceof DataProcessorInvocation ? "sepa" : "action"
};
}
@@ -73,18 +72,18 @@ export class PipelineElementRecommendationComponent implements OnInit {
this.JsplumbService.createElement(this.rawPipelineModel, recommendedElement, this.pipelineElementDomId);
}
- getUnskewStyle(recommendedElement, index) {
- var unskew = -(this.getSkew());
- var rotate = -(90 - (this.getSkew() / 2));
+ getUnskewStyle(recommendedElement, index, recommendedElements) {
+ var unskew = -(this.getSkew(recommendedElements));
+ var rotate = -(90 - (this.getSkew(recommendedElements) / 2));
return "transform: skew(" + unskew + "deg)" + " rotate(" + rotate + "deg)" + " scale(1);"
+"background-color: " +this.getBackgroundColor(recommendedElement, index);
}
getBackgroundColor(recommendedElement, index) {
- var alpha = recommendedElement.weight < 0.2 ? 0.2 : (recommendedElement.weight - 0.2);
+ var alpha = (recommendedElement.weight < 0.2 ? 0.2 : (recommendedElement.weight - 0.2));
+ alpha = Math.round((alpha * 10)) / 10;
var rgb = recommendedElement instanceof DataProcessorInvocation ? this.getSepaColor(index) : this.getActionColor(index);
-
return "rgba(" +rgb +"," +alpha +")";
}
@@ -96,18 +95,17 @@ export class PipelineElementRecommendationComponent implements OnInit {
return (index % 2 === 0) ? "63, 81, 181" : "79, 101, 230";
}
- getSkewStyle(index) {
- this.fillRemainingItems();
+ getSkewStyle(index, recommendedElements) {
// transform: rotate(72deg) skew(18deg);
- var skew = this.getSkew();
- var rotate = (index + 1) * this.getAngle();
+ var skew = this.getSkew(recommendedElements);
+ var rotate = (index + 1) * this.getAngle(recommendedElements);
return "transform: rotate(" + rotate + "deg) skew(" + skew + "deg);";
}
- getUnskewStyleLabel(index) {
- var unskew = -(this.getSkew());
- var rotate = (index + 1) * this.getAngle();
+ getUnskewStyleLabel(index, recommendedElements) {
+ var unskew = -(this.getSkew(recommendedElements));
+ var rotate = (index + 1) * this.getAngle(recommendedElements);
var unrotate = -360 + (rotate*-1);
return "transform: skew(" + unskew + "deg)" + " rotate(" + unrotate + "deg)" + " scale(1);"
@@ -124,21 +122,36 @@ export class PipelineElementRecommendationComponent implements OnInit {
+"top: 0px;";
}
- getSkew() {
- return (90 - this.getAngle());
+ getSkew(recommendedElements) {
+ return (90 - this.getAngle(recommendedElements));
}
- getAngle() {
- return (360 / this.recommendedElements.length);
+ getAngle(recommendedElements) {
+ return (360 / recommendedElements.length);
}
- fillRemainingItems() {
- if (this.recommendedElements.length < 6) {
- for (var i = this.recommendedElements.length; i < 6; i++) {
- let element = {fakeElement: true};
- this.setLayoutSettings(element, i);
- this.recommendedElements.push(element);
+ fillRemainingItems(recommendedElements) {
+ if (recommendedElements.length < 6) {
+ for (var i = recommendedElements.length; i < 6; i++) {
+ let element = {fakeElement: true, weight: 0};
+ //this.setLayoutSettings(element, i);
+ recommendedElements.push(element);
}
}
}
+
+ get recommendedElements() {
+ return this._recommendedElements;
+ }
+
+ @Input()
+ set recommendedElements(recommendedElements: any) {
+ console.log("set");
+ console.log(this.pipelineElementDomId);
+ console.log(recommendedElements);
+ this.recommendationsPrepared = false;
+ this.prepareStyles(recommendedElements);
+ this._recommendedElements = recommendedElements;
+ this.recommendationsPrepared = true;
+ }
}
\ No newline at end of file
diff --git a/ui/src/app/editor/components/pipeline/pipeline.component.ts b/ui/src/app/editor/components/pipeline/pipeline.component.ts
index 44694db..d115bc5 100644
--- a/ui/src/app/editor/components/pipeline/pipeline.component.ts
+++ b/ui/src/app/editor/components/pipeline/pipeline.component.ts
@@ -313,8 +313,8 @@ export class PipelineComponent implements OnInit {
this.showCustomizeDialog({a: false, b: pe});
} else {
this.announceConfiguredElement(pe);
- //this.$rootScope.$broadcast("SepaElementConfigured", pe.payload.DOM);
(pe.payload as InvocablePipelineElementUnion).configured = true;
+ pe.settings.completed = true;
}
}
}, status => {
@@ -395,6 +395,7 @@ export class PipelineComponent implements OnInit {
this.JsplumbService.activateEndpoint(pipelineElementInfo.b.payload.dom, pipelineElementInfo.b.settings.completed);
this.JsplumbBridge.getSourceEndpoint(pipelineElementInfo.b.payload.dom).setType("token");
this.triggerPipelineCacheUpdate();
+ this.announceConfiguredElement(pipelineElementInfo.b);
}
this.validatePipeline();
});
diff --git a/ui/src/app/editor/services/object-provider.service.ts b/ui/src/app/editor/services/object-provider.service.ts
index 16e2597..1562e55 100644
--- a/ui/src/app/editor/services/object-provider.service.ts
+++ b/ui/src/app/editor/services/object-provider.service.ts
@@ -69,7 +69,7 @@ export class ObjectProvider {
addElementNew(pipeline, currentPipelineElements: PipelineElementConfig[]): Pipeline {
currentPipelineElements.forEach(pe => {
- if (pe.settings.disabled == undefined || !pe.settings.disabled) {
+ if (pe.settings.disabled == undefined || !(pe.settings.disabled)) {
if (pe.type === 'sepa' || pe.type === 'action') {
let payload = pe.payload;
payload = this.prepareElement(payload as InvocablePipelineElementUnion);