SmartNodeSelector : Extended property state updates (#151)

* Extended property state updates: Changes to `data` and `delimiter` are considered now. * Fixed bugs in `SmartNodeSelectorInteractiveContainer` * Adjusted error variables in constructor
equinor · Jun 25, 2021 · 3a5cfc8 · 3a5cfc8
1 parent 6a69cea
commit 3a5cfc8
Show file tree

Hide file tree

Showing 4 changed files with 452 additions and 195 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [#145](https://github.com/equinor/webviz-core-components/pull/145) - Added wrapper components for typically used Dash components (Dropdown, Slider, etc) with additional styling.
 - [#148](https://github.com/equinor/webviz-core-components/pull/148) - Changed default value of `numSecondsUntilSuggestionsAreShown` to 0.5 in `SmartNodeSelector` component
 - [#150](https://github.com/equinor/webviz-core-components/pull/150) - Changed color of single remove button in `SmartNodeSelector` to the same as for the remove all button.
+- [#151](https://github.com/equinor/webviz-core-components/pull/151) - `SmartNodeSelector`: Changes to `data` and `delimiter` props are considered now and cause the component to update.
 
 ### Added
 

diff --git a/react/src/lib/components/SmartNodeSelector/components/SmartNodeSelectorComponent.tsx b/react/src/lib/components/SmartNodeSelector/components/SmartNodeSelectorComponent.tsx
@@ -123,16 +123,14 @@ export default class SmartNodeSelectorComponent extends Component<SmartNodeSelec
         this.mouseDownElement = null;
         this.componentIsMounted = false;
 
-        let hasError = false;
-        let error = "";
+        let error: string | undefined;
         try {
             this.treeData = new TreeData({
                 treeData: props.data,
                 delimiter: props.delimiter,
             });
         } catch (e) {
             this.treeData = null;
-            hasError = true;
             error = e;
         }
 
@@ -154,11 +152,11 @@ export default class SmartNodeSelectorComponent extends Component<SmartNodeSelec
             nodeSelections,
             currentTagIndex: 0,
             suggestionsVisible: false,
-            hasError: hasError,
-            error: error,
+            hasError: error !== undefined,
+            error: error || "",
         };
 
-        if (!hasError) {
+        if (error === undefined) {
             this.numValidSelections = this.countValidSelections();
         } else {
             this.numValidSelections = 0;
@@ -215,6 +213,43 @@ export default class SmartNodeSelectorComponent extends Component<SmartNodeSelec
     }
 
     componentDidUpdate(prevProps: SmartNodeSelectorPropsType): void {
+        if (
+            (this.props.data &&
+                JSON.stringify(this.props.data) !==
+                    JSON.stringify(prevProps.data)) ||
+            (this.props.delimiter &&
+                this.props.delimiter !== prevProps.delimiter)
+        ) {
+            let error: string | undefined;
+            try {
+                this.treeData = new TreeData({
+                    treeData: this.props.data,
+                    delimiter: this.props.delimiter,
+                });
+            } catch (e) {
+                this.treeData = null;
+                error = e;
+            }
+            const nodeSelections: TreeNodeSelection[] = [];
+            for (const node of this.state.nodeSelections) {
+                nodeSelections.push(
+                    this.createNewNodeSelection(node.getNodePath())
+                );
+            }
+
+            this.setState(
+                {
+                    nodeSelections: nodeSelections,
+                    currentTagIndex: this.state.currentTagIndex,
+                    suggestionsVisible: this.state.suggestionsVisible,
+                    hasError: error !== undefined,
+                    error: error || "",
+                },
+                () => {
+                    this.updateSelectedTagsAndNodes();
+                }
+            );
+        }
         const selectedTags = this.state.nodeSelections
             .filter((nodeSelection) => nodeSelection.isValid())
             .map((nodeSelection) =>