From 14baa58cb7b8fabdea4b89061f4dfc78dc9fb655 Mon Sep 17 00:00:00 2001 From: David Blundell Date: Thu, 14 May 2026 12:45:59 -0400 Subject: [PATCH 1/4] Upgrade TS --- package.json | 4 +- pnpm-lock.yaml | 240 ++++++++++++++++++++++++------------------------- tsconfig.json | 5 -- 3 files changed, 122 insertions(+), 127 deletions(-) diff --git a/package.json b/package.json index 472a42ca8..a4a35e142 100644 --- a/package.json +++ b/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" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index da3a71aad..e26f95c3c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -122,10 +122,10 @@ importers: version: 1.4.6 '@typescript-eslint/eslint-plugin': specifier: ^8.59.3 - version: 8.59.3(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.2.2))(eslint@10.3.0)(typescript@5.2.2) + version: 8.59.3(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.8.3))(eslint@10.3.0)(typescript@5.8.3) '@typescript-eslint/parser': specifier: ^8.59.3 - version: 8.59.3(eslint@10.3.0)(typescript@5.2.2) + version: 8.59.3(eslint@10.3.0)(typescript@5.8.3) '@vitejs/plugin-react': specifier: ^6.0.1 version: 6.0.1(vite@8.0.12(@types/node@25.7.0)(sass@1.99.0)(yaml@2.9.0)) @@ -140,7 +140,7 @@ importers: version: 15.0.0(eslint-plugin-import@2.32.0)(eslint@10.3.0) eslint-config-erb: specifier: ^4.1.0 - version: 4.1.0(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0)(jest@30.3.0(@types/node@25.7.0))(prettier@3.8.1)(react@18.3.1)(typescript@5.2.2) + version: 4.1.0(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0)(jest@30.3.0(@types/node@25.7.0))(prettier@3.8.1)(react@18.3.1)(typescript@5.8.3) eslint-config-prettier: specifier: ^10.1.8 version: 10.1.8(eslint@10.3.0) @@ -155,7 +155,7 @@ importers: version: 7.0.2(eslint@10.3.0) eslint-plugin-import: specifier: ^2.32.0 - version: 2.32.0(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.2.2))(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0) + version: 2.32.0(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0) eslint-plugin-jsx-a11y: specifier: ^6.10.2 version: 6.10.2(eslint@10.3.0) @@ -176,7 +176,7 @@ importers: version: 0.5.2(eslint@10.3.0) eslint-plugin-unused-imports: specifier: ^4.4.1 - version: 4.4.1(@typescript-eslint/eslint-plugin@8.59.3(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.2.2))(eslint@10.3.0)(typescript@5.2.2))(eslint@10.3.0) + version: 4.4.1(@typescript-eslint/eslint-plugin@8.59.3(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.8.3))(eslint@10.3.0)(typescript@5.8.3))(eslint@10.3.0) globals: specifier: ^17.6.0 version: 17.6.0 @@ -212,19 +212,19 @@ importers: version: 1.99.0 stylelint: specifier: ^16.26.1 - version: 16.26.1(typescript@5.2.2) + version: 16.26.1(typescript@5.8.3) stylelint-config-standard-scss: specifier: ^13.1.0 - version: 13.1.0(postcss@8.5.14)(stylelint@16.26.1(typescript@5.2.2)) + version: 13.1.0(postcss@8.5.14)(stylelint@16.26.1(typescript@5.8.3)) stylelint-prettier: specifier: ^5.0.3 - version: 5.0.3(prettier@3.8.1)(stylelint@16.26.1(typescript@5.2.2)) + version: 5.0.3(prettier@3.8.1)(stylelint@16.26.1(typescript@5.8.3)) svgo: specifier: ^3.3.3 version: 3.3.3 typescript: - specifier: ~5.2.2 - version: 5.2.2 + specifier: ~5.8.3 + version: 5.8.3 vite: specifier: ^8.0.12 version: 8.0.12(@types/node@25.7.0)(sass@1.99.0)(yaml@2.9.0) @@ -5225,8 +5225,8 @@ packages: typedarray@0.0.6: resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==} - typescript@5.2.2: - resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==} + typescript@5.8.3: + resolution: {integrity: sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==} engines: {node: '>=14.17'} hasBin: true @@ -6826,13 +6826,13 @@ snapshots: dependencies: '@types/yargs-parser': 21.0.3 - '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.2.2))(eslint@10.3.0)(typescript@5.2.2)': + '@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.8.3))(eslint@10.3.0)(typescript@5.8.3)': dependencies: '@eslint-community/regexpp': 4.12.2 - '@typescript-eslint/parser': 6.21.0(eslint@10.3.0)(typescript@5.2.2) + '@typescript-eslint/parser': 6.21.0(eslint@10.3.0)(typescript@5.8.3) '@typescript-eslint/scope-manager': 6.21.0 - '@typescript-eslint/type-utils': 6.21.0(eslint@10.3.0)(typescript@5.2.2) - '@typescript-eslint/utils': 6.21.0(eslint@10.3.0)(typescript@5.2.2) + '@typescript-eslint/type-utils': 6.21.0(eslint@10.3.0)(typescript@5.8.3) + '@typescript-eslint/utils': 6.21.0(eslint@10.3.0)(typescript@5.8.3) '@typescript-eslint/visitor-keys': 6.21.0 debug: 4.4.3 eslint: 10.3.0 @@ -6840,59 +6840,59 @@ snapshots: ignore: 5.3.2 natural-compare: 1.4.0 semver: 7.8.0 - ts-api-utils: 1.4.3(typescript@5.2.2) + ts-api-utils: 1.4.3(typescript@5.8.3) optionalDependencies: - typescript: 5.2.2 + typescript: 5.8.3 transitivePeerDependencies: - supports-color - '@typescript-eslint/eslint-plugin@8.59.3(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.2.2))(eslint@10.3.0)(typescript@5.2.2)': + '@typescript-eslint/eslint-plugin@8.59.3(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.8.3))(eslint@10.3.0)(typescript@5.8.3)': dependencies: '@eslint-community/regexpp': 4.12.2 - '@typescript-eslint/parser': 8.59.3(eslint@10.3.0)(typescript@5.2.2) + '@typescript-eslint/parser': 8.59.3(eslint@10.3.0)(typescript@5.8.3) '@typescript-eslint/scope-manager': 8.59.3 - '@typescript-eslint/type-utils': 8.59.3(eslint@10.3.0)(typescript@5.2.2) - '@typescript-eslint/utils': 8.59.3(eslint@10.3.0)(typescript@5.2.2) + '@typescript-eslint/type-utils': 8.59.3(eslint@10.3.0)(typescript@5.8.3) + '@typescript-eslint/utils': 8.59.3(eslint@10.3.0)(typescript@5.8.3) '@typescript-eslint/visitor-keys': 8.59.3 eslint: 10.3.0 ignore: 7.0.5 natural-compare: 1.4.0 - ts-api-utils: 2.5.0(typescript@5.2.2) - typescript: 5.2.2 + ts-api-utils: 2.5.0(typescript@5.8.3) + typescript: 5.8.3 transitivePeerDependencies: - supports-color - '@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.2.2)': + '@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.8.3)': dependencies: '@typescript-eslint/scope-manager': 6.21.0 '@typescript-eslint/types': 6.21.0 - '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.2.2) + '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.8.3) '@typescript-eslint/visitor-keys': 6.21.0 debug: 4.4.3 eslint: 10.3.0 optionalDependencies: - typescript: 5.2.2 + typescript: 5.8.3 transitivePeerDependencies: - supports-color - '@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.2.2)': + '@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.8.3)': dependencies: '@typescript-eslint/scope-manager': 8.59.3 '@typescript-eslint/types': 8.59.3 - '@typescript-eslint/typescript-estree': 8.59.3(typescript@5.2.2) + '@typescript-eslint/typescript-estree': 8.59.3(typescript@5.8.3) '@typescript-eslint/visitor-keys': 8.59.3 debug: 4.4.3 eslint: 10.3.0 - typescript: 5.2.2 + typescript: 5.8.3 transitivePeerDependencies: - supports-color - '@typescript-eslint/project-service@8.59.3(typescript@5.2.2)': + '@typescript-eslint/project-service@8.59.3(typescript@5.8.3)': dependencies: - '@typescript-eslint/tsconfig-utils': 8.59.3(typescript@5.2.2) + '@typescript-eslint/tsconfig-utils': 8.59.3(typescript@5.8.3) '@typescript-eslint/types': 8.59.3 debug: 4.4.3 - typescript: 5.2.2 + typescript: 5.8.3 transitivePeerDependencies: - supports-color @@ -6911,31 +6911,31 @@ snapshots: '@typescript-eslint/types': 8.59.3 '@typescript-eslint/visitor-keys': 8.59.3 - '@typescript-eslint/tsconfig-utils@8.59.3(typescript@5.2.2)': + '@typescript-eslint/tsconfig-utils@8.59.3(typescript@5.8.3)': dependencies: - typescript: 5.2.2 + typescript: 5.8.3 - '@typescript-eslint/type-utils@6.21.0(eslint@10.3.0)(typescript@5.2.2)': + '@typescript-eslint/type-utils@6.21.0(eslint@10.3.0)(typescript@5.8.3)': dependencies: - '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.2.2) - '@typescript-eslint/utils': 6.21.0(eslint@10.3.0)(typescript@5.2.2) + '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.8.3) + '@typescript-eslint/utils': 6.21.0(eslint@10.3.0)(typescript@5.8.3) debug: 4.4.3 eslint: 10.3.0 - ts-api-utils: 1.4.3(typescript@5.2.2) + ts-api-utils: 1.4.3(typescript@5.8.3) optionalDependencies: - typescript: 5.2.2 + typescript: 5.8.3 transitivePeerDependencies: - supports-color - '@typescript-eslint/type-utils@8.59.3(eslint@10.3.0)(typescript@5.2.2)': + '@typescript-eslint/type-utils@8.59.3(eslint@10.3.0)(typescript@5.8.3)': dependencies: '@typescript-eslint/types': 8.59.3 - '@typescript-eslint/typescript-estree': 8.59.3(typescript@5.2.2) - '@typescript-eslint/utils': 8.59.3(eslint@10.3.0)(typescript@5.2.2) + '@typescript-eslint/typescript-estree': 8.59.3(typescript@5.8.3) + '@typescript-eslint/utils': 8.59.3(eslint@10.3.0)(typescript@5.8.3) debug: 4.4.3 eslint: 10.3.0 - ts-api-utils: 2.5.0(typescript@5.2.2) - typescript: 5.2.2 + ts-api-utils: 2.5.0(typescript@5.8.3) + typescript: 5.8.3 transitivePeerDependencies: - supports-color @@ -6945,7 +6945,7 @@ snapshots: '@typescript-eslint/types@8.59.3': {} - '@typescript-eslint/typescript-estree@5.62.0(typescript@5.2.2)': + '@typescript-eslint/typescript-estree@5.62.0(typescript@5.8.3)': dependencies: '@typescript-eslint/types': 5.62.0 '@typescript-eslint/visitor-keys': 5.62.0 @@ -6953,13 +6953,13 @@ snapshots: globby: 11.1.0 is-glob: 4.0.3 semver: 7.8.0 - tsutils: 3.21.0(typescript@5.2.2) + tsutils: 3.21.0(typescript@5.8.3) optionalDependencies: - typescript: 5.2.2 + typescript: 5.8.3 transitivePeerDependencies: - supports-color - '@typescript-eslint/typescript-estree@6.21.0(typescript@5.2.2)': + '@typescript-eslint/typescript-estree@6.21.0(typescript@5.8.3)': dependencies: '@typescript-eslint/types': 6.21.0 '@typescript-eslint/visitor-keys': 6.21.0 @@ -6968,35 +6968,35 @@ snapshots: is-glob: 4.0.3 minimatch: 9.0.3 semver: 7.8.0 - ts-api-utils: 1.4.3(typescript@5.2.2) + ts-api-utils: 1.4.3(typescript@5.8.3) optionalDependencies: - typescript: 5.2.2 + typescript: 5.8.3 transitivePeerDependencies: - supports-color - '@typescript-eslint/typescript-estree@8.59.3(typescript@5.2.2)': + '@typescript-eslint/typescript-estree@8.59.3(typescript@5.8.3)': dependencies: - '@typescript-eslint/project-service': 8.59.3(typescript@5.2.2) - '@typescript-eslint/tsconfig-utils': 8.59.3(typescript@5.2.2) + '@typescript-eslint/project-service': 8.59.3(typescript@5.8.3) + '@typescript-eslint/tsconfig-utils': 8.59.3(typescript@5.8.3) '@typescript-eslint/types': 8.59.3 '@typescript-eslint/visitor-keys': 8.59.3 debug: 4.4.3 minimatch: 10.2.5 semver: 7.8.0 tinyglobby: 0.2.16 - ts-api-utils: 2.5.0(typescript@5.2.2) - typescript: 5.2.2 + ts-api-utils: 2.5.0(typescript@5.8.3) + typescript: 5.8.3 transitivePeerDependencies: - supports-color - '@typescript-eslint/utils@5.62.0(eslint@10.3.0)(typescript@5.2.2)': + '@typescript-eslint/utils@5.62.0(eslint@10.3.0)(typescript@5.8.3)': dependencies: '@eslint-community/eslint-utils': 4.9.1(eslint@10.3.0) '@types/json-schema': 7.0.15 '@types/semver': 7.7.1 '@typescript-eslint/scope-manager': 5.62.0 '@typescript-eslint/types': 5.62.0 - '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.2.2) + '@typescript-eslint/typescript-estree': 5.62.0(typescript@5.8.3) eslint: 10.3.0 eslint-scope: 5.1.1 semver: 7.8.0 @@ -7004,28 +7004,28 @@ snapshots: - supports-color - typescript - '@typescript-eslint/utils@6.21.0(eslint@10.3.0)(typescript@5.2.2)': + '@typescript-eslint/utils@6.21.0(eslint@10.3.0)(typescript@5.8.3)': dependencies: '@eslint-community/eslint-utils': 4.9.1(eslint@10.3.0) '@types/json-schema': 7.0.15 '@types/semver': 7.7.1 '@typescript-eslint/scope-manager': 6.21.0 '@typescript-eslint/types': 6.21.0 - '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.2.2) + '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.8.3) eslint: 10.3.0 semver: 7.8.0 transitivePeerDependencies: - supports-color - typescript - '@typescript-eslint/utils@8.59.3(eslint@10.3.0)(typescript@5.2.2)': + '@typescript-eslint/utils@8.59.3(eslint@10.3.0)(typescript@5.8.3)': dependencies: '@eslint-community/eslint-utils': 4.9.1(eslint@10.3.0) '@typescript-eslint/scope-manager': 8.59.3 '@typescript-eslint/types': 8.59.3 - '@typescript-eslint/typescript-estree': 8.59.3(typescript@5.2.2) + '@typescript-eslint/typescript-estree': 8.59.3(typescript@5.8.3) eslint: 10.3.0 - typescript: 5.2.2 + typescript: 5.8.3 transitivePeerDependencies: - supports-color @@ -7698,14 +7698,14 @@ snapshots: core-util-is@1.0.3: {} - cosmiconfig@9.0.1(typescript@5.2.2): + cosmiconfig@9.0.1(typescript@5.8.3): dependencies: env-paths: 2.2.1 import-fresh: 3.3.1 js-yaml: 4.1.1 parse-json: 5.2.0 optionalDependencies: - typescript: 5.2.2 + typescript: 5.8.3 cosmiconfig@9.0.1(typescript@5.9.3): dependencies: @@ -8253,41 +8253,41 @@ snapshots: dependencies: confusing-browser-globals: 1.0.11 eslint: 10.3.0 - eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.2.2))(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0) + eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0) object.assign: 4.1.7 object.entries: 1.1.9 semver: 6.3.1 - eslint-config-airbnb-typescript@17.1.0(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.2.2))(eslint@10.3.0)(typescript@5.2.2))(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.2.2))(eslint-plugin-import@2.32.0)(eslint@10.3.0): + eslint-config-airbnb-typescript@17.1.0(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.8.3))(eslint@10.3.0)(typescript@5.8.3))(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.8.3))(eslint-plugin-import@2.32.0)(eslint@10.3.0): dependencies: - '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.2.2))(eslint@10.3.0)(typescript@5.2.2) - '@typescript-eslint/parser': 6.21.0(eslint@10.3.0)(typescript@5.2.2) + '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.8.3))(eslint@10.3.0)(typescript@5.8.3) + '@typescript-eslint/parser': 6.21.0(eslint@10.3.0)(typescript@5.8.3) eslint: 10.3.0 eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.32.0)(eslint@10.3.0) - eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.2.2))(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0) + eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0) eslint-config-airbnb@19.0.4(eslint-plugin-import@2.32.0)(eslint-plugin-jsx-a11y@6.7.1(eslint@10.3.0))(eslint-plugin-react-hooks@4.6.2(eslint@10.3.0))(eslint-plugin-react@7.37.5(eslint@10.3.0))(eslint@10.3.0): dependencies: eslint: 10.3.0 eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.32.0)(eslint@10.3.0) - eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.2.2))(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0) + eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0) eslint-plugin-jsx-a11y: 6.7.1(eslint@10.3.0) eslint-plugin-react: 7.37.5(eslint@10.3.0) eslint-plugin-react-hooks: 4.6.2(eslint@10.3.0) object.assign: 4.1.7 object.entries: 1.1.9 - eslint-config-erb@4.1.0(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0)(jest@30.3.0(@types/node@25.7.0))(prettier@3.8.1)(react@18.3.1)(typescript@5.2.2): + eslint-config-erb@4.1.0(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0)(jest@30.3.0(@types/node@25.7.0))(prettier@3.8.1)(react@18.3.1)(typescript@5.8.3): dependencies: - '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.2.2))(eslint@10.3.0)(typescript@5.2.2) - '@typescript-eslint/parser': 6.21.0(eslint@10.3.0)(typescript@5.2.2) + '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.8.3))(eslint@10.3.0)(typescript@5.8.3) + '@typescript-eslint/parser': 6.21.0(eslint@10.3.0)(typescript@5.8.3) eslint: 10.3.0 eslint-config-airbnb: 19.0.4(eslint-plugin-import@2.32.0)(eslint-plugin-jsx-a11y@6.7.1(eslint@10.3.0))(eslint-plugin-react-hooks@4.6.2(eslint@10.3.0))(eslint-plugin-react@7.37.5(eslint@10.3.0))(eslint@10.3.0) - eslint-config-airbnb-typescript: 17.1.0(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.2.2))(eslint@10.3.0)(typescript@5.2.2))(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.2.2))(eslint-plugin-import@2.32.0)(eslint@10.3.0) + eslint-config-airbnb-typescript: 17.1.0(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.8.3))(eslint@10.3.0)(typescript@5.8.3))(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.8.3))(eslint-plugin-import@2.32.0)(eslint@10.3.0) eslint-config-prettier: 9.1.2(eslint@10.3.0) eslint-plugin-compat: 4.2.0(eslint@10.3.0) - eslint-plugin-import: 2.32.0(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.2.2))(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0) - eslint-plugin-jest: 27.9.0(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.2.2))(eslint@10.3.0)(typescript@5.2.2))(eslint@10.3.0)(jest@30.3.0(@types/node@25.7.0))(typescript@5.2.2) + eslint-plugin-import: 2.32.0(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0) + eslint-plugin-jest: 27.9.0(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.8.3))(eslint@10.3.0)(typescript@5.8.3))(eslint@10.3.0)(jest@30.3.0(@types/node@25.7.0))(typescript@5.8.3) eslint-plugin-jsx-a11y: 6.7.1(eslint@10.3.0) eslint-plugin-prettier: 5.5.5(eslint-config-prettier@9.1.2(eslint@10.3.0))(eslint@10.3.0)(prettier@3.8.1) eslint-plugin-promise: 6.6.0(eslint@10.3.0) @@ -8327,7 +8327,7 @@ snapshots: eslint-import-resolver-alias@1.1.2(eslint-plugin-import@2.32.0): dependencies: - eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.2.2))(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0) + eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0) eslint-import-resolver-node@0.3.10: dependencies: @@ -8348,26 +8348,26 @@ snapshots: tinyglobby: 0.2.16 unrs-resolver: 1.11.1 optionalDependencies: - eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.2.2))(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0) + eslint-plugin-import: 2.32.0(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0) transitivePeerDependencies: - supports-color - eslint-module-utils@2.12.1(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.10)(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0): + eslint-module-utils@2.12.1(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.10)(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0): dependencies: debug: 3.2.7 optionalDependencies: - '@typescript-eslint/parser': 6.21.0(eslint@10.3.0)(typescript@5.2.2) + '@typescript-eslint/parser': 6.21.0(eslint@10.3.0)(typescript@5.8.3) eslint: 10.3.0 eslint-import-resolver-node: 0.3.10 eslint-import-resolver-typescript: 4.4.4(eslint-plugin-import@2.32.0)(eslint@10.3.0) transitivePeerDependencies: - supports-color - eslint-module-utils@2.12.1(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.10)(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0): + eslint-module-utils@2.12.1(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.10)(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0): dependencies: debug: 3.2.7 optionalDependencies: - '@typescript-eslint/parser': 8.59.3(eslint@10.3.0)(typescript@5.2.2) + '@typescript-eslint/parser': 8.59.3(eslint@10.3.0)(typescript@5.8.3) eslint: 10.3.0 eslint-import-resolver-node: 0.3.10 eslint-import-resolver-typescript: 4.4.4(eslint-plugin-import@2.32.0)(eslint@10.3.0) @@ -8396,7 +8396,7 @@ snapshots: lodash.memoize: 4.1.2 semver: 7.8.0 - eslint-plugin-import@2.32.0(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.2.2))(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0): + eslint-plugin-import@2.32.0(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.9 @@ -8407,7 +8407,7 @@ snapshots: doctrine: 2.1.0 eslint: 10.3.0 eslint-import-resolver-node: 0.3.10 - eslint-module-utils: 2.12.1(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.10)(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0) + eslint-module-utils: 2.12.1(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.10)(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0) hasown: 2.0.3 is-core-module: 2.16.2 is-glob: 4.0.3 @@ -8419,13 +8419,13 @@ snapshots: string.prototype.trimend: 1.0.9 tsconfig-paths: 3.15.0 optionalDependencies: - '@typescript-eslint/parser': 6.21.0(eslint@10.3.0)(typescript@5.2.2) + '@typescript-eslint/parser': 6.21.0(eslint@10.3.0)(typescript@5.8.3) transitivePeerDependencies: - eslint-import-resolver-typescript - eslint-import-resolver-webpack - supports-color - eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.2.2))(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0): + eslint-plugin-import@2.32.0(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.8.3))(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0): dependencies: '@rtsao/scc': 1.1.0 array-includes: 3.1.9 @@ -8436,7 +8436,7 @@ snapshots: doctrine: 2.1.0 eslint: 10.3.0 eslint-import-resolver-node: 0.3.10 - eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.2.2))(eslint-import-resolver-node@0.3.10)(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0) + eslint-module-utils: 2.12.1(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.8.3))(eslint-import-resolver-node@0.3.10)(eslint-import-resolver-typescript@4.4.4)(eslint@10.3.0) hasown: 2.0.3 is-core-module: 2.16.2 is-glob: 4.0.3 @@ -8448,18 +8448,18 @@ snapshots: string.prototype.trimend: 1.0.9 tsconfig-paths: 3.15.0 optionalDependencies: - '@typescript-eslint/parser': 8.59.3(eslint@10.3.0)(typescript@5.2.2) + '@typescript-eslint/parser': 8.59.3(eslint@10.3.0)(typescript@5.8.3) transitivePeerDependencies: - eslint-import-resolver-typescript - eslint-import-resolver-webpack - supports-color - eslint-plugin-jest@27.9.0(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.2.2))(eslint@10.3.0)(typescript@5.2.2))(eslint@10.3.0)(jest@30.3.0(@types/node@25.7.0))(typescript@5.2.2): + eslint-plugin-jest@27.9.0(@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.8.3))(eslint@10.3.0)(typescript@5.8.3))(eslint@10.3.0)(jest@30.3.0(@types/node@25.7.0))(typescript@5.8.3): dependencies: - '@typescript-eslint/utils': 5.62.0(eslint@10.3.0)(typescript@5.2.2) + '@typescript-eslint/utils': 5.62.0(eslint@10.3.0)(typescript@5.8.3) eslint: 10.3.0 optionalDependencies: - '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.2.2))(eslint@10.3.0)(typescript@5.2.2) + '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0(eslint@10.3.0)(typescript@5.8.3))(eslint@10.3.0)(typescript@5.8.3) jest: 30.3.0(@types/node@25.7.0) transitivePeerDependencies: - supports-color @@ -8572,11 +8572,11 @@ snapshots: string.prototype.matchall: 4.0.12 string.prototype.repeat: 1.0.0 - eslint-plugin-unused-imports@4.4.1(@typescript-eslint/eslint-plugin@8.59.3(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.2.2))(eslint@10.3.0)(typescript@5.2.2))(eslint@10.3.0): + eslint-plugin-unused-imports@4.4.1(@typescript-eslint/eslint-plugin@8.59.3(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.8.3))(eslint@10.3.0)(typescript@5.8.3))(eslint@10.3.0): dependencies: eslint: 10.3.0 optionalDependencies: - '@typescript-eslint/eslint-plugin': 8.59.3(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.2.2))(eslint@10.3.0)(typescript@5.2.2) + '@typescript-eslint/eslint-plugin': 8.59.3(@typescript-eslint/parser@8.59.3(eslint@10.3.0)(typescript@5.8.3))(eslint@10.3.0)(typescript@5.8.3) eslint-scope@5.1.1: dependencies: @@ -11228,43 +11228,43 @@ snapshots: strongly-connected-components@1.0.1: {} - stylelint-config-recommended-scss@14.1.0(postcss@8.5.14)(stylelint@16.26.1(typescript@5.2.2)): + stylelint-config-recommended-scss@14.1.0(postcss@8.5.14)(stylelint@16.26.1(typescript@5.8.3)): dependencies: postcss-scss: 4.0.9(postcss@8.5.14) - stylelint: 16.26.1(typescript@5.2.2) - stylelint-config-recommended: 14.0.1(stylelint@16.26.1(typescript@5.2.2)) - stylelint-scss: 6.14.0(stylelint@16.26.1(typescript@5.2.2)) + stylelint: 16.26.1(typescript@5.8.3) + stylelint-config-recommended: 14.0.1(stylelint@16.26.1(typescript@5.8.3)) + stylelint-scss: 6.14.0(stylelint@16.26.1(typescript@5.8.3)) optionalDependencies: postcss: 8.5.14 - stylelint-config-recommended@14.0.1(stylelint@16.26.1(typescript@5.2.2)): + stylelint-config-recommended@14.0.1(stylelint@16.26.1(typescript@5.8.3)): dependencies: - stylelint: 16.26.1(typescript@5.2.2) + stylelint: 16.26.1(typescript@5.8.3) - stylelint-config-standard-scss@13.1.0(postcss@8.5.14)(stylelint@16.26.1(typescript@5.2.2)): + stylelint-config-standard-scss@13.1.0(postcss@8.5.14)(stylelint@16.26.1(typescript@5.8.3)): dependencies: - stylelint: 16.26.1(typescript@5.2.2) - stylelint-config-recommended-scss: 14.1.0(postcss@8.5.14)(stylelint@16.26.1(typescript@5.2.2)) - stylelint-config-standard: 36.0.1(stylelint@16.26.1(typescript@5.2.2)) + stylelint: 16.26.1(typescript@5.8.3) + stylelint-config-recommended-scss: 14.1.0(postcss@8.5.14)(stylelint@16.26.1(typescript@5.8.3)) + stylelint-config-standard: 36.0.1(stylelint@16.26.1(typescript@5.8.3)) optionalDependencies: postcss: 8.5.14 - stylelint-config-standard@36.0.1(stylelint@16.26.1(typescript@5.2.2)): + stylelint-config-standard@36.0.1(stylelint@16.26.1(typescript@5.8.3)): dependencies: - stylelint: 16.26.1(typescript@5.2.2) - stylelint-config-recommended: 14.0.1(stylelint@16.26.1(typescript@5.2.2)) + stylelint: 16.26.1(typescript@5.8.3) + stylelint-config-recommended: 14.0.1(stylelint@16.26.1(typescript@5.8.3)) stylelint-junit-formatter@0.2.2: dependencies: xmlbuilder: 13.0.2 - stylelint-prettier@5.0.3(prettier@3.8.1)(stylelint@16.26.1(typescript@5.2.2)): + stylelint-prettier@5.0.3(prettier@3.8.1)(stylelint@16.26.1(typescript@5.8.3)): dependencies: prettier: 3.8.1 prettier-linter-helpers: 1.0.1 - stylelint: 16.26.1(typescript@5.2.2) + stylelint: 16.26.1(typescript@5.8.3) - stylelint-scss@6.14.0(stylelint@16.26.1(typescript@5.2.2)): + stylelint-scss@6.14.0(stylelint@16.26.1(typescript@5.8.3)): dependencies: css-tree: 3.2.1 is-plain-object: 5.0.0 @@ -11274,7 +11274,7 @@ snapshots: postcss-resolve-nested-selector: 0.1.6 postcss-selector-parser: 7.1.1 postcss-value-parser: 4.2.0 - stylelint: 16.26.1(typescript@5.2.2) + stylelint: 16.26.1(typescript@5.8.3) stylelint@16.25.0(typescript@5.9.3): dependencies: @@ -11320,7 +11320,7 @@ snapshots: - supports-color - typescript - stylelint@16.26.1(typescript@5.2.2): + stylelint@16.26.1(typescript@5.8.3): dependencies: '@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4) '@csstools/css-syntax-patches-for-csstree': 1.1.3(css-tree@3.2.1) @@ -11330,7 +11330,7 @@ snapshots: '@dual-bundle/import-meta-resolve': 4.2.1 balanced-match: 2.0.0 colord: 2.9.3 - cosmiconfig: 9.0.1(typescript@5.2.2) + cosmiconfig: 9.0.1(typescript@5.8.3) css-functions-list: 3.3.3 css-tree: 3.2.1 debug: 4.4.3 @@ -11520,13 +11520,13 @@ snapshots: dependencies: punycode: 2.3.1 - ts-api-utils@1.4.3(typescript@5.2.2): + ts-api-utils@1.4.3(typescript@5.8.3): dependencies: - typescript: 5.2.2 + typescript: 5.8.3 - ts-api-utils@2.5.0(typescript@5.2.2): + ts-api-utils@2.5.0(typescript@5.8.3): dependencies: - typescript: 5.2.2 + typescript: 5.8.3 tsconfig-paths@3.15.0: dependencies: @@ -11541,10 +11541,10 @@ snapshots: tslib@2.8.1: {} - tsutils@3.21.0(typescript@5.2.2): + tsutils@3.21.0(typescript@5.8.3): dependencies: tslib: 1.14.1 - typescript: 5.2.2 + typescript: 5.8.3 type-check@0.4.0: dependencies: @@ -11596,7 +11596,7 @@ snapshots: typedarray@0.0.6: {} - typescript@5.2.2: {} + typescript@5.8.3: {} typescript@5.9.3: {} diff --git a/tsconfig.json b/tsconfig.json index 92b9cdd23..50be4e319 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -43,10 +43,5 @@ "vitest.setup.ts", "src/**/*", "tests/**/*" - ], - "references": [ - { - "path": "./tsconfig.node.json" - } ] } From 4f3d554002c4eea2aa3f88353e8148c697f049b3 Mon Sep 17 00:00:00 2001 From: David Blundell Date: Thu, 14 May 2026 12:58:50 -0400 Subject: [PATCH 2/4] Fix lint issues --- src/components/Collapsible.tsx | 11 ++- src/components/OperationGraphComponent.tsx | 37 +++---- src/components/OperationList.tsx | 3 + src/components/RangeSlider.tsx | 8 +- src/components/TensorList.tsx | 3 + src/components/mlir/MlirJsonFileLoader.tsx | 2 + src/components/npe/NPETimelineComponent.tsx | 34 ++++--- src/components/npe/NPEViewComponent.tsx | 98 ++++++++++--------- .../operation-details/StackTrace.tsx | 27 ++--- .../RemoteSyncConfigurator.tsx | 37 +++---- src/functions/normalisePerformanceData.ts | 1 + src/hooks/useRemote.tsx | 10 ++ 12 files changed, 150 insertions(+), 121 deletions(-) diff --git a/src/components/Collapsible.tsx b/src/components/Collapsible.tsx index 642089efd..638cd7d9c 100644 --- a/src/components/Collapsible.tsx +++ b/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> = ({ 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 (
diff --git a/src/components/OperationGraphComponent.tsx b/src/components/OperationGraphComponent.tsx index 4551d9f2c..efd3b4940 100644 --- a/src/components/OperationGraphComponent.tsx +++ b/src/components/OperationGraphComponent.tsx @@ -109,17 +109,17 @@ const OperationGraph: React.FC<{ focusNodeId = operationId ?? operationList[0]?.id ?? 0; } - useEffect(() => { - if (connectedNodeIds.size === 0) { - return; - } - if (currentOperationId !== null && !connectedNodeIds.has(currentOperationId)) { + const connectedIdsKey = useMemo(() => [...connectedNodeIds].sort((a, b) => a - b).join(','), [connectedNodeIds]); + const [prevConnectedIdsKey, setPrevConnectedIdsKey] = useState(''); + if (connectedIdsKey !== prevConnectedIdsKey) { + setPrevConnectedIdsKey(connectedIdsKey); + if (connectedNodeIds.size > 0 && currentOperationId !== null && !connectedNodeIds.has(currentOperationId)) { const fallbackId = connectedNodeIds.values().next().value; - if (fallbackId !== undefined && fallbackId !== currentOperationId) { - setCurrentOperationId(fallbackId); + if (fallbackId !== undefined) { + setCurrentOperationId(fallbackId as number); } } - }, [connectedNodeIds, currentOperationId]); + } const nodes = useMemo( () => @@ -148,14 +148,6 @@ const OperationGraph: React.FC<{ ds.add(edges); }, [edges]); - const data = useMemo( - () => ({ - nodes, - edges: edgesDataSetRef.current, - }), - [nodes], - ); - const colorHighlightIO = useCallback( (selectedNodeId: IdType) => { const allNodes = nodes.get(); @@ -433,13 +425,15 @@ const OperationGraph: React.FC<{ }; useEffect(() => { - setIsLoading(true); + queueMicrotask(() => { + setIsLoading(true); + }); - // allow the ui to render loading state before initializing the graph - setTimeout(() => { + const loadTimeoutId = window.setTimeout(() => { if (containerRef.current) { requestAnimationFrame(() => { - networkRef.current = new Network(containerRef.current!, data, { + const graphData = { nodes, edges: edgesDataSetRef.current }; + networkRef.current = new Network(containerRef.current!, graphData, { nodes: { font: { color: '#202020' }, color: { @@ -531,6 +525,7 @@ const OperationGraph: React.FC<{ }); return () => { + window.clearTimeout(loadTimeoutId); if (blinkIntervalRef.current !== null) { window.clearInterval(blinkIntervalRef.current); blinkIntervalRef.current = null; @@ -547,7 +542,7 @@ const OperationGraph: React.FC<{ networkRef.current = null; }; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [edges, nodes, data, compactView]); + }, [edges, nodes, compactView]); const getNextOperationId = (currentId: number | null) => { if (nodes === null || currentId === null) { diff --git a/src/components/OperationList.tsx b/src/components/OperationList.tsx index c8d264c25..c5cd764ba 100644 --- a/src/components/OperationList.tsx +++ b/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, diff --git a/src/components/RangeSlider.tsx b/src/components/RangeSlider.tsx index cc4bf2cf1..bf84ef586 100644 --- a/src/components/RangeSlider.tsx +++ b/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]); diff --git a/src/components/TensorList.tsx b/src/components/TensorList.tsx index 329825eea..ac49ffa5f 100644 --- a/src/components/TensorList.tsx +++ b/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, diff --git a/src/components/mlir/MlirJsonFileLoader.tsx b/src/components/mlir/MlirJsonFileLoader.tsx index 96d1d8bf0..7bb401903 100644 --- a/src/components/mlir/MlirJsonFileLoader.tsx +++ b/src/components/mlir/MlirJsonFileLoader.tsx @@ -19,6 +19,7 @@ const ICON_MAP: Record = { [ConnectionTestStates.PROGRESS]: IconNames.DOT, [ConnectionTestStates.FAILED]: IconNames.CROSS, [ConnectionTestStates.OK]: IconNames.TICK, + [ConnectionTestStates.WARNING]: IconNames.WARNING_SIGN, }; const INTENT_MAP: Record = { @@ -26,6 +27,7 @@ const INTENT_MAP: Record = { [ConnectionTestStates.PROGRESS]: Intent.WARNING, [ConnectionTestStates.FAILED]: Intent.DANGER, [ConnectionTestStates.OK]: Intent.SUCCESS, + [ConnectionTestStates.WARNING]: Intent.WARNING, }; const MlirJsonFileLoader: React.FC = () => { diff --git a/src/components/npe/NPETimelineComponent.tsx b/src/components/npe/NPETimelineComponent.tsx index cb7e0e1ff..dd3e59d2b 100644 --- a/src/components/npe/NPETimelineComponent.tsx +++ b/src/components/npe/NPETimelineComponent.tsx @@ -77,23 +77,25 @@ const NPETimelineComponent: React.FC = ({ ); const zoneRanges = useMemo(() => { - let maxZoneDepth = 0; - let groupIndex = -1; + const range = selectedZoneList.flatMap((rootZone, groupIndex) => { + const childZones = rootZone.expandedState ? getZoneDrawingModel(rootZone.zones, 1) : []; + const maxDepth = childZones.length ? Math.max(...childZones.map((z) => z.depth)) : 0; + return rootZone.zones.map((zone) => ({ + groupIndex, + maxDepth, + proc: rootZone.proc, + start: zone.start / cyclesPerTimestep, + end: zone.end / cyclesPerTimestep, + zones: childZones, + })); + }); + const maxZoneDepth = selectedZoneList.reduce((sum, rootZone) => { + const childZones = rootZone.expandedState ? getZoneDrawingModel(rootZone.zones, 1) : []; + const maxDepth = childZones.length ? Math.max(...childZones.map((z) => z.depth)) : 0; + return sum + 1 + maxDepth; + }, 0); return { - range: selectedZoneList.flatMap((rootZone) => { - groupIndex += 1; - const childZones = rootZone.expandedState ? getZoneDrawingModel(rootZone.zones, 1) : []; - const maxDepth = childZones.length ? Math.max(...childZones.map((z) => z.depth)) : 0; - maxZoneDepth += 1 + maxDepth; - return rootZone.zones.map((zone) => ({ - groupIndex, - maxDepth, - proc: rootZone.proc, - start: zone.start / cyclesPerTimestep, - end: zone.end / cyclesPerTimestep, - zones: childZones, - })); - }), + range, maxZoneDepth, }; }, [selectedZoneList, cyclesPerTimestep, getZoneDrawingModel]); diff --git a/src/components/npe/NPEViewComponent.tsx b/src/components/npe/NPEViewComponent.tsx index 84d85b753..1e8a76b0f 100644 --- a/src/components/npe/NPEViewComponent.tsx +++ b/src/components/npe/NPEViewComponent.tsx @@ -114,11 +114,9 @@ const NPEView: React.FC = ({ npeData }) => { return npeData.noc_transfers.some((tr) => tr.fabric_event_type); }, [npeData]); - useEffect(() => { - if (!isFabricTransfersFilteringEnabled && fabricEventsFilter !== EVENT_TYPE_FILTER.ALL_EVENTS) { - setFabricEventsFilter(EVENT_TYPE_FILTER.ALL_EVENTS); - } - }, [fabricEventsFilter, isFabricTransfersFilteringEnabled]); + if (!isFabricTransfersFilteringEnabled && fabricEventsFilter !== EVENT_TYPE_FILTER.ALL_EVENTS) { + setFabricEventsFilter(EVENT_TYPE_FILTER.ALL_EVENTS); + } const selectedZoneList: NPERootZoneUXInfo[] = useMemo(() => { if (selectedZoneAddress === null) { @@ -141,7 +139,7 @@ const NPEView: React.FC = ({ npeData }) => { }, [expandedZoneMap, selectedZoneAddress, zones]); const links = useMemo(() => { - const timestepData = npeData.timestep_data[selectedTimestep]; + const timestepData = structuredClone(npeData.timestep_data[selectedTimestep]); timestepData.active_transfers.forEach((id) => { const transfer = npeData.noc_transfers.find((tr) => tr.id === id); // TODO: this functionality should MAYBE move to BE. https://github.com/orgs/tenstorrent/projects/178/views/1?pane=issue&itemId=124188622&issue=tenstorrent%7Cttnn-visualizer%7C745 @@ -194,6 +192,38 @@ const NPEView: React.FC = ({ npeData }) => { }); }, [npeData.noc_transfers, links?.active_transfers, fabricEventsFilter]); + function stopAnimation() { + setPlaybackSpeed(0); + return clearInterval(animationInterval as number); + } + + function startAnimation(speed: number = PLAYBACK_SPEED) { + setPlaybackSpeed(speed); + clearInterval(animationInterval as number); + const range = npeData.timestep_data.length; + + const interval = setInterval(() => { + setSelectedTimestep((prev) => { + return prev < range - 1 ? prev + 1 : 0; + }); + }, 100 / speed); + setAnimationInterval(Number(interval)); + } + + function hideAllTransfers() { + setIsShowingAllTransfers(false); + setSelectedTransferList([]); + } + + function showAllTransfers() { + setIsShowingAllTransfers(true); + setSelectedNode(null); + const activeTransfers = npeData.timestep_data[selectedTimestep].active_transfers + .map((transferId) => npeData.noc_transfers.find((tr) => tr.id === transferId)) + .filter((transfer): transfer is NoCTransfer => transfer !== undefined); + setSelectedTransferList(activeTransfers as NoCTransfer[]); + } + const showNOCType = (value: NoCType) => { if (nocFilter === null) { setNocFilter(value === NoCType.NOC0 ? NoCType.NOC1 : NoCType.NOC0); @@ -221,20 +251,24 @@ const NPEView: React.FC = ({ npeData }) => { }, [architecture.arch_name, npeData.common_info.arch]); useEffect(() => { - resetRouteColors(); - if (isShowingAllTransfers) { - showAllTransfers(); - } + queueMicrotask(() => { + resetRouteColors(); + if (isShowingAllTransfers) { + showAllTransfers(); + } + }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedTimestep, isShowingAllTransfers]); useEffect(() => { - stopAnimation(); - setSelectedTimestep(0); - setSelectedNode(null); - setSelectedTransferList([]); - setHighlightedTransfer(null); - setHighlightedRoute(null); + queueMicrotask(() => { + stopAnimation(); + setSelectedTimestep(0); + setSelectedNode(null); + setSelectedTransferList([]); + setHighlightedTransfer(null); + setHighlightedRoute(null); + }); // eslint-disable-next-line react-hooks/exhaustive-deps }, [npeData]); @@ -243,24 +277,6 @@ const NPEView: React.FC = ({ npeData }) => { selectedNode, ); - const startAnimation = (speed: number = PLAYBACK_SPEED) => { - setPlaybackSpeed(speed); - clearInterval(animationInterval as number); - const range = npeData.timestep_data.length; - - const interval = setInterval(() => { - setSelectedTimestep((prev) => { - return prev < range - 1 ? prev + 1 : 0; - }); - }, 100 / speed); - setAnimationInterval(Number(interval)); - }; - - const stopAnimation = () => { - setPlaybackSpeed(0); - return clearInterval(animationInterval as number); - }; - const onPlay = () => { startAnimation(); }; @@ -301,11 +317,6 @@ const NPEView: React.FC = ({ npeData }) => { setSelectedTransferList([]); }; - const hideAllTransfers = () => { - setIsShowingAllTransfers(false); - setSelectedTransferList([]); - }; - const showActiveTransfers = useShowActiveTransfers({ npeData, selectedNode, @@ -317,15 +328,6 @@ const NPEView: React.FC = ({ npeData }) => { setSelectedTransferList, }); - const showAllTransfers = () => { - setIsShowingAllTransfers(true); - setSelectedNode(null); - const activeTransfers = npeData.timestep_data[selectedTimestep].active_transfers - .map((transferId) => npeData.noc_transfers.find((tr) => tr.id === transferId)) - .filter((transfer): transfer is NoCTransfer => transfer !== undefined); - setSelectedTransferList(activeTransfers as NoCTransfer[]); - }; - const getOriginOpacity = (transfer: NoCFlowBase): number => { if (transfer.id === null || transfer.id === undefined) { return 1; diff --git a/src/components/operation-details/StackTrace.tsx b/src/components/operation-details/StackTrace.tsx index 17a948662..7601aa3ff 100644 --- a/src/components/operation-details/StackTrace.tsx +++ b/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); 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 { diff --git a/src/components/report-selection/RemoteSyncConfigurator.tsx b/src/components/report-selection/RemoteSyncConfigurator.tsx index c56981c6a..4c893d499 100644 --- a/src/components/report-selection/RemoteSyncConfigurator.tsx +++ b/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 = () => { { - 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); diff --git a/src/functions/normalisePerformanceData.ts b/src/functions/normalisePerformanceData.ts index bfad44534..69403d8b1 100644 --- a/src/functions/normalisePerformanceData.ts +++ b/src/functions/normalisePerformanceData.ts @@ -39,6 +39,7 @@ const PLACEHOLDER: TypedPerfTableRow = { layout: null, hash: null, cache_hit: null, + isFirstHashOccurrence: false, }; export interface NormalisedPerfData { diff --git a/src/hooks/useRemote.tsx b/src/hooks/useRemote.tsx index 3974b20ad..7b9beeaf0 100644 --- a/src/hooks/useRemote.tsx +++ b/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 => { 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, }; From 58341462296e3eb826cb1a63088644329db1c40b Mon Sep 17 00:00:00 2001 From: David Blundell Date: Thu, 14 May 2026 13:05:59 -0400 Subject: [PATCH 3/4] Reset files and add ignore flags to lint rules --- src/components/OperationGraphComponent.tsx | 40 +++++--- src/components/npe/NPETimelineComponent.tsx | 35 ++++--- src/components/npe/NPEViewComponent.tsx | 102 ++++++++++---------- 3 files changed, 93 insertions(+), 84 deletions(-) diff --git a/src/components/OperationGraphComponent.tsx b/src/components/OperationGraphComponent.tsx index efd3b4940..48a88f31f 100644 --- a/src/components/OperationGraphComponent.tsx +++ b/src/components/OperationGraphComponent.tsx @@ -109,17 +109,18 @@ const OperationGraph: React.FC<{ focusNodeId = operationId ?? operationList[0]?.id ?? 0; } - const connectedIdsKey = useMemo(() => [...connectedNodeIds].sort((a, b) => a - b).join(','), [connectedNodeIds]); - const [prevConnectedIdsKey, setPrevConnectedIdsKey] = useState(''); - if (connectedIdsKey !== prevConnectedIdsKey) { - setPrevConnectedIdsKey(connectedIdsKey); - if (connectedNodeIds.size > 0 && currentOperationId !== null && !connectedNodeIds.has(currentOperationId)) { + useEffect(() => { + if (connectedNodeIds.size === 0) { + return; + } + if (currentOperationId !== null && !connectedNodeIds.has(currentOperationId)) { const fallbackId = connectedNodeIds.values().next().value; - if (fallbackId !== undefined) { - setCurrentOperationId(fallbackId as number); + if (fallbackId !== undefined && fallbackId !== currentOperationId) { + // eslint-disable-next-line react-hooks/set-state-in-effect + setCurrentOperationId(fallbackId); } } - } + }, [connectedNodeIds, currentOperationId]); const nodes = useMemo( () => @@ -148,6 +149,15 @@ const OperationGraph: React.FC<{ ds.add(edges); }, [edges]); + const data = useMemo( + () => ({ + nodes, + // eslint-disable-next-line react-hooks/refs + edges: edgesDataSetRef.current, + }), + [nodes], + ); + const colorHighlightIO = useCallback( (selectedNodeId: IdType) => { const allNodes = nodes.get(); @@ -425,15 +435,14 @@ const OperationGraph: React.FC<{ }; useEffect(() => { - queueMicrotask(() => { - setIsLoading(true); - }); + // eslint-disable-next-line react-hooks/set-state-in-effect + setIsLoading(true); - const loadTimeoutId = window.setTimeout(() => { + // allow the ui to render loading state before initializing the graph + setTimeout(() => { if (containerRef.current) { requestAnimationFrame(() => { - const graphData = { nodes, edges: edgesDataSetRef.current }; - networkRef.current = new Network(containerRef.current!, graphData, { + networkRef.current = new Network(containerRef.current!, data, { nodes: { font: { color: '#202020' }, color: { @@ -525,7 +534,6 @@ const OperationGraph: React.FC<{ }); return () => { - window.clearTimeout(loadTimeoutId); if (blinkIntervalRef.current !== null) { window.clearInterval(blinkIntervalRef.current); blinkIntervalRef.current = null; @@ -542,7 +550,7 @@ const OperationGraph: React.FC<{ networkRef.current = null; }; // eslint-disable-next-line react-hooks/exhaustive-deps - }, [edges, nodes, compactView]); + }, [edges, nodes, data, compactView]); const getNextOperationId = (currentId: number | null) => { if (nodes === null || currentId === null) { diff --git a/src/components/npe/NPETimelineComponent.tsx b/src/components/npe/NPETimelineComponent.tsx index dd3e59d2b..13ed1891c 100644 --- a/src/components/npe/NPETimelineComponent.tsx +++ b/src/components/npe/NPETimelineComponent.tsx @@ -77,25 +77,24 @@ const NPETimelineComponent: React.FC = ({ ); const zoneRanges = useMemo(() => { - const range = selectedZoneList.flatMap((rootZone, groupIndex) => { - const childZones = rootZone.expandedState ? getZoneDrawingModel(rootZone.zones, 1) : []; - const maxDepth = childZones.length ? Math.max(...childZones.map((z) => z.depth)) : 0; - return rootZone.zones.map((zone) => ({ - groupIndex, - maxDepth, - proc: rootZone.proc, - start: zone.start / cyclesPerTimestep, - end: zone.end / cyclesPerTimestep, - zones: childZones, - })); - }); - const maxZoneDepth = selectedZoneList.reduce((sum, rootZone) => { - const childZones = rootZone.expandedState ? getZoneDrawingModel(rootZone.zones, 1) : []; - const maxDepth = childZones.length ? Math.max(...childZones.map((z) => z.depth)) : 0; - return sum + 1 + maxDepth; - }, 0); + let maxZoneDepth = 0; + let groupIndex = -1; return { - range, + 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; + maxZoneDepth += 1 + maxDepth; + return rootZone.zones.map((zone) => ({ + groupIndex, + maxDepth, + proc: rootZone.proc, + start: zone.start / cyclesPerTimestep, + end: zone.end / cyclesPerTimestep, + zones: childZones, + })); + }), maxZoneDepth, }; }, [selectedZoneList, cyclesPerTimestep, getZoneDrawingModel]); diff --git a/src/components/npe/NPEViewComponent.tsx b/src/components/npe/NPEViewComponent.tsx index 1e8a76b0f..e7f526306 100644 --- a/src/components/npe/NPEViewComponent.tsx +++ b/src/components/npe/NPEViewComponent.tsx @@ -114,9 +114,12 @@ const NPEView: React.FC = ({ npeData }) => { return npeData.noc_transfers.some((tr) => tr.fabric_event_type); }, [npeData]); - if (!isFabricTransfersFilteringEnabled && fabricEventsFilter !== EVENT_TYPE_FILTER.ALL_EVENTS) { - setFabricEventsFilter(EVENT_TYPE_FILTER.ALL_EVENTS); - } + 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]); const selectedZoneList: NPERootZoneUXInfo[] = useMemo(() => { if (selectedZoneAddress === null) { @@ -139,7 +142,7 @@ const NPEView: React.FC = ({ npeData }) => { }, [expandedZoneMap, selectedZoneAddress, zones]); const links = useMemo(() => { - const timestepData = structuredClone(npeData.timestep_data[selectedTimestep]); + const timestepData = npeData.timestep_data[selectedTimestep]; timestepData.active_transfers.forEach((id) => { const transfer = npeData.noc_transfers.find((tr) => tr.id === id); // TODO: this functionality should MAYBE move to BE. https://github.com/orgs/tenstorrent/projects/178/views/1?pane=issue&itemId=124188622&issue=tenstorrent%7Cttnn-visualizer%7C745 @@ -192,38 +195,6 @@ const NPEView: React.FC = ({ npeData }) => { }); }, [npeData.noc_transfers, links?.active_transfers, fabricEventsFilter]); - function stopAnimation() { - setPlaybackSpeed(0); - return clearInterval(animationInterval as number); - } - - function startAnimation(speed: number = PLAYBACK_SPEED) { - setPlaybackSpeed(speed); - clearInterval(animationInterval as number); - const range = npeData.timestep_data.length; - - const interval = setInterval(() => { - setSelectedTimestep((prev) => { - return prev < range - 1 ? prev + 1 : 0; - }); - }, 100 / speed); - setAnimationInterval(Number(interval)); - } - - function hideAllTransfers() { - setIsShowingAllTransfers(false); - setSelectedTransferList([]); - } - - function showAllTransfers() { - setIsShowingAllTransfers(true); - setSelectedNode(null); - const activeTransfers = npeData.timestep_data[selectedTimestep].active_transfers - .map((transferId) => npeData.noc_transfers.find((tr) => tr.id === transferId)) - .filter((transfer): transfer is NoCTransfer => transfer !== undefined); - setSelectedTransferList(activeTransfers as NoCTransfer[]); - } - const showNOCType = (value: NoCType) => { if (nocFilter === null) { setNocFilter(value === NoCType.NOC0 ? NoCType.NOC1 : NoCType.NOC0); @@ -251,24 +222,23 @@ const NPEView: React.FC = ({ npeData }) => { }, [architecture.arch_name, npeData.common_info.arch]); useEffect(() => { - queueMicrotask(() => { - resetRouteColors(); - if (isShowingAllTransfers) { - showAllTransfers(); - } - }); + resetRouteColors(); + if (isShowingAllTransfers) { + // eslint-disable-next-line react-hooks/immutability + showAllTransfers(); + } // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedTimestep, isShowingAllTransfers]); useEffect(() => { - queueMicrotask(() => { - stopAnimation(); - setSelectedTimestep(0); - setSelectedNode(null); - setSelectedTransferList([]); - setHighlightedTransfer(null); - setHighlightedRoute(null); - }); + // eslint-disable-next-line react-hooks/immutability + stopAnimation(); + // eslint-disable-next-line react-hooks/set-state-in-effect + setSelectedTimestep(0); + setSelectedNode(null); + setSelectedTransferList([]); + setHighlightedTransfer(null); + setHighlightedRoute(null); // eslint-disable-next-line react-hooks/exhaustive-deps }, [npeData]); @@ -277,6 +247,24 @@ const NPEView: React.FC = ({ npeData }) => { selectedNode, ); + const startAnimation = (speed: number = PLAYBACK_SPEED) => { + setPlaybackSpeed(speed); + clearInterval(animationInterval as number); + const range = npeData.timestep_data.length; + + const interval = setInterval(() => { + setSelectedTimestep((prev) => { + return prev < range - 1 ? prev + 1 : 0; + }); + }, 100 / speed); + setAnimationInterval(Number(interval)); + }; + + const stopAnimation = () => { + setPlaybackSpeed(0); + return clearInterval(animationInterval as number); + }; + const onPlay = () => { startAnimation(); }; @@ -317,6 +305,11 @@ const NPEView: React.FC = ({ npeData }) => { setSelectedTransferList([]); }; + const hideAllTransfers = () => { + setIsShowingAllTransfers(false); + setSelectedTransferList([]); + }; + const showActiveTransfers = useShowActiveTransfers({ npeData, selectedNode, @@ -328,6 +321,15 @@ const NPEView: React.FC = ({ npeData }) => { setSelectedTransferList, }); + const showAllTransfers = () => { + setIsShowingAllTransfers(true); + setSelectedNode(null); + const activeTransfers = npeData.timestep_data[selectedTimestep].active_transfers + .map((transferId) => npeData.noc_transfers.find((tr) => tr.id === transferId)) + .filter((transfer): transfer is NoCTransfer => transfer !== undefined); + setSelectedTransferList(activeTransfers as NoCTransfer[]); + }; + const getOriginOpacity = (transfer: NoCFlowBase): number => { if (transfer.id === null || transfer.id === undefined) { return 1; From 79174bb922011018e2e7abe1e27e4e0b53a44abf Mon Sep 17 00:00:00 2001 From: David Blundell Date: Thu, 14 May 2026 13:16:16 -0400 Subject: [PATCH 4/4] Revert OperationGraphComponent change because Denis --- src/components/OperationGraphComponent.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/components/OperationGraphComponent.tsx b/src/components/OperationGraphComponent.tsx index 48a88f31f..4551d9f2c 100644 --- a/src/components/OperationGraphComponent.tsx +++ b/src/components/OperationGraphComponent.tsx @@ -116,7 +116,6 @@ const OperationGraph: React.FC<{ if (currentOperationId !== null && !connectedNodeIds.has(currentOperationId)) { const fallbackId = connectedNodeIds.values().next().value; if (fallbackId !== undefined && fallbackId !== currentOperationId) { - // eslint-disable-next-line react-hooks/set-state-in-effect setCurrentOperationId(fallbackId); } } @@ -152,7 +151,6 @@ const OperationGraph: React.FC<{ const data = useMemo( () => ({ nodes, - // eslint-disable-next-line react-hooks/refs edges: edgesDataSetRef.current, }), [nodes], @@ -435,7 +433,6 @@ const OperationGraph: React.FC<{ }; useEffect(() => { - // eslint-disable-next-line react-hooks/set-state-in-effect setIsLoading(true); // allow the ui to render loading state before initializing the graph