Merge pull request #2 from SCAI-BIO/header-footer

Add info box

Author: tiadams

index.html

@@ -45,6 +45,13 @@
       .content {
         min-height: calc(100vh - 40px);
       }
+
+      .info-box {
+    background-color: #f8f9fa;
+    padding: 20px;
+    margin: 50px auto; /* Center the box and add margin */
+    max-width: 600px;
+  }
     </style>
 
 
@@ -53,6 +60,21 @@
     <div class="header">
       <h1>Parkinson's & Alzheimer's Disease Variable Embeddings</h1>
     </div>
+    <div class="info-box">
+      <p>
+        The shown plot is a two-dimensional t-SNE projection of GPT embeddings for variable descriptions for Alzheimer's disease (AD) and Parkinson's disease (PD).
+      </p>
+      <p>
+        You can interact with the plot in the following ways:
+      </p>
+      <ul>
+        <li>Hover over a data point to see its descriptions.</li>
+        <li>Zoom in by holding the cursor and drawing a box for your region of interest.</li>
+        <li>Click any cohort name in the legend to exclude them from the plot.</li>
+        <li>Double click on them to only show that specific cohort.</li>
+      </ul>
+    </div>
+    
     <div class="content">
       <script type="text/javascript">
         window.PlotlyConfig = { MathJaxConfig: "local" };