From 57d644e5e66009a6d52082cc916b5fa2a7c15af8 Mon Sep 17 00:00:00 2001
From: rakadu1 <rakadu1@bajajauto.co.in>
Date: Tue, 17 Mar 2026 17:23:40 +0530
Subject: [PATCH] Ran command: `git diff` Ran command: `git diff -U0`

fix: resolve console warnings and add configurable debug logging

This commit addresses active console warnings and reduces logging noise in the SpeedGraph component.

### Changes:
- **index.html**: Fixed `[Deprecation]` warning by replacing the non-standard `-webkit-appearance: slider-vertical` with modern CSS properties (`writing-mode: vertical-lr; direction: rtl;`).
- **speedGraphSketch.js**:
  - Resolved `pop() was called without matching push()` error by removing an orphaned `pop()` call in [drawStaticGraphToBuffer](cci:1://file:///d:/Work/Repo/refactor/steps/src/p5/speedGraphSketch.js:41:2-295:4).
  - Muted "Density Info" messages by gating them behind a configurable debug flag.
- **debug.js**: Added a new [speedGraph](cci:1://file:///d:/Work/Repo/refactor/steps/src/p5/speedGraphSketch.js:7:0-538:2) flag (defaulted to `false`) to `debugFlags` to allow selective enabling of SpeedGraph logs.
---
 steps/index.html                 |  2 +-
 steps/src/debug.js               |  3 +++
 steps/src/p5/speedGraphSketch.js | 11 ++++++-----
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/steps/index.html b/steps/index.html
index 3afd1a9..a6d3806 100644
--- a/steps/index.html
+++ b/steps/index.html
@@ -471,7 +471,7 @@
             <span id="range-value-display" class="bg-black bg-opacity-60 text-white text-[10px] px-1.5 py-0.5 rounded font-mono">80m</span>
             <input type="range" id="range-slider" min="40" max="200" value="80" step="10"
               class="h-32 cursor-pointer accent-blue-600" 
-              style="writing-mode: bt-lr; -webkit-appearance: slider-vertical; appearance: slider-vertical; width: 8px;" />
+              style="writing-mode: vertical-lr; direction: rtl; width: 8px;" />
             <span class="text-[10px] font-bold text-gray-400 uppercase tracking-tighter" style="writing-mode: vertical-lr; transform: rotate(180deg);">Range</span>
           </div>
         </div>
diff --git a/steps/src/debug.js b/steps/src/debug.js
index 4ca815c..3ef5f07 100644
--- a/steps/src/debug.js
+++ b/steps/src/debug.js
@@ -13,6 +13,9 @@ export const debugFlags = {
   // Logs related to file loading, parsing, and caching
   fileLoading: false,
 
+  // Logs from the SpeedGraph p5 sketch (density info, etc.)
+  speedGraph: false,
+
   // If true, file caching blocks the main thread for debugging.
   CACHE_BLOCKING: false,
 
diff --git a/steps/src/p5/speedGraphSketch.js b/steps/src/p5/speedGraphSketch.js
index cd3c8d9..9ebc658 100644
--- a/steps/src/p5/speedGraphSketch.js
+++ b/steps/src/p5/speedGraphSketch.js
@@ -3,6 +3,7 @@ import { appState } from "../state.js";
 import { videoPlayer, speedGraphContainer, playPauseBtn } from "../dom.js";
 import { updateFrame, pausePlayback } from "../sync.js";
 import { ttcColors } from "../drawUtils.js";
+import { debugFlags } from "../debug.js";
 
 export const speedGraphSketch = function (p) {
   let staticBuffer, minSpeed, maxSpeed, videoDuration;
@@ -97,9 +98,11 @@ export const speedGraphSketch = function (p) {
       // We'll normalize against p95, but ensure it's at least a reasonable number.
       normTracks = Math.max(1, p95Value);
       
-      console.log(`[SpeedGraph] Density Info (Confirmed Only: ${confirmedOnly}):`);
-      console.log(` - Max tracks: ${maxValue}, 95th Percentile: ${p95Value}`);
-      console.log(` - Normalizing against: ${normTracks}`);
+      if (debugFlags.speedGraph) {
+        console.log(`[SpeedGraph] Density Info (Confirmed Only: ${confirmedOnly}):`);
+        console.log(` - Max tracks: ${maxValue}, 95th Percentile: ${p95Value}`);
+        console.log(` - Normalizing against: ${normTracks}`);
+      }
     }
 
     b.push();
@@ -290,8 +293,6 @@ export const speedGraphSketch = function (p) {
     b.fill(textColor);
     b.text(egoLabel, egoX + segLen + gapBetweenSegAndLabel, legendY + 6);
     b.pop();
-
-    b.pop();
   };
 
   let isDragging = false;