From 46794b5677ff302f60c97bd0967a6a040e2846df Mon Sep 17 00:00:00 2001
From: Felix Kling <felix@felix-kling.de>
Date: Thu, 11 Jul 2024 13:19:35 +0200
Subject: [PATCH] fix(svelte): Show correct line numbers in unified diff
 (#63778)

Fixes srch-717

This commit fixes the line numbers for unified diff views, which are
used on the commit page and for inline diffs.

## Test plan

Manual testing.

| Before | After |
|--------|--------|
|
![2024-07-11_10-40](https://github.com/sourcegraph/sourcegraph/assets/179026/170ac815-d038-4239-80fe-7d35cecfa832)
|
![2024-07-11_10-38](https://github.com/sourcegraph/sourcegraph/assets/179026/3606cb34-ad87-43bf-9664-414bf9250fa4)
|
---
 .../src/lib/repo/FileDiffHunks.svelte         | 62 ++++++++++++++-----
 1 file changed, 47 insertions(+), 15 deletions(-)

diff --git a/client/web-sveltekit/src/lib/repo/FileDiffHunks.svelte b/client/web-sveltekit/src/lib/repo/FileDiffHunks.svelte
index 74104385f45..d475346ec50 100644
--- a/client/web-sveltekit/src/lib/repo/FileDiffHunks.svelte
+++ b/client/web-sveltekit/src/lib/repo/FileDiffHunks.svelte
@@ -1,10 +1,48 @@
 <script lang="ts">
     import { DiffHunkLineType } from '$lib/graphql-types'
+
     import '$lib/highlight.scss'
 
     import type { FileDiffHunks_Hunk } from './FileDiffHunks.gql'
 
     export let hunks: readonly FileDiffHunks_Hunk[]
+
+    function linesToDiffInformation(lines: FileDiffHunks_Hunk['highlight']['lines']): {
+        newLineOffset: number
+        oldLineOffset: number
+        marker: '-' | '+' | ' '
+        added: boolean
+        deleted: boolean
+        html: string
+    }[] {
+        let newLineOffset = -1
+        let oldLineOffset = -1
+
+        return lines.map(line => {
+            let marker: '-' | '+' | ' ' = ' '
+            let added = false
+            let deleted = false
+
+            switch (line.kind) {
+                case DiffHunkLineType.ADDED:
+                    marker = '+'
+                    newLineOffset++
+                    added = true
+                    break
+                case DiffHunkLineType.DELETED:
+                    marker = '-'
+                    oldLineOffset++
+                    deleted = true
+                    break
+                case DiffHunkLineType.UNCHANGED:
+                    newLineOffset++
+                    oldLineOffset++
+                    break
+            }
+
+            return { newLineOffset, oldLineOffset, marker, added, deleted, html: line.html }
+        })
+    }
 </script>
 
 {#if hunks.length === 0}
@@ -18,6 +56,8 @@
         </colgroup>
         <tbody>
             {#each hunks as hunk (hunk.oldRange.startLine)}
+                {@const oldStartLine = hunk.oldRange.startLine}
+                {@const newStartLine = hunk.newRange.startLine}
                 <tr>
                     <td class="header" colspan="3">
                         @@ -{hunk.oldRange.startLine},{hunk.oldRange.lines} +{hunk.newRange.startLine},{hunk.newRange
@@ -27,20 +67,15 @@
                         {/if}
                     </td>
                 </tr>
-                {#each hunk.highlight.lines as line, i (line)}
-                    {@const both = line.kind === DiffHunkLineType.UNCHANGED}
-                    {@const addition = line.kind === DiffHunkLineType.ADDED}
-                    {@const deletion = line.kind === DiffHunkLineType.DELETED}
-                    {@const marker = addition ? '+' : deletion ? '-' : ' '}
-
-                    <tr class:both class:addition class:deletion>
+                {#each linesToDiffInformation(hunk.highlight.lines) as { marker, added, deleted, newLineOffset, oldLineOffset, html }}
+                    <tr class:added class:deleted>
                         <td class="num"
-                            >{#if !addition}{hunk.oldRange.startLine - 1 + i}{/if}</td
+                            >{#if !added}{oldStartLine + oldLineOffset}{/if}</td
                         >
                         <td class="num"
-                            >{#if !deletion}{hunk.newRange.startLine - 1 + i}{/if}</td
+                            >{#if !deleted}{newStartLine + newLineOffset}{/if}</td
                         >
-                        <td class="content" data-diff-marker={marker}>{@html line.html}</td>
+                        <td class="content" data-diff-marker={marker}>{@html html}</td>
                     </tr>
                 {/each}
             {/each}
@@ -52,18 +87,15 @@
     table {
         width: 100%;
         border-collapse: collapse;
-    }
-
-    tr {
         font-family: var(--code-font-family);
         font-size: 0.75rem;
     }
 
-    tr.addition {
+    tr.added {
         --code-bg: var(--diff-add-bg);
     }
 
-    tr.deletion {
+    tr.deleted {
         --code-bg: var(--diff-remove-bg);
     }