Resource Tree Bytes and Strings Search Bar

frontend/src/ResourceSearchBar.svelte

@@ -0,0 +1,137 @@
+<style>
+  select {
+    background-color: var(--main-bg-color);
+    color: inherit;
+    border: 1px solid;
+    border-color: inherit;
+    border-radius: 0;
+    font-size: inherit;
+    font-family: var(--font);
+    box-shadow: none;
+  }
+
+  input {
+    background: inherit;
+    color: inherit;
+    border: 1px solid;
+    border-bottom: 1px solid var(--main-fg-color);
+    flex: 1;
+    text-indent: 0.5em;
+  }
+
+  form {
+    display: inherit;
+    flex: 1;
+  }
+
+  label {
+    display: inherit;
+    flex: 1;
+  }
+
+  .searchbar {
+    display: flex;
+    align-items: left;
+    width: 100%;
+    flex-grow: 1;
+    height: 2em;
+  }
+
+  .optionbar {
+    padding-bottom: 0;
+    padding-top: 0;
+  }
+</style>
+
+<script>
+  import Checkbox from "./Checkbox.svelte";
+  export let rootResource, searchFilter;
+  let searchType,
+    searchQuery,
+    bytesInput,
+    regex,
+    placeholderString,
+    caseIgnore,
+    errorMessage;
+  let searchTypes = ["String", "Bytes"];
+
+  $: if (searchQuery && searchType === "Bytes") {
+    try {
+      searchQuery = searchQuery.match(/[0-9a-fA-F]{1,2}/g).join(" ");
+      bytesInput?.setCustomValidity("");
+    } catch {
+      searchQuery = "";
+      bytesInput?.setCustomValidity("Invalid bytes representation.");
+    }
+  }
+
+  $: if (searchType == "String") {
+    if (regex) {
+      placeholderString = "Search for a Regex Pattern";
+    } else {
+      placeholderString = "Search for a String";
+    }
+  } else if (searchType == "Bytes") {
+    regex = false; // Regex for bytes not yet implemented
+    placeholderString = "Search for Bytes";
+  }
+</script>
+
+<div class="searchbar">
+  <select bind:value="{searchType}">
+    {#each searchTypes as type}
+      <option value="{type}">
+        {type}
+      </option>
+    {/each}
+  </select>
+  <form
+    on:submit|preventDefault="{async (e) => {
+      try {
+        if (searchType == 'String') {
+          if (searchQuery === '') {
+            searchFilter = null;
+          } else {
+            searchFilter = await rootResource.search_for_string(
+              searchQuery,
+              regex,
+              caseIgnore
+            );
+          }
+        } else if (searchType == 'Bytes') {
+          if (searchQuery === '') {
+            searchFilter = null;
+          } else {
+            searchFilter = await rootResource.search_for_bytes(
+              searchQuery,
+              false
+            );
+          }
+        }
+      } catch (err) {
+        try {
+          errorMessage = JSON.parse(err.message).message;
+        } catch (_) {
+          errorMessage = err.message;
+        }
+        console.log('Search Failed!');
+        console.log(errorMessage);
+      }
+    }}"
+  >
+    <label>
+      <input placeholder="{placeholderString}" bind:value="{searchQuery}" />
+    </label>
+  </form>
+</div>
+
+<div class="optionbar">
+  {#if searchType == "String"}
+    <Checkbox checked="{false}" bind:value="{regex}" leftbox="{true}">
+      Pattern
+    </Checkbox>
+    <Checkbox checked="{false}" bind:value="{caseIgnore}" leftbox="{true}">
+      Ignore Case
+    </Checkbox>
+  {/if}
+</div>

frontend/src/ResourceTreeNode.svelte

@@ -120,7 +120,8 @@
     selectNextSibling = () => {},
     selectPreviousSibling = () => {},
     collapsed = true,
-    childrenCollapsed = true;
+    childrenCollapsed = true,
+    searchFilter;
   let firstChild,
     childrenPromise,
     commentsPromise,
@@ -156,7 +157,6 @@
     lastModified = resourceNodeDataMap[self_id].lastModified;
     allModified = resourceNodeDataMap[self_id].allModified;
   }
-
   function updateRootModel() {
     rootResource.update();
     rootResource = rootResource;
@@ -230,84 +230,89 @@
   });
 </script>
 
-{#await childrenPromise then children}
-  {#if children?.length > 0}
-    <button
-      on:click="{() => {
-        resourceNodeDataMap[self_id].collapsed = !collapsed;
-      }}"
-    >
-      {#if collapsed}
-        [+{children.length}]
-      {:else}
-        [-]
-      {/if}
-      <!-- Ugly next line is required to prevent Svelte from adding space after the button -->
-    </button>{/if}{/await}<button
-  on:click="{onClick}"
-  on:dblclick="{onDoubleClick}"
-  class:selected="{$selected === self_id}"
-  class:lastModified="{resourceNodeDataMap[self_id].lastModified}"
-  class:allModified="{resourceNodeDataMap[self_id].allModified}"
-  id="{self_id}"
->
-  {rootResource.get_caption()}
-</button>
-{#await commentsPromise then comments}
-  {#each comments as comment}
-    <div class="comment">
-      <Hoverable let:hovering>
-        <button
-          title="Delete this comment"
-          on:click="{onDeleteClick(comment[0])}"
-        >
-          <Icon
-            class="comment_icon"
-            url="{hovering ? '/icons/trash_can.svg' : '/icons/comment.svg'}"
-          />
-        </button></Hoverable
-      >{comment[1]}
-    </div>
-  {/each}
-{/await}
-
-{#await childrenPromise}
-  <LoadingText />
-{:then children}
-  {#if !collapsed && children.length > 0}
-    <ul>
-      {#each children.slice(0, kiddoChunksize) as child, i}
-        <li>
-          <div>
-            <svelte:self
-              rootResource="{child}"
-              collapsed="{childrenCollapsed}"
-              childrenCollapsed="{childrenCollapsed}"
-              selectNextSibling="{i ===
-              Math.min(kiddoChunksize, children.length) - 1
-                ? selectNextSibling
-                : () => {
-                    $selected = children[i + 1]?.resource_id;
-                  }}"
-              selectPreviousSibling="{i === 0
-                ? () => {
-                    $selected = self_id;
-                  }
-                : () => {
-                    $selected = children[i - 1]?.resource_id;
-                  }}"
-              bind:resourceNodeDataMap="{resourceNodeDataMap}"
+{#if searchFilter == null || searchFilter.includes(self_id)}
+  {#await childrenPromise then children}
+    {#if children?.length > 0}
+      <button
+        on:click="{() => {
+          resourceNodeDataMap[self_id].collapsed = !collapsed;
+        }}"
+      >
+        {#if collapsed}
+          [+{children.length}]
+        {:else}
+          [-]
+        {/if}
+        <!-- Ugly next line is required to prevent Svelte from adding space after the button -->
+      </button>{/if}{/await}<button
+    on:click="{onClick}"
+    on:dblclick="{onDoubleClick}"
+    class:selected="{$selected === self_id}"
+    class:lastModified="{resourceNodeDataMap[self_id].lastModified}"
+    class:allModified="{resourceNodeDataMap[self_id].allModified}"
+    id="{self_id}"
+  >
+    {rootResource.get_caption()}
+  </button>
+  {#await commentsPromise then comments}
+    {#each comments as comment}
+      <div class="comment">
+        <Hoverable let:hovering>
+          <button
+            title="Delete this comment"
+            on:click="{onDeleteClick(comment[0])}"
+          >
+            <Icon
+              class="comment_icon"
+              url="{hovering ? '/icons/trash_can.svg' : '/icons/comment.svg'}"
             />
+          </button></Hoverable
+        >{comment[1]}
+      </div>
+    {/each}
+  {/await}
+
+  {#await childrenPromise}
+    <LoadingText />
+  {:then children}
+    {#if !collapsed && children.length > 0}
+      <ul>
+        {#each children.slice(0, kiddoChunksize) as child, i}
+          {#if searchFilter == null || searchFilter.includes(child.get_id())}
+            <li>
+              <div>
+                <svelte:self
+                  rootResource="{child}"
+                  collapsed="{childrenCollapsed}"
+                  childrenCollapsed="{childrenCollapsed}"
+                  selectNextSibling="{i ===
+                  Math.min(kiddoChunksize, children.length) - 1
+                    ? selectNextSibling
+                    : () => {
+                        $selected = children[i + 1]?.resource_id;
+                      }}"
+                  selectPreviousSibling="{i === 0
+                    ? () => {
+                        $selected = self_id;
+                      }
+                    : () => {
+                        $selected = children[i - 1]?.resource_id;
+                      }}"
+                  bind:resourceNodeDataMap="{resourceNodeDataMap}"
+                  searchFilter="{searchFilter}"
+                />
+              </div>
+            </li>
+          {/if}
+        {/each}
+        {#if children.length > kiddoChunksize}
+          <div class="morebutton">
+            <button on:click="{() => (kiddoChunksize += 512)}">
+              Show 512 more children...
+            </button>
           </div>
-        </li>
-      {/each}
-      {#if children.length > kiddoChunksize}
-        <div class="morebutton">
-          <button on:click="{() => (kiddoChunksize += 512)}">
-            Show 512 more children...
-          </button>
-        </div>
-      {/if}
-    </ul>
-  {/if}
-{/await}
+        {/if}
+      </ul>
+    {/if}
+  {/await}
+{/if}

frontend/src/ResourceTreeView.svelte

@@ -26,23 +26,36 @@
     overflow: auto;
   }
 
+  .resources {
+    flex-grow: 1;
+  }
+
   .treebox {
     flex-grow: 1;
     padding-left: 1em;
     overflow-x: auto;
     white-space: nowrap;
     text-align: left;
   }
+
+  .searchbar {
+    flex-grow: 1;
+    padding-left: 1em;
+    padding-bottom: 0.5em;
+  }
 </style>
 
 <script>
+  import ResourceSearchBar from "./ResourceSearchBar.svelte";
   import ResourceTreeNode from "./ResourceTreeNode.svelte";
   import ResourceTreeToolbar from "./ResourceTreeToolbar.svelte";
 
   export let rootResource,
     modifierView,
     bottomLeftPane,
     resourceNodeDataMap = {};
+
+  let searchFilter;
 </script>
 
 <div class="hbox">
@@ -53,11 +66,19 @@
       bind:bottomLeftPane="{bottomLeftPane}"
     />
   </div>
-
-  <div class="treebox">
-    <ResourceTreeNode
-      rootResource="{rootResource}"
-      bind:resourceNodeDataMap="{resourceNodeDataMap}"
-    />
+  <div class="resources">
+    <div class="searchbar">
+      <ResourceSearchBar
+        rootResource="{rootResource}"
+        bind:searchFilter="{searchFilter}"
+      />
+    </div>
+    <div class="treebox">
+      <ResourceTreeNode
+        rootResource="{rootResource}"
+        bind:searchFilter="{searchFilter}"
+        bind:resourceNodeDataMap="{resourceNodeDataMap}"
+      />
+    </div>
   </div>
 </div>