feat(graph): change to sticky header on scroll

graph/client/src/app/ui-components/error-boundary.tsx

@@ -19,7 +19,7 @@ export function ErrorBoundary() {
       <ProjectDetailsHeader />
       <h1 className="mb-4 text-4xl dark:text-slate-100">Error</h1>
       <div>
-        <p className="text-lg mb-4 dark:text-slate-200">{message}</p>
+        <p className="mb-4 text-lg dark:text-slate-200">{message}</p>
         <p className="text-sm">Error message: {error?.toString()}</p>
       </div>
     </div>

graph/client/src/assets/project-graphs/e2e.json

@@ -1189,27 +1189,111 @@
           }
         ],
         "targets": {
+          "lint": {
+            "cache": true,
+            "options": {
+              "cwd": "apps/cart-e2e",
+              "command": "eslint ."
+            },
+            "inputs": [
+              "default",
+              "^default",
+              "{workspaceRoot}/.eslintrc.json",
+              "{projectRoot}/.eslintrc.json",
+              "{workspaceRoot}/tools/eslint-rules/**/*",
+              {
+                "externalDependencies": ["eslint"]
+              }
+            ],
+            "executor": "nx:run-commands",
+            "configurations": {}
+          },
           "e2e": {
-            "executor": "@nrwl/cypress:cypress",
+            "cache": true,
+            "inputs": ["default", "^production"],
+            "outputs": [
+              "{workspaceRoot}/dist/cypress/apps/cart-e2e/videos",
+              "{workspaceRoot}/dist/cypress/apps/cart-e2e/screenshots"
+            ],
+            "metadata": {
+              "technologies": ["cypress"],
+              "description": "Runs Cypress Tests"
+            },
+            "executor": "nx:run-commands",
             "options": {
-              "cypressConfig": "apps/cart-e2e/cypress.config.ts",
-              "devServerTarget": "cart:serve",
-              "testingType": "e2e"
+              "cwd": "apps/cart-e2e",
+              "command": "cypress run"
             },
-            "configurations": {
-              "production": {
-                "devServerTarget": "cart:serve:production"
+            "configurations": {}
+          },
+          "e2e-ci--src/e2e/app.cy.ts": {
+            "outputs": [
+              "{workspaceRoot}/dist/cypress/apps/cart-e2e/videos",
+              "{workspaceRoot}/dist/cypress/apps/cart-e2e/screenshots"
+            ],
+            "inputs": [
+              "default",
+              "^production",
+              {
+                "externalDependencies": ["cypress"]
               }
+            ],
+            "cache": true,
+            "options": {
+              "cwd": "apps/cart-e2e",
+              "command": "cypress run --env webServerCommand=\"nx run cart:serve\" --spec src/e2e/app.cy.ts"
             },
-            "inputs": ["default", "^production"]
+            "metadata": {
+              "technologies": ["cypress"],
+              "description": "Runs Cypress Tests in src/e2e/app.cy.ts in CI"
+            },
+            "executor": "nx:run-commands",
+            "configurations": {}
           },
-          "lint": {
-            "executor": "@nrwl/linter:eslint",
+          "e2e-ci": {
+            "executor": "nx:noop",
+            "cache": true,
+            "inputs": [
+              "default",
+              "^production",
+              {
+                "externalDependencies": ["cypress"]
+              }
+            ],
+            "outputs": [
+              "{workspaceRoot}/dist/cypress/apps/cart-e2e/videos",
+              "{workspaceRoot}/dist/cypress/apps/cart-e2e/screenshots"
+            ],
+            "dependsOn": [
+              {
+                "target": "e2e-ci--src/e2e/app.cy.ts",
+                "projects": "self",
+                "params": "forward"
+              }
+            ],
+            "metadata": {
+              "technologies": ["cypress"],
+              "description": "Runs Cypress Tests in CI"
+            },
+            "options": {},
+            "configurations": {}
+          },
+          "open-cypress": {
             "options": {
-              "lintFilePatterns": ["apps/cart-e2e/**/*.{ts,tsx,js,jsx}"]
+              "cwd": "apps/cart-e2e",
+              "command": "cypress open"
             },
-            "outputs": ["{options.outputFile}"],
-            "inputs": ["default", "{workspaceRoot}/.eslintrc.json"]
+            "metadata": {
+              "technologies": ["cypress"],
+              "description": "Opens Cypress"
+            },
+            "executor": "nx:run-commands",
+            "configurations": {}
+          }
+        },
+        "metadata": {
+          "targetGroups": {
+            "E2E (CI)": ["e2e-ci--src/e2e/app.cy.ts", "e2e-ci"]
           }
         }
       }

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

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

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

@@ -32,8 +32,8 @@ export function ProjectDetailsWrapperComponent({
   sourceMap,
   setExpandTargets,
   expandTargets,
-  selectedTargetGroup,
-  selectTargetGroup,
+  getSelectedTarget,
+  selectTarget,
   clearTargetGroup,
   collapseAllTargets,
 }: ProjectDetailsProps) {
@@ -116,17 +116,15 @@ export function ProjectDetailsWrapperComponent({
     }
   };
 
-  useEffect(() => {
+  /* useEffect(() => {
     if (!project.data.targets) return;
 
-    const selectedTargetGroupParams = searchParams.get('targetGroup');
+    const selectedTargetNameParam = searchParams.get('targetName');
     if (
-      selectedTargetGroupParams &&
-      selectedTargetGroup !== selectedTargetGroupParams
+      selectedTargetNameParam &&
+      selectedTarget !== selectedTargetNameParam
     ) {
-      selectTargetGroup(selectedTargetGroupParams);
-    } else if (!selectedTargetGroupParams) {
-      selectTargetGroup(defaultSelectTargetGroup(project)); // set first target group as default
+      selectTarget(selectedTargetNameParam);
     }
 
     const expandedTargetsParams =
@@ -138,7 +136,7 @@ export function ProjectDetailsWrapperComponent({
     const targetName = searchParams.get('targetName');
     if (targetName) {
       const targetGroup = getTargetGroupForTarget(targetName, project);
-      selectTargetGroup(targetGroup);
+      selectTarget(targetGroup);
       setExpandTargets([targetName]);
     }
 
@@ -150,6 +148,7 @@ export function ProjectDetailsWrapperComponent({
       setSearchParams(searchParams, { replace: true });
     };
   }, []); // only run on mount
+  
 
   useEffect(() => {
     if (!project.data.targets) return;
@@ -184,6 +183,7 @@ export function ProjectDetailsWrapperComponent({
     searchParams,
     setSearchParams,
   ]);
+  */
 
   return (
     <ProjectDetails

graph/state/src/index.ts

@@ -1,6 +1,7 @@
 export * from './lib/expand-targets/expand-targets.slice';
-export * from './lib/select-target-group/select-target-group.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';
 export * from './lib/root/root.store';
 export * from './lib/store.decorator';

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

@@ -3,13 +3,12 @@ import {
   initialExpandTargets,
 } from '../expand-targets/expand-targets.slice';
 import {
-  SELECT_TARGET_GROUP_KEY,
-  initialSelectTargetGroup,
-} from '../select-target-group/select-target-group.slice';
-
-import { RootState } from './root.reducer';
+  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_GROUP_KEY]: initialSelectTargetGroup,
+  [SELECT_TARGET_KEY]: initialSelectTarget,
 };

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

@@ -0,0 +1,7 @@
+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

@@ -4,16 +4,12 @@ import {
   expandTargetReducer,
 } from '../expand-targets/expand-targets.slice';
 import {
-  SELECT_TARGET_GROUP_KEY,
-  selectTargetGroupReducer,
-} from '../select-target-group/select-target-group.slice';
+  SELECT_TARGET_KEY,
+  selectTargetReducer,
+} from '../select-target/select-target.slice';
+import { RootState } from './root-state.interface';
 
-export const rootReducer = combineReducers<{
-  [EXPAND_TARGETS_KEY]: string[];
-  [SELECT_TARGET_GROUP_KEY]: string;
-}>({
+export const rootReducer = combineReducers<RootState>({
   [EXPAND_TARGETS_KEY]: expandTargetReducer,
-  [SELECT_TARGET_GROUP_KEY]: selectTargetGroupReducer as any,
+  [SELECT_TARGET_KEY]: selectTargetReducer as any,
 });
-
-export type RootState = ReturnType<typeof rootReducer>;

graph/state/src/lib/select-target/select-target.slice.ts

@@ -0,0 +1,29 @@
+import { PayloadAction, createSlice } from '@reduxjs/toolkit';
+
+export const SELECT_TARGET_KEY = 'selectTarget';
+
+export const initialSelectTarget: string = '';
+
+export const selectTargetSlice = createSlice({
+  name: SELECT_TARGET_KEY,
+  initialState: initialSelectTarget,
+  reducers: {
+    selectTarget: (_: string, action: PayloadAction<string>): string => {
+      return action.payload;
+    },
+    clearSelectedTarget: (): string => {
+      return '';
+    },
+  },
+});
+
+/*
+ * Export reducer for store configuration.
+ */
+export const selectTargetReducer = selectTargetSlice.reducer;
+
+export const selectTargetActions = selectTargetSlice.actions;
+
+export const getSelectedTarget = <ROOT extends { [SELECT_TARGET_KEY]: string }>(
+  rootState: ROOT
+): string => rootState[SELECT_TARGET_KEY];

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

@@ -1697,7 +1697,7 @@ export const frameworkIcons: Record<
         viewBox="0 0 256 263"
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
-        className="w-full h-full"
+        className="h-full w-full"
       >
         <g>
           <path

graph/ui-icons/src/lib/technology-icon.tsx

@@ -14,7 +14,7 @@ export function TechnologyIcon({
   }
   return (
     <div
-      className={`w-4 h-4 ${
+      className={`h-4 w-4 ${
         frameworkIcons[technology as Framework].isAdaptiveIcon
           ? 'adpative-icon'
           : ''