doc: boards: allow filtering by SoC

This introduces the ability to filter boards by soc (family / series /
soc).

Signed-off-by: Benjamin Cabé <[email protected]>

Author: kartben

doc/_extensions/zephyr/domain/static/css/board-catalog.css

@@ -46,6 +46,19 @@
   margin-bottom: 5px;
 }
 
+.filter-form #family, .filter-form #series, .filter-form #soc {
+  overflow: auto;
+  border-radius: 8px;
+  padding-right: 18px;
+}
+
+.filter-form #family option:checked,
+.filter-form #series option:checked,
+.filter-form #soc option:checked {
+  background-color: var(--admonition-note-title-background-color);
+  color: var(--admonition-note-title-color);
+}
+
 .select-container {
   position: relative;
 }

doc/_extensions/zephyr/domain/static/js/board-catalog.js

@@ -14,30 +14,76 @@ function toggleDisplayMode(btn) {
 }
 
 function populateFormFromURL() {
-  const params = ["name", "arch", "vendor"];
+  const params = ["name", "arch", "vendor", "soc"];
   const hashParams = new URLSearchParams(window.location.hash.slice(1));
   params.forEach((param) => {
     const element = document.getElementById(param);
     if (hashParams.has(param)) {
-      element.value = hashParams.get(param);
+      const value = hashParams.get(param);
+      if (param === "soc") {
+        value.split(",").forEach(soc =>
+          element.querySelector(`option[value="${soc}"]`).selected = true);
+      } else {
+        element.value = value;
+      }
     }
   });
 
   filterBoards();
 }
 
 function updateURL() {
-  const params = ["name", "arch", "vendor"];
+  const params = ["name", "arch", "vendor", "soc"];
   const hashParams = new URLSearchParams(window.location.hash.slice(1));
 
   params.forEach((param) => {
-    const value = document.getElementById(param).value;
-    value ? hashParams.set(param, value) : hashParams.delete(param);
+    const element = document.getElementById(param);
+    if (param === "soc") {
+      const selectedSocs = [...element.selectedOptions].map(({ value }) => value);
+      selectedSocs.length ? hashParams.set(param, selectedSocs.join(",")) : hashParams.delete(param);
+    }
+    else {
+      element.value ? hashParams.set(param, element.value) : hashParams.delete(param);
+    }
   });
 
   window.history.replaceState({}, "", `#${hashParams.toString()}`);
 }
 
+function fillSocFamilySelect() {
+  const socFamilySelect = document.getElementById("family");
+
+  Object.keys(socs_data).sort().forEach(f => {
+    socFamilySelect.add(new Option(f));
+  });
+}
+
+function fillSocSeriesSelect(families, selectOnFill = false) {
+  const socSeriesSelect = document.getElementById("series");
+
+  families = families?.length ? families : Object.keys(socs_data);
+  let allSeries = [...new Set(families.flatMap(f => Object.keys(socs_data[f])))];
+
+  socSeriesSelect.innerHTML = "";
+  allSeries.sort().map(s => {
+    const option = new Option(s, s, selectOnFill, selectOnFill);
+    socSeriesSelect.add(option);
+  });
+}
+
+function fillSocSocSelect(families, series = undefined, selectOnFill = false) {
+  const socSocSelect = document.getElementById("soc");
+
+  families = families?.length ? families : Object.keys(socs_data);
+  series = series?.length ? series : families.flatMap(f => Object.keys(socs_data[f]));
+  matchingSocs = families.flatMap(f => series.flatMap(s => socs_data[f][s] || []));
+
+  socSocSelect.innerHTML = "";
+  matchingSocs.sort().forEach((soc) => {
+    socSocSelect.add(new Option(soc, soc, selectOnFill, selectOnFill));
+  });
+}
+
 document.addEventListener("DOMContentLoaded", function () {
   const form = document.querySelector(".filter-form");
 
@@ -52,18 +98,53 @@ document.addEventListener("DOMContentLoaded", function () {
     vendorSelect.appendChild(option);
   });
 
+  fillSocFamilySelect();
+  fillSocSeriesSelect();
+  fillSocSocSelect();
+
   populateFormFromURL();
 
-  form.addEventListener("submit", function (event) {
-    event.preventDefault();
+  socFamilySelect = document.getElementById("family");
+  socFamilySelect.addEventListener("change", () => {
+    const selectedFamilies = [...socFamilySelect.selectedOptions].map(({ value }) => value);
+    fillSocSeriesSelect(selectedFamilies, true);
+    fillSocSocSelect(selectedFamilies, undefined, true);
+    filterBoards();
+  });
+
+  socSeriesSelect = document.getElementById("series");
+  socSeriesSelect.addEventListener("change", () => {
+    const selectedFamilies = [...socFamilySelect.selectedOptions].map(({ value }) => value);
+    const selectedSeries = [...socSeriesSelect.selectedOptions].map(({ value }) => value);
+    fillSocSocSelect(selectedFamilies, selectedSeries, true);
+    filterBoards();
+  });
+
+  socSocSelect = document.getElementById("soc");
+  socSocSelect.addEventListener("change", () => {
+    filterBoards();
   });
 
   form.addEventListener("input", function () {
     filterBoards();
-    updateURL();
   });
+
+  form.addEventListener("submit", function (event) {
+    event.preventDefault();
+  });
+
+  filterBoards();
 });
 
+function resetForm() {
+  const form = document.querySelector(".filter-form");
+  form.reset();
+  fillSocFamilySelect();
+  fillSocSeriesSelect();
+  fillSocSocSelect();
+  filterBoards();
+}
+
 function updateBoardCount() {
   const boards = document.getElementsByClassName("board-card");
   const visibleBoards = Array.from(boards).filter(
@@ -77,9 +158,10 @@ function filterBoards() {
   const nameInput = document.getElementById("name").value.toLowerCase();
   const archSelect = document.getElementById("arch").value;
   const vendorSelect = document.getElementById("vendor").value;
+  const socSocSelect = document.getElementById("soc");
 
   const resetFiltersBtn = document.getElementById("reset-filters");
-  if (nameInput || archSelect || vendorSelect) {
+  if (nameInput || archSelect || vendorSelect || socSocSelect.selectedOptions.length) {
     resetFiltersBtn.classList.remove("btn-disabled");
   } else {
     resetFiltersBtn.classList.add("btn-disabled");
@@ -91,20 +173,21 @@ function filterBoards() {
     const boardName = board.getAttribute("data-name").toLowerCase();
     const boardArchs = board.getAttribute("data-arch").split(" ");
     const boardVendor = board.getAttribute("data-vendor");
+    const boardSocs = board.getAttribute("data-socs").split(" ");
 
     let matches = true;
 
+    const selectedSocs = [...socSocSelect.selectedOptions].map(({ value }) => value);
+
     matches =
       !(nameInput && !boardName.includes(nameInput)) &&
       !(archSelect && !boardArchs.includes(archSelect)) &&
-      !(vendorSelect && boardVendor !== vendorSelect);
+      !(vendorSelect && boardVendor !== vendorSelect) &&
+      (selectedSocs.length === 0 || selectedSocs.some((soc) => boardSocs.includes(soc)));
 
-    if (matches) {
-      board.classList.remove("hidden");
-    } else {
-      board.classList.add("hidden");
-    }
+    board.classList.toggle("hidden", !matches);
   });
 
+  updateURL();
   updateBoardCount();
 }

doc/_extensions/zephyr/domain/templates/board-card.html

@@ -14,6 +14,7 @@
   data-name="{{ board.full_name}}"
   data-arch="{{ board.archs | join(" ") }}"
   data-vendor="{{ board.vendor }}"
+  data-socs="{{ board.socs | join(" ") }}"
   tabindex="0">
   <div class="vendor">{{ catalog.vendors[board.vendor] }}</div>
   {% if board.image -%}

doc/_extensions/zephyr/domain/templates/board-catalog.html

@@ -45,14 +45,29 @@
     </div>
   </div>
 
+  <div class="form-group">
+    <label for="family">Family</label>
+    <select id="family" name="family" size="10" multiple></select>
+  </div>
+
+  <div class="form-group">
+    <label for="series">Series</label>
+    <select id="series" name="series" size="10" multiple></select>
+  </div>
+
+  <div class="form-group">
+    <label for="soc">SoC</label>
+    <select id="soc" name="soc" size="10" multiple></select>
+  </div>
+
 </form>
 
 <div id="form-options" style="text-align: center; margin-bottom: 20px">
   <button
     id="reset-filters"
     class="btn btn-info btn-disabled fa fa-times"
     tabindex="0"
-    onclick="document.querySelector('.filter-form').reset(); filterBoards(); updateURL();">
+    onclick="resetForm()">
     Reset Filters
   </button>
   <button
@@ -71,3 +86,7 @@
   {% include "board-card.html" %}
   {% endfor %}
 </div>
+
+<script>
+  socs_data = {{ catalog.socs | tojson }};
+</script>