Molecule Energy Simulator

.github/workflows/ci-cd-develop.yml

@@ -9,11 +9,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Clone repo (shallow)
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Set up node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 16
       - name: Install dependencies
@@ -24,11 +24,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Clone repo (shallow)
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Set up node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 16
       - name: Install dependencies
@@ -39,11 +39,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Clone repo (shallow)
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Set up node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           node-version: 16
       - name: Install dependencies
@@ -59,7 +59,7 @@ jobs:
     if: ${{ github.ref == 'refs/heads/develop' }}
     steps:
       - name: Cloning repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 

.github/workflows/deploy-main.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Cloning repo
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
 

src/api/data-model/ProblemSolverInfo.ts

@@ -1,4 +1,5 @@
 export interface ProblemSolverInfo {
   id: string;
   name: string;
+  description: string;
 }

src/components/landing-page/DemonstratorChooser.tsx

@@ -10,6 +10,12 @@ export const DemonstratorChooser = (props: GridProps) => (
         title="Mixed Integer Programming"
         description="The MIP problem is a mathematical optimization problem where some or all of the variables are restricted to be integers."
       />
+      <DemonstratorCard
+        new={true}
+        href="demonstrate/MoleculeEnergySimulator"
+        title="Molecule Energy Simulator"
+        description="This demonstrator will compute the ground state energy for a given molecule using VQE algorithm."
+      />
     </GridItem>
   </Grid>
 );

src/components/layout/Footer.tsx

@@ -5,7 +5,7 @@ export const Footer = () => (
     <VStack borderTopWidth={1} paddingTop={"1rem"}>
       <HStack justifyContent={"space-between"} width={"100%"}>
         <Text color={"gray.500"} paddingY={"3"}>
-          ProvideQ is made possible by these partners:
+          ProvideQ contributors:
         </Text>
         <HStack>
           <Link href="https://www.kit.edu/legals.php" color={"blue.400"}>
@@ -17,27 +17,11 @@ export const Footer = () => (
         </HStack>
       </HStack>
       <HStack width={"100%"} justifyContent={"space-between"}>
-        <Link href="https://www.kit.edu/">
-          <Image src="/KIT.svg" height={"2.5rem"} />
-        </Link>
-        <Link href="https://www.tu-braunschweig.de/">
-          <Image src="/Braunschweig.svg" height={"2.5rem"} />
-        </Link>
-        <Link href="https://www.uni-koeln.de/">
-          <Image src="/Köln.svg" height={"2.5rem"} />
-        </Link>
-        <Link href="https://www.uni-hannover.de/de/">
-          <Image src="/Hannover.svg" height={"2.5rem"} />
+        <Link href="https://tva.kastel.kit.edu/index.php">
+          <Image src="/KIT.svg" height={"2.5rem"} alt="KIT" />
         </Link>
         <Link href="https://www.gams.com/">
-          <Image src="/gams.svg" height={"2.5rem"} />
-        </Link>
-        <Link href="https://www.4flow.com/">
-          <Image
-            src="/4flow.svg"
-            height={"2.5rem"}
-            style={{ transform: "scale(1.75)", paddingRight: "10px" }}
-          />
+          <Image src="/gams.svg" height={"2.5rem"} alt="GAMS" />
         </Link>
       </HStack>
     </VStack>

src/components/solvers/Graph/ProblemNode.tsx

@@ -133,7 +133,10 @@ export function ProblemNode(props: NodeProps<ProblemNodeData>) {
   // Type id is the same for all problems
   const typeId = props.data.problemDtos[0].typeId;
   const solverId = props.data.problemDtos[0].solverId;
-  const solverName = solvers[typeId]?.find((s) => s.id === solverId)?.name;
+  const solver = solvers[typeId]?.find((s) => s.id === solverId);
+  const solverName = solver?.name;
+  const solverDescription =
+    solver?.description ?? "Solves the ${typeId} Problem.";
 
   // Fetch solvers for type if necessary
   getSolvers(typeId);
@@ -342,10 +345,10 @@ export function ProblemNode(props: NodeProps<ProblemNodeData>) {
           marginTop="-10px"
         >
           <SolverNodeContent
-            problemIds={props.data.problemDtos.map((dto) => dto.id)}
             solver={{
               id: solverId,
               name: solverName,
+              description: solverDescription,
             }}
             button={problemButton()}
           />

src/components/solvers/Graph/SolverNode.tsx

@@ -4,7 +4,6 @@ import { ProblemSolverInfo } from "../../../api/data-model/ProblemSolverInfo";
 import { SolverNodeContent } from "./SolverNodeContent";
 
 export interface SolverNodeData {
-  problemId: string[];
   problemSolver: ProblemSolverInfo;
   selectCallback: (problemSolver: ProblemSolverInfo) => void;
 }
@@ -45,7 +44,6 @@ export function SolverNode(props: NodeProps<SolverNodeData>) {
       <Handle type="target" position={Position.Top} />
       <VStack gap="0px">
         <SolverNodeContent
-          problemIds={props.data.problemId}
           solver={props.data.problemSolver}
           button={{
             label: "Select",

src/components/solvers/Graph/SolverNodeContent.tsx

@@ -1,12 +1,25 @@
-import { Button, HStack, Text, Tooltip, VStack } from "@chakra-ui/react";
+import {
+  Button,
+  HStack,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverFooter,
+  PopoverHeader,
+  PopoverTrigger,
+  Portal,
+  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 {
-  problemIds: string[];
   solver: ProblemSolverInfo;
   button: {
     label: ReactNode;
@@ -15,8 +28,6 @@ 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">
@@ -29,17 +40,28 @@ export const SolverNodeContent = (props: SolverNodeContentProps) => {
           {props.solver.name}
         </Text>
 
-        {props.problemIds !== undefined && (
-          <IoMdRefresh
-            cursor="pointer"
-            size="2rem"
-            onClick={() => {
-              for (let problemId of props.problemIds) {
-                updateProblem(problemId);
-              }
-            }}
-          />
-        )}
+        <Popover>
+          <PopoverTrigger>
+            <div>
+              <FaQuestionCircle size="1rem" />
+            </div>
+          </PopoverTrigger>
+          <Portal>
+            <PopoverContent>
+              <PopoverArrow />
+              <PopoverCloseButton />
+              <PopoverHeader>
+                <Text fontWeight="semibold">{props.solver.name}</Text>
+              </PopoverHeader>
+              <PopoverBody>
+                <Text>{props.solver.description}</Text>
+              </PopoverBody>
+              <PopoverFooter>
+                <Text fontSize="xs">{props.solver.id}</Text>
+              </PopoverFooter>
+            </PopoverContent>
+          </Portal>
+        </Popover>
       </HStack>
 
       <div

src/pages/demonstrate/MoleculeEnergySimulator.tsx

@@ -0,0 +1,32 @@
+import { Flex, Heading, Text } from "@chakra-ui/react";
+import { NextPage } from "next";
+import { useState } from "react";
+import { Demonstrator } from "../../components/demonstrators/Demonstrator";
+import { Layout } from "../../components/layout/Layout";
+
+const MoleculeEnergySimulator: NextPage = () => {
+  const [svg, setSvg] = useState<string | null>(null);
+
+  return (
+    <Layout>
+      <Heading as="h1">Molecule Energy Simulator</Heading>
+      <Text color="text" align="justify">
+        This demonstrator will compute the ground state energy for a given
+        molecule using VQE algorithm. The molecule input is given in XYZ Format.
+      </Text>
+
+      <Demonstrator
+        demonstratorId="edu.kit.provideq.toolbox.demonstrators.MoleculeEnergySimulator"
+        onSolved={setSvg}
+      />
+
+      {svg && (
+        <Flex justifyContent="center">
+          <div dangerouslySetInnerHTML={{ __html: svg }} />
+        </Flex>
+      )}
+    </Layout>
+  );
+};
+
+export default MoleculeEnergySimulator;

src/pages/solve/FeatureModelAnomaly.tsx

@@ -49,7 +49,7 @@ const FeatureModelAnomaly: NextPage = () => {
       </UnorderedList>
 
       <TextInputMask
-        problemTypeId=""
+        problemTypeId="feature-model-anomaly-dead"
         textPlaceholder="Enter your feature model in UVL format"
         text={uvl}
         setText={setUvl}

src/pages/solve/VehicleRouting.tsx

@@ -32,7 +32,7 @@ const VehicleRouting: NextPage = () => {
         problemTypeId="vrp"
         text={vrp}
         setText={setVrp}
-        textPlaceholder={"Enter your Vehicle Routing problem in vrp format"}
+        textPlaceholder={"Enter your problem in vrp format"}
       />
 
       <SolverConfiguration problemTypeId="vrp" problemInput={vrp} />