diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index d64a5e33e..3cdb45b33 100644
--- a/frontend/src/App.svelte
+++ b/frontend/src/App.svelte
@@ -43,7 +43,12 @@
   import ProjectManagerView from "./project/ProjectManagerView.svelte";
 
   import { printConsoleArt } from "./console-art.js";
-  import { selected, selectedResource, settings } from "./stores.js";
+  import {
+    selected,
+    selectedResource,
+    settings,
+    dataLength,
+  } from "./stores.js";
   import { keyEventToString, shortcuts } from "./keyboard.js";
 
   import { writable } from "svelte/store";
@@ -57,13 +62,8 @@
     useAssemblyView = false,
     useTextView = false,
     rootResourceLoadPromise = new Promise((resolve) => {}),
-    resourceNodeDataMap = {},
     resources = {};
-  let carouselSelection,
-    currentResource,
-    rootResource,
-    modifierView,
-    bottomLeftPane;
+  let currentResource, rootResource, modifierView, bottomLeftPane;
 
   // TODO: Move to settings
   let riddleAnswered = JSON.parse(window.localStorage.getItem("riddleSolved"));
@@ -71,6 +71,10 @@
     riddleAnswered = false;
   }
 
+  $: dataLenPromise.then((r) => {
+    $dataLength = r;
+  });
+
   $: if ($selected !== undefined) {
     currentResource = resources[$selected];
     if (currentResource === undefined) {
@@ -177,13 +181,11 @@ Answer by running riddle.answer('your answer here') from the console.`);
               this="{modifierView}"
               dataLenPromise="{dataLenPromise}"
               bind:modifierView="{modifierView}"
-              bind:resourceNodeDataMap="{resourceNodeDataMap}"
             />
           {:else}
             <ResourceTreeView
               rootResource="{rootResource}"
               bind:bottomLeftPane="{bottomLeftPane}"
-              bind:resourceNodeDataMap="{resourceNodeDataMap}"
               bind:modifierView="{modifierView}"
               bind:showProjectManager="{showProjectManager}"
               bind:showRootResource="{showRootResource}"
@@ -211,7 +213,6 @@ Answer by running riddle.answer('your answer here') from the console.`);
             dataLenPromise="{dataLenPromise}"
             resources="{resources}"
             scrollY="{hexScrollY}"
-            bind:resourceNodeDataMap="{resourceNodeDataMap}"
           />
         {/if}
         <!-- 
@@ -242,7 +243,6 @@ Answer by running riddle.answer('your answer here') from the console.`);
     bind:showProjectManager="{showProjectManager}"
     bind:resources="{resources}"
     bind:rootResource="{rootResource}"
-    bind:resourceNodeDataMap="{resourceNodeDataMap}"
   />
 {/if}
 
diff --git a/frontend/src/hex/ByteclassView.svelte b/frontend/src/hex/ByteclassView.svelte
index a2bd2cf35..72815f8a0 100644
--- a/frontend/src/hex/ByteclassView.svelte
+++ b/frontend/src/hex/ByteclassView.svelte
@@ -29,11 +29,11 @@
 
   import { hexToByteArray } from "../helpers.js";
   import { screenHeight } from "./stores.js";
-  import { selectedResource, settings } from "../stores.js";
+  import { selectedResource, settings, dataLength } from "../stores.js";
 
   import { onMount } from "svelte";
 
-  export let dataLength, currentPosition;
+  export let currentPosition;
   let data = undefined;
 
   $: colorArray = [
@@ -129,9 +129,9 @@
       // Offset Y by 0.5 because of: https://stackoverflow.com/a/48970774
       context.strokeRect(
         0,
-        Math.ceil((currentPosition / dataLength) * canvas.height) - 0.5,
+        Math.ceil((currentPosition / $dataLength) * canvas.height) - 0.5,
         alignment,
-        Math.ceil(($screenHeight / dataLength) * canvas.height)
+        Math.ceil(($screenHeight / $dataLength) * canvas.height)
       );
     }
   }
@@ -143,7 +143,8 @@
     on:mousedown="{(e) => {
       currentPosition =
         Math.floor(
-          Math.floor(dataLength * (e.offsetY / canvas.offsetHeight)) / alignment
+          Math.floor($dataLength * (e.offsetY / canvas.offsetHeight)) /
+            alignment
         ) * alignment;
       clicking = true;
     }}"
@@ -157,7 +158,7 @@
       if (clicking) {
         currentPosition =
           Math.floor(
-            Math.floor(dataLength * (e.offsetY / canvas.offsetHeight)) /
+            Math.floor($dataLength * (e.offsetY / canvas.offsetHeight)) /
               alignment
           ) * alignment;
         clicking = true;
diff --git a/frontend/src/hex/EntropyView.svelte b/frontend/src/hex/EntropyView.svelte
index 66e89d6d0..8d9db1f79 100644
--- a/frontend/src/hex/EntropyView.svelte
+++ b/frontend/src/hex/EntropyView.svelte
@@ -29,10 +29,10 @@
 
   import { screenHeight } from "./stores.js";
   import { hexToByteArray } from "../helpers.js";
-  import { selectedResource, settings } from "../stores.js";
+  import { selectedResource, settings, dataLength } from "../stores.js";
 
   import { onMount } from "svelte";
-  export let dataLength, currentPosition;
+  export let currentPosition;
   let data = undefined;
 
   $: bgcolors = hexToByteArray($settings.background.slice(1));
@@ -109,9 +109,9 @@
       // Offset Y by 0.5 because of: https://stackoverflow.com/a/48970774
       context.strokeRect(
         0,
-        Math.ceil((currentPosition / dataLength) * canvas.height) - 0.5,
+        Math.ceil((currentPosition / $dataLength) * canvas.height) - 0.5,
         alignment,
-        Math.ceil(($screenHeight / dataLength) * canvas.height)
+        Math.ceil(($screenHeight / $dataLength) * canvas.height)
       );
     }
 
@@ -128,7 +128,7 @@
     on:mousedown="{(e) => {
       currentPosition =
         Math.floor(
-          Math.floor(dataLength * (e.offsetY / canvas.offsetHeight)) / 16
+          Math.floor($dataLength * (e.offsetY / canvas.offsetHeight)) / 16
         ) * 16;
       clicking = true;
     }}"
@@ -142,7 +142,7 @@
       if (clicking) {
         currentPosition =
           Math.floor(
-            Math.floor(dataLength * (e.offsetY / canvas.offsetHeight)) / 16
+            Math.floor($dataLength * (e.offsetY / canvas.offsetHeight)) / 16
           ) * 16;
         clicking = true;
       }
diff --git a/frontend/src/hex/HexView.svelte b/frontend/src/hex/HexView.svelte
index 872e0f34b..36a983aae 100644
--- a/frontend/src/hex/HexView.svelte
+++ b/frontend/src/hex/HexView.svelte
@@ -69,18 +69,23 @@
   import MinimapView from "./MinimapView.svelte";
   import Breadcrumb from "../utils/Breadcrumb.svelte";
   import { chunkList, buf2hex, hexToChar } from "../helpers.js";
-  import { selectedResource, selected, settings } from "../stores.js";
+  import {
+    selectedResource,
+    selected,
+    settings,
+    resourceNodeDataMap,
+    dataLength,
+  } from "../stores.js";
   import { onMount } from "svelte";
   import { screenHeight } from "./stores";
   import SearchBar from "../utils/SearchBar.svelte";
 
-  export let resources, dataLenPromise, resourceNodeDataMap;
+  export let resources;
   let dataSearchResults = {};
   let childRangesPromise = Promise.resolve(undefined);
   let chunkDataPromise = Promise.resolve(undefined);
   let currentPosition = 0;
   let childRanges,
-    dataLength,
     resourceData,
     chunkData = [],
     chunks = [],
@@ -95,21 +100,13 @@
     windowSize = chunkSize * 10,
     windowPadding = 1024;
 
-  $: dataLenPromise.then((r) => {
-    dataLength = r;
-  });
-
   $: childRangesPromise.then((r) => {
     childRanges = r;
   });
 
-  $: chunkDataPromise.then((r) => {
-    chunks = r;
-  });
-
   $: childRangesPromise = calculateRanges(
     $selectedResource,
-    dataLenPromise,
+    $dataLength,
     $settings.colors
   );
 
@@ -120,18 +117,21 @@
       localDataSearchResults.matches?.length > 0 &&
       (localDataSearchResults.index || localDataSearchResults.index === 0)
     ) {
-      dataLenPromise.then((dataLength) => {
-        currentPosition =
-          Math.floor(
-            localDataSearchResults.matches[localDataSearchResults.index][0] /
-              alignment
-          ) * alignment;
-      });
+      currentPosition =
+        Math.floor(
+          localDataSearchResults.matches[localDataSearchResults.index][0] /
+            alignment
+        ) * alignment;
     }
   }
+  $: chunksPromise = getNewData(
+    $selectedResource,
+    currentPosition,
+    $dataLength
+  );
 
-  $: chunkDataPromise = dataLenPromise.then((r) => {
-    return getNewData($selectedResource, currentPosition);
+  $: chunksPromise.then((r) => {
+    chunks = r;
   });
 
   $: resetResource($selectedResource);
@@ -155,7 +155,7 @@
 
   async function getNewData() {
     start = currentPosition;
-    end = Math.min(start + $screenHeight, dataLength);
+    end = Math.min(start + $screenHeight, $dataLength);
     if (length < 1024 * 1024 * 64 && $selectedResource) {
       resourceData = await $selectedResource.get_data();
     } else {
@@ -169,10 +169,10 @@
     }
     if (end > endWindow - windowPadding) {
       startWindow = Math.max(start - windowPadding, 0);
-      endWindow = Math.min(startWindow + windowSize, dataLength);
+      endWindow = Math.min(startWindow + windowSize, $dataLength);
       chunkData = await $selectedResource.get_data([startWindow, endWindow]);
     } else if (start < startWindow + windowPadding) {
-      endWindow = Math.min(end + windowPadding, dataLength);
+      endWindow = Math.min(end + windowPadding, $dataLength);
       startWindow = Math.max(endWindow - windowSize, 0);
       chunkData = await $selectedResource.get_data([startWindow, endWindow]);
     }
@@ -182,7 +182,7 @@
     ).map((chunk) => chunkList(buf2hex(chunk), 2));
   }
 
-  async function calculateRanges(resource, dataLenPromise, colors) {
+  async function calculateRanges(resource, dataLength, colors) {
     const children = await resource.get_children();
     if (children.length === 0) {
       return [];
@@ -257,7 +257,7 @@
         resources[childRange.resource_id]?.get_caption() ||
         childRange.resource_id;
       info.onDoubleClick = () => {
-        resourceNodeDataMap[$selected].collapsed = false;
+        $resourceNodeDataMap[$selected].collapsed = false;
         $selected = childRange.resource_id;
       };
     }
@@ -284,11 +284,12 @@
   function refreshHeight() {
     $screenHeight =
       Math.floor(hexDisplay.offsetHeight / lineHeight) * alignment;
-    chunkDataPromise = dataLenPromise.then(getNewData);
+    chunksPromise = getNewData();
   }
 
   onMount(() => {
     refreshHeight();
+    chunksPromise = getNewData();
   });
 </script>
 
@@ -308,8 +309,8 @@
   id="scrollable"
   on:wheel="{(e) => {
     currentPosition += Math.floor(e.deltaY) * alignment;
-    if (currentPosition > dataLength) {
-      currentPosition = dataLength - alignment;
+    if (currentPosition > $dataLength) {
+      currentPosition = $dataLength - alignment;
     }
     if (currentPosition < 0) {
       currentPosition = 0;
@@ -317,98 +318,87 @@
   }}"
 >
   <div class="hex-display">
-    {#await dataLenPromise}
-      <LoadingText />
-    {:then dataLength}
-      {#if dataLength > 0}
-        <!-- 
-          The magic number below is the largest height that Firefox will support with
-          a position: sticky element. Otherwise, the sticky element scrolls away.
-          Found this by manual binary search on my computer. 
-        -->
-        <div
-          style:height="min(8940000px, calc(var(--line-height) * {Math.ceil(
-            dataLength / alignment
-          )}))"
-        >
-          <div class="sticky">
-            <div class="hbox">
-              {#await chunkDataPromise}
-                <LoadingText />
-              {:then chunks}
+    {#if $dataLength > 0}
+      <!-- 
+        The magic number below is the largest height that Firefox will support with
+        a position: sticky element. Otherwise, the sticky element scrolls away.
+        Found this by manual binary search on my computer. 
+      -->
+      <div
+        style:height="min(8940000px, calc(var(--line-height) * {Math.ceil(
+          $dataLength / alignment
+        )}))"
+      >
+        <div class="sticky">
+          <div class="hbox">
+            <div>
+              {#each chunks as _, chunkIndex}
                 <div>
-                  {#each chunks as _, chunkIndex}
-                    <div>
-                      {(chunkIndex * alignment + start)
-                        .toString(16)
-                        .padStart(8, "0") + ": "}
-                    </div>
-                  {/each}
+                  {(chunkIndex * alignment + start)
+                    .toString(16)
+                    .padStart(8, "0") + ": "}
                 </div>
+              {/each}
+            </div>
 
-                <span class="spacer"> </span>
+            <span class="spacer"> </span>
 
-                {#await childRangesPromise}
+            {#await childRangesPromise}
+              <div>
+                {#each chunks as hexes}
                   <div>
-                    {#each chunks as hexes}
-                      <div>
-                        {#each hexes as byte}
-                          <span class="byte">{byte}</span>
-                        {/each}
-                      </div>
+                    {#each hexes as byte}
+                      <span class="byte">{byte}</span>
                     {/each}
                   </div>
-                {:then childRangesResult}
+                {/each}
+              </div>
+            {:then childRangesResult}
+              <div>
+                {#each chunks as hexes, chunkIndex}
                   <div>
-                    {#each chunks as hexes, chunkIndex}
-                      <div>
-                        {#each hexes as byte, byteIndex}
-                          {@const rangeInfo = getRangeInfo(
-                            chunkIndex * alignment + byteIndex + start,
-                            childRangesResult,
-                            byte
-                          )}
-                          <!-- svelte-ignore a11y-no-static-element-interactions -->
-                          <span
-                            class="byte"
-                            style:background-color="{rangeInfo.background}"
-                            style:color="{rangeInfo.foreground}"
-                            style:cursor="{rangeInfo.cursor}"
-                            style:user-select="{rangeInfo.user_select}"
-                            style:text-decoration="{rangeInfo.text_decoration}"
-                            title="{rangeInfo.title}"
-                            on:dblclick="{rangeInfo.onDoubleClick}">{byte}</span
-                          >
-                        {/each}
-                      </div>
+                    {#each hexes as byte, byteIndex}
+                      {@const rangeInfo = getRangeInfo(
+                        chunkIndex * alignment + byteIndex + start,
+                        childRangesResult,
+                        byte
+                      )}
+                      <!-- svelte-ignore a11y-no-static-element-interactions -->
+                      <span
+                        class="byte"
+                        style:background-color="{rangeInfo.background}"
+                        style:color="{rangeInfo.foreground}"
+                        style:cursor="{rangeInfo.cursor}"
+                        style:user-select="{rangeInfo.user_select}"
+                        style:text-decoration="{rangeInfo.text_decoration}"
+                        title="{rangeInfo.title}"
+                        on:dblclick="{rangeInfo.onDoubleClick}">{byte}</span
+                      >
                     {/each}
                   </div>
-                {/await}
+                {/each}
+              </div>
+            {/await}
 
-                <span class="spacer"></span>
+            <span class="spacer"></span>
 
-                <div class="ascii">
-                  {#each chunks as hexes}
-                    <div>
-                      {hexes.map(hexToChar).join("") + " "}
-                    </div>
-                  {/each}
+            <div class="ascii">
+              {#each chunks as hexes}
+                <div>
+                  {hexes.map(hexToChar).join("") + " "}
                 </div>
-              {/await}
+              {/each}
             </div>
           </div>
         </div>
-      {:else}
-        Resource has no data!
-      {/if}
-    {/await}
+      </div>
+    {:else}
+      Resource has no data!
+    {/if}
   </div>
   {#if resourceData != undefined}
     <div class="minimap">
-      <MinimapView
-        dataLength="{dataLength}"
-        bind:currentPosition="{currentPosition}"
-      />
+      <MinimapView bind:currentPosition="{currentPosition}" />
     </div>
   {/if}
 </div>
diff --git a/frontend/src/hex/MagnitudeView.svelte b/frontend/src/hex/MagnitudeView.svelte
index 73119056a..ccf322e61 100644
--- a/frontend/src/hex/MagnitudeView.svelte
+++ b/frontend/src/hex/MagnitudeView.svelte
@@ -28,11 +28,11 @@
   import LoadingTextVertical from "../utils/LoadingTextVertical.svelte";
   import { screenHeight } from "./stores.js";
   import { hexToByteArray } from "../helpers.js";
-  import { selectedResource, settings } from "../stores.js";
+  import { selectedResource, settings, dataLength } from "../stores.js";
 
   import { onMount } from "svelte";
 
-  export let dataLength, currentPosition;
+  export let currentPosition;
 
   let data = undefined;
 
@@ -112,9 +112,9 @@
       // Offset Y by 0.5 because of: https://stackoverflow.com/a/48970774
       context.strokeRect(
         0,
-        Math.ceil((currentPosition / dataLength) * canvas.height) - 0.5,
+        Math.ceil((currentPosition / $dataLength) * canvas.height) - 0.5,
         alignment,
-        Math.ceil(($screenHeight / dataLength) * canvas.height)
+        Math.ceil(($screenHeight / $dataLength) * canvas.height)
       );
     }
 
@@ -131,7 +131,8 @@
     on:mousedown="{(e) => {
       currentPosition =
         Math.floor(
-          Math.floor(dataLength * (e.offsetY / canvas.offsetHeight)) / alignment
+          Math.floor($dataLength * (e.offsetY / canvas.offsetHeight)) /
+            alignment
         ) * alignment;
       clicking = true;
     }}"
@@ -145,7 +146,7 @@
       if (clicking) {
         currentPosition =
           Math.floor(
-            Math.floor(dataLength * (e.offsetY / canvas.offsetHeight)) /
+            Math.floor($dataLength * (e.offsetY / canvas.offsetHeight)) /
               alignment
           ) * alignment;
         clicking = true;
diff --git a/frontend/src/hex/MinimapView.svelte b/frontend/src/hex/MinimapView.svelte
index 6db16e5b3..c6d3c9d76 100644
--- a/frontend/src/hex/MinimapView.svelte
+++ b/frontend/src/hex/MinimapView.svelte
@@ -16,27 +16,18 @@
   import ByteclassView from "./ByteclassView.svelte";
   import MagnitudeView from "./MagnitudeView.svelte";
   import CarouselSelector from "../utils/CarouselSelector.svelte";
-  export let dataLength, currentPosition;
+  export let currentPosition;
   let carouselSelection;
 </script>
 
 <div class="minimap">
   <JumpToOffset bind:currentPosition="{currentPosition}" />
   {#if carouselSelection === "Entropy"}
-    <EntropyView
-      dataLength="{dataLength}"
-      bind:currentPosition="{currentPosition}"
-    />
+    <EntropyView bind:currentPosition="{currentPosition}" />
   {:else if carouselSelection === "Byteclass"}
-    <ByteclassView
-      dataLength="{dataLength}"
-      bind:currentPosition="{currentPosition}"
-    />
+    <ByteclassView bind:currentPosition="{currentPosition}" />
   {:else if carouselSelection === "Magnitude"}
-    <MagnitudeView
-      dataLength="{dataLength}"
-      bind:currentPosition="{currentPosition}"
-    />
+    <MagnitudeView bind:currentPosition="{currentPosition}" />
   {/if}
   <div class="carousel">
     <CarouselSelector
diff --git a/frontend/src/resource/ResourceTreeNode.svelte b/frontend/src/resource/ResourceTreeNode.svelte
index 5e7cd363e..ce502b83a 100644
--- a/frontend/src/resource/ResourceTreeNode.svelte
+++ b/frontend/src/resource/ResourceTreeNode.svelte
@@ -112,11 +112,10 @@
   import LoadingText from "../utils/LoadingText.svelte";
 
   import { onDestroy } from "svelte";
-  import { selected } from "../stores.js";
+  import { selected, resourceNodeDataMap } from "../stores.js";
   import { shortcuts } from "../keyboard";
 
   export let rootResource,
-    resourceNodeDataMap,
     selectNextSibling = () => {},
     selectPreviousSibling = () => {},
     collapsed = true,
@@ -131,31 +130,31 @@
     kiddoChunksize = 512;
 
   $: {
-    if (resourceNodeDataMap[self_id] === undefined) {
-      resourceNodeDataMap[self_id] = {};
+    if ($resourceNodeDataMap[self_id] === undefined) {
+      $resourceNodeDataMap[self_id] = {};
     }
-    if (resourceNodeDataMap[self_id].collapsed === undefined) {
-      resourceNodeDataMap[self_id].collapsed = collapsed;
+    if ($resourceNodeDataMap[self_id].collapsed === undefined) {
+      $resourceNodeDataMap[self_id].collapsed = collapsed;
     }
-    if (resourceNodeDataMap[self_id].childrenPromise === undefined) {
-      resourceNodeDataMap[self_id].childrenPromise =
+    if ($resourceNodeDataMap[self_id].childrenPromise === undefined) {
+      $resourceNodeDataMap[self_id].childrenPromise =
         rootResource.get_children();
     }
-    if (resourceNodeDataMap[self_id].commentsPromise === undefined) {
-      resourceNodeDataMap[self_id].commentsPromise =
+    if ($resourceNodeDataMap[self_id].commentsPromise === undefined) {
+      $resourceNodeDataMap[self_id].commentsPromise =
         rootResource.get_comments();
     }
-    if (resourceNodeDataMap[self_id].lastModified === undefined) {
-      resourceNodeDataMap[self_id].lastModified = false;
+    if ($resourceNodeDataMap[self_id].lastModified === undefined) {
+      $resourceNodeDataMap[self_id].lastModified = false;
     }
-    if (resourceNodeDataMap[self_id].allModified === undefined) {
-      resourceNodeDataMap[self_id].allModified = false;
+    if ($resourceNodeDataMap[self_id].allModified === undefined) {
+      $resourceNodeDataMap[self_id].allModified = false;
     }
-    childrenPromise = resourceNodeDataMap[self_id].childrenPromise;
-    commentsPromise = resourceNodeDataMap[self_id].commentsPromise;
-    collapsed = resourceNodeDataMap[self_id].collapsed;
-    lastModified = resourceNodeDataMap[self_id].lastModified;
-    allModified = resourceNodeDataMap[self_id].allModified;
+    childrenPromise = $resourceNodeDataMap[self_id].childrenPromise;
+    commentsPromise = $resourceNodeDataMap[self_id].commentsPromise;
+    collapsed = $resourceNodeDataMap[self_id].collapsed;
+    lastModified = $resourceNodeDataMap[self_id].lastModified;
+    allModified = $resourceNodeDataMap[self_id].allModified;
   }
   function updateRootModel() {
     rootResource.update();
@@ -171,10 +170,10 @@
 
   $: if ($selected === self_id) {
     shortcuts["h"] = () => {
-      resourceNodeDataMap[self_id].collapsed = true;
+      $resourceNodeDataMap[self_id].collapsed = true;
     };
     shortcuts["l"] = () => {
-      resourceNodeDataMap[self_id].collapsed = false;
+      $resourceNodeDataMap[self_id].collapsed = false;
     };
     shortcuts["j"] = () => {
       if (!collapsed && firstChild) {
@@ -204,7 +203,7 @@
   }
 
   function onDoubleClick(e) {
-    resourceNodeDataMap[self_id].collapsed = !collapsed;
+    $resourceNodeDataMap[self_id].collapsed = !collapsed;
     // Expand children recursively on double click
     if (!collapsed) {
       childrenCollapsed = false;
@@ -217,15 +216,15 @@
     // As a side effect, the corresponding resource gets selected.
     $selected = self_id;
     await rootResource.delete_comment(optional_range);
-    resourceNodeDataMap[$selected].commentsPromise =
+    $resourceNodeDataMap[$selected].commentsPromise =
       rootResource.get_comments();
   }
 
   // Swap "just modified" indication to "previously modified" indication
   onDestroy(() => {
-    if (resourceNodeDataMap[self_id].lastModified) {
-      resourceNodeDataMap[self_id].allModified =
-        resourceNodeDataMap[self_id].lastModified;
+    if ($resourceNodeDataMap[self_id].lastModified) {
+      $resourceNodeDataMap[self_id].allModified =
+        $resourceNodeDataMap[self_id].lastModified;
     }
   });
 </script>
@@ -235,7 +234,7 @@
     {#if children?.length > 0}
       <button
         on:click="{() => {
-          resourceNodeDataMap[self_id].collapsed = !collapsed;
+          $resourceNodeDataMap[self_id].collapsed = !collapsed;
         }}"
       >
         {#if collapsed}
@@ -248,8 +247,8 @@
     on:click="{onClick}"
     on:dblclick="{onDoubleClick}"
     class:selected="{$selected === self_id}"
-    class:lastModified="{resourceNodeDataMap[self_id].lastModified}"
-    class:allModified="{resourceNodeDataMap[self_id].allModified}"
+    class:lastModified="{$resourceNodeDataMap[self_id].lastModified}"
+    class:allModified="{$resourceNodeDataMap[self_id].allModified}"
     id="{self_id}"
   >
     {rootResource.get_caption()}
@@ -298,7 +297,6 @@
                     : () => {
                         $selected = children[i - 1]?.resource_id;
                       }}"
-                  bind:resourceNodeDataMap="{resourceNodeDataMap}"
                   searchResults="{searchResults}"
                 />
               </div>
diff --git a/frontend/src/resource/ResourceTreeToolbar.svelte b/frontend/src/resource/ResourceTreeToolbar.svelte
index 4b4439fb0..16aef12f5 100644
--- a/frontend/src/resource/ResourceTreeToolbar.svelte
+++ b/frontend/src/resource/ResourceTreeToolbar.svelte
@@ -15,13 +15,10 @@
     selected,
     settings,
     selectedProject,
+    resourceNodeDataMap,
   } from "../stores.js";
 
-  export let resourceNodeDataMap,
-    modifierView,
-    bottomLeftPane,
-    showProjectManager,
-    showRootResource;
+  export let modifierView, bottomLeftPane, showProjectManager, showRootResource;
   $: rootResource = $selectedResource;
 
   function refreshResource() {
@@ -80,12 +77,12 @@
         shortcut: "i",
         onclick: async (e) => {
           await rootResource.identify();
-          if (!resourceNodeDataMap[$selected]) {
-            resourceNodeDataMap[$selected] = {};
+          if (!$resourceNodeDataMap[$selected]) {
+            $resourceNodeDataMap[$selected] = {};
           }
-          resourceNodeDataMap[$selected].collapsed =
-            !!resourceNodeDataMap[$selected]?.collapsed;
-          resourceNodeDataMap[$selected].childrenPromise =
+          $resourceNodeDataMap[$selected].collapsed =
+            !!$resourceNodeDataMap[$selected]?.collapsed;
+          $resourceNodeDataMap[$selected].childrenPromise =
             rootResource.get_children();
           refreshResource();
         },
@@ -97,11 +94,11 @@
         shortcut: "u",
         onclick: async (e) => {
           await rootResource.unpack();
-          if (!resourceNodeDataMap[$selected]) {
-            resourceNodeDataMap[$selected] = {};
+          if (!$resourceNodeDataMap[$selected]) {
+            $resourceNodeDataMap[$selected] = {};
           }
-          resourceNodeDataMap[$selected].collapsed = false;
-          resourceNodeDataMap[$selected].childrenPromise =
+          $resourceNodeDataMap[$selected].collapsed = false;
+          $resourceNodeDataMap[$selected].childrenPromise =
             rootResource.get_children();
           refreshResource();
         },
@@ -121,12 +118,12 @@
         shortcut: "a",
         onclick: async (e) => {
           await rootResource.analyze();
-          if (!resourceNodeDataMap[$selected]) {
-            resourceNodeDataMap[$selected] = {};
+          if (!$resourceNodeDataMap[$selected]) {
+            $resourceNodeDataMap[$selected] = {};
           }
-          resourceNodeDataMap[$selected].collapsed =
-            !!resourceNodeDataMap[$selected]?.collapsed;
-          resourceNodeDataMap[$selected].childrenPromise =
+          $resourceNodeDataMap[$selected].collapsed =
+            !!$resourceNodeDataMap[$selected]?.collapsed;
+          $resourceNodeDataMap[$selected].childrenPromise =
             rootResource.get_children();
           refreshResource();
         },
@@ -148,11 +145,11 @@
           const descendants = await $selectedResource.get_descendants();
           clearModified(descendants);
           await rootResource.pack();
-          if (!resourceNodeDataMap[$selected]) {
-            resourceNodeDataMap[$selected] = {};
+          if (!$resourceNodeDataMap[$selected]) {
+            $resourceNodeDataMap[$selected] = {};
           }
-          resourceNodeDataMap[$selected].collapsed = false;
-          resourceNodeDataMap[$selected].childrenPromise =
+          $resourceNodeDataMap[$selected].collapsed = false;
+          $resourceNodeDataMap[$selected].childrenPromise =
             rootResource.get_children();
           refreshResource();
         },
@@ -244,11 +241,11 @@
         shortcut: "u+Shift",
         onclick: async (e) => {
           await rootResource.unpack_recursively();
-          if (!resourceNodeDataMap[$selected]) {
-            resourceNodeDataMap[$selected] = {};
+          if (!$resourceNodeDataMap[$selected]) {
+            $resourceNodeDataMap[$selected] = {};
           }
-          resourceNodeDataMap[$selected].collapsed = false;
-          resourceNodeDataMap[$selected].childrenPromise =
+          $resourceNodeDataMap[$selected].collapsed = false;
+          $resourceNodeDataMap[$selected].childrenPromise =
             rootResource.get_children();
           refreshResource();
         },
@@ -262,11 +259,11 @@
           const descendants = await $selectedResource.get_descendants();
           clearModified(descendants);
           await rootResource.pack_recursively();
-          if (!resourceNodeDataMap[$selected]) {
-            resourceNodeDataMap[$selected] = {};
+          if (!$resourceNodeDataMap[$selected]) {
+            $resourceNodeDataMap[$selected] = {};
           }
-          resourceNodeDataMap[$selected].collapsed = false;
-          resourceNodeDataMap[$selected].childrenPromise =
+          $resourceNodeDataMap[$selected].collapsed = false;
+          $resourceNodeDataMap[$selected].childrenPromise =
             rootResource.get_children();
           refreshResource();
         },
@@ -316,11 +313,11 @@
 
   function clearModified(descendants) {
     for (const descendant of descendants) {
-      if (!resourceNodeDataMap[descendant["resource_id"]]) {
-        resourceNodeDataMap[descendant["resource_id"]] = {};
+      if (!$resourceNodeDataMap[descendant["resource_id"]]) {
+        $resourceNodeDataMap[descendant["resource_id"]] = {};
       }
-      resourceNodeDataMap[descendant["resource_id"]].lastModified = undefined;
-      resourceNodeDataMap[descendant["resource_id"]].allModified = undefined;
+      $resourceNodeDataMap[descendant["resource_id"]].lastModified = undefined;
+      $resourceNodeDataMap[descendant["resource_id"]].allModified = undefined;
     }
   }
 </script>
diff --git a/frontend/src/resource/ResourceTreeView.svelte b/frontend/src/resource/ResourceTreeView.svelte
index def1d0b99..8c3416777 100644
--- a/frontend/src/resource/ResourceTreeView.svelte
+++ b/frontend/src/resource/ResourceTreeView.svelte
@@ -58,7 +58,6 @@
   export let rootResource,
     modifierView,
     bottomLeftPane,
-    resourceNodeDataMap = {},
     showProjectManager,
     showRootResource;
 
@@ -81,7 +80,6 @@
 <div class="hbox">
   <div class="toolbar">
     <ResourceTreeToolbar
-      bind:resourceNodeDataMap="{resourceNodeDataMap}"
       bind:modifierView="{modifierView}"
       bind:bottomLeftPane="{bottomLeftPane}"
       bind:showProjectManager="{showProjectManager}"
@@ -101,7 +99,6 @@
       <ResourceTreeNode
         rootResource="{rootResource}"
         bind:searchResults="{searchResults}"
-        bind:resourceNodeDataMap="{resourceNodeDataMap}"
       />
     </div>
   </div>
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index 0af6397d0..0cd75bc04 100644
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@@ -51,3 +51,5 @@ export function loadSettings(forceReset) {
 export let settings = writable(loadSettings());
 
 export let resourceNodeDataMap = writable({});
+
+export let dataLength = writable(undefined);
diff --git a/frontend/src/views/AddTagView.svelte b/frontend/src/views/AddTagView.svelte
index 9ec564cbd..51461472a 100644
--- a/frontend/src/views/AddTagView.svelte
+++ b/frontend/src/views/AddTagView.svelte
@@ -68,21 +68,26 @@
 </style>
 
 <script>
-  import { selected, selectedResource, settings } from "../stores.js";
+  import {
+    selected,
+    selectedResource,
+    settings,
+    resourceNodeDataMap,
+  } from "../stores.js";
   import Button from "../utils/Button.svelte";
   import { onMount } from "svelte";
   import LoadingText from "../utils/LoadingText.svelte";
   import { cleanOfrakType } from "../helpers";
 
-  export let modifierView, resourceNodeDataMap;
+  export let modifierView;
   let errorMessage,
     ofrakTagsPromise = new Promise(() => {}),
     selectedTag;
 
   function refreshResource() {
     // Force tree view children refresh
-    resourceNodeDataMap[$selected].collapsed = false;
-    resourceNodeDataMap[$selected].childrenPromise =
+    $resourceNodeDataMap[$selected].collapsed = false;
+    $resourceNodeDataMap[$selected].childrenPromise =
       $selectedResource.get_children();
 
     // Force hex view refresh with colors
diff --git a/frontend/src/views/BinaryModifyView.svelte b/frontend/src/views/BinaryModifyView.svelte
index 04cd9cd8f..0cb49198a 100644
--- a/frontend/src/views/BinaryModifyView.svelte
+++ b/frontend/src/views/BinaryModifyView.svelte
@@ -84,23 +84,15 @@
   } from "../helpers.js";
   import {
     selected,
+    resourceNodeDataMap,
+    dataLength,
     selectedResource as _selectedResource,
   } from "../stores.js";
   import Button from "../utils/Button.svelte";
   const selectedResource = $_selectedResource;
 
-  export let modifierView, dataLenPromise, resourceNodeDataMap;
-  let startInput,
-    endInput,
-    startOffset,
-    endOffset,
-    dataLength,
-    errorMessage,
-    userData;
-
-  $: dataLenPromise.then((r) => {
-    dataLength = r;
-  });
+  export let modifierView;
+  let startInput, endInput, startOffset, endOffset, errorMessage, userData;
 
   function refreshResource() {
     // Force hex view refresh with colors
@@ -167,10 +159,10 @@
       if (selectedResource) {
         await selectedResource.queue_patch(patchData, startOffset, endOffset);
       }
-      if (!resourceNodeDataMap[$selected]) {
-        resourceNodeDataMap[$selected] = {};
+      if (!$resourceNodeDataMap[$selected]) {
+        $resourceNodeDataMap[$selected] = {};
       }
-      resourceNodeDataMap[$selected].lastModified = true;
+      $resourceNodeDataMap[$selected].lastModified = true;
       modifierView = undefined;
       refreshResource();
     } catch (err) {
@@ -226,8 +218,8 @@
         <input
           type="text"
           bind:this="{endInput}"
-          value="{dataLength && !endInput.value
-            ? `0x${dataLength.toString(16)}`
+          value="{$dataLength && !endInput.value
+            ? `0x${$dataLength.toString(16)}`
             : ''}"
         />
       </label>
diff --git a/frontend/src/views/CarveView.svelte b/frontend/src/views/CarveView.svelte
index 5ed8a4bc6..25d6a5d42 100644
--- a/frontend/src/views/CarveView.svelte
+++ b/frontend/src/views/CarveView.svelte
@@ -63,20 +63,21 @@
 
 <script>
   import { calculator } from "../helpers.js";
-  import { selected, selectedResource } from "../stores.js";
+  import {
+    selected,
+    selectedResource,
+    resourceNodeDataMap,
+    dataLength,
+  } from "../stores.js";
   import Button from "../utils/Button.svelte";
 
-  export let modifierView, resourceNodeDataMap, dataLenPromise;
-  let startInput, endInput, dataLength, errorMessage;
-
-  $: dataLenPromise.then((r) => {
-    dataLength = r;
-  });
+  export let modifierView;
+  let startInput, endInput, errorMessage;
 
   function refreshResource() {
     // Force tree view children refresh
-    resourceNodeDataMap[$selected].collapsed = false;
-    resourceNodeDataMap[$selected].childrenPromise =
+    $resourceNodeDataMap[$selected].collapsed = false;
+    $resourceNodeDataMap[$selected].childrenPromise =
       $selectedResource.get_children();
 
     // Force hex view refresh with colors
@@ -128,8 +129,8 @@
       <input
         type="text"
         bind:this="{endInput}"
-        value="{dataLength && !endInput.value
-          ? `0x${dataLength.toString(16)}`
+        value="{$dataLength && !endInput.value
+          ? `0x${$dataLength.toString(16)}`
           : ''}"
       />
     </label>
diff --git a/frontend/src/views/CommentView.svelte b/frontend/src/views/CommentView.svelte
index 6a7915a71..db776925b 100644
--- a/frontend/src/views/CommentView.svelte
+++ b/frontend/src/views/CommentView.svelte
@@ -59,18 +59,19 @@
 
 <script>
   import { calculator } from "../helpers.js";
-  import { selected, selectedResource } from "../stores.js";
+  import {
+    selected,
+    selectedResource,
+    resourceNodeDataMap,
+    dataLength,
+  } from "../stores.js";
   import Button from "../utils/Button.svelte";
 
-  export let modifierView, resourceNodeDataMap, dataLenPromise;
-  let comment, startInput, endInput, dataLength, errorMessage;
-
-  $: dataLenPromise.then((r) => {
-    dataLength = r;
-  });
+  export let modifierView;
+  let comment, startInput, endInput, errorMessage;
 
   function refreshResource() {
-    resourceNodeDataMap[$selected].commentsPromise =
+    $resourceNodeDataMap[$selected].commentsPromise =
       $selectedResource.get_comments();
 
     // Force hex view refresh with colors
@@ -82,9 +83,11 @@
   async function addComment() {
     try {
       let optional_range = null;
-      if (dataLength) {
+      if ($dataLength) {
         let startOffset = startInput.value ? startInput.value : "0";
-        let endOffset = endInput.value ? endInput.value : dataLength.toString();
+        let endOffset = endInput.value
+          ? endInput.value
+          : $dataLength.toString();
         startOffset = calculator.calculate(startOffset);
         endOffset = calculator.calculate(endOffset);
         optional_range = [startOffset, endOffset];
@@ -112,7 +115,7 @@
       Comment:
       <input type="text" bind:this="{comment}" />
     </label>
-    {#if dataLength}
+    {#if $dataLength}
       <label>
         Starting offset (optional):
         <input type="text" bind:this="{startInput}" value="" />
diff --git a/frontend/src/views/ComponentsView.svelte b/frontend/src/views/ComponentsView.svelte
index 185f56786..d91e349a0 100644
--- a/frontend/src/views/ComponentsView.svelte
+++ b/frontend/src/views/ComponentsView.svelte
@@ -112,7 +112,11 @@
 </style>
 
 <script>
-  import { selected, selectedResource } from "../stores.js";
+  import {
+    selected,
+    selectedResource,
+    resourceNodeDataMap,
+  } from "../stores.js";
   import { splitAndCapitalize } from "../helpers.js";
   import { onMount } from "svelte";
 
@@ -121,7 +125,7 @@
   import Checkbox from "../utils/Checkbox.svelte";
   import Button from "../utils/Button.svelte";
 
-  export let modifierView, resourceNodeDataMap;
+  export let modifierView;
   let errorMessage,
     allComponents = true,
     includeAnalyzers = false,
@@ -199,19 +203,19 @@
         ofrakConfig["type"],
         config
       );
-      if (!resourceNodeDataMap[$selected]) {
-        resourceNodeDataMap[$selected] = {};
+      if (!$resourceNodeDataMap[$selected]) {
+        $resourceNodeDataMap[$selected] = {};
       }
-      resourceNodeDataMap[$selected].collapsed = false;
-      resourceNodeDataMap[$selected].childrenPromise =
+      $resourceNodeDataMap[$selected].collapsed = false;
+      $resourceNodeDataMap[$selected].childrenPromise =
         $selectedResource.get_children();
       for (const result in results) {
         if (result === "modified") {
           for (const resource of results[result]) {
-            if (!resourceNodeDataMap[resource["id"]]) {
-              resourceNodeDataMap[resource["id"]] = {};
+            if (!$resourceNodeDataMap[resource["id"]]) {
+              $resourceNodeDataMap[resource["id"]] = {};
             }
-            resourceNodeDataMap[resource["id"]].lastModified = true;
+            $resourceNodeDataMap[resource["id"]].lastModified = true;
           }
         }
       }
diff --git a/frontend/src/views/FindReplaceView.svelte b/frontend/src/views/FindReplaceView.svelte
index a7b747861..7e7ea0c0f 100644
--- a/frontend/src/views/FindReplaceView.svelte
+++ b/frontend/src/views/FindReplaceView.svelte
@@ -69,10 +69,14 @@
 
 <script>
   import Checkbox from "../utils/Checkbox.svelte";
-  import { selected, selectedResource } from "../stores.js";
+  import {
+    selected,
+    selectedResource,
+    resourceNodeDataMap,
+  } from "../stores.js";
   import Button from "../utils/Button.svelte";
 
-  export let modifierView, resourceNodeDataMap;
+  export let modifierView;
   let toFind,
     toReplace,
     nullTerminated = true,
@@ -99,10 +103,10 @@
         for (const result in results) {
           if (result === "modified") {
             for (const resource of results[result]) {
-              if (!resourceNodeDataMap[resource["id"]]) {
-                resourceNodeDataMap[resource["id"]] = {};
+              if (!$resourceNodeDataMap[resource["id"]]) {
+                $resourceNodeDataMap[resource["id"]] = {};
               }
-              resourceNodeDataMap[resource["id"]].lastModified = true;
+              $resourceNodeDataMap[resource["id"]].lastModified = true;
             }
           }
         }
diff --git a/frontend/src/views/RunScriptView.svelte b/frontend/src/views/RunScriptView.svelte
index a9b5bf0a7..6690d6123 100644
--- a/frontend/src/views/RunScriptView.svelte
+++ b/frontend/src/views/RunScriptView.svelte
@@ -94,12 +94,13 @@
     selectedResource,
     selectedProject,
     settings,
+    resourceNodeDataMap,
   } from "../stores";
   import { onMount } from "svelte";
 
   hljs.registerLanguage("python", python);
 
-  export let modifierView, resourceNodeDataMap;
+  export let modifierView;
   let runScriptPromise = Promise.resolve(null),
     files = null,
     projectScript = null,
@@ -142,10 +143,10 @@
     for (const result in results) {
       if (result === "modified") {
         for (const resource of results[result]) {
-          if (!resourceNodeDataMap[resource["id"]]) {
-            resourceNodeDataMap[resource["id"]] = {};
+          if (!$resourceNodeDataMap[resource["id"]]) {
+            $resourceNodeDataMap[resource["id"]] = {};
           }
-          resourceNodeDataMap[resource["id"]].lastModified = true;
+          $resourceNodeDataMap[resource["id"]].lastModified = true;
         }
       }
     }
@@ -263,11 +264,11 @@
         const orig_selected = $selected;
         $selected = undefined;
         $selected = orig_selected;
-        if (!resourceNodeDataMap[$selected]) {
-          resourceNodeDataMap[$selected] = {};
+        if (!$resourceNodeDataMap[$selected]) {
+          $resourceNodeDataMap[$selected] = {};
         }
-        resourceNodeDataMap[$selected].collapsed = false;
-        resourceNodeDataMap[$selected].childrenPromise =
+        $resourceNodeDataMap[$selected].collapsed = false;
+        $resourceNodeDataMap[$selected].childrenPromise =
           $selectedResource?.get_children();
       }}">Back</Button
     >
diff --git a/frontend/src/views/SearchView.svelte b/frontend/src/views/SearchView.svelte
index 11ddfbab6..5ed5e6659 100644
--- a/frontend/src/views/SearchView.svelte
+++ b/frontend/src/views/SearchView.svelte
@@ -68,13 +68,13 @@
 </style>
 
 <script>
-  import { selectedResource } from "../stores.js";
+  import { selectedResource, resourceNodeDataMap } from "../stores.js";
   import { calculator } from "../helpers";
   import ResourceTreeNode from "../resource/ResourceTreeNode.svelte";
   import Checkbox from "../utils/Checkbox.svelte";
   import Button from "../utils/Button.svelte";
 
-  export let modifierView, resourceNodeDataMap;
+  export let modifierView;
   let searchInput,
     searchRangeStartInput,
     searchRangeEndInput,
@@ -116,7 +116,7 @@
     if ($selectedResource !== undefined) {
       const ancestors = await $selectedResource.get_ancestors(null);
       for (const ancestor of ancestors) {
-        resourceNodeDataMap[ancestor.get_id()].collapsed = false;
+        $resourceNodeDataMap[ancestor.get_id()].collapsed = false;
       }
     }
     modifierView = undefined;
@@ -164,11 +164,7 @@
   </div>
   {#each results as matched_resource}
     <div class="resultsbox">
-      <ResourceTreeNode
-        rootResource="{matched_resource}"
-        collapsed="false"
-        bind:resourceNodeDataMap="{resourceNodeDataMap}"
-      />
+      <ResourceTreeNode rootResource="{matched_resource}" collapsed="false" />
     </div>
   {/each}
 </div>
diff --git a/frontend/src/views/StartView.svelte b/frontend/src/views/StartView.svelte
index f5621313a..87ca2c488 100644
--- a/frontend/src/views/StartView.svelte
+++ b/frontend/src/views/StartView.svelte
@@ -139,7 +139,12 @@
   import Checkbox from "../utils/Checkbox.svelte";
 
   import { animals } from "../animals.js";
-  import { selected, settings, selectedProject } from "../stores.js";
+  import {
+    selected,
+    settings,
+    selectedProject,
+    resourceNodeDataMap,
+  } from "../stores.js";
   import { remote_model_to_resource } from "../ofrak/remote_resource";
   import { numBytesToQuantity, saveSettings } from "../helpers";
 
@@ -150,7 +155,6 @@
     showProjectManager,
     resources,
     rootResource,
-    resourceNodeDataMap,
     browsedFiles,
     fileinput;
   let dragging = false,
@@ -372,10 +376,10 @@
       }
     );
     resources[resource.id] = remote_model_to_resource(resource, resources);
-    if (resourceNodeDataMap[resource.id] === undefined) {
-      resourceNodeDataMap[resource.id] = {};
+    if ($resourceNodeDataMap[resource.id] === undefined) {
+      $resourceNodeDataMap[resource.id] = {};
     }
-    resourceNodeDataMap[resource.id].collapsed = false;
+    $resourceNodeDataMap[resource.id].collapsed = false;
     while (resource.parent_id) {
       resource = await fetch(
         `${$settings.backendUrl}/${resource.parent_id}/`
@@ -387,10 +391,10 @@
       });
       resources[resource.id] = remote_model_to_resource(resource, resources);
 
-      if (resourceNodeDataMap[resource.id] === undefined) {
-        resourceNodeDataMap[resource.id] = {};
+      if ($resourceNodeDataMap[resource.id] === undefined) {
+        $resourceNodeDataMap[resource.id] = {};
       }
-      resourceNodeDataMap[resource.id].collapsed = false;
+      $resourceNodeDataMap[resource.id].collapsed = false;
     }
 
     showRootResource = true;