update

render/base.css

@@ -274,13 +274,22 @@ table {
 	text-align: left;
 	border-collapse: collapse; 
 	line-height: normal;
+	/*overflow: hidden;*/ /* ugly chrome-based */
 }
 th, td {
 	padding: 0.15rem;
 	border: none;
 }
+tr {
+	padding: 0.15rem;
+	border: none;
+	cursor: pointer;
+}
+tr a {
+	text-decoration: none;
+}
 th {
-	
+	z-index: 1;
 }
 th.table-sticky {
 	position: sticky;
@@ -304,4 +313,17 @@ ul.list {
 	margin: 0;
 }
 ul.list li { display: inline-block; margin-left: 10px; } /* FIXME: flex or grid */
-ul.list li:first-child { margin-left: 0;}
+ul.list li:first-child { margin-left: 0;}
+
+summary {
+	cursor: pointer;
+	list-style: none;
+}
+summary:before {
+	content: "📁\FE0F +";
+	margin: -5px 5px 0 0;
+}
+details[open] summary:before {
+	content: "📂\FE0F −";
+}
+

render/index.js

@@ -49,7 +49,6 @@ function makeTable(fields, data, attrs_func) {
 
 				const field_func = f.tags_func ? f.tags_func : fieldFuncDefault;
 				const tags = field_func(value, d);
-				let attrs = null;
 
 				// if (f.good && f.bad) {
 				// 	const rating = linearStep(value, f.good, f.bad);
@@ -60,7 +59,7 @@ function makeTable(fields, data, attrs_func) {
 				// 	};
 				// 	attrs = {style: `background-color: rgb(${c.r}, ${c.g}, ${c.b})`};
 				// }
-				ret.push(Tag('td', attrs, null, tags));
+				ret.push(Tag('td', null, null, tags));
 			}
 			return ret;
 		})()));
@@ -72,9 +71,9 @@ function makeTable(fields, data, attrs_func) {
 function buildTestResultsTable(data) {
 	const fields = [
 		{label: 'Test', field: 'test', tags_func: sectionLink},
-		{label: 'Channel', field: 'channel', tags_func: sectionLink},
+		{label: 'Channel', field: 'channel', },
-		{label: 'Δ, %', field: 'diff_pct'},
+		{label: 'Δ, %', field: 'diff_pct', },
-		{label: 'Failed', field: 'fail'},
+		{label: 'Failed', field: 'fail', },
 	];
 
 	return [makeTable(fields, data, rowAttribs)];
@@ -120,12 +119,46 @@ function buildData(table, images, data, sort) {
 	}
 	table.replaceChildren(...buildTestResultsTable(data));
 	images.replaceChildren(...buildTestResultImages(data));
+
+	for (let block of images.querySelectorAll(".image-container")) {
+		block.addEventListener("click", function() {
+			let diffElement = this.querySelector(".block-diff");
+			diffElement.classList.toggle("show_diff");
+		});
+	};
+	
+	for (let tr of document.querySelectorAll("table tr")) {
+		tr.addEventListener("click", function() {
+			this.querySelector("a").click();
+		});
+	}
+
+	saveToLocalStorage("rendertest_tablesort", sort);
 }
 
+const saveToLocalStorage = debounce((key, value) => {
+	localStorage.setItem(key, value);
+});
+const loadFromLocalStorage = (key) => {
+	const value = localStorage.getItem(key);
+	if (isNaN(value)) {
+		switch(value) { // ugly textual localStorage
+			case "true":
+				return true;
+			case "false":
+				return false;
+			case "null":
+				return null;
+			default:
+				return value;
+		}
+	}
+	return parseFloat(value); // fix !!"0" = true
+}
+
+
 window.onload = () => {
 	const linkElements = document.querySelectorAll('link[rel^="stylesheet"][data-theme]');
-	const themeOptionsDiv = document.querySelector(".theme-options");
-
 	function updateLinkRel(linkElements, id) {
 		for (const link of linkElements) {
 			const themeName = link.getAttribute("data-theme");
@@ -135,7 +168,6 @@ window.onload = () => {
 				: link.rel + " alternate";
 		}
 	}
-	// themes
 	let themes = [];
 	for (const linkElement of linkElements) {
 		const themeName = linkElement.getAttribute("data-theme");
@@ -152,15 +184,10 @@ window.onload = () => {
 	};
 
 
+
 	function changeAnimationDuration(newDuration) {
 		document.documentElement.style.setProperty('--animation-duration', newDuration + 'ms');
 	}
-	const saveToLocalStorage = debounce((key, value) => {
-		localStorage.setItem(key, value);
-	});
-	const loadFromLocalStorage = localStorage.getItem;
-
-
 	function syncSliderValues(event) {
 		changeAnimationDuration(event.target.value);
 		const value = event.target.value;
@@ -169,10 +196,18 @@ window.onload = () => {
 		otherInput.value = value;
 		saveToLocalStorage("rendertest_switchfrequency", value);
 	}
-	
+
 	let isPaused = false;
 	let gridContainer, sidebarOptions, numberInput, rangeInput, table, images;
 
+	const tableSort = !!loadFromLocalStorage("rendertest_tablesort");
+	const sidebarPos = loadFromLocalStorage("rendertest_sidebarpos");
+	
+	function uglyChecked(value) { // fast hack
+		return value ? {"checked": "checked"} : {};
+	}
+
+	// TODO: simplification and bindings
 	gridContainer = Tag("div", {"class": "grid-container"}, null, [
 		Tag("div", {"class": "sidebar"}, null, [
 			sidebarOptions = Tag("div", {"class": "panel", "id": "options"}, null, [
@@ -230,6 +265,12 @@ window.onload = () => {
 						isPaused = !isPaused;
 					})
 				]),
+				/* future
+				Tag("details", null, null, [
+					Tag("summary", null, "Advanced options"),
+					
+				]),
+				*/
 				Tag("div", null, null, [
 					Tag("b", null, null, [
 						Tag("span", {"class": "emoji"}, "🧻"),
@@ -252,16 +293,16 @@ window.onload = () => {
 							Tag("span", {"class": "emoji"}, "🧲"),
 							Text(" position"),
 							Tag("label", null, null, [
-								Tag("input", {"type": "radio", "name": "sidebar_pos", "value": "left", "checked": "checked"}, null, null, "input", (e) => {
+								Tag("input", {"type": "radio", "name": "sidebar_pos", "value": "left", ...uglyChecked(sidebarPos == "left")}, null, null, "input", (e) => {
-									console.log(e);
 									gridContainer.classList.toggle("reversed");
+									saveToLocalStorage("rendertest_sidebarpos", e.target.value);
 								}),
 								Text(" left")
 							]),
 							Tag("label", null, null, [
-								Tag("input", {"type": "radio", "name": "sidebar_pos", "value": "right"}, null, null, "input", (e) => {
+								Tag("input", {"type": "radio", "name": "sidebar_pos", "value": "right", ...uglyChecked(sidebarPos == "right")}, null, null, "input", (e) => {
-									console.log(e);
 									gridContainer.classList.toggle("reversed");
+									saveToLocalStorage("rendertest_sidebarpos", e.target.value);
 								}),
 								Text(" right")
 							]),
@@ -282,7 +323,6 @@ window.onload = () => {
 								Text(" mini")
 							])
 						]), 
-
 					]),
 				]),
 				Tag("div", null, null, [
@@ -296,12 +336,12 @@ window.onload = () => {
 					]), 
 					Tag("label", null, null, [
 						Tag("input", {"type": "radio", "name": "image_position", "value": "center", "checked": "checked"}),
-						Text(" center")
+						Text(" center ")
 					]),
 					Tag("b", null, null, [
 						Tag("span", {"class": "emoji"}, "🖼"),
 						Tag("label", null, null, [
-							Text(" Image padding"),
+							Text(" vertical padding"),
 							Tag("input", {"type": "checkbox", "name": "all_diff", "checked": "checked"}, null, null, "input", (e) => {
 								images.classList.toggle("padding");
 							})
@@ -323,13 +363,13 @@ window.onload = () => {
 						Text(" Sort table by Failed")
 					]), 
 					Tag("label", null, null, [
-						Tag("input", {"type": "radio", "name": "sort_table", "value": "yes", "checked": "checked"}, null, null, "input", (e) => {
+						Tag("input", {"type": "radio", "name": "sort_table", "value": "yes", ...uglyChecked(tableSort)}, null, null, "input", (e) => {
 							buildData(table, images, data, true);
 						}),
 						Text(" yes")
 					]), 
 					Tag("label", null, null, [
-						Tag("input", {"type": "radio", "name": "sort_table", "value": "no"}, null, null, "input", (e) => {
+						Tag("input", {"type": "radio", "name": "sort_table", "value": "no", ...uglyChecked(!tableSort)}, null, null, "input", (e) => {
 							buildData(table, images, data, false);
 						}),
 						Text(" no")
@@ -350,33 +390,13 @@ window.onload = () => {
 		])
 	])
 	document.body.appendChild(gridContainer);
-	
-	buildData(table, images, data, true);
 
-	for (let block of document.querySelectorAll(".image-container")) {
+	buildData(table, images, data, tableSort);
-		block.addEventListener("click", function() {
-			let diffElement = this.querySelector(".block-diff");
-			diffElement.classList.toggle('show_diff');
-		});
-	};
 
-
+	// TODO: remove this
-
+	if (sidebarPos == "right") {
-	function handleCheckboxChange(checkboxId, key) {
+		gridContainer.classList.toggle("reversed");
-		var checkbox = document.getElementById(checkboxId);
-		saveToLocalStorage(key, checkbox.checked);
 	}
-	function handleRadioChange(radioGroupId, key) {
-		var radios = document.getElementsByName(radioGroupId);
-		for (var i = 0; i < radios.length; i++) {
-			if (radios[i].checked) {
-				saveToLocalStorage(key, radios[i].value);
-				break;
-			}
-		}
-	}
-	
-
 
 }