doc: _extensions: allow to filter boards by compatible strings in catalog

This adds the ability to filter boards in the catalog by compatible
strings. It supports wildcards so e.g. one can quickly find all boards
with an "st,lsm*" accelerometer.

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

Author: kartben

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

@@ -106,6 +106,10 @@
   margin-right: 8px;
 }
 
+#compatibles-tags .tag {
+  font-family: var(--monospace-font-family);
+}
+
 .tag:hover {
   background-color: #0056b3;
 }

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

@@ -56,6 +56,19 @@ function populateFormFromURL() {
       filterBoards();
     }, 0);
   }
+
+  // Restore compatibles from URL
+  if (hashParams.has("compatibles")) {
+    const compatibles = hashParams.get("compatibles").split("|");
+    setTimeout(() => {
+      compatibles.forEach(compatible => {
+        const tagContainer = document.getElementById('compatibles-tags');
+        const tagInput = document.getElementById('compatibles-input');
+
+        const tagElement = document.createElement('span');
+        tagElement.classList.add('tag');
+        tagElement.textContent = compatible;
+        tagElement.onclick = () => {
           tagElement.remove();
           filterBoards();
         };
@@ -92,6 +105,10 @@ function updateURL() {
   const selectedHWTags = [...document.querySelectorAll('#hwcaps-tags .tag')].map(tag => tag.textContent);
   selectedHWTags.length ? hashParams.set("features", selectedHWTags.join(",")) : hashParams.delete("features");
 
+  // Add compatibles to URL
+  const selectedCompatibles = [...document.querySelectorAll('#compatibles-tags .tag')].map(tag => tag.textContent);
+  selectedCompatibles.length ? hashParams.set("compatibles", selectedCompatibles.join("|")) : hashParams.delete("compatibles");
+
   window.history.replaceState({}, "", `#${hashParams.toString()}`);
 }
 
@@ -204,6 +221,80 @@ function setupHWCapabilitiesField() {
   updateDatalist();
 }
 
+function setupCompatiblesField() {
+  let selectedCompatibles = [];
+
+  const tagContainer = document.getElementById('compatibles-tags');
+  const tagInput = document.getElementById('compatibles-input');
+  const datalist = document.getElementById('compatibles-list');
+
+  // Collect all unique compatibles from boards
+  const allCompatibles = Array.from(document.querySelectorAll('.board-card')).reduce((acc, board) => {
+    (board.getAttribute('data-compatibles') || '').split(' ').forEach(compat => {
+      if (compat && !acc.includes(compat)) {
+        acc.push(compat);
+      }
+    });
+    return acc;
+  }, []);
+
+  allCompatibles.sort();
+
+  function addCompatible(compatible) {
+    if (selectedCompatibles.includes(compatible) || compatible === "") return;
+    selectedCompatibles.push(compatible);
+
+    const tagElement = document.createElement('span');
+    tagElement.classList.add('tag');
+    tagElement.textContent = compatible;
+    tagElement.onclick = () => removeCompatible(compatible);
+    tagContainer.insertBefore(tagElement, tagInput);
+
+    tagInput.value = '';
+    updateDatalist();
+  }
+
+  function removeCompatible(compatible) {
+    selectedCompatibles = selectedCompatibles.filter(c => c !== compatible);
+    document.querySelectorAll('.tag').forEach(el => {
+      if (el.textContent === compatible && el.parentElement === tagContainer) {
+        el.remove();
+      }
+    });
+    updateDatalist();
+  }
+
+  function updateDatalist() {
+    datalist.innerHTML = '';
+    const filteredCompatibles = allCompatibles.filter(c => !selectedCompatibles.includes(c));
+
+    filteredCompatibles.forEach(compatible => {
+      const option = document.createElement('option');
+      option.value = compatible;
+      datalist.appendChild(option);
+    });
+
+    filterBoards();
+  }
+
+  tagInput.addEventListener('input', () => {
+    if (allCompatibles.includes(tagInput.value)) {
+      addCompatible(tagInput.value);
+    }
+  });
+
+  tagInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && tagInput.value) {
+      addCompatible(tagInput.value);
+      e.preventDefault();
+    } else if (e.key === 'Backspace' && tagInput.value === '' && selectedCompatibles.length > 0) {
+      removeCompatible(selectedCompatibles[selectedCompatibles.length - 1]);
+    }
+  });
+
+  updateDatalist();
+}
+
 document.addEventListener("DOMContentLoaded", function () {
   const form = document.querySelector(".filter-form");
 
@@ -224,6 +315,7 @@ document.addEventListener("DOMContentLoaded", function () {
   populateFormFromURL();
 
   setupHWCapabilitiesField();
+  setupCompatiblesField();
 
   socFamilySelect = document.getElementById("family");
   socFamilySelect.addEventListener("change", () => {
@@ -281,6 +373,10 @@ function resetForm() {
   document.querySelectorAll('#hwcaps-tags .tag').forEach(tag => tag.remove());
   document.getElementById('hwcaps-input').value = '';
 
+  // Clear compatibles
+  document.querySelectorAll('#compatibles-tags .tag').forEach(tag => tag.remove());
+  document.getElementById('compatibles-input').value = '';
+
   filterBoards();
 }
 
@@ -295,6 +391,16 @@ function updateBoardCount() {
     + ` ${visibleShields.length} of ${shields.length} shields`;
 }
 
+function wildcardMatch(pattern, str) {
+  // Convert wildcard pattern to regex
+  // Escape special regex characters except *
+  const regexPattern = pattern
+    .replace(/[.+?^${}()|[\]\\]/g, '\\$&')
+    .replace(/\*/g, '.*');
+  const regex = new RegExp(`^${regexPattern}$`, "i");
+  return regex.test(str);
+}
+
 function filterBoards() {
   const nameInput = document.getElementById("name").value.toLowerCase();
   const archSelect = document.getElementById("arch").value;
@@ -306,8 +412,11 @@ function filterBoards() {
   // Get selected hardware capability tags
   const selectedHWTags = [...document.querySelectorAll('#hwcaps-tags .tag')].map(tag => tag.textContent);
 
+  // Get selected compatible tags
+  const selectedCompatibles = [...document.querySelectorAll('#compatibles-tags .tag')].map(tag => tag.textContent);
+
   const resetFiltersBtn = document.getElementById("reset-filters");
-  if (nameInput || archSelect || vendorSelect || socSocSelect.selectedOptions.length || selectedHWTags.length || !showBoards || !showShields) {
+  if (nameInput || archSelect || vendorSelect || socSocSelect.selectedOptions.length || selectedHWTags.length || selectedCompatibles.length || !showBoards || !showShields) {
     resetFiltersBtn.classList.remove("btn-disabled");
   } else {
     resetFiltersBtn.classList.add("btn-disabled");
@@ -321,6 +430,7 @@ function filterBoards() {
     const boardVendor = board.getAttribute("data-vendor") || "";
     const boardSocs = (board.getAttribute("data-socs") || "").split(" ").filter(Boolean);
     const boardSupportedFeatures = (board.getAttribute("data-supported-features") || "").split(" ").filter(Boolean);
+    const boardCompatibles = (board.getAttribute("data-compatibles") || "").split(" ").filter(Boolean);
     const isShield = board.classList.contains("shield");
 
     let matches = true;
@@ -330,12 +440,19 @@ function filterBoards() {
     if ((isShield && !showShields) || (!isShield && !showBoards)) {
       matches = false;
     } else {
+      // Check if board matches all selected compatibles (with wildcard support)
+      const compatiblesMatch = selectedCompatibles.length === 0 ||
+        selectedCompatibles.every((pattern) =>
+          boardCompatibles.some((compatible) => wildcardMatch(pattern, compatible))
+        );
+
       matches =
         !(nameInput && !boardName.includes(nameInput)) &&
         !(archSelect && !boardArchs.includes(archSelect)) &&
         !(vendorSelect && boardVendor !== vendorSelect) &&
         (selectedSocs.length === 0 || selectedSocs.some((soc) => boardSocs.includes(soc))) &&
-        (selectedHWTags.length === 0 || selectedHWTags.every((tag) => boardSupportedFeatures.includes(tag)));
+        (selectedHWTags.length === 0 || selectedHWTags.every((tag) => boardSupportedFeatures.includes(tag))) &&
+        compatiblesMatch;
     }
 
     board.classList.toggle("hidden", !matches);

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

@@ -25,7 +25,19 @@
       {%- endfor -%}
     {%- endfor -%}
     {{- feature_types|join(' ') -}}
-  " tabindex="0">
+  "
+  data-compatibles="
+    {%- set all_compatibles = [] -%}
+    {%- for target_compatibles in board.compatibles.values() -%}
+      {%- for compatible in target_compatibles -%}
+        {%- if compatible not in all_compatibles -%}
+          {%- set _ = all_compatibles.append(compatible) -%}
+        {%- endif -%}
+      {%- endfor -%}
+    {%- endfor -%}
+    {{- all_compatibles|join(' ') -}}
+  "
+  tabindex="0">
   <div class="vendor">{{ vendors[board.vendor] }}</div>
   {% if board.image -%}
   <img alt="A picture of the {{ board.full_name }} board"

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

@@ -89,6 +89,20 @@
     </div>
   </div>
 
+  <div class="form-group" style="flex-basis: 100%">
+    <label for="compatibles-input">Supported devices (compatible strings, supports wildcards)</label>
+    <div class="tag-container" id="compatibles-tags">
+      <input list="compatibles-list" class="tag-input" id="compatibles-input"
+        placeholder="{% if hw_features_present -%}
+          Type a compatible, e.g. &quot;ti,hdc2080&quot; or wildcard like &quot;bosch,bmp*&quot;
+        {%- else -%}
+          List of supported devices is not available
+        {%- endif %}"
+        {% if not hw_features_present %}disabled{% endif %}>
+      <datalist id="compatibles-list"></datalist>
+    </div>
+  </div>
+
 </form>
 
 <div id="form-options" style="text-align: center; margin-bottom: 20px">