Allow user to filter and select modules; display reasons why module was included

Author: dgieselaar

client/components/ModuleButton.css

@@ -0,0 +1,38 @@
+.button {
+  display: block;
+  background: none;
+  border: none;
+  font-family: inherit;
+  font-size: inherit;
+  max-width: 100%;
+  float: right;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: initial;
+  line-height: 1.25em;
+  cursor: pointer;
+}
+
+.button:after {
+  content: ".";
+  display: block;
+  float: left;
+  width: 4em;
+  margin: -1em -2em;
+  color: #fff;
+  background: #fff;
+  background: linear-gradient(to right, rgba(255,255,255,1) 50%,rgba(255,255,255,0) 100%);
+}
+
+.content {
+  float: right;
+  min-width: 100%;
+  margin-top: 0;
+  margin-left: -1px;
+}
+
+
+
+.button:hover {
+  text-decoration: underline;
+}

client/components/ModuleButton.jsx

@@ -0,0 +1,16 @@
+/** @jsx h */
+import { h } from 'preact';
+import s from './ModuleButton.css';
+
+const ModuleButton = ( { module, onClick } ) => (
+  <button className={s.button} type="button" onClick={onClick}>
+    <div className={s.content}>
+      {module.path.replace('./node_modules/', '~')
+        .replace(/\/index\.(js|jsx)$/, '')
+      }
+      {module.reasons.length > 0 && ` (${module.reasons.length})`}
+    </div>
+  </button>
+);
+
+export default ModuleButton;

client/components/ModuleInfo.css

@@ -0,0 +1,17 @@
+.wrapper {
+  font-size: 11px;
+  font-family: Verdana;
+}
+
+.path {
+  overflow-wrap: break-word;
+}
+
+.reasons {
+  margin-top: 10px;
+  font-weight: bold;
+}
+
+.list {
+  margin-top: 10px;
+}

client/components/ModuleInfo.jsx

@@ -0,0 +1,43 @@
+/** @jsx h */
+/* eslint-disable react/no-multi-comp */
+import { h } from 'preact';
+import cls from 'classnames';
+import ModuleList from './ModuleList';
+import s from './ModuleInfo.css';
+import filesize from 'filesize';
+
+import { SIZE_SWITCH_ITEMS } from '../constants';
+
+const ModuleSize = ({ module, sizeType } ) => {
+  const sizeProp = `${sizeType}Size`;
+  const size = module[sizeProp];
+  const sizeLabel = SIZE_SWITCH_ITEMS.find(item => item.prop === sizeProp).label;
+
+  return (typeof size === 'number') ?
+    <div>
+      {sizeLabel} size: <strong>{filesize(size)}</strong>
+    </div>
+    :
+    null;
+};
+
+const ModuleInfo = ({ module, className, onModuleClick } ) => (
+  <div className={cls(className, s.wrapper)}>
+    <div><strong>{module.label}</strong></div>
+    <br/>
+    <ModuleSize module={module} sizeType="stat"/>
+    <ModuleSize module={module} sizeType="parsed"/>
+    <ModuleSize module={module} sizeType="gzip"/>
+    {module.path &&
+      <span className={s.path}>Path: <strong>{module.path}</strong></span>
+    }
+    {module.reasons &&
+      [
+        <div key="reasons-header" className={s.reasons}>Reasons:</div>,
+        <ModuleList key="reasons-list" className={s.list} modules={module.reasons} onModuleClick={onModuleClick}/>
+      ]
+    }
+  </div>
+);
+
+export default ModuleInfo;

client/components/ModuleList.css

@@ -0,0 +1,10 @@
+.list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.listItem {
+  display: flex;
+  padding: 0;
+}

client/components/ModuleList.jsx

@@ -0,0 +1,19 @@
+/** @jsx h */
+import { h } from 'preact';
+import cls from 'classnames';
+import ModuleButton from './ModuleButton';
+import s from './ModuleList.css';
+
+const ModuleList = ( { modules, onModuleClick, className } ) => (
+  <ul className={cls(s.list, className)}>
+    {modules.map(module => (
+      <li key={module.id} className={s.listItem}>
+        {
+          // eslint-disable-next-line react/jsx-no-bind
+        }<ModuleButton module={module} onClick={onModuleClick.bind(null, module)}/>
+      </li>
+    ))}
+  </ul>
+);
+
+export default ModuleList;

client/components/ModuleSearch.css

@@ -0,0 +1,13 @@
+.wrapper {
+  font-family: Verdana;
+  font-size: 11px;
+}
+
+.input {
+  padding: 2px;
+  width: 100%;
+}
+
+.list {
+  padding: 10px 0;
+}

client/components/ModuleSearch.jsx

@@ -0,0 +1,42 @@
+/** @jsx h */
+import { h, Component } from 'preact';
+import ModuleList from './ModuleList';
+import s from './ModuleSearch.css';
+
+export default class ModuleSearch extends Component {
+
+  constructor( props ) {
+    super(props);
+  }
+
+  componentDidMount( ) {
+    this.input.focus();
+  }
+
+  render( ) {
+
+    const { query } = this.props;
+    let modules = [];
+
+    if (query) {
+      modules = this.props.modules.filter(module => (
+        module.path.indexOf(query) !== -1
+      ));
+    }
+
+    return (
+      <div className={s.wrapper}>
+        <input ref={this.onRef}
+          value={query}
+          className={s.input}
+          onInput={this.props.onChange}/>
+        <ModuleList className={s.list} modules={modules} onModuleClick={this.props.onModuleClick}/>
+      </div>
+    );
+  }
+
+  onRef = ref => {
+    this.input = ref;
+  }
+
+}

client/components/ModulesTreemap.css

@@ -1,13 +1,25 @@
 .container, .map {
-  position: relative;
+  position: absolute;
+  top: 0;
   width: 100%;
   height: 100%;
 }
 
 .sidebarGroup {
   margin-bottom: 20px;
+  clear: both;
 }
 
 .activeSize {
   font-weight: bold;
 }
+
+.moduleInfo {
+  padding-bottom: 10px;
+  border-bottom: 1px solid lightgrey;
+  margin-bottom: 10px;
+}
+
+.backButton {
+  margin-bottom: 10px;
+}