From 81cea78bbc29644bbaf6d735fa78cda086121277 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Mon, 10 Feb 2025 13:11:34 +0100
Subject: [PATCH 1/3] feat: Add molecule energy simulator demonstrator mask

---
 .../landing-page/DemonstratorChooser.tsx      |  6 ++++
 .../demonstrate/MoleculeEnergySimulator.tsx   | 29 +++++++++++++++++++
 2 files changed, 35 insertions(+)
 create mode 100644 src/pages/demonstrate/MoleculeEnergySimulator.tsx

diff --git a/src/components/landing-page/DemonstratorChooser.tsx b/src/components/landing-page/DemonstratorChooser.tsx
index ede48b3..dae8449 100644
--- a/src/components/landing-page/DemonstratorChooser.tsx
+++ b/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="MoleculeEnergySimulator"
+        description=""
+      />
     </GridItem>
   </Grid>
 );
diff --git a/src/pages/demonstrate/MoleculeEnergySimulator.tsx b/src/pages/demonstrate/MoleculeEnergySimulator.tsx
new file mode 100644
index 0000000..b2c1d1f
--- /dev/null
+++ b/src/pages/demonstrate/MoleculeEnergySimulator.tsx
@@ -0,0 +1,29 @@
+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">Mixed Integer Programming Demonstrator</Heading>
+      <Text color="text" align="justify"></Text>
+
+      <Demonstrator
+        demonstratorId="edu.kit.provideq.toolbox.demonstrators.MoleculeEnergySimulator"
+        onSolved={setSvg}
+      />
+
+      {svg && (
+        <Flex justifyContent="center">
+          <div dangerouslySetInnerHTML={{ __html: svg }} />
+        </Flex>
+      )}
+    </Layout>
+  );
+};
+
+export default MoleculeEnergySimulator;

From 09aa708935371127cd4becb6c52f8aad82a5456f Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Mon, 10 Feb 2025 13:28:04 +0100
Subject: [PATCH 2/3] fix: Title

---
 src/components/landing-page/DemonstratorChooser.tsx | 2 +-
 src/pages/demonstrate/MoleculeEnergySimulator.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/landing-page/DemonstratorChooser.tsx b/src/components/landing-page/DemonstratorChooser.tsx
index dae8449..d1bd1bf 100644
--- a/src/components/landing-page/DemonstratorChooser.tsx
+++ b/src/components/landing-page/DemonstratorChooser.tsx
@@ -13,7 +13,7 @@ export const DemonstratorChooser = (props: GridProps) => (
       <DemonstratorCard
         new={true}
         href="demonstrate/MoleculeEnergySimulator"
-        title="MoleculeEnergySimulator"
+        title="Molecule Energy Simulator"
         description=""
       />
     </GridItem>
diff --git a/src/pages/demonstrate/MoleculeEnergySimulator.tsx b/src/pages/demonstrate/MoleculeEnergySimulator.tsx
index b2c1d1f..7963053 100644
--- a/src/pages/demonstrate/MoleculeEnergySimulator.tsx
+++ b/src/pages/demonstrate/MoleculeEnergySimulator.tsx
@@ -9,7 +9,7 @@ const MoleculeEnergySimulator: NextPage = () => {
 
   return (
     <Layout>
-      <Heading as="h1">Mixed Integer Programming Demonstrator</Heading>
+      <Heading as="h1">Molecule Energy Simulator</Heading>
       <Text color="text" align="justify"></Text>
 
       <Demonstrator

From fdcfa8a6116c69dfbb37cf1da144ce93150db6b5 Mon Sep 17 00:00:00 2001
From: Elscrux <nickposer2102@gmail.com>
Date: Thu, 13 Feb 2025 14:20:20 +0100
Subject: [PATCH 3/3] feat: Add descriptions

---
 src/components/landing-page/DemonstratorChooser.tsx | 2 +-
 src/pages/demonstrate/MoleculeEnergySimulator.tsx   | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/landing-page/DemonstratorChooser.tsx b/src/components/landing-page/DemonstratorChooser.tsx
index d1bd1bf..f44a8e5 100644
--- a/src/components/landing-page/DemonstratorChooser.tsx
+++ b/src/components/landing-page/DemonstratorChooser.tsx
@@ -14,7 +14,7 @@ export const DemonstratorChooser = (props: GridProps) => (
         new={true}
         href="demonstrate/MoleculeEnergySimulator"
         title="Molecule Energy Simulator"
-        description=""
+        description="This demonstrator will compute the ground state energy for a given molecule using VQE algorithm."
       />
     </GridItem>
   </Grid>
diff --git a/src/pages/demonstrate/MoleculeEnergySimulator.tsx b/src/pages/demonstrate/MoleculeEnergySimulator.tsx
index 7963053..85c38fc 100644
--- a/src/pages/demonstrate/MoleculeEnergySimulator.tsx
+++ b/src/pages/demonstrate/MoleculeEnergySimulator.tsx
@@ -10,7 +10,10 @@ const MoleculeEnergySimulator: NextPage = () => {
   return (
     <Layout>
       <Heading as="h1">Molecule Energy Simulator</Heading>
-      <Text color="text" align="justify"></Text>
+      <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"