Merge QAIsup (#179)

* add code from Tpankv4/QAIsup

* fix linting errors

* update readme

---------

Co-authored-by: LaviniaStiliadou <[email protected]>

Author: PhilWun

package.json

@@ -28,12 +28,15 @@
     "@angular/router": "9.1.2",
     "@auth0/angular-jwt": "^4.0.0",
     "@covalent/text-editor": "3.0.0-beta.1-2",
+    "@types/file-saver": "^2.0.5",
     "@ustutt/grapheditor-webcomponent": "0.5.4",
     "angular2-prettyjson": "3.0.1",
     "angular2-toaster": "8.0.0",
     "antlr4": "^4.8.0",
     "core-js": "2.6.3",
     "d3": "^5.9.2",
+    "file-saver": "^2.0.5",
+    "keyword-extractor": "0.0.25",
     "lodash": "^4.17.21",
     "madr": "2.1.2",
     "markdown-it": "10.0.0",
@@ -78,7 +81,8 @@
     "stylelint": "^13.5.0",
     "stylelint-config-sass-guidelines": "^7.0.0",
     "ts-node": "~8.0.1",
-    "typescript": "~3.7.7"
+    "typescript": "~3.7.7",
+    "yarn-audit-fix": "^10.0.1"
   },
   "browser": {
     "fs": false

src/app/core/component/action-button-bar/action-button-bar.component.html

@@ -7,12 +7,12 @@
   <span class="action-button-with-margin"><b>{{this.displayText}}</b></span>
 
   <ng-content></ng-content>
-
+  
   <button (click)="reloadButtonClicked()" *ngIf="reloadButton" class="action-button-with-margin" color="accent"
           mat-raised-button>
     <i class="material-icons">autorenew</i> Reload
   </button>
-
+  
   <ng-container *patternAtlasUiShowOnFeature="UiFeatures.EDITING">
     <button (click)="addButtonClicked()" *ngIf="firstAddButton" class="action-button-with-margin" color="accent"
             mat-raised-button>

src/app/core/component/create-algorithm/create-algorithm.component.html

@@ -0,0 +1,34 @@
+<button mat-icon-button class="close-button" [mat-dialog-close]="true">
+	<mat-icon class="close-icon" >close</mat-icon>
+</button>
+<div mat-dialog-content>
+	<mat-form-field>
+		<mat-label>Algorithm Name</mat-label>
+        <input matInput [(ngModel)]="name" cdkFocusInitial>
+	</mat-form-field>
+	<mat-form-field>
+		<mat-label>Select Patterns</mat-label>
+		<mat-select [(value)]="res" multiple>
+			<mat-option *ngFor="let pattern of patterns" [value]="pattern">{{pattern.name}}</mat-option>
+		</mat-select>
+	</mat-form-field>
+	<mat-form-field>
+		<mat-label>Select Optional Patterns</mat-label>
+		<mat-select [(value)]="opt" multiple>
+			<mat-option *ngFor="let pattern of patterns" [value]="pattern">{{pattern.name}}</mat-option>
+		</mat-select>
+	</mat-form-field>
+	<mat-form-field>
+		<mat-label>href to PlanQK website</mat-label>
+        <input matInput [(ngModel)]="planqkref">
+	</mat-form-field>
+</div>
+<div mat-dialog-actions>
+	<button class="action-button-with-margin" (click)="closeDialog()" color="accent" mat-raised-button>
+		<i class="material-icons"></i> create Algorithm
+	</button>
+	<button mat-dialog-close class="action-button-with-margin" mat-raised-button >
+		<i class="material-icons"></i> close
+	</button>
+</div>
+

src/app/core/component/create-algorithm/create-algorithm.component.scss

@@ -0,0 +1,11 @@
+.close-button {
+  float: right;
+  top: -24px;
+  right: -24px;
+}
+
+.close-button:hover {
+  opacity: 0.9;
+  color: #f00;
+  cursor: pointer;
+}

src/app/core/component/create-algorithm/create-algorithm.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateAlgorithmComponent } from './create-algorithm.component';
+
+describe('CreateAlgorithmComponent', () => {
+  let component: CreateAlgorithmComponent;
+  let fixture: ComponentFixture<CreateAlgorithmComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateAlgorithmComponent ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateAlgorithmComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/core/component/create-algorithm/create-algorithm.component.ts

@@ -0,0 +1,49 @@
+import { Component, OnInit, ViewChild, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+
+import { HttpClient } from '@angular/common/http';
+
+@Component({
+  selector: 'pp-create-algorithm',
+  templateUrl: './create-algorithm.component.html',
+  styleUrls: ['./create-algorithm.component.scss']
+})
+export class CreateAlgorithmComponent implements OnInit {
+
+  patterns: any[];
+  res = [];
+  opt = [];
+  name: string;
+  planqkref: string;
+  
+  infos: any;
+  
+  
+  constructor(public dialogRef: MatDialogRef<CreateAlgorithmComponent>,
+              private http: HttpClient,
+             @Inject(MAT_DIALOG_DATA) public data) {
+				 this.patterns = data.patterns;
+  }
+
+  ngOnInit(): void {
+	  
+	  let href = 'https://platform.planqk.de/qc-catalog/algorithms/fae60bca-d2b6-4aa2-88b7-58caace34179';
+	  this.http.get(href).subscribe(data => {
+		  this.infos = data;
+	  });
+	  
+  }
+  
+  closeDialog() {
+	  if(this.res.length > 0){
+		  const result = { name: this.name, patterns: this.res , optional: this.opt, href: this.planqkref };
+		  this.dialogRef.close(result);
+	  } else {
+		  alert('no patterns selected!');
+	  }
+  }
+
+}

src/app/core/component/delete-algorithm/delete-algorithm.component.html

@@ -0,0 +1,19 @@
+<button mat-icon-button class="close-button" [mat-dialog-close]="true">
+	<mat-icon class="close-icon" >close</mat-icon>
+</button>
+<div mat-dialog-content>
+	<mat-form-field>
+		<mat-label>Select algorithms to delete</mat-label>
+		<mat-select [(value)]="res" multiple cdkFocusInitial>
+			<mat-option *ngFor="let alg of algorithms" [value]="alg">{{alg.name}}</mat-option>
+		</mat-select>
+	</mat-form-field>
+</div>
+<div mat-dialog-actions>
+	<button class="action-button-with-margin" (click)="closeDialog()" color="accent" mat-raised-button>
+		<i class="material-icons"></i> delete Algorithm
+	</button>
+	<button mat-dialog-close class="action-button-with-margin" mat-raised-button >
+		<i class="material-icons"></i> close
+	</button>
+</div>

src/app/core/component/delete-algorithm/delete-algorithm.component.scss

@@ -0,0 +1,11 @@
+.close-button {
+  float: right;
+  top: -24px;
+  right: -24px;
+}
+
+.close-button:hover {
+  opacity: 0.9;
+  color: #f00;
+  cursor: pointer;
+}

src/app/core/component/delete-algorithm/delete-algorithm.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DeleteAlgorithmComponent } from './delete-algorithm.component';
+
+describe('DeleteAlgorithmComponent', () => {
+  let component: DeleteAlgorithmComponent;
+  let fixture: ComponentFixture<DeleteAlgorithmComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DeleteAlgorithmComponent ]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DeleteAlgorithmComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/core/component/delete-algorithm/delete-algorithm.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatButtonModule } from '@angular/material/button';
+
+@Component({
+  selector: 'pp-delete-algorithm',
+  templateUrl: './delete-algorithm.component.html',
+  styleUrls: ['./delete-algorithm.component.scss']
+})
+export class DeleteAlgorithmComponent implements OnInit {
+
+  algorithms: any[];
+  res = [];
+  
+  constructor(public dialogRef: MatDialogRef<DeleteAlgorithmComponent>,
+             @Inject(MAT_DIALOG_DATA) public data) {
+				 this.algorithms = data.algorithms;
+			 }
+
+  ngOnInit(): void {
+  }
+  
+  closeDialog() {
+	  if(this.res.length > 0){
+		  const result = this.res;
+		  this.dialogRef.close(result);
+	  } else {
+		  alert('no algorithm selected!');
+	  }
+  }
+
+}