Implement clickable flag buttons to filter records without updating search term

assets/js/registrySearch.js

@@ -40,6 +40,7 @@ let selectedLanguage = 'all';
 let selectedComponent = 'all';
 let selectedFlag = 'all'; // Added selectedFlag
 
+
 parseUrlParams();
 
 if (pathName.includes('registry')) {
@@ -132,6 +133,8 @@ if (pathName.includes('registry')) {
         updateFilters();
       }),
     );
+    applyFlagFilter();
+
   });
 }
 
@@ -144,23 +147,51 @@ function showBody() {
   }
 }
 
+function applyFlagFilter(){
+  document.querySelectorAll('[data-filter-value]').forEach((element) => {
+   element.addEventListener('click', (evt) => {
+     selectedFlag = evt.target.getAttribute('data-filter-value');
+
+     executeSearch(selectedFlag);
+     parseUrlParams();
+   });
+ });
+}
+
 // Runs search through Fuse for fuzzy search
 function executeSearch(searchQuery) {
-  if (searchQuery === '') {
+  if (searchQuery === '' && selectedFlag === 'all') {
     showBody();
     return;
   }
 
   document.title = searchQuery + ' at ' + originalDocumentTitle;
-  document.querySelector('#input-s').value = searchQuery;
+
+//input field not updated when flag is clicked
+  if (searchQuery !== selectedFlag){
+    document.querySelector('#input-s').value = searchQuery;
+  } else {
+  document.querySelector('#input-s').value = ''; // Clear input field when selected flag is clicked
+ }
+
   document.querySelector('#default-body').style.display = 'none';
   document.querySelector('#search-results').innerHTML = '';
   document.getElementById('search-loading').style.display = 'block';
 
   const run = 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);
+
+      let results = miniSearch.search(searchQuery,{
+        filter:(result) =>{
+          const matchFlag = selectedFlag ==='all' || (result.flags && result.flags.includes(selectedFlag));
+          const matchLanguage = selectedLanguage === 'all' || result.language === selectedLanguage;
+          const matchComponent = selectedComponent === 'all' || result.registryType === selectedComponent;
+
+          return matchFlag && matchLanguage && matchComponent;
+        }
+      });
+
       document.getElementById('search-loading').style.display = 'none';
 
       if (results.length > 0) {
@@ -216,6 +247,11 @@ function autoSuggest(value) {
 
 // Populate the search results and render to the page
 function populateResults(results) {
+
+  const filteredResults = results.filter(result =>{
+    return selectedFlag === 'all' || (result.flags && result.flags.includes(selectedFlag));
+  });
+
   document.querySelector('#search-results').innerHTML += results.reduce(
     (acc, result) => {
       return (
@@ -225,6 +261,7 @@ function populateResults(results) {
     },
     '',
   );
+  applyFlagFilter();
 }
 
 function setInput(key, value) {

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"
@@ -116,27 +116,29 @@ <h4 class="card-title mb-0 d-flex flex-row">
             <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>
+            <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 -}}
-            <span class="badge rounded-pill text-bg-success text-white"><i class="fa-solid fa-heart"></i> first party integration</span>
+            <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 -}}
-            <span class="badge rounded-pill text-bg-danger text-white" title=""><i class="fa-solid fa-ban"></i> deprecated</span>
+            <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 -}}
-            <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>
+            <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" -}}
@@ -191,7 +193,7 @@ <h6><i class="fa-solid fa-forward"></i> Quick Install</h6>
                     {{ .package.version }}
                 </div>
                 <small>Version</small>
-                </div>      
+                </div>
             </li>
             {{- end -}}
             {{ with .language -}}
@@ -201,7 +203,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 -}}
@@ -211,7 +213,7 @@ <h6><i class="fa-solid fa-forward"></i> Quick Install</h6>
                     {{ . | humanize }}
                 </div>
                 <small>Component</small>
-                </div>      
+                </div>
             </li>
             {{- end -}}
             {{ with .license -}}
@@ -221,7 +223,7 @@ <h6><i class="fa-solid fa-forward"></i> Quick Install</h6>
                     {{ . }}
                 </div>
                 <small>License</small>
-                </div>      
+                </div>
             </li>
             {{- end -}}
             </div>