From 0e24d7d1d5ad11ac48c8394be7c7fbe6ffe99e4f Mon Sep 17 00:00:00 2001
From: Sarah Fossheim <sarah@fossheim.io>
Date: Wed, 2 Apr 2025 14:52:29 +0200
Subject: [PATCH 1/2] add the correct techs to the compare button when loading
 a page

---
 src/js/techreport/tableLinked.js | 13 +++----------
 src/js/techreport/utils/data.js  | 12 ++++++++++--
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/js/techreport/tableLinked.js b/src/js/techreport/tableLinked.js
index fd2b792c..f7e1b416 100644
--- a/src/js/techreport/tableLinked.js
+++ b/src/js/techreport/tableLinked.js
@@ -9,11 +9,11 @@ class TableLinked {
     this.submetric = ''; // TODO: Fetch the default one from somewhere
     this.data = data;
     this.dataArray = [];
-    this.selectedTechs = this.getTechsFromURL()?.split(',') || [];
+    this.selectedTechs = DataUtils.getTechsFromURL()?.split(',') || [];
     this.rows = filters.rows || 10;
 
     this.updateContent();
-    this.updateSelectionText(this.getTechsFromURL());
+    this.updateSelectionText(DataUtils.getTechsFromURL());
 
     const rowCount = document.getElementById('rowsPerPage');
     rowCount?.addEventListener('change', (e) => this.updateRowsPerPage(e));
@@ -35,8 +35,6 @@ class TableLinked {
 
     this.dataArray = this.dataArray.filter(row => row.length > 0);
 
-    console.log('set content', content, this.dataArray);
-
     const isContent = content?.length > 0 || this.dataArray?.length > 0;
 
     if(tbody && isContent) {
@@ -159,11 +157,6 @@ class TableLinked {
     }
   }
 
-  getTechsFromURL() {
-    const url = new URL(window.location);
-    return url.searchParams.get('selected') || null;
-  }
-
   addColumnCheckbox(app) {
     const cell = document.createElement('td');
     const formattedApp = DataUtils.formatAppName(app);
@@ -192,7 +185,7 @@ class TableLinked {
 
   // Set selected content
   isTechSelected(app) {
-    const urlSelected = this.getTechsFromURL();
+    const urlSelected = DataUtils.getTechsFromURL();
     return urlSelected?.includes(app) || false;
   }
 
diff --git a/src/js/techreport/utils/data.js b/src/js/techreport/utils/data.js
index 2b064e5f..3f819262 100644
--- a/src/js/techreport/utils/data.js
+++ b/src/js/techreport/utils/data.js
@@ -139,10 +139,12 @@ const fetchCategoryData = (rows, filters, callback) => {
       const lastTechNr = pageNr * rows;
       const paginatedTechs = category?.technologies?.slice(firstTechNr, lastTechNr);
 
-      const technologyFormatted = encodeURI(paginatedTechs?.join('%2C'));
+      const techsFromUrl = getTechsFromURL();
+      const technologyFormatted = paginatedTechs?.join(',');
+      const technologyUrl = encodeURI(techsFromUrl || technologyFormatted);
 
       const compare = document.querySelector('[data-name="selected-apps"]');
-      compare.setAttribute('href', `/reports/techreport/tech?tech=${technologyFormatted}`);
+      compare.setAttribute('href', `/reports/techreport/tech?tech=${technologyUrl}`);
 
       let allResults = {};
       paginatedTechs.forEach(tech => allResults[tech] = []);
@@ -194,6 +196,11 @@ const fetchCategoryData = (rows, filters, callback) => {
     });
 }
 
+const getTechsFromURL = () => {
+  const url = new URL(window.location);
+  return url.searchParams.get('selected') || null;
+}
+
 export const DataUtils = {
   parseVitalsData,
   parseLighthouseData,
@@ -203,4 +210,5 @@ export const DataUtils = {
   getLighthouseScoreCategories,
   formatAppName,
   fetchCategoryData,
+  getTechsFromURL,
 };

From 6094446252a13e3707f7ab3da29b987c0a956852 Mon Sep 17 00:00:00 2001
From: Sarah Fossheim <sarah@fossheim.io>
Date: Sun, 13 Apr 2025 01:12:39 +0200
Subject: [PATCH 2/2] make comma usage consistent

---
 src/js/components/filters.js     | 3 ++-
 src/js/techreport/tableLinked.js | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/js/components/filters.js b/src/js/components/filters.js
index b0055659..e9694227 100644
--- a/src/js/components/filters.js
+++ b/src/js/components/filters.js
@@ -73,7 +73,8 @@ class Filters {
     // url.hash = '#report-content';
 
     /* Update the url */
-    location.href = url;
+    const styledUrl = url.href.replaceAll('%2C', ',');
+    location.href = styledUrl;
   }
 
   /* Update the list of technologies */
diff --git a/src/js/techreport/tableLinked.js b/src/js/techreport/tableLinked.js
index f7e1b416..fb568626 100644
--- a/src/js/techreport/tableLinked.js
+++ b/src/js/techreport/tableLinked.js
@@ -236,7 +236,8 @@ class TableLinked {
   updateURL(param, value) {
     const url = new URL(window.location);
     url.searchParams.set(param, value);
-    window.history.replaceState(null, null, url);
+    const styledUrl = url.href.replaceAll('%2C', ',');
+    window.history.replaceState(null, null, styledUrl);
   }
 
   updateSelectionText(allSelectedApps) {