Merge pull request #68 from ProvideQ/release/0.4.1

Release/0.4.1

Author: koalamitice

package.json

@@ -1,6 +1,6 @@
 {
   "name": "provideq",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "private": true,
   "scripts": {
     "dev": "next dev",

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());
+}

src/components/solvers/EditorControls.tsx

@@ -2,17 +2,19 @@ import {
   ButtonGroup,
   HStack,
   IconButton,
+  Select,
   Text,
   Tooltip,
 } from "@chakra-ui/react";
+import { useEffect, useState } from "react";
 import {
   TbDownload,
   TbHelp,
   TbRepeat,
   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

src/components/solvers/Graph/ProblemGraphView.tsx

@@ -234,7 +234,7 @@ export const ProblemGraphView = (props: ProblemGraphViewProps) => {
           addNode({
             id: solverId,
             data: {
-              problemTypeId: node.data.problemDtos[0].typeId,
+              problemIds: node.data.problemDtos.map((x) => x.id),
               problemSolver: solvers[i],
               selectCallback: (problemSolver: ProblemSolverInfo) => {
                 let edge = edges.find((e) =>

src/components/solvers/Graph/ProblemNode.tsx

@@ -196,6 +196,7 @@ export function ProblemNode(props: NodeProps<ProblemNodeData>) {
 
   return (
     <VStack
+      cursor="default"
       width="10rem"
       css={{
         // prevent this from consuming pointer events
@@ -239,7 +240,9 @@ export function ProblemNode(props: NodeProps<ProblemNodeData>) {
               {extended &&
                 props.data.problemDtos.every((dto) =>
                   canProblemSolverBeUpdated(dto)
-                ) && <FaXmark color="red" onClick={disconnect} />}
+                ) && (
+                  <FaXmark cursor="pointer" color="red" onClick={disconnect} />
+                )}
             </div>
           )
         )}
@@ -261,7 +264,7 @@ export function ProblemNode(props: NodeProps<ProblemNodeData>) {
             {props.data.problemDtos[0].typeId}
           </Text>
           <div>
-            <FaQuestionCircle size="1rem" onClick={onOpen} />
+            <FaQuestionCircle cursor="pointer" size="1rem" onClick={onOpen} />
           </div>
 
           <Modal
@@ -298,6 +301,7 @@ export function ProblemNode(props: NodeProps<ProblemNodeData>) {
               position="absolute"
               bg={nodeColor}
               borderRadius={10}
+              cursor="pointer"
               onClick={() => setDropdownOpen(!dropdownOpen)}
               left="50%"
               transform="translate(-50%, -50%)"
@@ -338,7 +342,7 @@ export function ProblemNode(props: NodeProps<ProblemNodeData>) {
           marginTop="-10px"
         >
           <SolverNodeContent
-            problemTypeId={typeId}
+            problemIds={props.data.problemDtos.map((dto) => dto.id)}
             solver={{
               id: solverId,
               name: solverName,

src/components/solvers/Graph/SolverNode.tsx

@@ -4,14 +4,15 @@ import { ProblemSolverInfo } from "../../../api/data-model/ProblemSolverInfo";
 import { SolverNodeContent } from "./SolverNodeContent";
 
 export interface SolverNodeData {
-  problemTypeId: string;
+  problemId: string[];
   problemSolver: ProblemSolverInfo;
   selectCallback: (problemSolver: ProblemSolverInfo) => void;
 }
 
 export function SolverNode(props: NodeProps<SolverNodeData>) {
   return (
     <Box
+      cursor="default"
       border="1px"
       borderRadius="10px"
       padding=".5rem"
@@ -44,7 +45,7 @@ export function SolverNode(props: NodeProps<SolverNodeData>) {
       <Handle type="target" position={Position.Top} />
       <VStack gap="0px">
         <SolverNodeContent
-          problemTypeId={props.data.problemTypeId}
+          problemIds={props.data.problemId}
           solver={props.data.problemSolver}
           button={{
             label: "Select",

src/components/solvers/Graph/SolverNodeContent.tsx

@@ -1,26 +1,12 @@
-import {
-  Button,
-  HStack,
-  Popover,
-  PopoverArrow,
-  PopoverBody,
-  PopoverCloseButton,
-  PopoverContent,
-  PopoverFooter,
-  PopoverHeader,
-  PopoverTrigger,
-  Portal,
-  Text,
-  Tooltip,
-  VStack,
-} from "@chakra-ui/react";
+import { Button, HStack, Text, Tooltip, VStack } from "@chakra-ui/react";
 import { ReactNode } from "react";
-import { FaQuestionCircle } from "react-icons/fa";
 import { FaGears } from "react-icons/fa6";
+import { IoMdRefresh } from "react-icons/io";
 import { ProblemSolverInfo } from "../../../api/data-model/ProblemSolverInfo";
+import { useGraphUpdates } from "./ProblemGraphView";
 
 export interface SolverNodeContentProps {
-  problemTypeId: string;
+  problemIds: string[];
   solver: ProblemSolverInfo;
   button: {
     label: ReactNode;
@@ -29,6 +15,8 @@ export interface SolverNodeContentProps {
 }
 
 export const SolverNodeContent = (props: SolverNodeContentProps) => {
+  const { updateProblem } = useGraphUpdates();
+
   return (
     <VStack gap="0px">
       <HStack align="start" maxW="10rem" justifyContent="space-between" gap="0">
@@ -41,28 +29,17 @@ export const SolverNodeContent = (props: SolverNodeContentProps) => {
           {props.solver.name}
         </Text>
 
-        <Popover>
-          <PopoverTrigger>
-            <div>
-              <FaQuestionCircle size="1rem" />
-            </div>
-          </PopoverTrigger>
-          <Portal>
-            <PopoverContent>
-              <PopoverArrow />
-              <PopoverCloseButton />
-              <PopoverHeader>
-                <Text fontWeight="semibold">{props.solver.name}</Text>
-              </PopoverHeader>
-              <PopoverBody>
-                <Text>Solves {props.problemTypeId}</Text>
-              </PopoverBody>
-              <PopoverFooter>
-                <Text fontSize="xs">{props.solver.id}</Text>
-              </PopoverFooter>
-            </PopoverContent>
-          </Portal>
-        </Popover>
+        {props.problemIds !== undefined && (
+          <IoMdRefresh
+            cursor="pointer"
+            size="2rem"
+            onClick={() => {
+              for (let problemId of props.problemIds) {
+                updateProblem(problemId);
+              }
+            }}
+          />
+        )}
       </HStack>
 
       <div

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}