Skip to content

[Benchmarks] Add toggle abstraction layer #19799

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: sycl
Choose a base branch
from
Open

[Benchmarks] Add toggle abstraction layer #19799

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
232 changes: 132 additions & 100 deletions devops/scripts/benchmarks/html/scripts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,125 @@ let annotationsOptions = new Map(); // Global options map for annotations
let archivedDataLoaded = false;
let loadedBenchmarkRuns = []; // Loaded results from the js/json files

// Toggle configuration and abstraction
//
// HOW TO ADD A NEW TOGGLE:
// 1. Add HTML checkbox to index.html:
// <label><input type="checkbox" id="my-toggle">My Toggle</label>
//
// 2. Add configuration below:
// 'my-toggle': {
// defaultValue: false, // true = enabled by default, false = disabled by default
// urlParam: 'myParam', // Name shown in URL (?myParam=true)
// invertUrlParam: false, // false = normal behavior, true = legacy inverted logic
// onChange: function(isEnabled) { // Function called when toggle state changes
// // Your logic here
// updateURL(); // Always call this to update the browser URL
// }
// }
//
// 3. (Optional) Add helper function for cleaner, more readable code:
// function isMyToggleEnabled() { return isToggleEnabled('my-toggle'); }
//
// This lets you write: if (isMyToggleEnabled()) { ... }
// Instead of: if (isToggleEnabled('my-toggle')) { ... }
//

const toggleConfigs = {
'show-notes': {
defaultValue: true,
urlParam: 'notes',
invertUrlParam: true, // Store false in URL when enabled (legacy behavior)
onChange: function(isEnabled) {
document.querySelectorAll('.benchmark-note').forEach(note => {
note.style.display = isEnabled ? 'block' : 'none';
});
updateURL();
}
},
'show-unstable': {
defaultValue: false,
urlParam: 'unstable',
invertUrlParam: false,
onChange: function(isEnabled) {
document.querySelectorAll('.benchmark-unstable').forEach(warning => {
warning.style.display = isEnabled ? 'block' : 'none';
});
filterCharts();
}
},
'custom-range': {
defaultValue: false,
urlParam: 'customRange',
invertUrlParam: false,
onChange: function(isEnabled) {
updateCharts();
}
},
'show-archived-data': {
defaultValue: false,
urlParam: 'archived',
invertUrlParam: false,
onChange: function(isEnabled) {
if (isEnabled) {
loadArchivedData();
} else {
if (archivedDataLoaded) {
location.reload();
}
}
updateURL();
}
}
};

// Generic toggle helper functions
function isToggleEnabled(toggleId) {
const toggle = document.getElementById(toggleId);
return toggle ? toggle.checked : toggleConfigs[toggleId]?.defaultValue || false;
}

function setupToggle(toggleId, config) {
const toggle = document.getElementById(toggleId);
if (!toggle) return;

// Set up event listener
toggle.addEventListener('change', function() {
config.onChange(toggle.checked);
});

// Initialize from URL params if present
const urlParam = getQueryParam(config.urlParam);
if (urlParam !== null) {
const urlValue = urlParam === 'true';
// Handle inverted URL params (like notes where false means enabled)
toggle.checked = config.invertUrlParam ? !urlValue : urlValue;
} else {
// Use default value
toggle.checked = config.defaultValue;
}
}

function updateToggleURL(toggleId, config, url) {
const isEnabled = isToggleEnabled(toggleId);

if (config.invertUrlParam) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: I think you could just compare isEnabled to the defaultValue here. This way, you wouldn't need inverUrlParam at all.

// For inverted params, store in URL when disabled
if (isEnabled) {
url.searchParams.delete(config.urlParam);
} else {
url.searchParams.set(config.urlParam, 'false');
}
} else {
// For normal params, store in URL when enabled
if (!isEnabled) {
url.searchParams.delete(config.urlParam);
} else {
url.searchParams.set(config.urlParam, 'true');
}
}
}

// DOM Elements
let runSelect, selectedRunsDiv, suiteFiltersContainer, tagFiltersContainer;

Expand Down Expand Up @@ -627,30 +746,10 @@ function updateURL() {
url.searchParams.delete('runs');
}

// Add toggle states to URL
if (isNotesEnabled()) {
url.searchParams.delete('notes');
} else {
url.searchParams.set('notes', 'false');
}

if (!isUnstableEnabled()) {
url.searchParams.delete('unstable');
} else {
url.searchParams.set('unstable', 'true');
}

if (!isCustomRangesEnabled()) {
url.searchParams.delete('customRange');
} else {
url.searchParams.set('customRange', 'true');
}

if (!isArchivedDataEnabled()) {
url.searchParams.delete('archived');
} else {
url.searchParams.set('archived', 'true');
}
// Update toggle states in URL using the generic helper
Object.entries(toggleConfigs).forEach(([toggleId, config]) => {
updateToggleURL(toggleId, config, url);
});

history.replaceState(null, '', url);
}
Expand Down Expand Up @@ -949,94 +1048,26 @@ function setupSuiteFilters() {
}

function isNotesEnabled() {
const notesToggle = document.getElementById('show-notes');
return notesToggle.checked;
return isToggleEnabled('show-notes');
}

function isUnstableEnabled() {
const unstableToggle = document.getElementById('show-unstable');
return unstableToggle.checked;
return isToggleEnabled('show-unstable');
}

function isCustomRangesEnabled() {
const rangesToggle = document.getElementById('custom-range');
return rangesToggle.checked;
return isToggleEnabled('custom-range');
}

function isArchivedDataEnabled() {
const archivedDataToggle = document.getElementById('show-archived-data');
return archivedDataToggle.checked;
return isToggleEnabled('show-archived-data');
}

function setupToggles() {
const notesToggle = document.getElementById('show-notes');
const unstableToggle = document.getElementById('show-unstable');
const customRangeToggle = document.getElementById('custom-range');
const archivedDataToggle = document.getElementById('show-archived-data');

notesToggle.addEventListener('change', function () {
// Update all note elements visibility
document.querySelectorAll('.benchmark-note').forEach(note => {
note.style.display = isNotesEnabled() ? 'block' : 'none';
});
updateURL();
});

unstableToggle.addEventListener('change', function () {
// Update all unstable warning elements visibility
document.querySelectorAll('.benchmark-unstable').forEach(warning => {
warning.style.display = isUnstableEnabled() ? 'block' : 'none';
});
filterCharts();
});

customRangeToggle.addEventListener('change', function () {
// redraw all charts
updateCharts();
// Set up all toggles using the configuration
Object.entries(toggleConfigs).forEach(([toggleId, config]) => {
setupToggle(toggleId, config);
});

// Add event listener for archived data toggle
if (archivedDataToggle) {
archivedDataToggle.addEventListener('change', function() {
if (archivedDataToggle.checked) {
loadArchivedData();
} else {
if (archivedDataLoaded) {
// Reload the page to reset
location.reload();
}
}
updateURL();
});
}

// Initialize from URL params if present
const notesParam = getQueryParam('notes');
const unstableParam = getQueryParam('unstable');
const archivedParam = getQueryParam('archived');

if (notesParam !== null) {
let showNotes = notesParam === 'true';
notesToggle.checked = showNotes;
}

if (unstableParam !== null) {
let showUnstable = unstableParam === 'true';
unstableToggle.checked = showUnstable;
}

const customRangesParam = getQueryParam('customRange');
if (customRangesParam !== null) {
customRangeToggle.checked = customRangesParam === 'true';
}

if (archivedDataToggle && archivedParam !== null) {
archivedDataToggle.checked = archivedParam === 'true';

if (archivedDataToggle.checked) {
loadArchivedData();
}
}
}

function setupTagFilters() {
Expand Down Expand Up @@ -1154,9 +1185,10 @@ function initializeCharts() {
// Setup UI components
setupRunSelector();
setupSuiteFilters();
setupTagFilters();
setupToggles();
initializePlatformTab();
// Setup tag filters after everything else is ready
setupTagFilters();

// Apply URL parameters
const regexParam = getQueryParam('regex');
Expand Down
Loading