From d862837b47e125046b3dc7e0e1506bc7427b40cd Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Thu, 12 Dec 2024 14:39:11 +0100
Subject: [PATCH 1/2] feat: Add API call to fetch example problem instances

---
 src/api/ToolboxAPI.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/api/ToolboxAPI.ts b/src/api/ToolboxAPI.ts
index d9a392c..741e6a6 100644
--- a/src/api/ToolboxAPI.ts
+++ b/src/api/ToolboxAPI.ts
@@ -142,3 +142,12 @@ export async function fetchSolverSettings(
       return [];
     });
 }
+
+export async function fetchExampleProblems(problemTypeId: string) {
+  return fetch(`${baseUrl()}/problems/${problemTypeId}/examples`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  }).then((response) => response.json());
+}

From ef4149299a029d0357d737576dd9f3b6f88cad28 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Thu, 12 Dec 2024 14:48:19 +0100
Subject: [PATCH 2/2] feat: Add select element to load example problem in
 problem masks

---
 src/components/solvers/EditorControls.tsx | 46 +++++++++++++++++++----
 src/components/solvers/TextInputMask.tsx  |  1 +
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/components/solvers/EditorControls.tsx b/src/components/solvers/EditorControls.tsx
index c7d8994..6e2f8cc 100644
--- a/src/components/solvers/EditorControls.tsx
+++ b/src/components/solvers/EditorControls.tsx
@@ -2,9 +2,11 @@ import {
   ButtonGroup,
   HStack,
   IconButton,
+  Select,
   Text,
   Tooltip,
 } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
 import {
   TbDownload,
   TbHelp,
@@ -12,7 +14,7 @@ import {
   TbTrash,
   TbUpload,
 } from "react-icons/tb";
-import { baseUrl } from "../../api/ToolboxAPI";
+import { baseUrl, fetchExampleProblems } from "../../api/ToolboxAPI";
 import { chooseFile } from "./FileInput";
 
 export interface EditorControlsProps {
@@ -40,6 +42,11 @@ export interface EditorControlsProps {
    * If omitted, the documentation link will point to the API docs.
    */
   documentationLink?: string;
+
+  /**
+   * Problem type id.
+   */
+  problemTypeId: string;
 }
 
 /**
@@ -75,15 +82,40 @@ const upload = async (onUpload: (uploadContent: string) => void) => {
  * messages, an upload, a download and a help button.
  */
 export const EditorControls = (props: EditorControlsProps) => {
-  const documentationLink = props.documentationLink || baseUrl();
+  const [examples, setExamples] = useState<string[]>([]);
+
+  const documentationLink = props.documentationLink ?? baseUrl();
+
+  useEffect(() => {
+    fetchExampleProblems(props.problemTypeId).then((json) => setExamples(json));
+  }, [props.problemTypeId]);
 
   return (
     <HStack justifyContent={"space-between"} width="100%">
-      {props.errorText ? (
-        <Text textColor="tomato">{props.errorText}</Text>
-      ) : (
-        <Text as="i">{props.idleText}</Text>
-      )}
+      <HStack>
+        {examples.length > 0 && (
+          <Select
+            placeholder="Load example"
+            overflow="hidden"
+            textOverflow="ellipsis"
+            width="10rem"
+            onChange={(e) => props.setEditorContent(e.target.value)}
+          >
+            {examples.map((example) => (
+              <option key={example} value={example}>
+                {example.length > 100 ? example.slice(0, 100) + "..." : example}
+              </option>
+            ))}
+          </Select>
+        )}
+
+        {props.errorText ? (
+          <Text textColor="tomato">{props.errorText}</Text>
+        ) : (
+          <Text as="i">{props.idleText}</Text>
+        )}
+      </HStack>
+
       <ButtonGroup isAttached variant="outline" colorScheme="teal">
         <Tooltip label="Download problem from editor">
           <IconButton
diff --git a/src/components/solvers/TextInputMask.tsx b/src/components/solvers/TextInputMask.tsx
index 792b19d..ebea25d 100644
--- a/src/components/solvers/TextInputMask.tsx
+++ b/src/components/solvers/TextInputMask.tsx
@@ -47,6 +47,7 @@ export const TextInputMask = (props: TextInputMaskProperties) => {
       </Head>
 
       <EditorControls
+        problemTypeId={props.problemTypeId}
         errorText={errorString}
         idleText={props.textPlaceholder + " 👇"}
         setEditorContent={onTextChanged}