feat(dep-graph): default proximity search to enabled (#9917)

dep-graph/client-e2e/src/integration/app.spec.ts

@@ -6,6 +6,7 @@ import {
   getIncludeProjectsInPathButton,
   getProjectItems,
   getSearchDepthCheckbox,
+  getSearchDepthIncrementButton,
   getSelectAffectedButton,
   getSelectAllButton,
   getSelectProjectsMessage,
@@ -147,7 +148,7 @@ describe('dep-graph-client', () => {
       cy.contains('nx-dev').scrollIntoView().should('be.visible');
       cy.get('[data-project="nx-dev"]').prev('button').click({ force: true });
 
-      getCheckedProjectItems().should('have.length', 15);
+      getCheckedProjectItems().should('have.length', 11);
     });
   });
 
@@ -171,7 +172,7 @@ describe('dep-graph-client', () => {
       getTextFilterInput().type('nx-dev');
       getIncludeProjectsInPathButton().click();
 
-      getCheckedProjectItems().should('have.length', 24);
+      getCheckedProjectItems().should('have.length', 17);
     });
   });
 
@@ -206,10 +207,18 @@ describe('dep-graph-client', () => {
       cy.url().should('contain', 'groupByFolder=true');
     });
 
-    it('should set search depth', () => {
+    it('should set search depth disabled', () => {
+      // it's on by default, clicking should disable it
       getSearchDepthCheckbox().click();
 
-      cy.url().should('contain', 'searchDepth=1');
+      cy.url().should('contain', 'searchDepth=0');
+    });
+
+    it('should set search depth if greater than 1', () => {
+      // it's on by default and set to 1, clicking should change it to 2
+      getSearchDepthIncrementButton().click();
+
+      cy.url().should('contain', 'searchDepth=2');
     });
 
     it('should set select to all', () => {
@@ -229,18 +238,30 @@ describe('loading dep-graph client with url params', () => {
     // wait for first graph to finish loading
     cy.wait('@getGraph');
 
-    getCheckedProjectItems().should('have.length', 15);
+    getCheckedProjectItems().should('have.length', 11);
   });
 
   it('should focus projects with search depth', () => {
     cy.intercept('/assets/graphs/*').as('getGraph');
 
-    cy.visit('/?focus=nx-dev&searchDepth=1');
+    cy.visit('/?focus=nx-dev&searchDepth=2');
 
     // wait for first graph to finish loading
     cy.wait('@getGraph');
 
-    getCheckedProjectItems().should('have.length', 11);
+    getCheckedProjectItems().should('have.length', 15);
+    getSearchDepthCheckbox().should('exist');
+  });
+
+  it('should focus projects with search depth disabled', () => {
+    cy.intercept('/assets/graphs/*').as('getGraph');
+
+    cy.visit('/?focus=nx-dev&searchDepth=0');
+
+    // wait for first graph to finish loading
+    cy.wait('@getGraph');
+
+    getCheckedProjectItems().should('have.length', 15);
     getSearchDepthCheckbox().should('exist');
   });
 

dep-graph/client-e2e/src/support/app.po.ts

@@ -19,6 +19,11 @@ export const getSearchDepthCheckbox = () =>
 export const getTextFilterInput = () => cy.get('[data-cy=textFilterInput]');
 export const getTextFilterReset = () => cy.get('[data-cy=textFilterReset]');
 
+export const getSearchDepthDecrementButton = () =>
+  cy.get('[data-cy=decrement-depth-filter]');
+export const getSearchDepthIncrementButton = () =>
+  cy.get('[data-cy=increment-depth-filter]');
+
 export const getIncludeProjectsInPathButton = () =>
   cy.get('input[name=textFilterCheckbox]');
 

dep-graph/client-e2e/src/watch-mode-integration/watch-mode.spec.ts

@@ -20,18 +20,20 @@ describe('dep-graph-client in watch mode', () => {
     checkSelectedProjects(5, excludedValues);
   });
 
-  it('should retain selected projects new libs as they are created', () => {
+  // TODO: This test is getting flaky but was fixed by increasing the tick time between checks
+  // Figure out a better way to test this
+  it('should retain selected projects as new libs are created', () => {
     cy.contains('existing-app-1').siblings('button').click();
     cy.contains('existing-lib-1').siblings('button').click();
 
-    cy.tick(5000);
+    cy.tick(6000);
 
     checkSelectedProjects(3, []);
 
-    cy.tick(5000);
+    cy.tick(6000);
     checkSelectedProjects(4, []);
 
-    cy.tick(5000);
+    cy.tick(6000);
     checkSelectedProjects(5, []);
   });
 

dep-graph/client/src/app/machines/dep-graph.machine.ts

@@ -22,7 +22,7 @@ export const initialContext: DepGraphContext = {
   textFilter: '',
   includePath: false,
   searchDepth: 1,
-  searchDepthEnabled: false,
+  searchDepthEnabled: true,
   groupByFolder: false,
   collapseEdges: false,
   workspaceLayout: {

dep-graph/client/src/app/machines/dep-graph.spec.ts

@@ -270,7 +270,10 @@ describe('dep-graph machine', () => {
         affectedProjects: [],
         workspaceLayout: { appsDir: 'apps', libsDir: 'libs' },
       });
-
+      service.send({
+        type: 'setSearchDepthEnabled',
+        searchDepthEnabled: false,
+      });
       service.send({ type: 'focusProject', projectName: 'app1' });
     });
 

dep-graph/client/src/app/machines/route-listener.actor.ts

@@ -25,10 +25,19 @@ function parseSearchParamsToEvents(searchParams: string): DepGraphUIEvents[] {
         events.push({ type: 'setCollapseEdges', collapseEdges: true });
         break;
       case 'searchDepth':
-        events.push({
-          type: 'setSearchDepth',
-          searchDepth: parseInt(value),
-        });
+        const parsedValue = parseInt(value, 10);
+
+        if (parsedValue === 0) {
+          events.push({
+            type: 'setSearchDepthEnabled',
+            searchDepthEnabled: false,
+          });
+        } else if (parsedValue > 1) {
+          events.push({
+            type: 'setSearchDepth',
+            searchDepth: parseInt(value),
+          });
+        }
         break;
       case 'traceStart':
         events.push({

dep-graph/client/src/app/machines/route-setter.machine.ts

@@ -118,9 +118,13 @@ export const createRouteMachine = () => {
         },
         notifyRouteSearchDepth: {
           actions: assign((ctx, event) => {
-            ctx.params.searchDepth = event.searchDepthEnabled
-              ? event.searchDepth.toString()
-              : null;
+            if (event.searchDepthEnabled === false) {
+              ctx.params.searchDepth = '0';
+            } else if (event.searchDepthEnabled && event.searchDepth !== 1) {
+              ctx.params.searchDepth = event.searchDepth.toString();
+            } else {
+              ctx.params.searchDepth = null;
+            }
           }),
         },
         notifyRouteTracing: {

dep-graph/client/src/app/sidebar/search-depth.tsx

@@ -47,6 +47,7 @@ export const SearchDepth = memo(
         <div className="mt-3 px-10">
           <div className="flex rounded-md shadow-sm">
             <button
+              data-cy="decrement-depth-filter"
               title="Remove ancestor level"
               className="inline-flex items-center rounded-l-md border border-slate-300 bg-slate-50 py-2 px-4 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
               onClick={decrementDepthFilter}
@@ -73,6 +74,7 @@ export const SearchDepth = memo(
               {searchDepth}
             </span>
             <button
+              data-cy="increment-depth-filter"
               title="Add ancestor level"
               className="inline-flex items-center rounded-r-md border border-slate-300 bg-slate-50 py-2 px-4 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
               onClick={incrementDepthFilter}