From 1729cda412f3412594e1d01afe2429a4bab3b8b5 Mon Sep 17 00:00:00 2001 From: atarashansky Date: Mon, 13 May 2024 11:21:52 -0700 Subject: [PATCH] chore: Revert "chore: SDS v20" (#7035) --- frontend/package-lock.json | 601 +++++++++++------- frontend/package.json | 2 +- frontend/src/common/theme.ts | 437 +++++-------- .../src/components/BottomBanner/index.tsx | 2 +- .../components/ReorderDatasets/index.tsx | 2 + .../components/Content/index.tsx | 5 +- .../CreateCollectionModal/index.tsx | 5 +- .../src/components/GeneInfoSideBar/index.tsx | 4 +- .../CuratorAPIKeyGenerator/index.tsx | 6 +- .../components/FilterMenuItems/index.tsx | 2 +- .../components/FilterViewList/index.tsx | 2 +- .../Filter/components/FilterSearch/index.tsx | 2 +- .../Filter/components/FilterTags/index.tsx | 2 +- .../components/common/Form/Dropdown/index.tsx | 57 +- .../components/common/Form/Dropdown/style.ts | 2 +- .../components/CountAndTotal/index.tsx | 2 +- .../Grid/components/HeaderCell/index.tsx | 2 +- .../common/Grid/components/NTag/index.tsx | 2 +- .../Grid/components/ReorderCell/index.tsx | 2 +- .../Grid/components/RevisionButton/index.tsx | 2 +- .../components/common/MoreDropdown/index.tsx | 4 +- .../components/common/RightSideBar/index.tsx | 12 +- .../src/components/common/SideBar/index.tsx | 5 +- frontend/src/pages/docs/[...slug].tsx | 16 +- .../components/Description/index.tsx | 2 +- .../components/MarkerGeneTables/index.tsx | 7 +- .../components/SourceDataTable/index.tsx | 14 +- .../components/CellGuideCard/index.tsx | 25 +- .../CellGuideMobileHeader/index.tsx | 10 +- .../CellGuide/components/TissueCard/index.tsx | 12 +- .../common/OntologyDagView/index.tsx | 4 +- .../components/EmbeddingButton/index.tsx | 2 +- .../MoreDropdown/components/Menu/index.tsx | 10 +- .../components/MoreDropdown/index.tsx | 2 +- .../WheresMyGeneV2/common/store/reducer.ts | 2 +- .../components/CellInfoSideBar/index.tsx | 4 +- .../Filters/components/ColorScale/connect.ts | 6 +- .../Filters/components/ColorScale/index.tsx | 11 +- .../Filters/components/ColorScale/types.ts | 3 - .../Filters/components/Compare/connect.ts | 10 +- .../Filters/components/Compare/index.tsx | 4 +- .../Organism/components/Dialog/index.tsx | 16 +- .../Organism/components/Dialog/style.ts | 10 +- .../Filters/components/Organism/connect.ts | 6 +- .../Filters/components/Organism/index.tsx | 7 +- .../Filters/components/Sort/connect.ts | 11 +- .../Filters/components/Sort/index.tsx | 13 +- .../Filters/components/Sort/types.ts | 4 - .../components/Filters/connect.ts | 5 +- .../components/Filters/index.tsx | 57 +- .../components/Filters/style.ts | 8 +- .../components/CitationButton/connect.ts | 2 +- .../components/CitationButton/index.tsx | 2 +- .../components/SaveExport/index.tsx | 4 +- .../components/ShareButton/connect.ts | 2 +- .../components/ShareButton/index.tsx | 2 +- .../components/SourceDataButton/index.tsx | 2 +- .../components/SourceDataButton/style.ts | 2 +- .../components/GeneSearchBar/index.tsx | 14 +- .../HeatMap/components/XAxisChart/index.tsx | 2 +- .../HeatMap/components/YAxisChart/index.tsx | 2 +- .../components/HeatMap/connect.ts | 3 +- .../components/HeatMap/index.tsx | 4 +- .../WheresMyGeneV2/components/Main/index.tsx | 2 +- .../wheresMyGene/tissueAutoExpand.test.ts | 2 +- frontend/tests/utils/downloadUtils.ts | 8 +- frontend/tests/utils/wmgUtils.ts | 11 +- 67 files changed, 717 insertions(+), 790 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 14782dbbfe37f..d709719a8979c 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -13,7 +13,7 @@ "@blueprintjs/core": "^5.8.2", "@blueprintjs/icons": "^5.7.0", "@blueprintjs/select": "^5.0.23", - "@czi-sds/components": "^20.4.0", + "@czi-sds/components": "^18.1.2", "@czi-sds/data-viz": "^0.3.0", "@emotion/css": "^11.11.2", "@emotion/react": "^11.11.1", @@ -1280,9 +1280,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.24.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz", - "integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==", + "version": "7.23.7", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.7.tgz", + "integrity": "sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -1589,18 +1589,18 @@ "integrity": "sha512-N8uEMrMPL0cu/bdboEWpQYb/0i2K5Qn8eCsxzOmxSggJbbQte7ljMRoXm917AbntqTGOzdTu+vP3KOOzoC70HQ==" }, "node_modules/@czi-sds/components": { - "version": "20.4.0", - "resolved": "https://registry.npmjs.org/@czi-sds/components/-/components-20.4.0.tgz", - "integrity": "sha512-szcOmngqQW+vgDp5FB4fTz8wdYtygNiBJgCPghdc3B+dtUzuAdnzyzGh8qZ0fMwMfMaWQBeBpFTMAzL/HLEAcQ==", + "version": "18.1.2", + "resolved": "https://registry.npmjs.org/@czi-sds/components/-/components-18.1.2.tgz", + "integrity": "sha512-AHWj87km/4XB7K4cGnFOwlyPBgKOHJ3K2zU8qwNvY5ghOnpctdt434c+oby3/njUg4uJZFmP83DjiyToDqB9/g==", "peerDependencies": { "@emotion/core": "^11.0.0", - "@emotion/css": "^11.11.2", - "@emotion/react": "^11.11.3", + "@emotion/css": "^11.11.0", + "@emotion/react": "^11.11.0", "@emotion/styled": "^11.11.0", - "@mui/base": "^5.0.0-beta.30", - "@mui/icons-material": "^5.15.3", - "@mui/lab": "^5.0.0-alpha.159", - "@mui/material": "^5.15.3", + "@mui/base": "^5.0.0-beta.3", + "@mui/icons-material": "^5.11.16", + "@mui/lab": "^5.0.0-alpha.132", + "@mui/material": "^5.13.3", "react": ">=17.0.1", "react-dom": ">=17.0.1" } @@ -1695,14 +1695,14 @@ "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" }, "node_modules/@emotion/react": { - "version": "11.11.4", - "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz", - "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==", + "version": "11.11.1", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz", + "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==", "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.11.0", "@emotion/cache": "^11.11.0", - "@emotion/serialize": "^1.1.3", + "@emotion/serialize": "^1.1.2", "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", "@emotion/utils": "^1.2.1", "@emotion/weak-memoize": "^0.3.1", @@ -1718,9 +1718,9 @@ } }, "node_modules/@emotion/serialize": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz", - "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz", + "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==", "dependencies": { "@emotion/hash": "^0.9.1", "@emotion/memoize": "^0.8.1", @@ -1863,28 +1863,28 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.1.tgz", - "integrity": "sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==", + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.2.tgz", + "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==", "dependencies": { - "@floating-ui/utils": "^0.2.0" + "@floating-ui/utils": "^0.1.3" } }, "node_modules/@floating-ui/dom": { - "version": "1.6.5", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz", - "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", + "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", "dependencies": { - "@floating-ui/core": "^1.0.0", - "@floating-ui/utils": "^0.2.0" + "@floating-ui/core": "^1.4.2", + "@floating-ui/utils": "^0.1.3" } }, "node_modules/@floating-ui/react-dom": { - "version": "2.0.9", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.9.tgz", - "integrity": "sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.4.tgz", + "integrity": "sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==", "dependencies": { - "@floating-ui/dom": "^1.0.0" + "@floating-ui/dom": "^1.5.1" }, "peerDependencies": { "react": ">=16.8.0", @@ -1892,9 +1892,9 @@ } }, "node_modules/@floating-ui/utils": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz", - "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==" + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", + "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" }, "node_modules/@hapi/hoek": { "version": "9.3.0", @@ -2164,16 +2164,16 @@ } }, "node_modules/@mui/base": { - "version": "5.0.0-beta.40", - "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz", - "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==", - "dependencies": { - "@babel/runtime": "^7.23.9", - "@floating-ui/react-dom": "^2.0.8", - "@mui/types": "^7.2.14", - "@mui/utils": "^5.15.14", + "version": "5.0.0-beta.29", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.29.tgz", + "integrity": "sha512-OXfUssYrB6ch/xpBVHMKAjThPlI9VyGGKdvQLMXef2j39wXfcxPlUVQlwia/lmE3rxWIGvbwkZsDtNYzLMsDUg==", + "dependencies": { + "@babel/runtime": "^7.23.6", + "@floating-ui/react-dom": "^2.0.4", + "@mui/types": "^7.2.11", + "@mui/utils": "^5.15.2", "@popperjs/core": "^2.11.8", - "clsx": "^2.1.0", + "clsx": "^2.0.0", "prop-types": "^15.8.1" }, "engines": { @@ -2194,29 +2194,37 @@ } } }, + "node_modules/@mui/base/node_modules/clsx": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", + "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", + "engines": { + "node": ">=6" + } + }, "node_modules/@mui/core-downloads-tracker": { - "version": "5.15.16", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.16.tgz", - "integrity": "sha512-PTIbMJs5C/vYMfyJNW8ArOezh4eyHkg2pTeA7bBxh2kLP1Uzs0Nm+krXWbWGJPwTWjM8EhnDrr4aCF26+2oleg==", + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.0.tgz", + "integrity": "sha512-SYBOVCatVDUf/lbrLGah09bHhX5WfUXg7kSskfLILr6SvKRni0NLp0aonxQ0SMALVVK3Qwa6cW4CdWuwS0gC1w==", "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui-org" + "url": "https://opencollective.com/mui" } }, "node_modules/@mui/icons-material": { - "version": "5.15.16", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.16.tgz", - "integrity": "sha512-s8vYbyACzTNZRKv+20fCfVXJwJqNcVotns2EKnu1wmAga6wv2LAo5kB1d5yqQqZlMFtp34EJvRXf7cy8X0tJVA==", + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.0.tgz", + "integrity": "sha512-z7lYNteDi1GMkF9JP/m2RWuCYK1M/FlaeBSUK7/IhIYzIXNhAVjfD8jRq5vFBV31qkEi2aGBS2z5SfLXwH6U0A==", "peer": true, "dependencies": { - "@babel/runtime": "^7.23.9" + "@babel/runtime": "^7.22.5" }, "engines": { "node": ">=12.0.0" }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui-org" + "url": "https://opencollective.com/mui" }, "peerDependencies": { "@mui/material": "^5.0.0", @@ -2230,29 +2238,30 @@ } }, "node_modules/@mui/lab": { - "version": "5.0.0-alpha.170", - "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.170.tgz", - "integrity": "sha512-0bDVECGmrNjd3+bLdcLiwYZ0O4HP5j5WSQm5DV6iA/Z9kr8O6AnvZ1bv9ImQbbX7Gj3pX4o43EKwCutj3EQxQg==", - "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/base": "5.0.0-beta.40", - "@mui/system": "^5.15.15", - "@mui/types": "^7.2.14", - "@mui/utils": "^5.15.14", - "clsx": "^2.1.0", - "prop-types": "^15.8.1" + "version": "5.0.0-alpha.136", + "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.136.tgz", + "integrity": "sha512-ai6LspCkyKRD8rL2HEtaTPBbeYkARNNKvSbjOLVJtro9bIFpZ0noH21Pp7t50Y2eFemuYeC+D5Tto3OvGKrhnQ==", + "dependencies": { + "@babel/runtime": "^7.22.5", + "@mui/base": "5.0.0-beta.7", + "@mui/system": "^5.14.0", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.13.7", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" }, "engines": { "node": ">=12.0.0" }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui-org" + "url": "https://opencollective.com/mui" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@mui/material": ">=5.15.0", + "@mui/material": "^5.0.0", "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" @@ -2269,20 +2278,57 @@ } } }, + "node_modules/@mui/lab/node_modules/@mui/base": { + "version": "5.0.0-beta.7", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.7.tgz", + "integrity": "sha512-Pjbwm6gjiS96kOMF7E5fjEJsenc0tZBesrLQ4rrdi3eT/c/yhSWnPbCUkHSz8bnS0l3/VQ8bA+oERSGSV2PK6A==", + "dependencies": { + "@babel/runtime": "^7.22.5", + "@emotion/is-prop-valid": "^1.2.1", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.13.7", + "@popperjs/core": "^2.11.8", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/lab/node_modules/react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + }, "node_modules/@mui/material": { - "version": "5.15.16", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.16.tgz", - "integrity": "sha512-ery2hFReewko9gpDBqOr2VmXwQG9ifXofPhGzIx09/b9JqCQC/06kZXZDGGrOTpIddK9HlIf4yrS+G70jPAzUQ==", - "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/base": "5.0.0-beta.40", - "@mui/core-downloads-tracker": "^5.15.16", - "@mui/system": "^5.15.15", - "@mui/types": "^7.2.14", - "@mui/utils": "^5.15.14", - "@types/react-transition-group": "^4.4.10", - "clsx": "^2.1.0", - "csstype": "^3.1.3", + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.0.tgz", + "integrity": "sha512-HP7CP71NhMkui2HUIEKl2/JfuHMuoarSUWAKlNw6s17bl/Num9rN61EM6uUzc2A2zHjj/00A66GnvDnmixEJEw==", + "dependencies": { + "@babel/runtime": "^7.22.5", + "@mui/base": "5.0.0-beta.7", + "@mui/core-downloads-tracker": "^5.14.0", + "@mui/system": "^5.14.0", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.13.7", + "@types/react-transition-group": "^4.4.6", + "clsx": "^1.2.1", + "csstype": "^3.1.2", "prop-types": "^15.8.1", "react-is": "^18.2.0", "react-transition-group": "^4.4.5" @@ -2292,7 +2338,7 @@ }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui-org" + "url": "https://opencollective.com/mui" }, "peerDependencies": { "@emotion/react": "^11.5.0", @@ -2313,18 +2359,50 @@ } } }, + "node_modules/@mui/material/node_modules/@mui/base": { + "version": "5.0.0-beta.7", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.7.tgz", + "integrity": "sha512-Pjbwm6gjiS96kOMF7E5fjEJsenc0tZBesrLQ4rrdi3eT/c/yhSWnPbCUkHSz8bnS0l3/VQ8bA+oERSGSV2PK6A==", + "dependencies": { + "@babel/runtime": "^7.22.5", + "@emotion/is-prop-valid": "^1.2.1", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.13.7", + "@popperjs/core": "^2.11.8", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui" + }, + "peerDependencies": { + "@types/react": "^17.0.0 || ^18.0.0", + "react": "^17.0.0 || ^18.0.0", + "react-dom": "^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@mui/material/node_modules/react-is": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", - "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, "node_modules/@mui/private-theming": { - "version": "5.15.14", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz", - "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==", + "version": "5.13.7", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.7.tgz", + "integrity": "sha512-qbSr+udcij5F9dKhGX7fEdx2drXchq7htLNr2Qg2Ma+WJ6q0ERlEqGSBiPiVDJkptcjeVL4DGmcf1wl5+vD4EA==", "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/utils": "^5.15.14", + "@babel/runtime": "^7.22.5", + "@mui/utils": "^5.13.7", "prop-types": "^15.8.1" }, "engines": { @@ -2332,7 +2410,7 @@ }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui-org" + "url": "https://opencollective.com/mui" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0", @@ -2345,13 +2423,13 @@ } }, "node_modules/@mui/styled-engine": { - "version": "5.15.14", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz", - "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==", + "version": "5.13.2", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.13.2.tgz", + "integrity": "sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw==", "dependencies": { - "@babel/runtime": "^7.23.9", + "@babel/runtime": "^7.21.0", "@emotion/cache": "^11.11.0", - "csstype": "^3.1.3", + "csstype": "^3.1.2", "prop-types": "^15.8.1" }, "engines": { @@ -2359,7 +2437,7 @@ }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui-org" + "url": "https://opencollective.com/mui" }, "peerDependencies": { "@emotion/react": "^11.4.1", @@ -2376,17 +2454,17 @@ } }, "node_modules/@mui/system": { - "version": "5.15.15", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz", - "integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==", - "dependencies": { - "@babel/runtime": "^7.23.9", - "@mui/private-theming": "^5.15.14", - "@mui/styled-engine": "^5.15.14", - "@mui/types": "^7.2.14", - "@mui/utils": "^5.15.14", - "clsx": "^2.1.0", - "csstype": "^3.1.3", + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.0.tgz", + "integrity": "sha512-0HZGkX8miJbiNw+rjlZ9l0Cfkz1bSqfSHQH0EH9J+nx0aAm5cBleg9piOlLdCNIWGgecCqsw4x62erGrGjjcJg==", + "dependencies": { + "@babel/runtime": "^7.22.5", + "@mui/private-theming": "^5.13.7", + "@mui/styled-engine": "^5.13.2", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.13.7", + "clsx": "^1.2.1", + "csstype": "^3.1.2", "prop-types": "^15.8.1" }, "engines": { @@ -2394,7 +2472,7 @@ }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui-org" + "url": "https://opencollective.com/mui" }, "peerDependencies": { "@emotion/react": "^11.5.0", @@ -2415,9 +2493,9 @@ } }, "node_modules/@mui/types": { - "version": "7.2.14", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz", - "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==", + "version": "7.2.11", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.11.tgz", + "integrity": "sha512-KWe/QTEsFFlFSH+qRYf3zoFEj3z67s+qAuSnMMg+gFwbxG7P96Hm6g300inQL1Wy///gSRb8juX7Wafvp93m3w==", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0" }, @@ -2428,11 +2506,11 @@ } }, "node_modules/@mui/utils": { - "version": "5.15.14", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz", - "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==", + "version": "5.15.2", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.2.tgz", + "integrity": "sha512-6dGM9/guFKBlFRHA7/mbM+E7wE7CYDy9Ny4JLtD3J+NTyhi8nd8YxlzgAgTaTVqY0BpdQ2zdfB/q6+p2EdGM0w==", "dependencies": { - "@babel/runtime": "^7.23.9", + "@babel/runtime": "^7.23.6", "@types/prop-types": "^15.7.11", "prop-types": "^15.8.1", "react-is": "^18.2.0" @@ -2455,9 +2533,9 @@ } }, "node_modules/@mui/utils/node_modules/react-is": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", - "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" }, "node_modules/@next/env": { "version": "14.1.0", @@ -3778,9 +3856,9 @@ } }, "node_modules/@types/react-transition-group": { - "version": "4.4.10", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", - "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==", + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", + "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", "dependencies": { "@types/react": "*" } @@ -5395,9 +5473,9 @@ } }, "node_modules/clsx": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", - "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", "engines": { "node": ">=6" } @@ -5805,9 +5883,9 @@ "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==" }, "node_modules/csstype": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, "node_modules/csv": { "version": "6.3.1", @@ -17324,9 +17402,9 @@ } }, "@babel/runtime": { - "version": "7.24.5", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz", - "integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==", + "version": "7.23.7", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.7.tgz", + "integrity": "sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==", "requires": { "regenerator-runtime": "^0.14.0" } @@ -17531,9 +17609,9 @@ "integrity": "sha512-N8uEMrMPL0cu/bdboEWpQYb/0i2K5Qn8eCsxzOmxSggJbbQte7ljMRoXm917AbntqTGOzdTu+vP3KOOzoC70HQ==" }, "@czi-sds/components": { - "version": "20.4.0", - "resolved": "https://registry.npmjs.org/@czi-sds/components/-/components-20.4.0.tgz", - "integrity": "sha512-szcOmngqQW+vgDp5FB4fTz8wdYtygNiBJgCPghdc3B+dtUzuAdnzyzGh8qZ0fMwMfMaWQBeBpFTMAzL/HLEAcQ==", + "version": "18.1.2", + "resolved": "https://registry.npmjs.org/@czi-sds/components/-/components-18.1.2.tgz", + "integrity": "sha512-AHWj87km/4XB7K4cGnFOwlyPBgKOHJ3K2zU8qwNvY5ghOnpctdt434c+oby3/njUg4uJZFmP83DjiyToDqB9/g==", "requires": {} }, "@czi-sds/data-viz": { @@ -17612,14 +17690,14 @@ "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" }, "@emotion/react": { - "version": "11.11.4", - "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz", - "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==", + "version": "11.11.1", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz", + "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==", "requires": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.11.0", "@emotion/cache": "^11.11.0", - "@emotion/serialize": "^1.1.3", + "@emotion/serialize": "^1.1.2", "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", "@emotion/utils": "^1.2.1", "@emotion/weak-memoize": "^0.3.1", @@ -17627,9 +17705,9 @@ } }, "@emotion/serialize": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz", - "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz", + "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==", "requires": { "@emotion/hash": "^0.9.1", "@emotion/memoize": "^0.8.1", @@ -17733,34 +17811,34 @@ "dev": true }, "@floating-ui/core": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.1.tgz", - "integrity": "sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==", + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.2.tgz", + "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==", "requires": { - "@floating-ui/utils": "^0.2.0" + "@floating-ui/utils": "^0.1.3" } }, "@floating-ui/dom": { - "version": "1.6.5", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz", - "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", + "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", "requires": { - "@floating-ui/core": "^1.0.0", - "@floating-ui/utils": "^0.2.0" + "@floating-ui/core": "^1.4.2", + "@floating-ui/utils": "^0.1.3" } }, "@floating-ui/react-dom": { - "version": "2.0.9", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.9.tgz", - "integrity": "sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.4.tgz", + "integrity": "sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==", "requires": { - "@floating-ui/dom": "^1.0.0" + "@floating-ui/dom": "^1.5.1" } }, "@floating-ui/utils": { - "version": "0.2.2", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz", - "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==" + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", + "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" }, "@hapi/hoek": { "version": "9.3.0", @@ -17959,130 +18037,175 @@ } }, "@mui/base": { - "version": "5.0.0-beta.40", - "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.40.tgz", - "integrity": "sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==", - "requires": { - "@babel/runtime": "^7.23.9", - "@floating-ui/react-dom": "^2.0.8", - "@mui/types": "^7.2.14", - "@mui/utils": "^5.15.14", + "version": "5.0.0-beta.29", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.29.tgz", + "integrity": "sha512-OXfUssYrB6ch/xpBVHMKAjThPlI9VyGGKdvQLMXef2j39wXfcxPlUVQlwia/lmE3rxWIGvbwkZsDtNYzLMsDUg==", + "requires": { + "@babel/runtime": "^7.23.6", + "@floating-ui/react-dom": "^2.0.4", + "@mui/types": "^7.2.11", + "@mui/utils": "^5.15.2", "@popperjs/core": "^2.11.8", - "clsx": "^2.1.0", + "clsx": "^2.0.0", "prop-types": "^15.8.1" + }, + "dependencies": { + "clsx": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", + "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==" + } } }, "@mui/core-downloads-tracker": { - "version": "5.15.16", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.16.tgz", - "integrity": "sha512-PTIbMJs5C/vYMfyJNW8ArOezh4eyHkg2pTeA7bBxh2kLP1Uzs0Nm+krXWbWGJPwTWjM8EhnDrr4aCF26+2oleg==" + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.0.tgz", + "integrity": "sha512-SYBOVCatVDUf/lbrLGah09bHhX5WfUXg7kSskfLILr6SvKRni0NLp0aonxQ0SMALVVK3Qwa6cW4CdWuwS0gC1w==" }, "@mui/icons-material": { - "version": "5.15.16", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.16.tgz", - "integrity": "sha512-s8vYbyACzTNZRKv+20fCfVXJwJqNcVotns2EKnu1wmAga6wv2LAo5kB1d5yqQqZlMFtp34EJvRXf7cy8X0tJVA==", + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.0.tgz", + "integrity": "sha512-z7lYNteDi1GMkF9JP/m2RWuCYK1M/FlaeBSUK7/IhIYzIXNhAVjfD8jRq5vFBV31qkEi2aGBS2z5SfLXwH6U0A==", "peer": true, "requires": { - "@babel/runtime": "^7.23.9" + "@babel/runtime": "^7.22.5" } }, "@mui/lab": { - "version": "5.0.0-alpha.170", - "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.170.tgz", - "integrity": "sha512-0bDVECGmrNjd3+bLdcLiwYZ0O4HP5j5WSQm5DV6iA/Z9kr8O6AnvZ1bv9ImQbbX7Gj3pX4o43EKwCutj3EQxQg==", - "requires": { - "@babel/runtime": "^7.23.9", - "@mui/base": "5.0.0-beta.40", - "@mui/system": "^5.15.15", - "@mui/types": "^7.2.14", - "@mui/utils": "^5.15.14", - "clsx": "^2.1.0", - "prop-types": "^15.8.1" + "version": "5.0.0-alpha.136", + "resolved": "https://registry.npmjs.org/@mui/lab/-/lab-5.0.0-alpha.136.tgz", + "integrity": "sha512-ai6LspCkyKRD8rL2HEtaTPBbeYkARNNKvSbjOLVJtro9bIFpZ0noH21Pp7t50Y2eFemuYeC+D5Tto3OvGKrhnQ==", + "requires": { + "@babel/runtime": "^7.22.5", + "@mui/base": "5.0.0-beta.7", + "@mui/system": "^5.14.0", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.13.7", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + }, + "dependencies": { + "@mui/base": { + "version": "5.0.0-beta.7", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.7.tgz", + "integrity": "sha512-Pjbwm6gjiS96kOMF7E5fjEJsenc0tZBesrLQ4rrdi3eT/c/yhSWnPbCUkHSz8bnS0l3/VQ8bA+oERSGSV2PK6A==", + "requires": { + "@babel/runtime": "^7.22.5", + "@emotion/is-prop-valid": "^1.2.1", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.13.7", + "@popperjs/core": "^2.11.8", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + } + }, + "react-is": { + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + } } }, "@mui/material": { - "version": "5.15.16", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.16.tgz", - "integrity": "sha512-ery2hFReewko9gpDBqOr2VmXwQG9ifXofPhGzIx09/b9JqCQC/06kZXZDGGrOTpIddK9HlIf4yrS+G70jPAzUQ==", - "requires": { - "@babel/runtime": "^7.23.9", - "@mui/base": "5.0.0-beta.40", - "@mui/core-downloads-tracker": "^5.15.16", - "@mui/system": "^5.15.15", - "@mui/types": "^7.2.14", - "@mui/utils": "^5.15.14", - "@types/react-transition-group": "^4.4.10", - "clsx": "^2.1.0", - "csstype": "^3.1.3", + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.14.0.tgz", + "integrity": "sha512-HP7CP71NhMkui2HUIEKl2/JfuHMuoarSUWAKlNw6s17bl/Num9rN61EM6uUzc2A2zHjj/00A66GnvDnmixEJEw==", + "requires": { + "@babel/runtime": "^7.22.5", + "@mui/base": "5.0.0-beta.7", + "@mui/core-downloads-tracker": "^5.14.0", + "@mui/system": "^5.14.0", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.13.7", + "@types/react-transition-group": "^4.4.6", + "clsx": "^1.2.1", + "csstype": "^3.1.2", "prop-types": "^15.8.1", "react-is": "^18.2.0", "react-transition-group": "^4.4.5" }, "dependencies": { + "@mui/base": { + "version": "5.0.0-beta.7", + "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-beta.7.tgz", + "integrity": "sha512-Pjbwm6gjiS96kOMF7E5fjEJsenc0tZBesrLQ4rrdi3eT/c/yhSWnPbCUkHSz8bnS0l3/VQ8bA+oERSGSV2PK6A==", + "requires": { + "@babel/runtime": "^7.22.5", + "@emotion/is-prop-valid": "^1.2.1", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.13.7", + "@popperjs/core": "^2.11.8", + "clsx": "^1.2.1", + "prop-types": "^15.8.1", + "react-is": "^18.2.0" + } + }, "react-is": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", - "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" } } }, "@mui/private-theming": { - "version": "5.15.14", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz", - "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==", + "version": "5.13.7", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.7.tgz", + "integrity": "sha512-qbSr+udcij5F9dKhGX7fEdx2drXchq7htLNr2Qg2Ma+WJ6q0ERlEqGSBiPiVDJkptcjeVL4DGmcf1wl5+vD4EA==", "requires": { - "@babel/runtime": "^7.23.9", - "@mui/utils": "^5.15.14", + "@babel/runtime": "^7.22.5", + "@mui/utils": "^5.13.7", "prop-types": "^15.8.1" } }, "@mui/styled-engine": { - "version": "5.15.14", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz", - "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==", + "version": "5.13.2", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.13.2.tgz", + "integrity": "sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw==", "requires": { - "@babel/runtime": "^7.23.9", + "@babel/runtime": "^7.21.0", "@emotion/cache": "^11.11.0", - "csstype": "^3.1.3", + "csstype": "^3.1.2", "prop-types": "^15.8.1" } }, "@mui/system": { - "version": "5.15.15", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.15.15.tgz", - "integrity": "sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==", - "requires": { - "@babel/runtime": "^7.23.9", - "@mui/private-theming": "^5.15.14", - "@mui/styled-engine": "^5.15.14", - "@mui/types": "^7.2.14", - "@mui/utils": "^5.15.14", - "clsx": "^2.1.0", - "csstype": "^3.1.3", + "version": "5.14.0", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.14.0.tgz", + "integrity": "sha512-0HZGkX8miJbiNw+rjlZ9l0Cfkz1bSqfSHQH0EH9J+nx0aAm5cBleg9piOlLdCNIWGgecCqsw4x62erGrGjjcJg==", + "requires": { + "@babel/runtime": "^7.22.5", + "@mui/private-theming": "^5.13.7", + "@mui/styled-engine": "^5.13.2", + "@mui/types": "^7.2.4", + "@mui/utils": "^5.13.7", + "clsx": "^1.2.1", + "csstype": "^3.1.2", "prop-types": "^15.8.1" } }, "@mui/types": { - "version": "7.2.14", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz", - "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==", + "version": "7.2.11", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.11.tgz", + "integrity": "sha512-KWe/QTEsFFlFSH+qRYf3zoFEj3z67s+qAuSnMMg+gFwbxG7P96Hm6g300inQL1Wy///gSRb8juX7Wafvp93m3w==", "requires": {} }, "@mui/utils": { - "version": "5.15.14", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz", - "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==", + "version": "5.15.2", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.2.tgz", + "integrity": "sha512-6dGM9/guFKBlFRHA7/mbM+E7wE7CYDy9Ny4JLtD3J+NTyhi8nd8YxlzgAgTaTVqY0BpdQ2zdfB/q6+p2EdGM0w==", "requires": { - "@babel/runtime": "^7.23.9", + "@babel/runtime": "^7.23.6", "@types/prop-types": "^15.7.11", "prop-types": "^15.8.1", "react-is": "^18.2.0" }, "dependencies": { "react-is": { - "version": "18.3.1", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", - "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==" + "version": "18.2.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", + "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" } } }, @@ -19139,9 +19262,9 @@ } }, "@types/react-transition-group": { - "version": "4.4.10", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", - "integrity": "sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==", + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", + "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", "requires": { "@types/react": "*" } @@ -20307,9 +20430,9 @@ } }, "clsx": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", - "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==" + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==" }, "coa": { "version": "2.0.2", @@ -20632,9 +20755,9 @@ } }, "csstype": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", - "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", + "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" }, "csv": { "version": "6.3.1", diff --git a/frontend/package.json b/frontend/package.json index dbde2fbe44e54..8eb40cf3c7c9c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -8,7 +8,7 @@ "@blueprintjs/core": "^5.8.2", "@blueprintjs/icons": "^5.7.0", "@blueprintjs/select": "^5.0.23", - "@czi-sds/components": "^20.4.0", + "@czi-sds/components": "^18.1.2", "@czi-sds/data-viz": "^0.3.0", "@emotion/css": "^11.11.2", "@emotion/react": "^11.11.1", diff --git a/frontend/src/common/theme.ts b/frontend/src/common/theme.ts index 4c7cd785d5da5..7edb6422e03c8 100644 --- a/frontend/src/common/theme.ts +++ b/frontend/src/common/theme.ts @@ -1,6 +1,6 @@ import { CommonThemeProps, - SDSAppTheme, + defaultAppTheme, getColors, getCorners, getFontWeights, @@ -11,7 +11,7 @@ import { } from "@czi-sds/components"; import { createTheme } from "@mui/material/styles"; -import { Inter, IBM_Plex_Mono } from "next/font/google"; +import { Inter } from "next/font/google"; export const INTER_FONT_CSS_VARIABLE = "--font-inter"; @@ -29,24 +29,15 @@ export const inter = Inter({ variable: "--font-inter", }); -/** - * (masoudmanson): IMB_Plex_Mono is needed for SDS code blocks. - */ -export const ibm_plex_mono = IBM_Plex_Mono({ - subsets: ["latin"], - variable: "--font-ibm-plex-mono", - weight: ["400", "600"], -}); - -const { fontWeights } = SDSAppTheme; +const { fontWeights } = defaultAppTheme; const iconSizes = { input: { height: 16, width: 16 }, // for use with input icons only (radio and checkbox) l: { height: 24, width: 24 }, - m: { height: 16, width: 16 }, // (masoudmanson): SDS doesn't have a medium icon size! - s: { height: 16, width: 16 }, // (masoudmanson): Used to be 12px + m: { height: 16, width: 16 }, + s: { height: 12, width: 12 }, xl: { height: 32, width: 32 }, - xs: { height: 12, width: 12 }, // (masoudmanson): Used to be 8px + xs: { height: 8, width: 8 }, }; const spacing = { @@ -84,259 +75,125 @@ export const cornersM = (props: CommonThemeProps) => getCorners(props)?.m; export const cornersS = (props: CommonThemeProps) => getCorners(props)?.s; export const cornersNone = (props: CommonThemeProps) => getCorners(props)?.none; -/** - * (masoudmanson): SDS has introduced new font styles for tabular numbers. - */ -const tabularNums = "tabular-nums"; - const typography = { - fontFamily: { - body: inter.style.fontFamily, - caps: inter.style.fontFamily, - code: ibm_plex_mono.style.fontFamily, - header: inter.style.fontFamily, - tabular: inter.style.fontFamily, - }, + fontFamily: inter.style.fontFamily, styles: { body: { - regular: { - button: { - fontSize: 14, - fontWeight: fontWeights.medium, - letterSpacing: "0px", - lineHeight: "20px", - textTransform: "none" as const, - }, - l: { - fontSize: 18, - fontWeight: fontWeights.regular, - letterSpacing: "0px", - lineHeight: "24px", - }, - m: { - fontSize: 16, - fontWeight: fontWeights.regular, - letterSpacing: "0px", - lineHeight: "24px", - }, - s: { - fontSize: 14, - fontWeight: fontWeights.regular, - letterSpacing: "-0.08px", - lineHeight: "20px", - }, - xs: { - fontSize: 13, - fontWeight: fontWeights.regular, - letterSpacing: "-0.04px", - lineHeight: "20px", - }, - xxs: { - fontSize: 12, - fontWeight: fontWeights.regular, - letterSpacing: "0px", - lineHeight: "16px", - }, - xxxs: { - fontSize: 11, - fontWeight: fontWeights.regular, - letterSpacing: "-0.05px", - lineHeight: "16px", - }, + button: { + fontSize: 14, + fontWeight: fontWeights.medium, + letterSpacing: "0px", + lineHeight: "20px", + textTransform: "none" as const, + }, + l: { + fontSize: 18, + fontWeight: fontWeights.regular, + letterSpacing: "0px", + lineHeight: "24px", + }, + m: { + fontSize: 16, + fontWeight: fontWeights.regular, + letterSpacing: "0px", + lineHeight: "24px", + }, + s: { + fontSize: 14, + fontWeight: fontWeights.regular, + letterSpacing: "-0.08px", + lineHeight: "20px", + }, + xs: { + fontSize: 13, + fontWeight: fontWeights.regular, + letterSpacing: "-0.04px", + lineHeight: "20px", }, - semibold: { - button: { - fontSize: 14, - fontWeight: fontWeights.semibold, - letterSpacing: "0px", - lineHeight: "20px", - textTransform: "none" as const, - }, - l: { - fontSize: 18, - fontWeight: fontWeights.semibold, - letterSpacing: "0px", - lineHeight: "24px", - }, - m: { - fontSize: 16, - fontWeight: fontWeights.semibold, - letterSpacing: "0px", - lineHeight: "24px", - }, - s: { - fontSize: 14, - fontWeight: fontWeights.semibold, - letterSpacing: "-0.08px", - lineHeight: "20px", - }, - xs: { - fontSize: 13, - fontWeight: fontWeights.semibold, - letterSpacing: "-0.04px", - lineHeight: "20px", - }, - xxs: { - fontSize: 12, - fontWeight: fontWeights.semibold, - letterSpacing: "0px", - lineHeight: "16px", - }, - xxxs: { - fontSize: 11, - fontWeight: fontWeights.semibold, - letterSpacing: "-0.05px", - lineHeight: "16px", - }, + xxs: { + fontSize: 12, + fontWeight: fontWeights.regular, + letterSpacing: "0px", + lineHeight: "16px", + }, + xxxs: { + fontSize: 11, + fontWeight: fontWeights.regular, + letterSpacing: "-0.05px", + lineHeight: "16px", }, }, caps: { - semibold: { - xxs: { - fontSize: 12, - fontWeight: fontWeights.semibold, - letterSpacing: "0.36px", - lineHeight: "16px", - textTransform: "uppercase" as const, - }, - xxxs: { - fontSize: 11, - fontWeight: fontWeights.semibold, - letterSpacing: "0.33px", - lineHeight: "16px", - textTransform: "uppercase" as const, - }, - xxxxs: { - fontSize: 10, - fontWeight: fontWeights.semibold, - letterSpacing: "1.0px", - lineHeight: "12px", - textTransform: "uppercase" as const, - }, + xxs: { + fontSize: 12, + fontWeight: fontWeights.semibold, + letterSpacing: "0.36px", + lineHeight: "16px", + textTransform: "uppercase" as const, }, - }, - code: { - regular: { - s: { - fontSize: 14, - fontWeight: fontWeights.regular, - letterSpacing: "0px", - lineHeight: "24px", - textTransform: "none" as const, - }, - xs: { - fontSize: 13, - fontWeight: fontWeights.regular, - letterSpacing: "0px", - lineHeight: "20px", - textTransform: "none" as const, - }, + xxxs: { + fontSize: 11, + fontWeight: fontWeights.semibold, + letterSpacing: "0.33px", + lineHeight: "16px", + textTransform: "uppercase" as const, }, - semibold: { - s: { - fontSize: 14, - fontWeight: fontWeights.semibold, - letterSpacing: "0px", - lineHeight: "24px", - textTransform: "none" as const, - }, - xs: { - fontSize: 13, - fontWeight: fontWeights.semibold, - letterSpacing: "0px", - lineHeight: "20px", - textTransform: "none" as const, - }, + xxxxs: { + fontSize: 10, + fontWeight: fontWeights.semibold, + letterSpacing: "1.0px", + lineHeight: "12px", + textTransform: "uppercase" as const, }, }, header: { - semibold: { - l: { - fontSize: 18, - fontWeight: fontWeights.semibold, - letterSpacing: "-0.31px", - lineHeight: "24px", - }, - m: { - fontSize: 16, - fontWeight: fontWeights.semibold, - letterSpacing: "-0.18px", - lineHeight: "20px", - }, - s: { - fontSize: 14, - fontWeight: fontWeights.semibold, - letterSpacing: "-0.1px", - lineHeight: "20px", - }, - xl: { - fontSize: 24, - fontWeight: fontWeights.semibold, - letterSpacing: "-0.37px", - lineHeight: "32px", - }, - xs: { - fontSize: 13, - fontWeight: fontWeights.semibold, - letterSpacing: "0px", - lineHeight: "16px", - }, - xxl: { - fontSize: 32, - fontWeight: fontWeights.semibold, - letterSpacing: "-0.56px", - lineHeight: "36px", - }, - xxs: { - fontSize: 12, - fontWeight: fontWeights.semibold, - letterSpacing: "0px", - lineHeight: "16px", - }, - xxxs: { - fontSize: 11, - fontWeight: fontWeights.semibold, - letterSpacing: "0px", - lineHeight: "16px", - }, + l: { + fontSize: 18, + fontWeight: fontWeights.semibold, + letterSpacing: "-0.31px", + lineHeight: "24px", }, - }, - tabular: { - regular: { - s: { - fontSize: 14, - fontVariantNumeric: tabularNums, - fontWeight: fontWeights.regular, - letterSpacing: "0px", - lineHeight: "24px", - textTransform: "none" as const, - }, - xs: { - fontSize: 13, - fontVariantNumeric: tabularNums, - fontWeight: fontWeights.regular, - letterSpacing: "0px", - lineHeight: "20px", - textTransform: "none" as const, - }, + m: { + fontSize: 16, + fontWeight: fontWeights.semibold, + letterSpacing: "-0.18px", + lineHeight: "20px", + }, + s: { + fontSize: 14, + fontWeight: fontWeights.semibold, + letterSpacing: "-0.1px", + lineHeight: "20px", + }, + xl: { + fontSize: 24, + fontWeight: fontWeights.semibold, + letterSpacing: "-0.37px", + lineHeight: "32px", + }, + xs: { + fontSize: 13, + fontWeight: fontWeights.semibold, + letterSpacing: "0px", + lineHeight: "16px", + }, + xxl: { + fontSize: 32, + fontWeight: fontWeights.semibold, + letterSpacing: "-0.56px", + lineHeight: "36px", }, - semibold: { - s: { - fontSize: 14, - fontVariantNumeric: tabularNums, - fontWeight: fontWeights.semibold, - letterSpacing: "0px", - lineHeight: "24px", - textTransform: "none" as const, - }, - xs: { - fontSize: 13, - fontVariantNumeric: tabularNums, - fontWeight: fontWeights.semibold, - letterSpacing: "0px", - lineHeight: "20px", - textTransform: "none" as const, - }, + xxs: { + fontSize: 12, + fontWeight: fontWeights.semibold, + letterSpacing: "0px", + lineHeight: "16px", + }, + xxxs: { + fontSize: 11, + fontWeight: fontWeights.semibold, + letterSpacing: "0px", + lineHeight: "16px", }, }, }, @@ -349,7 +206,7 @@ const customTheme = { typography, }; -const themeOptions = { ...SDSAppTheme, ...customTheme }; +const themeOptions = { ...defaultAppTheme, ...customTheme }; // Colors @@ -369,69 +226,62 @@ export const textSecondary = (props: CommonThemeProps) => getPalette(props)?.text?.secondary; export const primary100 = (props: CommonThemeProps) => - getColors(props)?.blue[100]; + getColors(props)?.primary[100]; export const primary200 = (props: CommonThemeProps) => - getColors(props)?.blue[200]; + getColors(props)?.primary[200]; export const primary300 = (props: CommonThemeProps) => - getColors(props)?.blue[300]; + getColors(props)?.primary[300]; export const primary400 = (props: CommonThemeProps) => - getColors(props)?.blue[400]; + getColors(props)?.primary[400]; export const primary500 = (props: CommonThemeProps) => - getColors(props)?.blue[500]; + getColors(props)?.primary[500]; export const primary600 = (props: CommonThemeProps) => - getColors(props)?.blue[600]; - -themeOptions.colors.blue = primaryColors; - -/** - * (masoudmanson): SDS Theme does not include info colors as part of the primitive colors. - * Primitive colors are: blue, green, red, yellow, purple, and gray. - * Additionally, there are Semantic Text and Semantic Component colors available. - * - * You can browse the full list of SDS theme colors here: - * https://chanzuckerberg.github.io/sci-components/?path=/story/bases-colors--primitive-colors - */ + getColors(props)?.primary[600]; -// const infoColors = { -// "100": primaryColors["100"], -// "200": primaryColors["200"], -// "400": primaryColors["400"], -// "600": primaryColors["600"], -// }; +const infoColors = { + "100": primaryColors["100"], + "200": primaryColors["200"], + "400": primaryColors["400"], + "600": primaryColors["600"], +}; -// themeOptions.colors.info = infoColors; +themeOptions.colors.primary = primaryColors; +themeOptions.colors.info = infoColors; export const success100 = (props: CommonThemeProps) => - getColors(props)?.green[100]; + getColors(props)?.success[100]; export const success400 = (props: CommonThemeProps) => - getColors(props)?.green[400]; + getColors(props)?.success[400]; export const success500 = (props: CommonThemeProps) => - getColors(props)?.green[500]; + getColors(props)?.success[500]; export const success600 = (props: CommonThemeProps) => - getColors(props)?.green[600]; + getColors(props)?.success[600]; export const warning100 = (props: CommonThemeProps) => - getColors(props)?.yellow[100]; + getColors(props)?.warning[100]; export const warning400 = (props: CommonThemeProps) => - getColors(props)?.yellow[400]; + getColors(props)?.warning[400]; export const warning500 = (props: CommonThemeProps) => - getColors(props)?.yellow[500]; + getColors(props)?.warning[500]; -export const error100 = (props: CommonThemeProps) => getColors(props)?.red[100]; +export const error100 = (props: CommonThemeProps) => + getColors(props)?.error[100]; -export const error400 = (props: CommonThemeProps) => getColors(props)?.red[400]; +export const error400 = (props: CommonThemeProps) => + getColors(props)?.error[400]; -export const error500 = (props: CommonThemeProps) => getColors(props)?.red[500]; +export const error500 = (props: CommonThemeProps) => + getColors(props)?.error[500]; export const grey100 = (props: CommonThemeProps) => getColors(props)?.gray[100]; export const gray100 = grey100; @@ -456,14 +306,11 @@ export const grayWhite = greyWhite; themeOptions.colors.gray = { ...themeOptions.colors.gray, "400": "#999999" }; -export const beta100 = (props: CommonThemeProps) => - getColors(props)?.purple[100]; +export const beta100 = (props: CommonThemeProps) => getColors(props)?.beta[100]; -export const beta400 = (props: CommonThemeProps) => - getColors(props)?.purple[400]; +export const beta400 = (props: CommonThemeProps) => getColors(props)?.beta[400]; -export const beta600 = (props: CommonThemeProps) => - getColors(props)?.purple[600]; +export const beta600 = (props: CommonThemeProps) => getColors(props)?.beta[600]; export const OFF_WHITE = "#f8f8f8"; diff --git a/frontend/src/components/BottomBanner/index.tsx b/frontend/src/components/BottomBanner/index.tsx index 9d95bb26a1bc3..16127eaa7b241 100644 --- a/frontend/src/components/BottomBanner/index.tsx +++ b/frontend/src/components/BottomBanner/index.tsx @@ -134,7 +134,7 @@ export default memo(function BottomBanner({ CellxGene Logo Cancel @@ -24,6 +25,7 @@ export default function ReorderDatasets({ reorderAction }: Props): JSX.Element { data-testid="datasets-reorder-save" color="success" onClick={onSaveReorder} + sdsStyle="square" sdsType="primary" > Save Order diff --git a/frontend/src/components/CreateCollectionModal/components/Content/index.tsx b/frontend/src/components/CreateCollectionModal/components/Content/index.tsx index 60a11b9d9179c..1342600629bb9 100644 --- a/frontend/src/components/CreateCollectionModal/components/Content/index.tsx +++ b/frontend/src/components/CreateCollectionModal/components/Content/index.tsx @@ -396,10 +396,7 @@ const Content: FC = (props) => { * Handles change to selection of consortia. * @param selectedConsortia - Selected consortia. */ - function handleConsortiaChange( - _: React.SyntheticEvent, - selectedConsortia: DropdownValue - ) { + function handleConsortiaChange(selectedConsortia: DropdownValue) { setConsortia(sortConsortia(selectedConsortia)); } diff --git a/frontend/src/components/CreateCollectionModal/index.tsx b/frontend/src/components/CreateCollectionModal/index.tsx index 3fe456fffa9ed..88f108912bfa6 100644 --- a/frontend/src/components/CreateCollectionModal/index.tsx +++ b/frontend/src/components/CreateCollectionModal/index.tsx @@ -25,10 +25,7 @@ const AsyncCTA = loadable( /*webpackChunkName: 'CreateCollectionModalCTA' */ import("./components/CTA") ); -const CreateCollectionButton = ( - // Omit is a temporary workaround until SDS fixes button typing - props: Omit -) => ( +const CreateCollectionButton = (props: Partial) => ( Create Collection diff --git a/frontend/src/components/GeneInfoSideBar/index.tsx b/frontend/src/components/GeneInfoSideBar/index.tsx index 48297d49d813d..c18845d348ddf 100644 --- a/frontend/src/components/GeneInfoSideBar/index.tsx +++ b/frontend/src/components/GeneInfoSideBar/index.tsx @@ -28,7 +28,7 @@ function GeneInfoSideBar({ // Component for when gene info cannot be found const GeneInfoNoData = ( <> - + Sorry, this gene could not be found on NCBI. @@ -69,7 +69,7 @@ function GeneInfoResult({ {show_warning_banner && ( <> - + NCBI didn't return an exact match for this gene. diff --git a/frontend/src/components/Header/components/CuratorAPIKeyGenerator/index.tsx b/frontend/src/components/Header/components/CuratorAPIKeyGenerator/index.tsx index 9285aaa0dd766..cfa9b8f5f0820 100644 --- a/frontend/src/components/Header/components/CuratorAPIKeyGenerator/index.tsx +++ b/frontend/src/components/Header/components/CuratorAPIKeyGenerator/index.tsx @@ -48,10 +48,6 @@ export default function CuratorAPIKeyGenerator(): JSX.Element { [] ); - const handleButtonClose = useCallback((_: DialogOnCloseParams[0]) => { - setIsOpen(false); - }, []); - const copyAPIKey = useCallback(() => { navigator.clipboard.writeText(apiKeyResponse.current.key || ""); Toast.show({ @@ -79,7 +75,7 @@ export default function CuratorAPIKeyGenerator(): JSX.Element { - Close + Close Copy API Key diff --git a/frontend/src/components/common/Filter/components/FilterContent/components/FilterMenu/components/FilterMenuItems/index.tsx b/frontend/src/components/common/Filter/components/FilterContent/components/FilterMenu/components/FilterMenuItems/index.tsx index 28f7a0e6a3bbb..d354058662809 100644 --- a/frontend/src/components/common/Filter/components/FilterContent/components/FilterMenu/components/FilterMenuItems/index.tsx +++ b/frontend/src/components/common/Filter/components/FilterContent/components/FilterMenu/components/FilterMenuItems/index.tsx @@ -32,7 +32,7 @@ export default function FilterMenuItems({ {/* Icon */} {selected && ( - + )} {/* List item text and count */} diff --git a/frontend/src/components/common/Filter/components/FilterContent/components/FilterViews/components/FilterViewList/index.tsx b/frontend/src/components/common/Filter/components/FilterContent/components/FilterViews/components/FilterViewList/index.tsx index 7362add628586..f60e84268fa0e 100644 --- a/frontend/src/components/common/Filter/components/FilterContent/components/FilterViews/components/FilterViewList/index.tsx +++ b/frontend/src/components/common/Filter/components/FilterContent/components/FilterViews/components/FilterViewList/index.tsx @@ -87,7 +87,7 @@ export default function FilterViewList({ {(selected || selectedPartial) && ( diff --git a/frontend/src/components/common/Filter/components/FilterSearch/index.tsx b/frontend/src/components/common/Filter/components/FilterSearch/index.tsx index 89b8db5583b1d..e978e8e95f98d 100644 --- a/frontend/src/components/common/Filter/components/FilterSearch/index.tsx +++ b/frontend/src/components/common/Filter/components/FilterSearch/index.tsx @@ -38,7 +38,7 @@ export default function FilterSearch({ onClick={onClearSearch} sdsSize="small" sdsType="secondary" - icon="XMarkCircle" + sdsIcon="xMarkCircle" /> ) : undefined } diff --git a/frontend/src/components/common/Filter/components/FilterTags/index.tsx b/frontend/src/components/common/Filter/components/FilterTags/index.tsx index 8a1eabd5fceff..b77ad573c044e 100644 --- a/frontend/src/components/common/Filter/components/FilterTags/index.tsx +++ b/frontend/src/components/common/Filter/components/FilterTags/index.tsx @@ -18,7 +18,7 @@ export default function FilterTags({ tags }: Props): JSX.Element | null { {tags.map(({ label, onRemove }, i) => ( } + deleteIcon={} label={isLabelRange(label) ? `${label[0]} - ${label[1]}` : label} onClick={onRemove} onDelete={onRemove} diff --git a/frontend/src/components/common/Form/Dropdown/index.tsx b/frontend/src/components/common/Form/Dropdown/index.tsx index 42684032f4332..cc87e2f644c3f 100644 --- a/frontend/src/components/common/Form/Dropdown/index.tsx +++ b/frontend/src/components/common/Form/Dropdown/index.tsx @@ -1,9 +1,7 @@ import { - DefaultAutocompleteOption, - DropdownProps, + DefaultDropdownMenuOption, Dropdown as SDSDropdown, } from "@czi-sds/components"; -import { AutocompleteValue } from "@mui/base"; import { FormLabelText, Optional, @@ -13,24 +11,21 @@ import { DropdownPopper, } from "src/components/common/Form/Dropdown/style"; -export type Value = AutocompleteValue< - DefaultAutocompleteOption, - boolean | undefined, - false, - false ->; +type onChangeFn = (options: Value) => void; +export type Value = + | DefaultDropdownMenuOption + | DefaultDropdownMenuOption[] + | null; -interface Props - extends DropdownProps< - DefaultAutocompleteOption, - boolean | undefined, - false, - false - > { +interface Props { disablePortal?: boolean; label: string; + multiple?: boolean; + onChange: onChangeFn; optionalField?: boolean; + options: DefaultDropdownMenuOption[]; text?: string; + value: Value; } const DropdownMenuProps = { @@ -64,26 +59,26 @@ export default function Dropdown({ {optionalField && (optional)} )} - + { - const { anchorEl } = popperProps; - - return ( - - ); - }} + PopperComponent={({ ...props }) => ( + + )} value={value} /> @@ -97,7 +92,7 @@ export default function Dropdown({ * @param label - Default "placeholder" label. * @returns dropdown label. */ -function getDropdownLabel(label: string, value?: Value): string { +function getDropdownLabel(value: Value, label: string): string { if (!value || (Array.isArray(value) && value.length === 0)) { return label; } @@ -111,7 +106,7 @@ function getDropdownLabel(label: string, value?: Value): string { * @param value - Selected value. * @returns true is an option is selected. */ -function isOptionSelected(value?: Value): boolean { +function isOptionSelected(value: Value): boolean { if (!value) { return false; } diff --git a/frontend/src/components/common/Form/Dropdown/style.ts b/frontend/src/components/common/Form/Dropdown/style.ts index 858b21adcd118..73f58f3806f0b 100644 --- a/frontend/src/components/common/Form/Dropdown/style.ts +++ b/frontend/src/components/common/Form/Dropdown/style.ts @@ -7,7 +7,7 @@ import { import { css } from "@emotion/react"; interface DropdownFormProps extends CommonThemeProps { - isSelected?: boolean; + isSelected: boolean; } const scrollbar = css` diff --git a/frontend/src/components/common/Grid/components/HeaderCell/components/CountAndTotal/index.tsx b/frontend/src/components/common/Grid/components/HeaderCell/components/CountAndTotal/index.tsx index d3c99600d75ae..0f976ace7422b 100644 --- a/frontend/src/components/common/Grid/components/HeaderCell/components/CountAndTotal/index.tsx +++ b/frontend/src/components/common/Grid/components/HeaderCell/components/CountAndTotal/index.tsx @@ -17,7 +17,7 @@ export default function CountAndTotal({ <> {!!countAndTotal && ( diff --git a/frontend/src/components/common/Grid/components/NTag/index.tsx b/frontend/src/components/common/Grid/components/NTag/index.tsx index 53a7c9fcc525d..82ee3745ccd56 100644 --- a/frontend/src/components/common/Grid/components/NTag/index.tsx +++ b/frontend/src/components/common/Grid/components/NTag/index.tsx @@ -38,7 +38,7 @@ export default function NTag({ label, values }: Props): JSX.Element { placement={Position.RIGHT} > router.push(ROUTES.COLLECTION.replace(":id", id))} diff --git a/frontend/src/components/common/MoreDropdown/index.tsx b/frontend/src/components/common/MoreDropdown/index.tsx index 469e704ebc20c..324fb0b9a8e39 100644 --- a/frontend/src/components/common/MoreDropdown/index.tsx +++ b/frontend/src/components/common/MoreDropdown/index.tsx @@ -4,7 +4,7 @@ import { MoreButton } from "src/components/common/MoreDropdown/style"; interface Props { popoverProps?: PopoverProps; - buttonProps?: Partial; + buttonProps?: Partial>; } const MoreDropdown = ({ @@ -16,7 +16,7 @@ const MoreDropdown = ({ diff --git a/frontend/src/components/common/RightSideBar/index.tsx b/frontend/src/components/common/RightSideBar/index.tsx index 60db03e0bf9cd..67f62d686d703 100644 --- a/frontend/src/components/common/RightSideBar/index.tsx +++ b/frontend/src/components/common/RightSideBar/index.tsx @@ -1,4 +1,4 @@ -import { Button } from "@czi-sds/components"; +import { ButtonIcon } from "@czi-sds/components"; import { Children, memo, ReactElement, ReactNode } from "react"; import { Position, @@ -56,9 +56,8 @@ export default memo(function RightSideBar({ {child1.props.title} {child1.props.handleClose && ( - - + + Confirm diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/components/Organism/components/Dialog/style.ts b/frontend/src/views/WheresMyGeneV2/components/Filters/components/Organism/components/Dialog/style.ts index 1ef6bc61c256f..79b74479f9613 100644 --- a/frontend/src/views/WheresMyGeneV2/components/Filters/components/Organism/components/Dialog/style.ts +++ b/frontend/src/views/WheresMyGeneV2/components/Filters/components/Organism/components/Dialog/style.ts @@ -7,18 +7,10 @@ import { fontHeaderL, } from "@czi-sds/components"; import styled from "@emotion/styled"; -import { - error400, - error500, - spacesDefault, - spacesXl, - spacesXxs, -} from "src/common/theme"; +import { error500, spacesDefault, spacesXl, spacesXxs } from "src/common/theme"; import { Button } from "src/components/common/Button"; export const ActionButton = styled(Button)` - background-color: ${error400}; - color: white; &:hover { background-color: ${error500}; } diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/components/Organism/connect.ts b/frontend/src/views/WheresMyGeneV2/components/Filters/components/Organism/connect.ts index e611715e416f9..46b8555e6dc45 100644 --- a/frontend/src/views/WheresMyGeneV2/components/Filters/components/Organism/connect.ts +++ b/frontend/src/views/WheresMyGeneV2/components/Filters/components/Organism/connect.ts @@ -9,7 +9,6 @@ import { selectOrganism } from "src/views/WheresMyGeneV2/common/store/actions"; import { track } from "src/common/analytics"; import { EVENTS } from "src/common/analytics/events"; import { selectHasCustomFiltersOrGenesSelected } from "src/views/WheresMyGeneV2/common/store/selectors"; -import { AutocompleteValue } from "@mui/base"; export const useConnect = () => { const dispatch = useContext(DispatchContext); @@ -52,10 +51,7 @@ export const useConnect = () => { return result; }, [organisms]); - function handleOnChange( - _: React.SyntheticEvent, - organism: AutocompleteValue - ): void { + function handleOnChange(organism: IOrganism | null): void { if (!dispatch || !organism || selectedOrganismId === organism.id) return; setPendingOrganism(organism); diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/components/Organism/index.tsx b/frontend/src/views/WheresMyGeneV2/components/Filters/components/Organism/index.tsx index 8d952693a6043..029d329072175 100644 --- a/frontend/src/views/WheresMyGeneV2/components/Filters/components/Organism/index.tsx +++ b/frontend/src/views/WheresMyGeneV2/components/Filters/components/Organism/index.tsx @@ -1,9 +1,8 @@ import { EMPTY_ARRAY } from "src/common/constants/utils"; import { StyledDropdown, Wrapper, Label } from "../common/style"; -import { InputDropdownProps, Props } from "./types"; +import { InputDropdownProps, Props, tempOnChange } from "./types"; import { useConnect } from "./connect"; import Dialog from "./components/Dialog"; -import { Organism as IOrganism } from "src/views/WheresMyGeneV2/common/types"; export default function Organism({ isLoading }: Props): JSX.Element { const { @@ -19,10 +18,10 @@ export default function Organism({ isLoading }: Props): JSX.Element { return ( - + { const dispatch = useContext(DispatchContext); @@ -42,8 +41,7 @@ export const useConnect = ({ areFiltersDisabled }: Props) => { }, [sortBy]); function cellTypesOnChange( - _: React.SyntheticEvent, // event - value: AutocompleteValue + value: { id?: SORT_BY; name: string } | null ): void { if (!dispatch || !value || cellTypeSelectedOption.name === value.name) return; @@ -55,10 +53,7 @@ export const useConnect = ({ areFiltersDisabled }: Props) => { dispatch(selectSortBy({ cellTypes: value.id as SORT_BY })); } - function genesOnChange( - _: React.SyntheticEvent, // event - value: AutocompleteValue - ): void { + function genesOnChange(value: { id?: SORT_BY; name: string } | null): void { if (!dispatch || !value || geneSelectedOption.name === value.name) return; track(EVENTS.WMG_OPTION_SELECT_SORT_GENES, { diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/components/Sort/index.tsx b/frontend/src/views/WheresMyGeneV2/components/Filters/components/Sort/index.tsx index 9779107e6bc9a..2b2a10a7a1c61 100644 --- a/frontend/src/views/WheresMyGeneV2/components/Filters/components/Sort/index.tsx +++ b/frontend/src/views/WheresMyGeneV2/components/Filters/components/Sort/index.tsx @@ -13,7 +13,7 @@ import { SORT_CELL_TYPES_TOOLTIP_TEXT, SORT_GENES_TOOLTIP_TEXT, } from "src/views/WheresMyGeneV2/common/constants"; -import { CellTypeOptionType, Props } from "./types"; +import { Props } from "./types"; import { useConnect } from "./connect"; import { CELL_TYPE_OPTIONS, GENE_OPTIONS } from "./constants"; @@ -67,10 +67,7 @@ export default function Sort({ areFiltersDisabled }: Props): JSX.Element { - {/* Generic variables are - - */} - + - - {/* Generic variables are - - */} - + ["DropdownMenuProps"]; const InputDropdownProps = { sdsStyle: "minimal", diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/index.tsx b/frontend/src/views/WheresMyGeneV2/components/Filters/index.tsx index b14922259e23d..dc221433d4e0f 100644 --- a/frontend/src/views/WheresMyGeneV2/components/Filters/index.tsx +++ b/frontend/src/views/WheresMyGeneV2/components/Filters/index.tsx @@ -1,4 +1,7 @@ -import { DefaultMenuSelectOption } from "@czi-sds/components"; +import { + ComplexFilterInputDropdown, + DefaultMenuSelectOption, +} from "@czi-sds/components"; import { memo } from "react"; import Organism from "./components/Organism"; import Compare from "./components/Compare"; @@ -36,65 +39,77 @@ export default memo(function Filters({ return ( - + - + - + - + - + diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/style.ts b/frontend/src/views/WheresMyGeneV2/components/Filters/style.ts index 41b6e4a95ba24..7c6ae1a4bf14f 100644 --- a/frontend/src/views/WheresMyGeneV2/components/Filters/style.ts +++ b/frontend/src/views/WheresMyGeneV2/components/Filters/style.ts @@ -10,6 +10,12 @@ export const StyledComplexFilterInputDropdown = styled( /* (thuang): Sex filter is short and doesn't need the default 64px width */ min-width: 0; + .MuiButton-label { + margin-left: 0; + margin-right: 10px; + font-weight: 500; + } + &.Mui-disabled { border: 0; } @@ -19,7 +25,7 @@ export const StyledComplexFilterInputDropdown = styled( color: ${gray500} !important; font-weight: 500; } -` as typeof ComplexFilterInputDropdown; +`; export const Wrapper = styled(RawWrapper)` gap: ${spacesXl}px; diff --git a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/CitationButton/connect.ts b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/CitationButton/connect.ts index 3b0e3335c2e2f..8020c2d055a98 100644 --- a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/CitationButton/connect.ts +++ b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/CitationButton/connect.ts @@ -17,7 +17,7 @@ export const useConnect = () => { createNotification({ message: CITATION_NOTIFICATION_TEXT, intent: "info", - sdsIcon: "Quote", + sdsIcon: "quote", sdsSize: "l", label: CITATION_NOTIFICATION_LABEL, isCitation: true, diff --git a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/CitationButton/index.tsx b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/CitationButton/index.tsx index 0bb24cacd9309..c16b65fe1df47 100644 --- a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/CitationButton/index.tsx +++ b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/CitationButton/index.tsx @@ -14,7 +14,7 @@ export default function CitationButton(): JSX.Element { onClick={copyCitation} sdsSize="medium" sdsType="primary" - icon="Quote" + sdsIcon="quote" disabled={isDisabled} /> diff --git a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/SaveExport/index.tsx b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/SaveExport/index.tsx index c3c9115b41916..4db0c74f20017 100644 --- a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/SaveExport/index.tsx +++ b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/SaveExport/index.tsx @@ -250,7 +250,7 @@ export default function SaveExport({ disabled={selectedGenes.length === 0} sdsSize="medium" sdsType="primary" - icon="Download" + sdsIcon="download" /> diff --git a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/SourceDataButton/index.tsx b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/SourceDataButton/index.tsx index 14fdda08e586f..bfcfd1402c9fe 100644 --- a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/SourceDataButton/index.tsx +++ b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/SourceDataButton/index.tsx @@ -34,7 +34,7 @@ export default function SourceDataButton({ }} sdsSize="medium" sdsType="primary" - icon="InfoCircle" + sdsIcon="infoCircle" /> ); diff --git a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/SourceDataButton/style.ts b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/SourceDataButton/style.ts index 50647bb273457..78a8fe28413f5 100644 --- a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/SourceDataButton/style.ts +++ b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/components/SourceDataButton/style.ts @@ -27,7 +27,7 @@ export const BadgeCounter = styled(Badge)` top: 4px; left: 14px; - .base-Badge-badge { + .MuiBadge-badge { position: relative; top: -2px; margin: 0px; diff --git a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/index.tsx b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/index.tsx index f0003e5d40750..526b6c179c19c 100644 --- a/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/index.tsx +++ b/frontend/src/views/WheresMyGeneV2/components/GeneSearchBar/index.tsx @@ -1,5 +1,5 @@ import { Intent } from "@blueprintjs/core"; -import { Autocomplete } from "@czi-sds/components"; +import { Autocomplete, DefaultAutocompleteOption } from "@czi-sds/components"; import React, { ReactChild, SyntheticEvent, @@ -263,21 +263,17 @@ export default function GeneSearchBar({ function handleSelectGenes( _: unknown, - selectedOptions: (Gene | string)[] | null, // Adjusted to accept an array of Gene or string + genes: DefaultAutocompleteOption[] | null, __: unknown, ___: unknown ) { if (!dispatch) return; - const geneNames = - selectedOptions?.map((option) => - typeof option === "string" ? option : option.name - ) || EMPTY_ARRAY; - dispatch(selectGenes(geneNames)); + dispatch(selectGenes(genes?.map((gene) => gene.name) || EMPTY_ARRAY)); - if (selectedOptions && selectedOptions.length > 0) { + if (genes && genes.length > 0) { track(EVENTS.WMG_SELECT_GENE, { - genes: geneNames, + genes: genes.map((gene) => gene.name), }); } } diff --git a/frontend/src/views/WheresMyGeneV2/components/HeatMap/components/XAxisChart/index.tsx b/frontend/src/views/WheresMyGeneV2/components/HeatMap/components/XAxisChart/index.tsx index ae3f016835c95..110cfd83e8e78 100644 --- a/frontend/src/views/WheresMyGeneV2/components/HeatMap/components/XAxisChart/index.tsx +++ b/frontend/src/views/WheresMyGeneV2/components/HeatMap/components/XAxisChart/index.tsx @@ -78,7 +78,7 @@ function GeneButton({ } }} > - + - + )} - + { - return await page - .getByTestId(filterName) - .locator(".MuiChip-label") - .textContent(); + const filterLabel = `${getTestID(filterName)} [role="button"]`; + return await page.locator(filterLabel).textContent(); }; export async function compareSvg( page: Page, diff --git a/frontend/tests/utils/wmgUtils.ts b/frontend/tests/utils/wmgUtils.ts index dcd23b54ecf19..5b92d78babaa6 100644 --- a/frontend/tests/utils/wmgUtils.ts +++ b/frontend/tests/utils/wmgUtils.ts @@ -5,7 +5,7 @@ import { TEST_URL, } from "../common/constants"; import { expect, Page } from "@playwright/test"; -import { getText } from "tests/utils/selectors"; +import { getTestID, getText } from "tests/utils/selectors"; import { countLocator, expandTissue, @@ -172,13 +172,10 @@ export const selectSecondaryFilterOption = async ( // close the secondary filter pop-up await page.keyboard.press("Escape"); - const filterLabel = await page - .getByTestId(filterName) - .locator(".MuiChip-label") - .first(); + const filter_label = `${getTestID(filterName)} [role="button"]`; // expect the selected filter chip to be visible under the dropdown button - await expect(filterLabel).toBeVisible(); + await expect(page.locator(filter_label).first()).toBeVisible(); }; export const pickOptions = async (page: Page, n: number) => { @@ -334,7 +331,7 @@ export async function searchAndAddFilterCellType(page: Page, cellType: string) { export async function removeFilteredCellType(page: Page, cellType: string) { const beforeCellTypeNames = await getCellTypeNames(page); const cellTypeTag = page.getByTestId(`cell-type-tag-${cellType}`); - const deleteIcon = cellTypeTag.locator("svg"); + const deleteIcon = cellTypeTag.getByTestId("ClearIcon"); await deleteIcon.click(); const afterCellTypeNames = await getCellTypeNames(page); expect(afterCellTypeNames.length).toBeLessThan(beforeCellTypeNames.length);