Skip to content

Commit 66965ff

Browse files
AdamGSAdamGS
authored
chore: Improve perf and make the sidebar not force full re-render of page (#4128)
some general perf improvements, but the biggest one here is that the side bar doesn't resize the main charts view, forcing a ton rendering work Signed-off-by: Adam Gutglick <adam@spiraldb.com>
1 parent 888c9b5 commit 66965ff

File tree

6 files changed

+258
-82
lines changed

6 files changed

+258
-82
lines changed

‎benchmarks-website/chart-manager.js‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -275,7 +275,10 @@ export const chartManager = {
275275
window.zoomSync.synchronizeZoomForCategory(
276276
categoryName,
277277
chart,
278-
index
278+
index,
279+
true,
280+
window.state,
281+
window.utils
279282
);
280283
}
281284
: undefined,
@@ -290,7 +293,9 @@ export const chartManager = {
290293
categoryName,
291294
chart,
292295
index,
293-
false
296+
false,
297+
window.state,
298+
window.utils
294299
);
295300
}
296301
: undefined,

‎benchmarks-website/code.js‎

Lines changed: 51 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -750,11 +750,25 @@ window.initAndRender = (function () {
750750
domElements[camelCaseId] = document.getElementById(id);
751751
});
752752

753-
// Restore sidebar state on desktop
753+
// Initialize sidebar state on desktop
754754
if (window.innerWidth >= 1200) {
755-
const isCollapsed = localStorage.getItem("sidebarCollapsed") === "true";
756-
if (isCollapsed && domElements.sidebar) {
757-
domElements.sidebar.classList.add("collapsed");
755+
const sidebarPref = localStorage.getItem("sidebarCollapsed");
756+
if (domElements.sidebar) {
757+
// Set default to collapsed (true) on first visit
758+
if (sidebarPref === null) {
759+
localStorage.setItem("sidebarCollapsed", "true");
760+
}
761+
762+
// Apply saved preference
763+
if (sidebarPref === "false") {
764+
// User previously opened sidebar via toggle
765+
domElements.sidebar.classList.remove("collapsed");
766+
domElements.sidebar.classList.add("open");
767+
} else {
768+
// Default collapsed or user previously closed it via toggle
769+
domElements.sidebar.classList.add("collapsed");
770+
domElements.sidebar.classList.remove("open");
771+
}
758772
}
759773
}
760774

@@ -827,11 +841,12 @@ window.initAndRender = (function () {
827841
if (isDesktop) {
828842
// On desktop, toggle collapsed state
829843
domElements.sidebar.classList.toggle("collapsed");
844+
domElements.sidebar.classList.toggle("open");
830845

831846
// Save preference to localStorage
832847
const isCollapsed =
833848
domElements.sidebar.classList.contains("collapsed");
834-
localStorage.setItem("sidebarCollapsed", isCollapsed);
849+
localStorage.setItem("sidebarCollapsed", isCollapsed.toString());
835850
} else {
836851
// On mobile/tablet, toggle active state
837852
domElements.sidebar.classList.toggle("active");
@@ -842,15 +857,25 @@ window.initAndRender = (function () {
842857
const isDesktop = window.innerWidth >= 1200;
843858
if (isDesktop) {
844859
domElements.sidebar.classList.add("collapsed");
845-
localStorage.setItem("sidebarCollapsed", true);
860+
domElements.sidebar.classList.remove("open");
861+
localStorage.setItem("sidebarCollapsed", "true");
846862
} else {
847863
domElements.sidebar.classList.remove("active");
848864
}
849865
});
850866

851-
// Sidebar overlay click (mobile)
867+
// Sidebar overlay click (mobile and desktop) - only closes, doesn't toggle
852868
domElements.sidebarOverlay.addEventListener("click", () => {
853-
domElements.sidebar.classList.remove("active");
869+
const isDesktop = window.innerWidth >= 1200;
870+
if (isDesktop) {
871+
// On desktop, close sidebar (don't toggle, just close)
872+
domElements.sidebar.classList.add("collapsed");
873+
domElements.sidebar.classList.remove("open");
874+
localStorage.setItem("sidebarCollapsed", "true");
875+
} else {
876+
// On mobile/tablet, remove active state
877+
domElements.sidebar.classList.remove("active");
878+
}
854879
});
855880

856881
// Expand/Collapse
@@ -933,10 +958,19 @@ window.initAndRender = (function () {
933958
// Moving from mobile to desktop
934959
domElements.sidebar.classList.remove("active");
935960
// Restore saved collapsed state
936-
const isCollapsed =
937-
localStorage.getItem("sidebarCollapsed") === "true";
938-
if (isCollapsed) {
961+
const sidebarPref = localStorage.getItem("sidebarCollapsed");
962+
// Set default to collapsed (true) on first visit
963+
if (sidebarPref === null) {
964+
localStorage.setItem("sidebarCollapsed", "true");
965+
}
966+
967+
// Apply saved preference
968+
if (sidebarPref === "false") {
969+
domElements.sidebar.classList.remove("collapsed");
970+
domElements.sidebar.classList.add("open");
971+
} else {
939972
domElements.sidebar.classList.add("collapsed");
973+
domElements.sidebar.classList.remove("open");
940974
}
941975
}
942976

@@ -1100,6 +1134,9 @@ window.initAndRender = (function () {
11001134
renamedDatasets,
11011135
chartIndex
11021136
);
1137+
1138+
// Update zoom sync cache for this category
1139+
window.zoomSync.updateCacheForCategory(name);
11031140
}
11041141

11051142
// Async function to render charts with yielding
@@ -1171,6 +1208,7 @@ window.initAndRender = (function () {
11711208
window.state = state;
11721209
window.domElements = domElements;
11731210
window.zoomSync = zoomSync;
1211+
window.utils = utils;
11741212

11751213
// Initialize workers
11761214
workerManager.init();
@@ -1213,9 +1251,10 @@ window.initAndRender = (function () {
12131251
workerManager.terminate();
12141252
}, 5000);
12151253

1216-
// Ensure workers are cleaned up on page unload
1254+
// Ensure workers and zoom sync are cleaned up on page unload
12171255
window.addEventListener('beforeunload', () => {
12181256
workerManager.terminate();
1257+
window.zoomSync.cleanup();
12191258
});
12201259
} catch (error) {
12211260
console.error("Failed to load benchmark data:", error);

‎benchmarks-website/config.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,9 @@ export const CONFIG = {
55
MOBILE_BREAKPOINT: 1199,
66
MOBILE_MAX_DATA_POINTS: 100,
77
DEFAULT_VISIBLE_COMMITS: 50,
8-
DEBOUNCE_DELAY: 50,
9-
MOBILE_DEBOUNCE_DELAY: 200,
8+
DEBOUNCE_DELAY: 150, // Increased from 50ms to reduce update frequency
9+
MOBILE_DEBOUNCE_DELAY: 300, // Increased from 200ms for better mobile performance
10+
ZOOM_THROTTLE_DELAY: 16, // ~60fps throttling for zoom operations
1011
THROTTLE_SCROLL: 100,
1112
SEARCH_DEBOUNCE: 300,
1213
CHART_OBSERVER_MARGIN: "50px",
@@ -21,6 +22,8 @@ export const CONFIG = {
2122
SCROLL_ACTIVE_THRESHOLD: 100,
2223
URL_INIT_DELAY: 100,
2324
RESIZE_DEBOUNCE: 250,
25+
// Performance monitoring (set to true to enable console timing)
26+
ENABLE_ZOOM_PERFORMANCE_TIMING: false,
2427
};
2528

2629
// Color mappings for series

‎benchmarks-website/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -324,7 +324,7 @@ <h1 class="site-title">Vortex Benchmarks</h1>
324324
<div class="sidebar-hover-zone" id="sidebar-hover-zone"></div>
325325

326326
<!-- Sidebar Navigation -->
327-
<aside id="sidebar" class="sidebar">
327+
<aside id="sidebar" class="sidebar collapsed">
328328
<nav class="sidebar-nav">
329329
<div class="sidebar-header">
330330
<h2>Navigation</h2>

‎benchmarks-website/style.css‎

Lines changed: 33 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -275,26 +275,27 @@ body {
275275
overflow-y: auto;
276276
transition: transform 0.3s ease;
277277
z-index: 998;
278-
transform: translateX(0);
278+
transform: translateX(-100%); /* Start collapsed by default */
279279
}
280280

281-
/* Desktop: sidebar visible by default */
281+
/* Desktop: sidebar overlay styling */
282282
@media (min-width: 1200px) {
283283
.sidebar {
284-
box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
284+
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.15);
285285
}
286286

287287
.sidebar.collapsed {
288288
transform: translateX(-100%);
289289
}
290290

291-
/* Add margin to main content for sidebar space on desktop */
292-
.main-content {
293-
margin-left: var(--sidebar-width);
291+
.sidebar:not(.collapsed) {
292+
transform: translateX(0);
294293
}
295294

296-
.sidebar.collapsed ~ .main-content {
295+
/* Remove margin from main content - sidebar is now overlay */
296+
.main-content {
297297
margin-left: 0;
298+
width: 100%;
298299
}
299300
}
300301

@@ -444,7 +445,6 @@ body {
444445
padding: 32px;
445446
width: 100%;
446447
position: relative;
447-
transition: margin-left 0.3s ease;
448448
}
449449

450450
/* Larger padding on wide screens */
@@ -1044,7 +1044,7 @@ body {
10441044
display: none;
10451045
}
10461046

1047-
/* Sidebar overlay for mobile */
1047+
/* Sidebar overlay for all screen sizes */
10481048
.sidebar-overlay {
10491049
display: none;
10501050
position: fixed;
@@ -1056,10 +1056,32 @@ body {
10561056
z-index: 997;
10571057
}
10581058

1059-
/* Only show overlay on tablets and mobile */
1059+
/* Lighter overlay on desktop for better UX */
10601060
@media (min-width: 1200px) {
10611061
.sidebar-overlay {
1062-
display: none !important;
1062+
background: rgba(0, 0, 0, 0.3);
1063+
}
1064+
}
1065+
1066+
/* Show overlay only when sidebar has explicit 'open' class */
1067+
.sidebar.open ~ .sidebar-overlay {
1068+
display: block;
1069+
}
1070+
1071+
/* For mobile - show overlay when active class is present */
1072+
@media (max-width: 1199px) {
1073+
.sidebar.active ~ .sidebar-overlay {
1074+
display: block;
1075+
}
1076+
1077+
/* On mobile, don't use the 'open' class rule */
1078+
.sidebar.open ~ .sidebar-overlay {
1079+
display: none;
1080+
}
1081+
1082+
/* Re-enable for mobile active state */
1083+
.sidebar.active ~ .sidebar-overlay {
1084+
display: block;
10631085
}
10641086
}
10651087

@@ -1084,10 +1106,6 @@ body {
10841106
body {
10851107
padding-top: var(--header-height);
10861108
}
1087-
1088-
.sidebar.active ~ .sidebar-overlay {
1089-
display: block;
1090-
}
10911109

10921110
.header-content {
10931111
padding: 0 8px;

0 commit comments

Comments
 (0)