From bdefd6e3f7c474db0008a305f6098b78863b2b78 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Tue, 3 Sep 2024 22:07:02 +0200
Subject: [PATCH 1/2] feat: Add solver settings

---
 src/api/ToolboxAPI.ts                         |  48 ++---
 src/api/data-model/MetaSolverSettings.ts      |  30 ---
 src/api/data-model/ProblemDto.ts              |   3 +
 src/api/data-model/SolverSettings.ts          |  33 ++++
 .../solvers/Graph/ProblemDetails.tsx          |  23 ++-
 src/components/solvers/SettingsView.tsx       | 179 ------------------
 .../solvers/settings/CheckboxSettingView.tsx  |  21 ++
 .../solvers/settings/DoubleSettingView.tsx    |  49 +++++
 .../solvers/settings/IntegerSettingView.tsx   |  36 ++++
 .../solvers/settings/SelectSettingView.tsx    |  25 +++
 .../solvers/settings/SettingProps.tsx         |   6 +
 .../solvers/settings/SettingsView.tsx         | 132 +++++++++++++
 .../solvers/settings/TextSettingView.tsx      |  21 ++
 13 files changed, 371 insertions(+), 235 deletions(-)
 delete mode 100644 src/api/data-model/MetaSolverSettings.ts
 create mode 100644 src/api/data-model/SolverSettings.ts
 delete mode 100644 src/components/solvers/SettingsView.tsx
 create mode 100644 src/components/solvers/settings/CheckboxSettingView.tsx
 create mode 100644 src/components/solvers/settings/DoubleSettingView.tsx
 create mode 100644 src/components/solvers/settings/IntegerSettingView.tsx
 create mode 100644 src/components/solvers/settings/SelectSettingView.tsx
 create mode 100644 src/components/solvers/settings/SettingProps.tsx
 create mode 100644 src/components/solvers/settings/SettingsView.tsx
 create mode 100644 src/components/solvers/settings/TextSettingView.tsx

diff --git a/src/api/ToolboxAPI.ts b/src/api/ToolboxAPI.ts
index b856c01..d9a392c 100644
--- a/src/api/ToolboxAPI.ts
+++ b/src/api/ToolboxAPI.ts
@@ -1,6 +1,7 @@
 import { getInvalidProblemDto, ProblemDto } from "./data-model/ProblemDto";
 import { ProblemSolverInfo } from "./data-model/ProblemSolverInfo";
 import { ProblemState } from "./data-model/ProblemState";
+import { SolverSetting } from "./data-model/SolverSettings";
 import { SubRoutineDefinitionDto } from "./data-model/SubRoutineDefinitionDto";
 
 /**
@@ -61,11 +62,14 @@ export async function postProblem<T>(
 export async function patchProblem<T>(
   problemTypeId: string,
   problemId: string,
-  updateParameters: { input?: any; solverId?: string; state?: ProblemState }
+  updateParameters: {
+    input?: any;
+    solverId?: string;
+    state?: ProblemState;
+    solverSettings?: SolverSetting[];
+  }
 ): Promise<ProblemDto<T>> {
-  let url = `${baseUrl()}/problems/${problemTypeId}/${problemId}`;
-  console.log(url);
-  return fetch(url, {
+  return fetch(`${baseUrl()}/problems/${problemTypeId}/${problemId}`, {
     method: "PATCH",
     headers: {
       "Content-Type": "application/json",
@@ -105,9 +109,7 @@ export async function fetchSubRoutines(
   solverId: string
 ): Promise<SubRoutineDefinitionDto[]> {
   return fetch(
-    `${baseUrl()}/sub-routines/${problemTypeId}?${new URLSearchParams({
-      id: solverId,
-    })}`,
+    `${baseUrl()}/solvers/${problemTypeId}/${solverId}/sub-routines`,
     {
       method: "GET",
       headers: {
@@ -123,18 +125,20 @@ export async function fetchSubRoutines(
     });
 }
 
-// export async function fetchMetaSolverSettings(
-//   problemTypeId: string
-// ): Promise<MetaSolverSetting[]> {
-//   return fetch(`${baseUrl()}/meta-solver/settings/${problemTypeId}`, {
-//     method: "GET",
-//     headers: {
-//       "Content-Type": "application/json",
-//     },
-//   })
-//     .then((response) => response.json())
-//     .catch((reason) => {
-//       console.log(reason);
-//       return [];
-//     });
-// }
+export async function fetchSolverSettings(
+  problemTypeId: string,
+  solverId: string
+): Promise<[]> {
+  return fetch(`${baseUrl()}/solvers/${problemTypeId}/${solverId}/settings`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  })
+    .then((response) => response.json())
+    .catch((reason) => {
+      console.error(reason);
+      alert(`Could not retrieve subroutines of solver ${solverId}.`);
+      return [];
+    });
+}
diff --git a/src/api/data-model/MetaSolverSettings.ts b/src/api/data-model/MetaSolverSettings.ts
deleted file mode 100644
index f2471a9..0000000
--- a/src/api/data-model/MetaSolverSettings.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export enum MetaSolverSettingType {
-  RANGE = "RANGE",
-  CHECKBOX = "CHECKBOX",
-  TEXT = "TEXT",
-  SELECT = "SELECT",
-}
-
-export interface MetaSolverSetting {
-  name: string;
-  type: MetaSolverSettingType;
-}
-
-export interface RangeSetting extends MetaSolverSetting {
-  min: number;
-  max: number;
-  value: number;
-}
-
-export interface CheckboxSetting extends MetaSolverSetting {
-  state: boolean;
-}
-
-export interface TextSetting extends MetaSolverSetting {
-  text: string;
-}
-
-export interface SelectSetting extends MetaSolverSetting {
-  options: string[];
-  selectedOption: string;
-}
diff --git a/src/api/data-model/ProblemDto.ts b/src/api/data-model/ProblemDto.ts
index 5d59260..5af02f8 100644
--- a/src/api/data-model/ProblemDto.ts
+++ b/src/api/data-model/ProblemDto.ts
@@ -1,5 +1,6 @@
 import { ProblemState } from "./ProblemState";
 import { getInvalidSolutionObject, SolutionObject } from "./SolutionObject";
+import { SolverSetting } from "./SolverSettings";
 import { SubRoutineReferenceDto } from "./SubRoutineReferenceDto";
 
 export interface ProblemDto<T> {
@@ -9,6 +10,7 @@ export interface ProblemDto<T> {
   solution: SolutionObject;
   state: ProblemState;
   solverId?: string;
+  solverSettings: SolverSetting[];
   subProblems: SubRoutineReferenceDto[];
   error: string;
 }
@@ -20,6 +22,7 @@ export function getInvalidProblemDto<T>(): ProblemDto<T> {
     input: {} as T,
     solution: getInvalidSolutionObject(),
     solverId: "",
+    solverSettings: [],
     state: ProblemState.READY_TO_SOLVE,
     subProblems: [],
     typeId: "",
diff --git a/src/api/data-model/SolverSettings.ts b/src/api/data-model/SolverSettings.ts
new file mode 100644
index 0000000..f8bd877
--- /dev/null
+++ b/src/api/data-model/SolverSettings.ts
@@ -0,0 +1,33 @@
+export enum SolverSettingType {
+  INTEGER = "INTEGER",
+  DOUBLE = "DOUBLE",
+  CHECKBOX = "CHECKBOX",
+  TEXT = "TEXT",
+  SELECT = "SELECT",
+}
+
+export interface SolverSetting {
+  name: string;
+  description: string;
+  type: SolverSettingType;
+  required: boolean;
+}
+
+export interface RangeSetting extends SolverSetting {
+  min: number;
+  max: number;
+  value: number;
+}
+
+export interface CheckboxSetting extends SolverSetting {
+  state: boolean;
+}
+
+export interface TextSetting extends SolverSetting {
+  text: string;
+}
+
+export interface SelectSetting extends SolverSetting {
+  options: string[];
+  selectedOption: string;
+}
diff --git a/src/components/solvers/Graph/ProblemDetails.tsx b/src/components/solvers/Graph/ProblemDetails.tsx
index 81f1fb7..2d5ebfc 100644
--- a/src/components/solvers/Graph/ProblemDetails.tsx
+++ b/src/components/solvers/Graph/ProblemDetails.tsx
@@ -12,7 +12,9 @@ import {
 import { ReactNode } from "react";
 import { ProblemDto } from "../../../api/data-model/ProblemDto";
 import { ProblemState } from "../../../api/data-model/ProblemState";
+import { SettingsView } from "../settings/SettingsView";
 import { SolutionView } from "../SolutionView";
+import { useGraphUpdates } from "./ProblemGraphView";
 import { useSolvers } from "./SolverProvider";
 
 function getHumanReadableState(state: ProblemState) {
@@ -46,10 +48,15 @@ function getAccordionItem(label: string, content: ReactNode) {
 
 export const ProblemDetails = (props: { problemDto: ProblemDto<any> }) => {
   const { solvers, getSolvers } = useSolvers();
+  const { updateProblem } = useGraphUpdates();
 
   // Update solvers in case they are not loaded yet
   if (!solvers[props.problemDto.typeId]) getSolvers(props.problemDto.typeId);
 
+  const solver = solvers[props.problemDto.typeId]?.find(
+    (s) => s.id === props.problemDto.solverId
+  );
+
   return (
     <VStack gap="20px" align="start">
       <Textarea readOnly resize="vertical" value={props.problemDto.input} />
@@ -57,11 +64,19 @@ export const ProblemDetails = (props: { problemDto: ProblemDto<any> }) => {
         <b>Status:</b> {getHumanReadableState(props.problemDto.state)}
       </Text>
       <Text>
-        <b>Solver:</b>{" "}
-        {solvers[props.problemDto.typeId]?.find(
-          (s) => s.id === props.problemDto.solverId
-        )?.name ?? "-"}
+        <b>Solver:</b> {solver?.name ?? "-"}
       </Text>
+      {solver && (
+        <VStack width="100%" align="stretch">
+          <Text>Solver Settings:</Text>
+          <SettingsView
+            problemDto={props.problemDto}
+            settingsChanged={(settings) => {
+              updateProblem(props.problemDto.id);
+            }}
+          />
+        </VStack>
+      )}
       {props.problemDto.subProblems.length === 0 ? (
         <b>No subroutines</b>
       ) : (
diff --git a/src/components/solvers/SettingsView.tsx b/src/components/solvers/SettingsView.tsx
deleted file mode 100644
index c5ea799..0000000
--- a/src/components/solvers/SettingsView.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import {
-  Box,
-  Checkbox,
-  Container,
-  Select,
-  Slider,
-  SliderFilledTrack,
-  SliderMark,
-  SliderThumb,
-  SliderTrack,
-  Text,
-  Textarea,
-  VStack,
-} from "@chakra-ui/react";
-import { useState } from "react";
-import {
-  CheckboxSetting,
-  MetaSolverSetting,
-  MetaSolverSettingType,
-  RangeSetting,
-  SelectSetting,
-  TextSetting,
-} from "../../api/data-model/MetaSolverSettings";
-// import { fetchMetaSolverSettings } from "../../api/ToolboxAPI";
-
-interface SettingsViewProps {
-  problemTypeId: string;
-  settingChanged: (newSettings: MetaSolverSetting[]) => void;
-}
-
-export const SettingsView = (props: SettingsViewProps) => {
-  const [settings, setSettings] = useState<MetaSolverSetting[]>([]);
-
-  // useEffect(() => {
-  //   fetchMetaSolverSettings(props.problemType).then(
-  //     (settings: MetaSolverSetting[]) => setSettings(settings)
-  //   );
-  // }, [props.problemType]);
-
-  if (settings.length == 0) {
-    return null;
-  }
-
-  function replaceSetting<T extends MetaSolverSetting>(
-    key: string,
-    newValue: T
-  ): MetaSolverSetting[] {
-    const index = settings.findIndex((setting) => setting.name === key);
-    if (index !== -1) {
-      settings.splice(index, 1, newValue);
-    }
-    return settings;
-  }
-
-  return (
-    <Container>
-      <Text>Settings:</Text>
-
-      <Box margin={2} padding={2} borderWidth="1px" borderRadius="lg">
-        {settings.map((setting) => {
-          let settingView;
-
-          switch (setting.type) {
-            case MetaSolverSettingType.RANGE:
-              let range = setting as RangeSetting;
-              let total = range.max - range.min;
-              let step = total < 100 ? total / 100 : 1;
-              let marks = 5;
-              let markStep = total / (marks - 1);
-
-              settingView = (
-                <Slider
-                  key={setting.name}
-                  min={range.min}
-                  max={range.max}
-                  step={step}
-                  onChange={(v) => {
-                    const newSettings = replaceSetting<RangeSetting>(
-                      setting.name,
-                      {
-                        ...range,
-                        value: v,
-                      }
-                    );
-                    props.settingChanged(newSettings);
-                  }}
-                >
-                  {Array.from({ length: marks }, (_, i) => {
-                    return (
-                      <SliderMark key={i} value={i * markStep}>
-                        {i * markStep}
-                      </SliderMark>
-                    );
-                  })}
-                  <SliderTrack>
-                    <SliderFilledTrack />
-                  </SliderTrack>
-
-                  <SliderThumb />
-                </Slider>
-              );
-              break;
-            case MetaSolverSettingType.CHECKBOX:
-              let checkbox = setting as CheckboxSetting;
-              settingView = (
-                <Checkbox
-                  key={checkbox.name}
-                  defaultChecked={checkbox.state}
-                  onChange={(e) => {
-                    const newSettings = replaceSetting<CheckboxSetting>(
-                      setting.name,
-                      {
-                        ...checkbox,
-                        state: e.target.checked,
-                      }
-                    );
-                    props.settingChanged(newSettings);
-                  }}
-                />
-              );
-              break;
-            case MetaSolverSettingType.TEXT:
-              let text = setting as TextSetting;
-              settingView = (
-                <Textarea
-                  key={text.name}
-                  defaultValue={text.text}
-                  onChange={(e) => {
-                    const newSettings = replaceSetting<TextSetting>(
-                      setting.name,
-                      {
-                        ...text,
-                        text: e.target.value,
-                      }
-                    );
-                    props.settingChanged(newSettings);
-                  }}
-                />
-              );
-              break;
-            case MetaSolverSettingType.SELECT:
-              let select = setting as SelectSetting;
-              settingView = (
-                <Select
-                  key={select.name}
-                  defaultValue={select.selectedOption}
-                  onChange={(e) => {
-                    const newSettings = replaceSetting<SelectSetting>(
-                      setting.name,
-                      {
-                        ...select,
-                        selectedOption: e.target.value,
-                      }
-                    );
-                    props.settingChanged(newSettings);
-                  }}
-                >
-                  {select.options.map((option) => (
-                    <option key={option}>{option}</option>
-                  ))}
-                </Select>
-              );
-              break;
-            default:
-              return null;
-          }
-
-          return (
-            <VStack key={setting.name} align="left" paddingY="2">
-              <Text align="left">{setting.name}</Text>
-
-              {settingView}
-            </VStack>
-          );
-        })}
-      </Box>
-    </Container>
-  );
-};
diff --git a/src/components/solvers/settings/CheckboxSettingView.tsx b/src/components/solvers/settings/CheckboxSettingView.tsx
new file mode 100644
index 0000000..a674df8
--- /dev/null
+++ b/src/components/solvers/settings/CheckboxSettingView.tsx
@@ -0,0 +1,21 @@
+import { Checkbox } from "@chakra-ui/react";
+import { CheckboxSetting } from "../../../api/data-model/SolverSettings";
+import { SettingProps } from "./SettingProps";
+import { Disabled } from "./SettingsView";
+
+export const CheckboxSettingView = (
+  props: SettingProps<CheckboxSetting & Disabled>
+) => {
+  return (
+    <Checkbox
+      disabled={props.setting.disabled}
+      defaultChecked={props.setting.state}
+      onChange={(e) => {
+        props.updateSetting({
+          ...props.setting,
+          state: e.target.checked,
+        });
+      }}
+    />
+  );
+};
diff --git a/src/components/solvers/settings/DoubleSettingView.tsx b/src/components/solvers/settings/DoubleSettingView.tsx
new file mode 100644
index 0000000..1078c43
--- /dev/null
+++ b/src/components/solvers/settings/DoubleSettingView.tsx
@@ -0,0 +1,49 @@
+import {
+  Slider,
+  SliderFilledTrack,
+  SliderMark,
+  SliderThumb,
+  SliderTrack,
+} from "@chakra-ui/react";
+import { RangeSetting } from "../../../api/data-model/SolverSettings";
+
+import { SettingProps } from "./SettingProps";
+
+export const DoubleSettingView = (
+  props: SettingProps<RangeSetting & { disabled: boolean }>
+) => {
+  let total = props.setting.max - props.setting.min;
+  let marks = 5;
+  let markStep = total / (marks - 1);
+
+  return (
+    <Slider
+      isDisabled={props.setting.disabled}
+      min={props.setting.min}
+      max={props.setting.max}
+      value={props.setting.value}
+      step={1}
+      onChange={(v) => {
+        props.updateSetting({
+          ...props.setting,
+          value: v,
+        });
+      }}
+    >
+      {Array.from({ length: marks }, (_, i) => {
+        const stepValue = Math.round(i * markStep);
+
+        return (
+          <SliderMark key={i} value={stepValue}>
+            {stepValue}
+          </SliderMark>
+        );
+      })}
+      <SliderTrack>
+        <SliderFilledTrack />
+      </SliderTrack>
+
+      <SliderThumb />
+    </Slider>
+  );
+};
diff --git a/src/components/solvers/settings/IntegerSettingView.tsx b/src/components/solvers/settings/IntegerSettingView.tsx
new file mode 100644
index 0000000..b06babb
--- /dev/null
+++ b/src/components/solvers/settings/IntegerSettingView.tsx
@@ -0,0 +1,36 @@
+import {
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+} from "@chakra-ui/react";
+import { RangeSetting } from "../../../api/data-model/SolverSettings";
+
+import { SettingProps } from "./SettingProps";
+
+export const IntegerSettingView = (
+  props: SettingProps<RangeSetting & { disabled: boolean }>
+) => {
+  return (
+    <NumberInput
+      isDisabled={props.setting.disabled}
+      step={1}
+      value={props.setting.value}
+      min={props.setting.min}
+      max={props.setting.max}
+      onChange={(e) => {
+        props.updateSetting({
+          ...props.setting,
+          value: parseInt(e),
+        });
+      }}
+    >
+      <NumberInputField />
+      <NumberInputStepper>
+        <NumberIncrementStepper />
+        <NumberDecrementStepper />
+      </NumberInputStepper>
+    </NumberInput>
+  );
+};
diff --git a/src/components/solvers/settings/SelectSettingView.tsx b/src/components/solvers/settings/SelectSettingView.tsx
new file mode 100644
index 0000000..ac7a81b
--- /dev/null
+++ b/src/components/solvers/settings/SelectSettingView.tsx
@@ -0,0 +1,25 @@
+import { Select } from "@chakra-ui/react";
+import { SelectSetting } from "../../../api/data-model/SolverSettings";
+import { SettingProps } from "./SettingProps";
+import { Disabled } from "./SettingsView";
+
+export const SelectSettingView = (
+  props: SettingProps<SelectSetting & Disabled>
+) => {
+  return (
+    <Select
+      disabled={props.setting.disabled}
+      value={props.setting.selectedOption}
+      onChange={(e) => {
+        props.updateSetting({
+          ...props.setting,
+          selectedOption: e.target.value,
+        });
+      }}
+    >
+      {props.setting.options.map((option) => (
+        <option key={option}>{option}</option>
+      ))}
+    </Select>
+  );
+};
diff --git a/src/components/solvers/settings/SettingProps.tsx b/src/components/solvers/settings/SettingProps.tsx
new file mode 100644
index 0000000..b45c4af
--- /dev/null
+++ b/src/components/solvers/settings/SettingProps.tsx
@@ -0,0 +1,6 @@
+import { OptionalSolverSetting } from "./SettingsView";
+
+export interface SettingProps<T extends OptionalSolverSetting> {
+  setting: T;
+  updateSetting: (newSetting: T) => void;
+}
diff --git a/src/components/solvers/settings/SettingsView.tsx b/src/components/solvers/settings/SettingsView.tsx
new file mode 100644
index 0000000..b379fb1
--- /dev/null
+++ b/src/components/solvers/settings/SettingsView.tsx
@@ -0,0 +1,132 @@
+import { Box, Button, Checkbox, Text, VStack } from "@chakra-ui/react";
+import { FC, useEffect, useState } from "react";
+import { ProblemDto } from "../../../api/data-model/ProblemDto";
+import {
+  SolverSetting,
+  SolverSettingType,
+} from "../../../api/data-model/SolverSettings";
+import { fetchSolverSettings, patchProblem } from "../../../api/ToolboxAPI";
+import { CheckboxSettingView } from "./CheckboxSettingView";
+import { DoubleSettingView } from "./DoubleSettingView";
+import { IntegerSettingView } from "./IntegerSettingView";
+import { SelectSettingView } from "./SelectSettingView";
+import { SettingProps } from "./SettingProps";
+import { TextSettingView } from "./TextSettingView";
+
+interface SettingsViewProps {
+  problemDto: ProblemDto<any>;
+  settingsChanged: (newSettings: SolverSetting[]) => void;
+}
+
+export interface Disabled {
+  disabled: boolean;
+}
+
+export type OptionalSolverSetting = SolverSetting & Disabled;
+
+const settingComponentMap: {
+  [key in SolverSettingType]: FC<SettingProps<any>>;
+} = {
+  [SolverSettingType.INTEGER]: IntegerSettingView,
+  [SolverSettingType.DOUBLE]: DoubleSettingView,
+  [SolverSettingType.CHECKBOX]: CheckboxSettingView,
+  [SolverSettingType.TEXT]: TextSettingView,
+  [SolverSettingType.SELECT]: SelectSettingView,
+};
+
+export const SettingsView = (props: SettingsViewProps) => {
+  const [settings, setSettings] = useState<OptionalSolverSetting[]>([]);
+
+  useEffect(() => {
+    if (!props.problemDto.solverId) return;
+
+    fetchSolverSettings(
+      props.problemDto.typeId,
+      props.problemDto.solverId
+    ).then((newSettings: SolverSetting[]) =>
+      setSettings(
+        // Use settings set on the problem, if they exist
+        newSettings
+          .filter(
+            (s) =>
+              !props.problemDto.solverSettings.find(
+                (existingSetting) => existingSetting.name === s.name
+              )
+          )
+          .map((s) => ({ ...s, disabled: !s.required }))
+          .concat(
+            props.problemDto.solverSettings.map((s) => ({
+              ...s,
+              disabled: false,
+            }))
+          )
+      )
+    );
+  }, [props.problemDto]);
+
+  if (settings.length == 0) {
+    return null;
+  }
+
+  function updateSetting<T extends OptionalSolverSetting>(newSetting: T) {
+    const index = settings.findIndex(
+      (setting) => setting.name === newSetting.name
+    );
+    if (index !== -1) {
+      settings.splice(index, 1, newSetting);
+    }
+
+    setSettings([...settings]);
+  }
+
+  function getSettingView(setting: OptionalSolverSetting) {
+    const SettingComponent = settingComponentMap[setting.type];
+    if (!SettingComponent) return null;
+
+    return <SettingComponent setting={setting} updateSetting={updateSetting} />;
+  }
+
+  return (
+    <Box margin={2} padding={2} borderWidth="1px" borderRadius="lg">
+      {settings.map((setting) => (
+        <VStack key={setting.name} align="left" paddingY="2">
+          {setting.required ? (
+            <Text>{setting.name}</Text>
+          ) : (
+            <Checkbox
+              checked={!setting.disabled}
+              defaultChecked={!setting.disabled}
+              onChange={(e) =>
+                updateSetting({ ...setting, disabled: !e.target.checked })
+              }
+            >
+              {setting.name}
+            </Checkbox>
+          )}
+          <Text fontSize="sm" fontStyle="italic">
+            {setting.description}
+          </Text>
+
+          {getSettingView(setting)}
+        </VStack>
+      ))}
+
+      <Button
+        bg="kitGreen"
+        width="100%"
+        textColor="white"
+        fontWeight="bold"
+        _hover={{
+          bg: "kitGreenAlpha",
+        }}
+        onClick={() => {
+          patchProblem(props.problemDto.typeId, props.problemDto.id, {
+            solverSettings: settings,
+          }).then((r) => props.settingsChanged(r.solverSettings));
+        }}
+      >
+        Save
+      </Button>
+    </Box>
+  );
+};
diff --git a/src/components/solvers/settings/TextSettingView.tsx b/src/components/solvers/settings/TextSettingView.tsx
new file mode 100644
index 0000000..ac0e2fb
--- /dev/null
+++ b/src/components/solvers/settings/TextSettingView.tsx
@@ -0,0 +1,21 @@
+import { Textarea } from "@chakra-ui/react";
+import { TextSetting } from "../../../api/data-model/SolverSettings";
+import { SettingProps } from "./SettingProps";
+import { Disabled } from "./SettingsView";
+
+export const TextSettingView = (
+  props: SettingProps<TextSetting & Disabled>
+) => {
+  return (
+    <Textarea
+      disabled={props.setting.disabled}
+      value={props.setting.text}
+      onChange={(e) => {
+        props.updateSetting({
+          ...props.setting,
+          text: e.target.value,
+        });
+      }}
+    />
+  );
+};

From bdf0e09c7d7e328188084886a360de3212779cd2 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Fri, 6 Sep 2024 14:22:03 +0200
Subject: [PATCH 2/2] refactor: Make settingsChanged optional

---
 src/components/solvers/settings/SettingsView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/solvers/settings/SettingsView.tsx b/src/components/solvers/settings/SettingsView.tsx
index b379fb1..d577369 100644
--- a/src/components/solvers/settings/SettingsView.tsx
+++ b/src/components/solvers/settings/SettingsView.tsx
@@ -15,7 +15,7 @@ import { TextSettingView } from "./TextSettingView";
 
 interface SettingsViewProps {
   problemDto: ProblemDto<any>;
-  settingsChanged: (newSettings: SolverSetting[]) => void;
+  settingsChanged?: (newSettings: SolverSetting[]) => void;
 }
 
 export interface Disabled {
@@ -122,7 +122,7 @@ export const SettingsView = (props: SettingsViewProps) => {
         onClick={() => {
           patchProblem(props.problemDto.typeId, props.problemDto.id, {
             solverSettings: settings,
-          }).then((r) => props.settingsChanged(r.solverSettings));
+          }).then((r) => props.settingsChanged?.(r.solverSettings));
         }}
       >
         Save