mirror of
https://github.com/python/cpython.git
synced 2026-01-25 00:28:56 +00:00
3805 lines
365 KiB
HTML
3805 lines
365 KiB
HTML
|
<!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/6C9p5MAAAAHdElNRQfpDAwAKSgDSoVCAACAAElEQVR42uy9d5xlaV3n//4+zznn5nsrh85pIjkPIDBDUhFQQUCCLmBcMayru7Lqb0WYQdngIoiuyq6IAWTNLqISBmVNSBKYPD2hY+W6t24+4fn+/ji3qqu7q7qqY1X33M/r1dM9Vec+5wnnPs/nfMPnK/TRRx999NHHVQxt/B5Um5DxQR2YIEDdzaC7QTKgGZATiNzFyd+fYfRloALRDtAWsve7tnoI1zRkqzvQRx999NFHHxcKnf2t9B8uApPJoclTQF8BPB8YB/WABJgB7gX9LOjnGf2+e92936GokNT+GfEH8Z/+1a0ezjWJPtHoo48++ujjqoSb+hXE+JC/UWjd/zjgh1H9NmAsNVmcAU3AhV3V7gOEM5/WcO5TJI0vJkl7Shc+o6iD8cfB4kNknlPb6uFdM+gTjT766KOPPq46uGPvBrGIzQKZVyPyLuAmQEGaiGkBHZAIcKBWk1aOpJVHnafxQkYbd4euee8jGk5/lqT1ZxrrP9uR59W0cwRv11uQ3EGoFWDv3Yj3s1s95KsWfaLRRx999NHHVQU9djsArnGPSPlpb8Tk/gtiJgVTQ+xJMEuIRICmH0B6/xZwFlRwsa/hVMk17x4iWhjQuNomaXxRk9Yfo8knvV3fe0zGX91i4e8SbAFUIZuA34XOEDL4nVs9DVcN+kSjjz766KOPqwZ64nZwSpJ/Prb9D29WU/glTGZQxB4H7zhIlJ5s6kBkxYWicuZ5p2AAJ7hWXuPFYY0WRjWaD3DxCclM3iv+4J3iD30Sm3sUR43IdPFjMAKxgfFHQBxEr0L8J2z11Gxb9IlGH3300UcfVw30yO3pQY++GJP/HWxhFPEeBW+aZQuGqEuPtzPiNM4mGz2IIgoaB5q0ysSNEXWtQVQRv3Jc/KGvIuYrYP4Z9OuInCSIO4QWHOBi6B6B//tOeMpzkOf8w1ZP07ZCn2j00UcfffRxVUCP3UHKJXQS8f4IW342JvcA2NnTLhR1y/86vQE5x5mnICgYBWdIOgWNa2PAsPiVAGwdMUcQczfIvwJfAr4OUsWXOnECpgSJj4x+61ZP1bZCn2j00UcfffSx7aEn3gluOVNV/iMm84vYweOIf5RlS8YyBE2DKi6EaMhKI6gKGmdBR8CNgWbB1BF7EjEnQI6CPgz8P9B/ohLXqflpE74Hs0+Hfb+AeL+91dO3pegTjT766KOPPrY9lgNAgX1gPoFX2oUp3dPLKjkbgvaCQDd7h97nZHUA6fIvJBX9SsbQZAw00KRTB50Rr7SAeDXgS6D/gPJ1DFNEroWx4EXgBBn9nq2ewi1Dn2j00UcfffSxrbGKZOSA9yDBD+ENPYD481ySc+wMkoFKGt4huirOY5lw5NBoVKO5EU2aGTFBE1s5KV55ETF10BngbuDjiNyNahcFgg40BpFdr9vq6bzi6BONPvroo48+tjX02O0gWJQXg/wfvHKEKd/HmS6TC4WonnYcuiijSasiYmJMtol4YUo6VqXJapjReGlUk/o4GgdiclW8ypTYwhJiItBZ4O+BT6B6P6IxHQftCbjujxD5ra2e1iuGPtHoo48++uhjW0OPvxsyg9CZ/3HE/yW84cOIP8X5nmGCA3Wo2A0/q2FW46VhXKeELcTilatgaj1XzSmC47p5jasTmjRGUTVic1W88pR4hSUwEehx4PdQ7sQzTRIFk6TdGX7rVk/tFUGfaPTRRx999LGtocfuABdajP872NJ3YstfBdPgvImGxoCi4m36s66bhXgU8YZ6Vo0aqnOYTLP3/6QCYO2ixrVxTZrDoCImtyD+wBQ23wCpgv498EkM91CjTiX9GGEH2fEDWz3FlxV9otFHH3300ce2RfdvA0z+OnCdfWbw1k+b8tPHMPm7SNNPzg+i2gu5uICzTwNwA7jWqIbzWUx2UbzKNCbXSlW7YIVwRNUJTRrDiKjYwrx45VlsbgnMAugXgL8gV/ky7SXtZdGAFpCx1271dF8WeFvdgT766KOPPvpYDxJMotEimjSfI3F1j2p8UpB4zaJpG+Gc6a0b9iQEO40U5vGSYZLahIYnhzC5qtjSLCbXQLwYk69LJtvENWaJahOaNEc1aY6IzdXEG5jB5odArqdd+yjwOTBVRCBsoK3fRfJv2uopv+ToE40++uijjz62L5IWbmnWt5Pf8K2S3euJ+NUt7I0gJhFvcBpbWtCkPkhSH3Xh9PViMk3xho5i83VEnNjSIqawRNIqkyyNqesMkjQGcGFVjD+AzU+AeRboRxFzF55Tcgat/jYy8G+2etYv8aT1sS2hJ98JXxe4ubdEy/HOQip5e9YHBIxDdv5/W931Pvroo49LgvhrL0fDKTRpPNmUn/7XpnBjRjI77wHjNt1IKt51kdaMdRtXSKzGS8MaLe4GZ8UW5sSvTGFyrTRkVABncJ2Cus64xksjaISYXA2vfFJs/iuI/V3UfRboIC7d730fGfzurV6CSzNLW92BPk5Bj9/ei2XWXi0gltO4M0AWwUPwUSooMdAE6qhrYsxKO7KzX864jz76uPoRff0VeGMvI5764ztM4XE/Lbn9h8UbnLogt8nlhabZJ4uTmjRHQBLxylPiDcwgfpj2V1Jp85Wg0dYQqka8wpz4A1/HZP8CMX9EnDmKaaX1XCKQyTdv9dguGtttsR5z0OO3n8rMXoZTHyNDwONRbkTYDwwAWSAA8qR2jQ4wD9yN8rcgX0fUoYARZMfPbPXw+uijjz4uCNGXnw8k4LoHpHjTX0vu4C6T2fX19ODelkhfDZNmhXhhp7puRYzfwFamxZbmES8+RTjU4NoFjRZ3aNIaRmwoXumY+OXPYjK/h8rfQxKmQaIJjL4FuRwGmSuEq7fnVzFU3wEnvFMEI3FgzShwALgBuAnYA7IzjXRWi6qBpPe3uFTBzsSI0d6DO4/yZ8DHgBpxDDaD7P5PWz3cPvroo4/zRvgvT8Df/f0ksx//GcnfcLtk9x4Rf/jYVvdrY4iisafJ0ojGtR1olBWTq4k3cBxbWDqVErvsdqkPaVzdiQsLYoI6fuWrYksfxvh/TjY/RXsJohjyRWTg9Vs9uAubka3uwGMJOvWudMaTnlvEYHDsAW7t/dkBkgf10MTDhVl1nRIuKkISoM5X1JD6VpyIDRGvg8nUxOaWEK8F/DPKexGOpzcVZFffstFHH31cHdCHfwu1D+Ia94ALr5Ng4uNkd+01mZ1fR4LOVvdv8xBNRb+qYxrXJ8CZNNV1+Bgm0z7l/hFNVUZrYxovTYDzxRaPij/4SWz2f2IrXyReVIJBiJvI8Bu2emDnjX7WyRWAHu/p9DvSlGlLFjiA41uAZ4OMpVaL2FfXKZF0KriwhCapNQNRxMSICQVR1BlFPXVREcIySWuMpNHEFk+KV3weIi2UX0KobfXY++ijjz7OC0WQeAQbPSguf8v34g1dJ7Z05OoiGZC+5fld8UePii0taFwd16Qxhgvz+MNHxBZqaVCrCuKH4o8cE1tY1Ghht8b1Pbjua/EH9ogmv4HJ/BVhtYFYtPoH0KpeVSJffYvGZYKeuCMlFgKg4BwYOwz6dOAlwI3AEOo8XDenSWsI1x1UTTKIicT4DUy2JmJDMAnG64JNVe1QAWfRJFAXFkhaw+rCMoiKV5gSr3IEsf8H+DWQNoDs7Fs1+uijj+0LPfkrYMup9lXlaUZn/+plGi18EJOtmMzOuxC/u9V9vHCkgaAa10aJF3ejiYctzoo3eDK1biznFfbcLvHipMa1HYCIV3xQ/IGPYvL/C6KjqEBHwIDsvDrSYPtE4xJDj9+R6ti7XhaIGkHc9cBLgacDe4AcLsyoa1dI2kOqUREFMUEdm5sXk6ulxGJ1CtdaUdbL5YwTX5P6iMb1XagLxObmxR+8H/E
|
||
|
|
<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">"""</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">"""</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='[{"opcode": 194, "opname": "RESUME_CHECK (RESUME)", "base_opname": "RESUME", "is_specialized": true, "samples": 1, "locations": [{"end_lineno": 7, "col_offset": 0, "end_col_offset": 0}]}]' data-spec-pct="100" onclick="toggleBytecode(this)" title="Show bytecode">▶</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"> """Recursive fibonacci - creates deep call stacks."""</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='[{"opcode": 86, "opname": "LOAD_FAST_BORROW", "base_opname": "LOAD_FAST_BORROW", "is_specialized": false, "samples": 1, "locations": [{"end_lineno": 9, "col_offset": 7, "end_col_offset": 8}]}, {"opcode": 100, "opname": "POP_JUMP_IF_FALSE", "base_opname": "POP_JUMP_IF_FALSE", "is_specialized": false, "samples": 1, "locations": [{"end_lineno": 9, "col_offset": 7, "end_col_offset": 13}]}, {"opcode": 167, "opname": "COMPARE_OP_INT (COMPARE_OP)", "base_opname": "COMPARE_OP", "is_specialized": true, "samples": 1, "locations": [{"end_lineno": 9, "col_offset": 7, "end_col_offset": 13}]}]' data-spec-pct="33" onclick="toggleBytecode(this)" title="Show bytecode">▶</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)"> <= 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='[{"opcode": 35, "opname": "RETURN_VALUE", "base_opname": "RETURN_VALUE", "is_specialized": false, "samples": 17, "locations": [{"end_lineno": 10, "col_offset": 8, "end_col_offset": 16}]}, {"opcode": 86, "opname": "LOAD_FAST_BORROW", "base_opname": "LOAD_FAST_BORROW", "is_specialized": false, "samples": 1, "locations": [{"end_lineno": 10, "col_offset": 15, "end_col_offset": 16}]}]' data-spec-pct="0" onclick="toggleBytecode(this)" title="Show bytecode">▶</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='[{"file": "tachyon_selfcontained.py", "func": "fibonacci", "count": 4170, "link": "#line-11"}, {"file": "tachyon_selfcontained.py", "func": "compute_heavy", "count": 227, "link": "#line-78"}]' title="2 callers (4,397 samples)">â–²</button><button class="nav-btn callee" data-nav='{"link": "#line-10", "func": "fibonacci"}' 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='[{"opcode": 161, "opname": "CALL_PY_EXACT_ARGS (CALL)", "base_opname": "CALL", "is_specialized": true, "samples": 4315, "locations": [{"end_lineno": 11, "col_offset": 30, "end_col_offset": 46}, {"end_lineno": 11, "col_offset": 11, "end_col_offset": 27}]}, {"opcode": 35, "opname": "RETURN_VALUE", "base_opname": "RETURN_VALUE", "is_specialized": false, "samples": 32, "locations": [{"end_lineno": 11, "col_offset": 4, "end_col_offset": 46}]}, {"opcode": 191, "opname": "LOAD_GLOBAL_MODULE (LOAD_GLOBAL)", "base_opname": "LOAD_GLOBAL", "is_specialized": true, "samples": 14, "locations": [{"end_lineno": 11, "col_offset": 30, "end_col_offset": 39}, {"end_lineno": 11, "col_offset": 11, "end_col_offset": 20}]}, {"opcode": 86, "opname": "LOAD_FAST_BORROW", "base_opname": "LOAD_FAST_BORROW", "is_specialized": false, "samples": 8, "locations": [{"end_lineno": 11, "col_offset": 21, "end_col_offset": 22}]}, {"opcode": 142, "opname": "BINARY_OP_SUBTRACT_INT (BINARY_OP)", "base_opname": "BINARY_OP", "is_specialized": true, "samples": 4, "locations": [{"end_lineno": 11, "col_offset": 21, "end_col_offset": 26}, {"end_lineno": 11, "col_offset": 40, "end_col_offset": 45}]}, {"opcode": 130, "opname": "BINARY_OP_ADD_INT (BINARY_OP)", "base_opname": "BINARY_OP", "is_specialized": true, "samples": 2, "locations": [{"end_lineno": 11, "col_offset": 11, "end_col_offset": 46}]}, {"opcode": 94, "opname": "LOAD_SMALL_INT", "base_opname": "LOAD_SMALL_INT", "is_specialized": false, "samples": 1, "locations": [{"end_lineno": 11, "col_offset": 25, "end_col_offset": 26}]}]' data-spec-pct="99" onclick="toggleBytecode(this)" title="Show bytecode">▶</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='{"link": "#line-10", "func": "fibonacci"}' 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"> """Classic bubble sort - O(n^2) comparison sorting."""</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='[{"opcode": 112, "opname": "STORE_FAST", "base_opname": "STORE_FAST", "is_specialized": false, "samples": 1, "locations": [{"end_lineno": 18, "col_offset": 12, "end_col_offset": 13}]}, {"opcode": 173, "opname": "FOR_ITER_RANGE (FOR_ITER)", "base_opname": "FOR_ITER", "is_specialized": true, "samples": 1, "locations": [{"end_lineno": 18, "col_offset": 17, "end_col_offset": 36}]}]' data-spec-pct="50" onclick="toggleBytecode(this)" title="Show bytecode">▶</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='[{"opcode": 167, "opname": "COMPARE_OP_INT (COMPARE_OP)", "base_opname": "COMPARE_OP", "is_specialized": true, "samples": 3, "locations": [{"end_lineno": 19, "col_offset": 15, "end_col_offset": 34}]}, {"opcode": 87, "opname": "LOAD_FAST_BORROW_LOAD_FAST_BORROW", "base_opname": "LOAD_FAST_BORROW_LOAD_FAST_BORROW", "is_specialized": false, "samples": 2, "locations": [{"end_lineno": 19, "col_offset": 24, "end_col_offset": 27}, {"end_lineno": 19, "col_offset": 15, "end_col_offset": 18}]}, {"opcode": 94, "opname": "LOAD_SMALL_INT", "base_opname": "LOAD_SMALL_INT", "is_specialized": false, "samples": 2, "locations": [{"end_lineno": 19, "col_offset": 32, "end_col_offset": 33}]}, {"opcode": 137, "opname": "BINARY_OP_SUBSCR_LIST_INT (BINARY_OP)", "base_opname": "BINARY_OP", "is_specialized": true, "samples": 1, "locations": [{"end_lineno": 19, "col_offset": 15, "end_col_offset": 21}]}]' data-spec-pct="50" onclick="toggleBytecode(this)" title="Show bytecode">▶</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)"> > </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='{"link": "#line-90", "func": "data_processing"}' 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='[{"opcode": 137, "opname": "BINARY_OP_SUBSCR_LIST_INT (BINARY_OP)", "base_opname": "BINARY_OP", "is_specialized": true, "samples": 2, "locations": [{"end_lineno": 20, "col_offset": 37, "end_col_offset": 47}]}]' data-spec-pct="100" onclick="toggleBytecode(this)" title="Show bytecode">▶</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"> """Matrix multiplication using nested loops."""</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='[{"opcode": 112, "opname": "STORE_FAST", "base_opname": "STORE_FAST", "is_specialized": false, "samples": 5, "locations": [{"end_lineno": 32, "col_offset": 16, "end_col_offset": 17}]}, {"opcode": 173, "opname": "FOR_ITER_RANGE (FOR_ITER)", "base_opname": "FOR_ITER", "is_specialized": true, "samples": 3, "locations": [{"end_lineno": 32, "col_offset": 21, "end_col_offset": 34}]}]' data-spec-pct="37" onclick="toggleBytecode(this)" title="Show bytecode">▶</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='[{"opcode": 137, "opname": "BINARY_OP_SUBSCR_LIST_INT (BINARY_OP)", "base_opname": "BINARY_OP", "is_specialized": true, "samples": 26, "locations": [{"end_lineno": 33, "col_offset": 42, "end_col_offset": 46}, {"end_lineno": 33, "col_offset": 42, "end_col_offset": 49}, {"end_lineno": 33, "col_offset": 32, "end_col_offset": 36}, {"end_lineno": 33, "col_offset": 32, "end_col_offset": 39}, {"end_lineno": 33, "col_offset": 16, "end_col_offset": 28}]}, {"opcode": 130, "opname": "BINARY_OP_ADD_INT (BINARY_OP)", "base_opname": "BINARY_OP", "is_specialized": true, "samples": 11, "locations": [{"end_lineno": 33, "col_offset": 16, "end_col_offset": 49}]}, {"opcode": 134, "opname": "BINARY_OP_MULTIPLY_INT (BINARY_OP)", "base_opname": "BINARY_OP", "is_specialized": true, "samples": 8, "locations": [{"end_lineno": 33, "col_offset": 32, "end_col_offset": 49}]}, {"opcode": 117, "opname": "SWAP", "base_opname": "SWAP", "is_specialized": false, "samples": 5, "locations": [{"end_lineno": 33, "col_offset": 16, "end_col_offset": 28}]}, {"opcode": 59, "opname": "COPY", "base_opname": "COPY", "is_specialized": false, "samples": 4, "locations": [{"end_lineno": 33, "col_offset": 16, "end_col_offset": 28}]}, {"opcode": 86, "opname": "LOAD_FAST_BORROW", "base_opname": "LOAD_FAST_BORROW", "is_specialized": false, "samples": 3, "locations": [{"end_lineno": 33, "col_offset": 37, "end_col_offset": 38}, {"end_lineno": 33, "col_offset": 47, "end_col_offset": 48}]}, {"opcode": 87, "opname": "LOAD_FAST_BORROW_LOAD_FAST_BORROW", "base_opname": "LOAD_FAST_BORROW_LOAD_FAST_BORROW", "is_specialized": false, "samples": 2, "locations": [{"end_lineno": 33, "col_offset": 42, "end_col_offset": 43}, {"end_lineno": 33, "col_offset": 32, "end_col_offset": 33}]}, {"opcode": 200, "opname": "STORE_SUBSCR_LIST_INT (STORE_SUBSCR)", "base_opname": "STORE_SUBSCR", "is_specialized": true, "samples": 2, "locations": [{"end_lineno": 33, "col_offset": 16, "end_col_offset": 28}]}, {"opcode": 176, "opname": "JUMP_BACKWARD_NO_JIT (JUMP_BACKWARD)", "base_opname": "JUMP_BACKWARD", "is_specialized": true, "samples": 1, "locations": [{"end_lineno": 33, "col_offset": 16, "end_col_offset": 28}]}]' data-spec-pct="77" onclick="toggleBytecode(this)" title="Show bytecode">▶</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='{"link": "#line-78", "func": "compute_heavy"}' 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"> """Sieve of Eratosthenes - find all primes up to limit."""</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='[{"opcode": 173, "opname": "FOR_ITER_RANGE (FOR_ITER)", "base_opname": "FOR_ITER", "is_specialized": true, "samples": 1, "locations": [{"end_lineno": 44, "col_offset": 28, "end_col_offset": 60}]}]' data-spec-pct="100" onclick="toggleBytecode(this)" title="Show bytecode">▶</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='{"link": "#line-78", "func": "compute_heavy"}' 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='[{"opcode": 70, "opname": "FOR_ITER", "base_opname": "FOR_ITER", "is_specialized": false, "samples": 2, "locations": [{"end_lineno": 47, "col_offset": 34, "end_col_offset": 53}]}]' data-spec-pct="0" onclick="toggleBytecode(this)" title="Show bytecode">▶</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"> """String operations - concatenation and formatting."""</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 = ""</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='[{"opcode": 3, "opname": "BINARY_OP_INPLACE_ADD_UNICODE (BINARY_OP)", "base_opname": "BINARY_OP", "is_specialized": true, "samples": 39, "locations": [{"end_lineno": 55, "col_offset": 12, "end_col_offset": 34}]}, {"opcode": 12, "opname": "FORMAT_SIMPLE", "base_opname": "FORMAT_SIMPLE", "is_specialized": false, "samples": 32, "locations": [{"end_lineno": 55, "col_offset": 29, "end_col_offset": 32}]}, {"opcode": 50, "opname": "BUILD_STRING", "base_opname": "BUILD_STRING", "is_specialized": false, "samples": 15, "locations": [{"end_lineno": 55, "col_offset": 22, "end_col_offset": 34}]}, {"opcode": 82, "opname": "LOAD_CONST", "base_opname": "LOAD_CONST", "is_specialized": false, "samples": 4, "locations": [{"end_lineno": 55, "col_offset": 24, "end_col_offset": 29}, {"end_lineno": 55, "col_offset": 32, "end_col_offset": 33}]}, {"opcode": 86, "opname": "LOAD_FAST_BORROW", "base_opname": "LOAD_FAST_BORROW", "is_specialized": false, "samples": 1, "locations": [{"end_lineno": 55, "col_offset": 12, "end_col_offset": 18}]}]' data-spec-pct="42" onclick="toggleBytecode(this)" title="Show bytecode">▶</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"</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">"</span></div>
|
||
|
|
<div class="line-nav-buttons"><button class="nav-btn caller" data-nav='{"link": "#line-90", "func": "data_processing"}' 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='[{"opcode": 157, "opname": "CALL_METHOD_DESCRIPTOR_FAST_WITH_KEYWORDS (CALL)", "base_opname": "CALL", "is_specialized": true, "samples": 15, "locations": [{"end_lineno": 56, "col_offset": 16, "end_col_offset": 33}]}, {"opcode": 112, "opname": "STORE_FAST", "base_opname": "STORE_FAST", "is_specialized": false, "samples": 7, "locations": [{"end_lineno": 56, "col_offset": 8, "end_col_offset": 13}]}]' data-spec-pct="68" onclick="toggleBytecode(this)" title="Show bytecode">▶</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("_")</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='[{"opcode": 159, "opname": "CALL_METHOD_DESCRIPTOR_O (CALL)", "base_opname": "CALL", "is_specialized": true, "samples": 10, "locations": [{"end_lineno": 57, "col_offset": 17, "end_col_offset": 32}]}]' data-spec-pct="100" onclick="toggleBytecode(this)" title="Show bytecode">▶</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)">"-".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"> """List comprehensions and operations."""</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='[{"opcode": 44, "opname": "BINARY_OP", "base_opname": "BINARY_OP", "is_specialized": false, "samples": 54, "locations": [{"end_lineno": 63, "col_offset": 19, "end_col_offset": 25}]}, {"opcode": 173, "opname": "FOR_ITER_RANGE (FOR_ITER)", "base_opname": "FOR_ITER", "is_specialized": true, "samples": 26, "locations": [{"end_lineno": 63, "col_offset": 35, "end_col_offset": 45}]}, {"opcode": 78, "opname": "LIST_APPEND", "base_opname": "LIST_APPEND", "is_specialized": false, "samples": 13, "locations": [{"end_lineno": 63, "col_offset": 19, "end_col_offset": 25}]}, {"opcode": 112, "opname": "STORE_FAST", "base_opname": "STORE_FAST", "is_specialized": false, "samples": 10, "locations": [{"end_lineno": 63, "col_offset": 8, "end_col_offset": 15}]}, {"opcode": 113, "opname": "STORE_FAST_LOAD_FAST", "base_opname": "STORE_FAST_LOAD_FAST", "is_specialized": false, "samples": 9, "locations": [{"end_lineno": 63, "col_offset": 30, "end_col_offset": 31}]}, {"opcode": 176, "opname": "JUMP_BACKWARD_NO_JIT (JUMP_BACKWARD)", "base_opname": "JUMP_BACKWARD", "is_specialized": true, "samples": 4, "locations": [{"end_lineno": 63, "col_offset": 19, "end_col_offset": 25}]}, {"opcode": 94, "opname": "LOAD_SMALL_INT", "base_opname": "LOAD_SMALL_INT", "is_specialized": false, "samples": 2, "locations": [{"end_lineno": 63, "col_offset": 24, "end_col_offset": 25}]}]' data-spec-pct="25" onclick="toggleBytecode(this)" title="Show bytecode">▶</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='[{"opcode": 44, "opname": "BINARY_OP", "base_opname": "BINARY_OP", "is_specialized": false, "samples": 48, "locations": [{"end_lineno": 64, "col_offset": 39, "end_col_offset": 44}]}, {"opcode": 167, "opname": "COMPARE_OP_INT (COMPARE_OP)", "base_opname": "COMPARE_OP", "is_specialized": true, "samples": 16, "locations": [{"end_lineno": 64, "col_offset": 39, "end_col_offset": 49}]}, {"opcode": 94, "opname": "LOAD_SMALL_INT", "base_opname": "LOAD_SMALL_INT", "is_specialized": false, "samples": 13, "locations": [{"end_lineno": 64, "col_offset": 43, "end_col_offset": 44}, {"end_lineno": 64, "col_offset": 48, "end_col_offset": 49}]}, {"opcode": 172, "opname": "FOR_ITER_LIST (FOR_ITER)", "base_opname": "FOR_ITER", "is_specialized": true, "samples": 13, "locations": [{"end_lineno": 64, "col_offset": 28, "end_col_offset": 35}]}, {"opcode": 112, "opname": "STORE_FAST", "base_opname": "STORE_FAST", "is_specialized": false, "samples": 12, "locations": [{"end_lineno": 64, "col_offset": 8, "end_col_offset": 13}]}, {"opcode": 113, "opname": "STORE_FAST_LOAD_FAST", "base_opname": "STORE_FAST_LOAD_FAST", "is_specialized": false, "samples": 6, "locations": [{"end_lineno": 64, "col_offset": 23, "end_col_offset": 24}]}, {"opcode": 86, "opname": "LOAD_FAST_BORROW", "base_opname": "LOAD_FAST_BORROW", "is_specialized": false, "samples": 4, "locations": [{"end_lineno": 64, "col_offset": 17, "end_col_offset": 18}]}, {"opcode": 78, "opname": "LIST_APPEND", "base_opname": "LIST_APPEND", "is_specialized": false, "samples": 3, "locations": [{"end_lineno": 64, "col_offset": 17, "end_col_offset": 18}]}, {"opcode": 103, "opname": "POP_JUMP_IF_TRUE", "base_opname": "POP_JUMP_IF_TRUE", "is_specialized": false, "samples": 2, "locations": [{"end_lineno": 64, "col_offset": 17, "end_col_offset": 18}]}, {"opcode": 16, "opname": "GET_ITER", "base_opname": "GET_ITER", "is_specialized": false, "samples": 1, "locations": [{"end_lineno": 64, "col_offset": 28, "end_col_offset": 35}]}, {"opcode": 176, "opname": "JUMP_BACKWARD_NO_JIT (JUMP_BACKWARD)", "base_opname": "JUMP_BACKWARD", "is_specialized": true, "samples": 1, "locations": [{"end_lineno": 64, "col_offset": 17, "end_col_offset": 18}]}]' data-spec-pct="25" onclick="toggleBytecode(this)" title="Show bytecode">▶</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='{"link": "#line-90", "func": "data_processing"}' 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='[{"opcode": 148, "opname": "CALL_BUILTIN_FAST_WITH_KEYWORDS (CALL)", "base_opname": "CALL", "is_specialized": true, "samples": 11, "locations": [{"end_lineno": 65, "col_offset": 16, "end_col_offset": 26}]}, {"opcode": 176, "opname": "JUMP_BACKWARD_NO_JIT (JUMP_BACKWARD)", "base_opname": "JUMP_BACKWARD", "is_specialized": true, "samples": 1, "locations": [{"end_lineno": 65, "col_offset": 8, "end_col_offset": 13}]}]' data-spec-pct="100" onclick="toggleBytecode(this)" title="Show bytecode">▶</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"> """Dictionary creation and lookups."""</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='[{"opcode": 12, "opname": "FORMAT_SIMPLE", "base_opname": "FORMAT_SIMPLE", "is_specialized": false, "samples": 56, "locations": [{"end_lineno": 71, "col_offset": 22, "end_col_offset": 25}]}, {"opcode": 98, "opname": "MAP_ADD", "base_opname": "MAP_ADD", "is_specialized": false, "samples": 56, "locations": [{"end_lineno": 71, "col_offset": 16, "end_col_offset": 34}]}, {"opcode": 50, "opname": "BUILD_STRING", "base_opname": "BUILD_STRING", "is_specialized": false, "samples": 37, "locations": [{"end_lineno": 71, "col_offset": 16, "end_col_offset": 26}]}, {"opcode": 44, "opname": "BINARY_OP", "base_opname": "BINARY_OP", "is_specialized": false, "samples": 21, "locations": [{"end_lineno": 71, "col_offset": 28, "end_col_offset": 34}]}, {"opcode": 173, "opname": "FOR_ITER_RANGE (FOR_ITER)", "base_opname": "FOR_ITER", "is_specialized": true, "samples": 14, "locations": [{"end_lineno": 71, "col_offset": 44, "end_col_offset": 54}]}, {"opcode": 112, "opname": "STORE_FAST", "base_opname": "STORE_FAST", "is_specialized": false, "samples": 12, "locations": [{"end_lineno": 71, "col_offset": 8, "end_col_offset": 12}]}, {"opcode": 176, "opname": "JUMP_BACKWARD_NO_JIT (JUMP_BACKWARD)", "base_opname": "JUMP_BACKWARD", "is_specialized": true, "samples": 6, "locations": [{"end_lineno": 71, "col_offset": 16, "end_col_offset": 34}]}, {"opcode": 86, "opname": "LOAD_FAST_BORROW", "base_opname": "LOAD_FAST_BORROW", "is_specialized": false, "samples": 3, "locations": [{"end_lineno": 71, "col_offset": 28, "end_col_offset": 29}]}, {"opcode": 82, "opname": "LOAD_CONST", "base_opname": "LOAD_CONST", "is_specialized": false, "samples": 1, "locations": [{"end_lineno": 71, "col_offset": 18, "end_col_offset": 22}]}]' data-spec-pct="9" onclick="toggleBytecode(this)" title="Show bytecode">▶</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"</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">"</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='{"link": "#line-90", "func": "data_processing"}' 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='[{"opcode": 12, "opname": "FORMAT_SIMPLE", "base_opname": "FORMAT_SIMPLE", "is_specialized": false, "samples": 50, "locations": [{"end_lineno": 72, "col_offset": 29, "end_col_offset": 32}]}, {"opcode": 135, "opname": "BINARY_OP_SUBSCR_DICT (BINARY_OP)", "base_opname": "BINARY_OP", "is_specialized": true, "samples": 50, "locations": [{"end_lineno": 72, "col_offset": 18, "end_col_offset": 34}]}, {"opcode": 50, "opname": "BUILD_STRING", "base_opname": "BUILD_STRING", "is_specialized": false, "samples": 43, "locations": [{"end_lineno": 72, "col_offset": 23, "end_col_offset": 33}]}, {"opcode": 112, "opname": "STORE_FAST", "base_opname": "STORE_FAST", "is_specialized": false, "samples": 4, "locations": [{"end_lineno": 72, "col_offset": 8, "end_col_offset": 14}]}, {"opcode": 113, "opname": "STORE_FAST_LOAD_FAST", "base_opname": "STORE_FAST_LOAD_FAST", "is_specialized": false, "samples": 4, "locations": [{"end_lineno": 72, "col_offset": 39, "end_col_offset": 40}]}, {"opcode": 173, "opname": "FOR_ITER_RANGE (FOR_ITER)", "base_opname": "FOR_ITER", "is_specialized": true, "samples": 4, "locations": [{"end_lineno": 72, "col_offset": 44, "end_col_offset": 54}]}, {"opcode": 78, "opname": "LIST_APPEND", "base_opname": "LIST_APPEND", "is_specialized": false, "samples": 2, "locations": [{"end_lineno": 72, "col_offset": 18, "end_col_offset": 34}]}, {"opcode": 86, "opname": "LOAD_FAST_BORROW", "base_opname": "LOAD_FAST_BORROW", "is_specialized": false, "samples": 1, "locations": [{"end_lineno": 72, "col_offset": 30, "end_col_offset": 31}]}]' data-spec-pct="34" onclick="toggleBytecode(this)" title="Show bytecode">▶</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"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">"</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='[{"opcode": 148, "opname": "CALL_BUILTIN_FAST_WITH_KEYWORDS (CALL)", "base_opname": "CALL", "is_specialized": true, "samples": 5, "locations": [{"end_lineno": 73, "col_offset": 16, "end_col_offset": 27}]}]' data-spec-pct="100" onclick="toggleBytecode(this)" title="Show bytecode">▶</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"> """CPU-intensive computation section."""</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='[{"opcode": 52, "opname": "CALL", "base_opname": "CALL", "is_specialized": false, "samples": 301, "locations": [{"end_lineno": 78, "col_offset": 4, "end_col_offset": 17}]}]' data-spec-pct="0" onclick="toggleBytecode(this)" title="Show bytecode">▶</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='{"link": "#line-102", "func": "main"}' title="Go to caller: main (301 samples)">â–²</button><button class="nav-btn callee" data-nav-multi='[{"file": "tachyon_selfcontained.py", "func": "fibonacci", "count": 227, "link": "#line-10"}, {"file": "tachyon_selfcontained.py", "func": "matrix_multiply", "count": 70, "link": "#line-33"}, {"file": "tachyon_selfcontained.py", "func": "prime_sieve", "count": 3, "link": "#line-44"}]' 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"> """Data structure operations."""</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='[{"opcode": 52, "opname": "CALL", "base_opname": "CALL", "is_specialized": false, "samples": 753, "locations": [{"end_lineno": 90, "col_offset": 4, "end_col_offset": 27}]}]' data-spec-pct="0" onclick="toggleBytecode(this)" title="Show bytecode">▶</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='{"link": "#line-102", "func": "main"}' title="Go to caller: main (753 samples)">â–²</button><button class="nav-btn callee" data-nav-multi='[{"file": "tachyon_selfcontained.py", "func": "dict_operations", "count": 369, "link": "#line-71"}, {"file": "tachyon_selfcontained.py", "func": "list_operations", "count": 249, "link": "#line-64"}, {"file": "tachyon_selfcontained.py", "func": "string_processing", "count": 123, "link": "#line-55"}, {"file": "tachyon_selfcontained.py", "func": "bubble_sort", "count": 12, "link": "#line-19"}]' 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"> """Main entry point."""</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='[{"opcode": 52, "opname": "CALL", "base_opname": "CALL", "is_specialized": false, "samples": 1054, "locations": [{"end_lineno": 102, "col_offset": 4, "end_col_offset": 19}]}]' data-spec-pct="0" onclick="toggleBytecode(this)" title="Show bytecode">▶</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='{"link": "#line-107", "func": "<module>"}' title="Go to caller: <module> (1,054 samples)">â–²</button><button class="nav-btn callee" data-nav-multi='[{"file": "tachyon_selfcontained.py", "func": "data_processing", "count": 753, "link": "#line-90"}, {"file": "tachyon_selfcontained.py", "func": "compute_heavy", "count": 301, "link": "#line-78"}]' 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__ == "__main__":</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='[{"opcode": 52, "opname": "CALL", "base_opname": "CALL", "is_specialized": false, "samples": 1054, "locations": [{"end_lineno": 107, "col_offset": 4, "end_col_offset": 10}]}]' data-spec-pct="0" onclick="toggleBytecode(this)" title="Show bytecode">▶</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='{"link": "#line-102", "func": "main"}' 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 = '▶'; // Right arrow
|
||
|
|
} else {
|
||
|
|
if (!panel.dataset.populated) {
|
||
|
|
populateBytecodePanel(panel, button);
|
||
|
|
}
|
||
|
|
panel.style.display = 'block';
|
||
|
|
button.classList.add('expanded');
|
||
|
|
button.innerHTML = '▼'; // 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>
|