Add: Ability to search by chunk name.

client/components/ModulesTreemap.css

@@ -53,3 +53,12 @@
 .foundModulesList {
   margin-left: 7px;
 }
+
+.searchMode {
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  display: block;
+  flex: 1;
+  padding: 5px;
+}
+

client/components/ModulesTreemap.jsx

@@ -17,6 +17,7 @@ import s from './ModulesTreemap.css';
 import Search from './Search';
 import {store} from '../store';
 import ModulesList from './ModulesList';
+import SEARCH_MODE from '../searchMode';
 
 const SIZE_SWITCH_ITEMS = [
   {label: 'Stat', prop: 'statSize'},
@@ -79,7 +80,18 @@ export default class ModulesTreemap extends Component {
             }
           </div>
           <div className={s.sidebarGroup}>
-            <Search label="Search modules"
+            <select onChange={this.handleSearchModeChange} className={s.searchMode}>
+              <option value={SEARCH_MODE.MODULES}>
+                Modules
+              </option>
+              <option value={SEARCH_MODE.CHUNKS}>
+                Chunks
+              </option>
+            </select>
+          </div>
+          <div className={s.sidebarGroup}>
+            <Search label="Search"
+              mode={store.searchMode}
               query={store.searchQuery}
               autofocus
               onQueryChange={this.handleQueryChange}/>
@@ -254,6 +266,10 @@ export default class ModulesTreemap extends Component {
     store.searchQuery = query;
   }
 
+  handleSearchModeChange = e => {
+    store.searchMode = e.target.value;
+  }
+
   handleSelectedChunksChange = selectedChunks => {
     store.selectedChunks = selectedChunks;
   };

client/components/Search.jsx

@@ -17,12 +17,12 @@ export default class Search extends PureComponent {
   }
 
   render() {
-    const {label, query} = this.props;
+    const {label, query, mode} = this.props;
 
     return (
       <div className={s.container}>
         <div className={s.label}>
-          {label}:
+          {label + ' ' + mode}:
         </div>
         <div className={s.row}>
           <input ref={this.saveInputNode}

client/searchMode.js

@@ -0,0 +1,4 @@
+export default {
+  MODULES: 'modules',
+  CHUNKS: 'chunks'
+};

client/store.js

@@ -1,6 +1,7 @@
 import {observable, computed} from 'mobx';
 import {isChunkParsed, walkModules} from './utils';
 import localStorage from './localStorage';
+import SEARCH_MODE from './searchMode';
 
 export class Store {
   cid = 0;
@@ -9,6 +10,7 @@ export class Store {
   @observable.ref allChunks;
   @observable.shallow selectedChunks;
   @observable searchQuery = '';
+  @observable searchMode = SEARCH_MODE.MODULES;
   @observable defaultSize;
   @observable selectedSize;
   @observable showConcatenatedModulesContent = (localStorage.getItem('showConcatenatedModulesContent') === true);
@@ -83,46 +85,58 @@ export class Store {
       .map(chunk => {
         let foundGroups = [];
 
-        walkModules(chunk.groups, module => {
-          let weight = 0;
-
-          /**
-           * Splitting found modules/directories into groups:
-           *
-           * 1) Module with matched label (weight = 4)
-           * 2) Directory with matched label (weight = 3)
-           * 3) Module with matched path (weight = 2)
-           * 4) Directory with matched path (weight = 1)
-           */
-          if (query.test(module.label)) {
-            weight += 3;
-          } else if (module.path && query.test(module.path)) {
-            weight++;
-          }
-
-          if (!weight) return;
-
-          if (!module.groups) {
-            weight += 1;
+        if (this.searchMode === SEARCH_MODE.MODULES) {
+          walkModules(chunk.groups, module => {
+            let weight = 0;
+
+            /**
+             * Splitting found modules/directories into groups:
+             *
+             * 1) Module with matched label (weight = 4)
+             * 2) Directory with matched label (weight = 3)
+             * 3) Module with matched path (weight = 2)
+             * 4) Directory with matched path (weight = 1)
+             */
+            if (query.test(module.label)) {
+              weight += 3;
+            } else if (module.path && query.test(module.path)) {
+              weight++;
+            }
+
+            if (!weight) return;
+
+            if (!module.groups) {
+              weight += 1;
+            }
+
+            const foundModules = foundGroups[weight - 1] = foundGroups[weight - 1] || [];
+            foundModules.push(module);
+          });
+
+          const {activeSize} = this;
+
+          // Filtering out missing groups
+          foundGroups = foundGroups.filter(Boolean).reverse();
+          // Sorting each group by active size
+          foundGroups.forEach(modules =>
+            modules.sort((m1, m2) => m2[activeSize] - m1[activeSize])
+          );
+
+          return {
+            chunk,
+            modules: [].concat(...foundGroups)
+          };
+        } else {
+          let modules = [];
+          if (query.test(chunk.label)) {
+            modules = chunk.groups;
           }
 
-          const foundModules = foundGroups[weight - 1] = foundGroups[weight - 1] || [];
-          foundModules.push(module);
-        });
-
-        const {activeSize} = this;
-
-        // Filtering out missing groups
-        foundGroups = foundGroups.filter(Boolean).reverse();
-        // Sorting each group by active size
-        foundGroups.forEach(modules =>
-          modules.sort((m1, m2) => m2[activeSize] - m1[activeSize])
-        );
-
-        return {
-          chunk,
-          modules: [].concat(...foundGroups)
-        };
+          return {
+            chunk,
+            modules
+          };
+        }
       })
       .filter(result => result.modules.length > 0)
       .sort((c1, c2) => c1.modules.length - c2.modules.length);

gulpfile.js

@@ -2,8 +2,9 @@
 
 const gulp = require('gulp');
 
-const NODE_SRC = './src/**/*.js';
+const NODE_SRC = ['./src/**/*.js'];
 const NODE_DEST = './lib';
+const VIEWER_SRC = ['./client/**/*'];
 
 const cli = require('commander')
   .usage('<task> [options]')
@@ -32,7 +33,7 @@ class TaskError extends Error {
 
 function watch() {
   gulp
-    .watch(NODE_SRC, gulp.series(cleanNodeScripts, compileNodeScripts))
+    .watch(NODE_SRC.concat(VIEWER_SRC), gulp.series(cleanNodeScripts, compileNodeScripts, compileViewerScripts))
     // TODO: replace with `emitErrors: false` option after https://github.com/gulpjs/glob-watcher/pull/34 will be merged
     .on('error', () => {});
 }