add buttons to reload and configure in quick settings

franciscoBSalgueiro · Feb 4, 2024 · 0355d96 · 0355d96
1 parent 7089273
commit 0355d96
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 145 deletions.
diff --git a/src/atoms/atoms.ts b/src/atoms/atoms.ts
@@ -330,15 +330,17 @@ export const tabEngineSettingsFamily = atomFamily(
     tab,
     engineName,
     defaultSettings,
+    defaultGo,
   }: {
     tab: string;
     engineName: string;
     defaultSettings?: EngineSettings;
+    defaultGo?: GoMode;
   }) => {
     return atom<{ enabled: boolean; settings: EngineSettings; go: GoMode }>({
       enabled: false,
       settings: defaultSettings || [],
-      go: { t: "Depth", c: 24 },
+      go: defaultGo || { t: "Infinite" },
     });
   },
   (a, b) => a.tab === b.tab && a.engineName === b.engineName,
@@ -356,6 +358,7 @@ export const allEnabledAtom = loadable(
           engineName: engine.name,
           defaultSettings:
             engine.type === "local" ? engine.settings || [] : undefined,
+          defaultGo: engine.go ?? undefined,
         });
         return get(atom).enabled;
       });
@@ -374,6 +377,7 @@ export const enableAllAtom = atom(null, (get, set, value: boolean) => {
       engineName: engine.name,
       defaultSettings:
         engine.type === "local" ? engine.settings || [] : undefined,
+      defaultGo: engine.go ?? undefined,
     });
     set(atom, { ...get(atom), enabled: value });
   }

diff --git a/src/components/common/GoModeInput.tsx b/src/components/common/GoModeInput.tsx
@@ -15,7 +15,7 @@ function GoModeInput({
       <SegmentedControl
         maw="50%"
         data={["Time", "Depth", "Nodes", "Infinite"]}
-        value={goMode?.t || "Time"}
+        value={goMode?.t || "Infinite"}
         onChange={(v) => {
           const newGo = match<string | null, GoMode>(v)
             .with("Depth", () => ({ t: "Depth", c: 20 }))
@@ -26,7 +26,7 @@ function GoModeInput({
           setGoMode(newGo);
         }}
       />
-      {match(goMode || { t: "Time", c: 8000 })
+      {match(goMode || { t: "Infinite" })
         .with({ t: "Depth" }, (v) => (
           <NumberInput
             min={1}

diff --git a/src/components/engines/EnginesPage.tsx b/src/components/engines/EnginesPage.tsx
@@ -37,6 +37,7 @@ import * as classes from "@/components/common/GenericCard.css";
 import { unwrap } from "@/utils/invoke";
 import { useToggle } from "@mantine/hooks";
 import { open } from "@tauri-apps/api/dialog";
+import { useSearchParams } from "react-router-dom";
 import { P, match } from "ts-pattern";
 import ConfirmModal from "../common/ConfirmModal";
 import GenericCard from "../common/GenericCard";
@@ -47,7 +48,16 @@ import LinesSlider from "../panels/analysis/LinesSlider";
 export default function EnginesPage() {
   const [engines, setEngines] = useAtom(enginesAtom);
   const [opened, setOpened] = useState(false);
-  const [selected, setSelected] = useState<number | null>(null);
+  const [params, setParams] = useSearchParams();
+  const selected = params.get("load") ? Number(params.get("load")) : null;
+  const setSelected = (v: number | null) => {
+    if (v === null) {
+      params.delete("load");
+    } else {
+      params.set("load", v.toString());
+    }
+    setParams(params);
+  };
 
   const selectedEngine = selected !== null ? engines[selected] : null;
 

diff --git a/src/components/panels/analysis/BestMoves.tsx b/src/components/panels/analysis/BestMoves.tsx
@@ -87,6 +87,7 @@ function BestMovesComponent({
     tabEngineSettingsFamily({
       engineName: engine.name,
       defaultSettings: engine.settings ?? undefined,
+      defaultGo: engine.go ?? undefined,
       tab: activeTab!,
     }),
   );

diff --git a/src/components/panels/analysis/EngineSettingsForm.tsx b/src/components/panels/analysis/EngineSettingsForm.tsx
@@ -1,17 +1,19 @@
+import { enginesAtom } from "@/atoms/atoms";
 import { GoMode } from "@/bindings";
 import GoModeInput from "@/components/common/GoModeInput";
 import { EngineSettings } from "@/utils/engines";
 import {
+  ActionIcon,
   Group,
   MantineColor,
-  Modal,
-  NumberInput,
-  Select,
-  SimpleGrid,
-  Table,
+  Stack,
   Text,
+  Tooltip,
 } from "@mantine/core";
+import { IconReload, IconSettings } from "@tabler/icons-react";
+import { useAtomValue } from "jotai";
 import React, { memo } from "react";
+import { useNavigate } from "react-router-dom";
 import CoresSlider from "./CoresSlider";
 import HashSlider from "./HashSlider";
 import LinesSlider from "./LinesSlider";
@@ -44,7 +46,7 @@ function EngineSettingsForm({
   const hash = settings.settings.find((o) => o.name === "Hash");
 
   return (
-    <SimpleGrid cols={1}>
+    <Stack>
       {!remote && (
         <GoModeInput
           goMode={settings.go}
@@ -115,157 +117,65 @@ function EngineSettingsForm({
           )}
         </>
       )}
-    </SimpleGrid>
+      <Group>
+        <ReloadSettings engine={engineName} setSettings={setSettings} />
+
+        <AdvancedSettings engineName={engineName} />
+      </Group>
+    </Stack>
   );
 }
 
-function AdvancedOptions({
-  opened,
-  setOpened,
-  settings,
+function ReloadSettings({
+  engine,
   setSettings,
-  minimal,
 }: {
-  opened: boolean;
-  setOpened: React.Dispatch<React.SetStateAction<boolean>>;
-  settings: { enabled: boolean; go: GoMode; settings: EngineSettings };
+  engine: string;
   setSettings: (
     fn: (prev: { enabled: boolean; go: GoMode; settings: EngineSettings }) => {
       enabled: boolean;
       go: GoMode;
       settings: EngineSettings;
     },
   ) => void;
-  minimal?: boolean;
 }) {
-  const goTypes = ["Depth", { label: "Time (ms)", value: "Time" }, "Nodes"];
-  if (!minimal) goTypes.push("Infinite");
+  const engines = useAtomValue(enginesAtom);
+  const engineDefault = engines.find((o) => o.name === engine)!;
+  return (
+    <Tooltip label="Reset to engine default">
+      <ActionIcon
+        size="xs"
+        onClick={() => {
+          setSettings((prev) => ({
+            ...prev,
+            go: engineDefault.go || prev.go,
+            settings: engineDefault.settings || prev.settings,
+          }));
+        }}
+      >
+        <IconReload />
+      </ActionIcon>
+    </Tooltip>
+  );
+}
 
-  const multipv = settings.settings.find((o) => o.name === "MultiPV");
-  const threads = settings.settings.find((o) => o.name === "Threads");
-  const hash = settings.settings.find((o) => o.name === "Hash");
+function AdvancedSettings({ engineName }: { engineName: string }) {
+  const navigate = useNavigate();
+  const engines = useAtomValue(enginesAtom);
 
   return (
-    <Modal
-      title="Engine Options"
-      opened={opened}
-      onClose={() => setOpened(false)}
-    >
-      <Table>
-        <Table.Tbody>
-          <Table.Tr>
-            <Table.Td>
-              <Select
-                allowDeselect={false}
-                variant="unstyled"
-                comboboxProps={{
-                  position: "bottom",
-                  middlewares: { flip: false, shift: false },
-                }}
-                data={goTypes}
-                value={settings.go.t}
-                onChange={(v) =>
-                  setSettings((prev) => {
-                    const newGo = prev.go;
-                    newGo.t = v as "Depth" | "Time" | "Nodes" | "Infinite";
-                    if (v === "Infinite") {
-                      /// @ts-expect-error idk how to please ts here
-                      newGo.c = undefined;
-                    }
-                    return {
-                      ...prev,
-                      go: newGo,
-                    };
-                  })
-                }
-              />
-            </Table.Td>
-            <Table.Td>
-              {settings.go.t !== "Infinite" && (
-                <NumberInput
-                  min={1}
-                  value={settings.go.c}
-                  onChange={(v) =>
-                    setSettings((prev) => {
-                      return {
-                        ...prev,
-                        go: {
-                          ...prev.go,
-                          c: (v || 1) as number,
-                        },
-                      };
-                    })
-                  }
-                />
-              )}
-            </Table.Td>
-          </Table.Tr>
-          {threads && (
-            <Table.Tr>
-              <Table.Td>Threads</Table.Td>
-              <Table.Td>
-                <NumberInput
-                  min={1}
-                  value={Number(threads.value || 1)}
-                  onChange={(v) =>
-                    setSettings((prev) => ({
-                      ...prev,
-                      settings: prev.settings.map((o) =>
-                        o.name === "Threads"
-                          ? { ...o, value: (v || 1).toString() }
-                          : o,
-                      ),
-                    }))
-                  }
-                />
-              </Table.Td>
-            </Table.Tr>
-          )}
-          {!minimal && multipv && (
-            <Table.Tr>
-              <Table.Td>MultiPV</Table.Td>
-              <Table.Td>
-                <NumberInput
-                  min={1}
-                  value={Number(multipv.value || 1)}
-                  onChange={(v) =>
-                    setSettings((prev) => ({
-                      ...prev,
-                      settings: prev.settings.map((o) =>
-                        o.name === "MultiPV"
-                          ? { ...o, value: (v || 1).toString() }
-                          : o,
-                      ),
-                    }))
-                  }
-                />
-              </Table.Td>
-            </Table.Tr>
-          )}
-          {hash && (
-            <Table.Tr>
-              <Table.Td>Hash Size</Table.Td>
-              <Table.Td>
-                <NumberInput
-                  min={1}
-                  value={Number(hash.value || 1)}
-                  onChange={(v) =>
-                    setSettings((prev) => ({
-                      ...prev,
-                      settings: prev.settings.map((o) =>
-                        o.name === "Hash"
-                          ? { ...o, value: (v || 1).toString() }
-                          : o,
-                      ),
-                    }))
-                  }
-                />
-              </Table.Td>
-            </Table.Tr>
-          )}
-        </Table.Tbody>
-      </Table>
-    </Modal>
+    <Tooltip label="Advanced settings">
+      <ActionIcon
+        size="xs"
+        onClick={() =>
+          navigate(
+            `/engines?load=${engines.findIndex((o) => o.name === engineName)}`,
+          )
+        }
+      >
+        <IconSettings />
+      </ActionIcon>
+    </Tooltip>
   );
 }