feat(graph): remove select target group state

graph/client/src/app/external-api-impl.ts

@@ -94,7 +94,7 @@ export class ExternalApiImpl extends ExternalApi {
     const currentLocation = this.router.state.location;
 
     const searchParams = new URLSearchParams(currentLocation.search);
-    searchParams.set('targetName', targetName);
+    searchParams.set('expanded', targetName);
 
     const newUrl = `${currentLocation.pathname}?${searchParams.toString()}`;
     this.router.navigate(newUrl);

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

@@ -6,7 +6,7 @@ import {
 } from '@heroicons/react/24/outline';
 /* eslint-disable @nx/enforce-module-boundaries */
 // nx-ignore-next-line
-import type { ProjectGraphNode } from '@nx/devkit';
+import type { ProjectGraphProjectNode } from '@nx/devkit';
 /* eslint-enable @nx/enforce-module-boundaries */
 import { useProjectGraphSelector } from './hooks/use-project-graph-selector';
 import {
@@ -23,7 +23,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import { useRouteConstructor } from '@nx/graph/shared';
 
 interface SidebarProject {
-  projectGraphNode: ProjectGraphNode;
+  projectGraphNode: ProjectGraphProjectNode;
   isSelected: boolean;
 }
 
@@ -36,7 +36,7 @@ interface TracingInfo {
 }
 
 function groupProjectsByDirectory(
-  projects: ProjectGraphNode[],
+  projects: ProjectGraphProjectNode[],
   selectedProjects: string[],
   workspaceLayout: { appsDir: string; libsDir: string }
 ): DirectoryProjectRecord {

graph/client/src/app/util.ts

@@ -1,7 +1,9 @@
 /* eslint-disable @nx/enforce-module-boundaries */
 // nx-ignore-next-line
-import { ProjectGraphDependency, ProjectGraphProjectNode } from '@nx/devkit';
-import { getEnvironmentConfig } from '@nx/graph/shared';
+import type {
+  ProjectGraphDependency,
+  ProjectGraphProjectNode,
+} from '@nx/devkit';
 /* eslint-enable @nx/enforce-module-boundaries */
 
 export function parseParentDirectoriesFromFilePath(

graph/project-details/src/lib/project-details-wrapper.state.ts

@@ -3,14 +3,11 @@ import {
   RootState,
   expandTargetActions,
   getExpandedTargets,
-  getSelectedTarget,
-  selectTargetActions,
 } from '@nx/graph/state';
 
 const mapStateToProps = (state: RootState) => {
   return {
     expandTargets: getExpandedTargets(state),
-    getSelectedTarget: getSelectedTarget(state),
   };
 };
 
@@ -19,15 +16,9 @@ const mapDispatchToProps = (dispatch: AppDispatch) => {
     setExpandTargets(targets: string[]) {
       dispatch(expandTargetActions.setExpandTargets(targets));
     },
-    selectTarget(targetGroup: string) {
-      dispatch(selectTargetActions.selectTarget(targetGroup));
-    },
     collapseAllTargets() {
       dispatch(expandTargetActions.collapseAllTargets());
     },
-    clearTargetGroup() {
-      dispatch(selectTargetActions.clearSelectedTarget());
-    },
   };
 };
 

graph/project-details/src/lib/project-details-wrapper.tsx

@@ -8,11 +8,7 @@ import {
   useEnvironmentConfig,
   useRouteConstructor,
 } from '@nx/graph/shared';
-import {
-  ProjectDetails,
-  defaultSelectTargetGroup,
-  getTargetGroupForTarget,
-} from '@nx/graph/ui-project-details';
+import { ProjectDetails } from '@nx/graph/ui-project-details';
 import { useCallback, useEffect } from 'react';
 import {
   mapStateToProps,
@@ -32,9 +28,6 @@ export function ProjectDetailsWrapperComponent({
   sourceMap,
   setExpandTargets,
   expandTargets,
-  getSelectedTarget,
-  selectTarget,
-  clearTargetGroup,
   collapseAllTargets,
 }: ProjectDetailsProps) {
   const environment = useEnvironmentConfig()?.environment;
@@ -101,89 +94,54 @@ export function ProjectDetailsWrapperComponent({
 
   const updateSearchParams = (
     params: URLSearchParams,
-    targetGroup: string | null,
     targetNames: string[]
   ) => {
-    if (targetGroup) {
-      params.set('targetGroup', targetGroup);
-    } else {
-      params.delete('targetGroup');
-    }
     if (targetNames.length === 0) {
-      params.delete('targetName');
+      params.delete('expanded');
     } else {
-      params.set('targetName', targetNames.join(','));
+      params.set('expanded', targetNames.join(','));
     }
   };
 
-  /* useEffect(() => {
+  useEffect(() => {
     if (!project.data.targets) return;
 
-    const selectedTargetNameParam = searchParams.get('targetName');
-    if (
-      selectedTargetNameParam &&
-      selectedTarget !== selectedTargetNameParam
-    ) {
-      selectTarget(selectedTargetNameParam);
-    }
-
-    const expandedTargetsParams =
-      searchParams.get('targetName')?.split(',') || [];
-    if (expandedTargetsParams.length > 0) {
+    const expandedTargetsParams = searchParams.get('expanded')?.split(',');
+    if (expandedTargetsParams && expandedTargetsParams.length > 0) {
       setExpandTargets(expandedTargetsParams);
     }
 
-    const targetName = searchParams.get('targetName');
-    if (targetName) {
-      const targetGroup = getTargetGroupForTarget(targetName, project);
-      selectTarget(targetGroup);
-      setExpandTargets([targetName]);
-    }
-
     return () => {
-      clearTargetGroup();
       collapseAllTargets();
-      searchParams.delete('targetGroup');
-      searchParams.delete('targetName');
+      searchParams.delete('expanded');
       setSearchParams(searchParams, { replace: true });
     };
   }, []); // only run on mount
-  
 
   useEffect(() => {
     if (!project.data.targets) return;
 
-    const selectedTargetGroupParams = searchParams.get('targetGroup');
     const expandedTargetsParams =
-      searchParams.get('targetName')?.split(',') || [];
+      searchParams.get('expanded')?.split(',') || [];
 
-    if (
-      selectedTargetGroup === selectedTargetGroupParams &&
-      expandedTargetsParams.join(',') === expandTargets.join(',')
-    ) {
+    if (expandedTargetsParams.join(',') === expandTargets.join(',')) {
       return;
     }
 
     setSearchParams(
       (currentSearchParams) => {
-        updateSearchParams(
-          currentSearchParams,
-          selectedTargetGroup,
-          expandTargets
-        );
+        updateSearchParams(currentSearchParams, expandTargets);
         return currentSearchParams;
       },
       { replace: true, preventScrollReset: true }
     );
   }, [
     expandTargets,
-    selectedTargetGroup,
     project.data.targets,
     setExpandTargets,
     searchParams,
     setSearchParams,
   ]);
-  */
 
   return (
     <ProjectDetails

graph/state/src/index.ts

@@ -1,5 +1,4 @@
 export * from './lib/expand-targets/expand-targets.slice';
-export * from './lib/select-target/select-target.slice';
 export * from './lib/root/root-state.initial';
 export * from './lib/root/root-state.interface';
 export * from './lib/root/root.reducer';

graph/state/src/lib/root/root-state.initial.ts

@@ -2,13 +2,8 @@ import {
   EXPAND_TARGETS_KEY,
   initialExpandTargets,
 } from '../expand-targets/expand-targets.slice';
-import {
-  SELECT_TARGET_KEY,
-  initialSelectTarget,
-} from '../select-target/select-target.slice';
 import { RootState } from './root-state.interface';
 
 export const initialRootState: RootState = {
   [EXPAND_TARGETS_KEY]: initialExpandTargets,
-  [SELECT_TARGET_KEY]: initialSelectTarget,
 };

graph/state/src/lib/root/root-state.interface.ts

@@ -1,7 +1,5 @@
 import { EXPAND_TARGETS_KEY } from '../expand-targets/expand-targets.slice';
-import { SELECT_TARGET_KEY } from '../select-target/select-target.slice';
 
 export interface RootState {
   [EXPAND_TARGETS_KEY]: string[];
-  [SELECT_TARGET_KEY]: string;
 }

graph/state/src/lib/root/root.reducer.ts

@@ -3,13 +3,8 @@ import {
   EXPAND_TARGETS_KEY,
   expandTargetReducer,
 } from '../expand-targets/expand-targets.slice';
-import {
-  SELECT_TARGET_KEY,
-  selectTargetReducer,
-} from '../select-target/select-target.slice';
 import { RootState } from './root-state.interface';
 
 export const rootReducer = combineReducers<RootState>({
   [EXPAND_TARGETS_KEY]: expandTargetReducer,
-  [SELECT_TARGET_KEY]: selectTargetReducer as any,
 });

graph/ui-icons/src/lib/framework-icons.stories.tsx

@@ -19,10 +19,6 @@ const meta: Meta<typeof frameworkIcons> = {
 export default meta;
 type Story = StoryObj<typeof frameworkIcons>;
 
-export const Primary = {
-  args: {},
-};
-
-export const Heading: Story = {
+export const Primary: Story = {
   args: {},
 };