feat(core): add text filtering to dep-graph visualization

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;
+}

packages/workspace/src/core/dep-graph/dep-graph.html

@@ -45,6 +45,21 @@
             group by folder
           </label>
         </div>
+        <div class="sidebar-section">
+          <div class="flex">
+            <input id="textFilterInput" type="text" name="filter" />
+            <button id="textFilterButton">Filter</button>
+          </div>
+
+          <label>
+            <input
+              type="checkbox"
+              name="textFilterCheckbox"
+              value="includeInPath"
+            />
+            include projects in path
+          </label>
+        </div>
         <div id="project-lists"></div>
       </div>
     </div>
@@ -136,7 +151,7 @@
     window.graph = null;
     window.affected = null;
     window.focusedProject = null;
-    window.filteredProjects = null;
+    window.filteredProjects = [];
     window.groupByFolder = null;
     window.exclude = null;
   </script>

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();
 });