Data Explorer BTN added

steps/index.html

@@ -89,6 +89,14 @@
           (F11)
         </span>
       </button>
+      <button id="explorer-btn" type="button"
+        class="text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 font-medium rounded-lg text-xs px-4 py-2 transition-colors">
+        Data-Explorer<br>(MATLAB-style)
+        <span
+          class="text-xs font-mono bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-200 px-1.5 py-0.5 rounded">
+          (i)
+        </span>
+      </button>
       <button id="theme-toggle" type="button"
         class=" flex flex-row items-center gap-2 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5">
         <svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20">

steps/src/dom.js

@@ -81,6 +81,8 @@ export const fullscreenEnterIcon = document.getElementById("fullscreen-enter-ico
 export const fullscreenExitIcon = document.getElementById("fullscreen-exit-icon");
 export const menuScrim = document.getElementById("menu-scrim");
 export const toggleConfirmedOnly = document.getElementById("toggle-confirmed-only");
+export const explorerBtn = document.getElementById("explorer-btn");
+
 
 
 //----------------------UPDATE FRAME Function----------------------//

steps/src/main.js

@@ -103,6 +103,7 @@ import {
   menuScrim,
   toggleConfirmedOnly,
   resetUIForNewLoad,
+  explorerBtn,
 } from "./dom.js";
 
 import { initializeTheme } from "./theme.js";
@@ -1061,6 +1062,14 @@ canvasContainer.addEventListener('click', () => {
         displayInGrid(currentFrameData.pointCloud, `Frame ${appState.currentFrame} - Point Cloud`);
     }
 });
+explorerBtn.addEventListener('click', () => {
+   const panel = document.getElementById("data-explorer-panel");
+    if (panel.classList.contains("hidden")) {
+      showExplorer();
+    } else {
+      hideExplorer();
+    }
+});
 
 function calculateAndSetOffset() {
   const jsonTimestampInfo = extractTimestampInfo(appState.jsonFilename);