Fix lint errors from Node/Package upgrade

package.json

@@ -38,7 +38,7 @@
     "lint:scss:fix": "stylelint --fix \"src/**/*.scss\"",
     "lint:scss": "stylelint \"src/**/*.scss\"",
     "lint:spdx": "node scripts/check-spdx.mjs",
-    "lint:ts": "pnpx tsc --noEmit",
+    "lint:ts": "pnpm exec tsc --noEmit",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preinstall": "npx only-allow pnpm",
     "prepare": "husky",
@@ -125,7 +125,7 @@
     "stylelint-config-standard-scss": "^13.1.0",
     "stylelint-prettier": "^5.0.3",
     "svgo": "^3.3.3",
-    "typescript": "~5.2.2",
+    "typescript": "~5.8.3",
     "vite": "^8.0.12",
     "vitest": "^4.1.6",
     "vitest-canvas-mock": "^1.1.4"

src/components/Collapsible.tsx

@@ -4,7 +4,7 @@
 
 import { Button, ButtonVariant, Collapse, Size } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { JSX } from 'react/jsx-runtime';
 import '../scss/components/Collapsible.scss';
 import classNames from 'classnames';
@@ -34,11 +34,14 @@ const Collapsible: React.FC<React.PropsWithChildren<CollapsibleProps>> = ({
     isDisabled = false,
 }) => {
     const [isOpenState, setIsOpenState] = React.useState(isOpen);
-    useEffect(() => {
+    const [prevIsOpenProp, setPrevIsOpenProp] = React.useState(isOpen);
+    const icon = isOpenState ? IconNames.CARET_UP : IconNames.CARET_DOWN;
+
+    if (isOpen !== prevIsOpenProp) {
+        setPrevIsOpenProp(isOpen);
         setIsOpenState(isOpen);
-    }, [isOpen]);
+    }
 
-    const icon = isOpenState ? IconNames.CARET_UP : IconNames.CARET_DOWN;
     return (
         <div className={classNames('collapsible-component', collapseClassName)}>
             <div className='collapsible-controls'>

src/components/OperationList.tsx

@@ -41,6 +41,8 @@ const OPERATION_EL_HEIGHT = 39; // Height in px of each list item
 const TOTAL_SHADE_HEIGHT = 100; // Total height in px of 'scroll-shade' pseudo elements
 
 const OperationList = () => {
+    'use no memo';
+
     const [shouldCollapseAll, setShouldCollapseAll] = useAtom(shouldCollapseAllOperationsAtom);
     const selectedOperationRange = useAtomValue(selectedOperationRangeAtom);
 
@@ -123,6 +125,7 @@ const OperationList = () => {
         expandedItems: restoredExpandedItems,
     } = useMemo(() => getListState(), [getListState]) ?? {};
 
+    // eslint-disable-next-line react-hooks/incompatible-library
     const virtualizer = useVirtualizer({
         estimateSize: () => OPERATION_EL_HEIGHT,
         getScrollElement: () => scrollElementRef.current,

src/components/RangeSlider.tsx

@@ -116,7 +116,9 @@ function Range() {
                     : selectedPerformanceRange[1]);
 
             setSelectedPerformanceRange([updatedMin, updatedMax]);
-            setIsUserOpChange(false);
+            queueMicrotask(() => {
+                setIsUserOpChange(false);
+            });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isInSync, selectedOperationRange]);
@@ -151,7 +153,9 @@ function Range() {
                     : selectedOperationRange[1]);
 
             setSelectedOperationRange([updatedMin, updatedMax]);
-            setIsUserPerfChange(false);
+            queueMicrotask(() => {
+                setIsUserPerfChange(false);
+            });
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isInSync, selectedPerformanceRange]);

src/components/TensorList.tsx

@@ -45,6 +45,8 @@ const TOTAL_SHADE_HEIGHT = 100; // Total height in px of 'scroll-shade' pseudo e
 const HIGH_CONSUMER_INTENT = Intent.DANGER;
 
 const TensorList = () => {
+    'use no memo';
+
     const [shouldCollapseAll, setShouldCollapseAll] = useAtom(shouldCollapseAllTensorsAtom);
     const [bufferTypeFilters, setBufferTypeFilters] = useAtom(tensorBufferTypeFiltersAtom);
     const [showHighConsumerTensors, setShowHighConsumerTensors] = useAtom(showHighConsumerTensorsAtom);
@@ -149,6 +151,7 @@ const TensorList = () => {
         expandedItems: restoredExpandedItems,
     } = useMemo(() => getListState(), [getListState]) ?? {};
 
+    // eslint-disable-next-line react-hooks/incompatible-library
     const virtualizer = useVirtualizer({
         estimateSize: () => OPERATION_EL_HEIGHT,
         getScrollElement: () => scrollElementRef.current,

src/components/mlir/MlirJsonFileLoader.tsx

@@ -19,13 +19,15 @@ const ICON_MAP: Record<ConnectionTestStates, IconName> = {
     [ConnectionTestStates.PROGRESS]: IconNames.DOT,
     [ConnectionTestStates.FAILED]: IconNames.CROSS,
     [ConnectionTestStates.OK]: IconNames.TICK,
+    [ConnectionTestStates.WARNING]: IconNames.WARNING_SIGN,
 };
 
 const INTENT_MAP: Record<ConnectionTestStates, Intent> = {
     [ConnectionTestStates.IDLE]: Intent.NONE,
     [ConnectionTestStates.PROGRESS]: Intent.WARNING,
     [ConnectionTestStates.FAILED]: Intent.DANGER,
     [ConnectionTestStates.OK]: Intent.SUCCESS,
+    [ConnectionTestStates.WARNING]: Intent.WARNING,
 };
 
 const MlirJsonFileLoader: React.FC = () => {

src/components/npe/NPETimelineComponent.tsx

@@ -81,6 +81,7 @@ const NPETimelineComponent: React.FC<NPEHeatMapProps> = ({
         let groupIndex = -1;
         return {
             range: selectedZoneList.flatMap((rootZone) => {
+                // eslint-disable-next-line react-hooks/immutability
                 groupIndex += 1;
                 const childZones = rootZone.expandedState ? getZoneDrawingModel(rootZone.zones, 1) : [];
                 const maxDepth = childZones.length ? Math.max(...childZones.map((z) => z.depth)) : 0;

src/components/npe/NPEViewComponent.tsx

@@ -116,6 +116,7 @@ const NPEView: React.FC<NPEViewProps> = ({ npeData }) => {
 
     useEffect(() => {
         if (!isFabricTransfersFilteringEnabled && fabricEventsFilter !== EVENT_TYPE_FILTER.ALL_EVENTS) {
+            // eslint-disable-next-line react-hooks/set-state-in-effect
             setFabricEventsFilter(EVENT_TYPE_FILTER.ALL_EVENTS);
         }
     }, [fabricEventsFilter, isFabricTransfersFilteringEnabled]);
@@ -223,13 +224,16 @@ const NPEView: React.FC<NPEViewProps> = ({ npeData }) => {
     useEffect(() => {
         resetRouteColors();
         if (isShowingAllTransfers) {
+            // eslint-disable-next-line react-hooks/immutability
             showAllTransfers();
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [selectedTimestep, isShowingAllTransfers]);
 
     useEffect(() => {
+        // eslint-disable-next-line react-hooks/immutability
         stopAnimation();
+        // eslint-disable-next-line react-hooks/set-state-in-effect
         setSelectedTimestep(0);
         setSelectedNode(null);
         setSelectedTransferList([]);

src/components/operation-details/StackTrace.tsx

@@ -52,7 +52,7 @@ function StackTrace({
     const isRemote = useAtomValue(profilerReportLocationAtom) === ReportLocation.REMOTE;
 
     const [isExpanded, setIsExpanded] = useState(isInitiallyExpanded || false);
-    const [filePath, setFilePath] = useState('');
+    const filePath = useMemo(() => FILE_PATH_REGEX.exec(stackTrace)?.[1] ?? '', [stackTrace]);
     const [isFetchingFile, setIsFetchingFile] = useState(false);
     const [fileContents, setFileContents] = useState('');
     const [errorDetails, setErrorDetails] = useState('');
@@ -68,13 +68,8 @@ function StackTrace({
     const sourceControlsRef = useRef<null | HTMLDivElement>(null);
 
     const stackTraceWithHighlights = useMemo(() => {
-        const filePathMatches = FILE_PATH_REGEX.exec(stackTrace);
         let highlightedFileContents = hljs.highlight(stackTrace, { language }).value;
 
-        if (filePathMatches) {
-            setFilePath(filePathMatches[1]);
-        }
-
         let line = 1;
         highlightedFileContents = highlightedFileContents.replace(
             /^/gm,
@@ -226,23 +221,29 @@ function StackTrace({
     }, [scrollContainerEl, overlayTopOffset, isViewingSourceFile]);
 
     useEffect(() => {
-        setFileContents('');
-        setErrorDetails('');
-        setSourceFileStatus(SourceFileStatus.Unavailable);
-        setSourceMatchedViaRemap(false);
-        setResolvedSourcePath(null);
+        queueMicrotask(() => {
+            setFileContents('');
+            setErrorDetails('');
+            setSourceFileStatus(SourceFileStatus.Unavailable);
+            setSourceMatchedViaRemap(false);
+            setResolvedSourcePath(null);
+        });
     }, [filePath, canReadSource]);
 
     // Check stack trace file is available
     useEffect(() => {
         if (!shouldShowSourceControls || !filePath || !canReadSource) {
-            setSourceFileStatus(SourceFileStatus.Unavailable);
+            queueMicrotask(() => {
+                setSourceFileStatus(SourceFileStatus.Unavailable);
+            });
             return undefined;
         }
 
         const controller = new AbortController();
         let fetchCancelled = false;
-        setSourceFileStatus(SourceFileStatus.Pending);
+        queueMicrotask(() => {
+            setSourceFileStatus(SourceFileStatus.Pending);
+        });
 
         (async () => {
             try {

src/components/report-selection/RemoteSyncConfigurator.tsx

@@ -31,6 +31,7 @@ import { DBVersionValidation, evaluateDbVersion } from '../../functions/compareD
 
 const RemoteSyncConfigurator: FC = () => {
     const remote = useRemoteConnection();
+    const { setPersistentSelectedConnection, setPersistentSavedConnectionList } = remote;
     const queryClient = useQueryClient();
     const disableRemoteSync = !!getServerConfig()?.SERVER_MODE;
 
@@ -76,7 +77,7 @@ const RemoteSyncConfigurator: FC = () => {
     );
 
     const updateSelectedConnection = async (connection: RemoteConnection) => {
-        remote.persistentState.selectedConnection = connection;
+        setPersistentSelectedConnection(connection);
         setReportFolders(remote.persistentState.getSavedReportFolders(connection));
         setRemotePerformanceFolders(remote.persistentState.getSavedPerformanceFolders(connection));
 
@@ -272,21 +273,23 @@ const RemoteSyncConfigurator: FC = () => {
 
     // Populates the selectedReportFolder if there is a stored activeProfilerReport
     useEffect(() => {
-        if (activeProfilerReport && isProfilerRemote) {
-            const matchedFolder = reportFolderList.find((folder) =>
-                folder.remotePath?.includes(activeProfilerReport.path),
-            );
+        queueMicrotask(() => {
+            if (activeProfilerReport && isProfilerRemote) {
+                const matchedFolder = reportFolderList.find((folder) =>
+                    folder.remotePath?.includes(activeProfilerReport.path),
+                );
 
-            setSelectedReportFolder(matchedFolder);
-        }
+                setSelectedReportFolder(matchedFolder);
+            }
 
-        if (activePerformanceReport && isPerformanceRemote) {
-            const matchedFolder = remotePerformanceFolderList.find((folder) =>
-                folder.reportName?.includes(activePerformanceReport.reportName),
-            );
+            if (activePerformanceReport && isPerformanceRemote) {
+                const matchedFolder = remotePerformanceFolderList.find((folder) =>
+                    folder.reportName?.includes(activePerformanceReport.reportName),
+                );
 
-            setSelectedPerformanceFolder(matchedFolder);
-        }
+                setSelectedPerformanceFolder(matchedFolder);
+            }
+        });
     }, [
         activeProfilerReport,
         profilerReportLocation,
@@ -317,10 +320,10 @@ const RemoteSyncConfigurator: FC = () => {
                 <AddRemoteConnection
                     disabled={isDisabled}
                     onAddConnection={async (newConnection) => {
-                        remote.persistentState.savedConnectionList = [
+                        setPersistentSavedConnectionList([
                             ...remote.persistentState.savedConnectionList,
                             newConnection,
-                        ];
+                        ]);
 
                         await updateSelectedConnection(newConnection);
                     }}
@@ -341,7 +344,7 @@ const RemoteSyncConfigurator: FC = () => {
                         const updatedConnections = [...remote.persistentState.savedConnectionList];
 
                         updatedConnections[findConnectionIndex(oldConnection)] = updatedConnection;
-                        remote.persistentState.savedConnectionList = updatedConnections;
+                        setPersistentSavedConnectionList(updatedConnections);
                         remote.persistentState.updateSavedRemoteFoldersConnection(oldConnection, updatedConnection);
 
                         await updateSelectedConnection(updatedConnection);
@@ -350,7 +353,7 @@ const RemoteSyncConfigurator: FC = () => {
                         const updatedConnections = [...remote.persistentState.savedConnectionList];
 
                         updatedConnections.splice(findConnectionIndex(connection), 1);
-                        remote.persistentState.savedConnectionList = updatedConnections;
+                        setPersistentSavedConnectionList(updatedConnections);
                         remote.persistentState.deleteSavedReportFolders(connection);
                         remote.persistentState.deleteSavedPerformanceFolders(connection);
 

src/functions/normalisePerformanceData.ts

@@ -39,6 +39,7 @@ const PLACEHOLDER: TypedPerfTableRow = {
     layout: null,
     hash: null,
     cache_hit: null,
+    isFirstHashOccurrence: false,
 };
 
 export interface NormalisedPerfData {

src/hooks/useRemote.tsx

@@ -178,6 +178,14 @@ const useRemoteConnection = () => {
         },
     };
 
+    const setPersistentSelectedConnection = (connection: RemoteConnection | undefined) => {
+        setAppConfig(LOCAL_STORAGE_KEY_SELECTED, safeJsonStringify(connection ?? null));
+    };
+
+    const setPersistentSavedConnectionList = (connectionList: RemoteConnection[]) => {
+        setAppConfig(LOCAL_STORAGE_KEY_CONNECTIONS, safeJsonStringify(connectionList, '[]'));
+    };
+
     const isSourceFileAvailable = useCallback(async (filePath: string, signal?: AbortSignal): Promise<boolean> => {
         try {
             const { data } = await axiosInstance.get<{ available?: boolean }>(`${Endpoints.REMOTE}/stack-trace/test`, {
@@ -233,6 +241,8 @@ const useRemoteConnection = () => {
         listPerformanceReports,
         mountRemoteFolder,
         persistentState,
+        setPersistentSelectedConnection,
+        setPersistentSavedConnectionList,
         readRemoteFile,
         isSourceFileAvailable,
     };

tsconfig.json

@@ -43,10 +43,5 @@
         "vitest.setup.ts",
         "src/**/*",
         "tests/**/*"
-    ],
-    "references": [
-        {
-            "path": "./tsconfig.node.json"
-        }
     ]
 }