add walkthrough, demos, time step/total time, style tweaks

src/App.css

@@ -1,5 +1,5 @@
 #root {
-    height: 100%;
+    height: 100vh;
     display: flex;
     flex-direction: column;
   }
@@ -14,23 +14,6 @@ h2 {
 }
 
 
-#demos {
-  position: absolute;
-  top: 20px;
-  left: 450px;
-  border: 1px solid #efefef;
-  border-radius: 5px;
-}
-
-#demos > select {
-  font-size: 32px;
-  background: black;
-  border: none;
-  border-radius: 5px;
-  padding: 10px 25px;
-
-}
-
 button#submit { 
   text-align: center;
   padding: 10px 25px; 

src/App.jsx

@@ -7,7 +7,8 @@ import {
   useFullScreenHandle,
 } from 'react-full-screen';
 
-import Demos from './Demos';
+import DemoModal from './Demo/DemoModal';
+import Demos from './Demo/Demos';
 import Details from './Details';
 import Laboratory from './Laboratory';
 import Results from './Results';
@@ -16,6 +17,8 @@ import TabHeaders, { Tab } from './Tabs';
 function App() {
   const fullScreenHandle = useFullScreenHandle()
   const [fullScreen, setFullScreen] = useState(false)
+  const [walkThroughVisible, setWalkThroughVisible] = useState(false)
+  const [demosVisible, setDemosVisible] = useState(false)
 
   const handleToggleFullScreen = () => {
     if (fullScreen) {
@@ -51,10 +54,13 @@ function App() {
             tabs={tabs}
             activeTab={activeTab}
             onTabClick={handleTabClick}
+            onShowWalkThrough={() => setWalkThroughVisible(true)}
+            onToggleDemos={() => setDemosVisible(v => !v)}
             onToggleFullScreen={handleToggleFullScreen}
           />
         </div>
-        <Demos />
+        {walkThroughVisible && <DemoModal setTab={setActiveTab} onExit={() => setWalkThroughVisible(false)}/>}
+        {demosVisible && <Demos onClose={() => setDemosVisible(false)}/>}
     </FullScreen>
   );
 }

src/Demo/Demo.css

@@ -0,0 +1,61 @@
+#demo-modal {
+    position: absolute;
+    top: 0;
+    width: 100vw;
+    height: calc(100vh - 40px);
+    background: #1d1d1d;
+    border: 1px solid white;
+    color: white;
+    font-family: monospace;
+    padding: 20px 20px 80px 20px;
+}
+
+.button-group {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+}
+
+.button-group > button {
+    width: 100px;
+    height: 35px;
+    cursor: pointer;
+}
+
+.button-group > button + button {
+    margin-left: 20px;
+}
+
+.step-counter {
+    position: absolute;
+    top: 15px;
+    right: 15px;
+}
+
+p {
+    font-size: 16px;
+    margin: 10px 0;
+}
+
+#demos {
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    transform: translate(-50%);
+    border-radius: 5px;
+  }
+
+#demos > select {
+    padding: 10px 20px;
+    background: black;
+    border: 1px solid white;
+    border-radius: 5px;
+}
+
+#demos > button {
+    padding: 10px 15px;
+    background: black;
+    border: 1px solid white;
+    border-radius: 100px;
+    cursor: pointer;
+}

src/Demo/DemoModal.tsx

@@ -0,0 +1,100 @@
+import './Demo.css';
+
+import React, { useState } from 'react';
+
+export default function DemoModal({ onExit, setTab }) {
+    const [step, setStep] = useState(0)
+    const nextStep = () => setStep(step => step + 1)
+    const prevStep = () => setStep(step => step - 1)
+
+    const steps = [
+        Step1,
+        LabStep,
+        DetailStep,
+        ResultsStep,
+        TabsStep,
+    ]
+    const StepComponent = steps[step]
+
+    return <div id="demo-modal">
+        <StepComponent />
+        <div className="step-counter">{`(${step + 1}/${steps.length})`}</div>
+        <div className="button-group">
+            {step > 0 && <button onClick={prevStep}>Back</button>}
+            {step < steps.length - 1 ? <button onClick={nextStep}>Next</button> : <button onClick={onExit}>Finish</button>}
+            <button onClick={onExit}>Exit</button>
+        </div>
+    </div>
+}
+
+const Step1 = () => {
+    return (
+        <>
+            <h1>{`What is this?`}</h1>
+            <p>
+                Welcome to the <b>QuTiP Virtual Lab</b>
+            </p>
+            <p>This application shows how QuTiP can simulate quantum systems</p>
+            <p>This modal will guide you through the application</p>
+            <p>Hit Next to continue</p>
+        </>
+    )
+}
+
+const LabStep = () => {
+    return (
+        <>
+            <h1>Laboratory</h1>
+            <img src="" />
+            <p>
+                Tapping on any 'Add Qubit' will get you started.
+                Once added, you can tap the qubit to toggle the menu.
+            </p>
+            <img />
+            <p>You can add control lasers, interactions between qubits, and model heat baths from this menu</p>
+        </>
+    )
+}
+
+const DetailStep = () => {
+    return (
+        <>
+            <h1>Details</h1>
+            <img src="" />
+            <p>
+                Here you can see the equations describing the Laboratory model.
+                You can tune the parameters that govern the lasers, interactions, and heat baths.
+            </p>
+            <p>
+                You can also tweak the simulation parameters for the time step and total time.
+            </p>
+            <p>Once you have set up your system, click on the</p>
+            <button id="submit">Simulate ▶️</button>
+            <p>to simulate the system using QuTiP</p>
+        </>
+    )
+}
+
+const ResultsStep = () => {
+    return (
+        <>
+            <h1>Results</h1>
+            <p>Here you can see the output from QuTiP</p>
+            <p>You can see how the expectation values of the spin vectors for each qubit evolve over time</p>
+            <p>The evolution is plotted on the Bloch sphere</p>
+            <p>You can also rotate the Bloch sphere</p>
+            <p>Drag the slider at the bottom to view the system at a specific point in time</p>
+        </>
+    )
+}
+
+const TabsStep = () => {
+    return (
+        <>
+            <h1>Other Controls</h1>
+            <p>The <span className='tab-button'>⤢</span> will toggle fullscreen mode</p>
+            <p>The <span className='tab-button'>?</span> will toggle this modal</p>
+            <p>The <span className='tab-button'>⚛</span> will allow you to select an example system. Try it!</p>
+        </>
+    )
+}

src/Demos.tsx → src/Demo/Demos.tsx

@@ -1,20 +1,20 @@
 import React, { useContext } from 'react';
 
-import { SimulationContext } from './Simulation';
+import { SimulationContext } from '../Simulation';
 import {
   PauliMinus,
   PauliX,
   PauliY,
   PauliZ,
   type QubitId,
   type SimulationConfig,
-} from './simulationUtils';
+} from '../simulationUtils';
 
 const LARMOR = "LARMOR";
 const DEPHASING = "DEPHASING";
 const SPIN_CHAIN = "SPIN_CHAIN";
 
-export default function Demos() {
+export default function Demos({ onClose }) {
   const { setConfig, demoSelected, setDemoSelected } = useContext(SimulationContext);
 
   const handleChange = (e) => {
@@ -32,6 +32,7 @@ export default function Demos() {
         <option value={DEPHASING}>Qubit Dephasing</option>
         <option value={SPIN_CHAIN}>Spin chain</option>
       </select>
+      <button onClick={onClose}>X</button>
     </div>
   );
 }
@@ -51,7 +52,9 @@ const LarmorPrecessionConfig: SimulationConfig = {
   baths: [],
   initialStates: {
     0: '-z'
-  }
+  },
+  totalTime: 10,
+  timeSteps: 100
 };
 
 const QubitDephasingConfig: SimulationConfig = {
@@ -76,7 +79,9 @@ const QubitDephasingConfig: SimulationConfig = {
       value: 0.5
     }
   }],
-  initialStates: { 1: "x" }
+  initialStates: { 1: "x" },
+  totalTime: 10,
+  timeSteps: 100
 };
 
 const SpinChainConfig: SimulationConfig = {
@@ -122,7 +127,9 @@ const SpinChainConfig: SimulationConfig = {
     1: '-z',
     2: '-z',
     3: '-z',
-  }
+  },
+  totalTime: 10,
+  timeSteps: 100
 }
 
 const demos = {