exposing the appstate in console.

steps/src/dom.js

@@ -331,7 +331,7 @@ export function updatePersistentOverlays(currentMediaTime) {
     appState.videoStartDate.getTime() + currentMediaTime * 1000
   );
   const videoFrame = Math.floor(currentMediaTime * VIDEO_FPS);
-  console.warn('Could not load radarframes ', appState.vizData.radarFrames)
+  //console.warn('Could not load radarframes ', appState.vizData.radarFrames) console warning for reference
 
   videoInfoOverlay.innerHTML = `
         Frame: ${videoFrame}

steps/src/main.js

@@ -38,6 +38,7 @@ import {
   formatTime,
 } from "./utils.js";
 import { appState } from "./state.js";
+window.appState = appState; // exposing the appState to console
 import {
   themeToggleBtn,
   canvasContainer,

steps/src/p5/zoomSketch.js

@@ -200,8 +200,8 @@ function drawZoomTooltip(p, hoveredItems, mainMouseX) {
   const BASE_LINE_HEIGHT = 15;
   const BASE_PADDING = 8;
   const BASE_HIGHLIGHT_THICKNESS = 2;
-  const BASE_LINE_THICKNESS = 1;
-  const BASE_DISTANCE_OFFSET = 45; // <-- How far the tooltip is from the items
+  const BASE_LINE_THICKNESS = 2;
+  const BASE_DISTANCE_OFFSET = 65; // <-- How far the tooltip is from the items
 
   // COLORS
   const highlightColor = p.color(46, 204, 113); // Green for border and lines