Doc/_static/tachyon-example-heatmap.html - main - githubmirror/cpython

Doc/_static/tachyon-example-heatmap.html
3 804 строки365 KB
Pablo Galindo Salgado
gh-138122: Add some screenshots to the profiling.sampling docs (#142676)
14 дек 2025, 20:43
14 дек 2025, 20:43e4d3c83
<!doctype html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>/tmp/tachyon_selfcontained.py - Heatmap</title>
    <style>
/* ==========================================================================
   Python Profiler - Shared CSS Foundation
   Design system shared between Flamegraph and Heatmap viewers
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Variables & Theme System
   -------------------------------------------------------------------------- */

:root {
  /* Typography */
  --font-sans: "Source Sans Pro", "Lucida Grande", "Lucida Sans Unicode",
               "Geneva", "Verdana", sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Consolas', 'Liberation Mono', monospace;

  /* Python brand colors (theme-independent) */
  --python-blue: #3776ab;
  --python-blue-light: #4584bb;
  --python-blue-lighter: #5592cc;
  --python-gold: #ffd43b;
  --python-gold-dark: #ffcd02;
  --python-gold-light: #ffdc5c;

  /* Heat palette - defined per theme below */

  /* Layout */
  --sidebar-width: 280px;
  --sidebar-collapsed: 44px;
  --topbar-height: 56px;
  --statusbar-height: 32px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.3s ease;
}

/* Light theme (default) */
:root, [data-theme="light"] {
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  --border: #e9ecef;
  --border-subtle: #f0f2f5;

  --text-primary: #2e3338;
  --text-secondary: #5a6c7d;
  --text-muted: #6f767e;

  --accent: #3776ab;
  --accent-hover: #2d5aa0;
  --accent-glow: rgba(55, 118, 171, 0.15);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

  --header-gradient: linear-gradient(135deg, #3776ab 0%, #4584bb 100%);

  /* Light mode heat palette - blue to yellow to orange to red (cold to hot) */
  --heat-1: #7ba3d1;
  --heat-2: #a8d0ef;
  --heat-3: #d6e9f8;
  --heat-4: #ffe6a8;
  --heat-5: #ffd43b;
  --heat-6: #ffb84d;
  --heat-7: #ff9966;
  --heat-8: #ff6347;

  /* Code view specific */
  --code-bg: #ffffff;
  --code-bg-line: #f8f9fa;
  --code-border: #e9ecef;
  --code-text: #2e3338;
  --code-text-muted: #8b949e;
  --code-accent: #3776ab;

  /* Navigation colors */
  --nav-caller: #2563eb;
  --nav-caller-hover: #1d4ed8;
  --nav-callee: #dc2626;
  --nav-callee-hover: #b91c1c;

  /* Specialization status colors */
  --spec-high: #4caf50;
  --spec-high-text: #2e7d32;
  --spec-high-bg: rgba(76, 175, 80, 0.15);
  --spec-medium: #ff9800;
  --spec-medium-text: #e65100;
  --spec-medium-bg: rgba(255, 152, 0, 0.15);
  --spec-low: #9e9e9e;
  --spec-low-text: #616161;
  --spec-low-bg: rgba(158, 158, 158, 0.15);

  /* Heatmap span highlighting colors */
  --span-hot-base: 255, 100, 50;
  --span-cold-base: 150, 150, 150;
}

/* Dark theme */
[data-theme="dark"] {
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #21262d;
  --border: #30363d;
  --border-subtle: #21262d;

  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-muted: #757e8a;

  --accent: #58a6ff;
  --accent-hover: #79b8ff;
  --accent-glow: rgba(88, 166, 255, 0.15);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

  --header-gradient: linear-gradient(135deg, #21262d 0%, #30363d 100%);

  /* Dark mode heat palette - muted colors that provide sufficient contrast with light text */
  --heat-1: rgba(74, 123, 167, 0.35);
  --heat-2: rgba(90, 159, 168, 0.38);
  --heat-3: rgba(106, 181, 181, 0.40);
  --heat-4: rgba(126, 196, 136, 0.42);
  --heat-5: rgba(160, 216, 120, 0.45);
  --heat-6: rgba(196, 222, 106, 0.48);
  --heat-7: rgba(244, 212, 77, 0.50);
  --heat-8: rgba(255, 107, 53, 0.55);

  /* Code view specific - dark mode */
  --code-bg: #0d1117;
  --code-bg-line: #161b22;
  --code-border: #30363d;
  --code-text: #e6edf3;
  --code-text-muted: #6e7681;
  --code-accent: #58a6ff;

  /* Navigation colors - dark theme friendly */
  --nav-caller: #58a6ff;
  --nav-caller-hover: #4184e4;
  --nav-callee: #f87171;
  --nav-callee-hover: #e53e3e;

  /* Specialization status colors - dark theme */
  --spec-high: #81c784;
  --spec-high-text: #81c784;
  --spec-high-bg: rgba(129, 199, 132, 0.2);
  --spec-medium: #ffb74d;
  --spec-medium-text: #ffb74d;
  --spec-medium-bg: rgba(255, 183, 77, 0.2);
  --spec-low: #bdbdbd;
  --spec-low-text: #9e9e9e;
  --spec-low-bg: rgba(189, 189, 189, 0.15);

  /* Heatmap span highlighting colors - dark theme */
  --span-hot-base: 255, 107, 53;
  --span-cold-base: 189, 189, 189;
}

/* --------------------------------------------------------------------------
   Base Styles
   -------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background var(--transition-normal), color var(--transition-normal);
}

/* --------------------------------------------------------------------------
   Layout Structure
   -------------------------------------------------------------------------- */

.app-layout {
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   Top Bar
   -------------------------------------------------------------------------- */

.top-bar {
  height: var(--topbar-height);
  background: var(--header-gradient);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(55, 118, 171, 0.25);
  border-bottom: 2px solid var(--python-gold);
}

/* Brand / Logo */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
  text-decoration: none;
  flex-shrink: 0;
}

.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 40px;
  flex-shrink: 0;
}

/* Style the inlined SVG/img inside brand-logo */
.brand-logo svg,
.brand-logo img {
  width: 48px;
  height: 40px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.brand-info {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-text {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  color: inherit;
  text-decoration: none;
}

.brand-subtitle {
  font-weight: 500;
  font-size: 10px;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.brand-divider {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.3);
}

/* Toolbar */
.toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 15px;
  color: white;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.toolbar-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
}

.toolbar-btn:active {
  transform: scale(0.95);
}

/* --------------------------------------------------------------------------
   Status Bar
   -------------------------------------------------------------------------- */

.status-bar {
  height: var(--statusbar-height);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.status-item::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--python-gold);
  border-radius: 50%;
}

.status-item:first-child::before {
  display: none;
}

.status-label {
  color: var(--text-muted);
}

.status-value {
  color: var(--text-primary);
  font-weight: 500;
}

.status-value.accent {
  color: var(--accent);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* --------------------------------------------------------------------------
   Focus States (Accessibility)
   -------------------------------------------------------------------------- */

button:focus-visible,
select:focus-visible,
input:focus-visible,
.toggle-switch:focus-visible,
a.toolbar-btn:focus-visible {
  outline: 2px solid var(--python-gold);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Shared Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .brand-subtitle {
    display: none;
  }
}

@media (max-width: 600px) {
  .toolbar-btn:not(.theme-toggle) {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Toggle Switch
   -------------------------------------------------------------------------- */

.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-sans);
  transition: opacity var(--transition-fast);
  flex-shrink: 0;
}

.toggle-switch:hover {
  opacity: 0.85;
}

.toggle-switch .toggle-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  transition: color var(--transition-fast);
  white-space: nowrap;
  display: inline-flex;
  flex-direction: column;
}

.toggle-switch .toggle-label.active {
  color: var(--text-primary);
  font-weight: 600;
}

/* Reserve space for bold text to prevent layout shift on toggle */
.toggle-switch .toggle-label::after {
  content: attr(data-text);
  font-weight: 600;
  height: 0;
  visibility: hidden;
}

.toggle-switch.disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

.toggle-track {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--bg-tertiary);
  border: 2px solid var(--border);
  border-radius: 12px;
  transition: all var(--transition-fast);
  box-shadow: inset var(--shadow-sm);
}

.toggle-track:hover {
  border-color: var(--text-muted);
}

.toggle-track.on {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
}

.toggle-track::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  background: white;
  border-radius: 50%;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.toggle-track.on::after {
  transform: translateX(16px);
  box-shadow: var(--shadow-md);
}


/* ==========================================================================
   Heatmap Viewer - Component-Specific CSS

   DEPENDENCY: Requires _shared_assets/base.css to be loaded first
   This file extends the shared foundation with heatmap-specific styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Layout Overrides (Heatmap-specific)
   -------------------------------------------------------------------------- */

.app-layout {
  min-height: 100vh;
}

/* Sticky top bar for heatmap views */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* --------------------------------------------------------------------------
   Main Content Area
   -------------------------------------------------------------------------- */

.main-content {
  flex: 1;
  padding: 24px 3%;
  width: 100%;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Stats Summary Cards - Enhanced with Icons & Animations
   -------------------------------------------------------------------------- */

.stats-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  transition: all var(--transition-fast);
  animation: slideUp 0.5s ease-out backwards;
  animation-delay: calc(var(--i, 0) * 0.08s);
  position: relative;
  overflow: hidden;
}

.stat-card:nth-child(1) { --i: 0; --card-color: 55, 118, 171; }
.stat-card:nth-child(2) { --i: 1; --card-color: 40, 167, 69; }
.stat-card:nth-child(3) { --i: 2; --card-color: 255, 193, 7; }
.stat-card:nth-child(4) { --i: 3; --card-color: 111, 66, 193; }
.stat-card:nth-child(5) { --i: 4; --card-color: 220, 53, 69; }
.stat-card:nth-child(6) { --i: 5; --card-color: 23, 162, 184; }

.stat-card:hover {
  border-color: rgba(var(--card-color), 0.6);
  background: linear-gradient(135deg, rgba(var(--card-color), 0.08) 0%, var(--bg-primary) 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(var(--card-color), 0.15);
}

.stat-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: linear-gradient(135deg, rgba(var(--card-color), 0.15) 0%, rgba(var(--card-color), 0.05) 100%);
  border: 1px solid rgba(var(--card-color), 0.2);
  border-radius: 10px;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.stat-card:hover .stat-icon {
  transform: scale(1.05) rotate(-2deg);
  background: linear-gradient(135deg, rgba(var(--card-color), 0.25) 0%, rgba(var(--card-color), 0.1) 100%);
}

.stat-data {
  flex: 1;
  min-width: 0;
}

.stat-value {
  font-family: var(--font-mono);
  font-size: 1.35em;
  font-weight: 800;
  color: rgb(var(--card-color));
  display: block;
  line-height: 1.1;
  letter-spacing: -0.3px;
}

.stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: 2px;
}

/* Sparkline decoration for stats */
.stat-sparkline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  opacity: 0.1;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(var(--card-color), 0.3) 100%
  );
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Rate Cards (Error Rate, Missed Samples) with Progress Bars
   -------------------------------------------------------------------------- */

.rate-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-primary);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  transition: all var(--transition-fast);
  animation: slideUp 0.5s ease-out backwards;
  position: relative;
  overflow: hidden;
}

.rate-card:nth-child(5) { animation-delay: 0.32s; --rate-color: 220, 53, 69; }
.rate-card:nth-child(6) { animation-delay: 0.40s; --rate-color: 255, 152, 0; }

.rate-card:hover {
  border-color: rgba(var(--rate-color), 0.5);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--rate-color), 0.15);
}

.rate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rate-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.rate-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: linear-gradient(135deg, rgba(var(--rate-color), 0.15) 0%, rgba(var(--rate-color), 0.05) 100%);
  border: 1px solid rgba(var(--rate-color), 0.2);
  border-radius: 10px;
  flex-shrink: 0;
}

.rate-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.rate-value {
  font-family: var(--font-mono);
  font-size: 1.4em;
  font-weight: 800;
  color: rgb(var(--rate-color));
}

.rate-bar {
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.rate-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s ease-out;
  position: relative;
  overflow: hidden;
}

.rate-fill.error {
  background: linear-gradient(90deg, #dc3545 0%, #ff6b6b 100%);
}

.rate-fill.warning {
  background: linear-gradient(90deg, #ff9800 0%, #ffc107 100%);
}

.rate-fill.good {
  background: linear-gradient(90deg, #28a745 0%, #20c997 100%);
}

/* Shimmer animation on rate bars */
.rate-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  animation: shimmer 2.5s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Section Headers
   -------------------------------------------------------------------------- */

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--python-gold);
}

.section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  flex: 1;
}

/* --------------------------------------------------------------------------
   Filter Controls
   -------------------------------------------------------------------------- */

.filter-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 16px;
}

.control-btn {
  padding: 8px 16px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.control-btn:hover {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* --------------------------------------------------------------------------
   Type Sections (stdlib, project, etc)
   -------------------------------------------------------------------------- */

.type-section {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}

.type-header {
  padding: 12px 16px;
  background: var(--header-gradient);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  transition: all var(--transition-fast);
  font-weight: 600;
}

.type-header:hover {
  opacity: 0.95;
}

.type-icon {
  font-size: 12px;
  transition: transform var(--transition-fast);
  min-width: 12px;
}

.type-title {
  font-size: 14px;
  flex: 1;
}

.type-stats {
  font-size: 12px;
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.15);
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--font-mono);
}

.type-content {
  padding: 12px;
}

/* --------------------------------------------------------------------------
   Folder Nodes (hierarchical structure)
   -------------------------------------------------------------------------- */

.folder-node {
  margin-bottom: 6px;
}

.folder-header {
  padding: 8px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
  transition: all var(--transition-fast);
}

.folder-header:hover {
  background: var(--accent-glow);
  border-color: var(--accent);
}

.folder-icon {
  font-size: 10px;
  color: var(--accent);
  transition: transform var(--transition-fast);
  min-width: 12px;
}

.folder-name {
  flex: 1;
  font-weight: 500;
  color: var(--text-primary);
  font-size: 13px;
}

.folder-stats {
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
}

.folder-content {
  padding-left: 20px;
  margin-top: 6px;
}

/* --------------------------------------------------------------------------
   File Items
   -------------------------------------------------------------------------- */

.files-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  transition: all var(--transition-fast);
}

.file-item:hover {
  background: var(--bg-secondary);
  border-color: var(--border);
}

.file-item .file-link {
  flex: 1;
  min-width: 0;
  font-size: 13px;
}

.file-samples {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
  white-space: nowrap;
  width: 130px;
  flex-shrink: 0;
  text-align: right;
  font-family: var(--font-mono);
}

.heatmap-bar-container {
  width: 120px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.heatmap-bar {
  flex-shrink: 0;
  border-radius: 2px;
}

/* Links */
.file-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.file-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Module Badges
   -------------------------------------------------------------------------- */

.module-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}

.badge-stdlib {
  background: rgba(40, 167, 69, 0.15);
  color: #28a745;
}

.badge-site-packages {
  background: rgba(0, 123, 255, 0.15);
  color: #007bff;
}

.badge-project {
  background: rgba(255, 193, 7, 0.2);
  color: #d39e00;
}

.badge-other {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

[data-theme="dark"] .badge-stdlib {
  background: rgba(40, 167, 69, 0.25);
  color: #5dd879;
}

[data-theme="dark"] .badge-site-packages {
  background: rgba(88, 166, 255, 0.25);
  color: #79b8ff;
}

[data-theme="dark"] .badge-project {
  background: rgba(255, 212, 59, 0.25);
  color: #ffd43b;
}

/* ==========================================================================
   FILE VIEW STYLES (Code Display)
   ========================================================================== */

.code-view {
  font-family: var(--font-mono);
  min-height: 100vh;
}

/* Code Header (Top Bar for file view) */
.code-header {
  height: var(--topbar-height);
  background: var(--header-gradient);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 16px;
  box-shadow: 0 2px 10px rgba(55, 118, 171, 0.25);
  border-bottom: 2px solid var(--python-gold);
  position: sticky;
  top: 0;
  z-index: 100;
}

.code-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 94%;
  max-width: 100%;
  margin: 0 auto;
}

.code-header h1 {
  font-size: 14px;
  font-weight: 600;
  color: white;
  margin: 0;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* File Stats Bar */
.file-stats {
  background: var(--bg-secondary);
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
}

.file-stats .stats-grid {
  width: 94%;
  max-width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.stat-item {
  background: var(--bg-primary);
  padding: 12px;
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  border: 1px solid var(--border);
  transition: all var(--transition-fast);
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--accent);
}

.stat-item .stat-value {
  font-size: 1.4em;
  font-weight: 700;
  color: var(--accent);
}

.stat-item .stat-label {
  color: var(--text-muted);
  font-size: 10px;
  margin-top: 2px;
}

/* Legend */
.legend {
  background: var(--bg-secondary);
  padding: 12px 24px;
  border-bottom: 1px solid var(--border);
}

.legend-content {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
}

.legend-separator {
  width: 1px;
  height: 24px;
  background: var(--border);
  flex-shrink: 0;
}

.legend-title {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 13px;
  font-family: var(--font-sans);
  flex-shrink: 0;
}

.legend-gradient {
  width: 150px;
  flex-shrink: 0;
  height: 20px;
  background: linear-gradient(90deg,
    var(--bg-tertiary) 0%,
    var(--heat-2) 25%,
    var(--heat-4) 50%,
    var(--heat-6) 75%,
    var(--heat-8) 100%
  );
  border-radius: 4px;
  border: 1px solid var(--border);
}

.legend-labels {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-sans);
  flex-shrink: 0;
}

/* Legend Controls Group - wraps toggles and bytecode button together */
.legend-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Heatmap-Specific Toggle Overrides */
#toggle-color-mode .toggle-track.on {
  background: #8e44ad;
  border-color: #8e44ad;
  box-shadow: 0 0 8px rgba(142, 68, 173, 0.3);
}

#toggle-cold .toggle-track.on {
  background: #e67e22;
  border-color: #e67e22;
  box-shadow: 0 0 8px rgba(230, 126, 34, 0.3);
}

/* Code Container */
.code-container {
  width: 94%;
  max-width: 100%;
  margin: 16px auto;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px 8px 8px 8px;
  box-shadow: var(--shadow-sm);
  /* Allow horizontal scroll for long lines, but don't clip sticky header */
}

/* Code Header Row */
.code-header-row {
  position: sticky;
  top: var(--topbar-height);
  z-index: 50;
  display: flex;
  background: var(--bg-secondary);
  border-bottom: 2px solid var(--border);
  font-weight: 700;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 8px 8px 0 0;
}

.header-line-number {
  flex-shrink: 0;
  width: 60px;
  padding: 8px 10px;
  text-align: right;
  border-right: 1px solid var(--border);
}

.header-samples-self,
.header-samples-cumulative {
  flex-shrink: 0;
  width: 90px;
  padding: 8px 10px;
  text-align: right;
  border-right: 1px solid var(--border);
}

.header-samples-self {
  color: var(--heat-8);
}

.header-samples-cumulative {
  color: var(--accent);
}

.header-content {
  flex: 1;
  padding: 8px 15px;
}

/* Code Lines */
.code-line {
  position: relative;
  display: flex;
  min-height: 20px;
  line-height: 20px;
  font-size: 13px;
  transition: background var(--transition-fast);
  scroll-margin-top: calc(var(--topbar-height) + 50px);
}

.code-line:hover {
  filter: brightness(0.97);
}

[data-theme="dark"] .code-line:hover {
  filter: brightness(1.1);
}

.line-number {
  flex-shrink: 0;
  width: 60px;
  padding: 0 10px;
  text-align: right;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  user-select: none;
  transition: all var(--transition-fast);
}

.line-number:hover {
  background: var(--accent);
  color: white;
  cursor: pointer;
}

.line-samples-self,
.line-samples-cumulative {
  flex-shrink: 0;
  width: 90px;
  padding: 0 10px;
  text-align: right;
  background: var(--bg-secondary);
  border-right: 1px solid var(--border);
  font-weight: 600;
  user-select: none;
  font-size: 12px;
}

.line-samples-self {
  color: var(--heat-8);
}

.line-samples-cumulative {
  color: var(--accent);
}

.line-content {
  flex: 1;
  padding: 0 15px;
  white-space: pre;
  overflow-x: auto;
}

/* Scrollbar Styling */
.line-content::-webkit-scrollbar {
  height: 6px;
}

.line-content::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.line-content::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Navigation Buttons */
.line-nav-buttons {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
  align-items: center;
}

.nav-btn {
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: var(--bg-primary);
  color: var(--accent);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
  line-height: 1;
}

.nav-btn:hover:not(:disabled) {
  background: var(--accent);
  color: white;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.nav-btn:active:not(:disabled) {
  transform: translateY(0);
}

.nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border-color: var(--border);
}

.nav-btn.caller {
  color: var(--nav-caller);
  border-color: var(--nav-caller);
}

.nav-btn.callee {
  color: var(--nav-callee);
  border-color: var(--nav-callee);
}

.nav-btn.caller:hover:not(:disabled) {
  background: var(--nav-caller-hover);
  color: white;
}

.nav-btn.callee:hover:not(:disabled) {
  background: var(--nav-callee-hover);
  color: white;
}

/* Highlighted target line */
.code-line:target {
  animation: highlight-line 2s ease-out;
}

@keyframes highlight-line {
  0% {
    background: rgba(255, 212, 59, 0.6) !important;
    outline: 3px solid var(--python-gold);
    outline-offset: -3px;
  }
  50% {
    background: rgba(255, 212, 59, 0.5) !important;
    outline: 3px solid var(--python-gold);
    outline-offset: -3px;
  }
  100% {
    outline: 3px solid transparent;
    outline-offset: -3px;
  }
}

/* Popup menu for multiple callees */
.callee-menu {
  position: absolute;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 1000;
  min-width: 250px;
  max-width: 400px;
  max-height: 300px;
  overflow-y: auto;
}

.callee-menu-header {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-family: var(--font-sans);
}

.callee-menu-item {
  padding: 8px;
  margin: 4px 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.callee-menu-item:hover {
  background: var(--bg-secondary);
}

.callee-menu-func {
  font-weight: 500;
  color: var(--accent);
  font-size: 12px;
}

.callee-menu-file {
  font-size: 11px;
  color: var(--text-muted);
}

.count-badge {
  display: inline-block;
  background: var(--accent);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 600;
  margin-left: 6px;
}

/* Callee menu scrollbar */
.callee-menu::-webkit-scrollbar {
  width: 6px;
}

.callee-menu::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 3px;
}

.callee-menu::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Scroll Minimap Marker
   -------------------------------------------------------------------------- */

#scroll_marker {
  position: fixed;
  z-index: 1000;
  right: 0;
  top: 0;
  width: 12px;
  height: 100%;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border);
  pointer-events: none;
}

#scroll_marker .marker {
  position: absolute;
  min-height: 3px;
  width: 100%;
  pointer-events: none;
}

#scroll_marker .marker.cold {
  background: var(--heat-1);
}

#scroll_marker .marker.cool {
  background: var(--heat-2);
}

#scroll_marker .marker.mild {
  background: var(--heat-3);
}

#scroll_marker .marker.warm {
  background: var(--heat-4);
}

#scroll_marker .marker.hot {
  background: var(--heat-5);
}

#scroll_marker .marker.very-hot {
  background: var(--heat-6);
}

#scroll_marker .marker.intense {
  background: var(--heat-7);
}

#scroll_marker .marker.extreme {
  background: var(--heat-8);
}

/* --------------------------------------------------------------------------
   Responsive (Heatmap-specific)
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .stats-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .legend-content {
    flex-wrap: wrap;
    justify-content: center;
  }

  .legend-controls {
    margin-left: 0;
  }
}

@media (max-width: 900px) {
  .main-content {
    padding: 16px;
  }
}

@media (max-width: 600px) {
  .stats-summary {
    grid-template-columns: 1fr;
  }

  .file-stats .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .legend-content {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .legend-gradient {
    width: 100%;
    max-width: none;
  }

  .legend-separator {
    width: 80%;
    height: 1px;
  }

  .legend-controls {
    flex-direction: column;
    gap: 12px;
  }

  .legend-controls .toggle-switch {
    justify-content: center;
  }

  .legend-controls .toggle-switch .toggle-label:first-child {
    width: 70px;
    text-align: right;
  }

  .legend-controls .toggle-switch .toggle-label:last-child {
    width: 90px;
    text-align: left;
  }

  /* Compact code columns on small screens */
  .header-line-number,
  .line-number {
    width: 40px;
  }

  .header-samples-self,
  .header-samples-cumulative,
  .line-samples-self,
  .line-samples-cumulative {
    width: 55px;
    font-size: 10px;
  }

  /* Adjust padding - headers need vertical, data rows don't */
  .header-line-number,
  .header-samples-self,
  .header-samples-cumulative {
    padding: 8px 4px;
  }

  .line-number,
  .line-samples-self,
  .line-samples-cumulative {
    padding: 0 4px;
  }
}

.bytecode-toggle {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0 4px;
  border: none;
  background: transparent;
  color: var(--code-accent);
  cursor: pointer;
  font-size: 10px;
  transition: transform var(--transition-fast), color var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bytecode-toggle:hover {
  color: var(--accent);
}

.bytecode-spacer {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0 4px;
}

.bytecode-panel {
  margin-left: 90px;
  padding: 8px 15px;
  background: var(--bg-secondary);
  border-left: 3px solid var(--accent);
  font-family: var(--font-mono);
  font-size: 12px;
  margin-bottom: 4px;
}

/* Specialization summary bar */
.bytecode-spec-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  margin-bottom: 10px;
  border-radius: var(--radius-sm);
  background: rgba(100, 100, 100, 0.1);
}

.bytecode-spec-summary .spec-pct {
  font-size: 1.4em;
  font-weight: 700;
}

.bytecode-spec-summary .spec-label {
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 0.5px;
}

.bytecode-spec-summary .spec-detail {
  color: var(--text-secondary);
  font-size: 0.9em;
  margin-left: auto;
}

.bytecode-spec-summary.high {
  background: var(--spec-high-bg);
  border-left: 3px solid var(--spec-high);
}
.bytecode-spec-summary.high .spec-pct,
.bytecode-spec-summary.high .spec-label {
  color: var(--spec-high-text);
}

.bytecode-spec-summary.medium {
  background: var(--spec-medium-bg);
  border-left: 3px solid var(--spec-medium);
}
.bytecode-spec-summary.medium .spec-pct,
.bytecode-spec-summary.medium .spec-label {
  color: var(--spec-medium-text);
}

.bytecode-spec-summary.low {
  background: var(--spec-low-bg);
  border-left: 3px solid var(--spec-low);
}
.bytecode-spec-summary.low .spec-pct,
.bytecode-spec-summary.low .spec-label {
  color: var(--spec-low-text);
}

.bytecode-header {
  display: grid;
  grid-template-columns: 1fr 80px 80px;
  gap: 12px;
  padding: 4px 8px;
  font-weight: 600;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--code-border);
  margin-bottom: 4px;
}

.bytecode-expand-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--bg-secondary);
  border: 1px solid var(--code-border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.bytecode-expand-all:hover,
.bytecode-expand-all.expanded {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.bytecode-expand-all .expand-icon {
  font-size: 10px;
  transition: transform var(--transition-fast);
}

.bytecode-expand-all.expanded .expand-icon {
  transform: rotate(90deg);
}

/* ========================================
   INSTRUCTION SPAN HIGHLIGHTING
   (triggered only from bytecode panel hover)
   ======================================== */

/* Highlight from bytecode panel hover */
.instr-span.highlight-from-bytecode {
  outline: 3px solid #ff6b6b !important;
  background-color: rgba(255, 107, 107, 0.4) !important;
  border-radius: 2px;
}

/* Bytecode instruction row */
.bytecode-instruction {
  display: grid;
  grid-template-columns: 1fr 80px 80px;
  gap: 12px;
  align-items: center;
  padding: 4px 8px;
  margin: 2px 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.bytecode-instruction:hover,
.bytecode-instruction.highlight {
  background-color: rgba(55, 118, 171, 0.15);
}

.bytecode-instruction[data-locations] {
  cursor: pointer;
}

.bytecode-instruction[data-locations]:hover {
  background-color: rgba(255, 107, 107, 0.2);
}

.bytecode-opname {
  font-weight: 600;
  font-family: var(--font-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bytecode-opname.specialized {
  color: #2e7d32;
}

[data-theme="dark"] .bytecode-opname.specialized {
  color: #81c784;
}

.bytecode-opname .base-op {
  color: var(--code-text-muted);
  font-weight: normal;
  font-size: 0.9em;
  margin-left: 4px;
}

.bytecode-samples {
  text-align: right;
  font-weight: 600;
  color: var(--accent);
  font-family: var(--font-mono);
}

.bytecode-samples.hot {
  color: #ff6b6b;
}

.bytecode-heatbar {
  width: 60px;
  height: 12px;
  background: var(--bg-secondary);
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--code-border);
}

.bytecode-heatbar-fill {
  height: 100%;
  background: linear-gradient(90deg, #00d4ff 0%, #ff6b00 100%);
}

.specialization-badge {
  display: inline-block;
  padding: 1px 6px;
  font-size: 0.75em;
  background: #e8f5e9;
  color: #2e7d32;
  border-radius: 3px;
  margin-left: 6px;
  font-weight: 600;
}

[data-theme="dark"] .specialization-badge {
  background: rgba(129, 199, 132, 0.2);
  color: #81c784;
}

.bytecode-empty {
  color: var(--code-text-muted);
  font-style: italic;
  padding: 8px;
}

.bytecode-error {
  color: #d32f2f;
  font-style: italic;
  padding: 8px;
}

/* ========================================
   SPAN TOOLTIPS
   ======================================== */

.span-tooltip {
  position: absolute;
  z-index: 10000;
  background: var(--bg-primary);
  color: var(--text-primary);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 12px;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  min-width: 160px;
  max-width: 300px;
}

.span-tooltip::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 7px 7px 0;
  border-style: solid;
  border-color: var(--bg-primary) transparent transparent;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

.span-tooltip-header {
  font-weight: 600;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}

.span-tooltip-header.hot {
  color: #e65100;
}

.span-tooltip-header.warm {
  color: #f59e0b;
}

.span-tooltip-header.cold {
  color: var(--text-muted);
}

.span-tooltip-row {
  display: flex;
  justify-content: space-between;
  margin: 4px 0;
  gap: 16px;
}

.span-tooltip-label {
  color: var(--text-secondary);
}

.span-tooltip-value {
  font-weight: 600;
  text-align: right;
  color: var(--text-primary);
}

.span-tooltip-value.highlight {
  color: var(--accent);
}

.span-tooltip-section {
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 11px;
  margin-top: 8px;
  margin-bottom: 4px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}

.span-tooltip-opcode {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-primary);
  background: var(--bg-secondary);
  padding: 3px 8px;
  margin: 2px 0;
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--accent);
}

</style>
</head>
<body class="code-view">
    <div class="app-layout">
        <!-- Top Bar (Code Header) -->
        <header class="top-bar">
            <div class="brand">
                <div class="brand-logo"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAhoAAAHDCAYAAABiYLNcAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAGYktHRAD/AP8A/6C9p5MA … [Строка слишком длинная. Вы можете скачать файл]
                <a href="https://docs.python.org/3.15/library/profiling.sampling.html#heatmap-format" class="brand-text">Tachyon</a>
                <span class="brand-divider"></span>
                <span class="brand-subtitle" style="font-family: var(--font-mono); font-size: 13px;">/tmp/tachyon_selfcontained.py</span>
            </div>
            <div class="toolbar">
                <a href="https://docs.python.org/3.15/library/profiling.sampling.html#heatmap-format" class="toolbar-btn" title="Back to Index" aria-label="Back to Index">
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293zM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5z"/>
                  </svg>
                </a>
                <a
                    class="toolbar-btn"
                    href="https://docs.python.org/3.15/library/profiling.sampling.html"
                    target="_blank"
                    title="Documentation"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783"/>
                  </svg>
                </a>
                <button
                    class="toolbar-btn theme-toggle"
                    onclick="toggleTheme()"
                    title="Toggle theme"
                    aria-label="Toggle theme"
                    id="theme-btn"
                >
                  <svg class="icon-moon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                    <path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278M4.858 1.311A7.27 7.27 0 0 0 1.025 7.71c0 4.02 3.279 7.276 7.319 7.276a7.32 7.32 0 0 0 5.205-2.162q-.506.063-1.029.063c-4.61 0-8.343-3.714-8.343-8.29 0-1.167.242-2.278.681-3.286"/>
                  </svg>
                  <svg class="icon-sun" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" style="display:none">
                    <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"/>
                  </svg>
                </button>
            </div>
        </header>

        <!-- File Stats Bar -->
        <div class="file-stats">
            <div class="stats-grid">
                <div class="stat-item">
                    <div class="stat-value">1,054</div>
                    <div class="stat-label">Self Samples</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">4,236</div>
                    <div class="stat-label">Cumulative</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">24</div>
                    <div class="stat-label">Lines Hit</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">100.00%</div>
                    <div class="stat-label">% of Total</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">206</div>
                    <div class="stat-label">Max Self</div>
                </div>
                <div class="stat-item">
                    <div class="stat-value">1054</div>
                    <div class="stat-label">Max Total</div>
                </div>
            </div>
        </div>

        <!-- Legend -->
        <div class="legend">
            <div class="legend-content">
                <span class="legend-title">Intensity:</span>
                <div class="legend-gradient"></div>
                <div class="legend-labels">
                    <span>Cold</span>
                    <span aria-hidden="true">→</span>
                    <span>Hot</span>
                </div>
                <div class="legend-separator" aria-hidden="true"></div>
                <div class="legend-controls">
                    <div class="toggle-switch" id="toggle-color-mode" title="Toggle between self time and total time coloring" tabindex="0">
                        <span class="toggle-label active" data-text="Self Time">Self Time</span>
                        <div class="toggle-track"></div>
                        <span class="toggle-label" data-text="Total Time">Total Time</span>
                    </div>
                    <div class="toggle-switch" id="toggle-cold" title="Toggle visibility of lines with zero samples" tabindex="0">
                        <span class="toggle-label active" data-text="Show All">Show All</span>
                        <div class="toggle-track"></div>
                        <span class="toggle-label" data-text="Hot Only">Hot Only</span>
                    </div>
                    <div class="toggle-switch" id="toggle-spec-view" title="Color lines by specialization level (requires bytecode data)" tabindex="0">
                        <span class="toggle-label active" data-text="Heat">Heat</span>
                        <div class="toggle-track"></div>
                        <span class="toggle-label" data-text="Specialization">Specialization</span>
                    </div>
                    <div class="legend-separator" aria-hidden="true"></div>
                    <button class="bytecode-expand-all" id="toggle-all-bytecode" title="Expand/collapse all bytecode panels (keyboard: b)">
                        <span class="expand-icon" aria-hidden="true">▶</span> Bytecode
                    </button>
                </div>
            </div>
        </div>

        <!-- Code Container -->
        <div class="code-container">
            <div class="code-header-row">
                <div class="header-line-number">Line</div>
                <div class="header-samples-self">Self</div>
                <div class="header-samples-cumulative">Total</div>
                <div class="header-content">Code</div>
            </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-1">
            <div class="line-number">1</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">&quot;&quot;&quot;</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-2">
            <div class="line-number">2</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">Tachyon Demo - Self-contained profiling example.</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-3">
            <div class="line-number">3</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">Pure Python with no external imports for clean heatmap output.</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-4">
            <div class="line-number">4</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">&quot;&quot;&quot;</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-5">
            <div class="line-number">5</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-6">
            <div class="line-number">6</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.130" data-cumulative-intensity="0.100" data-spec-color="rgba(0, 255, 0, 0.4)" id="line-7" title="Self: 1, Total: 1">
            <div class="line-number">7</div>
            <div class="line-samples-self">1</div>
            <div class="line-samples-cumulative">1</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 194, &quot;opname&quot;: &quot;RESUME_CHECK (RESUME)&quot;, &quot;base_opname&quot;: &quot;RESUME&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 1, &quot;locations&quot;: [{&quot;end_lineno&quot;: 7, &quot;col_offset&quot;: 0, &quot;end_col_offset&quot;: 0}]}]' data-spec-pct="100" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">def fibonacci(n):</div>
            
        </div>
        <div class="bytecode-panel" id="bytecode-7" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-8">
            <div class="line-number">8</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    &quot;&quot;&quot;Recursive fibonacci - creates deep call stacks.&quot;&quot;&quot;</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.260" data-cumulative-intensity="0.199" data-spec-color="rgba(222, 172, 86, 0.23249999999999998)" id="line-9" title="Self: 3, Total: 3">
            <div class="line-number">9</div>
            <div class="line-samples-self">3</div>
            <div class="line-samples-cumulative">3</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 86, &quot;opname&quot;: &quot;LOAD_FAST_BORROW&quot;, &quot;base_opname&quot;: &quot;LOAD_FAST_BORROW&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 1, &quot;locations&quot;: [{&quot;end_lineno&quot;: 9, &quot;col_offset&quot;: 7, &quot;end_col_offset&quot;: 8}]}, {&quot;opcode&quot;: 100, &quot;opname&quot;: &quot;POP_JUMP_IF_FALSE&quot;, &quot;base_opname&quot;: &quot;POP_JUMP_IF_FALSE&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 1, &quot;locations&quot;: [{&quot;end_lineno&quot;: 9, &quot;col_offset&quot;: 7, &quot;end_col_offset&quot;: 13}]}, {&quot;opcode&quot;: 167, &quot;opname&quot;: &quot;COMPARE_OP_INT (COMPARE_OP)&quot;, &quot;base_opname&quot;: &quot;COMPARE_OP&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 1, &quot;locations&quot;: [{&quot;end_lineno&quot;: 9, &quot;col_offset&quot;: 7, &quot;end_col_offset&quot;: 13}]}]' data-spec-pct="33" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">    if <span class="instr-span" data-col-start="7" data-col-end="8" data-samples="1" data-max-samples="2" data-pct="33" data-opcodes="LOAD_FAST_BORROW">n</span><span class="instr-span" data-col-start="7" data-col-end="13" data-samples="2" data-max-samples="2" data-pct="66" data-opcodes="POP_JUMP_IF_FALSE, COMPARE_OP_INT (COMPARE_OP)"> &lt;= 1</span>:</div>
            
        </div>
        <div class="bytecode-panel" id="bytecode-9" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.542" data-cumulative-intensity="0.415" data-spec-color="rgba(158, 158, 158, 0.15)" id="line-10" title="Self: 17, Total: 17">
            <div class="line-number">10</div>
            <div class="line-samples-self">17</div>
            <div class="line-samples-cumulative">17</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 35, &quot;opname&quot;: &quot;RETURN_VALUE&quot;, &quot;base_opname&quot;: &quot;RETURN_VALUE&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 17, &quot;locations&quot;: [{&quot;end_lineno&quot;: 10, &quot;col_offset&quot;: 8, &quot;end_col_offset&quot;: 16}]}, {&quot;opcode&quot;: 86, &quot;opname&quot;: &quot;LOAD_FAST_BORROW&quot;, &quot;base_opname&quot;: &quot;LOAD_FAST_BORROW&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 1, &quot;locations&quot;: [{&quot;end_lineno&quot;: 10, &quot;col_offset&quot;: 15, &quot;end_col_offset&quot;: 16}]}]' data-spec-pct="0" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">        <span class="instr-span" data-col-start="8" data-col-end="16" data-samples="17" data-max-samples="17" data-pct="94" data-opcodes="RETURN_VALUE">return </span><span class="instr-span" data-col-start="15" data-col-end="16" data-samples="1" data-max-samples="17" data-pct="5" data-opcodes="LOAD_FAST_BORROW">n</span></div>
            <div class="line-nav-buttons"><button class="nav-btn caller" data-nav-multi='[{&quot;file&quot;: &quot;tachyon_selfcontained.py&quot;, &quot;func&quot;: &quot;fibonacci&quot;, &quot;count&quot;: 4170, &quot;link&quot;: &quot;#line-11&quot;}, {&quot;file&quot;: &quot;tachyon_selfcontained.py&quot;, &quot;func&quot;: &quot;compute_heavy&quot;, &quot;count&quot;: 227, &quot;link&quot;: &quot;#line-78&quot;}]' title="2 callers (4,397 samples)">▲</button><button class="nav-btn callee" data-nav='{&quot;link&quot;: &quot;#line-10&quot;, &quot;func&quot;: &quot;fibonacci&quot;}' title="Go to callee: fibonacci (1 samples)">▼</button></div>
        </div>
        <div class="bytecode-panel" id="bytecode-10" style="display:none;"></div>
        <div class="code-line" data-self-intensity="1.000" data-cumulative-intensity="0.780" data-spec-color="rgba(5, 253, 1, 0.39749999999999996)" id="line-11" title="Self: 206, Total: 227">
            <div class="line-number">11</div>
            <div class="line-samples-self">206</div>
            <div class="line-samples-cumulative">227</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 161, &quot;opname&quot;: &quot;CALL_PY_EXACT_ARGS (CALL)&quot;, &quot;base_opname&quot;: &quot;CALL&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 4315, &quot;locations&quot;: [{&quot;end_lineno&quot;: 11, &quot;col_offset&quot;: 30, &quot;end_col_offset&quot;: 46}, {&quot;end_lineno&quot;: 11, &quot;col_offset&quot;: 11, &quot;end_col_offset&quot;: 27}]}, {&quot;opcode&quot;: 35, &quot;opname&quot;: &quot;RETURN_VALUE&quot;, &quot;base_opname&quot;: &quot;RETURN_VALUE&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 32, &quot;locations&quot;: [{&quot;end_lineno&quot;: 11, &quot;col_offset&quot;: 4, &quot;end_col_offset&quot;: 46}]}, {&quot;opcode&quot;: 191, &quot;opname&quot;: &quot;LOAD_GLOBAL_MODULE (LOAD_GLOBAL)&quot;, &quot;base_opname&quot;: &quot;LOAD_GLOBAL&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 14, &quot;locations&quot;: [{&quot;end_lineno&quot;: 11, &quot;col_offset&quot;: 30, &quot;end_col_offset&quot;: 39}, {&quot;end_lineno&quot;: 11, &quot;col_offset&quot;: 11, &quot;end_col_offset&quot;: 20}]}, {&quot;opcode&quot;: 86, &quot;opname&quot;: &quot;LOAD_FAST_BORROW&quot;, &quot;base_opname&quot;: &quot;LOAD_FAST_BORROW&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 8, &quot;locations&quot;: [{&quot;end_lineno&quot;: 11, &quot;col_offset&quot;: 21, &quot;end_col_offset&quot;: 22}]}, {&quot;opcode&quot;: 142, &quot;opname&quot;: &quot;BINARY_OP_SUBTRACT_INT (BINARY_OP)&quot;, &quot;base_opname&quot;: &quot;BINARY_OP&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 4, &quot;locations&quot;: [{&quot;end_lineno&quot;: 11, &quot;col_offset&quot;: 21, &quot;end_col_offset&quot;: 26}, {&quot;end_lineno&quot;: 11, &quot;col_offset&quot;: 40, &quot;end_col_offset&quot;: 45}]}, {&quot;opcode&quot;: 130, &quot;opname&quot;: &quot;BINARY_OP_ADD_INT (BINARY_OP)&quot;, &quot;base_opname&quot;: &quot;BINARY_OP&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 2, &quot;locations&quot;: [{&quot;end_lineno&quot;: 11, &quot;col_offset&quot;: 11, &quot;end_col_offset&quot;: 46}]}, {&quot;opcode&quot;: 94, &quot;opname&quot;: &quot;LOAD_SMALL_INT&quot;, &quot;base_opname&quot;: &quot;LOAD_SMALL_INT&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 1, &quot;locations&quot;: [{&quot;end_lineno&quot;: 11, &quot;col_offset&quot;: 25, &quot;end_col_offset&quot;: 26}]}]' data-spec-pct="99" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">    <span class="instr-span" data-col-start="4" data-col-end="46" data-samples="32" data-max-samples="4315" data-pct="0" data-opcodes="RETURN_VALUE">return </span><span class="instr-span" data-col-start="11" data-col-end="20" data-samples="14" data-max-samples="4315" data-pct="0" data-opcodes="LOAD_GLOBAL_MODULE (LOAD_GLOBAL)">fibonacci</span><span class="instr-span" data-col-start="11" data-col-end="27" data-samples="4315" data-max-samples="4315" data-pct="49" data-opcodes="CALL_PY_EXACT_ARGS (CALL)">(</span><span class="instr-span" data-col-start="21" data-col-end="22" data-samples="8" data-max-samples="4315" data-pct="0" data-opcodes="LOAD_FAST_BORROW">n</span><span class="instr-span" data-col-start="21" data-col-end="26" data-samples="4" data-max-samples="4315" data-pct="0" data-opcodes="BINARY_OP_SUBTRACT_INT (BINARY_OP)"> - </span><span class="instr-span" data-col-start="25" data-col-end="26" data-samples="1" data-max-samples="4315" data-pct="0" data-opcodes="LOAD_SMALL_INT">1</span><span class="instr-span" data-col-start="11" data-col-end="27" data-samples="4315" data-max-samples="4315" data-pct="49" data-opcodes="CALL_PY_EXACT_ARGS (CALL)">)</span><span class="instr-span" data-col-start="11" data-col-end="46" data-samples="2" data-max-samples="4315" data-pct="0" data-opcodes="BINARY_OP_ADD_INT (BINARY_OP)"> + </span><span class="instr-span" data-col-start="30" data-col-end="39" data-samples="14" data-max-samples="4315" data-pct="0" data-opcodes="LOAD_GLOBAL_MODULE (LOAD_GLOBAL)">fibonacci</span><span class="instr-span" data-col-start="30" data-col-end="46" data-samples="4315" data-max-samples="4315" data-pct="49" data-opcodes="CALL_PY_EXACT_ARGS (CALL)">(</span><span class="instr-span" data-col-start="40" data-col-end="45" data-samples="4" data-max-samples="4315" data-pct="0" data-opcodes="BINARY_OP_SUBTRACT_INT (BINARY_OP)">n - 2</span><span class="instr-span" data-col-start="30" data-col-end="46" data-samples="4315" data-max-samples="4315" data-pct="49" data-opcodes="CALL_PY_EXACT_ARGS (CALL)">)</span></div>
            <div class="line-nav-buttons"><button class="nav-btn callee" data-nav='{&quot;link&quot;: &quot;#line-10&quot;, &quot;func&quot;: &quot;fibonacci&quot;}' title="Go to callee: fibonacci (4,170 samples)">▼</button></div>
        </div>
        <div class="bytecode-panel" id="bytecode-11" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-12">
            <div class="line-number">12</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-13">
            <div class="line-number">13</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-14">
            <div class="line-number">14</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">def bubble_sort(arr):</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-15">
            <div class="line-number">15</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    &quot;&quot;&quot;Classic bubble sort - O(n^2) comparison sorting.&quot;&quot;&quot;</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-16">
            <div class="line-number">16</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    n = len(arr)</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-17">
            <div class="line-number">17</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    for i in range(n):</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.206" data-cumulative-intensity="0.158" data-spec-color="rgba(255, 180, 50, 0.275)" id="line-18" title="Self: 2, Total: 2">
            <div class="line-number">18</div>
            <div class="line-samples-self">2</div>
            <div class="line-samples-cumulative">2</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 112, &quot;opname&quot;: &quot;STORE_FAST&quot;, &quot;base_opname&quot;: &quot;STORE_FAST&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 1, &quot;locations&quot;: [{&quot;end_lineno&quot;: 18, &quot;col_offset&quot;: 12, &quot;end_col_offset&quot;: 13}]}, {&quot;opcode&quot;: 173, &quot;opname&quot;: &quot;FOR_ITER_RANGE (FOR_ITER)&quot;, &quot;base_opname&quot;: &quot;FOR_ITER&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 1, &quot;locations&quot;: [{&quot;end_lineno&quot;: 18, &quot;col_offset&quot;: 17, &quot;end_col_offset&quot;: 36}]}]' data-spec-pct="50" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">        for <span class="instr-span" data-col-start="12" data-col-end="13" data-samples="1" data-max-samples="1" data-pct="50" data-opcodes="STORE_FAST">j</span> in <span class="instr-span" data-col-start="17" data-col-end="36" data-samples="1" data-max-samples="1" data-pct="50" data-opcodes="FOR_ITER_RANGE (FOR_ITER)">range(0, n - i - 1)</span>:</div>
            
        </div>
        <div class="bytecode-panel" id="bytecode-18" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.412" data-cumulative-intensity="0.316" data-spec-color="rgba(255, 180, 50, 0.275)" id="line-19" title="Self: 8, Total: 8">
            <div class="line-number">19</div>
            <div class="line-samples-self">8</div>
            <div class="line-samples-cumulative">8</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 167, &quot;opname&quot;: &quot;COMPARE_OP_INT (COMPARE_OP)&quot;, &quot;base_opname&quot;: &quot;COMPARE_OP&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 3, &quot;locations&quot;: [{&quot;end_lineno&quot;: 19, &quot;col_offset&quot;: 15, &quot;end_col_offset&quot;: 34}]}, {&quot;opcode&quot;: 87, &quot;opname&quot;: &quot;LOAD_FAST_BORROW_LOAD_FAST_BORROW&quot;, &quot;base_opname&quot;: &quot;LOAD_FAST_BORROW_LOAD_FAST_BORROW&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 2, &quot;locations&quot;: [{&quot;end_lineno&quot;: 19, &quot;col_offset&quot;: 24, &quot;end_col_offset&quot;: 27}, {&quot;end_lineno&quot;: 19, &quot;col_offset&quot;: 15, &quot;end_col_offset&quot;: 18}]}, {&quot;opcode&quot;: 94, &quot;opname&quot;: &quot;LOAD_SMALL_INT&quot;, &quot;base_opname&quot;: &quot;LOAD_SMALL_INT&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 2, &quot;locations&quot;: [{&quot;end_lineno&quot;: 19, &quot;col_offset&quot;: 32, &quot;end_col_offset&quot;: 33}]}, {&quot;opcode&quot;: 137, &quot;opname&quot;: &quot;BINARY_OP_SUBSCR_LIST_INT (BINARY_OP)&quot;, &quot;base_opname&quot;: &quot;BINARY_OP&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 1, &quot;locations&quot;: [{&quot;end_lineno&quot;: 19, &quot;col_offset&quot;: 15, &quot;end_col_offset&quot;: 21}]}]' data-spec-pct="50" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">            if <span class="instr-span" data-col-start="15" data-col-end="18" data-samples="2" data-max-samples="3" data-pct="20" data-opcodes="LOAD_FAST_BORROW_LOAD_FAST_BORROW">arr</span><span class="instr-span" data-col-start="15" data-col-end="21" data-samples="1" data-max-samples="3" data-pct="10" data-opcodes="BINARY_OP_SUBSCR_LIST_INT (BINARY_OP)">[j]</span><span class="instr-span" data-col-start="15" data-col-end="34" data-samples="3" data-max-samples="3" data-pct="30" data-opcodes="COMPARE_OP_INT (COMPARE_OP)"> &gt; </span><span class="instr-span" data-col-start="24" data-col-end="27" data-samples="2" data-max-samples="3" data-pct="20" data-opcodes="LOAD_FAST_BORROW_LOAD_FAST_BORROW">arr</span><span class="instr-span" data-col-start="15" data-col-end="34" data-samples="3" data-max-samples="3" data-pct="30" data-opcodes="COMPARE_OP_INT (COMPARE_OP)">[j + </span><span class="instr-span" data-col-start="32" data-col-end="33" data-samples="2" data-max-samples="3" data-pct="20" data-opcodes="LOAD_SMALL_INT">1</span><span class="instr-span" data-col-start="15" data-col-end="34" data-samples="3" data-max-samples="3" data-pct="30" data-opcodes="COMPARE_OP_INT (COMPARE_OP)">]</span>:</div>
            <div class="line-nav-buttons"><button class="nav-btn caller" data-nav='{&quot;link&quot;: &quot;#line-90&quot;, &quot;func&quot;: &quot;data_processing&quot;}' title="Go to caller: data_processing (12 samples)">▲</button></div>
        </div>
        <div class="bytecode-panel" id="bytecode-19" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.206" data-cumulative-intensity="0.158" data-spec-color="rgba(0, 255, 0, 0.4)" id="line-20" title="Self: 2, Total: 2">
            <div class="line-number">20</div>
            <div class="line-samples-self">2</div>
            <div class="line-samples-cumulative">2</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 137, &quot;opname&quot;: &quot;BINARY_OP_SUBSCR_LIST_INT (BINARY_OP)&quot;, &quot;base_opname&quot;: &quot;BINARY_OP&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 2, &quot;locations&quot;: [{&quot;end_lineno&quot;: 20, &quot;col_offset&quot;: 37, &quot;end_col_offset&quot;: 47}]}]' data-spec-pct="100" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">                arr[j], arr[j + 1] = <span class="instr-span" data-col-start="37" data-col-end="47" data-samples="2" data-max-samples="2" data-pct="100" data-opcodes="BINARY_OP_SUBSCR_LIST_INT (BINARY_OP)">arr[j + 1]</span>, arr[j]</div>
            
        </div>
        <div class="bytecode-panel" id="bytecode-20" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-21">
            <div class="line-number">21</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    return arr</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-22">
            <div class="line-number">22</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-23">
            <div class="line-number">23</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-24">
            <div class="line-number">24</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">def matrix_multiply(a, b):</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-25">
            <div class="line-number">25</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    &quot;&quot;&quot;Matrix multiplication using nested loops.&quot;&quot;&quot;</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-26">
            <div class="line-number">26</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    rows_a, cols_a = len(a), len(a[0])</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-27">
            <div class="line-number">27</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    rows_b, cols_b = len(b), len(b[0])</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-28">
            <div class="line-number">28</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    result = [[0] * cols_b for _ in range(rows_a)]</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-29">
            <div class="line-number">29</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-30">
            <div class="line-number">30</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    for i in range(rows_a):</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-31">
            <div class="line-number">31</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">        for j in range(cols_b):</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.412" data-cumulative-intensity="0.316" data-spec-color="rgba(229, 174, 78, 0.2425)" id="line-32" title="Self: 8, Total: 8">
            <div class="line-number">32</div>
            <div class="line-samples-self">8</div>
            <div class="line-samples-cumulative">8</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 112, &quot;opname&quot;: &quot;STORE_FAST&quot;, &quot;base_opname&quot;: &quot;STORE_FAST&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 5, &quot;locations&quot;: [{&quot;end_lineno&quot;: 32, &quot;col_offset&quot;: 16, &quot;end_col_offset&quot;: 17}]}, {&quot;opcode&quot;: 173, &quot;opname&quot;: &quot;FOR_ITER_RANGE (FOR_ITER)&quot;, &quot;base_opname&quot;: &quot;FOR_ITER&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 3, &quot;locations&quot;: [{&quot;end_lineno&quot;: 32, &quot;col_offset&quot;: 21, &quot;end_col_offset&quot;: 34}]}]' data-spec-pct="37" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">            for <span class="instr-span" data-col-start="16" data-col-end="17" data-samples="5" data-max-samples="5" data-pct="62" data-opcodes="STORE_FAST">k</span> in <span class="instr-span" data-col-start="21" data-col-end="34" data-samples="3" data-max-samples="5" data-pct="37" data-opcodes="FOR_ITER_RANGE (FOR_ITER)">range(cols_a)</span>:</div>
            
        </div>
        <div class="bytecode-panel" id="bytecode-32" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.777" data-cumulative-intensity="0.595" data-spec-color="rgba(117, 220, 23, 0.3425)" id="line-33" title="Self: 62, Total: 62">
            <div class="line-number">33</div>
            <div class="line-samples-self">62</div>
            <div class="line-samples-cumulative">62</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 137, &quot;opname&quot;: &quot;BINARY_OP_SUBSCR_LIST_INT (BINARY_OP)&quot;, &quot;base_opname&quot;: &quot;BINARY_OP&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 26, &quot;locations&quot;: [{&quot;end_lineno&quot;: 33, &quot;col_offset&quot;: 42, &quot;end_col_offset&quot;: 46}, {&quot;end_lineno&quot;: 33, &quot;col_offset&quot;: 42, &quot;end_col_offset&quot;: 49}, {&quot;end_lineno&quot;: 33, &quot;col_offset&quot;: 32, &quot;end_col_offset&quot;: 36}, {&quot;end_lineno&quot;: 33, &quot;col_offset&quot;: 32, &quot;end_col_offset&quot;: 39}, {&quot;end_lineno&quot;: 33, &quot;col_offset&quot;: 16, &quot;end_col_offset&quot;: 28}]}, {&quot;opcode&quot;: 130, &quot;opname&quot;: &quot;BINARY_OP_ADD_INT (BINARY_OP)&quot;, &quot;base_opname&quot;: &quot;BINARY_OP&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 11, &quot;locations&quot;: [{&quot;end_lineno&quot;: 33, &quot;col_offset&quot;: 16, &quot;end_col_offset&quot;: 49}]}, {&quot;opcode&quot;: 134, &quot;opname&quot;: &quot;BINARY_OP_MULTIPLY_INT (BINARY_OP)&quot;, &quot;base_opname&quot;: &quot;BINARY_OP&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 8, &quot;locations&quot;: [{&quot;end_lineno&quot;: 33, &quot;col_offset&quot;: 32, &quot;end_col_offset&quot;: 49}]}, {&quot;opcode&quot;: 117, &quot;opname&quot;: &quot;SWAP&quot;, &quot;base_opname&quot;: &quot;SWAP&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 5, &quot;locations&quot;: [{&quot;end_lineno&quot;: 33, &quot;col_offset&quot;: 16, &quot;end_col_offset&quot;: 28}]}, {&quot;opcode&quot;: 59, &quot;opname&quot;: &quot;COPY&quot;, &quot;base_opname&quot;: &quot;COPY&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 4, &quot;locations&quot;: [{&quot;end_lineno&quot;: 33, &quot;col_offset&quot;: 16, &quot;end_col_offset&quot;: 28}]}, {&quot;opcode&quot;: 86, &quot;opname&quot;: &quot;LOAD_FAST_BORROW&quot;, &quot;base_opname&quot;: &quot;LOAD_FAST_BORROW&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 3, &quot;locations&quot;: [{&quot;end_lineno&quot;: 33, &quot;col_offset&quot;: 37, &quot;end_col_offset&quot;: 38}, {&quot;end_lineno&quot;: 33, &quot;col_offset&quot;: 47, &quot;end_col_offset&quot;: 48}]}, {&quot;opcode&quot;: 87, &quot;opname&quot;: &quot;LOAD_FAST_BORROW_LOAD_FAST_BORROW&quot;, &quot;base_opname&quot;: &quot;LOAD_FAST_BORROW_LOAD_FAST_BORROW&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 2, &quot;locations&quot;: [{&quot;end_lineno&quot;: 33, &quot;col_offset&quot;: 42, &quot;end_col_offset&quot;: 43}, {&quot;end_lineno&quot;: 33, &quot;col_offset&quot;: 32, &quot;end_col_offset&quot;: 33}]}, {&quot;opcode&quot;: 200, &quot;opname&quot;: &quot;STORE_SUBSCR_LIST_INT (STORE_SUBSCR)&quot;, &quot;base_opname&quot;: &quot;STORE_SUBSCR&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 2, &quot;locations&quot;: [{&quot;end_lineno&quot;: 33, &quot;col_offset&quot;: 16, &quot;end_col_offset&quot;: 28}]}, {&quot;opcode&quot;: 176, &quot;opname&quot;: &quot;JUMP_BACKWARD_NO_JIT (JUMP_BACKWARD)&quot;, &quot;base_opname&quot;: &quot;JUMP_BACKWARD&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 1, &quot;locations&quot;: [{&quot;end_lineno&quot;: 33, &quot;col_offset&quot;: 16, &quot;end_col_offset&quot;: 28}]}]' data-spec-pct="77" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">                <span class="instr-span" data-col-start="16" data-col-end="28" data-samples="38" data-max-samples="38" data-pct="22" data-opcodes="BINARY_OP_SUBSCR_LIST_INT (BINARY_OP), SWAP, COPY +2 more">result[i][j]</span><span class="instr-span" data-col-start="16" data-col-end="49" data-samples="11" data-max-samples="38" data-pct="6" data-opcodes="BINARY_OP_ADD_INT (BINARY_OP)"> += </span><span class="instr-span" data-col-start="32" data-col-end="33" data-samples="2" data-max-samples="38" data-pct="1" data-opcodes="LOAD_FAST_BORROW_LOAD_FAST_BORROW">a</span><span class="instr-span" data-col-start="32" data-col-end="36" data-samples="26" data-max-samples="38" data-pct="15" data-opcodes="BINARY_OP_SUBSCR_LIST_INT (BINARY_OP)">[i]</span><span class="instr-span" data-col-start="32" data-col-end="39" data-samples="26" data-max-samples="38" data-pct="15" data-opcodes="BINARY_OP_SUBSCR_LIST_INT (BINARY_OP)">[</span><span class="instr-span" data-col-start="37" data-col-end="38" data-samples="3" data-max-samples="38" data-pct="1" data-opcodes="LOAD_FAST_BORROW">k</span><span class="instr-span" data-col-start="32" data-col-end="39" data-samples="26" data-max-samples="38" data-pct="15" data-opcodes="BINARY_OP_SUBSCR_LIST_INT (BINARY_OP)">]</span><span class="instr-span" data-col-start="32" data-col-end="49" data-samples="8" data-max-samples="38" data-pct="4" data-opcodes="BINARY_OP_MULTIPLY_INT (BINARY_OP)"> * </span><span class="instr-span" data-col-start="42" data-col-end="43" data-samples="2" data-max-samples="38" data-pct="1" data-opcodes="LOAD_FAST_BORROW_LOAD_FAST_BORROW">b</span><span class="instr-span" data-col-start="42" data-col-end="46" data-samples="26" data-max-samples="38" data-pct="15" data-opcodes="BINARY_OP_SUBSCR_LIST_INT (BINARY_OP)">[k]</span><span class="instr-span" data-col-start="42" data-col-end="49" data-samples="26" data-max-samples="38" data-pct="15" data-opcodes="BINARY_OP_SUBSCR_LIST_INT (BINARY_OP)">[</span><span class="instr-span" data-col-start="47" data-col-end="48" data-samples="3" data-max-samples="38" data-pct="1" data-opcodes="LOAD_FAST_BORROW">j</span><span class="instr-span" data-col-start="42" data-col-end="49" data-samples="26" data-max-samples="38" data-pct="15" data-opcodes="BINARY_OP_SUBSCR_LIST_INT (BINARY_OP)">]</span></div>
            <div class="line-nav-buttons"><button class="nav-btn caller" data-nav='{&quot;link&quot;: &quot;#line-78&quot;, &quot;func&quot;: &quot;compute_heavy&quot;}' title="Go to caller: compute_heavy (70 samples)">▲</button></div>
        </div>
        <div class="bytecode-panel" id="bytecode-33" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-34">
            <div class="line-number">34</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    return result</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-35">
            <div class="line-number">35</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-36">
            <div class="line-number">36</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-37">
            <div class="line-number">37</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">def prime_sieve(limit):</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-38">
            <div class="line-number">38</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    &quot;&quot;&quot;Sieve of Eratosthenes - find all primes up to limit.&quot;&quot;&quot;</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-39">
            <div class="line-number">39</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    is_prime = [True] * (limit + 1)</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-40">
            <div class="line-number">40</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    is_prime[0] = is_prime[1] = False</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-41">
            <div class="line-number">41</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-42">
            <div class="line-number">42</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    for num in range(2, int(limit ** 0.5) + 1):</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-43">
            <div class="line-number">43</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">        if is_prime[num]:</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.130" data-cumulative-intensity="0.100" data-spec-color="rgba(0, 255, 0, 0.4)" id="line-44" title="Self: 1, Total: 1">
            <div class="line-number">44</div>
            <div class="line-samples-self">1</div>
            <div class="line-samples-cumulative">1</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 173, &quot;opname&quot;: &quot;FOR_ITER_RANGE (FOR_ITER)&quot;, &quot;base_opname&quot;: &quot;FOR_ITER&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 1, &quot;locations&quot;: [{&quot;end_lineno&quot;: 44, &quot;col_offset&quot;: 28, &quot;end_col_offset&quot;: 60}]}]' data-spec-pct="100" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">            for multiple in <span class="instr-span" data-col-start="28" data-col-end="60" data-samples="1" data-max-samples="1" data-pct="100" data-opcodes="FOR_ITER_RANGE (FOR_ITER)">range(num * num, limit + 1, num)</span>:</div>
            <div class="line-nav-buttons"><button class="nav-btn caller" data-nav='{&quot;link&quot;: &quot;#line-78&quot;, &quot;func&quot;: &quot;compute_heavy&quot;}' title="Go to caller: compute_heavy (3 samples)">▲</button></div>
        </div>
        <div class="bytecode-panel" id="bytecode-44" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-45">
            <div class="line-number">45</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">                is_prime[multiple] = False</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-46">
            <div class="line-number">46</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.206" data-cumulative-intensity="0.158" data-spec-color="rgba(158, 158, 158, 0.15)" id="line-47" title="Self: 2, Total: 2">
            <div class="line-number">47</div>
            <div class="line-samples-self">2</div>
            <div class="line-samples-cumulative">2</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 70, &quot;opname&quot;: &quot;FOR_ITER&quot;, &quot;base_opname&quot;: &quot;FOR_ITER&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 2, &quot;locations&quot;: [{&quot;end_lineno&quot;: 47, &quot;col_offset&quot;: 34, &quot;end_col_offset&quot;: 53}]}]' data-spec-pct="0" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">    return [num for num, prime in <span class="instr-span" data-col-start="34" data-col-end="53" data-samples="2" data-max-samples="2" data-pct="100" data-opcodes="FOR_ITER">enumerate(is_prime)</span> if prime]</div>
            
        </div>
        <div class="bytecode-panel" id="bytecode-47" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-48">
            <div class="line-number">48</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-49">
            <div class="line-number">49</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-50">
            <div class="line-number">50</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">def string_processing(iterations):</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-51">
            <div class="line-number">51</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    &quot;&quot;&quot;String operations - concatenation and formatting.&quot;&quot;&quot;</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-52">
            <div class="line-number">52</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    for _ in range(iterations):</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-53">
            <div class="line-number">53</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">        result = &quot;&quot;</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-54">
            <div class="line-number">54</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">        for i in range(50):</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.848" data-cumulative-intensity="0.650" data-spec-color="rgba(239, 176, 67, 0.255)" id="line-55" title="Self: 91, Total: 91">
            <div class="line-number">55</div>
            <div class="line-samples-self">91</div>
            <div class="line-samples-cumulative">91</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 3, &quot;opname&quot;: &quot;BINARY_OP_INPLACE_ADD_UNICODE (BINARY_OP)&quot;, &quot;base_opname&quot;: &quot;BINARY_OP&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 39, &quot;locations&quot;: [{&quot;end_lineno&quot;: 55, &quot;col_offset&quot;: 12, &quot;end_col_offset&quot;: 34}]}, {&quot;opcode&quot;: 12, &quot;opname&quot;: &quot;FORMAT_SIMPLE&quot;, &quot;base_opname&quot;: &quot;FORMAT_SIMPLE&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 32, &quot;locations&quot;: [{&quot;end_lineno&quot;: 55, &quot;col_offset&quot;: 29, &quot;end_col_offset&quot;: 32}]}, {&quot;opcode&quot;: 50, &quot;opname&quot;: &quot;BUILD_STRING&quot;, &quot;base_opname&quot;: &quot;BUILD_STRING&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 15, &quot;locations&quot;: [{&quot;end_lineno&quot;: 55, &quot;col_offset&quot;: 22, &quot;end_col_offset&quot;: 34}]}, {&quot;opcode&quot;: 82, &quot;opname&quot;: &quot;LOAD_CONST&quot;, &quot;base_opname&quot;: &quot;LOAD_CONST&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 4, &quot;locations&quot;: [{&quot;end_lineno&quot;: 55, &quot;col_offset&quot;: 24, &quot;end_col_offset&quot;: 29}, {&quot;end_lineno&quot;: 55, &quot;col_offset&quot;: 32, &quot;end_col_offset&quot;: 33}]}, {&quot;opcode&quot;: 86, &quot;opname&quot;: &quot;LOAD_FAST_BORROW&quot;, &quot;base_opname&quot;: &quot;LOAD_FAST_BORROW&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 1, &quot;locations&quot;: [{&quot;end_lineno&quot;: 55, &quot;col_offset&quot;: 12, &quot;end_col_offset&quot;: 18}]}]' data-spec-pct="42" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">            <span class="instr-span" data-col-start="12" data-col-end="18" data-samples="1" data-max-samples="39" data-pct="1" data-opcodes="LOAD_FAST_BORROW">result</span><span class="instr-span" data-col-start="12" data-col-end="34" data-samples="39" data-max-samples="39" data-pct="41" data-opcodes="BINARY_OP_INPLACE_ADD_UNICODE (BINARY_OP)"> += </span><span class="instr-span" data-col-start="22" data-col-end="34" data-samples="15" data-max-samples="39" data-pct="15" data-opcodes="BUILD_STRING">f&quot;</span><span class="instr-span" data-col-start="24" data-col-end="29" data-samples="4" data-max-samples="39" data-pct="4" data-opcodes="LOAD_CONST">item_</span><span class="instr-span" data-col-start="29" data-col-end="32" data-samples="32" data-max-samples="39" data-pct="33" data-opcodes="FORMAT_SIMPLE">{i}</span><span class="instr-span" data-col-start="32" data-col-end="33" data-samples="4" data-max-samples="39" data-pct="4" data-opcodes="LOAD_CONST">_</span><span class="instr-span" data-col-start="22" data-col-end="34" data-samples="15" data-max-samples="39" data-pct="15" data-opcodes="BUILD_STRING">&quot;</span></div>
            <div class="line-nav-buttons"><button class="nav-btn caller" data-nav='{&quot;link&quot;: &quot;#line-90&quot;, &quot;func&quot;: &quot;data_processing&quot;}' title="Go to caller: data_processing (123 samples)">▲</button></div>
        </div>
        <div class="bytecode-panel" id="bytecode-55" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.588" data-cumulative-intensity="0.450" data-spec-color="rgba(163, 207, 31, 0.32)" id="line-56" title="Self: 22, Total: 22">
            <div class="line-number">56</div>
            <div class="line-samples-self">22</div>
            <div class="line-samples-cumulative">22</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 157, &quot;opname&quot;: &quot;CALL_METHOD_DESCRIPTOR_FAST_WITH_KEYWORDS (CALL)&quot;, &quot;base_opname&quot;: &quot;CALL&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 15, &quot;locations&quot;: [{&quot;end_lineno&quot;: 56, &quot;col_offset&quot;: 16, &quot;end_col_offset&quot;: 33}]}, {&quot;opcode&quot;: 112, &quot;opname&quot;: &quot;STORE_FAST&quot;, &quot;base_opname&quot;: &quot;STORE_FAST&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 7, &quot;locations&quot;: [{&quot;end_lineno&quot;: 56, &quot;col_offset&quot;: 8, &quot;end_col_offset&quot;: 13}]}]' data-spec-pct="68" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">        <span class="instr-span" data-col-start="8" data-col-end="13" data-samples="7" data-max-samples="15" data-pct="31" data-opcodes="STORE_FAST">parts</span> = <span class="instr-span" data-col-start="16" data-col-end="33" data-samples="15" data-max-samples="15" data-pct="68" data-opcodes="CALL_METHOD_DESCRIPTOR_FAST_WITH_KEYWORDS (CALL)">result.split(&quot;_&quot;)</span></div>
            
        </div>
        <div class="bytecode-panel" id="bytecode-56" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.450" data-cumulative-intensity="0.344" data-spec-color="rgba(0, 255, 0, 0.4)" id="line-57" title="Self: 10, Total: 10">
            <div class="line-number">57</div>
            <div class="line-samples-self">10</div>
            <div class="line-samples-cumulative">10</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 159, &quot;opname&quot;: &quot;CALL_METHOD_DESCRIPTOR_O (CALL)&quot;, &quot;base_opname&quot;: &quot;CALL&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 10, &quot;locations&quot;: [{&quot;end_lineno&quot;: 57, &quot;col_offset&quot;: 17, &quot;end_col_offset&quot;: 32}]}]' data-spec-pct="100" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">        joined = <span class="instr-span" data-col-start="17" data-col-end="32" data-samples="10" data-max-samples="10" data-pct="100" data-opcodes="CALL_METHOD_DESCRIPTOR_O (CALL)">&quot;-&quot;.join(parts)</span></div>
            
        </div>
        <div class="bytecode-panel" id="bytecode-57" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-58">
            <div class="line-number">58</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-59">
            <div class="line-number">59</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-60">
            <div class="line-number">60</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">def list_operations(iterations):</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-61">
            <div class="line-number">61</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    &quot;&quot;&quot;List comprehensions and operations.&quot;&quot;&quot;</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-62">
            <div class="line-number">62</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    for _ in range(iterations):</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.896" data-cumulative-intensity="0.687" data-spec-color="rgba(206, 169, 104, 0.2125)" id="line-63" title="Self: 118, Total: 118">
            <div class="line-number">63</div>
            <div class="line-samples-self">118</div>
            <div class="line-samples-cumulative">118</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 44, &quot;opname&quot;: &quot;BINARY_OP&quot;, &quot;base_opname&quot;: &quot;BINARY_OP&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 54, &quot;locations&quot;: [{&quot;end_lineno&quot;: 63, &quot;col_offset&quot;: 19, &quot;end_col_offset&quot;: 25}]}, {&quot;opcode&quot;: 173, &quot;opname&quot;: &quot;FOR_ITER_RANGE (FOR_ITER)&quot;, &quot;base_opname&quot;: &quot;FOR_ITER&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 26, &quot;locations&quot;: [{&quot;end_lineno&quot;: 63, &quot;col_offset&quot;: 35, &quot;end_col_offset&quot;: 45}]}, {&quot;opcode&quot;: 78, &quot;opname&quot;: &quot;LIST_APPEND&quot;, &quot;base_opname&quot;: &quot;LIST_APPEND&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 13, &quot;locations&quot;: [{&quot;end_lineno&quot;: 63, &quot;col_offset&quot;: 19, &quot;end_col_offset&quot;: 25}]}, {&quot;opcode&quot;: 112, &quot;opname&quot;: &quot;STORE_FAST&quot;, &quot;base_opname&quot;: &quot;STORE_FAST&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 10, &quot;locations&quot;: [{&quot;end_lineno&quot;: 63, &quot;col_offset&quot;: 8, &quot;end_col_offset&quot;: 15}]}, {&quot;opcode&quot;: 113, &quot;opname&quot;: &quot;STORE_FAST_LOAD_FAST&quot;, &quot;base_opname&quot;: &quot;STORE_FAST_LOAD_FAST&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 9, &quot;locations&quot;: [{&quot;end_lineno&quot;: 63, &quot;col_offset&quot;: 30, &quot;end_col_offset&quot;: 31}]}, {&quot;opcode&quot;: 176, &quot;opname&quot;: &quot;JUMP_BACKWARD_NO_JIT (JUMP_BACKWARD)&quot;, &quot;base_opname&quot;: &quot;JUMP_BACKWARD&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 4, &quot;locations&quot;: [{&quot;end_lineno&quot;: 63, &quot;col_offset&quot;: 19, &quot;end_col_offset&quot;: 25}]}, {&quot;opcode&quot;: 94, &quot;opname&quot;: &quot;LOAD_SMALL_INT&quot;, &quot;base_opname&quot;: &quot;LOAD_SMALL_INT&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 2, &quot;locations&quot;: [{&quot;end_lineno&quot;: 63, &quot;col_offset&quot;: 24, &quot;end_col_offset&quot;: 25}]}]' data-spec-pct="25" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">        <span class="instr-span" data-col-start="8" data-col-end="15" data-samples="10" data-max-samples="71" data-pct="8" data-opcodes="STORE_FAST">squares</span> = [<span class="instr-span" data-col-start="19" data-col-end="25" data-samples="71" data-max-samples="71" data-pct="60" data-opcodes="BINARY_OP, LIST_APPEND, JUMP_BACKWARD_NO_JIT (JUMP_BACKWARD)">x ** </span><span class="instr-span" data-col-start="24" data-col-end="25" data-samples="2" data-max-samples="71" data-pct="1" data-opcodes="LOAD_SMALL_INT">2</span> for <span class="instr-span" data-col-start="30" data-col-end="31" data-samples="9" data-max-samples="71" data-pct="7" data-opcodes="STORE_FAST_LOAD_FAST">x</span> in <span class="instr-span" data-col-start="35" data-col-end="45" data-samples="26" data-max-samples="71" data-pct="22" data-opcodes="FOR_ITER_RANGE (FOR_ITER)">range(500)</span>]</div>
            
        </div>
        <div class="bytecode-panel" id="bytecode-63" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.898" data-cumulative-intensity="0.688" data-spec-color="rgba(206, 169, 104, 0.2125)" id="line-64" title="Self: 119, Total: 119">
            <div class="line-number">64</div>
            <div class="line-samples-self">119</div>
            <div class="line-samples-cumulative">119</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 44, &quot;opname&quot;: &quot;BINARY_OP&quot;, &quot;base_opname&quot;: &quot;BINARY_OP&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 48, &quot;locations&quot;: [{&quot;end_lineno&quot;: 64, &quot;col_offset&quot;: 39, &quot;end_col_offset&quot;: 44}]}, {&quot;opcode&quot;: 167, &quot;opname&quot;: &quot;COMPARE_OP_INT (COMPARE_OP)&quot;, &quot;base_opname&quot;: &quot;COMPARE_OP&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 16, &quot;locations&quot;: [{&quot;end_lineno&quot;: 64, &quot;col_offset&quot;: 39, &quot;end_col_offset&quot;: 49}]}, {&quot;opcode&quot;: 94, &quot;opname&quot;: &quot;LOAD_SMALL_INT&quot;, &quot;base_opname&quot;: &quot;LOAD_SMALL_INT&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 13, &quot;locations&quot;: [{&quot;end_lineno&quot;: 64, &quot;col_offset&quot;: 43, &quot;end_col_offset&quot;: 44}, {&quot;end_lineno&quot;: 64, &quot;col_offset&quot;: 48, &quot;end_col_offset&quot;: 49}]}, {&quot;opcode&quot;: 172, &quot;opname&quot;: &quot;FOR_ITER_LIST (FOR_ITER)&quot;, &quot;base_opname&quot;: &quot;FOR_ITER&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 13, &quot;locations&quot;: [{&quot;end_lineno&quot;: 64, &quot;col_offset&quot;: 28, &quot;end_col_offset&quot;: 35}]}, {&quot;opcode&quot;: 112, &quot;opname&quot;: &quot;STORE_FAST&quot;, &quot;base_opname&quot;: &quot;STORE_FAST&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 12, &quot;locations&quot;: [{&quot;end_lineno&quot;: 64, &quot;col_offset&quot;: 8, &quot;end_col_offset&quot;: 13}]}, {&quot;opcode&quot;: 113, &quot;opname&quot;: &quot;STORE_FAST_LOAD_FAST&quot;, &quot;base_opname&quot;: &quot;STORE_FAST_LOAD_FAST&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 6, &quot;locations&quot;: [{&quot;end_lineno&quot;: 64, &quot;col_offset&quot;: 23, &quot;end_col_offset&quot;: 24}]}, {&quot;opcode&quot;: 86, &quot;opname&quot;: &quot;LOAD_FAST_BORROW&quot;, &quot;base_opname&quot;: &quot;LOAD_FAST_BORROW&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 4, &quot;locations&quot;: [{&quot;end_lineno&quot;: 64, &quot;col_offset&quot;: 17, &quot;end_col_offset&quot;: 18}]}, {&quot;opcode&quot;: 78, &quot;opname&quot;: &quot;LIST_APPEND&quot;, &quot;base_opname&quot;: &quot;LIST_APPEND&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 3, &quot;locations&quot;: [{&quot;end_lineno&quot;: 64, &quot;col_offset&quot;: 17, &quot;end_col_offset&quot;: 18}]}, {&quot;opcode&quot;: 103, &quot;opname&quot;: &quot;POP_JUMP_IF_TRUE&quot;, &quot;base_opname&quot;: &quot;POP_JUMP_IF_TRUE&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 2, &quot;locations&quot;: [{&quot;end_lineno&quot;: 64, &quot;col_offset&quot;: 17, &quot;end_col_offset&quot;: 18}]}, {&quot;opcode&quot;: 16, &quot;opname&quot;: &quot;GET_ITER&quot;, &quot;base_opname&quot;: &quot;GET_ITER&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 1, &quot;locations&quot;: [{&quot;end_lineno&quot;: 64, &quot;col_offset&quot;: 28, &quot;end_col_offset&quot;: 35}]}, {&quot;opcode&quot;: 176, &quot;opname&quot;: &quot;JUMP_BACKWARD_NO_JIT (JUMP_BACKWARD)&quot;, &quot;base_opname&quot;: &quot;JUMP_BACKWARD&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 1, &quot;locations&quot;: [{&quot;end_lineno&quot;: 64, &quot;col_offset&quot;: 17, &quot;end_col_offset&quot;: 18}]}]' data-spec-pct="25" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">        <span class="instr-span" data-col-start="8" data-col-end="13" data-samples="12" data-max-samples="48" data-pct="9" data-opcodes="STORE_FAST">evens</span> = [<span class="instr-span" data-col-start="17" data-col-end="18" data-samples="10" data-max-samples="48" data-pct="7" data-opcodes="LOAD_FAST_BORROW, LIST_APPEND, POP_JUMP_IF_TRUE +1 more">x</span> for <span class="instr-span" data-col-start="23" data-col-end="24" data-samples="6" data-max-samples="48" data-pct="4" data-opcodes="STORE_FAST_LOAD_FAST">x</span> in <span class="instr-span" data-col-start="28" data-col-end="35" data-samples="14" data-max-samples="48" data-pct="10" data-opcodes="FOR_ITER_LIST (FOR_ITER), GET_ITER">squares</span> if <span class="instr-span" data-col-start="39" data-col-end="44" data-samples="48" data-max-samples="48" data-pct="36" data-opcodes="BINARY_OP">x % </span><span class="instr-span" data-col-start="43" data-col-end="44" data-samples="13" data-max-samples="48" data-pct="9" data-opcodes="LOAD_SMALL_INT">2</span><span class="instr-span" data-col-start="39" data-col-end="49" data-samples="16" data-max-samples="48" data-pct="12" data-opcodes="COMPARE_OP_INT (COMPARE_OP)"> == </span><span class="instr-span" data-col-start="48" data-col-end="49" data-samples="13" data-max-samples="48" data-pct="9" data-opcodes="LOAD_SMALL_INT">0</span>]</div>
            <div class="line-nav-buttons"><button class="nav-btn caller" data-nav='{&quot;link&quot;: &quot;#line-90&quot;, &quot;func&quot;: &quot;data_processing&quot;}' title="Go to caller: data_processing (249 samples)">▲</button></div>
        </div>
        <div class="bytecode-panel" id="bytecode-64" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.481" data-cumulative-intensity="0.368" data-spec-color="rgba(0, 255, 0, 0.4)" id="line-65" title="Self: 12, Total: 12">
            <div class="line-number">65</div>
            <div class="line-samples-self">12</div>
            <div class="line-samples-cumulative">12</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 148, &quot;opname&quot;: &quot;CALL_BUILTIN_FAST_WITH_KEYWORDS (CALL)&quot;, &quot;base_opname&quot;: &quot;CALL&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 11, &quot;locations&quot;: [{&quot;end_lineno&quot;: 65, &quot;col_offset&quot;: 16, &quot;end_col_offset&quot;: 26}]}, {&quot;opcode&quot;: 176, &quot;opname&quot;: &quot;JUMP_BACKWARD_NO_JIT (JUMP_BACKWARD)&quot;, &quot;base_opname&quot;: &quot;JUMP_BACKWARD&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 1, &quot;locations&quot;: [{&quot;end_lineno&quot;: 65, &quot;col_offset&quot;: 8, &quot;end_col_offset&quot;: 13}]}]' data-spec-pct="100" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">        <span class="instr-span" data-col-start="8" data-col-end="13" data-samples="1" data-max-samples="11" data-pct="8" data-opcodes="JUMP_BACKWARD_NO_JIT (JUMP_BACKWARD)">total</span> = <span class="instr-span" data-col-start="16" data-col-end="26" data-samples="11" data-max-samples="11" data-pct="91" data-opcodes="CALL_BUILTIN_FAST_WITH_KEYWORDS (CALL)">sum(evens)</span></div>
            
        </div>
        <div class="bytecode-panel" id="bytecode-65" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-66">
            <div class="line-number">66</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-67">
            <div class="line-number">67</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-68">
            <div class="line-number">68</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">def dict_operations(iterations):</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-69">
            <div class="line-number">69</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    &quot;&quot;&quot;Dictionary creation and lookups.&quot;&quot;&quot;</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-70">
            <div class="line-number">70</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    for _ in range(iterations):</div>
            
        </div>
        <div class="code-line" data-self-intensity="1.000" data-cumulative-intensity="0.766" data-spec-color="rgba(175, 161, 138, 0.1725)" id="line-71" title="Self: 206, Total: 206">
            <div class="line-number">71</div>
            <div class="line-samples-self">206</div>
            <div class="line-samples-cumulative">206</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 12, &quot;opname&quot;: &quot;FORMAT_SIMPLE&quot;, &quot;base_opname&quot;: &quot;FORMAT_SIMPLE&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 56, &quot;locations&quot;: [{&quot;end_lineno&quot;: 71, &quot;col_offset&quot;: 22, &quot;end_col_offset&quot;: 25}]}, {&quot;opcode&quot;: 98, &quot;opname&quot;: &quot;MAP_ADD&quot;, &quot;base_opname&quot;: &quot;MAP_ADD&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 56, &quot;locations&quot;: [{&quot;end_lineno&quot;: 71, &quot;col_offset&quot;: 16, &quot;end_col_offset&quot;: 34}]}, {&quot;opcode&quot;: 50, &quot;opname&quot;: &quot;BUILD_STRING&quot;, &quot;base_opname&quot;: &quot;BUILD_STRING&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 37, &quot;locations&quot;: [{&quot;end_lineno&quot;: 71, &quot;col_offset&quot;: 16, &quot;end_col_offset&quot;: 26}]}, {&quot;opcode&quot;: 44, &quot;opname&quot;: &quot;BINARY_OP&quot;, &quot;base_opname&quot;: &quot;BINARY_OP&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 21, &quot;locations&quot;: [{&quot;end_lineno&quot;: 71, &quot;col_offset&quot;: 28, &quot;end_col_offset&quot;: 34}]}, {&quot;opcode&quot;: 173, &quot;opname&quot;: &quot;FOR_ITER_RANGE (FOR_ITER)&quot;, &quot;base_opname&quot;: &quot;FOR_ITER&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 14, &quot;locations&quot;: [{&quot;end_lineno&quot;: 71, &quot;col_offset&quot;: 44, &quot;end_col_offset&quot;: 54}]}, {&quot;opcode&quot;: 112, &quot;opname&quot;: &quot;STORE_FAST&quot;, &quot;base_opname&quot;: &quot;STORE_FAST&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 12, &quot;locations&quot;: [{&quot;end_lineno&quot;: 71, &quot;col_offset&quot;: 8, &quot;end_col_offset&quot;: 12}]}, {&quot;opcode&quot;: 176, &quot;opname&quot;: &quot;JUMP_BACKWARD_NO_JIT (JUMP_BACKWARD)&quot;, &quot;base_opname&quot;: &quot;JUMP_BACKWARD&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 6, &quot;locations&quot;: [{&quot;end_lineno&quot;: 71, &quot;col_offset&quot;: 16, &quot;end_col_offset&quot;: 34}]}, {&quot;opcode&quot;: 86, &quot;opname&quot;: &quot;LOAD_FAST_BORROW&quot;, &quot;base_opname&quot;: &quot;LOAD_FAST_BORROW&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 3, &quot;locations&quot;: [{&quot;end_lineno&quot;: 71, &quot;col_offset&quot;: 28, &quot;end_col_offset&quot;: 29}]}, {&quot;opcode&quot;: 82, &quot;opname&quot;: &quot;LOAD_CONST&quot;, &quot;base_opname&quot;: &quot;LOAD_CONST&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 1, &quot;locations&quot;: [{&quot;end_lineno&quot;: 71, &quot;col_offset&quot;: 18, &quot;end_col_offset&quot;: 22}]}]' data-spec-pct="9" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">        <span class="instr-span" data-col-start="8" data-col-end="12" data-samples="12" data-max-samples="62" data-pct="5" data-opcodes="STORE_FAST">data</span> = {<span class="instr-span" data-col-start="16" data-col-end="26" data-samples="37" data-max-samples="62" data-pct="17" data-opcodes="BUILD_STRING">f&quot;</span><span class="instr-span" data-col-start="18" data-col-end="22" data-samples="1" data-max-samples="62" data-pct="0" data-opcodes="LOAD_CONST">key_</span><span class="instr-span" data-col-start="22" data-col-end="25" data-samples="56" data-max-samples="62" data-pct="27" data-opcodes="FORMAT_SIMPLE">{i}</span><span class="instr-span" data-col-start="16" data-col-end="26" data-samples="37" data-max-samples="62" data-pct="17" data-opcodes="BUILD_STRING">&quot;</span><span class="instr-span" data-col-start="16" data-col-end="34" data-samples="62" data-max-samples="62" data-pct="30" data-opcodes="MAP_ADD, JUMP_BACKWARD_NO_JIT (JUMP_BACKWARD)">: </span><span class="instr-span" data-col-start="28" data-col-end="29" data-samples="3" data-max-samples="62" data-pct="1" data-opcodes="LOAD_FAST_BORROW">i</span><span class="instr-span" data-col-start="28" data-col-end="34" data-samples="21" data-max-samples="62" data-pct="10" data-opcodes="BINARY_OP"> ** 2</span> for i in <span class="instr-span" data-col-start="44" data-col-end="54" data-samples="14" data-max-samples="62" data-pct="6" data-opcodes="FOR_ITER_RANGE (FOR_ITER)">range(200)</span>}</div>
            <div class="line-nav-buttons"><button class="nav-btn caller" data-nav='{&quot;link&quot;: &quot;#line-90&quot;, &quot;func&quot;: &quot;data_processing&quot;}' title="Go to caller: data_processing (369 samples)">▲</button></div>
        </div>
        <div class="bytecode-panel" id="bytecode-71" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.951" data-cumulative-intensity="0.728" data-spec-color="rgba(223, 172, 84, 0.235)" id="line-72" title="Self: 158, Total: 158">
            <div class="line-number">72</div>
            <div class="line-samples-self">158</div>
            <div class="line-samples-cumulative">158</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 12, &quot;opname&quot;: &quot;FORMAT_SIMPLE&quot;, &quot;base_opname&quot;: &quot;FORMAT_SIMPLE&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 50, &quot;locations&quot;: [{&quot;end_lineno&quot;: 72, &quot;col_offset&quot;: 29, &quot;end_col_offset&quot;: 32}]}, {&quot;opcode&quot;: 135, &quot;opname&quot;: &quot;BINARY_OP_SUBSCR_DICT (BINARY_OP)&quot;, &quot;base_opname&quot;: &quot;BINARY_OP&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 50, &quot;locations&quot;: [{&quot;end_lineno&quot;: 72, &quot;col_offset&quot;: 18, &quot;end_col_offset&quot;: 34}]}, {&quot;opcode&quot;: 50, &quot;opname&quot;: &quot;BUILD_STRING&quot;, &quot;base_opname&quot;: &quot;BUILD_STRING&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 43, &quot;locations&quot;: [{&quot;end_lineno&quot;: 72, &quot;col_offset&quot;: 23, &quot;end_col_offset&quot;: 33}]}, {&quot;opcode&quot;: 112, &quot;opname&quot;: &quot;STORE_FAST&quot;, &quot;base_opname&quot;: &quot;STORE_FAST&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 4, &quot;locations&quot;: [{&quot;end_lineno&quot;: 72, &quot;col_offset&quot;: 8, &quot;end_col_offset&quot;: 14}]}, {&quot;opcode&quot;: 113, &quot;opname&quot;: &quot;STORE_FAST_LOAD_FAST&quot;, &quot;base_opname&quot;: &quot;STORE_FAST_LOAD_FAST&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 4, &quot;locations&quot;: [{&quot;end_lineno&quot;: 72, &quot;col_offset&quot;: 39, &quot;end_col_offset&quot;: 40}]}, {&quot;opcode&quot;: 173, &quot;opname&quot;: &quot;FOR_ITER_RANGE (FOR_ITER)&quot;, &quot;base_opname&quot;: &quot;FOR_ITER&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 4, &quot;locations&quot;: [{&quot;end_lineno&quot;: 72, &quot;col_offset&quot;: 44, &quot;end_col_offset&quot;: 54}]}, {&quot;opcode&quot;: 78, &quot;opname&quot;: &quot;LIST_APPEND&quot;, &quot;base_opname&quot;: &quot;LIST_APPEND&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 2, &quot;locations&quot;: [{&quot;end_lineno&quot;: 72, &quot;col_offset&quot;: 18, &quot;end_col_offset&quot;: 34}]}, {&quot;opcode&quot;: 86, &quot;opname&quot;: &quot;LOAD_FAST_BORROW&quot;, &quot;base_opname&quot;: &quot;LOAD_FAST_BORROW&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 1, &quot;locations&quot;: [{&quot;end_lineno&quot;: 72, &quot;col_offset&quot;: 30, &quot;end_col_offset&quot;: 31}]}]' data-spec-pct="34" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">        <span class="instr-span" data-col-start="8" data-col-end="14" data-samples="4" data-max-samples="52" data-pct="2" data-opcodes="STORE_FAST">values</span> = [<span class="instr-span" data-col-start="18" data-col-end="34" data-samples="52" data-max-samples="52" data-pct="32" data-opcodes="BINARY_OP_SUBSCR_DICT (BINARY_OP), LIST_APPEND">data[</span><span class="instr-span" data-col-start="23" data-col-end="33" data-samples="43" data-max-samples="52" data-pct="27" data-opcodes="BUILD_STRING">f&quot;key_</span><span class="instr-span" data-col-start="29" data-col-end="32" data-samples="50" data-max-samples="52" data-pct="31" data-opcodes="FORMAT_SIMPLE">{</span><span class="instr-span" data-col-start="30" data-col-end="31" data-samples="1" data-max-samples="52" data-pct="0" data-opcodes="LOAD_FAST_BORROW">i</span><span class="instr-span" data-col-start="29" data-col-end="32" data-samples="50" data-max-samples="52" data-pct="31" data-opcodes="FORMAT_SIMPLE">}</span><span class="instr-span" data-col-start="23" data-col-end="33" data-samples="43" data-max-samples="52" data-pct="27" data-opcodes="BUILD_STRING">&quot;</span><span class="instr-span" data-col-start="18" data-col-end="34" data-samples="52" data-max-samples="52" data-pct="32" data-opcodes="BINARY_OP_SUBSCR_DICT (BINARY_OP), LIST_APPEND">]</span> for <span class="instr-span" data-col-start="39" data-col-end="40" data-samples="4" data-max-samples="52" data-pct="2" data-opcodes="STORE_FAST_LOAD_FAST">i</span> in <span class="instr-span" data-col-start="44" data-col-end="54" data-samples="4" data-max-samples="52" data-pct="2" data-opcodes="FOR_ITER_RANGE (FOR_ITER)">range(200)</span>]</div>
            
        </div>
        <div class="bytecode-panel" id="bytecode-72" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.336" data-cumulative-intensity="0.257" data-spec-color="rgba(0, 255, 0, 0.4)" id="line-73" title="Self: 5, Total: 5">
            <div class="line-number">73</div>
            <div class="line-samples-self">5</div>
            <div class="line-samples-cumulative">5</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 148, &quot;opname&quot;: &quot;CALL_BUILTIN_FAST_WITH_KEYWORDS (CALL)&quot;, &quot;base_opname&quot;: &quot;CALL&quot;, &quot;is_specialized&quot;: true, &quot;samples&quot;: 5, &quot;locations&quot;: [{&quot;end_lineno&quot;: 73, &quot;col_offset&quot;: 16, &quot;end_col_offset&quot;: 27}]}]' data-spec-pct="100" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">        total = <span class="instr-span" data-col-start="16" data-col-end="27" data-samples="5" data-max-samples="5" data-pct="100" data-opcodes="CALL_BUILTIN_FAST_WITH_KEYWORDS (CALL)">sum(values)</span></div>
            
        </div>
        <div class="bytecode-panel" id="bytecode-73" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-74">
            <div class="line-number">74</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-75">
            <div class="line-number">75</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-76">
            <div class="line-number">76</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">def compute_heavy():</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-77">
            <div class="line-number">77</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    &quot;&quot;&quot;CPU-intensive computation section.&quot;&quot;&quot;</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.130" data-cumulative-intensity="0.820" data-spec-color="rgba(158, 158, 158, 0.15)" id="line-78" title="Self: 1, Total: 301">
            <div class="line-number">78</div>
            <div class="line-samples-self">1</div>
            <div class="line-samples-cumulative">301</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 52, &quot;opname&quot;: &quot;CALL&quot;, &quot;base_opname&quot;: &quot;CALL&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 301, &quot;locations&quot;: [{&quot;end_lineno&quot;: 78, &quot;col_offset&quot;: 4, &quot;end_col_offset&quot;: 17}]}]' data-spec-pct="0" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">    <span class="instr-span" data-col-start="4" data-col-end="17" data-samples="301" data-max-samples="301" data-pct="100" data-opcodes="CALL">fibonacci(30)</span></div>
            <div class="line-nav-buttons"><button class="nav-btn caller" data-nav='{&quot;link&quot;: &quot;#line-102&quot;, &quot;func&quot;: &quot;main&quot;}' title="Go to caller: main (301 samples)">▲</button><button class="nav-btn callee" data-nav-multi='[{&quot;file&quot;: &quot;tachyon_selfcontained.py&quot;, &quot;func&quot;: &quot;fibonacci&quot;, &quot;count&quot;: 227, &quot;link&quot;: &quot;#line-10&quot;}, {&quot;file&quot;: &quot;tachyon_selfcontained.py&quot;, &quot;func&quot;: &quot;matrix_multiply&quot;, &quot;count&quot;: 70, &quot;link&quot;: &quot;#line-33&quot;}, {&quot;file&quot;: &quot;tachyon_selfcontained.py&quot;, &quot;func&quot;: &quot;prime_sieve&quot;, &quot;count&quot;: 3, &quot;link&quot;: &quot;#line-44&quot;}]' title="3 callees (300 samples)">▼</button></div>
        </div>
        <div class="bytecode-panel" id="bytecode-78" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-79">
            <div class="line-number">79</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-80">
            <div class="line-number">80</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    size = 60</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-81">
            <div class="line-number">81</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    a = [[i + j for j in range(size)] for i in range(size)]</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-82">
            <div class="line-number">82</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    b = [[i * j for j in range(size)] for i in range(size)]</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-83">
            <div class="line-number">83</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    matrix_multiply(a, b)</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-84">
            <div class="line-number">84</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-85">
            <div class="line-number">85</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    prime_sieve(10000)</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-86">
            <div class="line-number">86</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-87">
            <div class="line-number">87</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-88">
            <div class="line-number">88</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">def data_processing():</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-89">
            <div class="line-number">89</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    &quot;&quot;&quot;Data structure operations.&quot;&quot;&quot;</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.952" data-spec-color="rgba(158, 158, 158, 0.15)" id="line-90" title="Self: 0, Total: 753">
            <div class="line-number">90</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative">753</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 52, &quot;opname&quot;: &quot;CALL&quot;, &quot;base_opname&quot;: &quot;CALL&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 753, &quot;locations&quot;: [{&quot;end_lineno&quot;: 90, &quot;col_offset&quot;: 4, &quot;end_col_offset&quot;: 27}]}]' data-spec-pct="0" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">    <span class="instr-span" data-col-start="4" data-col-end="27" data-samples="753" data-max-samples="753" data-pct="100" data-opcodes="CALL">string_processing(2000)</span></div>
            <div class="line-nav-buttons"><button class="nav-btn caller" data-nav='{&quot;link&quot;: &quot;#line-102&quot;, &quot;func&quot;: &quot;main&quot;}' title="Go to caller: main (753 samples)">▲</button><button class="nav-btn callee" data-nav-multi='[{&quot;file&quot;: &quot;tachyon_selfcontained.py&quot;, &quot;func&quot;: &quot;dict_operations&quot;, &quot;count&quot;: 369, &quot;link&quot;: &quot;#line-71&quot;}, {&quot;file&quot;: &quot;tachyon_selfcontained.py&quot;, &quot;func&quot;: &quot;list_operations&quot;, &quot;count&quot;: 249, &quot;link&quot;: &quot;#line-64&quot;}, {&quot;file&quot;: &quot;tachyon_selfcontained.py&quot;, &quot;func&quot;: &quot;string_processing&quot;, &quot;count&quot;: 123, &quot;link&quot;: &quot;#line-55&quot;}, {&quot;file&quot;: &quot;tachyon_selfcontained.py&quot;, &quot;func&quot;: &quot;bubble_sort&quot;, &quot;count&quot;: 12, &quot;link&quot;: &quot;#line-19&quot;}]' title="4 callees (753 samples)">▼</button></div>
        </div>
        <div class="bytecode-panel" id="bytecode-90" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-91">
            <div class="line-number">91</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    list_operations(1500)</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-92">
            <div class="line-number">92</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    dict_operations(1000)</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-93">
            <div class="line-number">93</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-94">
            <div class="line-number">94</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    data = list(range(800))</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-95">
            <div class="line-number">95</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    for _ in range(3):</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-96">
            <div class="line-number">96</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">        data = data[::-1]</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-97">
            <div class="line-number">97</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">        bubble_sort(data[:200])</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-98">
            <div class="line-number">98</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-99">
            <div class="line-number">99</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-100">
            <div class="line-number">100</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">def main():</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-101">
            <div class="line-number">101</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    &quot;&quot;&quot;Main entry point.&quot;&quot;&quot;</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="1.000" data-spec-color="rgba(158, 158, 158, 0.15)" id="line-102" title="Self: 0, Total: 1,054">
            <div class="line-number">102</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative">1,054</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 52, &quot;opname&quot;: &quot;CALL&quot;, &quot;base_opname&quot;: &quot;CALL&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 1054, &quot;locations&quot;: [{&quot;end_lineno&quot;: 102, &quot;col_offset&quot;: 4, &quot;end_col_offset&quot;: 19}]}]' data-spec-pct="0" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">    <span class="instr-span" data-col-start="4" data-col-end="19" data-samples="1054" data-max-samples="1054" data-pct="100" data-opcodes="CALL">compute_heavy()</span></div>
            <div class="line-nav-buttons"><button class="nav-btn caller" data-nav='{&quot;link&quot;: &quot;#line-107&quot;, &quot;func&quot;: &quot;&lt;module&gt;&quot;}' title="Go to caller: &lt;module&gt; (1,054 samples)">▲</button><button class="nav-btn callee" data-nav-multi='[{&quot;file&quot;: &quot;tachyon_selfcontained.py&quot;, &quot;func&quot;: &quot;data_processing&quot;, &quot;count&quot;: 753, &quot;link&quot;: &quot;#line-90&quot;}, {&quot;file&quot;: &quot;tachyon_selfcontained.py&quot;, &quot;func&quot;: &quot;compute_heavy&quot;, &quot;count&quot;: 301, &quot;link&quot;: &quot;#line-78&quot;}]' title="2 callees (1,054 samples)">▼</button></div>
        </div>
        <div class="bytecode-panel" id="bytecode-102" style="display:none;"></div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-103">
            <div class="line-number">103</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">    data_processing()</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-104">
            <div class="line-number">104</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-105">
            <div class="line-number">105</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content"></div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="0.000" id="line-106">
            <div class="line-number">106</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative"></div>
            <div class="bytecode-spacer"></div>
            <div class="line-content">if __name__ == &quot;__main__&quot;:</div>
            
        </div>
        <div class="code-line" data-self-intensity="0.000" data-cumulative-intensity="1.000" data-spec-color="rgba(158, 158, 158, 0.15)" id="line-107" title="Self: 0, Total: 1,054">
            <div class="line-number">107</div>
            <div class="line-samples-self"></div>
            <div class="line-samples-cumulative">1,054</div>
            <button class="bytecode-toggle" data-bytecode='[{&quot;opcode&quot;: 52, &quot;opname&quot;: &quot;CALL&quot;, &quot;base_opname&quot;: &quot;CALL&quot;, &quot;is_specialized&quot;: false, &quot;samples&quot;: 1054, &quot;locations&quot;: [{&quot;end_lineno&quot;: 107, &quot;col_offset&quot;: 4, &quot;end_col_offset&quot;: 10}]}]' data-spec-pct="0" onclick="toggleBytecode(this)" title="Show bytecode">&#9654;</button>
            <div class="line-content">    <span class="instr-span" data-col-start="4" data-col-end="10" data-samples="1054" data-max-samples="1054" data-pct="100" data-opcodes="CALL">main()</span></div>
            <div class="line-nav-buttons"><button class="nav-btn callee" data-nav='{&quot;link&quot;: &quot;#line-102&quot;, &quot;func&quot;: &quot;main&quot;}' title="Go to callee: main (1,054 samples)">▼</button></div>
        </div>
        <div class="bytecode-panel" id="bytecode-107" style="display:none;"></div>

        </div>
    </div>

    <script>
// Tachyon Profiler - Shared Heatmap JavaScript
// Common utilities shared between index and file views

// ============================================================================
// Heat Level Mapping (Single source of truth for intensity thresholds)
// ============================================================================

// Maps intensity (0-1) to heat level (0-8). Level 0 = no heat, 1-8 = heat levels.
function intensityToHeatLevel(intensity) {
    if (intensity <= 0) return 0;
    if (intensity <= 0.125) return 1;
    if (intensity <= 0.25) return 2;
    if (intensity <= 0.375) return 3;
    if (intensity <= 0.5) return 4;
    if (intensity <= 0.625) return 5;
    if (intensity <= 0.75) return 6;
    if (intensity <= 0.875) return 7;
    return 8;
}

// Class names corresponding to heat levels 1-8 (used by scroll marker)
const HEAT_CLASS_NAMES = ['cold', 'cool', 'mild', 'warm', 'hot', 'very-hot', 'intense', 'extreme'];

function intensityToClass(intensity) {
    const level = intensityToHeatLevel(intensity);
    return level === 0 ? null : HEAT_CLASS_NAMES[level - 1];
}

// ============================================================================
// Color Mapping (Intensity to Heat Color)
// ============================================================================

function intensityToColor(intensity) {
    const level = intensityToHeatLevel(intensity);
    if (level === 0) {
        return 'transparent';
    }
    const rootStyle = getComputedStyle(document.documentElement);
    return rootStyle.getPropertyValue(`--heat-${level}`).trim();
}

// ============================================================================
// Favicon (Reuse logo image as favicon)
// ============================================================================

(function() {
    const logo = document.querySelector('.brand-logo img');
    if (logo) {
        const favicon = document.createElement('link');
        favicon.rel = 'icon';
        favicon.type = 'image/png';
        favicon.href = logo.src;
        document.head.appendChild(favicon);
    }
})();

// Tachyon Profiler - Heatmap JavaScript
// Interactive features for the heatmap visualization
// Aligned with Flamegraph viewer design patterns

// ============================================================================
// State Management
// ============================================================================

let currentMenu = null;
let colorMode = 'self';  // 'self' or 'cumulative' - default to self
let coldCodeHidden = false;

// ============================================================================
// Theme Support
// ============================================================================

function toggleTheme() {
    const html = document.documentElement;
    const current = html.getAttribute('data-theme') || 'light';
    const next = current === 'light' ? 'dark' : 'light';
    html.setAttribute('data-theme', next);
    localStorage.setItem('heatmap-theme', next);

    // Update theme button icon
    const btn = document.getElementById('theme-btn');
    if (btn) {
        btn.querySelector('.icon-moon').style.display = next === 'dark' ? 'none' : '';
        btn.querySelector('.icon-sun').style.display = next === 'dark' ? '' : 'none';
    }
    applyLineColors();

    // Rebuild scroll marker with new theme colors
    buildScrollMarker();
}

function restoreUIState() {
    // Restore theme
    const savedTheme = localStorage.getItem('heatmap-theme');
    if (savedTheme) {
        document.documentElement.setAttribute('data-theme', savedTheme);
        const btn = document.getElementById('theme-btn');
        if (btn) {
            btn.querySelector('.icon-moon').style.display = savedTheme === 'dark' ? 'none' : '';
            btn.querySelector('.icon-sun').style.display = savedTheme === 'dark' ? '' : 'none';
        }
    }
}

// ============================================================================
// Utility Functions
// ============================================================================

function createElement(tag, className, textContent = '') {
    const el = document.createElement(tag);
    if (className) el.className = className;
    if (textContent) el.textContent = textContent;
    return el;
}

function calculateMenuPosition(buttonRect, menuWidth, menuHeight) {
    const viewport = { width: window.innerWidth, height: window.innerHeight };
    const scroll = {
        x: window.pageXOffset || document.documentElement.scrollLeft,
        y: window.pageYOffset || document.documentElement.scrollTop
    };

    const left = buttonRect.right + menuWidth + 10 < viewport.width
        ? buttonRect.right + scroll.x + 10
        : Math.max(scroll.x + 10, buttonRect.left + scroll.x - menuWidth - 10);

    const top = buttonRect.bottom + menuHeight + 10 < viewport.height
        ? buttonRect.bottom + scroll.y + 5
        : Math.max(scroll.y + 10, buttonRect.top + scroll.y - menuHeight - 10);

    return { left, top };
}

// ============================================================================
// Menu Management
// ============================================================================

function closeMenu() {
    if (currentMenu) {
        currentMenu.remove();
        currentMenu = null;
    }
}

function showNavigationMenu(button, items, title) {
    closeMenu();

    const menu = createElement('div', 'callee-menu');
    menu.appendChild(createElement('div', 'callee-menu-header', title));

    items.forEach(linkData => {
        const item = createElement('div', 'callee-menu-item');

        const funcDiv = createElement('div', 'callee-menu-func');
        funcDiv.textContent = linkData.func;

        if (linkData.count !== undefined && linkData.count > 0) {
            const countBadge = createElement('span', 'count-badge');
            countBadge.textContent = linkData.count.toLocaleString();
            countBadge.title = `${linkData.count.toLocaleString()} samples`;
            funcDiv.appendChild(document.createTextNode(' '));
            funcDiv.appendChild(countBadge);
        }

        item.appendChild(funcDiv);
        item.appendChild(createElement('div', 'callee-menu-file', linkData.file));
        item.addEventListener('click', () => window.location.href = linkData.link);
        menu.appendChild(item);
    });

    const pos = calculateMenuPosition(button.getBoundingClientRect(), 350, 300);
    menu.style.left = `${pos.left}px`;
    menu.style.top = `${pos.top}px`;

    document.body.appendChild(menu);
    currentMenu = menu;
}

// ============================================================================
// Navigation
// ============================================================================

function handleNavigationClick(button, e) {
    e.stopPropagation();

    const navData = button.getAttribute('data-nav');
    if (navData) {
        window.location.href = JSON.parse(navData).link;
        return;
    }

    const navMulti = button.getAttribute('data-nav-multi');
    if (navMulti) {
        const items = JSON.parse(navMulti);
        const title = button.classList.contains('caller') ? 'Choose a caller:' : 'Choose a callee:';
        showNavigationMenu(button, items, title);
    }
}

function scrollToTargetLine() {
    if (!window.location.hash) return;
    const target = document.querySelector(window.location.hash);
    if (target) {
        target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
}

// ============================================================================
// Sample Count & Intensity
// ============================================================================

function getSampleCount(line) {
    let text;
    if (colorMode === 'self') {
        text = line.querySelector('.line-samples-self')?.textContent.trim().replace(/,/g, '');
    } else {
        text = line.querySelector('.line-samples-cumulative')?.textContent.trim().replace(/,/g, '');
    }
    return parseInt(text) || 0;
}

// ============================================================================
// Scroll Minimap
// ============================================================================

function buildScrollMarker() {
    const existing = document.getElementById('scroll_marker');
    if (existing) existing.remove();

    if (document.body.scrollHeight <= window.innerHeight) return;

    const allLines = document.querySelectorAll('.code-line');
    const lines = Array.from(allLines).filter(line => line.style.display !== 'none');
    const markerScale = window.innerHeight / document.body.scrollHeight;
    const lineHeight = Math.min(Math.max(3, window.innerHeight / lines.length), 10);
    const maxSamples = Math.max(...Array.from(lines, getSampleCount));

    const scrollMarker = createElement('div', '');
    scrollMarker.id = 'scroll_marker';

    let prevLine = -99, lastMark, lastTop;

    lines.forEach((line, index) => {
        const samples = getSampleCount(line);
        if (samples === 0) return;

        const lineTop = Math.floor(line.offsetTop * markerScale);
        const lineNumber = index + 1;
        const intensityClass = maxSamples > 0 ? (intensityToClass(samples / maxSamples) || 'cold') : 'cold';

        if (lineNumber === prevLine + 1 && lastMark?.classList.contains(intensityClass)) {
            lastMark.style.height = `${lineTop + lineHeight - lastTop}px`;
        } else {
            lastMark = createElement('div', `marker ${intensityClass}`);
            lastMark.style.height = `${lineHeight}px`;
            lastMark.style.top = `${lineTop}px`;
            scrollMarker.appendChild(lastMark);
            lastTop = lineTop;
        }

        prevLine = lineNumber;
    });

    document.body.appendChild(scrollMarker);
}

function applyLineColors() {
    const lines = document.querySelectorAll('.code-line');
    lines.forEach(line => {
        let intensity;
        if (colorMode === 'self') {
            intensity = parseFloat(line.getAttribute('data-self-intensity')) || 0;
        } else {
            intensity = parseFloat(line.getAttribute('data-cumulative-intensity')) || 0;
        }

        const color = intensityToColor(intensity);
        line.style.background = color;
    });
}

// ============================================================================
// Toggle Controls
// ============================================================================

function updateToggleUI(toggleId, isOn) {
    const toggle = document.getElementById(toggleId);
    if (toggle) {
        const track = toggle.querySelector('.toggle-track');
        const labels = toggle.querySelectorAll('.toggle-label');
        if (isOn) {
            track.classList.add('on');
            labels[0].classList.remove('active');
            labels[1].classList.add('active');
        } else {
            track.classList.remove('on');
            labels[0].classList.add('active');
            labels[1].classList.remove('active');
        }
    }
}

function toggleColdCode() {
    coldCodeHidden = !coldCodeHidden;
    applyHotFilter();
    updateToggleUI('toggle-cold', coldCodeHidden);
    buildScrollMarker();
}

function applyHotFilter() {
    const lines = document.querySelectorAll('.code-line');

    lines.forEach(line => {
        const selfSamples = line.querySelector('.line-samples-self')?.textContent.trim();
        const cumulativeSamples = line.querySelector('.line-samples-cumulative')?.textContent.trim();

        let isCold;
        if (colorMode === 'self') {
            isCold = !selfSamples || selfSamples === '';
        } else {
            isCold = !cumulativeSamples || cumulativeSamples === '';
        }

        if (isCold) {
            line.style.display = coldCodeHidden ? 'none' : 'flex';
        } else {
            line.style.display = 'flex';
        }
    });
}

function toggleColorMode() {
    colorMode = colorMode === 'self' ? 'cumulative' : 'self';
    applyLineColors();

    updateToggleUI('toggle-color-mode', colorMode === 'cumulative');

    if (coldCodeHidden) {
        applyHotFilter();
    }

    buildScrollMarker();
}

// ============================================================================
// Initialization
// ============================================================================

document.addEventListener('DOMContentLoaded', function() {
    restoreUIState();
    applyLineColors();

    // Initialize navigation buttons
    document.querySelectorAll('.nav-btn').forEach(button => {
        button.addEventListener('click', e => handleNavigationClick(button, e));
    });

    // Initialize line number permalink handlers
    document.querySelectorAll('.line-number').forEach(lineNum => {
        lineNum.style.cursor = 'pointer';
        lineNum.addEventListener('click', e => {
            window.location.hash = `line-${e.target.textContent.trim()}`;
        });
    });

    // Initialize toggle buttons
    const toggleColdBtn = document.getElementById('toggle-cold');
    if (toggleColdBtn) toggleColdBtn.addEventListener('click', toggleColdCode);

    const colorModeBtn = document.getElementById('toggle-color-mode');
    if (colorModeBtn) colorModeBtn.addEventListener('click', toggleColorMode);

    // Initialize specialization view toggle (hide if no bytecode data)
    const hasBytecode = document.querySelectorAll('.bytecode-toggle').length > 0;

    const specViewBtn = document.getElementById('toggle-spec-view');
    if (specViewBtn) {
        if (hasBytecode) {
            specViewBtn.addEventListener('click', toggleSpecView);
        } else {
            specViewBtn.style.display = 'none';
        }
    }

    // Initialize expand-all bytecode button
    const expandAllBtn = document.getElementById('toggle-all-bytecode');
    if (expandAllBtn) {
        if (hasBytecode) {
            expandAllBtn.addEventListener('click', toggleAllBytecode);
        } else {
            expandAllBtn.style.display = 'none';
        }
    }

    // Initialize span tooltips
    initSpanTooltips();

    // Build scroll marker and scroll to target
    setTimeout(buildScrollMarker, 200);
    setTimeout(scrollToTargetLine, 100);
});

// Close menu when clicking outside
document.addEventListener('click', e => {
    if (currentMenu && !currentMenu.contains(e.target) && !e.target.classList.contains('nav-btn')) {
        closeMenu();
    }
});

// ========================================
// SPECIALIZATION VIEW TOGGLE
// ========================================

let specViewEnabled = false;

/**
 * Calculate heat color for given intensity (0-1)
 * Hot spans (>30%) get warm orange, cold spans get dimmed gray
 * @param {number} intensity - Value between 0 and 1
 * @returns {string} rgba color string
 */
function calculateHeatColor(intensity) {
    // Hot threshold: only spans with >30% of max samples get color
    if (intensity > 0.3) {
        // Normalize intensity above threshold to 0-1
        const normalizedIntensity = (intensity - 0.3) / 0.7;
        // Warm orange-red with increasing opacity for hotter spans
        const alpha = 0.25 + normalizedIntensity * 0.35;  // 0.25 to 0.6
        const hotColor = getComputedStyle(document.documentElement).getPropertyValue('--span-hot-base').trim();
        return `rgba(${hotColor}, ${alpha})`;
    } else if (intensity > 0) {
        // Cold spans: very subtle gray, almost invisible
        const coldColor = getComputedStyle(document.documentElement).getPropertyValue('--span-cold-base').trim();
        return `rgba(${coldColor}, 0.1)`;
    }
    return 'transparent';
}

/**
 * Apply intensity-based heat colors to source spans
 * Hot spans get orange highlight, cold spans get dimmed
 * @param {boolean} enable - Whether to enable or disable span coloring
 */
function applySpanHeatColors(enable) {
    document.querySelectorAll('.instr-span').forEach(span => {
        const samples = enable ? (parseInt(span.dataset.samples) || 0) : 0;
        if (samples > 0) {
            const intensity = samples / (parseInt(span.dataset.maxSamples) || 1);
            span.style.backgroundColor = calculateHeatColor(intensity);
            span.style.borderRadius = '2px';
            span.style.padding = '0 1px';
            span.style.cursor = 'pointer';
        } else {
            span.style.cssText = '';
        }
    });
}

// ========================================
// SPAN TOOLTIPS
// ========================================

let activeTooltip = null;

/**
 * Create and show tooltip for a span
 */
function showSpanTooltip(span) {
    hideSpanTooltip();

    const samples = parseInt(span.dataset.samples) || 0;
    const maxSamples = parseInt(span.dataset.maxSamples) || 1;
    const pct = span.dataset.pct || '0';
    const opcodes = span.dataset.opcodes || '';

    if (samples === 0) return;

    const intensity = samples / maxSamples;
    const isHot = intensity > 0.7;
    const isWarm = intensity > 0.3;
    const hotnessText = isHot ? 'Hot' : isWarm ? 'Warm' : 'Cold';
    const hotnessClass = isHot ? 'hot' : isWarm ? 'warm' : 'cold';

    // Build opcodes rows - each opcode on its own row
    let opcodesHtml = '';
    if (opcodes) {
        const opcodeList = opcodes.split(',').map(op => op.trim()).filter(op => op);
        if (opcodeList.length > 0) {
            opcodesHtml = `
                <div class="span-tooltip-section">Opcodes:</div>
                ${opcodeList.map(op => `<div class="span-tooltip-opcode">${op}</div>`).join('')}
            `;
        }
    }

    const tooltip = document.createElement('div');
    tooltip.className = 'span-tooltip';
    tooltip.innerHTML = `
        <div class="span-tooltip-header ${hotnessClass}">${hotnessText}</div>
        <div class="span-tooltip-row">
            <span class="span-tooltip-label">Samples:</span>
            <span class="span-tooltip-value${isHot ? ' highlight' : ''}">${samples.toLocaleString()}</span>
        </div>
        <div class="span-tooltip-row">
            <span class="span-tooltip-label">% of line:</span>
            <span class="span-tooltip-value">${pct}%</span>
        </div>
        ${opcodesHtml}
    `;

    document.body.appendChild(tooltip);
    activeTooltip = tooltip;

    // Position tooltip above the span
    const rect = span.getBoundingClientRect();
    const tooltipRect = tooltip.getBoundingClientRect();

    let left = rect.left + (rect.width / 2) - (tooltipRect.width / 2);
    let top = rect.top - tooltipRect.height - 8;

    // Keep tooltip in viewport
    if (left < 5) left = 5;
    if (left + tooltipRect.width > window.innerWidth - 5) {
        left = window.innerWidth - tooltipRect.width - 5;
    }
    if (top < 5) {
        top = rect.bottom + 8; // Show below if no room above
    }

    tooltip.style.left = `${left + window.scrollX}px`;
    tooltip.style.top = `${top + window.scrollY}px`;
}

/**
 * Hide active tooltip
 */
function hideSpanTooltip() {
    if (activeTooltip) {
        activeTooltip.remove();
        activeTooltip = null;
    }
}

/**
 * Initialize span tooltip handlers
 */
function initSpanTooltips() {
    document.addEventListener('mouseover', (e) => {
        const span = e.target.closest('.instr-span');
        if (span && specViewEnabled) {
            showSpanTooltip(span);
        }
    });

    document.addEventListener('mouseout', (e) => {
        const span = e.target.closest('.instr-span');
        if (span) {
            hideSpanTooltip();
        }
    });
}

function toggleSpecView() {
    specViewEnabled = !specViewEnabled;
    const lines = document.querySelectorAll('.code-line');

    if (specViewEnabled) {
        lines.forEach(line => {
            const specColor = line.getAttribute('data-spec-color');
            line.style.background = specColor || 'transparent';
        });
    } else {
        applyLineColors();
    }

    applySpanHeatColors(specViewEnabled);
    updateToggleUI('toggle-spec-view', specViewEnabled);

    // Disable/enable color mode toggle based on spec view state
    const colorModeToggle = document.getElementById('toggle-color-mode');
    if (colorModeToggle) {
        colorModeToggle.classList.toggle('disabled', specViewEnabled);
    }

    buildScrollMarker();
}

// ========================================
// BYTECODE PANEL TOGGLE
// ========================================

/**
 * Toggle bytecode panel visibility for a source line
 * @param {HTMLElement} button - The toggle button that was clicked
 */
function toggleBytecode(button) {
    const lineDiv = button.closest('.code-line');
    const lineId = lineDiv.id;
    const lineNum = lineId.replace('line-', '');
    const panel = document.getElementById(`bytecode-${lineNum}`);

    if (!panel) return;

    const isExpanded = panel.style.display !== 'none';

    if (isExpanded) {
        panel.style.display = 'none';
        button.classList.remove('expanded');
        button.innerHTML = '&#9654;';  // Right arrow
    } else {
        if (!panel.dataset.populated) {
            populateBytecodePanel(panel, button);
        }
        panel.style.display = 'block';
        button.classList.add('expanded');
        button.innerHTML = '&#9660;';  // Down arrow
    }
}

/**
 * Populate bytecode panel with instruction data
 * @param {HTMLElement} panel - The panel element to populate
 * @param {HTMLElement} button - The button containing the bytecode data
 */
function populateBytecodePanel(panel, button) {
    const bytecodeJson = button.getAttribute('data-bytecode');
    if (!bytecodeJson) return;

    // Get line number from parent
    const lineDiv = button.closest('.code-line');
    const lineNum = lineDiv ? lineDiv.id.replace('line-', '') : null;

    try {
        const instructions = JSON.parse(bytecodeJson);
        if (!instructions.length) {
            panel.innerHTML = '<div class="bytecode-empty">No bytecode data</div>';
            panel.dataset.populated = 'true';
            return;
        }

        const maxSamples = Math.max(...instructions.map(i => i.samples), 1);

        // Calculate specialization stats
        const totalSamples = instructions.reduce((sum, i) => sum + i.samples, 0);
        const specializedSamples = instructions
            .filter(i => i.is_specialized)
            .reduce((sum, i) => sum + i.samples, 0);
        const specPct = totalSamples > 0 ? Math.round(100 * specializedSamples / totalSamples) : 0;
        const specializedCount = instructions.filter(i => i.is_specialized).length;

        // Determine specialization level class
        let specClass = 'low';
        if (specPct >= 67) specClass = 'high';
        else if (specPct >= 33) specClass = 'medium';

        // Build specialization summary
        let html = `<div class="bytecode-spec-summary ${specClass}">
            <span class="spec-pct">${specPct}%</span>
            <span class="spec-label">specialized</span>
            <span class="spec-detail">(${specializedCount}/${instructions.length} instructions, ${specializedSamples.toLocaleString()}/${totalSamples.toLocaleString()} samples)</span>
        </div>`;

        html += '<div class="bytecode-header">' +
            '<span class="bytecode-opname">Instruction</span>' +
            '<span class="bytecode-samples">Samples</span>' +
            '<span>Heat</span></div>';

        for (const instr of instructions) {
            const heatPct = (instr.samples / maxSamples) * 100;
            const isHot = heatPct > 50;
            const specializedClass = instr.is_specialized ? ' specialized' : '';
            const baseOpHtml = instr.is_specialized
                ? `<span class="base-op">(${escapeHtml(instr.base_opname)})</span>` : '';
            const badge = instr.is_specialized
                ? '<span class="specialization-badge">SPECIALIZED</span>' : '';

            // Build location data attributes for cross-referencing with source spans
            const hasLocations = instr.locations && instr.locations.length > 0;
            const locationData = hasLocations
                ? `data-locations='${JSON.stringify(instr.locations)}' data-line="${lineNum}" data-opcode="${instr.opcode}"`
                : '';

            html += `<div class="bytecode-instruction" ${locationData}>
                <span class="bytecode-opname${specializedClass}">${escapeHtml(instr.opname)}${baseOpHtml}${badge}</span>
                <span class="bytecode-samples${isHot ? ' hot' : ''}">${instr.samples.toLocaleString()}</span>
                <div class="bytecode-heatbar"><div class="bytecode-heatbar-fill" style="width:${heatPct}%"></div></div>
            </div>`;
        }

        panel.innerHTML = html;
        panel.dataset.populated = 'true';

        // Add hover handlers for bytecode instructions to highlight source spans
        panel.querySelectorAll('.bytecode-instruction[data-locations]').forEach(instrEl => {
            instrEl.addEventListener('mouseenter', highlightSourceFromBytecode);
            instrEl.addEventListener('mouseleave', unhighlightSourceFromBytecode);
        });
    } catch (e) {
        panel.innerHTML = '<div class="bytecode-error">Error loading bytecode</div>';
        console.error('Error parsing bytecode data:', e);
    }
}

/**
 * Highlight source spans when hovering over bytecode instruction
 */
function highlightSourceFromBytecode(e) {
    const instrEl = e.currentTarget;
    const lineNum = instrEl.dataset.line;
    const locationsStr = instrEl.dataset.locations;

    if (!lineNum) return;

    const lineDiv = document.getElementById(`line-${lineNum}`);
    if (!lineDiv) return;

    // Parse locations and highlight matching spans by column range
    try {
        const locations = JSON.parse(locationsStr || '[]');
        const spans = lineDiv.querySelectorAll('.instr-span');
        spans.forEach(span => {
            const spanStart = parseInt(span.dataset.colStart);
            const spanEnd = parseInt(span.dataset.colEnd);
            for (const loc of locations) {
                // Match if span's range matches instruction's location
                if (spanStart === loc.col_offset && spanEnd === loc.end_col_offset) {
                    span.classList.add('highlight-from-bytecode');
                    break;
                }
            }
        });
    } catch (err) {
        console.error('Error parsing locations:', err);
    }

    // Also highlight the instruction row itself
    instrEl.classList.add('highlight');
}

/**
 * Remove highlighting from source spans
 */
function unhighlightSourceFromBytecode(e) {
    const instrEl = e.currentTarget;
    const lineNum = instrEl.dataset.line;

    if (!lineNum) return;

    const lineDiv = document.getElementById(`line-${lineNum}`);
    if (!lineDiv) return;

    const spans = lineDiv.querySelectorAll('.instr-span.highlight-from-bytecode');
    spans.forEach(span => {
        span.classList.remove('highlight-from-bytecode');
    });

    instrEl.classList.remove('highlight');
}

/**
 * Escape HTML special characters
 * @param {string} text - Text to escape
 * @returns {string} Escaped HTML
 */
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

/**
 * Toggle all bytecode panels at once
 */
function toggleAllBytecode() {
    const buttons = document.querySelectorAll('.bytecode-toggle');
    if (buttons.length === 0) return;

    const someExpanded = Array.from(buttons).some(b => b.classList.contains('expanded'));
    const expandAllBtn = document.getElementById('toggle-all-bytecode');

    buttons.forEach(button => {
        const isExpanded = button.classList.contains('expanded');
        if (someExpanded ? isExpanded : !isExpanded) {
            toggleBytecode(button);
        }
    });

    // Update the expand-all button state
    if (expandAllBtn) {
        expandAllBtn.classList.toggle('expanded', !someExpanded);
    }
}

// Keyboard shortcut: 'b' toggles all bytecode panels, Enter/Space activates toggle switches
document.addEventListener('keydown', function(e) {
    if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
        return;
    }
    if (e.key === 'b' && !e.ctrlKey && !e.altKey && !e.metaKey) {
        toggleAllBytecode();
    }
    if ((e.key === 'Enter' || e.key === ' ') && e.target.classList.contains('toggle-switch')) {
        e.preventDefault();
        e.target.click();
    }
});

// Handle hash changes
window.addEventListener('hashchange', () => setTimeout(scrollToTargetLine, 50));

// Rebuild scroll marker on resize
window.addEventListener('resize', buildScrollMarker);

</script>
</body>
</html>