fix: UI issue when there were more than 100 features (#2711)

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",

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)