merge: #3960

3960: Delighter: ability to search the debug view r=jobelenus a=jobelenus Due to how ... involved the layout of debug is, I went old school. Search the HTML and add a yellow highlight to what we find. Scroll to the first find. ![image](https://github.com/systeminit/si/assets/69541/09c116a7-4d9f-4da0-b810-02ed116c4c3b) <img src="https://media0.giphy.com/media/kESxgfWk7WPJumj4lS/giphy.gif"/> Co-authored-by: John Obelenus <[email protected]>
systeminit · Jun 7, 2024 · 9136cbe · 9136cbe
2 parents a2fd1fc + 3d8d83f
commit 9136cbe
Showing 1 changed file with 58 additions and 9 deletions.
diff --git a/app/web/src/components/Debug/ComponentDebugDetails.vue b/app/web/src/components/Debug/ComponentDebugDetails.vue
@@ -9,10 +9,16 @@
       <ErrorMessage :requestStatus="fetchDebugReqStatus" />
     </template>
     <template v-else-if="fetchDebugReqStatus.isSuccess && debugData">
-      <div class="border border-neutral-500 m-xs">
+      <SiSearch
+        ref="searchRef"
+        autoSearch
+        disableFilters
+        @search="onSearchUpdated"
+      />
+      <div ref="debugParent" class="border border-neutral-500 m-xs">
         <!-- Component -->
         <TreeNode
-          :defaultOpen="false"
+          defaultOpen
           alwaysShowArrow
           enableGroupToggle
           label="Component"
@@ -35,7 +41,7 @@
 
         <!-- Attributes -->
         <TreeNode
-          :defaultOpen="false"
+          defaultOpen
           alwaysShowArrow
           enableGroupToggle
           label="Attributes"
@@ -47,7 +53,7 @@
           <TreeNode
             v-for="attribute in debugData.attributes"
             :key="attribute.path"
-            :defaultOpen="false"
+            defaultOpen
             :label="attribute.path"
             alwaysShowArrow
             enableGroupToggle
@@ -62,7 +68,7 @@
 
         <!-- Input Sockets -->
         <TreeNode
-          :defaultOpen="false"
+          defaultOpen
           alwaysShowArrow
           enableGroupToggle
           label="Input Sockets"
@@ -74,7 +80,7 @@
           <TreeNode
             v-for="attribute in debugData.inputSockets"
             :key="attribute.name"
-            :defaultOpen="false"
+            defaultOpen
             :label="attribute.name"
             alwaysShowArrow
             enableGroupToggle
@@ -89,7 +95,7 @@
 
         <!-- Output Sockets -->
         <TreeNode
-          :defaultOpen="false"
+          defaultOpen
           alwaysShowArrow
           enableGroupToggle
           label="Output Sockets"
@@ -101,7 +107,7 @@
           <TreeNode
             v-for="attribute in debugData.outputSockets"
             :key="attribute.name"
-            :defaultOpen="false"
+            defaultOpen
             :label="attribute.name"
             alwaysShowArrow
             enableGroupToggle
@@ -124,13 +130,50 @@ import {
   LoadingMessage,
   TreeNode,
 } from "@si/vue-lib/design-system";
-import { PropType, computed, onMounted } from "vue";
+import { PropType, computed, onMounted, ref } from "vue";
 import { useComponentsStore } from "@/store/components.store";
 import { ComponentId } from "@/api/sdf/dal/component";
+import SiSearch from "@/components/SiSearch.vue";
 import AttributeDebugView from "./AttributeDebugView.vue";
 import SocketDebugView from "./SocketDebugView.vue";
 import DebugViewItem from "./DebugViewItem.vue";
 
+const searchRef = ref<InstanceType<typeof SiSearch>>();
+const debugParent = ref<InstanceType<typeof Element>>();
+
+const searchString = ref("");
+
+function _findChildren(elm: Element) {
+  if (elm.tagName === "DD" || elm.tagName === "DT")
+    if (
+      elm.textContent?.toLowerCase().includes(searchString.value.toLowerCase())
+    ) {
+      elm.classList.add("search-found");
+    } else {
+      elm.classList.remove("search-found");
+    }
+
+  for (const child of elm.children) _findChildren(child);
+}
+
+function onSearchUpdated(newFilterString: string) {
+  searchString.value = newFilterString.trim();
+  if (!searchString.value) {
+    for (const elm of document.getElementsByClassName("search-found")) {
+      elm.classList.remove("search-found");
+    }
+  } else {
+    if (debugParent.value) {
+      for (const child of debugParent.value.children) {
+        _findChildren(child);
+      }
+      const found = document.getElementsByClassName("search-found");
+      if (found.length > 0)
+        found[0]?.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+  }
+}
+
 const componentsStore = useComponentsStore();
 
 const debugData = computed(
@@ -150,3 +193,9 @@ onMounted(() => {
   componentsStore.FETCH_COMPONENT_DEBUG_VIEW(props.componentId);
 });
 </script>
+
+<style type="less">
+.search-found {
+  background-color: rgba(255, 255, 0, 0.5);
+}
+</style>