From 4c8613484f2c700d3f7ce83e8ac3657f5f8cb6df Mon Sep 17 00:00:00 2001
From: Ruben Thoms <ruben.thoms@ceetronsolutions.com>
Date: Fri, 15 Sep 2023 16:45:48 +0200
Subject: [PATCH 1/4] Fixed multiple issues and improved overall UX

---
 .../private-components/tag.tsx                | 40 +++++++++++--
 .../private-utils/treeData.ts                 | 11 ----
 .../SmartNodeSelector/smartNodeSelector.tsx   | 58 ++++++++++---------
 .../VectorSelector/vectorSelector.tsx         |  2 -
 4 files changed, 66 insertions(+), 45 deletions(-)

diff --git a/frontend/src/lib/components/SmartNodeSelector/private-components/tag.tsx b/frontend/src/lib/components/SmartNodeSelector/private-components/tag.tsx
index f9734183c..38b476cf5 100644
--- a/frontend/src/lib/components/SmartNodeSelector/private-components/tag.tsx
+++ b/frontend/src/lib/components/SmartNodeSelector/private-components/tag.tsx
@@ -33,6 +33,7 @@ type TagProps = {
     removeTag: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, index: number) => void;
     updateSelectedTagsAndNodes: () => void;
     shake: boolean;
+    maxNumSelectedNodes: number;
 };
 
 /**
@@ -126,13 +127,29 @@ export class Tag extends React.Component<TagProps> {
     private createMatchesCounter(nodeSelection: TreeNodeSelection, index: number): JSX.Element | null {
         if (nodeSelection.containsWildcard() && nodeSelection.countExactlyMatchedNodePaths() > 0) {
             const matches = nodeSelection.countExactlyMatchedNodePaths();
+            let fromMax = "";
+            let title = "This expression matches " + matches + " options.";
+            if (this.props.maxNumSelectedNodes !== -1 && matches > this.props.maxNumSelectedNodes) {
+                fromMax = " / " + this.props.maxNumSelectedNodes;
+                title = `This expression matches ${matches} node${matches !== 1 && "s"}, but only ${
+                    this.props.maxNumSelectedNodes
+                } can be selected.`;
+            }
+
             return (
                 <span
                     key={"TagMatchesCounter_" + index}
-                    className="items-center bg-blue-700 text-white rounded-full h-5 justify-center mr-2 pl-1.5 pr-1.5 min-w-[5] flex outline-none relative text-center text-xs leading-none"
-                    title={"This expression matches " + matches + " options."}
+                    className={resolveClassNames(
+                        "items-center text-white rounded-full h-5 justify-center mr-2 pl-1.5 pr-1.5 min-w-[5] flex outline-none relative text-center text-xs leading-none",
+                        {
+                            "bg-blue-700": matches <= this.props.maxNumSelectedNodes,
+                            "bg-amber-600": matches > this.props.maxNumSelectedNodes,
+                        }
+                    )}
+                    title={title}
                 >
                     {matches}
+                    {fromMax}
                 </span>
             );
         }
@@ -227,8 +244,13 @@ export class Tag extends React.Component<TagProps> {
     }
 
     private tagTitle(nodeSelection: TreeNodeSelection, index: number): string {
-        const { countTags, checkIfDuplicate } = this.props;
-        if (index === countTags - 1 && !nodeSelection.displayAsTag()) {
+        const { countTags, checkIfDuplicate, maxNumSelectedNodes } = this.props;
+        if (
+            index === countTags - 1 &&
+            !nodeSelection.displayAsTag() &&
+            nodeSelection.displayText() === "" &&
+            maxNumSelectedNodes !== 1
+        ) {
             return "Enter a new name";
         } else if (!nodeSelection.isValid()) {
             return "Invalid";
@@ -237,7 +259,15 @@ export class Tag extends React.Component<TagProps> {
         } else if (!nodeSelection.isComplete()) {
             return "Incomplete";
         } else {
-            return nodeSelection.exactlyMatchedNodePaths().join("\n");
+            const exactlyMatchedNodePaths = nodeSelection.exactlyMatchedNodePaths();
+            if (exactlyMatchedNodePaths.length === -1 || exactlyMatchedNodePaths.length <= maxNumSelectedNodes) {
+                return exactlyMatchedNodePaths.join("\n");
+            }
+            return `Matched ${exactlyMatchedNodePaths.length} node${
+                exactlyMatchedNodePaths.length !== 1 && "s"
+            } but only ${maxNumSelectedNodes} ${
+                maxNumSelectedNodes === 1 ? "is" : "are"
+            } allowed.\n\nSelected nodes:\n${exactlyMatchedNodePaths.slice(0, maxNumSelectedNodes).join("\n")}`;
         }
     }
 
diff --git a/frontend/src/lib/components/SmartNodeSelector/private-utils/treeData.ts b/frontend/src/lib/components/SmartNodeSelector/private-utils/treeData.ts
index 23b71c166..47771a77d 100644
--- a/frontend/src/lib/components/SmartNodeSelector/private-utils/treeData.ts
+++ b/frontend/src/lib/components/SmartNodeSelector/private-utils/treeData.ts
@@ -12,25 +12,21 @@ export class TreeData {
     private _stringifiedData: string;
     private _nodeData: TreeDataNodeMetaData[];
     private _allowOrOperator: boolean;
-    private _allowWildcards: boolean;
 
     constructor({
         treeData,
         delimiter,
         allowOrOperator,
-        allowWildcards,
     }: {
         treeData: TreeDataNode[];
         delimiter: string;
         allowOrOperator: boolean;
-        allowWildcards: boolean;
     }) {
         this._treeData = treeData;
         this._delimiter = delimiter;
         this._nodeData = [];
         this._stringifiedData = "";
         this._allowOrOperator = allowOrOperator;
-        this._allowWildcards = allowWildcards;
 
         this.populateNodes();
     }
@@ -129,13 +125,6 @@ export class TreeData {
     }
 
     private adjustNodeName(nodeName: string): string {
-        if (!this._allowWildcards) {
-            return this.replaceAll(
-                this.replaceAll(this.replaceAll(this.escapeRegExp(nodeName), ":", ""), "*", "\\*"),
-                "?",
-                "\\."
-            );
-        }
         return this.activateOrStatements(
             this.replaceAll(
                 this.replaceAll(this.replaceAll(this.escapeRegExp(nodeName), ":", ""), "*", '[^:"]*'),
diff --git a/frontend/src/lib/components/SmartNodeSelector/smartNodeSelector.tsx b/frontend/src/lib/components/SmartNodeSelector/smartNodeSelector.tsx
index ea60350ad..237f6de8f 100644
--- a/frontend/src/lib/components/SmartNodeSelector/smartNodeSelector.tsx
+++ b/frontend/src/lib/components/SmartNodeSelector/smartNodeSelector.tsx
@@ -160,7 +160,6 @@ export class SmartNodeSelectorComponent extends React.Component<SmartNodeSelecto
                 treeData: props.data,
                 delimiter: props.delimiter,
                 allowOrOperator: props.useBetaFeatures || false,
-                allowWildcards: props.maxNumSelectedNodes !== 1,
             });
         } catch (e) {
             this.treeData = null;
@@ -251,7 +250,6 @@ export class SmartNodeSelectorComponent extends React.Component<SmartNodeSelecto
                     treeData: this.props.data,
                     delimiter: this.props.delimiter,
                     allowOrOperator: this.props.useBetaFeatures || false,
-                    allowWildcards: this.props.maxNumSelectedNodes !== 1,
                 });
             } catch (e) {
                 this.treeData = null;
@@ -785,7 +783,7 @@ export class SmartNodeSelectorComponent extends React.Component<SmartNodeSelecto
     }): void {
         this.state.nodeSelections.forEach((selection) => selection.setSelected(false));
         this.updateState({
-            currentTagIndex: newCurrentTagIndex === undefined ? this.countTags() - 1 : newCurrentTagIndex,
+            currentTagIndex: newCurrentTagIndex === undefined ? -1 : newCurrentTagIndex,
             callback: () => {
                 if (showSuggestions) this.maybeShowSuggestions();
                 if (focusInput) this.focusCurrentTag();
@@ -1623,6 +1621,7 @@ export class SmartNodeSelectorComponent extends React.Component<SmartNodeSelecto
         }
 
         const frameless = maxNumSelectedNodes === 1;
+        let numSelectedNodes = maxNumSelectedNodes;
 
         return (
             <div id={id} ref={this.ref}>
@@ -1647,30 +1646,35 @@ export class SmartNodeSelectorComponent extends React.Component<SmartNodeSelecto
                         })}
                         ref={this.tagFieldRef}
                     >
-                        {nodeSelections.map((selection, index) => (
-                            <Tag
-                                key={`${index}`}
-                                index={index}
-                                frameless={frameless}
-                                active={index === this.currentTagIndex()}
-                                placeholder={placeholder ? placeholder : "Add new tag"}
-                                treeNodeSelection={selection}
-                                countTags={this.countTags()}
-                                currentTag={index === this.currentTagIndex()}
-                                checkIfDuplicate={this.checkIfSelectionIsDuplicate}
-                                inputKeyDown={this.handleInputKeyDown}
-                                inputKeyUp={this.handleInputKeyUp}
-                                inputChange={this.handleInputChange}
-                                inputSelect={this.handleInputSelect}
-                                inputBlur={this.handleInputBlur}
-                                hideSuggestions={(cb?: () => void) => this.hideSuggestions({ callback: cb })}
-                                removeTag={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>, index: number) =>
-                                    this.removeTag(index, true, e)
-                                }
-                                updateSelectedTagsAndNodes={this.updateSelectedTagsAndNodes}
-                                shake={this.state.currentTagShaking && index === this.currentTagIndex()}
-                            />
-                        ))}
+                        {nodeSelections.map((selection, index) => {
+                            const tag = (
+                                <Tag
+                                    key={`${index}`}
+                                    index={index}
+                                    frameless={frameless}
+                                    active={index === this.currentTagIndex()}
+                                    placeholder={placeholder ? placeholder : "Add new tag"}
+                                    treeNodeSelection={selection}
+                                    countTags={this.countTags()}
+                                    currentTag={index === this.currentTagIndex()}
+                                    checkIfDuplicate={this.checkIfSelectionIsDuplicate}
+                                    inputKeyDown={this.handleInputKeyDown}
+                                    inputKeyUp={this.handleInputKeyUp}
+                                    inputChange={this.handleInputChange}
+                                    inputSelect={this.handleInputSelect}
+                                    inputBlur={this.handleInputBlur}
+                                    hideSuggestions={(cb?: () => void) => this.hideSuggestions({ callback: cb })}
+                                    removeTag={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>, index: number) =>
+                                        this.removeTag(index, true, e)
+                                    }
+                                    updateSelectedTagsAndNodes={this.updateSelectedTagsAndNodes}
+                                    shake={this.state.currentTagShaking && index === this.currentTagIndex()}
+                                    maxNumSelectedNodes={numSelectedNodes === -1 ? -1 : numSelectedNodes}
+                                />
+                            );
+                            numSelectedNodes -= selection.numberOfExactlyMatchedNodes();
+                            return tag;
+                        })}
                     </ul>
                     <div className="absolute right-2 top-1/2 -mt-3">
                         <button
diff --git a/frontend/src/lib/components/VectorSelector/vectorSelector.tsx b/frontend/src/lib/components/VectorSelector/vectorSelector.tsx
index b55ad59e7..140b77b8c 100644
--- a/frontend/src/lib/components/VectorSelector/vectorSelector.tsx
+++ b/frontend/src/lib/components/VectorSelector/vectorSelector.tsx
@@ -58,7 +58,6 @@ export class VectorSelectorComponent extends SmartNodeSelectorComponent {
                 treeData: this.modifyTreeData(props.data, props.numMetaNodes, this.vectorDefinitions),
                 delimiter: props.delimiter,
                 allowOrOperator: props.useBetaFeatures || false,
-                allowWildcards: this.props.maxNumSelectedNodes !== 1,
             });
         } catch (e) {
             this.treeData = null;
@@ -117,7 +116,6 @@ export class VectorSelectorComponent extends SmartNodeSelectorComponent {
                     treeData: this.modifyTreeData(this.props.data, this.props.numMetaNodes, this.vectorDefinitions),
                     delimiter: this.props.delimiter,
                     allowOrOperator: this.props.useBetaFeatures || false,
-                    allowWildcards: this.props.maxNumSelectedNodes !== 1,
                 });
             } catch (e) {
                 this.treeData = null;

From 5000b8be41f745a8ded57e33b9675d727949645f Mon Sep 17 00:00:00 2001
From: Ruben Thoms <ruben.thoms@ceetronsolutions.com>
Date: Mon, 18 Sep 2023 09:48:39 +0200
Subject: [PATCH 2/4] Fixed bug with coloring matches counter

---
 .../components/SmartNodeSelector/private-components/tag.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/SmartNodeSelector/private-components/tag.tsx b/frontend/src/lib/components/SmartNodeSelector/private-components/tag.tsx
index 38b476cf5..fc2e9f187 100644
--- a/frontend/src/lib/components/SmartNodeSelector/private-components/tag.tsx
+++ b/frontend/src/lib/components/SmartNodeSelector/private-components/tag.tsx
@@ -142,8 +142,10 @@ export class Tag extends React.Component<TagProps> {
                     className={resolveClassNames(
                         "items-center text-white rounded-full h-5 justify-center mr-2 pl-1.5 pr-1.5 min-w-[5] flex outline-none relative text-center text-xs leading-none",
                         {
-                            "bg-blue-700": matches <= this.props.maxNumSelectedNodes,
-                            "bg-amber-600": matches > this.props.maxNumSelectedNodes,
+                            "bg-blue-700":
+                                matches <= this.props.maxNumSelectedNodes || this.props.maxNumSelectedNodes === -1,
+                            "bg-amber-600":
+                                matches > this.props.maxNumSelectedNodes && this.props.maxNumSelectedNodes !== -1,
                         }
                     )}
                     title={title}

From 5d99bcc76c3cddaf6b8fad5b36065ad80480948d Mon Sep 17 00:00:00 2001
From: Ruben Thoms <ruben.thoms@ceetronsolutions.com>
Date: Mon, 18 Sep 2023 15:01:45 +0200
Subject: [PATCH 3/4] Reduced z-index related to Tag component

---
 .../components/SmartNodeSelector/private-components/tag.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/components/SmartNodeSelector/private-components/tag.tsx b/frontend/src/lib/components/SmartNodeSelector/private-components/tag.tsx
index fc2e9f187..befdc3c9c 100644
--- a/frontend/src/lib/components/SmartNodeSelector/private-components/tag.tsx
+++ b/frontend/src/lib/components/SmartNodeSelector/private-components/tag.tsx
@@ -66,7 +66,7 @@ export class Tag extends React.Component<TagProps> {
     private innerTagClasses(invalid = false, duplicate = false): string {
         const { treeNodeSelection } = this.props;
         let ret = {
-            "text-sm flex flex-wrap rounded justify-left items-center min-w-0 m-0.5 text-slate-600 border-2 border-transparent whitespace-pre-wrap z-10 bg-no-repeat":
+            "text-sm flex flex-wrap rounded justify-left items-center min-w-0 m-0.5 text-slate-600 border-2 border-transparent whitespace-pre-wrap z-5 bg-no-repeat":
                 true,
         };
         if (this.addAdditionalClasses(invalid)) {
@@ -86,7 +86,7 @@ export class Tag extends React.Component<TagProps> {
 
     private outerTagClasses(invalid: boolean, duplicate: boolean, frameless: boolean): string {
         return resolveClassNames(
-            "flex flex-wrap rounded justify-left items-center min-w-0 relative mr-2 mt-1 mb-1 text-slate-600 border-2 whitespace-pre-wrap z-10",
+            "flex flex-wrap rounded justify-left items-center min-w-0 relative mr-2 mt-1 mb-1 text-slate-600 border-2 whitespace-pre-wrap z-5",
             {
                 "border-slate-400 bg-slate-50 SmartNodeSelector__Tag": this.displayAsTag() || frameless,
                 "border-transparent bg-transparent": !this.displayAsTag() && !frameless,
@@ -414,7 +414,7 @@ export class Tag extends React.Component<TagProps> {
                     <button
                         type="button"
                         key={"TagRemoveButton_" + index}
-                        className="absolute -right-2 -top-2 bg-cyan-600 border border-white rounded-full cursor-pointer w-4 h-4 p-0 flex items-center justify-center hover:bg-cyan-500 z-20"
+                        className="absolute -right-2 -top-2 bg-cyan-600 border border-white rounded-full cursor-pointer w-4 h-4 p-0 flex items-center justify-center hover:bg-cyan-500 z-8"
                         title="Remove"
                         onClick={(e): void => removeTag(e, index)}
                     >

From 7e9626e4af75278a9aebbd38be3734c93ead6091 Mon Sep 17 00:00:00 2001
From: Ruben Thoms <ruben.thoms@ceetronsolutions.com>
Date: Tue, 19 Sep 2023 14:52:17 +0200
Subject: [PATCH 4/4] Additional fixes

---
 .../private-components/suggestions.tsx                | 11 ++++++++---
 .../SmartNodeSelector/smartNodeSelector.tsx           |  9 ++++-----
 .../lib/components/VectorSelector/vectorSelector.tsx  |  5 -----
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/components/SmartNodeSelector/private-components/suggestions.tsx b/frontend/src/lib/components/SmartNodeSelector/private-components/suggestions.tsx
index d70127515..2e9483dd5 100644
--- a/frontend/src/lib/components/SmartNodeSelector/private-components/suggestions.tsx
+++ b/frontend/src/lib/components/SmartNodeSelector/private-components/suggestions.tsx
@@ -98,7 +98,12 @@ export class Suggestions extends React.Component<SuggestionsProps> {
 
     componentDidUpdate(previousProps: SuggestionsProps): void {
         const { visible, treeNodeSelection, suggestionsRef } = this.props;
-        if (previousProps.visible != visible || previousProps.treeNodeSelection != treeNodeSelection) {
+        if (previousProps.visible !== visible || previousProps.treeNodeSelection !== treeNodeSelection) {
+            if (this.props.treeNodeSelection) {
+                this._allOptions = this.props.treeNodeSelection.getSuggestions();
+                this._currentNodeLevel = this.props.treeNodeSelection.getFocussedLevel();
+            }
+
             this._upperSpacerHeight = 0;
             if (suggestionsRef.current) {
                 (suggestionsRef.current as HTMLDivElement).scrollTop = 0;
@@ -144,7 +149,7 @@ export class Suggestions extends React.Component<SuggestionsProps> {
     }
 
     private handleGlobalKeyDown(e: globalThis.KeyboardEvent): void {
-        const { visible } = this.props;
+        const { visible, treeNodeSelection } = this.props;
         if (visible) {
             if (e.key === "ArrowUp") {
                 this.markSuggestionAsHoveredAndMakeVisible(Math.max(0, this._currentlySelectedSuggestionIndex - 1));
@@ -153,7 +158,7 @@ export class Suggestions extends React.Component<SuggestionsProps> {
                     Math.min(this._allOptions.length - 1, this._currentlySelectedSuggestionIndex + 1)
                 );
             }
-            if (e.key == "Enter" && this.currentlySelectedSuggestion() !== undefined) {
+            if (e.key == "Enter" && this.currentlySelectedSuggestion() !== undefined && this._allOptions.length > 0 &&  !treeNodeSelection?.focussedNodeNameContainsWildcard()) {
                 this.useSuggestion(e, this.currentlySelectedSuggestion().getAttribute("data-use") as string);
             }
         }
diff --git a/frontend/src/lib/components/SmartNodeSelector/smartNodeSelector.tsx b/frontend/src/lib/components/SmartNodeSelector/smartNodeSelector.tsx
index 237f6de8f..85c7111ac 100644
--- a/frontend/src/lib/components/SmartNodeSelector/smartNodeSelector.tsx
+++ b/frontend/src/lib/components/SmartNodeSelector/smartNodeSelector.tsx
@@ -236,10 +236,6 @@ export class SmartNodeSelectorComponent extends React.Component<SmartNodeSelecto
     }
 
     componentDidUpdate(prevProps: SmartNodeSelectorProps): void {
-        if (this.updateFromWithin) {
-            this.updateFromWithin = false;
-            return;
-        }
         if (
             (this.props.data && JSON.stringify(this.props.data) !== JSON.stringify(prevProps.data)) ||
             (this.props.delimiter && this.props.delimiter !== prevProps.delimiter)
@@ -612,12 +608,15 @@ export class SmartNodeSelectorComponent extends React.Component<SmartNodeSelecto
         const domNode = (this.tagFieldRef as React.RefObject<HTMLUListElement>).current as HTMLUListElement;
         const suggestions = (this.suggestionsRef as React.RefObject<HTMLDivElement>).current as HTMLDivElement;
         const eventTarget = event.target as Element;
+        if (domNode && domNode.getBoundingClientRect().width === 0) {
+            return;
+        }
         if ((!domNode || !domNode.contains(eventTarget)) && (!suggestions || !suggestions.contains(eventTarget))) {
+            this.noUserInputSelect = false;
             this.hideSuggestions({
                 callback: () => {
                     if (!this.selectionHasStarted) {
                         this.unselectAllTags({});
-
                         this.updateState({ currentTagIndex: -1 });
                     }
                     this.selectionHasStarted = false;
diff --git a/frontend/src/lib/components/VectorSelector/vectorSelector.tsx b/frontend/src/lib/components/VectorSelector/vectorSelector.tsx
index 140b77b8c..71c3b69e7 100644
--- a/frontend/src/lib/components/VectorSelector/vectorSelector.tsx
+++ b/frontend/src/lib/components/VectorSelector/vectorSelector.tsx
@@ -88,11 +88,6 @@ export class VectorSelectorComponent extends SmartNodeSelectorComponent {
     }
 
     componentDidUpdate(prevProps: VectorSelectorProps): void {
-        if (this.updateFromWithin) {
-            this.updateFromWithin = false;
-            return;
-        }
-
         if (
             this.props.customVectorDefinitions &&
             JSON.stringify(this.props.customVectorDefinitions) !== JSON.stringify(prevProps.customVectorDefinitions)