Added Parameter Selction. This has to be worked on.

src/frontend/src/app/components/header-bar/header-bar.component.html

@@ -176,29 +176,13 @@
         </button>
       </li>
       <li>
-        <button class="button align-bottom" (click)="openSuperVariantExplorer()">
+        <button class="button align-bottom" (click)="createParameterModal()">
           <div>
             <i class="bi bi-map btn-icon"></i>
             <span> <b>Open</b> Super Variant Explorer </span>
           </div>
         </button>
       </li>
-      <li>
-        <button class="button align-bottom" (click)="openSuperVariantExplorer()">
-          <div>
-            <i class="bi bi-compass btn-icon"></i>
-            <span> <b>Open</b> Super Variant Explorer </span>
-          </div>
-        </button>
-      </li>
-      <li>
-        <button class="button align-bottom" (click)="openSuperVariantExplorer()">
-          <div>
-            <i class="bi bi-binoculars btn-icon"></i>
-            <span> <b>Open</b> Super Variant Explorer </span>
-          </div>
-        </button>
-      </li>
     </ul>
   </div>
 

src/frontend/src/app/components/header-bar/header-bar.component.ts

@@ -81,6 +81,107 @@ export class HeaderBarComponent implements OnDestroy {
     this.fileUploadOCEL.nativeElement.click();
   }
 
+  createParameterModal() {
+    // Check if overlay already exists
+    if (document.getElementById('parameter-modal')) {
+      console.warn('parameter-modal already exists.');
+      return;
+    }
+
+    // Create the overlay container
+    const overlay = document.createElement('div');
+    overlay.id = 'parameter-modal';
+
+    // Style the main overlay
+    Object.assign(overlay.style, {
+      position: 'fixed',
+      top: '1rem', // Leave border
+      left: '15rem', // Reserve space for the sidebar
+      right: '1rem',
+      bottom: '1rem',
+      backgroundColor: 'white',
+      border: 'solid 1rem #000', // Visible border
+      zIndex: '9999', // Ensure it's above all other elements
+      boxSizing: 'border-box',
+    });
+
+    // Create the sidebar
+    const sidebar = document.createElement('div');
+    sidebar.id = 'sidebar';
+    Object.assign(sidebar.style, {
+      position: 'fixed',
+      top: '1rem',
+      left: '1rem',
+      bottom: '1rem',
+      width: '13rem',
+      backgroundColor: '#f5f5f5', 
+      border: 'solid 1rem #000', 
+      boxSizing: 'border-box',
+      padding: '0.5rem',
+      overflowY: 'auto', 
+      zIndex: '9999', 
+    });
+
+    sidebar.innerHTML = `
+        <h3>Choose Parameters</h3>
+        <label>
+            Option 1 Checkbox (opt in): <input type="checkbox" />
+        </label>
+        <br />
+        <label>
+            Option 2 Checkbox (opt out): <input checked type="checkbox" />
+        </label>
+        <br />
+        <label>
+            Option 3 Slider : <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
+        </label>
+    `;
+
+    // Create the close button
+    const closeButton = document.createElement('button');
+    closeButton.innerHTML = '&#x2715;'; 
+    closeButton.setAttribute('aria-label', 'Close overlay');
+
+    // Style the close button
+    Object.assign(closeButton.style, {
+      position: 'absolute',
+      top: '0.5rem',
+      right: '0.5rem',
+      width: '2rem',
+      height: '2rem',
+      background: 'red',
+      color: 'white',
+      border: 'none',
+      borderRadius: '50%',
+      cursor: 'pointer',
+      fontSize: '1.5rem',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    });
+
+    // Attach the remove function to the close button
+    closeButton.onclick = this.removeParameterModal;
+
+    // Add the close button to the overlay
+    overlay.appendChild(closeButton);
+
+    // Add the sidebar to the body
+    document.body.appendChild(sidebar);
+
+    // Add the overlay to the body
+    document.body.appendChild(overlay);
+  }
+
+  removeParameterModal() {
+    const overlay = document.getElementById('parameter-modal');
+    const sidebar = document.getElementById('sidebar');
+    if (overlay) overlay.remove();
+    if (sidebar) sidebar.remove();
+  }
+
+
+
   handleSelectedOCELFile(e, isRetry = false): void {
     console.log("Debug: We are importing an OCEL file.")
     const fileList: FileList = e.target.files;