Stream git blame results (#44199)

Co-authored-by: Jean-Hadrien Chabran <[email protected]>
Co-authored-by: Philipp Spiess <[email protected]>
Co-authored-by: Taras Yemets <[email protected]>

Author: 4 people

client/web/src/featureFlags/featureFlags.ts

@@ -15,6 +15,7 @@ export type FeatureFlagName =
     | 'admin-analytics-cache-disabled'
     | 'search-input-show-history'
     | 'user-management-disabled'
+    | 'enable-streaming-git-blame'
 
 interface OrgFlagOverride {
     orgID: string

client/web/src/repo/blame/useBlameHunks.ts

@@ -1,16 +1,18 @@
 import { useMemo } from 'react'
 
+import { fetchEventSource } from '@microsoft/fetch-event-source'
 import { formatDistanceStrict } from 'date-fns'
 import { truncate } from 'lodash'
 import { Observable, of } from 'rxjs'
-import { map } from 'rxjs/operators'
+import { map, throttleTime } from 'rxjs/operators'
 
 import { memoizeObservable } from '@sourcegraph/common'
 import { dataOrThrowErrors, gql } from '@sourcegraph/http-client'
 import { makeRepoURI } from '@sourcegraph/shared/src/util/url'
 import { useObservable } from '@sourcegraph/wildcard'
 
 import { requestGraphQL } from '../../backend/graphql'
+import { useFeatureFlag } from '../../featureFlags/useFeatureFlag'
 import { GitBlameResult, GitBlameVariables } from '../../graphql-operations'
 
 import { useBlameVisibility } from './useBlameVisibility'
@@ -24,20 +26,45 @@ interface BlameHunkDisplayInfo {
     message: string
 }
 
-export type BlameHunk = NonNullable<
-    NonNullable<NonNullable<GitBlameResult['repository']>['commit']>['blob']
->['blame'][number] & { displayInfo: BlameHunkDisplayInfo }
+export interface BlameHunk {
+    startLine: number
+    endLine: number
+    message: string
+    rev: string
+    author: {
+        date: string
+        person: {
+            email: string
+            displayName: string
+            user:
+                | undefined
+                | null
+                | {
+                      username: string
+                  }
+        }
+    }
+    commit: {
+        url: string
+        parents: {
+            oid: string
+        }[]
+    }
+    displayInfo: BlameHunkDisplayInfo
+}
 
-const fetchBlame = memoizeObservable(
+const fetchBlameViaGraphQL = memoizeObservable(
     ({
         repoName,
         revision,
         filePath,
+        sourcegraphURL,
     }: {
         repoName: string
         revision: string
         filePath: string
-    }): Observable<Omit<BlameHunk, 'displayInfo'>[] | undefined> =>
+        sourcegraphURL: string
+    }): Observable<{ current: BlameHunk[] | undefined }> =>
         requestGraphQL<GitBlameResult, GitBlameVariables>(
             gql`
                 query GitBlame($repo: String!, $rev: String!, $path: String!) {
@@ -74,65 +101,151 @@ const fetchBlame = memoizeObservable(
             { repo: repoName, rev: revision, path: filePath }
         ).pipe(
             map(dataOrThrowErrors),
-            map(({ repository }) => repository?.commit?.blob?.blame)
+            map(({ repository }) => repository?.commit?.blob?.blame),
+            map(hunks => (hunks ? hunks.map(blame => addDisplayInfoForHunk(blame, sourcegraphURL)) : undefined)),
+            map(hunks => ({ current: hunks }))
         ),
     makeRepoURI
 )
 
+interface RawStreamHunk {
+    author: {
+        Name: string
+        Email: string
+        Date: string
+    }
+    commit: {
+        parents: string[]
+        url: string
+    }
+    commitID: string
+    endLine: number
+    startLine: number
+    filename: string
+    message: string
+}
+
+const fetchBlameViaStreaming = memoizeObservable(
+    ({
+        repoName,
+        revision,
+        filePath,
+        sourcegraphURL,
+    }: {
+        repoName: string
+        revision: string
+        filePath: string
+        sourcegraphURL: string
+    }): Observable<{ current: BlameHunk[] | undefined }> =>
+        new Observable<{ current: BlameHunk[] | undefined }>(subscriber => {
+            const assembledHunks: BlameHunk[] = []
+            const repoAndRevisionPath = `/${repoName}${revision ? `@${revision}` : ''}`
+            fetchEventSource(`/.api/blame${repoAndRevisionPath}/stream/${filePath}`, {
+                method: 'GET',
+                headers: {
+                    'X-Requested-With': 'Sourcegraph',
+                    'X-Sourcegraph-Should-Trace': new URLSearchParams(window.location.search).get('trace') || 'false',
+                },
+                onmessage(event) {
+                    if (event.event === 'hunk') {
+                        const rawHunks: RawStreamHunk[] = JSON.parse(event.data)
+                        for (const rawHunk of rawHunks) {
+                            const hunk: Omit<BlameHunk, 'displayInfo'> = {
+                                startLine: rawHunk.startLine,
+                                endLine: rawHunk.endLine,
+                                message: rawHunk.message,
+                                rev: rawHunk.commitID,
+                                author: {
+                                    date: rawHunk.author.Date,
+                                    person: {
+                                        email: rawHunk.author.Email,
+                                        displayName: rawHunk.author.Name,
+                                        user: null,
+                                    },
+                                },
+                                commit: {
+                                    url: rawHunk.commit.url,
+                                    parents: rawHunk.commit.parents ? rawHunk.commit.parents.map(oid => ({ oid })) : [],
+                                },
+                            }
+                            assembledHunks.push(addDisplayInfoForHunk(hunk, sourcegraphURL))
+                        }
+                        subscriber.next({ current: assembledHunks })
+                    }
+                },
+                onerror(event) {
+                    // eslint-disable-next-line no-console
+                    console.error(event)
+                },
+            }).then(
+                () => subscriber.complete(),
+                error => subscriber.error(error)
+            )
+            // Throttle the results to avoid re-rendering the blame sidebar for every hunk
+        }).pipe(throttleTime(1000, undefined, { leading: true, trailing: true })),
+    makeRepoURI
+)
+
 /**
  * Get display info shared between status bar items and text document decorations.
  */
-const getDisplayInfoFromHunk = (
-    { author, commit, message }: Omit<BlameHunk, 'displayInfo'>,
-    sourcegraphURL: string,
-    now: number
-): BlameHunkDisplayInfo => {
+const addDisplayInfoForHunk = (hunk: Omit<BlameHunk, 'displayInfo'>, sourcegraphURL: string): BlameHunk => {
+    const now = Date.now()
+    const { author, commit, message } = hunk
+
     const displayName = truncate(author.person.displayName, { length: 25 })
     const username = author.person.user ? `(${author.person.user.username}) ` : ''
     const dateString = formatDistanceStrict(new Date(author.date), now, { addSuffix: true })
     const timestampString = new Date(author.date).toLocaleString()
     const linkURL = new URL(commit.url, sourcegraphURL).href
     const content = `${dateString} • ${username}${displayName} [${truncate(message, { length: 45 })}]`
 
-    return {
+    ;(hunk as BlameHunk).displayInfo = {
         displayName,
         username,
         dateString,
         timestampString,
         linkURL,
         message: content,
     }
+    return hunk as BlameHunk
 }
 
+/**
+ * For performance reasons, the hunks array can be mutated in place. To still be
+ * able to propagate updates accordingly, this is wrapped in a ref object that
+ * can be recreated whenever we emit new values.
+ */
 export const useBlameHunks = (
     {
         repoName,
         revision,
         filePath,
+        enableCodeMirror,
     }: {
         repoName: string
         revision: string
         filePath: string
+        enableCodeMirror: boolean
     },
     sourcegraphURL: string
-): BlameHunk[] | undefined => {
+): { current: BlameHunk[] | undefined } => {
+    const [enableStreamingGitBlame, status] = useFeatureFlag('enable-streaming-git-blame')
+
     const [isBlameVisible] = useBlameVisibility()
+    const shouldFetchBlame = isBlameVisible && status !== 'initial'
+
     const hunks = useObservable(
-        useMemo(() => (isBlameVisible ? fetchBlame({ revision, repoName, filePath }) : of(undefined)), [
-            isBlameVisible,
-            revision,
-            repoName,
-            filePath,
-        ])
+        useMemo(
+            () =>
+                shouldFetchBlame
+                    ? enableCodeMirror && enableStreamingGitBlame
+                        ? fetchBlameViaStreaming({ revision, repoName, filePath, sourcegraphURL })
+                        : fetchBlameViaGraphQL({ revision, repoName, filePath, sourcegraphURL })
+                    : of({ current: undefined }),
+            [shouldFetchBlame, enableCodeMirror, enableStreamingGitBlame, revision, repoName, filePath, sourcegraphURL]
+        )
     )
 
-    const hunksWithDisplayInfo = useMemo(() => {
-        const now = Date.now()
-        return hunks?.map(hunk => ({
-            ...hunk,
-            displayInfo: getDisplayInfoFromHunk(hunk, sourcegraphURL, now),
-        }))
-    }, [hunks, sourcegraphURL])
-
-    return hunksWithDisplayInfo
+    return hunks || { current: undefined }
 }

client/web/src/repo/blob/BlameColumn.tsx

@@ -12,7 +12,7 @@ import styles from './BlameColumn.module.scss'
 
 interface BlameColumnProps {
     isBlameVisible?: boolean
-    blameHunks?: BlameHunk[]
+    blameHunks?: { current: BlameHunk[] | undefined }
     codeViewElements: ReplaySubject<HTMLElement | null>
     history: History
 }
@@ -98,7 +98,7 @@ export const BlameColumn = React.memo<BlameColumnProps>(({ isBlameVisible, codeV
                         }
                     }
 
-                    const currentLineDecorations = blameHunks?.find(hunk => hunk.startLine - 1 === index)
+                    const currentLineDecorations = blameHunks?.current?.find(hunk => hunk.startLine - 1 === index)
 
                     // store created cell and corresponding blame hunk (or undefined if no blame hunk)
                     addedCells.push([cell, currentLineDecorations])

client/web/src/repo/blob/Blob.tsx

@@ -140,7 +140,7 @@ export interface BlobProps
     ariaLabel?: string
 
     isBlameVisible?: boolean
-    blameHunks?: BlameHunk[]
+    blameHunks?: { current: BlameHunk[] | undefined }
 }
 
 export interface BlobInfo extends AbsoluteRepoFile, ModeSpec {

client/web/src/repo/blob/BlobPage.tsx

@@ -330,7 +330,10 @@ export const BlobPage: React.FunctionComponent<React.PropsWithChildren<BlobPageP
     }
 
     const [isBlameVisible] = useBlameVisibility()
-    const blameDecorations = useBlameHunks({ repoName, revision, filePath }, props.platformContext.sourcegraphURL)
+    const blameDecorations = useBlameHunks(
+        { repoName, revision, filePath, enableCodeMirror },
+        props.platformContext.sourcegraphURL
+    )
 
     const isSearchNotebook = Boolean(
         blobInfoOrError &&

client/web/src/repo/blob/CodeMirrorBlob.tsx

@@ -2,7 +2,7 @@
  * An experimental implementation of the Blob view using CodeMirror
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 
 import { openSearchPanel } from '@codemirror/search'
 import { Compartment, EditorState, Extension } from '@codemirror/state'
@@ -122,7 +122,10 @@ export const Blob: React.FunctionComponent<BlobProps> = props => {
         [wrapCode, isLightTheme]
     )
 
-    const blameDecorations = useMemo(() => (blameHunks ? [showGitBlameDecorations.of(blameHunks)] : []), [blameHunks])
+    const blameDecorations = useMemo(
+        () => (blameHunks?.current ? [showGitBlameDecorations.of(blameHunks.current)] : []),
+        [blameHunks]
+    )
 
     const preloadGoToDefinition = useExperimentalFeatures(features => features.preloadGoToDefinition ?? false)
 
@@ -249,7 +252,7 @@ export const Blob: React.FunctionComponent<BlobProps> = props => {
     }, [blobProps])
 
     // Update blame information
-    useEffect(() => {
+    useLayoutEffect(() => {
         if (editor) {
             editor.dispatch({ effects: blameDecorationsCompartment.reconfigure(blameDecorations) })
         }

client/web/src/repo/blob/codemirror/blame-decorations.tsx

@@ -139,9 +139,10 @@ export const showGitBlameDecorations = Facet.define<BlameHunk[], BlameHunk[]>({
                 const hunk = longestColumnDecorations(view.state.facet(facet))
                 return new BlameDecoratorMarker(view, hunk, true)
             },
-            // Markers need to be updated when theme changes
+            // Markers need to be updated when theme changes or the hunks change
             lineMarkerChange: update =>
-                update.startState.facet(EditorView.darkTheme) !== update.state.facet(EditorView.darkTheme),
+                update.startState.facet(EditorView.darkTheme) !== update.state.facet(EditorView.darkTheme) ||
+                update.startState.facet(facet) !== update.state.facet(facet),
         }),
         hoveredLine,
     ],

cmd/frontend/internal/httpapi/httpapi.go

@@ -126,6 +126,9 @@ func NewHandler(
 	// Return the minimum src-cli version that's compatible with this instance
 	m.Get(apirouter.SrcCli).Handler(trace.Route(newSrcCliVersionHandler(logger)))
 
+	gsClient := gitserver.NewClient(db)
+	m.Get(apirouter.GitBlameStream).Handler(trace.Route(handleStreamBlame(logger, db, gsClient)))
+
 	// Set up the src-cli version cache handler (this will effectively be a
 	// no-op anywhere other than dot-com).
 	m.Get(apirouter.SrcCliVersionCache).Handler(trace.Route(releasecache.NewHandler(logger)))

cmd/frontend/internal/httpapi/router/router.go

@@ -11,8 +11,9 @@ const (
 	LSIFUpload = "lsif.upload"
 	GraphQL    = "graphql"
 
-	SearchStream  = "search.stream"
-	ComputeStream = "compute.stream"
+	SearchStream   = "search.stream"
+	ComputeStream  = "compute.stream"
+	GitBlameStream = "git.blame.stream"
 
 	SrcCli             = "src-cli"
 	SrcCliVersionCache = "src-cli.version-cache"
@@ -69,6 +70,7 @@ func New(base *mux.Router) *mux.Router {
 	base.Path("/lsif/upload").Methods("POST").Name(LSIFUpload)
 	base.Path("/search/stream").Methods("GET").Name(SearchStream)
 	base.Path("/compute/stream").Methods("GET", "POST").Name(ComputeStream)
+	base.Path("/blame/" + routevar.Repo + routevar.RepoRevSuffix + "/stream/{Path:.*}").Methods("GET").Name(GitBlameStream)
 	base.Path("/src-cli/versions/{rest:.*}").Methods("GET", "POST").Name(SrcCliVersionCache)
 	base.Path("/src-cli/{rest:.*}").Methods("GET").Name(SrcCli)