fix(graph): reload graph app only when hash changes in watch mode (#23434)

This commit is contained in:
MaxKless 2024-05-16 16:23:53 +02:00 committed by GitHub
parent 7f32d8643d
commit c7f60fcf54
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -25,7 +25,6 @@ import { ProjectList } from './project-list';
// nx-ignore-next-line // nx-ignore-next-line
import { ProjectGraphClientResponse } from 'nx/src/command-line/graph/graph'; import { ProjectGraphClientResponse } from 'nx/src/command-line/graph/graph';
/* eslint-enable @nx/enforce-module-boundaries */ /* eslint-enable @nx/enforce-module-boundaries */
import { useFloating } from '@floating-ui/react';
import { import {
fetchProjectGraph, fetchProjectGraph,
getProjectGraphDataService, getProjectGraphDataService,
@ -66,6 +65,7 @@ export function ProjectsSidebar(): JSX.Element {
const selectedProjectRouteData = useRouteLoaderData( const selectedProjectRouteData = useRouteLoaderData(
'selectedWorkspace' 'selectedWorkspace'
) as ProjectGraphClientResponse; ) as ProjectGraphClientResponse;
const [lastHash, setLastHash] = useState(selectedProjectRouteData.hash);
const params = useParams(); const params = useParams();
const navigate = useNavigate(); const navigate = useNavigate();
const routeContructor = useRouteConstructor(); const routeContructor = useRouteConstructor();
@ -302,12 +302,16 @@ export function ProjectsSidebar(): JSX.Element {
params, params,
environmentConfig.appConfig environmentConfig.appConfig
).then((response: ProjectGraphClientResponse) => { ).then((response: ProjectGraphClientResponse) => {
if (response.hash === lastHash) {
return;
}
projectGraphService.send({ projectGraphService.send({
type: 'updateGraph', type: 'updateGraph',
projects: response.projects, projects: response.projects,
dependencies: response.dependencies, dependencies: response.dependencies,
fileMap: response.fileMap, fileMap: response.fileMap,
}); });
setLastHash(response.hash);
}); });
}, },
5000, 5000,
@ -375,7 +379,7 @@ export function ProjectsSidebar(): JSX.Element {
<ExperimentalFeature> <ExperimentalFeature>
<div className="mx-4 mt-4 rounded-lg border-2 border-dashed border-purple-500 p-4 shadow-lg dark:border-purple-600 dark:bg-[#0B1221]"> <div className="mx-4 mt-4 rounded-lg border-2 border-dashed border-purple-500 p-4 shadow-lg dark:border-purple-600 dark:bg-[#0B1221]">
<h3 className="cursor-text px-4 py-2 text-sm font-semibold uppercase tracking-wide text-slate-800 dark:text-slate-200 lg:text-xs"> <h3 className="cursor-text px-4 py-2 text-sm font-semibold uppercase tracking-wide text-slate-800 lg:text-xs dark:text-slate-200">
Experimental Features Experimental Features
</h3> </h3>
<CollapseEdgesPanel <CollapseEdgesPanel