From c1a62ce47c57a30bdeeee2adb023e36bbf9ff579 Mon Sep 17 00:00:00 2001
From: Novak Zaballa <41410593+novakzaballa@users.noreply.github.com>
Date: Wed, 6 Sep 2023 11:13:41 -0400
Subject: [PATCH] fix: UI issue when there were more than 100 features (#2711)

---
 frontend/package-lock.json             | 101 +++++++++++++++++++------
 frontend/package.json                  |   2 +-
 frontend/web/components/PanelSearch.js |  35 +++++----
 3 files changed, 101 insertions(+), 37 deletions(-)

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 79bc0b1f8137..d0da92181a2a 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -91,8 +91,8 @@
         "react-select": "2.4.3",
         "react-sortable-hoc": "1.9.1",
         "react-tooltip": "3.7.0",
+        "react-virtualized": "^9.22.5",
         "react-virtualized-auto-sizer": "1.0.2",
-        "react-window": "^1.8.6",
         "reactstrap": "9.0.1",
         "recharts": "^2.1.14",
         "redux-persist": "^6.0.0",
@@ -15162,6 +15162,23 @@
         "react-is": "^16.8.1"
       }
     },
+    "node_modules/react-virtualized": {
+      "version": "9.22.5",
+      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.5.tgz",
+      "integrity": "sha512-YqQMRzlVANBv1L/7r63OHa2b0ZsAaDp1UhVNEdUaXI8A5u6hTpA5NYtUueLH2rFuY/27mTGIBl7ZhqFKzw18YQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "clsx": "^1.0.4",
+        "dom-helpers": "^5.1.3",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-virtualized-auto-sizer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz",
@@ -15174,20 +15191,28 @@
         "react-dom": "^15.3.0 || ^16.0.0-alpha"
       }
     },
-    "node_modules/react-window": {
-      "version": "1.8.6",
-      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.6.tgz",
-      "integrity": "sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==",
+    "node_modules/react-virtualized/node_modules/csstype": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+    },
+    "node_modules/react-virtualized/node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
       "dependencies": {
-        "@babel/runtime": "^7.0.0",
-        "memoize-one": ">=3.1.1 <6"
-      },
-      "engines": {
-        "node": ">8.0.0"
-      },
-      "peerDependencies": {
-        "react": "^15.0.0 || ^16.0.0 || ^17.0.0",
-        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0"
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/react-virtualized/node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
       }
     },
     "node_modules/reactstrap": {
@@ -30825,20 +30850,50 @@
         }
       }
     },
+    "react-virtualized": {
+      "version": "9.22.5",
+      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.5.tgz",
+      "integrity": "sha512-YqQMRzlVANBv1L/7r63OHa2b0ZsAaDp1UhVNEdUaXI8A5u6hTpA5NYtUueLH2rFuY/27mTGIBl7ZhqFKzw18YQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.2",
+        "clsx": "^1.0.4",
+        "dom-helpers": "^5.1.3",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "dependencies": {
+        "csstype": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+          "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
+        },
+        "dom-helpers": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+          "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+          "requires": {
+            "@babel/runtime": "^7.8.7",
+            "csstype": "^3.0.2"
+          }
+        },
+        "prop-types": {
+          "version": "15.8.1",
+          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+          "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+          "requires": {
+            "loose-envify": "^1.4.0",
+            "object-assign": "^4.1.1",
+            "react-is": "^16.13.1"
+          }
+        }
+      }
+    },
     "react-virtualized-auto-sizer": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz",
       "integrity": "sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg=="
     },
-    "react-window": {
-      "version": "1.8.6",
-      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.6.tgz",
-      "integrity": "sha512-8VwEEYyjz6DCnGBsd+MgkD0KJ2/OXFULyDtorIiTz+QzwoP94tBoA7CnbtyXMm+cCeAUER5KJcPtWl9cpKbOBg==",
-      "requires": {
-        "@babel/runtime": "^7.0.0",
-        "memoize-one": ">=3.1.1 <6"
-      }
-    },
     "reactstrap": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.0.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 7efb2be263d8..07afe2c29b9e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -109,8 +109,8 @@
     "react-select": "2.4.3",
     "react-sortable-hoc": "1.9.1",
     "react-tooltip": "3.7.0",
+    "react-virtualized": "^9.22.5",
     "react-virtualized-auto-sizer": "1.0.2",
-    "react-window": "^1.8.6",
     "reactstrap": "9.0.1",
     "recharts": "^2.1.14",
     "redux-persist": "^6.0.0",
diff --git a/frontend/web/components/PanelSearch.js b/frontend/web/components/PanelSearch.js
index f73e3e423ff4..b5c1d700c460 100644
--- a/frontend/web/components/PanelSearch.js
+++ b/frontend/web/components/PanelSearch.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { FixedSizeList as List } from 'react-window'
+import { AutoSizer, List } from 'react-virtualized'
 import Popover from './base/Popover'
 import Input from './base/forms/Input'
 import Icon from './Icon'
@@ -91,20 +91,29 @@ const PanelSearch = class extends Component {
   }
 
   renderContainer = (children) => {
-    const renderRow = ({ index, style }) => (
-      <div style={style}>{this.props.renderRow(children[index])}</div>
-    )
+    const renderRow = ({ index, key, style }) => {
+      return (
+        <div key={key} style={style}>
+          {this.props.renderRow(children[index])}
+        </div>
+      )
+    }
     if (children && children.length > 100 && this.props.itemHeight) {
       return (
-        <List
-          style={{ overflowX: 'hidden' }}
-          height={this.props.itemHeight * 10}
-          itemCount={children.length}
-          itemSize={this.props.itemHeight}
-          width='100%'
-        >
-          {renderRow}
-        </List>
+        <div>
+          <AutoSizer disableHeight>
+            {({ width }) => (
+              <List
+                style={{ overflowX: 'hidden' }}
+                width={width}
+                height={this.props.itemHeight * 10}
+                rowCount={children.length}
+                rowHeight={this.props.itemHeight}
+                rowRenderer={renderRow}
+              />
+            )}
+          </AutoSizer>
+        </div>
       )
     }
     return children.map(this.props.renderRow)