From c84d0fa43547748f7b88182bdfe39cc3796a8089 Mon Sep 17 00:00:00 2001 From: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com> Date: Tue, 9 Dec 2025 22:47:47 +0100 Subject: [PATCH 1/2] Add icon existence checks and warnings in ComboBox, TechReport, and TableLinked components --- src/js/techreport/combobox.js | 30 +++++++++++++++++++----------- src/js/techreport/index.js | 16 +++++++++++----- src/js/techreport/tableLinked.js | 16 ++++++++++------ 3 files changed, 40 insertions(+), 22 deletions(-) diff --git a/src/js/techreport/combobox.js b/src/js/techreport/combobox.js index 6fa0ad95..4dc4289e 100644 --- a/src/js/techreport/combobox.js +++ b/src/js/techreport/combobox.js @@ -29,11 +29,15 @@ class ComboBox { option.dataset.key = index; option.textContent = row.technology; option.id = `${this.element.dataset.id}-${row.technology.replaceAll(' ','-')}`; - const logo = document.createElement('img'); - logo.setAttribute('alt', ''); - logo.setAttribute('src', `https://cdn.httparchive.org/v1/static/icons/${icon}`); - logo.setAttribute('loading', 'lazy'); - option.append(logo); + if(icon) { + const logo = document.createElement('img'); + logo.setAttribute('alt', ''); + logo.setAttribute('src', `https://cdn.httparchive.org/v1/static/icons/${icon}`); + logo.setAttribute('loading', 'lazy'); + option.append(logo); + } else { + console.warn('No icon found for technology:', row.technology); + } if(this.selected.includes(row.technology)) { option.setAttribute('aria-selected', true); } @@ -198,12 +202,16 @@ class ComboBox { deleteSelection.dataset.name = name; deleteSelection.addEventListener('click', () => this.unselectElement(name)); - /* Add the app logo */ - const appIcon = document.createElement('img'); - appIcon.setAttribute('src', `https://cdn.httparchive.org/v1/static/icons/${encodeURI(icon)}`); - appIcon.setAttribute('alt', ''); - appIcon.classList.add('logo'); - deleteSelection.append(appIcon); + if (icon) { + /* Add the app logo */ + const appIcon = document.createElement('img'); + appIcon.setAttribute('src', `https://cdn.httparchive.org/v1/static/icons/${encodeURI(icon)}`); + appIcon.setAttribute('alt', ''); + appIcon.classList.add('logo'); + deleteSelection.append(appIcon); + } else { + console.warn('No icon found for technology:', name); + } /* Add the delete icon */ const deleteIcon = document.createElement('img'); diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js index 1a18ebf4..4fc4ef75 100644 --- a/src/js/techreport/index.js +++ b/src/js/techreport/index.js @@ -299,9 +299,7 @@ class TechReport { // Get the information about the selected technology getTechInfo() { const technologies = this.filters.app; - const technology = technologies.join('%2C') - .replaceAll(" ", "%20"); - + const technology = technologies.map(encodeURIComponent).join(':'); const url = `${Constants.apiBase}/technologies?technology=${technology}`; fetch(url) @@ -315,7 +313,11 @@ class TechReport { const categories = techInfo && techInfo.category ? techInfo.category.split(', ') : []; DrilldownHeader.setCategories(categories); DrilldownHeader.setDescription(techInfo.description); - DrilldownHeader.setIcon(techInfo.icon); + if (techInfo.icon) { + DrilldownHeader.setIcon(techInfo.icon); + } else { + console.warn('No icon found for technology:', technologies[0]); + } }); } @@ -408,7 +410,11 @@ class TechReport { const app = this.filters.app[0]; const icon = data[app]?.at(-1)?.icon; DrilldownHeader.update(this.filters); - DrilldownHeader.setIcon(`${encodeURI(icon)}`); + if (icon) { + DrilldownHeader.setIcon(`${encodeURI(icon)}`); + } else { + console.warn('No icon found for technology:', app); + } if(data && data[app]) { UIUtils.updateReportComponents(this.sections, data, data[app], this.page, this.labels); diff --git a/src/js/techreport/tableLinked.js b/src/js/techreport/tableLinked.js index 09d8c3d1..0ba63435 100644 --- a/src/js/techreport/tableLinked.js +++ b/src/js/techreport/tableLinked.js @@ -106,12 +106,16 @@ class TableLinked { const wrapper = document.createElement('span'); wrapper.classList.add('app-wrapper'); - const img = document.createElement('span'); - const imgUrl = `https://cdn.httparchive.org/v1/static/icons/${encodeURI(technology[0]?.icon)}`; - img.setAttribute('aria-hidden', 'true'); - img.setAttribute('style', `background-image: url(${imgUrl})`); - img.classList.add('app-img'); - wrapper.append(img); + if(technology[0]?.icon) { + const img = document.createElement('span'); + const imgUrl = `https://cdn.httparchive.org/v1/static/icons/${encodeURI(technology[0]?.icon)}`; + img.setAttribute('aria-hidden', 'true'); + img.setAttribute('style', `background-image: url(${imgUrl})`); + img.classList.add('app-img'); + wrapper.append(img); + } else { + console.warn('No icon found for technology:', app); + } const formattedApp = DataUtils.formatAppName(app); const link = document.createElement('a'); From f93e0027a4a8de1d769533e9c1338f5a206dfd3b Mon Sep 17 00:00:00 2001 From: Max Ostapenko <1611259+max-ostapenko@users.noreply.github.com> Date: Tue, 9 Dec 2025 23:00:19 +0100 Subject: [PATCH 2/2] Remove console warnings for missing icons in ComboBox, TechReport, and TableLinked components --- src/js/techreport/combobox.js | 4 ---- src/js/techreport/index.js | 6 +----- src/js/techreport/tableLinked.js | 2 -- 3 files changed, 1 insertion(+), 11 deletions(-) diff --git a/src/js/techreport/combobox.js b/src/js/techreport/combobox.js index 4dc4289e..27aafdbf 100644 --- a/src/js/techreport/combobox.js +++ b/src/js/techreport/combobox.js @@ -35,8 +35,6 @@ class ComboBox { logo.setAttribute('src', `https://cdn.httparchive.org/v1/static/icons/${icon}`); logo.setAttribute('loading', 'lazy'); option.append(logo); - } else { - console.warn('No icon found for technology:', row.technology); } if(this.selected.includes(row.technology)) { option.setAttribute('aria-selected', true); @@ -209,8 +207,6 @@ class ComboBox { appIcon.setAttribute('alt', ''); appIcon.classList.add('logo'); deleteSelection.append(appIcon); - } else { - console.warn('No icon found for technology:', name); } /* Add the delete icon */ diff --git a/src/js/techreport/index.js b/src/js/techreport/index.js index 4fc4ef75..2b139148 100644 --- a/src/js/techreport/index.js +++ b/src/js/techreport/index.js @@ -299,7 +299,7 @@ class TechReport { // Get the information about the selected technology getTechInfo() { const technologies = this.filters.app; - const technology = technologies.map(encodeURIComponent).join(':'); + const technology = technologies.map(encodeURIComponent).join(','); const url = `${Constants.apiBase}/technologies?technology=${technology}`; fetch(url) @@ -315,8 +315,6 @@ class TechReport { DrilldownHeader.setDescription(techInfo.description); if (techInfo.icon) { DrilldownHeader.setIcon(techInfo.icon); - } else { - console.warn('No icon found for technology:', technologies[0]); } }); } @@ -412,8 +410,6 @@ class TechReport { DrilldownHeader.update(this.filters); if (icon) { DrilldownHeader.setIcon(`${encodeURI(icon)}`); - } else { - console.warn('No icon found for technology:', app); } if(data && data[app]) { diff --git a/src/js/techreport/tableLinked.js b/src/js/techreport/tableLinked.js index 0ba63435..5be37525 100644 --- a/src/js/techreport/tableLinked.js +++ b/src/js/techreport/tableLinked.js @@ -113,8 +113,6 @@ class TableLinked { img.setAttribute('style', `background-image: url(${imgUrl})`); img.classList.add('app-img'); wrapper.append(img); - } else { - console.warn('No icon found for technology:', app); } const formattedApp = DataUtils.formatAppName(app);