haunter/chesskit
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix : thread slider context info

Browse Source
This commit is contained in:
GuillaumeSD
2025-05-19 01:20:08 +02:00
parent 39b94125d5
commit 8a58e2aca8
3 changed files with 81 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/slider.tsx
View File

@@ -1,9 +1,15 @@
import { Icon } from "@iconify/react";
import {
Grid2 as Grid,
IconButton,
Slider as MuiSlider,
Popover,
Stack,
styled,
Typography,
TypographyProps,
} from "@mui/material";
import { useState } from "react";
export interface Props {
value: number;
@@ -14,6 +20,7 @@ export interface Props {
size?: number;
marksFilter?: number;
step?: number;
infoContent?: TypographyProps["children"];
}
export default function Slider({
@@ -25,7 +32,18 @@ export default function Slider({
size,
marksFilter,
step = 1,
infoContent,
}: Props) {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const handleOpenPopover = (event: React.MouseEvent<HTMLElement>) => {
setAnchorEl(event.currentTarget);
};
const handleClosePopover = () => {
setAnchorEl(null);
};
return (
<Grid
container
@@ -33,14 +51,43 @@ export default function Slider({
alignItems="center"
size={size ?? 11}
>
<Typography
id={`input-${label}`}
textAlign="left"
width="100%"
variant="body2"
>
{step === 1 && marksFilter ? label : `${label}: ${value}`}
</Typography>
<Stack direction="row" width="100%">
<Typography id={`input-${label}`} variant="body2">
{step === 1 && marksFilter ? label : `${label}: ${value}`}
</Typography>
{!!infoContent && (
<>
<IconButton
size="medium"
aria-owns={anchorEl ? "mouse-over-popover" : undefined}
aria-haspopup="true"
onClick={handleOpenPopover}
onMouseEnter={handleOpenPopover}
onMouseLeave={handleClosePopover}
sx={{ ml: 1, padding: 0 }}
aria-label="Help about number of threads"
>
<Icon icon="mdi:info-outline" width="1.1rem" />
</IconButton>
<Popover
id="mouse-over-popover"
open={!!anchorEl}
anchorEl={anchorEl}
onClose={handleClosePopover}
anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
transformOrigin={{ vertical: "top", horizontal: "center" }}
sx={{ pointerEvents: "none" }}
disableRestoreFocus
>
<Typography variant="body2" sx={{ padding: 2, maxWidth: 500 }}>
{infoContent}
</Typography>
</Popover>
</>
)}
</Stack>
<CustomSlider
min={min}

67
src/sections/engineSettings/engineSettingsDialog.tsx
View File

@@ -16,7 +16,6 @@ import {
Box,
useTheme,
} from "@mui/material";
import React from "react";
import {
engineNameAtom,
engineDepthAtom,
@@ -38,9 +37,6 @@ 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;
@@ -67,15 +63,6 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
const theme = useTheme();
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(() => {
if (!isEngineSupported(engineName)) {
if (Stockfish16_1.isSupported()) {
@@ -217,35 +204,31 @@ export default function EngineSettingsDialog({ open, onClose }: Props) {
</FormControl>
</Grid>
<Grid container justifyContent="center" alignItems="center" size={{ xs: 12, sm: 7 }}>
<Box sx={{ display: "flex", alignItems: "center", width: "100%", flex: 1 }}>
<Slider
label="Number of threads"
value={engineWorkersNb}
setValue={setEngineWorkersNb}
min={1}
max={10}
marksFilter={1}
/>
<IconButton size="medium" onClick={handleHelpClick} sx={{ ml: 2 }} aria-label="Help about number of threads">
<Icon icon="material-symbols:help-outline" fontSize={28} />
</IconButton>
</Box>
<Popover
open={helpOpen}
anchorEl={anchorEl}
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 them—otherwise, 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 CPU’s thread count minus 1 or 2.
</Typography>
</Box>
</Popover>
<Grid
container
justifyContent="center"
alignItems="center"
size={{ xs: 12, md: 11 }}
>
<Slider
label="Number of threads"
value={engineWorkersNb}
setValue={setEngineWorkersNb}
min={1}
max={12}
marksFilter={1}
infoContent={
<>
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()}.<br />
Due to privacy restrictions in some browsers, this estimated
value might be underestimated. Don't hesitate to try different
values to find the best one for your device.
</>
}
/>
</Grid>
</Grid>
</DialogContent>