Skip to content

More Tachyon Opcode CSS Fixes: Responsive Heatmap Edition #113

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pablogsal merged 1 commit into from
Dec 10, 2025
Merged

More Tachyon Opcode CSS Fixes: Responsive Heatmap Edition #113

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 70 additions & 5 deletions Lib/profiling/sampling/_heatmap_assets/heatmap.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -691,6 +691,15 @@
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;
}

/* Toggle Switch Styles */
.toggle-switch {
display: inline-flex;
Expand Down Expand Up @@ -726,11 +735,6 @@
cursor: not-allowed;
}

/* Push toggles to the right */
#toggle-color-mode {
margin-left: auto;
}

.toggle-track {
position: relative;
width: 36px;
Expand Down Expand Up @@ -1147,6 +1151,15 @@
.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) {
Expand All @@ -1166,13 +1179,65 @@

.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 {
Expand Down
38 changes: 20 additions & 18 deletions Lib/profiling/sampling/_heatmap_assets/heatmap_pyfile_template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,25 +69,27 @@
<span>Hot</span>
</div>
<div class="legend-separator" aria-hidden="true"></div>
<div class="toggle-switch" id="toggle-color-mode" title="Toggle between self time and total time coloring">
<span class="toggle-label active">Self Time</span>
<div class="toggle-track"></div>
<span class="toggle-label">Total Time</span>
<div class="legend-controls">
<div class="toggle-switch" id="toggle-color-mode" title="Toggle between self time and total time coloring">
<span class="toggle-label active">Self Time</span>
<div class="toggle-track"></div>
<span class="toggle-label">Total Time</span>
</div>
<div class="toggle-switch" id="toggle-cold" title="Toggle visibility of lines with zero samples">
<span class="toggle-label active">Show All</span>
<div class="toggle-track"></div>
<span class="toggle-label">Hot Only</span>
</div>
<div class="toggle-switch" id="toggle-spec-view" title="Color lines by specialization level (requires bytecode data)">
<span class="toggle-label active">Heat</span>
<div class="toggle-track"></div>
<span class="toggle-label">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 class="toggle-switch" id="toggle-cold" title="Toggle visibility of lines with zero samples">
<span class="toggle-label active">Show All</span>
<div class="toggle-track"></div>
<span class="toggle-label">Hot Only</span>
</div>
<div class="toggle-switch" id="toggle-spec-view" title="Color lines by specialization level (requires bytecode data)">
<span class="toggle-label active">Heat</span>
<div class="toggle-track"></div>
<span class="toggle-label">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>

Expand Down