From f2d8cbd5603c4a6f40593a16b9b86aa1915316b5 Mon Sep 17 00:00:00 2001 From: Ahmed El Moden Date: Fri, 16 Jul 2021 11:47:14 +0200 Subject: [PATCH 1/4] Add: Ability to search by chunk name. --- client/components/ModulesTreemap.jsx | 22 ++++++- client/components/Search.jsx | 4 +- client/searchMode.js | 4 ++ client/store.js | 90 ++++++++++++++++------------ 4 files changed, 77 insertions(+), 43 deletions(-) create mode 100644 client/searchMode.js diff --git a/client/components/ModulesTreemap.jsx b/client/components/ModulesTreemap.jsx index 1afe3a9b..50b59474 100644 --- a/client/components/ModulesTreemap.jsx +++ b/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'}, @@ -37,7 +38,7 @@ export default class ModulesTreemap extends Component { sidebarPinned: false, showChunkContextMenu: false, showTooltip: false, - tooltipContent: null + tooltipContent: null, }; componentDidMount() { @@ -55,7 +56,7 @@ export default class ModulesTreemap extends Component { sidebarPinned, showChunkContextMenu, showTooltip, - tooltipContent + tooltipContent, } = this.state; return ( @@ -79,7 +80,18 @@ export default class ModulesTreemap extends Component { }
- + + + +
+
+ @@ -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; }; diff --git a/client/components/Search.jsx b/client/components/Search.jsx index 1e5a8772..eaea989e 100644 --- a/client/components/Search.jsx +++ b/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 (
- {label}: + {label + ' ' + mode}:
{ 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); From 6c5f7086fce9b1f32a889fa6fd4057a213e1101c Mon Sep 17 00:00:00 2001 From: Ahmed El Moden Date: Fri, 16 Jul 2021 15:01:11 +0200 Subject: [PATCH 2/4] Fix: linting issue. --- client/components/ModulesTreemap.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/components/ModulesTreemap.jsx b/client/components/ModulesTreemap.jsx index 50b59474..733b7603 100644 --- a/client/components/ModulesTreemap.jsx +++ b/client/components/ModulesTreemap.jsx @@ -38,7 +38,7 @@ export default class ModulesTreemap extends Component { sidebarPinned: false, showChunkContextMenu: false, showTooltip: false, - tooltipContent: null, + tooltipContent: null }; componentDidMount() { @@ -56,7 +56,7 @@ export default class ModulesTreemap extends Component { sidebarPinned, showChunkContextMenu, showTooltip, - tooltipContent, + tooltipContent } = this.state; return ( From 1e2e5033f8ef2539d0bd70c2abb56d589853b561 Mon Sep 17 00:00:00 2001 From: Ahmed El Moden Date: Fri, 16 Jul 2021 15:22:05 +0200 Subject: [PATCH 3/4] Add: Style to the +