src/App.svelte

<script>
  import { onMount } from "svelte";

  let fileInput;
  let backtraceData = "";
  let threads = [];
  let filteredThreads = [];
  let filterText = "";
  let visibleThreads = new Set();

  // Parse the backtrace file format
  function parseBacktraceFile(content) {
    const lines = content.split("\n");
    const parsedThreads = [];
    let currentThread = null;
    let currentBacktrace = [];

    for (let i = 0; i < lines.length; i++) {
      const line = lines[i];

      // Simpler approach: look for lines containing "Thread_" with numbers at the start
      if (line.includes("Thread_") && /^\s*\d+\s+Thread_\d+/.test(line)) {
        // Save previous thread if exists
        if (currentThread) {
          currentThread.backtrace = currentBacktrace;
          currentThread.collapsibleBacktrace =
            createCollapsibleBacktrace(currentBacktrace);
          parsedThreads.push(currentThread);
        }

        // Extract sample count and thread ID
        const sampleMatch = line.match(/^\s*(\d+)\s+(Thread_\d+)/);
        const sampleCount = sampleMatch[1];
        const threadId = sampleMatch[2];

        // Extract thread name (everything after the first colon, before parentheses)
        let threadName = "";
        const colonIndex = line.indexOf(":");
        if (colonIndex !== -1) {
          const afterColon = line.substring(colonIndex + 1);
          const parenIndex = afterColon.indexOf("(");
          threadName = (
            parenIndex !== -1 ? afterColon.substring(0, parenIndex) : afterColon
          ).trim();
        }

        currentThread = {
          id: threadId,
          name: threadName,
          fullName: threadName || threadId,
          sampleCount: parseInt(sampleCount),
          rawHeader: line.trim(),
          backtrace: [],
          expanded: false,
          collapsibleBacktrace: null, // Will be created after backtrace is complete
        };
        currentBacktrace = [];
      } else if (currentThread && line.trim()) {
        // This is part of the backtrace
        currentBacktrace.push(line);
      }
      // Skip empty lines
    }

    // Don't forget the last thread
    if (currentThread) {
      currentThread.backtrace = currentBacktrace;
      currentThread.collapsibleBacktrace =
        createCollapsibleBacktrace(currentBacktrace);
      parsedThreads.push(currentThread);
    }

    return parsedThreads;
  }

  // Toggle thread visibility
  function toggleThread(threadId) {
    console.log("🔄 Toggling thread:", threadId);
    // Create a new array with updated thread to trigger Svelte reactivity
    threads = threads.map((thread) => {
      if (thread.id === threadId) {
        const newThread = { ...thread, expanded: !thread.expanded };
        console.log(
          "📊 Thread expanded:",
          newThread.expanded,
          "backtrace lines:",
          newThread.backtrace.length
        );
        return newThread;
      }
      return thread;
    });
  }

  // Handle file upload
  function handleFileUpload(event) {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        backtraceData = e.target.result;
        threads = parseBacktraceFile(backtraceData);
      };
      reader.readAsText(file);
    }
  }

  // Load sample file on mount
  onMount(async () => {
    try {
      const response = await fetch("/sample.txt");
      if (response.ok) {
        backtraceData = await response.text();
        threads = parseBacktraceFile(backtraceData);
        console.log("✅ Loaded", threads.length, "threads successfully");
      }
    } catch (error) {
      console.error("Could not load sample.txt:", error);
    }
  });

  // Parse individual backtrace lines for better display
  function parseBacktraceLine(line) {
    // Extract indentation
    const indentMatch = line.match(/^(\s*[\+\!\:\|]*\s*)/);
    const indent = indentMatch ? indentMatch[1] : "";
    const content = line.substring(indent.length);

    // Try to extract sample count, function name, and address
    const parts = {
      indent,
      content,
      original: line,
    };

    // Extract sample count if at beginning
    const sampleMatch = content.match(/^(\d+)\s+(.+)/);
    if (sampleMatch) {
      parts.sampleCount = sampleMatch[1];
      parts.content = sampleMatch[2];
    }

    return parts;
  }

  // Create collapsible backtrace structure
  function createCollapsibleBacktrace(backtrace) {
    return backtrace.map((line, index) => ({
      id: index,
      line,
      parsed: parseBacktraceLine(line),
      collapsed: false,
    }));
  }

  // Toggle backtrace line collapse
  function toggleBacktraceLine(threadId, lineIndex) {
    threads = threads.map((thread) => {
      if (thread.id === threadId && thread.collapsibleBacktrace) {
        const updatedBacktrace = [...thread.collapsibleBacktrace];
        updatedBacktrace[lineIndex] = {
          ...updatedBacktrace[lineIndex],
          collapsed: !updatedBacktrace[lineIndex].collapsed,
        };
        return { ...thread, collapsibleBacktrace: updatedBacktrace };
      }
      return thread;
    });
  }

  // Reactive updates - run filter when threads OR filterText changes
  $: filteredThreads = threads.filter(
    (thread) =>
      !filterText.trim() ||
      thread.fullName.toLowerCase().startsWith(filterText.toLowerCase())
  );
</script>

<div class="header">
  <h1>🔍 Backtrace Viewer</h1>
  <div class="controls">
    <label for="fileInput" class="file-label"> 📁 Load Backtrace File </label>
    <input
      type="file"
      id="fileInput"
      class="file-input"
      accept=".txt"
      on:change={handleFileUpload}
      bind:this={fileInput}
    />

    <input
      type="text"
      class="filter-input"
      placeholder="Filter threads by name prefix..."
      bind:value={filterText}
    />

    <div class="stats">
      {filteredThreads.length} / {threads.length} threads
    </div>
  </div>
</div>

{#if threads.length === 0}
  <div class="no-threads">
    <p>No backtrace data loaded. Upload a file to get started.</p>
  </div>
{:else}
  {#each filteredThreads as thread (thread.id)}
    <div class="thread-container">
      <div
        class="thread-header"
        on:click={() => toggleThread(thread.id)}
        on:keydown={(e) => e.key === "Enter" && toggleThread(thread.id)}
        role="button"
        tabindex="0"
      >
        <div class="thread-title">
          <strong>{thread.sampleCount}</strong>
          {thread.id}
          {#if thread.name}
            : <span style="color: #3498db;">{thread.name}</span>
          {/if}
        </div>
        <div class="toggle-indicator" class:expanded={thread.expanded}>▶</div>
      </div>

      {#if thread.expanded}
        <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}<span class="content">{backtraceLine.parsed.content}</span>
              </div>
            {/each}
          </div>
        </div>
      {/if}
    </div>
  {/each}
{/if}