fix(graph): focus via --focus command should work (#30576)

Author: nartc

graph/client/src/app/feature-projects/project-list.tsx

@@ -5,6 +5,7 @@ import {
   EyeIcon,
   FlagIcon,
   MapPinIcon,
+  ViewfinderCircleIcon,
 } from '@heroicons/react/24/outline';
 /* eslint-disable @nx/enforce-module-boundaries */
 // nx-ignore-next-line
@@ -113,7 +114,7 @@ function ProjectListItem({
             true
           )}
         >
-          <DocumentMagnifyingGlassIcon className="h-5 w-5" />
+          <ViewfinderCircleIcon className="h-5 w-5" />
         </Link>
 
         <ExperimentalFeature>

graph/client/src/app/feature-projects/projects-sidebar.tsx

@@ -325,7 +325,7 @@ export function ProjectsSidebar(): JSX.Element {
         type: 'enableCompositeGraph',
         context: compositeParam === 'true' ? null : compositeParam,
       });
-    } else if (!searchParams.has('composite')) {
+    } else if (!searchParams.has('composite') && compositeEnabled) {
       projectGraphService.send({ type: 'disableCompositeGraph' });
       navigate(routeConstructor('/projects', true));
     }

graph/client/src/app/shell.tsx

@@ -24,15 +24,14 @@ import { Tooltip } from '@nx/graph/legacy/tooltips';
 
 import { getSystemTheme, Theme, ThemePanel } from '@nx/graph-internal/ui-theme';
 import classNames from 'classnames';
-import { useEffect, useLayoutEffect, useState } from 'react';
+import { useLayoutEffect, useState } from 'react';
 import {
   Outlet,
   useNavigate,
   useNavigation,
   useParams,
   useRouteLoaderData,
 } from 'react-router-dom';
-import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import { RankdirPanel } from './feature-projects/panels/rankdir-panel';
 import { useCurrentPath } from './hooks/use-current-path';
 import { getProjectGraphService } from './machines/get-services';
@@ -50,7 +49,7 @@ export function Shell(): JSX.Element {
     graphService.lastPerformanceReport
   );
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     graphService.listen(() => {
       setLastPerfReport(graphService.lastPerformanceReport);
     });

package.json

@@ -339,7 +339,7 @@
     "@markdoc/markdoc": "0.2.2",
     "@monaco-editor/react": "^4.4.6",
     "@napi-rs/canvas": "^0.1.52",
-    "@nx/graph": "0.4.1",
+    "@nx/graph": "0.4.2",
     "@react-spring/three": "^9.7.3",
     "@react-three/drei": "^9.108.3",
     "@react-three/fiber": "^8.16.8",