diff --git a/src/app/components-small/plugin-filter-node/plugin-filter-node.component.html b/src/app/components-small/plugin-filter-node/plugin-filter-node.component.html
index 386b4ee..8300e76 100644
--- a/src/app/components-small/plugin-filter-node/plugin-filter-node.component.html
+++ b/src/app/components-small/plugin-filter-node/plugin-filter-node.component.html
@@ -80,6 +80,9 @@
Examples: "processing", "conversion", "dataloader", "visualization", "interaction"
+
diff --git a/src/app/components-small/plugin-filter-node/plugin-filter-node.component.ts b/src/app/components-small/plugin-filter-node/plugin-filter-node.component.ts
index cf76b56..cff023d 100644
--- a/src/app/components-small/plugin-filter-node/plugin-filter-node.component.ts
+++ b/src/app/components-small/plugin-filter-node/plugin-filter-node.component.ts
@@ -1,4 +1,7 @@
import { Component, EventEmitter, Input, OnInit, Output, SimpleChanges } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { ChoosePluginDialog } from 'src/app/dialogs/choose-plugin/choose-plugin.dialog';
+import { PluginApiObject } from 'src/app/services/qhana-api-data-types';
// Define filter types ('not' excluded)
// The PluginFilterNodeComponent component is designed to encapsulate a filter object and the information wether the filter is inverted ('not').
@@ -25,7 +28,7 @@ export class PluginFilterNodeComponent implements OnInit {
inverted: boolean = false;
isEmpty: boolean = true;
- constructor() { }
+ constructor(private dialog: MatDialog) { }
ngOnInit(): void {
this.setupFilter();
@@ -156,4 +159,22 @@ export class PluginFilterNodeComponent implements OnInit {
}
this.filterOut.emit(JSON.parse(JSON.stringify(this.filterObject)));
}
+
+ openPluginChooser() {
+ const dialogRef = this.dialog.open(ChoosePluginDialog, {});
+ dialogRef.afterClosed().subscribe((result: PluginApiObject | null) => {
+ if (result == null) {
+ return; // nothing was selected
+ }
+ if (this.type === "id") {
+ this.value = result.identifier;
+ this.updateFilterObject();
+ }
+ if (this.type === "name") {
+ this.value = result.title;
+ this.updateFilterObject();
+ }
+ });
+
+ }
}
diff --git a/src/app/dialogs/choose-plugin/choose-plugin.dialog.ts b/src/app/dialogs/choose-plugin/choose-plugin.dialog.ts
index 69d1249..cc2fbc9 100644
--- a/src/app/dialogs/choose-plugin/choose-plugin.dialog.ts
+++ b/src/app/dialogs/choose-plugin/choose-plugin.dialog.ts
@@ -22,17 +22,17 @@ export class ChoosePluginDialog {
queryParams: URLSearchParams | null = null;
- constructor(public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: PluginRestrictions, private registry: PluginRegistryBaseService) {
+ constructor(public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public data: PluginRestrictions | null, private registry: PluginRegistryBaseService) {
const query = new URLSearchParams();
- if (data.pluginTags) {
+ if (data?.pluginTags) {
const tag_list = data.pluginTags.join(",");
console.log(tag_list, data.pluginTags)
query.set("tags", tag_list);
}
- if (data.pluginName) {
+ if (data?.pluginName) {
query.set("name", data.pluginName);
}
- if (data.pluginVersion) {
+ if (data?.pluginVersion) {
query.set("version", data.pluginVersion)
}
this.queryParams = query;