search

Author: HoangTran0410

scripts/ufs_statistic.css

@@ -104,7 +104,7 @@ li:hover .show-on-hover {
   max-height: 90vh;
   overflow-y: auto;
   overflow-x: hidden;
-  min-width: 50vw;
+  min-width: 500px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -119,6 +119,7 @@ li:hover .show-on-hover {
 
 .modal-body {
   margin-bottom: 10px;
+  width: 100%;
 }
 
 .modal .close {
@@ -140,3 +141,17 @@ li:hover .show-on-hover {
   color: white;
   text-decoration: none;
 }
+
+.modal li {
+  width: 100%;
+  clear: right;
+}
+
+[data-search] {
+  cursor: pointer;
+  float: right;
+}
+
+[data-search]:hover {
+  text-decoration: underline;
+}

scripts/ufs_statistic.js

@@ -445,6 +445,7 @@ async function onDocumentEnd() {
                 <span data-profile-name="${uid}">${uid}</span>
                 (${count})
               </a>
+              <span data-search="${uid}">${uid}🔎</span>
             </li>`;
             })
             .join("")}
@@ -463,7 +464,10 @@ async function onDocumentEnd() {
         <ol class="list-group">
           ${Array.from(eventNameCountSorted.entries())
             .map(([eventName, count], index) => {
-              return `<li> ${index + 1}. ${eventName} (${count})</li>`;
+              return `<li>
+                ${index + 1}. ${eventName} (${count})
+                <span data-search="${eventName}">🔎</span>
+              </li>`;
             })
             .join("")}
         </ol>
@@ -486,6 +490,11 @@ async function onDocumentEnd() {
       if (event.target.classList.contains("modal")) {
         event.target.style.display = "none";
       }
+      const dataSearch = event.target.getAttribute("data-search");
+      if (dataSearch) {
+        searchBox.value = dataSearch;
+        searchBox.dispatchEvent(new Event("input", { bubbles: true }));
+      }
     });
 
     document.body.append(modalByUid, modalByScript);