From c21a2d75166bc6b7945e8c3d64be14d0594c4392 Mon Sep 17 00:00:00 2001 From: atarashansky Date: Sat, 11 May 2024 15:09:24 -0700 Subject: [PATCH] chore: SDS v20 (#7000) Co-authored-by: Masoud Amjadi --- 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, 790 insertions(+), 717 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index d709719a8979c..14782dbbfe37f 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": "^18.1.2", + "@czi-sds/components": "^20.4.0", "@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.23.7", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.7.tgz", - "integrity": "sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==", + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz", + "integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -1589,18 +1589,18 @@ "integrity": "sha512-N8uEMrMPL0cu/bdboEWpQYb/0i2K5Qn8eCsxzOmxSggJbbQte7ljMRoXm917AbntqTGOzdTu+vP3KOOzoC70HQ==" }, "node_modules/@czi-sds/components": { - "version": "18.1.2", - "resolved": "https://registry.npmjs.org/@czi-sds/components/-/components-18.1.2.tgz", - "integrity": "sha512-AHWj87km/4XB7K4cGnFOwlyPBgKOHJ3K2zU8qwNvY5ghOnpctdt434c+oby3/njUg4uJZFmP83DjiyToDqB9/g==", + "version": "20.4.0", + "resolved": "https://registry.npmjs.org/@czi-sds/components/-/components-20.4.0.tgz", + "integrity": "sha512-szcOmngqQW+vgDp5FB4fTz8wdYtygNiBJgCPghdc3B+dtUzuAdnzyzGh8qZ0fMwMfMaWQBeBpFTMAzL/HLEAcQ==", "peerDependencies": { "@emotion/core": "^11.0.0", - "@emotion/css": "^11.11.0", - "@emotion/react": "^11.11.0", + "@emotion/css": "^11.11.2", + "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", - "@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", + "@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", "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.1", - "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz", - "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==", + "version": "11.11.4", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz", + "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==", "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.11.0", "@emotion/cache": "^11.11.0", - "@emotion/serialize": "^1.1.2", + "@emotion/serialize": "^1.1.3", "@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.2", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz", - "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz", + "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==", "dependencies": { "@emotion/hash": "^0.9.1", "@emotion/memoize": "^0.8.1", @@ -1863,28 +1863,28 @@ } }, "node_modules/@floating-ui/core": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.2.tgz", - "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==", + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.1.tgz", + "integrity": "sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==", "dependencies": { - "@floating-ui/utils": "^0.1.3" + "@floating-ui/utils": "^0.2.0" } }, "node_modules/@floating-ui/dom": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", - "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz", + "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==", "dependencies": { - "@floating-ui/core": "^1.4.2", - "@floating-ui/utils": "^0.1.3" + "@floating-ui/core": "^1.0.0", + "@floating-ui/utils": "^0.2.0" } }, "node_modules/@floating-ui/react-dom": { - "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==", + "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==", "dependencies": { - "@floating-ui/dom": "^1.5.1" + "@floating-ui/dom": "^1.0.0" }, "peerDependencies": { "react": ">=16.8.0", @@ -1892,9 +1892,9 @@ } }, "node_modules/@floating-ui/utils": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", - "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz", + "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==" }, "node_modules/@hapi/hoek": { "version": "9.3.0", @@ -2164,16 +2164,16 @@ } }, "node_modules/@mui/base": { - "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", + "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", "@popperjs/core": "^2.11.8", - "clsx": "^2.0.0", + "clsx": "^2.1.0", "prop-types": "^15.8.1" }, "engines": { @@ -2194,37 +2194,29 @@ } } }, - "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.14.0", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.0.tgz", - "integrity": "sha512-SYBOVCatVDUf/lbrLGah09bHhX5WfUXg7kSskfLILr6SvKRni0NLp0aonxQ0SMALVVK3Qwa6cW4CdWuwS0gC1w==", + "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==", "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" } }, "node_modules/@mui/icons-material": { - "version": "5.14.0", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.0.tgz", - "integrity": "sha512-z7lYNteDi1GMkF9JP/m2RWuCYK1M/FlaeBSUK7/IhIYzIXNhAVjfD8jRq5vFBV31qkEi2aGBS2z5SfLXwH6U0A==", + "version": "5.15.16", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.16.tgz", + "integrity": "sha512-s8vYbyACzTNZRKv+20fCfVXJwJqNcVotns2EKnu1wmAga6wv2LAo5kB1d5yqQqZlMFtp34EJvRXf7cy8X0tJVA==", "peer": true, "dependencies": { - "@babel/runtime": "^7.22.5" + "@babel/runtime": "^7.23.9" }, "engines": { "node": ">=12.0.0" }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" }, "peerDependencies": { "@mui/material": "^5.0.0", @@ -2238,30 +2230,29 @@ } }, "node_modules/@mui/lab": { - "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" + "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" }, "engines": { "node": ">=12.0.0" }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" }, "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@mui/material": "^5.0.0", + "@mui/material": ">=5.15.0", "@types/react": "^17.0.0 || ^18.0.0", "react": "^17.0.0 || ^18.0.0", "react-dom": "^17.0.0 || ^18.0.0" @@ -2278,57 +2269,20 @@ } } }, - "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.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", + "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", "prop-types": "^15.8.1", "react-is": "^18.2.0", "react-transition-group": "^4.4.5" @@ -2338,7 +2292,7 @@ }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" }, "peerDependencies": { "@emotion/react": "^11.5.0", @@ -2359,50 +2313,18 @@ } } }, - "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.2.0", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", - "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + "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==" }, "node_modules/@mui/private-theming": { - "version": "5.13.7", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.7.tgz", - "integrity": "sha512-qbSr+udcij5F9dKhGX7fEdx2drXchq7htLNr2Qg2Ma+WJ6q0ERlEqGSBiPiVDJkptcjeVL4DGmcf1wl5+vD4EA==", + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz", + "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==", "dependencies": { - "@babel/runtime": "^7.22.5", - "@mui/utils": "^5.13.7", + "@babel/runtime": "^7.23.9", + "@mui/utils": "^5.15.14", "prop-types": "^15.8.1" }, "engines": { @@ -2410,7 +2332,7 @@ }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" }, "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0", @@ -2423,13 +2345,13 @@ } }, "node_modules/@mui/styled-engine": { - "version": "5.13.2", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.13.2.tgz", - "integrity": "sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw==", + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz", + "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==", "dependencies": { - "@babel/runtime": "^7.21.0", + "@babel/runtime": "^7.23.9", "@emotion/cache": "^11.11.0", - "csstype": "^3.1.2", + "csstype": "^3.1.3", "prop-types": "^15.8.1" }, "engines": { @@ -2437,7 +2359,7 @@ }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" }, "peerDependencies": { "@emotion/react": "^11.4.1", @@ -2454,17 +2376,17 @@ } }, "node_modules/@mui/system": { - "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", + "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", "prop-types": "^15.8.1" }, "engines": { @@ -2472,7 +2394,7 @@ }, "funding": { "type": "opencollective", - "url": "https://opencollective.com/mui" + "url": "https://opencollective.com/mui-org" }, "peerDependencies": { "@emotion/react": "^11.5.0", @@ -2493,9 +2415,9 @@ } }, "node_modules/@mui/types": { - "version": "7.2.11", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.11.tgz", - "integrity": "sha512-KWe/QTEsFFlFSH+qRYf3zoFEj3z67s+qAuSnMMg+gFwbxG7P96Hm6g300inQL1Wy///gSRb8juX7Wafvp93m3w==", + "version": "7.2.14", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz", + "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0" }, @@ -2506,11 +2428,11 @@ } }, "node_modules/@mui/utils": { - "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==", + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz", + "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==", "dependencies": { - "@babel/runtime": "^7.23.6", + "@babel/runtime": "^7.23.9", "@types/prop-types": "^15.7.11", "prop-types": "^15.8.1", "react-is": "^18.2.0" @@ -2533,9 +2455,9 @@ } }, "node_modules/@mui/utils/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==" + "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==" }, "node_modules/@next/env": { "version": "14.1.0", @@ -3856,9 +3778,9 @@ } }, "node_modules/@types/react-transition-group": { - "version": "4.4.6", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", - "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", + "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==", "dependencies": { "@types/react": "*" } @@ -5473,9 +5395,9 @@ } }, "node_modules/clsx": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", - "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", "engines": { "node": ">=6" } @@ -5883,9 +5805,9 @@ "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==" }, "node_modules/csstype": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/csv": { "version": "6.3.1", @@ -17402,9 +17324,9 @@ } }, "@babel/runtime": { - "version": "7.23.7", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.7.tgz", - "integrity": "sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==", + "version": "7.24.5", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.5.tgz", + "integrity": "sha512-Nms86NXrsaeU9vbBJKni6gXiEXZ4CVpYVzEjDH9Sb8vmZ3UljyA1GSOJl/6LGPO8EHLuSF9H+IxNXHPX8QHJ4g==", "requires": { "regenerator-runtime": "^0.14.0" } @@ -17609,9 +17531,9 @@ "integrity": "sha512-N8uEMrMPL0cu/bdboEWpQYb/0i2K5Qn8eCsxzOmxSggJbbQte7ljMRoXm917AbntqTGOzdTu+vP3KOOzoC70HQ==" }, "@czi-sds/components": { - "version": "18.1.2", - "resolved": "https://registry.npmjs.org/@czi-sds/components/-/components-18.1.2.tgz", - "integrity": "sha512-AHWj87km/4XB7K4cGnFOwlyPBgKOHJ3K2zU8qwNvY5ghOnpctdt434c+oby3/njUg4uJZFmP83DjiyToDqB9/g==", + "version": "20.4.0", + "resolved": "https://registry.npmjs.org/@czi-sds/components/-/components-20.4.0.tgz", + "integrity": "sha512-szcOmngqQW+vgDp5FB4fTz8wdYtygNiBJgCPghdc3B+dtUzuAdnzyzGh8qZ0fMwMfMaWQBeBpFTMAzL/HLEAcQ==", "requires": {} }, "@czi-sds/data-viz": { @@ -17690,14 +17612,14 @@ "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" }, "@emotion/react": { - "version": "11.11.1", - "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.1.tgz", - "integrity": "sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==", + "version": "11.11.4", + "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.11.4.tgz", + "integrity": "sha512-t8AjMlF0gHpvvxk5mAtCqR4vmxiGHCeJBaQO6gncUSdklELOgtwjerNY2yuJNfwnc6vi16U/+uMF+afIawJ9iw==", "requires": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.11.0", "@emotion/cache": "^11.11.0", - "@emotion/serialize": "^1.1.2", + "@emotion/serialize": "^1.1.3", "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", "@emotion/utils": "^1.2.1", "@emotion/weak-memoize": "^0.3.1", @@ -17705,9 +17627,9 @@ } }, "@emotion/serialize": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.2.tgz", - "integrity": "sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.1.4.tgz", + "integrity": "sha512-RIN04MBT8g+FnDwgvIUi8czvr1LU1alUMI05LekWB5DGyTm8cCBMCRpq3GqaiyEDRptEXOyXnvZ58GZYu4kBxQ==", "requires": { "@emotion/hash": "^0.9.1", "@emotion/memoize": "^0.8.1", @@ -17811,34 +17733,34 @@ "dev": true }, "@floating-ui/core": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.2.tgz", - "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==", + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.1.tgz", + "integrity": "sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==", "requires": { - "@floating-ui/utils": "^0.1.3" + "@floating-ui/utils": "^0.2.0" } }, "@floating-ui/dom": { - "version": "1.5.3", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", - "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz", + "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==", "requires": { - "@floating-ui/core": "^1.4.2", - "@floating-ui/utils": "^0.1.3" + "@floating-ui/core": "^1.0.0", + "@floating-ui/utils": "^0.2.0" } }, "@floating-ui/react-dom": { - "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==", + "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==", "requires": { - "@floating-ui/dom": "^1.5.1" + "@floating-ui/dom": "^1.0.0" } }, "@floating-ui/utils": { - "version": "0.1.6", - "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", - "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz", + "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==" }, "@hapi/hoek": { "version": "9.3.0", @@ -18037,175 +17959,130 @@ } }, "@mui/base": { - "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", + "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", "@popperjs/core": "^2.11.8", - "clsx": "^2.0.0", + "clsx": "^2.1.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.14.0", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.14.0.tgz", - "integrity": "sha512-SYBOVCatVDUf/lbrLGah09bHhX5WfUXg7kSskfLILr6SvKRni0NLp0aonxQ0SMALVVK3Qwa6cW4CdWuwS0gC1w==" + "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==" }, "@mui/icons-material": { - "version": "5.14.0", - "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.14.0.tgz", - "integrity": "sha512-z7lYNteDi1GMkF9JP/m2RWuCYK1M/FlaeBSUK7/IhIYzIXNhAVjfD8jRq5vFBV31qkEi2aGBS2z5SfLXwH6U0A==", + "version": "5.15.16", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.15.16.tgz", + "integrity": "sha512-s8vYbyACzTNZRKv+20fCfVXJwJqNcVotns2EKnu1wmAga6wv2LAo5kB1d5yqQqZlMFtp34EJvRXf7cy8X0tJVA==", "peer": true, "requires": { - "@babel/runtime": "^7.22.5" + "@babel/runtime": "^7.23.9" } }, "@mui/lab": { - "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==" - } + "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" } }, "@mui/material": { - "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", + "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", "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.2.0", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", - "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + "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==" } } }, "@mui/private-theming": { - "version": "5.13.7", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.13.7.tgz", - "integrity": "sha512-qbSr+udcij5F9dKhGX7fEdx2drXchq7htLNr2Qg2Ma+WJ6q0ERlEqGSBiPiVDJkptcjeVL4DGmcf1wl5+vD4EA==", + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.15.14.tgz", + "integrity": "sha512-UH0EiZckOWcxiXLX3Jbb0K7rC8mxTr9L9l6QhOZxYc4r8FHUkefltV9VDGLrzCaWh30SQiJvAEd7djX3XXY6Xw==", "requires": { - "@babel/runtime": "^7.22.5", - "@mui/utils": "^5.13.7", + "@babel/runtime": "^7.23.9", + "@mui/utils": "^5.15.14", "prop-types": "^15.8.1" } }, "@mui/styled-engine": { - "version": "5.13.2", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.13.2.tgz", - "integrity": "sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw==", + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.15.14.tgz", + "integrity": "sha512-RILkuVD8gY6PvjZjqnWhz8fu68dVkqhM5+jYWfB5yhlSQKg+2rHkmEwm75XIeAqI3qwOndK6zELK5H6Zxn4NHw==", "requires": { - "@babel/runtime": "^7.21.0", + "@babel/runtime": "^7.23.9", "@emotion/cache": "^11.11.0", - "csstype": "^3.1.2", + "csstype": "^3.1.3", "prop-types": "^15.8.1" } }, "@mui/system": { - "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", + "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", "prop-types": "^15.8.1" } }, "@mui/types": { - "version": "7.2.11", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.11.tgz", - "integrity": "sha512-KWe/QTEsFFlFSH+qRYf3zoFEj3z67s+qAuSnMMg+gFwbxG7P96Hm6g300inQL1Wy///gSRb8juX7Wafvp93m3w==", + "version": "7.2.14", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.14.tgz", + "integrity": "sha512-MZsBZ4q4HfzBsywtXgM1Ksj6HDThtiwmOKUXH1pKYISI9gAVXCNHNpo7TlGoGrBaYWZTdNoirIN7JsQcQUjmQQ==", "requires": {} }, "@mui/utils": { - "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==", + "version": "5.15.14", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.15.14.tgz", + "integrity": "sha512-0lF/7Hh/ezDv5X7Pry6enMsbYyGKjADzvHyo3Qrc/SSlTsQ1VkbDMbH0m2t3OR5iIVLwMoxwM7yGd+6FCMtTFA==", "requires": { - "@babel/runtime": "^7.23.6", + "@babel/runtime": "^7.23.9", "@types/prop-types": "^15.7.11", "prop-types": "^15.8.1", "react-is": "^18.2.0" }, "dependencies": { "react-is": { - "version": "18.2.0", - "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz", - "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==" + "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==" } } }, @@ -19262,9 +19139,9 @@ } }, "@types/react-transition-group": { - "version": "4.4.6", - "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.6.tgz", - "integrity": "sha512-VnCdSxfcm08KjsJVQcfBmhEQAPnLB8G08hAxn39azX1qYBQ/5RVQuoHuKIcfKOdncuaUvEpFKFzEvbtIMsfVew==", + "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==", "requires": { "@types/react": "*" } @@ -20430,9 +20307,9 @@ } }, "clsx": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", - "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==" + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==" }, "coa": { "version": "2.0.2", @@ -20755,9 +20632,9 @@ } }, "csstype": { - "version": "3.1.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", - "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==" + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "csv": { "version": "6.3.1", diff --git a/frontend/package.json b/frontend/package.json index 8eb40cf3c7c9c..dbde2fbe44e54 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": "^18.1.2", + "@czi-sds/components": "^20.4.0", "@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 7edb6422e03c8..4c7cd785d5da5 100644 --- a/frontend/src/common/theme.ts +++ b/frontend/src/common/theme.ts @@ -1,6 +1,6 @@ import { CommonThemeProps, - defaultAppTheme, + SDSAppTheme, getColors, getCorners, getFontWeights, @@ -11,7 +11,7 @@ import { } from "@czi-sds/components"; import { createTheme } from "@mui/material/styles"; -import { Inter } from "next/font/google"; +import { Inter, IBM_Plex_Mono } from "next/font/google"; export const INTER_FONT_CSS_VARIABLE = "--font-inter"; @@ -29,15 +29,24 @@ export const inter = Inter({ variable: "--font-inter", }); -const { fontWeights } = defaultAppTheme; +/** + * (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 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 }, - s: { height: 12, width: 12 }, + m: { height: 16, width: 16 }, // (masoudmanson): SDS doesn't have a medium icon size! + s: { height: 16, width: 16 }, // (masoudmanson): Used to be 12px xl: { height: 32, width: 32 }, - xs: { height: 8, width: 8 }, + xs: { height: 12, width: 12 }, // (masoudmanson): Used to be 8px }; const spacing = { @@ -75,125 +84,259 @@ 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: inter.style.fontFamily, + fontFamily: { + body: inter.style.fontFamily, + caps: inter.style.fontFamily, + code: ibm_plex_mono.style.fontFamily, + header: inter.style.fontFamily, + tabular: inter.style.fontFamily, + }, styles: { body: { - 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", + 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", + }, }, - xxs: { - fontSize: 12, - fontWeight: fontWeights.regular, - letterSpacing: "0px", - lineHeight: "16px", - }, - xxxs: { - fontSize: 11, - fontWeight: fontWeights.regular, - letterSpacing: "-0.05px", - lineHeight: "16px", + 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", + }, }, }, caps: { - xxs: { - fontSize: 12, - fontWeight: fontWeights.semibold, - letterSpacing: "0.36px", - lineHeight: "16px", - textTransform: "uppercase" as const, + 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, + }, }, - xxxs: { - fontSize: 11, - fontWeight: fontWeights.semibold, - letterSpacing: "0.33px", - 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, + }, }, - xxxxs: { - fontSize: 10, - fontWeight: fontWeights.semibold, - letterSpacing: "1.0px", - lineHeight: "12px", - 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, + }, }, }, header: { - 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", + 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", + }, }, - xxs: { - fontSize: 12, - fontWeight: fontWeights.semibold, - letterSpacing: "0px", - lineHeight: "16px", + }, + 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, + }, }, - xxxs: { - fontSize: 11, - fontWeight: fontWeights.semibold, - letterSpacing: "0px", - lineHeight: "16px", + 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, + }, }, }, }, @@ -206,7 +349,7 @@ const customTheme = { typography, }; -const themeOptions = { ...defaultAppTheme, ...customTheme }; +const themeOptions = { ...SDSAppTheme, ...customTheme }; // Colors @@ -226,62 +369,69 @@ export const textSecondary = (props: CommonThemeProps) => getPalette(props)?.text?.secondary; export const primary100 = (props: CommonThemeProps) => - getColors(props)?.primary[100]; + getColors(props)?.blue[100]; export const primary200 = (props: CommonThemeProps) => - getColors(props)?.primary[200]; + getColors(props)?.blue[200]; export const primary300 = (props: CommonThemeProps) => - getColors(props)?.primary[300]; + getColors(props)?.blue[300]; export const primary400 = (props: CommonThemeProps) => - getColors(props)?.primary[400]; + getColors(props)?.blue[400]; export const primary500 = (props: CommonThemeProps) => - getColors(props)?.primary[500]; + getColors(props)?.blue[500]; export const primary600 = (props: CommonThemeProps) => - getColors(props)?.primary[600]; + getColors(props)?.blue[600]; -const infoColors = { - "100": primaryColors["100"], - "200": primaryColors["200"], - "400": primaryColors["400"], - "600": primaryColors["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 + */ + +// const infoColors = { +// "100": primaryColors["100"], +// "200": primaryColors["200"], +// "400": primaryColors["400"], +// "600": primaryColors["600"], +// }; -themeOptions.colors.primary = primaryColors; -themeOptions.colors.info = infoColors; +// themeOptions.colors.info = infoColors; export const success100 = (props: CommonThemeProps) => - getColors(props)?.success[100]; + getColors(props)?.green[100]; export const success400 = (props: CommonThemeProps) => - getColors(props)?.success[400]; + getColors(props)?.green[400]; export const success500 = (props: CommonThemeProps) => - getColors(props)?.success[500]; + getColors(props)?.green[500]; export const success600 = (props: CommonThemeProps) => - getColors(props)?.success[600]; + getColors(props)?.green[600]; export const warning100 = (props: CommonThemeProps) => - getColors(props)?.warning[100]; + getColors(props)?.yellow[100]; export const warning400 = (props: CommonThemeProps) => - getColors(props)?.warning[400]; + getColors(props)?.yellow[400]; export const warning500 = (props: CommonThemeProps) => - getColors(props)?.warning[500]; + getColors(props)?.yellow[500]; -export const error100 = (props: CommonThemeProps) => - getColors(props)?.error[100]; +export const error100 = (props: CommonThemeProps) => getColors(props)?.red[100]; -export const error400 = (props: CommonThemeProps) => - getColors(props)?.error[400]; +export const error400 = (props: CommonThemeProps) => getColors(props)?.red[400]; -export const error500 = (props: CommonThemeProps) => - getColors(props)?.error[500]; +export const error500 = (props: CommonThemeProps) => getColors(props)?.red[500]; export const grey100 = (props: CommonThemeProps) => getColors(props)?.gray[100]; export const gray100 = grey100; @@ -306,11 +456,14 @@ export const grayWhite = greyWhite; themeOptions.colors.gray = { ...themeOptions.colors.gray, "400": "#999999" }; -export const beta100 = (props: CommonThemeProps) => getColors(props)?.beta[100]; +export const beta100 = (props: CommonThemeProps) => + getColors(props)?.purple[100]; -export const beta400 = (props: CommonThemeProps) => getColors(props)?.beta[400]; +export const beta400 = (props: CommonThemeProps) => + getColors(props)?.purple[400]; -export const beta600 = (props: CommonThemeProps) => getColors(props)?.beta[600]; +export const beta600 = (props: CommonThemeProps) => + getColors(props)?.purple[600]; export const OFF_WHITE = "#f8f8f8"; diff --git a/frontend/src/components/BottomBanner/index.tsx b/frontend/src/components/BottomBanner/index.tsx index 16127eaa7b241..9d95bb26a1bc3 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 @@ -25,7 +24,6 @@ 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 1342600629bb9..60a11b9d9179c 100644 --- a/frontend/src/components/CreateCollectionModal/components/Content/index.tsx +++ b/frontend/src/components/CreateCollectionModal/components/Content/index.tsx @@ -396,7 +396,10 @@ const Content: FC = (props) => { * Handles change to selection of consortia. * @param selectedConsortia - Selected consortia. */ - function handleConsortiaChange(selectedConsortia: DropdownValue) { + function handleConsortiaChange( + _: React.SyntheticEvent, + selectedConsortia: DropdownValue + ) { setConsortia(sortConsortia(selectedConsortia)); } diff --git a/frontend/src/components/CreateCollectionModal/index.tsx b/frontend/src/components/CreateCollectionModal/index.tsx index 88f108912bfa6..3fe456fffa9ed 100644 --- a/frontend/src/components/CreateCollectionModal/index.tsx +++ b/frontend/src/components/CreateCollectionModal/index.tsx @@ -25,7 +25,10 @@ const AsyncCTA = loadable( /*webpackChunkName: 'CreateCollectionModalCTA' */ import("./components/CTA") ); -const CreateCollectionButton = (props: Partial) => ( +const CreateCollectionButton = ( + // Omit is a temporary workaround until SDS fixes button typing + props: Omit +) => ( Create Collection diff --git a/frontend/src/components/GeneInfoSideBar/index.tsx b/frontend/src/components/GeneInfoSideBar/index.tsx index c18845d348ddf..48297d49d813d 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 cfa9b8f5f0820..9285aaa0dd766 100644 --- a/frontend/src/components/Header/components/CuratorAPIKeyGenerator/index.tsx +++ b/frontend/src/components/Header/components/CuratorAPIKeyGenerator/index.tsx @@ -48,6 +48,10 @@ export default function CuratorAPIKeyGenerator(): JSX.Element { [] ); + const handleButtonClose = useCallback((_: DialogOnCloseParams[0]) => { + setIsOpen(false); + }, []); + const copyAPIKey = useCallback(() => { navigator.clipboard.writeText(apiKeyResponse.current.key || ""); Toast.show({ @@ -75,7 +79,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 d354058662809..28f7a0e6a3bbb 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 f60e84268fa0e..7362add628586 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 e978e8e95f98d..89b8db5583b1d 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" - sdsIcon="xMarkCircle" + icon="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 b77ad573c044e..8a1eabd5fceff 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 cc87e2f644c3f..42684032f4332 100644 --- a/frontend/src/components/common/Form/Dropdown/index.tsx +++ b/frontend/src/components/common/Form/Dropdown/index.tsx @@ -1,7 +1,9 @@ import { - DefaultDropdownMenuOption, + DefaultAutocompleteOption, + DropdownProps, Dropdown as SDSDropdown, } from "@czi-sds/components"; +import { AutocompleteValue } from "@mui/base"; import { FormLabelText, Optional, @@ -11,21 +13,24 @@ import { DropdownPopper, } from "src/components/common/Form/Dropdown/style"; -type onChangeFn = (options: Value) => void; -export type Value = - | DefaultDropdownMenuOption - | DefaultDropdownMenuOption[] - | null; +export type Value = AutocompleteValue< + DefaultAutocompleteOption, + boolean | undefined, + false, + false +>; -interface Props { +interface Props + extends DropdownProps< + DefaultAutocompleteOption, + boolean | undefined, + false, + false + > { disablePortal?: boolean; label: string; - multiple?: boolean; - onChange: onChangeFn; optionalField?: boolean; - options: DefaultDropdownMenuOption[]; text?: string; - value: Value; } const DropdownMenuProps = { @@ -59,26 +64,26 @@ export default function Dropdown({ {optionalField && (optional)} )} - closeOnBlur DropdownMenuProps={DropdownMenuProps} InputDropdownProps={{ sdsStyle: "square" }} isTriggerChangeOnOptionClick - label={getDropdownLabel(value, label)} + label={getDropdownLabel(label, value)} multiple={multiple} onChange={onChange} options={options} - PopperComponent={({ ...props }) => ( - - )} + PopperComponent={(popperProps) => { + const { anchorEl } = popperProps; + + return ( + + ); + }} value={value} /> @@ -92,7 +97,7 @@ export default function Dropdown({ * @param label - Default "placeholder" label. * @returns dropdown label. */ -function getDropdownLabel(value: Value, label: string): string { +function getDropdownLabel(label: string, value?: Value): string { if (!value || (Array.isArray(value) && value.length === 0)) { return label; } @@ -106,7 +111,7 @@ function getDropdownLabel(value: Value, label: string): 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 73f58f3806f0b..858b21adcd118 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 0f976ace7422b..d3c99600d75ae 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 82ee3745ccd56..53a7c9fcc525d 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 324fb0b9a8e39..469e704ebc20c 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 67f62d686d703..60db03e0bf9cd 100644 --- a/frontend/src/components/common/RightSideBar/index.tsx +++ b/frontend/src/components/common/RightSideBar/index.tsx @@ -1,4 +1,4 @@ -import { ButtonIcon } from "@czi-sds/components"; +import { Button } from "@czi-sds/components"; import { Children, memo, ReactElement, ReactNode } from "react"; import { Position, @@ -56,8 +56,9 @@ export default memo(function RightSideBar({ {child1.props.title} {child1.props.handleClose && ( - child1.props.handleClose()} sdsType="tertiary" @@ -75,8 +76,9 @@ export default memo(function RightSideBar({ {child2.props.title} {child2.props.handleClose && ( - child2.props.handleClose()} sdsType="tertiary" diff --git a/frontend/src/components/common/SideBar/index.tsx b/frontend/src/components/common/SideBar/index.tsx index a7e2ec5078940..cfe39c2665191 100644 --- a/frontend/src/components/common/SideBar/index.tsx +++ b/frontend/src/components/common/SideBar/index.tsx @@ -89,8 +89,8 @@ export default function SideBar({ handleExpandedClick(!isExpanded)} sdsStyle="minimal" - sdsType="minimal" size="large" > diff --git a/frontend/src/pages/docs/[...slug].tsx b/frontend/src/pages/docs/[...slug].tsx index bbc7f5a0486f1..0582ca0283224 100644 --- a/frontend/src/pages/docs/[...slug].tsx +++ b/frontend/src/pages/docs/[...slug].tsx @@ -221,7 +221,7 @@ const DirectoryListItem = ({ > {directory.dirName.split("__")[1]}{" "} @@ -373,7 +373,12 @@ const DocContent = styled.div` } `; -const StyledImage = styled(Image)(); +const StyledImage = styled(Image)` + object-fit: contain; + width: 100% !important; + position: relative !important; + height: unset !important; +`; const ImageContainer = styled.div` width: 100%; @@ -382,13 +387,6 @@ const ImageContainer = styled.div` > span { position: unset !important; } - - ${StyledImage} { - object-fit: contain; - width: 100% !important; - position: relative !important; - height: unset !important; - } `; const DocsImage = ({ src }: ImageProps) => { diff --git a/frontend/src/views/CellGuide/components/CellGuideCard/components/Description/index.tsx b/frontend/src/views/CellGuide/components/CellGuideCard/components/Description/index.tsx index 8c59c9bffea9c..9e3d890526cb5 100644 --- a/frontend/src/views/CellGuide/components/CellGuideCard/components/Description/index.tsx +++ b/frontend/src/views/CellGuide/components/CellGuideCard/components/Description/index.tsx @@ -348,7 +348,7 @@ export default function Description({ ( {row.symbol}{" "} - setGeneInfoGene(row.symbol.toUpperCase())} /> {showEye && ( diff --git a/frontend/src/views/CellGuide/components/CellGuideCard/components/SourceDataTable/index.tsx b/frontend/src/views/CellGuide/components/CellGuideCard/components/SourceDataTable/index.tsx index 8de5bc42eb1f8..a1cf6f9406874 100644 --- a/frontend/src/views/CellGuide/components/CellGuideCard/components/SourceDataTable/index.tsx +++ b/frontend/src/views/CellGuide/components/CellGuideCard/components/SourceDataTable/index.tsx @@ -199,7 +199,7 @@ function createTissueContent( return tissueNames.length <= (isPastBreakpoint ? 1 : 3) ? ( tissueNames.map((tissue, index) => ( - + )) ) : ( @@ -215,7 +215,7 @@ function createTissueContent( > @@ -235,7 +235,7 @@ function createDiseaseContent( .sort((a, b) => (a === "normal" ? -1 : b === "normal" ? 1 : 0)) .map((disease, index) => ( - {} + )) ) : ( @@ -243,7 +243,7 @@ function createDiseaseContent( {/* If 'normal' exists then have it outside of the overflow tag */} {diseaseNames.includes("normal") && !isPastBreakpoint && ( - + )} @@ -279,7 +279,7 @@ const createOrganismContent = ( return organismNames.length <= (isPastBreakpoint ? 1 : 3) ? ( organismNames.map((organism, index) => ( - {} + )) ) : ( @@ -296,7 +296,7 @@ const createOrganismContent = ( > diff --git a/frontend/src/views/CellGuide/components/CellGuideCard/index.tsx b/frontend/src/views/CellGuide/components/CellGuideCard/index.tsx index 2851f5c1ef5dc..046efa812568c 100644 --- a/frontend/src/views/CellGuide/components/CellGuideCard/index.tsx +++ b/frontend/src/views/CellGuide/components/CellGuideCard/index.tsx @@ -43,10 +43,10 @@ import { TISSUE_AGNOSTIC, } from "./components/MarkerGeneTables/constants"; import { - DefaultDropdownMenuOption, Dropdown, InputDropdownProps, - ButtonIcon, + Button, + DefaultAutocompleteOption, } from "@czi-sds/components"; import { useComponentWidth } from "./components/common/hooks/useIsComponentPastBreakpoint"; import { DEFAULT_ONTOLOGY_HEIGHT } from "../common/OntologyDagView/common/constants"; @@ -57,7 +57,7 @@ import { useComputationalMarkerGenesTableRowsAndFilters } from "./components/Mar import { useConnect } from "./connect"; import { SDSOrgan } from "src/views/CellGuide/components/CellGuideCard/types"; import { getCellTypeLink } from "src/views/CellGuide/common/utils"; -import { TextField } from "@mui/material"; +import { AutocompleteValue, TextField } from "@mui/material"; export const SDS_INPUT_DROPDOWN_PROPS: InputDropdownProps = { sdsStyle: "square", @@ -135,7 +135,8 @@ export default function CellGuideCard({ const titleizedCellTypeName = titleize(cellTypeName); const handleChangeOrgan = ( - option: DefaultDropdownMenuOption | null = null + _: React.SyntheticEvent, // event + option: AutocompleteValue ) => { const { name, id } = (option || {}) as SDSOrgan; @@ -154,7 +155,10 @@ export default function CellGuideCard({ router.push(url, url, { scroll: false }); }; - const handleChangeOrganism = (option: DefaultDropdownMenuOption | null) => { + const handleChangeOrganism = ( + _: React.SyntheticEvent, + option: AutocompleteValue + ) => { if (!option || option.name === selectedOrganism.name) return; setSelectedOrganism(option); track(EVENTS.CG_SELECT_ORGANISM, { organism: option.name }); @@ -213,7 +217,7 @@ export default function CellGuideCard({ }). ${rawSeoDescription}`; const OrganismSelectorDropdown = ( - InputDropdownProps={SDS_INPUT_DROPDOWN_PROPS} search label={selectedOrganism?.name} @@ -226,7 +230,7 @@ export default function CellGuideCard({ const dropdownComponents = ( {OrganismSelectorDropdown} - InputDropdownProps={SDS_INPUT_DROPDOWN_PROPS} search label={tissueName} @@ -303,11 +307,12 @@ export default function CellGuideCard({ {tooltipContent.title} - { setTooltipContent(null); }} - sdsIcon="xMark" + icon="XMark" + sdsStyle="icon" sdsSize="medium" /> @@ -334,7 +339,7 @@ export default function CellGuideCard({ label={cellTypeId} sdsType="secondary" sdsStyle="square" - color="gray" + color="neutral" hover /> diff --git a/frontend/src/views/CellGuide/components/CellGuideMobileHeader/index.tsx b/frontend/src/views/CellGuide/components/CellGuideMobileHeader/index.tsx index d4549451abb5b..162467e08f1fe 100644 --- a/frontend/src/views/CellGuide/components/CellGuideMobileHeader/index.tsx +++ b/frontend/src/views/CellGuide/components/CellGuideMobileHeader/index.tsx @@ -1,6 +1,6 @@ import { useState, useRef, useEffect } from "react"; import CellGuideCardSearchBar from "../CellGuideCardSearchBar"; -import { ButtonIcon } from "@czi-sds/components"; +import { Button } from "@czi-sds/components"; import { MobileHeader, MobileHeaderWrapper, @@ -57,8 +57,8 @@ const CellGuideMobileHeader = ({ <> {/* Flex Item Left */}
- { setSearchIsOpen(true); @@ -71,8 +71,8 @@ const CellGuideMobileHeader = ({ {/* Flex Item Right */}
- setPageNavIsOpen && setPageNavIsOpen(!pageNavIsOpen)} />
diff --git a/frontend/src/views/CellGuide/components/TissueCard/index.tsx b/frontend/src/views/CellGuide/components/TissueCard/index.tsx index ca82386df7eb9..9afefe6b095bd 100644 --- a/frontend/src/views/CellGuide/components/TissueCard/index.tsx +++ b/frontend/src/views/CellGuide/components/TissueCard/index.tsx @@ -41,9 +41,10 @@ import { StyledOntologyId } from "../CellGuideCard/components/Description/style" import { useComponentWidth } from "../CellGuideCard/components/common/hooks/useIsComponentPastBreakpoint"; import { track } from "src/common/analytics"; import { EVENTS } from "src/common/analytics/events"; -import { DefaultDropdownMenuOption, Dropdown } from "@czi-sds/components"; +import { DefaultAutocompleteOption, Dropdown } from "@czi-sds/components"; import { SDS_INPUT_DROPDOWN_PROPS } from "../CellGuideCard"; import { ORGANISM_NAME_TO_TAXON_ID_MAPPING } from "src/common/queries/cellGuide"; +import { AutocompleteValue } from "@mui/base"; interface Props { // From getServerSideProps @@ -65,7 +66,10 @@ export default function TissueCard({ description, name }: Props): JSX.Element { Object.keys(ORGANISM_NAME_TO_TAXON_ID_MAPPING)[0] ); - const handleChangeOrganism = (option: DefaultDropdownMenuOption | null) => { + const handleChangeOrganism = ( + _: React.SyntheticEvent, + option: AutocompleteValue + ) => { if (!option || option.name === tissueCardSelectedOrganism) return; setTissueCardSelectedOrganism(option.name); track(EVENTS.CG_SELECT_ORGANISM, { organism: option.name }); @@ -180,12 +184,12 @@ export default function TissueCard({ description, name }: Props): JSX.Element { label={tissueId} sdsType="secondary" sdsStyle="square" - color="gray" + color="neutral" hover /> - InputDropdownProps={SDS_INPUT_DROPDOWN_PROPS} search label={tissueCardSelectedOrganism} diff --git a/frontend/src/views/CellGuide/components/common/OntologyDagView/index.tsx b/frontend/src/views/CellGuide/components/common/OntologyDagView/index.tsx index a35b076bb5c06..3e9773440fe25 100644 --- a/frontend/src/views/CellGuide/components/common/OntologyDagView/index.tsx +++ b/frontend/src/views/CellGuide/components/common/OntologyDagView/index.tsx @@ -492,8 +492,8 @@ export default function OntologyDagView({ <> diff --git a/frontend/src/views/CensusDirectory/components/Project/ProjectButtons/components/EmbeddingButton/index.tsx b/frontend/src/views/CensusDirectory/components/Project/ProjectButtons/components/EmbeddingButton/index.tsx index 044dd927454bd..b7fc632e98f27 100644 --- a/frontend/src/views/CensusDirectory/components/Project/ProjectButtons/components/EmbeddingButton/index.tsx +++ b/frontend/src/views/CensusDirectory/components/Project/ProjectButtons/components/EmbeddingButton/index.tsx @@ -45,7 +45,7 @@ function EmbeddingButton(props: EmbeddingButtonProps) { - + Code example requires the latest version (1.13.0) of the Census API package. diff --git a/frontend/src/views/Collection/components/CollectionActions/components/MoreDropdown/components/Menu/index.tsx b/frontend/src/views/Collection/components/CollectionActions/components/MoreDropdown/components/Menu/index.tsx index a688a578aaa4f..f820ba7d98346 100644 --- a/frontend/src/views/Collection/components/CollectionActions/components/MoreDropdown/components/Menu/index.tsx +++ b/frontend/src/views/Collection/components/CollectionActions/components/MoreDropdown/components/Menu/index.tsx @@ -23,27 +23,27 @@ interface MenuProps extends Partial> { const DeleteButton = ({ isRevision, ...props -}: Partial> & { isRevision: boolean }) => { +}: Partial> & { isRevision: boolean }) => { return ( {isRevision ? "Cancel Revision" : "Delete Collection"} ); }; -const EditButton = (props: Partial>) => { +const EditButton = (props: Partial>) => { return ( Edit Details diff --git a/frontend/src/views/Collection/components/CollectionActions/components/MoreDropdown/index.tsx b/frontend/src/views/Collection/components/CollectionActions/components/MoreDropdown/index.tsx index f5ee2f5040029..2bf28bc10fba9 100644 --- a/frontend/src/views/Collection/components/CollectionActions/components/MoreDropdown/index.tsx +++ b/frontend/src/views/Collection/components/CollectionActions/components/MoreDropdown/index.tsx @@ -39,7 +39,7 @@ const MoreDropdown = ({ data-testid="collection-more-button" onClick={onOpen} open={open} - sdsIcon="dotsHorizontal" + icon="DotsHorizontal" sdsSize="small" sdsType="tertiary" /> diff --git a/frontend/src/views/WheresMyGeneV2/common/store/reducer.ts b/frontend/src/views/WheresMyGeneV2/common/store/reducer.ts index 07e57078ad4a5..0fe35c9004c3c 100644 --- a/frontend/src/views/WheresMyGeneV2/common/store/reducer.ts +++ b/frontend/src/views/WheresMyGeneV2/common/store/reducer.ts @@ -15,7 +15,7 @@ export interface PayloadAction { export interface NotificationProps { message: string; notificationId?: string; - intent: "info" | "success" | "warning" | "error"; + intent: "info" | "negative" | "positive" | "notice"; sdsIcon: keyof IconNameToSizes; sdsSize: "s" | "l" | "xs" | "xl"; label: string; diff --git a/frontend/src/views/WheresMyGeneV2/components/CellInfoSideBar/index.tsx b/frontend/src/views/WheresMyGeneV2/components/CellInfoSideBar/index.tsx index ec306838f14b4..fd1f723f3a5d2 100644 --- a/frontend/src/views/WheresMyGeneV2/components/CellInfoSideBar/index.tsx +++ b/frontend/src/views/WheresMyGeneV2/components/CellInfoSideBar/index.tsx @@ -155,7 +155,7 @@ function CellInfoSideBar({ - + + 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 79b74479f9613..1ef6bc61c256f 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,10 +7,18 @@ import { fontHeaderL, } from "@czi-sds/components"; import styled from "@emotion/styled"; -import { error500, spacesDefault, spacesXl, spacesXxs } from "src/common/theme"; +import { + error400, + 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 46b8555e6dc45..e611715e416f9 100644 --- a/frontend/src/views/WheresMyGeneV2/components/Filters/components/Organism/connect.ts +++ b/frontend/src/views/WheresMyGeneV2/components/Filters/components/Organism/connect.ts @@ -9,6 +9,7 @@ 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); @@ -51,7 +52,10 @@ export const useConnect = () => { return result; }, [organisms]); - function handleOnChange(organism: IOrganism | null): void { + function handleOnChange( + _: React.SyntheticEvent, + organism: AutocompleteValue + ): 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 029d329072175..8d952693a6043 100644 --- a/frontend/src/views/WheresMyGeneV2/components/Filters/components/Organism/index.tsx +++ b/frontend/src/views/WheresMyGeneV2/components/Filters/components/Organism/index.tsx @@ -1,8 +1,9 @@ import { EMPTY_ARRAY } from "src/common/constants/utils"; import { StyledDropdown, Wrapper, Label } from "../common/style"; -import { InputDropdownProps, Props, tempOnChange } from "./types"; +import { InputDropdownProps, Props } 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 { @@ -18,10 +19,10 @@ export default function Organism({ isLoading }: Props): JSX.Element { return ( - label={organism?.name || "Select"} options={organisms || EMPTY_ARRAY} - onChange={handleOnChange as tempOnChange} + onChange={handleOnChange} InputDropdownProps={{ ...InputDropdownProps, disabled: isLoading }} data-testid="add-organism" DropdownMenuProps={DropdownMenuProps} diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/components/Sort/connect.ts b/frontend/src/views/WheresMyGeneV2/components/Filters/components/Sort/connect.ts index 6e99826fd0455..98b068d52c3c0 100644 --- a/frontend/src/views/WheresMyGeneV2/components/Filters/components/Sort/connect.ts +++ b/frontend/src/views/WheresMyGeneV2/components/Filters/components/Sort/connect.ts @@ -1,5 +1,5 @@ import { track } from "src/common/analytics"; -import { Props } from "./types"; +import { CellTypeOptionType, Props } from "./types"; import { EVENTS } from "src/common/analytics/events"; import { selectSortBy } from "src/views/WheresMyGeneV2/common/store/actions"; import { SORT_BY } from "src/views/WheresMyGeneV2/common/types"; @@ -13,6 +13,7 @@ import { DEFAULT_INPUT_DROPDOWN_PROPS, GENE_OPTIONS, } from "./constants"; +import { AutocompleteValue } from "@mui/base"; export const useConnect = ({ areFiltersDisabled }: Props) => { const dispatch = useContext(DispatchContext); @@ -41,7 +42,8 @@ export const useConnect = ({ areFiltersDisabled }: Props) => { }, [sortBy]); function cellTypesOnChange( - value: { id?: SORT_BY; name: string } | null + _: React.SyntheticEvent, // event + value: AutocompleteValue ): void { if (!dispatch || !value || cellTypeSelectedOption.name === value.name) return; @@ -53,7 +55,10 @@ export const useConnect = ({ areFiltersDisabled }: Props) => { dispatch(selectSortBy({ cellTypes: value.id as SORT_BY })); } - function genesOnChange(value: { id?: SORT_BY; name: string } | null): void { + function genesOnChange( + _: React.SyntheticEvent, // event + value: AutocompleteValue + ): 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 2b2a10a7a1c61..9779107e6bc9a 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 { Props } from "./types"; +import { CellTypeOptionType, Props } from "./types"; import { useConnect } from "./connect"; import { CELL_TYPE_OPTIONS, GENE_OPTIONS } from "./constants"; @@ -67,7 +67,10 @@ export default function Sort({ areFiltersDisabled }: Props): JSX.Element { - + */} + data-testid="cell-type-sort-dropdown" onChange={cellTypesOnChange} label={cellTypeSelectedOption.name} @@ -113,7 +116,11 @@ export default function Sort({ areFiltersDisabled }: Props): JSX.Element { - + */} + data-testid="gene-sort-dropdown" onChange={genesOnChange} label={geneSelectedOption.name} diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/components/Sort/types.ts b/frontend/src/views/WheresMyGeneV2/components/Filters/components/Sort/types.ts index eef023aaf53bf..e459be2e1edc1 100644 --- a/frontend/src/views/WheresMyGeneV2/components/Filters/components/Sort/types.ts +++ b/frontend/src/views/WheresMyGeneV2/components/Filters/components/Sort/types.ts @@ -1,3 +1,7 @@ +import { SORT_BY } from "src/views/WheresMyGeneV2/common/types"; + export interface Props { areFiltersDisabled: boolean; } + +export type CellTypeOptionType = { id?: SORT_BY; name: string }; diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/connect.ts b/frontend/src/views/WheresMyGeneV2/components/Filters/connect.ts index 22c48ec34757d..a9aaca588273e 100644 --- a/frontend/src/views/WheresMyGeneV2/components/Filters/connect.ts +++ b/frontend/src/views/WheresMyGeneV2/components/Filters/connect.ts @@ -1,5 +1,4 @@ import { - ComplexFilterProps, DefaultMenuSelectOption, InputDropdownProps, } from "@czi-sds/components"; @@ -254,7 +253,9 @@ export const useConnect = ({ filterOptions, getOptionSelected, isOptionEqualToValue, - } as ComplexFilterProps["DropdownMenuProps"]; + keepSearchOnSelect: true, + width: "fit-content", + }; 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 dc221433d4e0f..b14922259e23d 100644 --- a/frontend/src/views/WheresMyGeneV2/components/Filters/index.tsx +++ b/frontend/src/views/WheresMyGeneV2/components/Filters/index.tsx @@ -1,7 +1,4 @@ -import { - ComplexFilterInputDropdown, - DefaultMenuSelectOption, -} from "@czi-sds/components"; +import { DefaultMenuSelectOption } from "@czi-sds/components"; import { memo } from "react"; import Organism from "./components/Organism"; import Compare from "./components/Compare"; @@ -39,77 +36,65 @@ export default memo(function Filters({ return ( - multiple data-testid="disease-filter" search label="Disease" - options={terms.disease as unknown as DefaultMenuSelectOption[]} + options={terms.disease} onChange={handle.diseasesChange} - value={selected.diseases as unknown as DefaultMenuSelectOption[]} - InputDropdownComponent={ - StyledComplexFilterInputDropdown as typeof ComplexFilterInputDropdown - } + value={selected.diseases} + InputDropdownComponent={StyledComplexFilterInputDropdown} DropdownMenuProps={DropdownMenuProps} InputDropdownProps={InputDropdownProps} /> - multiple data-testid="self-reported-ethnicity-filter" search label="Self-Reported Ethnicity" - options={ - terms.self_reported_ethnicity as unknown as DefaultMenuSelectOption[] - } + options={terms.self_reported_ethnicity} onChange={handle.ethnicitiesChange} - value={selected.ethnicities as unknown as DefaultMenuSelectOption[]} - InputDropdownComponent={ - StyledComplexFilterInputDropdown as typeof ComplexFilterInputDropdown - } + value={selected.ethnicities} + InputDropdownComponent={StyledComplexFilterInputDropdown} DropdownMenuProps={DropdownMenuProps} InputDropdownProps={InputDropdownProps} /> - multiple data-testid="publication-filter" search label="Publication" - options={terms.publication as unknown as DefaultMenuSelectOption[]} + options={terms.publication} onChange={handle.publicationsChange} - value={selected.publications as unknown as DefaultMenuSelectOption[]} - InputDropdownComponent={ - StyledComplexFilterInputDropdown as typeof ComplexFilterInputDropdown - } + value={selected.publications} + InputDropdownComponent={StyledComplexFilterInputDropdown} DropdownMenuProps={DropdownMenuProps} InputDropdownProps={InputDropdownProps} /> - multiple data-testid="sex-filter" search label="Sex" - options={terms.sex as unknown as DefaultMenuSelectOption[]} + options={terms.sex} onChange={handle.sexesChange} - value={selected.sexes as unknown as DefaultMenuSelectOption[]} - InputDropdownComponent={ - StyledComplexFilterInputDropdown as typeof ComplexFilterInputDropdown - } + value={selected.sexes} + InputDropdownComponent={StyledComplexFilterInputDropdown} DropdownMenuProps={DropdownMenuProps} InputDropdownProps={InputDropdownProps} /> - multiple data-testid="tissue-filter" search label="Tissue" - options={terms.tissue as unknown as DefaultMenuSelectOption[]} + options={terms.tissue} onChange={handle.tissuesChange} - value={selected.tissues as unknown as DefaultMenuSelectOption[]} - InputDropdownComponent={ - StyledComplexFilterInputDropdown as typeof ComplexFilterInputDropdown - } + value={selected.tissues} + InputDropdownComponent={StyledComplexFilterInputDropdown} DropdownMenuProps={DropdownMenuProps} InputDropdownProps={InputDropdownProps} /> diff --git a/frontend/src/views/WheresMyGeneV2/components/Filters/style.ts b/frontend/src/views/WheresMyGeneV2/components/Filters/style.ts index 7c6ae1a4bf14f..41b6e4a95ba24 100644 --- a/frontend/src/views/WheresMyGeneV2/components/Filters/style.ts +++ b/frontend/src/views/WheresMyGeneV2/components/Filters/style.ts @@ -10,12 +10,6 @@ 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; } @@ -25,7 +19,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 8020c2d055a98..3b0e3335c2e2f 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 c16b65fe1df47..0bb24cacd9309 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" - sdsIcon="quote" + icon="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 4db0c74f20017..c3c9115b41916 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" - sdsIcon="download" + icon="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 bfcfd1402c9fe..14fdda08e586f 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" - sdsIcon="infoCircle" + icon="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 78a8fe28413f5..50647bb273457 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; - .MuiBadge-badge { + .base-Badge-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 526b6c179c19c..f0003e5d40750 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, DefaultAutocompleteOption } from "@czi-sds/components"; +import { Autocomplete } from "@czi-sds/components"; import React, { ReactChild, SyntheticEvent, @@ -263,17 +263,21 @@ export default function GeneSearchBar({ function handleSelectGenes( _: unknown, - genes: DefaultAutocompleteOption[] | null, + selectedOptions: (Gene | string)[] | null, // Adjusted to accept an array of Gene or string __: unknown, ___: unknown ) { if (!dispatch) return; - dispatch(selectGenes(genes?.map((gene) => gene.name) || EMPTY_ARRAY)); + const geneNames = + selectedOptions?.map((option) => + typeof option === "string" ? option : option.name + ) || EMPTY_ARRAY; + dispatch(selectGenes(geneNames)); - if (genes && genes.length > 0) { + if (selectedOptions && selectedOptions.length > 0) { track(EVENTS.WMG_SELECT_GENE, { - genes: genes.map((gene) => gene.name), + genes: geneNames, }); } } 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 110cfd83e8e78..ae3f016835c95 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({ } }} > - + - className={EXCLUDE_IN_SCREENSHOT_CLASS_NAME} data-testid="cell-type-search" multiple diff --git a/frontend/src/views/WheresMyGeneV2/components/Main/index.tsx b/frontend/src/views/WheresMyGeneV2/components/Main/index.tsx index e94f57987efd4..654dc39de43fd 100644 --- a/frontend/src/views/WheresMyGeneV2/components/Main/index.tsx +++ b/frontend/src/views/WheresMyGeneV2/components/Main/index.tsx @@ -152,7 +152,7 @@ export default function WheresMyGene(): JSX.Element { )} - + { - const filterLabel = `${getTestID(filterName)} [role="button"]`; - return await page.locator(filterLabel).textContent(); + return await page + .getByTestId(filterName) + .locator(".MuiChip-label") + .textContent(); }; export async function compareSvg( page: Page, diff --git a/frontend/tests/utils/wmgUtils.ts b/frontend/tests/utils/wmgUtils.ts index 5b92d78babaa6..dcd23b54ecf19 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 { getTestID, getText } from "tests/utils/selectors"; +import { getText } from "tests/utils/selectors"; import { countLocator, expandTissue, @@ -172,10 +172,13 @@ export const selectSecondaryFilterOption = async ( // close the secondary filter pop-up await page.keyboard.press("Escape"); - const filter_label = `${getTestID(filterName)} [role="button"]`; + const filterLabel = await page + .getByTestId(filterName) + .locator(".MuiChip-label") + .first(); // expect the selected filter chip to be visible under the dropdown button - await expect(page.locator(filter_label).first()).toBeVisible(); + await expect(filterLabel).toBeVisible(); }; export const pickOptions = async (page: Page, n: number) => { @@ -331,7 +334,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.getByTestId("ClearIcon"); + const deleteIcon = cellTypeTag.locator("svg"); await deleteIcon.click(); const afterCellTypeNames = await getCellTypeNames(page); expect(afterCellTypeNames.length).toBeLessThan(beforeCellTypeNames.length);