feat: ✨ Add a help screen

Add a help screen that is displayed instead of the Graph if the "help" button is pressed. It explains the idea of the tool and links to paper and GitHub.

app/infoScreen.tsx

@@ -0,0 +1,15 @@
+import styles from './style.module.css'
+
+const InfoScreen: React.FC = () => {
+    return (
+        <div className={styles.canvas + " " + styles.infoCanvas}>
+            <h1>MQT QUBOMaker: Pathfinder</h1>
+            <p>This web app is a supporting GUI for the MQT QUBOMaker framework. It allows users to define pathfinding problems using a set of constraints that can be converted into a QUBO formulation by the framework.</p>
+            <p>Further details are given in the following paper: D. Rovara, N. Quetschlich, and R. Wille <a href="">"A Framework to Formulate Pathfinding Problems for Quantum Computing"</a>, arXiv, 2024</p>
+            <p>The corresponding code can be found in the framework's <a href="">GitHub repository</a>.</p>
+            <p>MQT QUBOMaker is part of the <a href="https://mqt.readthedocs.io/">Munich Quantum Toolkit</a> (MQT) developed by the <a href="https://www.cda.cit.tum.de/">Chair for Design Automation</a> at the <a href="https://www.tum.de/">Technical University of Munich</a>.</p>
+        </div>
+    );
+}
+
+export default InfoScreen;

app/page.tsx

@@ -10,6 +10,7 @@ import { useEffect, useRef, useState } from 'react'
 import TitledTextbox from './titledTextbox'
 import Settings from './settings'
 import PathPosIsCollector from './pathPosIsCollector'
+import InfoScreen from './infoScreen'
 
 function download(filename: string, text: string) {
   if(text === "") {
@@ -48,6 +49,7 @@ export default function Home() {
   }, [adjacencyMatrix])
 
   const [vertices, setVertices] = useState(Array.from(Array(adjacencyMatrix.length).keys()).map(i => (i + 1).toFixed(0)));
+  const [showInfo, setShowInfo] = useState(false);
 
   return (
     <main className="flex h-screen flex-col items-center font-sans">
@@ -59,8 +61,11 @@ export default function Home() {
       </nav>
       <div className="flex flex-col lg:flex-row lg:h-full w-full items-center p-5 justify-between gap-4 lg:overflow-clip">
         <div className="flex flex-col gap-4 w-full lg:w-auto">
-          <GraphView updateAdjacencyMatrix={setAdjacencyMatrix} upload={doUpload} initialAdjacencyMatrix={adjacencyMatrix}></GraphView>
+          {
+            showInfo ? <InfoScreen></InfoScreen> : <GraphView updateAdjacencyMatrix={setAdjacencyMatrix} upload={doUpload} initialAdjacencyMatrix={adjacencyMatrix}></GraphView>
+          }
           <div className="flex flex-row justify-around w-full lg:w-auto">
+            <button onClick={() => setShowInfo(!showInfo)} className="border-2 rounded bg-slate-100 p-2 hover:bg-slate-200 active:bg-slate-300">{showInfo ? "Back" : "Help"}</button>
             <button onClick={() => setDoUpload(true)} className="border-2 rounded bg-slate-100 p-2 hover:bg-slate-200 active:bg-slate-300">Change Graph</button>
             <button onClick={() => download("generator.json", settings.encoding !== -1 ? settings.toJson() : "")} className="border-2 rounded bg-slate-100 p-2 hover:bg-slate-200 active:bg-slate-300">Generate</button>
           </div>

app/style.module.css

@@ -8,6 +8,25 @@
   transform: translate(-50%, 0);
 }
 
+.infoCanvas {
+  padding: 10px;
+  overflow-y: auto;
+}
+
+.infoCanvas h1 {
+  font-weight: bolder;
+  margin-bottom: 1rem;
+}
+
+.infoCanvas p {
+  margin-bottom: 0.5rem;
+}
+
+.infoCanvas a {
+  color: #007bff;
+  text-decoration: none;
+}
+
 @media (max-width: 1024px) {
   .canvas {
     width: calc(100vw - 2.5rem);