save

src/App.svelte

@@ -143,31 +143,128 @@
     return parts;
   }
 
-  // Create collapsible backtrace structure
+  // Parse indentation level from a backtrace line
+  function getIndentationLevel(line) {
+    const match = line.match(/^(\s*[\+\!\:\|]*\s*)/);
+    return match ? match[1].length : 0;
+  }
+
+  // Find the end of a section (lines with greater indentation)
+  function findSectionEnd(backtrace, startIndex) {
+    const startIndentation = getIndentationLevel(backtrace[startIndex]);
+
+    for (let i = startIndex + 1; i < backtrace.length; i++) {
+      const currentIndentation = getIndentationLevel(backtrace[i]);
+      // If we find a line with same or lesser indentation, that's where the section ends
+      if (currentIndentation <= startIndentation) {
+        return i - 1; // Return the last line of the section
+      }
+    }
+    // If we reach the end, the section goes to the last line
+    return backtrace.length - 1;
+  }
+
+  // Create collapsible backtrace structure with section awareness
   function createCollapsibleBacktrace(backtrace) {
-    return backtrace.map((line, index) => ({
-      id: index,
-      line,
-      parsed: parseBacktraceLine(line),
-      collapsed: false,
-    }));
+    const result = backtrace.map((line, index) => {
+      const indentationLevel = getIndentationLevel(line);
+      const sectionEnd = findSectionEnd(backtrace, index);
+      const hasSection = sectionEnd > index; // This line has child lines with greater indentation
+
+      return {
+        id: index,
+        line,
+        parsed: parseBacktraceLine(line),
+        indentationLevel,
+        hasSection,
+        sectionEnd,
+        sectionCollapsed: false,
+        hidden: false, // Will be set based on parent section state
+      };
+    });
+
+    // Initialize visibility based on any collapsed sections
+    result.forEach((_, index) => {
+      result[index].hidden = isLineHiddenByParentSection(result, index);
+    });
+
+    return result;
   }
 
-  // Toggle backtrace line collapse
-  function toggleBacktraceLine(threadId, lineIndex) {
+  // Toggle section collapse for a specific line
+  function toggleSection(threadId, lineIndex) {
+    console.log(
+      "🔄 Toggling section for thread:",
+      threadId,
+      "line:",
+      lineIndex
+    );
     threads = threads.map((thread) => {
       if (thread.id === threadId && thread.collapsibleBacktrace) {
         const updatedBacktrace = [...thread.collapsibleBacktrace];
-        updatedBacktrace[lineIndex] = {
-          ...updatedBacktrace[lineIndex],
-          collapsed: !updatedBacktrace[lineIndex].collapsed,
-        };
+        const line = updatedBacktrace[lineIndex];
+
+        if (line.hasSection) {
+          // Toggle the section collapsed state
+          line.sectionCollapsed = !line.sectionCollapsed;
+          console.log(
+            "📊 Section",
+            lineIndex,
+            "collapsed:",
+            line.sectionCollapsed,
+            "affects lines",
+            lineIndex + 1,
+            "to",
+            line.sectionEnd
+          );
+
+          // Update hidden state for all lines in this section
+          updateSectionVisibility(updatedBacktrace, lineIndex);
+        } else {
+          console.log("⚠️ Line", lineIndex, "has no section to toggle");
+        }
+
         return { ...thread, collapsibleBacktrace: updatedBacktrace };
       }
       return thread;
     });
   }
 
+  // Update visibility of lines based on section collapse states
+  function updateSectionVisibility(backtrace, changedLineIndex) {
+    const changedLine = backtrace[changedLineIndex];
+
+    // Update visibility for lines in the changed section
+    for (let i = changedLineIndex + 1; i <= changedLine.sectionEnd; i++) {
+      if (changedLine.sectionCollapsed) {
+        backtrace[i].hidden = true;
+      } else {
+        // Only show if not hidden by a parent section
+        backtrace[i].hidden = isLineHiddenByParentSection(backtrace, i);
+      }
+    }
+  }
+
+  // Check if a line should be hidden by any parent section
+  function isLineHiddenByParentSection(backtrace, lineIndex) {
+    const currentIndentation = backtrace[lineIndex].indentationLevel;
+
+    // Look backwards for any parent sections that are collapsed
+    for (let i = lineIndex - 1; i >= 0; i--) {
+      const parentLine = backtrace[i];
+      if (
+        parentLine.indentationLevel < currentIndentation &&
+        parentLine.hasSection &&
+        parentLine.sectionCollapsed &&
+        i + 1 <= lineIndex &&
+        lineIndex <= parentLine.sectionEnd
+      ) {
+        return true;
+      }
+    }
+    return false;
+  }
+
   // Reactive updates - run filter when threads OR filterText changes
   $: filteredThreads = threads.filter(
     (thread) =>
@@ -230,24 +327,36 @@
         <div class="thread-content">
           <div class="backtrace">
             {#each thread.collapsibleBacktrace as backtraceLine (backtraceLine.id)}
-              <div
-                class="backtrace-line"
-                class:collapsed={backtraceLine.collapsed}
-                on:click={() =>
-                  toggleBacktraceLine(thread.id, backtraceLine.id)}
-                on:keydown={(e) =>
-                  e.key === "Enter" &&
-                  toggleBacktraceLine(thread.id, backtraceLine.id)}
-                role="button"
-                tabindex="0"
-              >
-                <span class="indent">{backtraceLine.parsed.indent}</span
-                >{#if backtraceLine.parsed.sampleCount}<span
-                    class="sample-count"
-                    >{backtraceLine.parsed.sampleCount}</span
+              {#if !backtraceLine.hidden}
+                <div
+                  class="backtrace-line"
+                  class:has-section={backtraceLine.hasSection}
+                  class:section-collapsed={backtraceLine.sectionCollapsed}
+                  on:click={backtraceLine.hasSection
+                    ? () => toggleSection(thread.id, backtraceLine.id)
+                    : undefined}
+                  on:keydown={backtraceLine.hasSection
+                    ? (e) =>
+                        e.key === "Enter" &&
+                        toggleSection(thread.id, backtraceLine.id)
+                    : undefined}
+                  role={backtraceLine.hasSection ? "button" : undefined}
+                  tabindex={backtraceLine.hasSection ? "0" : undefined}
+                >
+                  <span class="indent">{backtraceLine.parsed.indent}</span
+                  >{#if backtraceLine.hasSection}
+                    <span class="collapse-indicator">
+                      {backtraceLine.sectionCollapsed ? "▶" : "▼"}
+                    </span>
+                  {/if}{#if backtraceLine.parsed.sampleCount}<span
+                      class="sample-count"
+                      >{backtraceLine.parsed.sampleCount}</span
+                    >
+                  {/if}<span class="content"
+                    >{backtraceLine.parsed.content}</span
                   >
-                {/if}<span class="content">{backtraceLine.parsed.content}</span>
-              </div>
+                </div>
+              {/if}
             {/each}
           </div>
         </div>

src/app.css

@@ -127,20 +127,28 @@ body {
 
 .backtrace-line {
   margin: 2px 0;
-  cursor: pointer;
   padding: 1px 0;
+  cursor: default;
+}
+
+.backtrace-line.has-section {
+  cursor: pointer;
 }
 
-.backtrace-line:hover {
+.backtrace-line.has-section:hover {
   background-color: #f0f8ff;
 }
 
-.backtrace-line.collapsed {
-  color: #666;
+.collapse-indicator {
+  color: #3498db;
+  font-size: 10px;
+  margin-right: 4px;
+  font-weight: bold;
+  user-select: none;
 }
 
-.backtrace-line.collapsed .content {
-  display: none;
+.backtrace-line.section-collapsed .collapse-indicator {
+  color: #95a5a6;
 }
 
 .backtrace-line .indent {