style : improvement of the thread slider explanation (#30)

This commit is contained in:
Speedauge
2025-05-18 23:51:39 +02:00
committed by GitHub
parent cac16b2ace
commit 39b94125d5
2 changed files with 74 additions and 50 deletions

64
package-lock.json generated
View File

@@ -1811,9 +1811,9 @@
} }
}, },
"node_modules/@mui/core-downloads-tracker": { "node_modules/@mui/core-downloads-tracker": {
"version": "6.3.0", "version": "6.4.11",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.3.0.tgz", "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.4.11.tgz",
"integrity": "sha512-/d8NwSuC3rMwCjswmGB3oXC4sdDuhIUJ8inVQAxGrADJhf0eq/kmy+foFKvpYhHl2siOZR+MLdFttw6/Bzqtqg==", "integrity": "sha512-CzAQs9CTzlwbsF9ZYB4o4lLwBv1/qNE264NjuYao+ctAXsmlPtYa8RtER4UsUXSMxNN9Qi+aQdYcKl2sUpnmAw==",
"license": "MIT", "license": "MIT",
"funding": { "funding": {
"type": "opencollective", "type": "opencollective",
@@ -1866,16 +1866,16 @@
} }
}, },
"node_modules/@mui/material": { "node_modules/@mui/material": {
"version": "6.3.0", "version": "6.4.11",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-6.3.0.tgz", "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.4.11.tgz",
"integrity": "sha512-qhlTFyRMxfoVPxUtA5e8IvqxP0dWo2Ij7cvot7Orag+etUlZH+3UwD8gZGt+3irOoy7Ms3UNBflYjwEikUXtAQ==", "integrity": "sha512-k2D3FLJS+/qD0qnd6ZlAjGFvaaxe1Dl10NyvpeDzIebMuYdn8VqYe6XBgGueEAtnzSJM4V03VD9kb5Fi24dnTA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.26.0", "@babel/runtime": "^7.26.0",
"@mui/core-downloads-tracker": "^6.3.0", "@mui/core-downloads-tracker": "^6.4.11",
"@mui/system": "^6.3.0", "@mui/system": "^6.4.11",
"@mui/types": "^7.2.20", "@mui/types": "~7.2.24",
"@mui/utils": "^6.3.0", "@mui/utils": "^6.4.9",
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"@types/react-transition-group": "^4.4.12", "@types/react-transition-group": "^4.4.12",
"clsx": "^2.1.1", "clsx": "^2.1.1",
@@ -1894,7 +1894,7 @@
"peerDependencies": { "peerDependencies": {
"@emotion/react": "^11.5.0", "@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.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", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
"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" "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -1921,13 +1921,13 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@mui/private-theming": { "node_modules/@mui/private-theming": {
"version": "6.3.0", "version": "6.4.9",
"resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.3.0.tgz", "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.4.9.tgz",
"integrity": "sha512-tdS8jvqMokltNTXg6ioRCCbVdDmZUJZa/T9VtTnX2Lwww3FTgCakst9tWLZSxm1fEE9Xp0m7onZJmgeUmWQYVw==", "integrity": "sha512-LktcVmI5X17/Q5SkwjCcdOLBzt1hXuc14jYa7NPShog0GBDCDvKtcnP0V7a2s6EiVRlv7BzbWEJzH6+l/zaCxw==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.26.0", "@babel/runtime": "^7.26.0",
"@mui/utils": "^6.3.0", "@mui/utils": "^6.4.9",
"prop-types": "^15.8.1" "prop-types": "^15.8.1"
}, },
"engines": { "engines": {
@@ -1948,9 +1948,9 @@
} }
}, },
"node_modules/@mui/styled-engine": { "node_modules/@mui/styled-engine": {
"version": "6.3.0", "version": "6.4.11",
"resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.3.0.tgz", "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.4.11.tgz",
"integrity": "sha512-iWA6eyiPkO07AlHxRUvI7dwVRSc+84zV54kLmjUms67GJeOWVuXlu8ZO+UhCnwJxHacghxnabsMEqet5PYQmHg==", "integrity": "sha512-74AUmlHXaGNbyUqdK/+NwDJOZqgRQw6BcNvhoWYLq3LGbLTkE+khaJ7soz6cIabE4CPYqO2/QAIU1Z/HEjjpcw==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.26.0", "@babel/runtime": "^7.26.0",
@@ -1982,16 +1982,16 @@
} }
}, },
"node_modules/@mui/system": { "node_modules/@mui/system": {
"version": "6.3.0", "version": "6.4.11",
"resolved": "https://registry.npmjs.org/@mui/system/-/system-6.3.0.tgz", "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.4.11.tgz",
"integrity": "sha512-L+8hUHMNlfReKSqcnVslFrVhoNfz/jw7Fe9NfDE85R3KarvZ4O3MU9daF/lZeqEAvnYxEilkkTfDwQ7qCgJdFg==", "integrity": "sha512-gibtsrZEwnDaT5+I/KloOj/yHluX5G8heknuxBpQOdEQ3Gc0avjSImn5hSeKp8D4thiwZiApuggIjZw1dQguUA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.26.0", "@babel/runtime": "^7.26.0",
"@mui/private-theming": "^6.3.0", "@mui/private-theming": "^6.4.9",
"@mui/styled-engine": "^6.3.0", "@mui/styled-engine": "^6.4.11",
"@mui/types": "^7.2.20", "@mui/types": "~7.2.24",
"@mui/utils": "^6.3.0", "@mui/utils": "^6.4.9",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"csstype": "^3.1.3", "csstype": "^3.1.3",
"prop-types": "^15.8.1" "prop-types": "^15.8.1"
@@ -2022,9 +2022,9 @@
} }
}, },
"node_modules/@mui/types": { "node_modules/@mui/types": {
"version": "7.2.20", "version": "7.2.24",
"resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.20.tgz", "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.24.tgz",
"integrity": "sha512-straFHD7L8v05l/N5vcWk+y7eL9JF0C2mtph/y4BPm3gn2Eh61dDwDB65pa8DLss3WJfDXYC7Kx5yjP0EmXpgw==", "integrity": "sha512-3c8tRt/CbWZ+pEg7QpSwbdxOk36EfmhbKf6AGZsD1EcLDLTSZoxxJ86FVtcjxvjuhdyBiWKSTGZFaXCnidO2kw==",
"license": "MIT", "license": "MIT",
"peerDependencies": { "peerDependencies": {
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -2036,13 +2036,13 @@
} }
}, },
"node_modules/@mui/utils": { "node_modules/@mui/utils": {
"version": "6.3.0", "version": "6.4.9",
"resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.3.0.tgz", "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.4.9.tgz",
"integrity": "sha512-MkDBF08OPVwXhAjedyMykRojgvmf0y/jxkBWjystpfI/pasyTYrfdv4jic6s7j3y2+a+SJzS9qrD6X8ZYj/8AQ==", "integrity": "sha512-Y12Q9hbK9g+ZY0T3Rxrx9m2m10gaphDuUMgWxyV5kNJevVxXYCLclYUCC9vXaIk1/NdNDTcW2Yfr2OGvNFNmHg==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.26.0", "@babel/runtime": "^7.26.0",
"@mui/types": "^7.2.20", "@mui/types": "~7.2.24",
"@types/prop-types": "^15.7.14", "@types/prop-types": "^15.7.14",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",

View File

@@ -16,6 +16,7 @@ import {
Box, Box,
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import React from "react";
import { import {
engineNameAtom, engineNameAtom,
engineDepthAtom, engineDepthAtom,
@@ -37,6 +38,9 @@ import {
STRONGEST_ENGINE, STRONGEST_ENGINE,
} from "@/constants"; } from "@/constants";
import { getRecommendedWorkersNb } from "@/lib/engine/worker"; 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 { interface Props {
open: boolean; open: boolean;
@@ -63,6 +67,15 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
const theme = useTheme(); const theme = useTheme();
const isDarkMode = theme.palette.mode === "dark"; const isDarkMode = theme.palette.mode === "dark";
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
const handleHelpClick = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleHelpClose = () => {
setAnchorEl(null);
};
const helpOpen = Boolean(anchorEl);
useEffect(() => { useEffect(() => {
if (!isEngineSupported(engineName)) { if (!isEngineSupported(engineName)) {
if (Stockfish16_1.isSupported()) { if (Stockfish16_1.isSupported()) {
@@ -204,24 +217,35 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
</FormControl> </FormControl>
</Grid> </Grid>
<Grid container justifyContent="center" size={{ xs: 12, sm: 7 }}> <Grid container justifyContent="center" alignItems="center" size={{ xs: 12, sm: 7 }}>
<Slider <Box sx={{ display: "flex", alignItems: "center", width: "100%", flex: 1 }}>
label="Number of threads" <Slider
value={engineWorkersNb} label="Number of threads"
setValue={setEngineWorkersNb} value={engineWorkersNb}
min={1} setValue={setEngineWorkersNb}
max={10} min={1}
marksFilter={1} max={10}
/> marksFilter={1}
</Grid> />
<IconButton size="medium" onClick={handleHelpClick} sx={{ ml: 2 }} aria-label="Help about number of threads">
<Grid container justifyContent="center" size={{ xs: 12, sm: 5 }}> <Icon icon="material-symbols:help-outline" fontSize={28} />
<Typography variant="body2"> </IconButton>
More threads means quicker analysis but only if your device can </Box>
handle them, otherwise it may have the opposite effect. The <Popover
estimated best value for your device is{" "} open={helpOpen}
{getRecommendedWorkersNb()}. anchorEl={anchorEl}
</Typography> onClose={handleHelpClose}
anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
transformOrigin={{ vertical: "top", horizontal: "center" }}
>
<Box sx={{ p: 2, maxWidth: 350 }}>
<Typography variant="body2">
More threads means faster analysis, but only if your device can handle themotherwise, it may have the opposite effect. The estimated optimal value for your device is {getRecommendedWorkersNb()}.<br />
Due to privacy restrictions in some browsers, detection may be inaccurate and result in underestimated recommendations.<br />
If the recommended value is unusually low, we suggest using a number close to your CPUs thread count minus 1 or 2.
</Typography>
</Box>
</Popover>
</Grid> </Grid>
</Grid> </Grid>
</DialogContent> </DialogContent>