Allow filtering the list of entrypoints (#624)

* filter entrypoints

* changelog

CHANGELOG.md

@@ -12,6 +12,9 @@ _Note: Gaps between patch versions are faulty, broken or test releases._
 
 ## UNRELEASED
 
+* **Improvement**
+   * Allows filtering the list of entrypoints ([#624](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/624) by [@chriskrogh](https://github.com/chriskrogh))
+
 * **Internal**
   * Make module much slimmer by replacing all `lodash.*` packages ([#612](https://github.com/webpack-contrib/webpack-bundle-analyzer/pull/612)) by [@sukkaw](https://github.com/sukkaw).
 

client/components/Dropdown.css

@@ -3,7 +3,13 @@
   white-space: nowrap;
 }
 
-.select {
+.label {
+  font-size: 11px;
+  font-weight: bold;
+  margin-bottom: 7px;
+}
+
+.input {
   border: 1px solid #aaa;
   border-radius: 4px;
   display: block;
@@ -12,8 +18,7 @@
   height: 27px;
 }
 
-.label {
-  font-size: 11px;
-  font-weight: bold;
-  margin-bottom: 7px;
+.option {
+  padding: 4px 0;
+  cursor: pointer;
 }

client/components/Dropdown.jsx

@@ -1,25 +1,88 @@
+import {createRef} from 'preact';
 import PureComponent from '../lib/PureComponent';
 
 import s from './Dropdown.css';
+
 export default class Dropdown extends PureComponent {
+  input = createRef();
+
+  state = {
+    query: '',
+    showOptions: false
+  };
+
+  componentDidMount() {
+    document.addEventListener('click', this.handleClickOutside, true);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleClickOutside, true);
+  }
 
   render() {
-    const {label, defaultOption, onSelectionChange, options} = this.props;
+    const {label, options} = this.props;
+
+    const filteredOptions =
+      this.state.query
+        ? options.filter((option) =>
+          option.toLowerCase().includes(this.state.query.toLowerCase())
+        )
+        : options;
 
     return (
       <div className={s.container}>
-        <div className={s.label}>
-          {label}:
-        </div>
+        <div className={s.label}>{label}:</div>
         <div>
-          <select className={s.select} id={label} name={label} onChange={onSelectionChange}>
-            <option value={defaultOption}>{defaultOption}</option>
-            {options.map(option =>
-              <option key={option} value={option}>{option}</option>
-            )}
-          </select>
+          <input ref={this.input}
+            className={s.input}
+            type="text"
+            value={this.state.query}
+            onInput={this.handleInput}
+            onFocus={this.handleFocus}/>
+          {this.state.showOptions ? (
+            <div className={s.options}>
+              {filteredOptions.map((option) => (
+                <div key={option}
+                  className={s.option}
+                  onClick={this.getOptionClickHandler(option)}>
+                  {option}
+                </div>
+              ))}
+            </div>
+          ) : null}
         </div>
       </div>
     );
   }
+
+  handleClickOutside = (event) => {
+    const el = this.input.current;
+    if (el && event && !el.contains(event.target)) {
+      this.setState({showOptions: false});
+      // If the query is not in the options, reset the selection
+      if (this.state.query && !this.props.options.some((option) => option === this.state.query)) {
+        this.setState({query: ''});
+        this.props.onSelectionChange(undefined);
+      }
+    }
+  };
+
+  handleInput = (event) => {
+    const {value} = event.target;
+    this.setState({query: value});
+    if (!value) {
+      this.props.onSelectionChange(undefined);
+    }
+  }
+
+  handleFocus = () => {
+    // move the cursor to the end of the input
+    this.input.current.value = this.state.query;
+    this.setState({showOptions: true});
+  }
+
+  getOptionClickHandler = (option) => () => {
+    this.props.onSelectionChange(option);
+    this.setState({query: option, showOptions: false});
+  };
 }

client/components/ModulesTreemap.jsx

@@ -25,8 +25,6 @@ const SIZE_SWITCH_ITEMS = [
   {label: 'Gzipped', prop: 'gzipSize'}
 ];
 
-const DEFAULT_DROPDOWN_SELECTION = 'Select an entrypoint';
-
 @observer
 export default class ModulesTreemap extends Component {
   mouseCoords = {
@@ -83,7 +81,6 @@ export default class ModulesTreemap extends Component {
           </div>
           <div className={s.sidebarGroup}>
             <Dropdown label="Filter to initial chunks"
-              defaultOption={DEFAULT_DROPDOWN_SELECTION}
               options={store.entrypoints}
               onSelectionChange={this.handleSelectionChange}/>
           </div>
@@ -215,10 +212,8 @@ export default class ModulesTreemap extends Component {
     }
   }
 
-  handleSelectionChange = (event) => {
-    const selected = event.target.value;
-
-    if (selected === DEFAULT_DROPDOWN_SELECTION) {
+  handleSelectionChange = (selected) => {
+    if (!selected) {
       store.selectedChunks = store.allChunks;
       return;
     }