feat(graph): add tooltips to docs graph (#13832)

docs/shared/core-features/explore-graph.md

@@ -126,7 +126,8 @@ Try playing around with a [fully interactive graph on a sample repo](https://nrw
   "affectedProjectIds": [],
   "focus": null,
   "groupByFolder": false,
-  "exclude": []
+  "exclude": [],
+  "enableTooltips": true
 }
 ```
 

graph/.storybook/main.js

@@ -0,0 +1,11 @@
+module.exports = {
+  stories: [],
+  addons: ['@storybook/addon-essentials'],
+  // uncomment the property below if you want to apply some webpack config globally
+  // webpackFinal: async (config, { configType }) => {
+  //   // Make whatever fine-grained changes you need that should apply to all storybook configs
+
+  //   // Return the altered config
+  //   return config;
+  // },
+};

.storybook/tsconfig.json → graph/.storybook/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.base.json",
+  "extends": "../../tsconfig.base.json",
   "exclude": [
     "../**/*.spec.js",
     "../**/*.test.js",

graph/client/.storybook/main.js

@@ -1,4 +1,4 @@
-const rootMain = require('../../../.storybook/main');
+const rootMain = require('../../.storybook/main');
 
 module.exports = {
   ...rootMain,

graph/client/.storybook/preview.js

@@ -3,16 +3,10 @@ import '../src/styles.scss';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 
-import { themes } from '@storybook/theming';
+import { rootParameters } from '../../.storybook/preview';
 
 export const parameters = {
-  darkMode: {
-    // Override the default dark theme
-    dark: { ...themes.dark, appContentBg: 'rgb(15, 23, 42, 1)' },
-    // Override the default light theme
-    light: themes.normal,
-    stylePreview: true,
-  },
+  ...rootParameters,
 };
 export const decorators = [
   (Story, context) => {

graph/client/.storybook/tailwind-imports.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

graph/client/src/app/app.tsx

@@ -1,10 +1,6 @@
 import { themeInit } from './theme-resolver';
 import { rankDirInit } from './rankdir-resolver';
-import {
-  createBrowserRouter,
-  createHashRouter,
-  RouterProvider,
-} from 'react-router-dom';
+import { RouterProvider } from 'react-router-dom';
 import { getRouter } from './get-router';
 
 themeInit();
@@ -13,5 +9,3 @@ rankDirInit();
 export function App() {
   return <RouterProvider router={getRouter()} />;
 }
-
-export default App;

graph/client/src/app/feature-projects/panels/collapse-edges-panel.tsx

@@ -37,5 +37,3 @@ export const CollapseEdgesPanel = memo(
     );
   }
 );
-
-export default CollapseEdgesPanel;

graph/client/src/app/feature-projects/panels/group-by-folder-panel.tsx

@@ -1,5 +1,4 @@
-import { memo } from 'react';
-import CheckboxPanel from '../../ui-components/checkbox-panel';
+import { CheckboxPanel } from '../../ui-components/checkbox-panel';
 
 export interface DisplayOptionsPanelProps {
   groupByFolder: boolean;
@@ -20,5 +19,3 @@ export const GroupByFolderPanel = ({
     />
   );
 };
-
-export default GroupByFolderPanel;

graph/client/src/app/feature-projects/panels/rankdir-panel.tsx

@@ -9,7 +9,7 @@ import {
   rankDirResolver,
 } from '../../rankdir-resolver';
 
-export default function RankdirPanel(): JSX.Element {
+export function RankdirPanel(): JSX.Element {
   const [rankDir, setRankDir] = useState(
     (localStorage.getItem(localStorageRankDirKey) as RankDir) || 'TB'
   );

graph/client/src/app/feature-projects/panels/search-depth.tsx

@@ -76,5 +76,3 @@ export const SearchDepth = memo(
     );
   }
 );
-
-export default SearchDepth;

graph/client/src/app/feature-projects/panels/text-filter-panel.tsx

@@ -1,4 +1,4 @@
-import DebouncedTextInput from '../../ui-components/debounced-text-input';
+import { DebouncedTextInput } from '@nrwl/graph/ui-components';
 
 export interface TextFilterPanelProps {
   textFilter: string;
@@ -56,5 +56,3 @@ export function TextFilterPanel({
     </div>
   );
 }
-
-export default TextFilterPanel;

graph/client/src/app/feature-projects/panels/theme-panel.tsx

@@ -12,7 +12,7 @@ import {
   themeResolver,
 } from '../../theme-resolver';
 
-export default function ThemePanel(): JSX.Element {
+export function ThemePanel(): JSX.Element {
   const [theme, setTheme] = useState(
     (localStorage.getItem(localStorageThemeKey) as Theme) || 'system'
   );

graph/client/src/app/feature-projects/panels/tracing-panel.tsx

@@ -111,5 +111,3 @@ export const TracingPanel = memo(
     );
   }
 );
-
-export default TracingPanel;

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

@@ -18,7 +18,7 @@ import {
   parseParentDirectoriesFromFilePath,
   useRouteConstructor,
 } from '../util';
-import ExperimentalFeature from '../ui-components/experimental-feature';
+import { ExperimentalFeature } from '../ui-components/experimental-feature';
 import { TracingAlgorithmType } from './machines/interfaces';
 import { getProjectGraphService } from '../machines/get-services';
 import { Link, useNavigate } from 'react-router-dom';
@@ -317,5 +317,3 @@ export function ProjectList() {
     </div>
   );
 }
-
-export default ProjectList;

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

@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import ExperimentalFeature from '../ui-components/experimental-feature';
+import { ExperimentalFeature } from '../ui-components/experimental-feature';
 import { useProjectGraphSelector } from './hooks/use-project-graph-selector';
 import {
   collapseEdgesSelector,
@@ -11,14 +11,14 @@ import {
   searchDepthSelector,
   textFilterSelector,
 } from './machines/selectors';
-import CollapseEdgesPanel from './panels/collapse-edges-panel';
-import FocusedPanel from '../ui-components/focused-panel';
-import GroupByFolderPanel from './panels/group-by-folder-panel';
-import ProjectList from './project-list';
-import SearchDepth from './panels/search-depth';
-import ShowHideProjects from '../ui-components/show-hide-all';
-import TextFilterPanel from './panels/text-filter-panel';
-import TracingPanel from './panels/tracing-panel';
+import { CollapseEdgesPanel } from './panels/collapse-edges-panel';
+import { FocusedPanel } from '../ui-components/focused-panel';
+import { GroupByFolderPanel } from './panels/group-by-folder-panel';
+import { ProjectList } from './project-list';
+import { SearchDepth } from './panels/search-depth';
+import { ShowHideAll } from '../ui-components/show-hide-all';
+import { TextFilterPanel } from './panels/text-filter-panel';
+import { TracingPanel } from './panels/tracing-panel';
 import { useEnvironmentConfig } from '../hooks/use-environment-config';
 import { TracingAlgorithmType } from './machines/interfaces';
 import { getProjectGraphService } from '../machines/get-services';
@@ -352,13 +352,13 @@ export function ProjectsSidebar(): JSX.Element {
       ></TextFilterPanel>
 
       <div>
-        <ShowHideProjects
+        <ShowHideAll
           hideAll={hideAllProjects}
           showAll={showAllProjects}
           showAffected={showAffectedProjects}
           hasAffected={hasAffectedProjects}
           label="projects"
-        ></ShowHideProjects>
+        ></ShowHideAll>
 
         <GroupByFolderPanel
           groupByFolder={groupByFolder}
@@ -392,5 +392,3 @@ export function ProjectsSidebar(): JSX.Element {
     </>
   );
 }
-
-export default ProjectsSidebar;

graph/client/src/app/feature-tasks/task-list.tsx

@@ -187,5 +187,3 @@ export function TaskList({
     </div>
   );
 }
-
-export default TaskList;

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

@@ -1,4 +1,4 @@
-import TaskList from './task-list';
+import { TaskList } from './task-list';
 import {
   useNavigate,
   useParams,
@@ -12,11 +12,10 @@ import type {
 } from 'nx/src/command-line/dep-graph';
 import { getGraphService } from '../machines/graph.service';
 import { useEffect, useState } from 'react';
-import CheckboxPanel from '../ui-components/checkbox-panel';
+import { CheckboxPanel } from '../ui-components/checkbox-panel';
 
-// nx-ignore-next-line
-import Dropdown from '../ui-components/dropdown';
-import ShowHideAll from '../ui-components/show-hide-all';
+import { Dropdown } from '@nrwl/graph/ui-components';
+import { ShowHideAll } from '../ui-components/show-hide-all';
 
 function createTaskName(
   project: string,
@@ -217,5 +216,3 @@ export function TasksSidebar() {
     </>
   );
 }
-
-export default TasksSidebar;

graph/client/src/app/machines/get-services.ts

@@ -1,5 +1,7 @@
 import { interpret, InterpreterStatus } from 'xstate';
 import { projectGraphMachine } from '../feature-projects/machines/project-graph.machine';
+import { getGraphService } from './graph.service';
+import { GraphTooltipService } from '@nrwl/graph/ui-graph';
 
 let projectGraphService = interpret(projectGraphMachine, {
   devTools: !!window.useXstateInspect,
@@ -12,3 +14,14 @@ export function getProjectGraphService() {
 
   return projectGraphService;
 }
+
+let tooltipService: GraphTooltipService;
+
+export function getTooltipService(): GraphTooltipService {
+  if (!tooltipService) {
+    const graph = getGraphService();
+    tooltipService = new GraphTooltipService(graph);
+  }
+
+  return tooltipService;
+}

graph/client/src/app/routes.tsx

@@ -1,7 +1,7 @@
 import { Shell } from './shell';
 import { redirect, RouteObject } from 'react-router-dom';
-import ProjectsSidebar from './feature-projects/projects-sidebar';
-import TasksSidebar from './feature-tasks/tasks-sidebar';
+import { ProjectsSidebar } from './feature-projects/projects-sidebar';
+import { TasksSidebar } from './feature-tasks/tasks-sidebar';
 import { getEnvironmentConfig } from './hooks/use-environment-config';
 // nx-ignore-next-line
 import { ProjectGraphClientResponse } from 'nx/src/command-line/dep-graph';

graph/client/src/app/shell.tsx

@@ -4,22 +4,19 @@ import {
   InformationCircleIcon,
 } from '@heroicons/react/24/outline';
 import classNames from 'classnames';
-// nx-ignore-next-line
-
-import DebuggerPanel from './ui-components/debugger-panel';
+import { DebuggerPanel } from './ui-components/debugger-panel';
 import { useEnvironmentConfig } from './hooks/use-environment-config';
 import { getGraphService } from './machines/graph.service';
-import { selectValueByThemeStatic } from './theme-resolver';
 import { Outlet, useNavigate, useParams } from 'react-router-dom';
-import ThemePanel from './feature-projects/panels/theme-panel';
-import Dropdown from './ui-components/dropdown';
+import { ThemePanel } from './feature-projects/panels/theme-panel';
+import { Dropdown } from '@nrwl/graph/ui-components';
 import { useCurrentPath } from './hooks/use-current-path';
-import ExperimentalFeature from './ui-components/experimental-feature';
-import RankdirPanel from './feature-projects/panels/rankdir-panel';
+import { ExperimentalFeature } from './ui-components/experimental-feature';
+import { RankdirPanel } from './feature-projects/panels/rankdir-panel';
 import { getProjectGraphService } from './machines/get-services';
-import TooltipDisplay from './ui-tooltips/graph-tooltip-display';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { Tooltip } from './ui-tooltips/tooltip';
+import { Tooltip } from '@nrwl/graph/ui-tooltips';
+import { TooltipDisplay } from './ui-tooltips/graph-tooltip-display';
 
 export function Shell(): JSX.Element {
   const projectGraphService = getProjectGraphService();

graph/client/src/app/ui-components/checkbox-panel.stories.tsx

@@ -1,5 +1,5 @@
 import { ComponentMeta, ComponentStory } from '@storybook/react';
-import CheckboxPanel from './checkbox-panel';
+import { CheckboxPanel } from './checkbox-panel';
 
 export default {
   component: CheckboxPanel,

graph/client/src/app/ui-components/checkbox-panel.tsx

@@ -38,5 +38,3 @@ export const CheckboxPanel = memo(
     );
   }
 );
-
-export default CheckboxPanel;

graph/client/src/app/ui-components/debugger-panel.tsx

@@ -1,6 +1,6 @@
 import { memo } from 'react';
 import { WorkspaceData, GraphPerfReport } from '../interfaces';
-import Dropdown from './dropdown';
+import { Dropdown } from '@nrwl/graph/ui-components';
 
 export interface DebuggerPanelProps {
   projects: WorkspaceData[];
@@ -49,5 +49,3 @@ export const DebuggerPanel = memo(function ({
     </div>
   );
 });
-
-export default DebuggerPanel;

graph/client/src/app/ui-components/experimental-feature.tsx

@@ -1,7 +1,7 @@
 import { useEnvironmentConfig } from '../hooks/use-environment-config';
 import { Children, cloneElement } from 'react';
 
-function ExperimentalFeature(props) {
+export function ExperimentalFeature(props) {
   const environment = useEnvironmentConfig();
   const showExperimentalFeatures =
     environment.appConfig.showExperimentalFeatures;
@@ -11,5 +11,3 @@ function ExperimentalFeature(props) {
       )
     : null;
 }
-
-export default ExperimentalFeature;

graph/client/src/app/ui-components/focused-panel.tsx

@@ -30,5 +30,3 @@ export const FocusedPanel = memo(
     );
   }
 );
-
-export default FocusedPanel;

graph/client/src/app/ui-components/show-hide-all.tsx

@@ -54,5 +54,3 @@ export const ShowHideAll = memo(
     );
   }
 );
-
-export default ShowHideAll;

graph/client/src/app/ui-tooltips/graph-tooltip-display.tsx

@@ -1,9 +1,12 @@
-import ProjectNodeToolTip from './project-node-tooltip';
-import ProjectEdgeNodeTooltip from './project-edge-tooltip';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { getTooltipService } from './tooltip-service';
-import TaskNodeTooltip from './task-node-tooltip';
-import { Tooltip } from './tooltip';
+import { getTooltipService } from '../machines/get-services';
+import {
+  ProjectEdgeNodeTooltip,
+  ProjectNodeToolTip,
+  TaskNodeTooltip,
+  Tooltip,
+} from '@nrwl/graph/ui-tooltips';
+import { ProjectNodeActions } from './project-node-actions';
 
 const tooltipService = getTooltipService();
 
@@ -16,7 +19,11 @@ export function TooltipDisplay() {
   if (currentTooltip) {
     switch (currentTooltip.type) {
       case 'projectNode':
-        tooltipToRender = <ProjectNodeToolTip {...currentTooltip.props} />;
+        tooltipToRender = (
+          <ProjectNodeToolTip {...currentTooltip.props}>
+            <ProjectNodeActions {...currentTooltip.props} />
+          </ProjectNodeToolTip>
+        );
         break;
       case 'projectEdge':
         tooltipToRender = <ProjectEdgeNodeTooltip {...currentTooltip.props} />;
@@ -37,5 +44,3 @@ export function TooltipDisplay() {
     ></Tooltip>
   ) : null;
 }
-
-export default TooltipDisplay;