Skip to content

Diff compression #1810

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
mkst merged 11 commits into from
Feb 11, 2026
Merged

Diff compression #1810

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
f73a06a
Add diff compression
mkst Feb 7, 2026
d13b2f9
Fix existing 'React has detected a change in the order of Hooks calle…
mkst Feb 7, 2026
3141a40
Allow compressed runs to be expanded
mkst Feb 8, 2026
163f553
smol tweak to button hover
mkst Feb 8, 2026
2bd8643
don't forget about the 3rd column
mkst Feb 8, 2026
7e4f3e6
remove debugging log
mkst Feb 8, 2026
b766dc6
Move early return *after* hooks to ensure consistency
mkst Feb 8, 2026
cf1aa1a
Remove usage of useEffect
mkst Feb 9, 2026
10a4446
nits
mkst Feb 9, 2026
f709138
pull CompressToggleButton into its own function
mkst Feb 9, 2026
165368e
yarn lint
mkst Feb 10, 2026
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
14 changes: 9 additions & 5 deletions frontend/src/app/(navfooter)/settings/SliderField.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,10 @@ export default function SliderField({
</div>

<div className="inline-flex w-5/6 items-center gap-2 text-gray-10 text-xs">
{min}
{unit}
<span className="w-1/6 text-right">
{min}
{unit}
</span>
<input
id={id}
type="range"
Expand All @@ -71,10 +73,12 @@ export default function SliderField({
onChange(clamp(+evt.target.value, min, max))
}
disabled={disabled}
className="w-full focus:ring"
className="w-4/6 focus:ring"
/>
{max}
{unit}
<span className="w-1/6">
{max}
{unit}
</span>
</div>
</div>

Expand Down
13 changes: 13 additions & 0 deletions frontend/src/app/(navfooter)/settings/appearance/AppearanceSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ export default function AppearanceSettings() {
const [codeColorScheme, setCodeColorScheme] = settings.useCodeColorScheme();
const [diffCellBackground, setDiffCellBackground] =
settings.diffCellBackgroundEnabled();
const [diffCompressionContext, setDiffCompressionContext] =
settings.diffCompressionContext();

return (
<>
Expand Down Expand Up @@ -77,6 +79,17 @@ export default function AppearanceSettings() {
checked={diffCellBackground}
onChange={setDiffCellBackground}
/>
<div className="my-6 md:mb-0 md:w-full">
<SliderField
label="Diff compression context"
min={0}
max={8}
step={1}
unit=" row(s)"
value={diffCompressionContext}
onChange={setDiffCompressionContext}
/>
</div>
</div>

<div className="mb-6 max-w-xl">
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/components/Diff/CompilationPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ export default function CompilationPanel({
const problemState = getProblemState(compilation);
const [threeWayDiffBase] = useThreeWayDiffBase();
const [threeWayDiffEnabled, setThreeWayDiffEnabled] = useState(false);
const [compressionEnabled, setCompressionEnabled] = useState(false);
const prevCompilation = usedCompilationRef.current;

// Only update the diff if it's never been set or if the compilation succeeded
Expand Down Expand Up @@ -118,6 +119,8 @@ export default function CompilationPanel({
}
threeWayDiffEnabled={threeWayDiffEnabled}
setThreeWayDiffEnabled={setThreeWayDiffEnabled}
compressionEnabled={compressionEnabled}
setCompressionEnabled={setCompressionEnabled}
threeWayDiffBase={threeWayDiffBase}
selectedSourceLine={selectedSourceLine}
/>
Expand Down
24 changes: 24 additions & 0 deletions frontend/src/components/Diff/Diff.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,18 @@
color: var(--g1500);
}

.compressionToggle {
position: relative;
padding: 4px 4px;
cursor: pointer;

&:hover {
border-radius: 4px;
color: var(--g1300);
background: var(--g400);
}
}

// Columns
.headers,
.row {
Expand Down Expand Up @@ -116,6 +128,14 @@
}
}

.row.collapsed {
cursor: pointer;
}

.row.collapsed > .cell {
cursor: pointer;
}

.cell span.lineNumber {
display: inline-block;

Expand Down Expand Up @@ -145,19 +165,23 @@
.diff_change { color: #6d6dff; }
.diff_add { color: #45bd00; }
.diff_remove { color: #c82829; }
.diff_skip { color: #e6c700; }

.diff_change_row { background-color: rgba(106, 106, 255, 0.10); }
.diff_add_row { background-color: rgba(69, 189, 0, 0.10); }
.diff_remove_row { background-color: rgba(200, 40, 41, 0.10); }
.diff_skip_row { background-color: rgba(230, 199, 0, 0.10); }

:global(html:not(.dark)) {
.diff_change { color: #3a3aff; }
.diff_add { color: #2a8000; }
.diff_remove { color: #a31212; }
.diff_skip { color: #b38f00; }

.diff_change_row { background-color: #f4f4ff; }
.diff_add_row { background-color: #f4fff4; }
.diff_remove_row { background-color: #fff4f4; }
.diff_skip_row { background-color: #fffbea; }
}

.source_function {
Expand Down
Loading