fix(#2862): Support children selection in tree view (#2885)

apache · May 21, 2024 · 3b24a47 · 3b24a47
1 parent fb2d4e4
commit 3b24a47
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 8 deletions.
diff --git a/...es-sdk/src/main/java/org/apache/streampipes/sdk/extractor/AbstractParameterExtractor.java b/...es-sdk/src/main/java/org/apache/streampipes/sdk/extractor/AbstractParameterExtractor.java
@@ -248,22 +248,22 @@ public <V> List<V> selectedTreeNodesInternalNames(String internalName,
     List<TreeInputNode> allNodes = new ArrayList<>();
     RuntimeResolvableTreeInputStaticProperty sp =
         getStaticPropertyByName(internalName, RuntimeResolvableTreeInputStaticProperty.class);
-    if (sp.getNodes().size() > 0) {
+    if (!sp.getNodes().isEmpty()) {
       sp.getNodes().forEach(node -> buildFlatTree(node, allNodes));
     }
 
-    if (allNodes.size() > 0) {
-      return allNodes
+    if (!allNodes.isEmpty()) {
+      return sp.getSelectedNodesInternalNames()
           .stream()
           .filter(node -> {
             if (!onlyDataNodes) {
               return true;
             } else {
-              return node.isDataNode();
+              var existingNode = allNodes.stream().filter(n -> n.getInternalNodeName().equals(node)).findFirst();
+              return existingNode.map(TreeInputNode::isDataNode).orElse(false);
             }
           })
-          .filter(TreeInputNode::isSelected)
-          .map(node -> typeParser.parse(node.getInternalNodeName(), targetClass))
+          .map(node -> typeParser.parse(node, targetClass))
           .collect(Collectors.toList());
     } else {
       return new ArrayList<>();

diff --git a/...i/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.html b/...i/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.html
@@ -54,14 +54,30 @@
     <div fxLayout="row" fxLayoutGap="15px">
         <div fxFlex="30" class="tree-input-section" fxLayout="column">
             <div class="tree-input-header" fxLayoutAlign="start center">
-                <b>Browse</b>
+                <div fxLayout="row" fxFlex="100">
+                    <div fxFlex fxLayoutAlign="start center"><b>Browse</b></div>
+                    <div fxLayoutAlign="end center">
+                        <button
+                            mat-icon-button
+                            color="accent"
+                            (click)="largeView = !largeView"
+                        >
+                            <mat-icon *ngIf="!largeView">open_in_full</mat-icon>
+                            <mat-icon *ngIf="largeView"
+                                >close_fullscreen</mat-icon
+                            >
+                        </button>
+                    </div>
+                </div>
             </div>
             <mat-tree
                 [dataSource]="dataSource"
                 [treeControl]="treeControl"
                 #tree
                 class="sp-tree"
-                style="max-height: 300px; overflow-y: auto"
+                [ngClass]="
+                    largeView ? 'tree-large-height' : 'tree-normal-height'
+                "
             >
                 <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
                     <div
@@ -156,6 +172,7 @@
                                     hasDataChildren(node)
                                 "
                                 matTooltip="Add all direct children"
+                                (click)="addAllDirectChildren(node)"
                                 >add_circle</i
                             >
                             <i

diff --git a/...i/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.scss b/...i/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.scss
@@ -16,6 +16,19 @@
  *
  */
 
+.sp-tree {
+    overflow-y: auto;
+}
+
+.tree-normal-height {
+    min-height: 300px;
+    max-height: 300px;
+}
+
+.tree-large-height {
+    min-height: 800px;
+}
+
 .sp-tree-invisible {
     display: none;
 }

diff --git a/...-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.ts b/...-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.ts
@@ -27,6 +27,7 @@ import { RuntimeResolvableService } from '../static-runtime-resolvable-input/run
 import { NestedTreeControl } from '@angular/cdk/tree';
 import { MatTree, MatTreeNestedDataSource } from '@angular/material/tree';
 import { UntypedFormControl } from '@angular/forms';
+import Tree from 'echarts/types/src/data/Tree';
 
 @Component({
     selector: 'sp-runtime-resolvable-tree-input',
@@ -43,6 +44,8 @@ export class StaticRuntimeResolvableTreeInputComponent
     selectedNodeMetadata: Record<string, string>;
     selectedNodeId: string;
 
+    largeView = false;
+
     @ViewChild('tree') tree: MatTree<TreeInputNode>;
 
     constructor(runtimeResolvableService: RuntimeResolvableService) {
@@ -159,6 +162,25 @@ export class StaticRuntimeResolvableTreeInputComponent
         this.performValidation();
     }
 
+    addAllDirectChildren(node: TreeInputNode) {
+        node.children.forEach(child => {
+            if (child.dataNode && !this.existsSelectedNode(child)) {
+                this.staticProperty.selectedNodesInternalNames.push(
+                    child.internalNodeName,
+                );
+            }
+        });
+        this.performValidation();
+    }
+
+    existsSelectedNode(node: TreeInputNode) {
+        return (
+            this.staticProperty.selectedNodesInternalNames.find(
+                nodeName => nodeName === node.internalNodeName,
+            ) !== undefined
+        );
+    }
+
     removeNode(node: TreeInputNode) {
         node.selected = false;
         const index = this.getSelectedNodeIndex(node.internalNodeName);