Diff compression (#1810)

* Add diff compression

* Fix existing 'React has detected a change in the order of Hooks called by DiffCell.' issue

* Allow compressed runs to be expanded

* smol tweak to button hover

* don't forget about the 3rd column

* remove debugging log

* Move early return *after* hooks to ensure consistency

* Remove usage of useEffect

* nits

* pull CompressToggleButton into its own function

* yarn lint

Author: mkst

frontend/src/app/(navfooter)/settings/SliderField.tsx

@@ -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"
@@ -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>
 

frontend/src/app/(navfooter)/settings/appearance/AppearanceSettings.tsx

@@ -20,6 +20,8 @@ export default function AppearanceSettings() {
     const [codeColorScheme, setCodeColorScheme] = settings.useCodeColorScheme();
     const [diffCellBackground, setDiffCellBackground] =
         settings.diffCellBackgroundEnabled();
+    const [diffCompressionContext, setDiffCompressionContext] =
+        settings.diffCompressionContext();
 
     return (
         <>
@@ -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">

frontend/src/components/Diff/CompilationPanel.tsx

@@ -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
@@ -118,6 +119,8 @@ export default function CompilationPanel({
                         }
                         threeWayDiffEnabled={threeWayDiffEnabled}
                         setThreeWayDiffEnabled={setThreeWayDiffEnabled}
+                        compressionEnabled={compressionEnabled}
+                        setCompressionEnabled={setCompressionEnabled}
                         threeWayDiffBase={threeWayDiffBase}
                         selectedSourceLine={selectedSourceLine}
                     />

frontend/src/components/Diff/Diff.module.scss

@@ -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 {
@@ -116,6 +128,14 @@
     }
 }
 
+.row.collapsed {
+    cursor: pointer;
+}
+
+.row.collapsed > .cell {
+    cursor: pointer;
+}
+
 .cell span.lineNumber {
     display: inline-block;
 
@@ -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 {