add click on "flag icon" for additional filtering

assets/js/registrySearch.js

@@ -9,8 +9,8 @@ const miniSearchOptions = {
     'license',
     'language',
     'registryType',
-  ], // fields to index for full-text search
-  storeFields: ['title', '_key'], // fields to return with search results
+  ],
+  storeFields: ['title', '_key'],
   extractField: (document, fieldName) => {
     if (Array.isArray(document[fieldName])) {
       return document[fieldName].join(' ');
@@ -38,6 +38,7 @@ let pathName = window.location.pathname;
 let searchQuery = '';
 let selectedLanguage = 'all';
 let selectedComponent = 'all';
+let selectedTag = 'all';
 
 parseUrlParams();
 
@@ -66,6 +67,7 @@ if (pathName.includes('registry')) {
   }
 
   document.addEventListener('DOMContentLoaded', (event) => {
+
     let searchForm = document.getElementById('searchForm');
     searchForm.addEventListener('submit', function (evt) {
       evt.preventDefault();
@@ -106,7 +108,9 @@ if (pathName.includes('registry')) {
         updateFilters();
       }),
     );
+    applyFilterTag();
   });
+
 }
 
 function showBody() {
@@ -118,47 +122,74 @@ function showBody() {
   }
 }
 
+function applyFilterTag() {
+  document.querySelectorAll('[data-filter-value]').forEach((element) => {
+    element.addEventListener('click', (evt) => {
+      selectedTag = evt.target.getAttribute('data-filter-value');
+
+      executeSearch(selectedTag);
+      parseUrlParams();
+    });
+  });
+}
+
 // Runs search through Fuse for fuzzy search
 function executeSearch(searchQuery) {
-  if (searchQuery === '') {
+  if (searchQuery === '' && selectedTag === 'all') {
     showBody();
     return;
   }
 
   document.title = searchQuery + ' at ' + originalDocumentTitle;
-  document.querySelector('#input-s').value = searchQuery;
+// update the input field if the search query is coming from the user input
+  if (searchQuery !== selectedTag) {
+    document.querySelector('#input-s').value = searchQuery;
+  }
+
+
   document.querySelector('#default-body').style.display = 'none';
   document.querySelector('#search-results').innerHTML = '';
   document.getElementById('search-loading').style.display = 'block';
 
-  const run = function (searchQuery) {
+
+  const runSearch = function (searchQuery) {
     // The 0-timeout is here if search is blocking, such that the "search loading" is rendered properly
     setTimeout(() => {
-      let results = miniSearch.search(searchQuery);
+      // Perform search with filters based on language, component, and selected tag
+      let results = miniSearch.search(searchQuery, {
+        filter: (result) => {
+          const tagMatch = selectedTag === 'all' || (result.flags && result.flags.includes(selectedTag));
+          const languageMatch = selectedLanguage === 'all' || result.language === selectedLanguage;
+          const componentMatch = selectedComponent === 'all' || result.registryType === selectedComponent;
+
+          return tagMatch && languageMatch && componentMatch;
+        }
+      });
+
       document.getElementById('search-loading').style.display = 'none';
 
       if (results.length > 0) {
         populateResults(results);
       } else {
-        document.querySelector('#search-results').innerHTML +=
-          '<p>No matches found</p>';
+        document.querySelector('#search-results').innerHTML += '<p>No matches found</p>';
       }
     }, 0);
   };
 
   if (fetched) {
-    run(searchQuery);
+    runSearch(searchQuery);
   } else {
     fetch('/ecosystem/registry/index.json')
       .then((res) => res.json())
       .then((json) => {
         fetched = true;
         miniSearch.addAll(json);
-        run(searchQuery);
-      });
+        runSearch(searchQuery);
+      })
   }
 }
 
+
 function autoSuggest(value) {
   if (value === '') {
     return;
@@ -190,17 +221,29 @@ function autoSuggest(value) {
 
 // Populate the search results and render to the page
 function populateResults(results) {
-  document.querySelector('#search-results').innerHTML += results.reduce(
-    (acc, result) => {
-      return (
-        acc +
-        document.querySelector(`[data-registry-id="${result._key}"]`).outerHTML
-      );
-    },
-    '',
-  );
+  // Clear previous search results before populating new results
+  document.querySelector('#search-results').innerHTML = '';
+
+  // Filter results based on the selected filter tag before populating
+  const filteredResults = results.filter(result => {
+    return selectedTag === 'all' || (result.flags && result.flags.includes(selectedTag));
+  });
+
+  // Populate results
+  if (filteredResults.length > 0) {
+    document.querySelector('#search-results').innerHTML += filteredResults.reduce((acc, result) => {
+      // Find the corresponding registry entry by _key and append its outerHTML
+      const registryElement = document.querySelector(`[data-registry-id="${result._key}"]`);
+      return acc + (registryElement ? registryElement.outerHTML : '');
+    }, '');
+  } else {
+    document.querySelector('#search-results').innerHTML += '<p>No matches found for the selected filter tag.</p>';
+  }
+
+  applyFilterTag();
 }
 
+
 function setInput(key, value) {
   document.getElementById(`input-${key}`).value = value;
   var queryParams = new URLSearchParams(window.location.search);
@@ -211,21 +254,20 @@ function setInput(key, value) {
 // Filters items based on language and component filters
 function updateFilters() {
   let allItems = [...document.getElementsByClassName('registry-entry')];
-  if (selectedComponent === 'all' && selectedLanguage === 'all') {
+  if (selectedComponent === 'all' && selectedLanguage === 'all' && selectedTag === 'all') {
     allItems.forEach((element) => element.classList.remove('d-none'));
   } else {
     allItems.forEach((element) => {
       const dc = element.dataset.registrytype;
       const dl = element.dataset.registrylanguage;
-      if (
-        (dc === selectedComponent || selectedComponent === 'all') &&
-        (dl === selectedLanguage || selectedLanguage === 'all')
-      ) {
+      const flags = element.dataset.flags ? element.dataset.flags.split(' ') : [];
+
+      const matchesComponent = (dc === selectedComponent || selectedComponent === 'all');
+      const matchesLanguage = (dl === selectedLanguage || selectedLanguage === 'all');
+      const matchesTag = (selectedTag === 'all' || flags.includes(selectedTag));
+
+      if (matchesComponent && matchesLanguage && matchesTag) {
         element.classList.remove('d-none');
-      } else if (dc === selectedComponent && dl !== selectedLanguage) {
-        element.classList.add('d-none');
-      } else if (dl === selectedLanguage && dc !== selectedComponent) {
-        element.classList.add('d-none');
       } else {
         element.classList.add('d-none');
       }
@@ -235,7 +277,8 @@ function updateFilters() {
 
 function parseUrlParams() {
   let urlParams = new URLSearchParams(window.location.search);
-  searchQuery = urlParams.get('s');
+  searchQuery = urlParams.get('s') || '';
   selectedLanguage = urlParams.get('language') || 'all';
   selectedComponent = urlParams.get('component') || 'all';
+  selectedTag = urlParams.get('flag') || 'all';
 }

layouts/partials/ecosystem/registry/entry.html

@@ -1,9 +1,9 @@
 {{ $languageNames := .languageNames -}}
 
 {{ with .value -}}
-    {{ 
+    {{
         $remoteRegistries := dict
-            "npm" (dict 
+            "npm" (dict
                 "urlPattern" "https://npmjs.com/package/%s"
                 "installTemplate" "ecosystem/registry/quickinstall/default.md"
                 "installLine" "npm install %s"
@@ -86,37 +86,45 @@
     {{ end -}}
     {{ $primaryHref := printf "href=%q" $primaryUrl | safeHTMLAttr -}}
     <li class="card my-3 registry-entry {{ $highlightStyle }}" data-registry-id="{{ ._key }}" data-registrytype="{{ .registryType }}" data-registrylanguage="{{ .language }}">
-        <div class="card-body container">
-        <h4 class="card-title mb-0 d-flex flex-row">
-            <a {{ $primaryHref }} target="_blank" rel="noopener" class="me-auto">
-            {{- .title | markdownify -}}
-            </a>
-            <div class="ms-auto">
-            {{ if $isNew -}}
-            <span class="badge rounded-pill text-bg-info"><i class="fa-regular fa-star"></i> new</span>
-            {{ end -}}
-            {{ if $isNative -}}
-            <span class="badge rounded-pill text-bg-success text-white"><i class="fa-solid fa-puzzle-piece"></i> native</span>
-            {{ end -}}
-            {{ if $isFirstParty -}}
-            <span class="badge rounded-pill text-bg-success text-white"><i class="fa-solid fa-heart"></i> first party integration</span>
-            {{ end -}}
-            {{ if $usedInDemo -}}
-            <span class="badge rounded-pill text-bg-secondary text-white" title="This package is used in the OpenTelemetry Demo!"><i class="fa-solid fa-shapes"></i> OTel Demo</span>
-            {{ end -}}
-            {{ if $deprecated -}}
-            <span class="badge rounded-pill text-bg-danger text-white" title=""><i class="fa-solid fa-ban"></i> deprecated</span>
-            {{ end -}}
-            {{ if .cncfProjectLevel -}}
-            <span class="badge rounded-pill text-bg-primary text-white" title="CNCF {{ .cncfProjectLevel}} Project">
-                <img alt="CNCF" style="display: inline-block; width: 14px; height: 14px; border: none; margin:0px; padding: 0; vertical-align:middle" src="/img/cncf-icon-white.svg"> {{ .cncfProjectLevel }}
-            </span>
-            {{ end -}}
-            </div>
+      <div class="card-body container">
+      <h4 class="card-title mb-0 d-flex flex-row">
+          <a {{ $primaryHref }} target="_blank" rel="noopener" class="me-auto">
+          {{- .title | markdownify -}}
+          </a>
+          <div class="ms-auto">
+          {{ if $isNew -}}
+          <span class="badge rounded-pill text-bg-info"><i class="fa-regular fa-star"></i> new</span>
+          {{ end -}}
+
+          {{ if $isNative -}}
+          <button name="flag" type="button" data-filter-value = "native" class="badge rounded-pill text-bg-success text-white" title="Click to filter by native tag">
+            <i class="fa-solid fa-puzzle-piece">
+          </i> native</button>
+          {{ end -}}
+
+          {{ if $isFirstParty -}}
+          <button name="flag" type="button" data-filter-value = "first party integration" class="badge rounded-pill text-bg-success text-white" title="Click to filter by first party tag">
+            <i class="fa-solid fa-heart"></i> first party integration</button>
+          {{ end -}}
+
+          {{ if $usedInDemo -}}
+          <span class="badge rounded-pill text-bg-secondary text-white" title="This package is used in the OpenTelemetry Demo!"><i class="fa-solid fa-shapes"></i> OTel Demo</span>
+          {{ end -}}
+
+          {{ if $deprecated -}}
+          <button name="flag" type="button" data-filter-value = "deprecated" class="badge rounded-pill text-bg-danger text-white" title="Click to filter by deprecated tag">
+            <i class="fa-solid fa-ban"></i> deprecated</button>
+          {{ end -}}
+
+          {{ if .cncfProjectLevel -}}
+          <button name="flag" type="button" data-filter-value = "{{ .cncfProjectLevel }}" class="badge rounded-pill text-bg-primary text-white" title="Click to filter by CNCF {{ .cncfProjectLevel}} Project">
+            <img alt="CNCF" style="display: inline-block; width: 14px; height: 14px; border: none; margin:0px; padding: 0; vertical-align:middle" src="/img/cncf-icon-white.svg"> {{ .cncfProjectLevel }}</button>
+          {{ end -}}
+          </div>
         </h4>
         <p class="card-text">
             <small class="text-body-secondary">
-            by 
+            by
             {{ range $index, $author := .authors -}}
                 {{ if $index }}, {{ end }}
                 {{ if eq $author.name "OpenTelemetry Authors" -}}
@@ -158,7 +166,7 @@ <h6><i class="fa-solid fa-forward"></i> Quick Install</h6>
                     {{ .package.version }}
                 </div>
                 <small>Version</small>
-                </div>      
+                </div>
             </li>
             {{- end -}}
             {{ with .language -}}
@@ -168,7 +176,7 @@ <h6><i class="fa-solid fa-forward"></i> Quick Install</h6>
                     {{ $languageNames.Get . | default (humanize .) }}
                 </div>
                 <small>Language</small>
-                </div>      
+                </div>
             </li>
             {{- end }}
             {{ with .registryType -}}
@@ -178,7 +186,7 @@ <h6><i class="fa-solid fa-forward"></i> Quick Install</h6>
                     {{ . | humanize }}
                 </div>
                 <small>Component</small>
-                </div>      
+                </div>
             </li>
             {{- end -}}
             {{ with .license -}}
@@ -188,7 +196,7 @@ <h6><i class="fa-solid fa-forward"></i> Quick Install</h6>
                     {{ . }}
                 </div>
                 <small>License</small>
-                </div>      
+                </div>
             </li>
             {{- end -}}
             </div>