From 39b94125d5f891417332056e9085032f0bf1b06a Mon Sep 17 00:00:00 2001 From: Speedauge <192351844+Speedauge@users.noreply.github.com> Date: Sun, 18 May 2025 23:51:39 +0200 Subject: [PATCH] style : improvement of the thread slider explanation (#30) --- package-lock.json | 64 +++++++++---------- .../engineSettings/engineSettingsDialog.tsx | 60 +++++++++++------ 2 files changed, 74 insertions(+), 50 deletions(-) diff --git a/package-lock.json b/package-lock.json index 67177c0..29483d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1811,9 +1811,9 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.3.0.tgz", - "integrity": "sha512-/d8NwSuC3rMwCjswmGB3oXC4sdDuhIUJ8inVQAxGrADJhf0eq/kmy+foFKvpYhHl2siOZR+MLdFttw6/Bzqtqg==", + "version": "6.4.11", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.4.11.tgz", + "integrity": "sha512-CzAQs9CTzlwbsF9ZYB4o4lLwBv1/qNE264NjuYao+ctAXsmlPtYa8RtER4UsUXSMxNN9Qi+aQdYcKl2sUpnmAw==", "license": "MIT", "funding": { "type": "opencollective", @@ -1866,16 +1866,16 @@ } }, "node_modules/@mui/material": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.3.0.tgz", - "integrity": "sha512-qhlTFyRMxfoVPxUtA5e8IvqxP0dWo2Ij7cvot7Orag+etUlZH+3UwD8gZGt+3irOoy7Ms3UNBflYjwEikUXtAQ==", + "version": "6.4.11", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.4.11.tgz", + "integrity": "sha512-k2D3FLJS+/qD0qnd6ZlAjGFvaaxe1Dl10NyvpeDzIebMuYdn8VqYe6XBgGueEAtnzSJM4V03VD9kb5Fi24dnTA==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.26.0", - "@mui/core-downloads-tracker": "^6.3.0", - "@mui/system": "^6.3.0", - "@mui/types": "^7.2.20", - "@mui/utils": "^6.3.0", + "@mui/core-downloads-tracker": "^6.4.11", + "@mui/system": "^6.4.11", + "@mui/types": "~7.2.24", + "@mui/utils": "^6.4.9", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.12", "clsx": "^2.1.1", @@ -1894,7 +1894,7 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@mui/material-pigment-css": "^6.3.0", + "@mui/material-pigment-css": "^6.4.11", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -1921,13 +1921,13 @@ "license": "MIT" }, "node_modules/@mui/private-theming": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.3.0.tgz", - "integrity": "sha512-tdS8jvqMokltNTXg6ioRCCbVdDmZUJZa/T9VtTnX2Lwww3FTgCakst9tWLZSxm1fEE9Xp0m7onZJmgeUmWQYVw==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.4.9.tgz", + "integrity": "sha512-LktcVmI5X17/Q5SkwjCcdOLBzt1hXuc14jYa7NPShog0GBDCDvKtcnP0V7a2s6EiVRlv7BzbWEJzH6+l/zaCxw==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.26.0", - "@mui/utils": "^6.3.0", + "@mui/utils": "^6.4.9", "prop-types": "^15.8.1" }, "engines": { @@ -1948,9 +1948,9 @@ } }, "node_modules/@mui/styled-engine": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.3.0.tgz", - "integrity": "sha512-iWA6eyiPkO07AlHxRUvI7dwVRSc+84zV54kLmjUms67GJeOWVuXlu8ZO+UhCnwJxHacghxnabsMEqet5PYQmHg==", + "version": "6.4.11", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.4.11.tgz", + "integrity": "sha512-74AUmlHXaGNbyUqdK/+NwDJOZqgRQw6BcNvhoWYLq3LGbLTkE+khaJ7soz6cIabE4CPYqO2/QAIU1Z/HEjjpcw==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.26.0", @@ -1982,16 +1982,16 @@ } }, "node_modules/@mui/system": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.3.0.tgz", - "integrity": "sha512-L+8hUHMNlfReKSqcnVslFrVhoNfz/jw7Fe9NfDE85R3KarvZ4O3MU9daF/lZeqEAvnYxEilkkTfDwQ7qCgJdFg==", + "version": "6.4.11", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.4.11.tgz", + "integrity": "sha512-gibtsrZEwnDaT5+I/KloOj/yHluX5G8heknuxBpQOdEQ3Gc0avjSImn5hSeKp8D4thiwZiApuggIjZw1dQguUA==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.26.0", - "@mui/private-theming": "^6.3.0", - "@mui/styled-engine": "^6.3.0", - "@mui/types": "^7.2.20", - "@mui/utils": "^6.3.0", + "@mui/private-theming": "^6.4.9", + "@mui/styled-engine": "^6.4.11", + "@mui/types": "~7.2.24", + "@mui/utils": "^6.4.9", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -2022,9 +2022,9 @@ } }, "node_modules/@mui/types": { - "version": "7.2.20", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.20.tgz", - "integrity": "sha512-straFHD7L8v05l/N5vcWk+y7eL9JF0C2mtph/y4BPm3gn2Eh61dDwDB65pa8DLss3WJfDXYC7Kx5yjP0EmXpgw==", + "version": "7.2.24", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.24.tgz", + "integrity": "sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw==", "license": "MIT", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -2036,13 +2036,13 @@ } }, "node_modules/@mui/utils": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.3.0.tgz", - "integrity": "sha512-MkDBF08OPVwXhAjedyMykRojgvmf0y/jxkBWjystpfI/pasyTYrfdv4jic6s7j3y2+a+SJzS9qrD6X8ZYj/8AQ==", + "version": "6.4.9", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.4.9.tgz", + "integrity": "sha512-Y12Q9hbK9g+ZY0T3Rxrx9m2m10gaphDuUMgWxyV5kNJevVxXYCLclYUCC9vXaIk1/NdNDTcW2Yfr2OGvNFNmHg==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.26.0", - "@mui/types": "^7.2.20", + "@mui/types": "~7.2.24", "@types/prop-types": "^15.7.14", "clsx": "^2.1.1", "prop-types": "^15.8.1", diff --git a/src/sections/engineSettings/engineSettingsDialog.tsx b/src/sections/engineSettings/engineSettingsDialog.tsx index 0ad94f5..6bc7c67 100644 --- a/src/sections/engineSettings/engineSettingsDialog.tsx +++ b/src/sections/engineSettings/engineSettingsDialog.tsx @@ -16,6 +16,7 @@ import { Box, useTheme, } from "@mui/material"; +import React from "react"; import { engineNameAtom, engineDepthAtom, @@ -37,6 +38,9 @@ import { STRONGEST_ENGINE, } from "@/constants"; import { getRecommendedWorkersNb } from "@/lib/engine/worker"; +import IconButton from "@mui/material/IconButton"; +import Popover from "@mui/material/Popover"; +import { Icon } from "@iconify/react"; interface Props { open: boolean; @@ -63,6 +67,15 @@ export default function EngineSettingsDialog({ open, onClose }: Props) { const theme = useTheme(); const isDarkMode = theme.palette.mode === "dark"; + const [anchorEl, setAnchorEl] = React.useState(null); + const handleHelpClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + const handleHelpClose = () => { + setAnchorEl(null); + }; + const helpOpen = Boolean(anchorEl); + useEffect(() => { if (!isEngineSupported(engineName)) { if (Stockfish16_1.isSupported()) { @@ -204,24 +217,35 @@ export default function EngineSettingsDialog({ open, onClose }: Props) { - - - - - - - More threads means quicker analysis but only if your device can - handle them, otherwise it may have the opposite effect. The - estimated best value for your device is{" "} - {getRecommendedWorkersNb()}. - + + + + + + + + + + + More threads means faster analysis, but only if your device can handle them—otherwise, it may have the opposite effect. The estimated optimal value for your device is {getRecommendedWorkersNb()}.
+ Due to privacy restrictions in some browsers, detection may be inaccurate and result in underestimated recommendations.
+ If the recommended value is unusually low, we suggest using a number close to your CPU’s thread count minus 1 or 2. + + +