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/06/14 22:04:38 UTC
[incubator-streampipes] 04/04: [STREAMPIPES-145] Fix bug in
pipeline element recommender
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-145
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit af46865607959627a69985387649393f4ad00a33
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Mon Jun 15 00:04:22 2020 +0200
[STREAMPIPES-145] Fix bug in pipeline element recommender
---
.../pipeline-element-options.component.css | 17 ++++++
.../pipeline-element-options.component.html | 1 -
.../pipeline-element-recommendation.component.html | 14 +++--
.../pipeline-element-recommendation.component.scss | 17 ++++++
.../pipeline-element-recommendation.component.ts | 63 +++++++++++-----------
ui/src/app/editor-v2/editor.component.ts | 1 -
ui/src/app/editor-v2/editor.module.ts | 7 ++-
.../editor-v2/services/jsplumb-bridge.service.ts | 2 -
ui/src/app/editor-v2/services/jsplumb.service.ts | 1 -
.../pipeline-element-recommendation.service.ts | 15 +++---
ui/src/app/editor-v2/utils/style-sanitizer.ts | 32 +++++++++++
11 files changed, 117 insertions(+), 53 deletions(-)
diff --git a/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.css b/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.css
index e69de29..13cbc4a 100644
--- a/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.css
+++ b/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.css
@@ -0,0 +1,17 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
diff --git a/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.html b/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.html
index 3f346a2..8dd2bb7 100644
--- a/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.html
+++ b/ui/src/app/editor-v2/components/pipeline-element-options/pipeline-element-options.component.html
@@ -66,4 +66,3 @@
[pipelineElementDomId]="pipelineElement.payload.dom"
[recommendedElements]="recommendedElements"
[recommendationsShown]="recommendationsShown" *ngIf="recommendationsAvailable"></pipeline-element-recommendation>
-
diff --git a/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.html b/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.html
index 8bc34a1..10a883c 100644
--- a/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.html
+++ b/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.html
@@ -16,16 +16,14 @@
~
-->
-<div class="cv-wrapper" [ngClass]="recommendationsShown ? 'opened-nav' : ''"
- *ngIf="recommendedElements.length > 0">
+<div *ngIf="recommendationsPrepared && recommendedElements.length > 0" class="cv-wrapper" [ngClass]="recommendationsShown ? 'opened-nav' : ''">
<ul>
- <li *ngFor="let recommendedElement of recommendedElements; index as i"
- [style]="DomSanitizer.bypassSecurityTrustStyle(recommendationLayout[i].skewStyle)">
- {{recommendedElement}}
- <a [style]="DomSanitizer.bypassSecurityTrustStyle(recommendationLayout[i].unskewStyle)" [ngClass]="recommendationLayout[i].type" (click)="create(recommendedElement)" *ngIf="recommendedElement.name">
+ <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">
</a>
- <div (click)="create(recommendedElement)" [style]="DomSanitizer.bypassSecurityTrustStyle(recommendationLayout[i].unskewStyleLabel)"
- class="{{recommendationLayout[i].type}}">
+ <div (click)="create(recommendedElement)" [style]="recommendedElement.layoutSettings.unskewStyleLabel | safeCss"
+ class="{{recommendedElement.layoutSettings.type}}">
<pipeline-element [iconSize]="'small'" [pipelineElement]="recommendedElement" *ngIf="recommendedElement.name">
</pipeline-element>
</div>
diff --git a/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.scss b/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.scss
index e69de29..13cbc4a 100644
--- a/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.scss
+++ b/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.scss
@@ -0,0 +1,17 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
diff --git a/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.ts b/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.ts
index 2cd25ff..ff3cec0 100644
--- a/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.ts
+++ b/ui/src/app/editor-v2/components/pipeline-element-recommendation/pipeline-element-recommendation.component.ts
@@ -21,6 +21,7 @@ import {Component, Input, OnInit} from "@angular/core";
import {PipelineElementConfig, PipelineElementRecommendationLayout} from "../../model/editor.model";
import {DataProcessorInvocation} from "../../../core-model/gen/streampipes-model";
import {DomSanitizer} from "@angular/platform-browser";
+import {SafeCss} from "../../utils/style-sanitizer";
@Component({
selector: 'pipeline-element-recommendation',
@@ -41,10 +42,10 @@ export class PipelineElementRecommendationComponent implements OnInit {
@Input()
recommendedElements: any;
- recommendationLayout: PipelineElementRecommendationLayout[] = [];
+ recommendationsPrepared: boolean = false;
constructor(private JsplumbService: JsplumbService,
- public DomSanitizer: DomSanitizer) {
+ public safeCss: SafeCss) {
}
@@ -54,14 +55,18 @@ export class PipelineElementRecommendationComponent implements OnInit {
prepareStyles() {
this.recommendedElements.forEach((element, index) => {
- let layoutSettings: PipelineElementRecommendationLayout = {
- skewStyle: element.name ? this.getSkewStyle(index) : {'opacity':0},
- unskewStyle: this.getUnskewStyle(element, index),
- unskewStyleLabel: this.getUnskewStyleLabel(index),
- type: element instanceof DataProcessorInvocation ? "sepa" : "action"
- };
- this.recommendationLayout.push(layoutSettings);
+ this.setLayoutSettings(element, index);
});
+ this.recommendationsPrepared = true;
+ }
+
+ setLayoutSettings(element, index) {
+ element.layoutSettings = {
+ skewStyle: element.name ? this.getSkewStyle(index) : {'opacity': 0},
+ unskewStyle: this.getUnskewStyle(element, index),
+ unskewStyleLabel: this.getUnskewStyleLabel(index),
+ type: element instanceof DataProcessorInvocation ? "sepa" : "action"
+ };
}
create(recommendedElement) {
@@ -73,10 +78,8 @@ export class PipelineElementRecommendationComponent implements OnInit {
var unskew = -(this.getSkew());
var rotate = -(90 - (this.getSkew() / 2));
- return {
- "transform": "skew(" + unskew + "deg)" + " rotate(" + rotate + "deg)" + " scale(1)",
- "background-color": this.getBackgroundColor(recommendedElement, index)
- };
+ return "transform: skew(" + unskew + "deg)" + " rotate(" + rotate + "deg)" + " scale(1);"
+ +"background-color: " +this.getBackgroundColor(recommendedElement, index);
}
getBackgroundColor(recommendedElement, index) {
@@ -100,9 +103,7 @@ export class PipelineElementRecommendationComponent implements OnInit {
var skew = this.getSkew();
var rotate = (index + 1) * this.getAngle();
- return {
- "transform": "rotate(" + rotate + "deg) skew(" + skew + "deg)"
- };
+ return "transform: rotate(" + rotate + "deg) skew(" + skew + "deg);";
}
getUnskewStyleLabel(index) {
@@ -110,20 +111,18 @@ export class PipelineElementRecommendationComponent implements OnInit {
var rotate = (index + 1) * this.getAngle();
var unrotate = -360 + (rotate*-1);
- return {
- "transform": "skew(" + unskew + "deg)" + " rotate(" + unrotate + "deg)" + " scale(1)",
- "z-index": -1,
- "margin-left":"50%",
- "margin-top":"50%",
- "position": "absolute",
- "background": "white",
- "height": "50px",
- "width":"50px",
- "font-size": "16px",
- "text-align": "center",
- "line-height": "50px",
- "top": "0px"
- };
+ return "transform: skew(" + unskew + "deg)" + " rotate(" + unrotate + "deg)" + " scale(1);"
+ +"z-index: -1;"
+ +"margin-left: 50%;"
+ +"margin-top: 50%;"
+ +"position: absolute;"
+ +"background: white;"
+ +"height: 50px;"
+ +"width: 50px;"
+ +"font-size: 16px;"
+ +"text-align: center;"
+ +"line-height: 50px;"
+ +"top: 0px;";
}
getSkew() {
@@ -137,7 +136,9 @@ export class PipelineElementRecommendationComponent implements OnInit {
fillRemainingItems() {
if (this.recommendedElements.length < 6) {
for (var i = this.recommendedElements.length; i < 6; i++) {
- this.recommendedElements.push({fakeElement: true});
+ let element = {fakeElement: true};
+ this.setLayoutSettings(element, i);
+ this.recommendedElements.push(element);
}
}
}
diff --git a/ui/src/app/editor-v2/editor.component.ts b/ui/src/app/editor-v2/editor.component.ts
index f57e555..21c9eed 100644
--- a/ui/src/app/editor-v2/editor.component.ts
+++ b/ui/src/app/editor-v2/editor.component.ts
@@ -89,7 +89,6 @@ export class EditorComponent implements OnInit {
});
this.pipelineElementService.getDataSources().subscribe(sources => {
let allStreams = this.collectStreams(sources);
- console.log(allStreams);
this.availableDataStreams = allStreams.filter(s => !(s instanceof SpDataSet));
this.availableDataSets = allStreams
.filter(s => s instanceof SpDataSet)
diff --git a/ui/src/app/editor-v2/editor.module.ts b/ui/src/app/editor-v2/editor.module.ts
index 522b7b2..d363f43 100644
--- a/ui/src/app/editor-v2/editor.module.ts
+++ b/ui/src/app/editor-v2/editor.module.ts
@@ -55,6 +55,7 @@ import {MatListModule} from "@angular/material/list";
import {HelpComponent} from "./dialog/help/help.component";
import {PipelineElementDocumentationComponent} from "./components/pipeline-element-documentation/pipeline-element-documentation.component";
import { ShowdownModule } from 'ngx-showdown';
+import {SafeCss} from "./utils/style-sanitizer";
@NgModule({
imports: [
@@ -84,7 +85,8 @@ import { ShowdownModule } from 'ngx-showdown';
PipelineElementOptionsComponent,
PipelineElementRecommendationComponent,
PipelineComponent,
- SavePipelineComponent
+ SavePipelineComponent,
+ SafeCss
],
providers: [
EditorService,
@@ -113,7 +115,8 @@ import { ShowdownModule } from 'ngx-showdown';
provide: '$timeout',
useFactory: ($injector: any) => $injector.get('$timeout'),
deps: ['$injector']
- }
+ },
+ SafeCss
],
exports: [
EditorComponent
diff --git a/ui/src/app/editor-v2/services/jsplumb-bridge.service.ts b/ui/src/app/editor-v2/services/jsplumb-bridge.service.ts
index 3b64e88..82631d1 100644
--- a/ui/src/app/editor-v2/services/jsplumb-bridge.service.ts
+++ b/ui/src/app/editor-v2/services/jsplumb-bridge.service.ts
@@ -39,8 +39,6 @@ export class JsplumbBridge {
}
setContainer(container) {
- console.log("container");
- console.log(container);
jsPlumb.setContainer(container);
}
diff --git a/ui/src/app/editor-v2/services/jsplumb.service.ts b/ui/src/app/editor-v2/services/jsplumb.service.ts
index fd19a19..4df54c5 100644
--- a/ui/src/app/editor-v2/services/jsplumb.service.ts
+++ b/ui/src/app/editor-v2/services/jsplumb.service.ts
@@ -150,7 +150,6 @@ export class JsplumbService {
let pipelineElementConfig = {} as PipelineElementConfig;
pipelineElementConfig.type = PipelineElementTypeUtils
.toCssShortHand(PipelineElementTypeUtils.fromType(pipelineElement))
- console.log(pipelineElementConfig.type);
pipelineElementConfig.payload = this.clone(pipelineElement);
pipelineElementConfig.settings = {connectable: connectable,
openCustomize: !(pipelineElement as any).configured,
diff --git a/ui/src/app/editor-v2/services/pipeline-element-recommendation.service.ts b/ui/src/app/editor-v2/services/pipeline-element-recommendation.service.ts
index 8e16eba..4738fad 100644
--- a/ui/src/app/editor-v2/services/pipeline-element-recommendation.service.ts
+++ b/ui/src/app/editor-v2/services/pipeline-element-recommendation.service.ts
@@ -41,15 +41,15 @@ export class PipelineElementRecommendationService {
}
populateRecommendedList(allElements, recs) {
- var elementRecommendations = [];
+ let elementRecommendations: any = [];
recs.sort(function (a, b) {
return (a.count > b.count) ? -1 : ((b.count > a.count) ? 1 : 0);
});
- var maxRecs = recs.length > 7 ? 7 : recs.length;
- var el;
- for (var i = 0; i < maxRecs; i++) {
- el = recs[i];
- var element = this.getPipelineElementContents(allElements, el.elementId)[0];
+ let maxRecs = recs.length > 7 ? 7 : recs.length;
+ for (let i = 0; i < maxRecs; i++) {
+ let el = recs[i];
+ let elements = this.getPipelineElementContents(allElements, el.elementId);
+ let element = elements[0];
(element as any).weight = el.weight;
elementRecommendations.push(element);
}
@@ -59,6 +59,7 @@ export class PipelineElementRecommendationService {
getPipelineElementContents(allElements: PipelineElementUnion[], belongsTo: string) {
return allElements
- .filter(pe => (pe instanceof SpDataStream && pe.elementId === belongsTo) || (pe instanceof InvocableStreamPipesEntity && pe.belongsTo === belongsTo));
+ .filter(pe => (pe instanceof SpDataStream && pe.elementId === belongsTo)
+ || (pe instanceof InvocableStreamPipesEntity && pe.belongsTo === belongsTo));
}
}
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/utils/style-sanitizer.ts b/ui/src/app/editor-v2/utils/style-sanitizer.ts
new file mode 100644
index 0000000..a1c530d
--- /dev/null
+++ b/ui/src/app/editor-v2/utils/style-sanitizer.ts
@@ -0,0 +1,32 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { Pipe, PipeTransform } from '@angular/core';
+import {DomSanitizer, SafeStyle} from "@angular/platform-browser";
+
+@Pipe({name: 'safeCss'})
+export class SafeCss implements PipeTransform {
+
+ constructor(private DomSanitizer: DomSanitizer) {
+
+ }
+
+ transform(value: any): SafeStyle {
+ return this.DomSanitizer.bypassSecurityTrustStyle(value);
+ }
+}
\ No newline at end of file