diff --git a/packages/workspace/src/core/dep-graph/dep-graph.css b/packages/workspace/src/core/dep-graph/dep-graph.css index a1d9c54476..8f1e1a1e7b 100644 --- a/packages/workspace/src/core/dep-graph/dep-graph.css +++ b/packages/workspace/src/core/dep-graph/dep-graph.css @@ -253,3 +253,12 @@ g.affected ellipse { align-items: center; justify-content: center; } + +#textFilterInput { + flex: 1; + margin-right: 1.5em; +} + +#textFilterButton { + flex: none; +} diff --git a/packages/workspace/src/core/dep-graph/dep-graph.html b/packages/workspace/src/core/dep-graph/dep-graph.html index f01f0f9540..e6b76a9688 100644 --- a/packages/workspace/src/core/dep-graph/dep-graph.html +++ b/packages/workspace/src/core/dep-graph/dep-graph.html @@ -45,6 +45,21 @@ group by folder +
@@ -136,7 +151,7 @@ window.graph = null; window.affected = null; window.focusedProject = null; - window.filteredProjects = null; + window.filteredProjects = []; window.groupByFolder = null; window.exclude = null; diff --git a/packages/workspace/src/core/dep-graph/dep-graph.js b/packages/workspace/src/core/dep-graph/dep-graph.js index 9c1832222f..46b4fc534f 100644 --- a/packages/workspace/src/core/dep-graph/dep-graph.js +++ b/packages/workspace/src/core/dep-graph/dep-graph.js @@ -496,6 +496,56 @@ window.filterProjects = () => { render(); }; +function listenForTextFilterChanges() { + const textFilterInput = document.getElementById('textFilterInput'); + const textFilterButton = document.getElementById('textFilterButton'); + + textFilterButton.addEventListener('click', () => { + filterProjectsByText(textFilterInput.value.toLowerCase()); + }); + + textFilterInput.addEventListener('keyup', (event) => { + if (event.key === 'Enter') { + filterProjectsByText(textFilterInput.value.toLowerCase()); + } + }); +} + +function filterProjectsByText(text) { + const checkboxes = Array.from( + document.querySelectorAll('input[name=projectName]') + ); + + checkboxes.forEach((checkbox) => (checkbox.checked = false)); + + const split = text.split(',').map((splitItem) => splitItem.trim()); + + const matchedProjects = checkboxes + .map((checkbox) => checkbox.value) + .filter( + (project) => + split.findIndex((splitItem) => project.includes(splitItem)) > -1 + ); + + const includeInPath = document.querySelector('input[name=textFilterCheckbox]') + .checked; + + matchedProjects.forEach((project) => { + checkboxes.forEach((checkbox) => { + if ( + checkbox.value === project || + (includeInPath && + (hasPath(project, checkbox.value, []) || + hasPath(checkbox.value, project, []))) + ) { + checkbox.checked = true; + } + }); + }); + + window.filterProjects(); +} + setTimeout(() => { addProjectCheckboxes(); checkForAffected(); @@ -520,5 +570,7 @@ setTimeout(() => { window.exclude.forEach((project) => excludeProject(project, false)); } + listenForTextFilterChanges(); + filterProjects(); });