Merge Diff components (asm-differ & objdiff) (#1333)

Author: encounter

frontend/src/components/Diff/CompilationPanel.tsx

@@ -11,7 +11,6 @@ import { ThreeWayDiffBase, useThreeWayDiffBase } from "@/lib/settings"
 import GhostButton from "../GhostButton"
 
 import Diff from "./Diff"
-import NewDiff from "./NewDiff"
 
 function getProblemState(compilation: api.Compilation): ProblemState {
     if (!compilation.success) {
@@ -105,25 +104,16 @@ export default function CompilationPanel({ scratch, compilation, isCompiling, is
             }}
         >
             <Allotment.Pane>
-                {objdiffResult ? (
-                    <NewDiff
-                        diff={objdiffResult}
-                        diffLabel={scratch.diff_label}
-                        isCompiling={isCompiling}
-                        isCurrentOutdated={isCompilationOld || problemState == ProblemState.ERRORS}
-                        selectedSourceLine={selectedSourceLine}
-                    />
-                ) : (
-                    <Diff
-                        diff={diff}
-                        isCompiling={isCompiling}
-                        isCurrentOutdated={isCompilationOld || problemState == ProblemState.ERRORS}
-                        threeWayDiffEnabled={threeWayDiffEnabled}
-                        setThreeWayDiffEnabled={setThreeWayDiffEnabled}
-                        threeWayDiffBase={threeWayDiffBase}
-                        selectedSourceLine={selectedSourceLine}
-                    />
-                )}
+                <Diff
+                    diff={diff || objdiffResult}
+                    diffLabel={scratch.diff_label}
+                    isCompiling={isCompiling}
+                    isCurrentOutdated={isCompilationOld || problemState == ProblemState.ERRORS}
+                    threeWayDiffEnabled={threeWayDiffEnabled}
+                    setThreeWayDiffEnabled={setThreeWayDiffEnabled}
+                    threeWayDiffBase={threeWayDiffBase}
+                    selectedSourceLine={selectedSourceLine}
+                />
             </Allotment.Pane>
             <Allotment.Pane
                 minSize={problemsCollapsedHeight}

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

@@ -93,11 +93,11 @@
 
     align-items: stretch;
 
+    color: var(--g1600);
+
     > .cell {
         overflow: hidden;
 
-        color: var(--g1600);
-
         padding: 0 1em;
 
         cursor: default;
@@ -131,12 +131,14 @@
 .immediate { color: #6d6dff; }
 .stack { color: #abc501; }
 .register { color: #aa8b00; }
+.symbol { color: #fff; }
 
 .delay_slot {
     font-weight: bold;
     color: #969896;
 }
 
+.diff_any { background-color: rgba(255, 255, 255, 0.02); }
 .diff_change { color: #6d6dff; }
 .diff_add { color: #45bd00; }
 .diff_remove { color: #c82829; }

frontend/src/components/Diff/Diff.tsx

@@ -1,12 +1,11 @@
 /* eslint css-modules/no-unused-class: off */
 
-import { createContext, CSSProperties, forwardRef, HTMLAttributes, memo, useContext, useRef, useState } from "react"
+import { createContext, CSSProperties, forwardRef, HTMLAttributes, useRef, useState } from "react"
 
 import { VersionsIcon } from "@primer/octicons-react"
-import classNames from "classnames"
-import memoize from "memoize-one"
+import { DiffResult } from "objdiff-wasm"
 import AutoSizer from "react-virtualized-auto-sizer"
-import { FixedSizeList, areEqual } from "react-window"
+import { FixedSizeList } from "react-window"
 
 import * as api from "@/lib/api"
 import { useSize } from "@/lib/hooks"
@@ -15,93 +14,10 @@ import { ThreeWayDiffBase, useCodeFontSize } from "@/lib/settings"
 import Loading from "../loading.svg"
 
 import styles from "./Diff.module.scss"
+import * as AsmDiffer from "./DiffRowAsmDiffer"
+import * as Objdiff from "./DiffRowObjdiff"
 import DragBar from "./DragBar"
-import { Highlighter, useHighlighers } from "./Highlighter"
-
-const PADDING_TOP = 8
-const PADDING_BOTTOM = 8
-
-// Regex for tokenizing lines for click-to-highlight purposes.
-// Strings matched by the first regex group (spaces, punctuation)
-// are treated as non-highlightable.
-const RE_TOKEN = /([ \t,()[\]:]+|~>)|%(?:lo|hi)\([^)]+\)|[^ \t,()[\]:]+/g
-
-const SelectedSourceLineContext = createContext<number | null>(null)
-
-function FormatDiffText({ texts, highlighter }: {
-    texts: api.DiffText[]
-    highlighter: Highlighter
-}) {
-    return <> {
-        texts.map((t, index1) =>
-            Array.from(t.text.matchAll(RE_TOKEN)).map((match, index2) => {
-                const text = match[0]
-                const isToken = !match[1]
-                const key = index1 + "," + index2
-
-                let className: string
-                if (t.format == "rotation") {
-                    className = styles[`rotation${t.index % 9}`]
-                } else if (t.format) {
-                    className = styles[t.format]
-                }
-
-                return <span
-                    key={key}
-                    className={classNames(className, {
-                        [styles.highlightable]: isToken,
-                        [styles.highlighted]: (highlighter.value === text),
-                    })}
-                    onClick={e => {
-                        if (isToken) {
-                            highlighter.select(text)
-                            e.stopPropagation()
-                        }
-                    }}
-                >
-                    {text}
-                </span>
-            })
-        )
-    }</>
-}
-
-function DiffCell({ cell, className, highlighter }: {
-    cell: api.DiffCell | undefined
-    className?: string
-    highlighter: Highlighter
-}) {
-    const selectedSourceLine = useContext(SelectedSourceLineContext)
-    const hasLineNo = typeof cell?.src_line != "undefined"
-
-    if (!cell)
-        return <div className={classNames(styles.cell, className)} />
-
-    return <div
-        className={classNames(styles.cell, className, {
-            [styles.highlight]: hasLineNo && cell.src_line == selectedSourceLine,
-        })}
-    >
-        {hasLineNo && <span className={styles.lineNumber}>{cell.src_line}</span>}
-        <FormatDiffText texts={cell.text} highlighter={highlighter} />
-    </div>
-}
-
-const DiffRow = memo(function DiffRow({ data, index, style }: { data: DiffListData, index: number, style: CSSProperties }) {
-    const row = data.diff?.rows?.[index]
-    return <li
-        className={styles.row}
-        style={{
-            ...style,
-            top: `${parseFloat(style.top.toString()) + PADDING_TOP}px`,
-            lineHeight: `${style.height.toString()}px`,
-        }}
-    >
-        <DiffCell cell={row.base} highlighter={data.highlighters[0]} />
-        <DiffCell cell={row.current} highlighter={data.highlighters[1]} />
-        <DiffCell cell={row.previous} highlighter={data.highlighters[2]} />
-    </li>
-}, areEqual)
+import { useHighlighers } from "./Highlighter"
 
 // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list
 const innerElementType = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(({ style, ...rest }, ref) => {
@@ -116,21 +32,26 @@ const innerElementType = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListEl
 })
 innerElementType.displayName = "innerElementType"
 
-interface DiffListData {
-    diff: api.DiffOutput | null
-    highlighters: Highlighter[]
+const isAsmDifferOutput = (diff: api.DiffOutput | DiffResult): diff is api.DiffOutput => {
+    return Object.prototype.hasOwnProperty.call(diff, "arch_str")
 }
 
-const createDiffListData = memoize((
-    diff: api.DiffOutput | null,
-    highlighters: Highlighter[]
-): DiffListData => {
-    return { diff, highlighters }
-})
-
-function DiffBody({ diff, fontSize }: { diff: api.DiffOutput | null, fontSize: number | undefined }) {
+function DiffBody({ diff, diffLabel, fontSize }: { diff: api.DiffOutput | DiffResult | null, diffLabel: string | null, fontSize: number | undefined }) {
     const { highlighters, setHighlightAll } = useHighlighers(3)
-    const itemData = createDiffListData(diff, highlighters)
+
+    if (!diff) {
+        return <div className={styles.bodyContainer} />
+    }
+
+    let itemData: AsmDiffer.DiffListData | Objdiff.DiffListData
+    let DiffRow: typeof AsmDiffer.DiffRow | typeof Objdiff.DiffRow
+    if (isAsmDifferOutput(diff)) {
+        itemData = AsmDiffer.createDiffListData(diff, diffLabel, highlighters)
+        DiffRow = AsmDiffer.DiffRow
+    } else {
+        itemData = Objdiff.createDiffListData(diff, diffLabel, highlighters)
+        DiffRow = Objdiff.DiffRow
+    }
 
     return <div
         className={styles.bodyContainer}
@@ -139,22 +60,22 @@ function DiffBody({ diff, fontSize }: { diff: api.DiffOutput | null, fontSize: n
             setHighlightAll(null)
         }}
     >
-        {diff?.rows && <AutoSizer>
+        <AutoSizer>
             {({ height, width }: {height: number|undefined, width:number|undefined}) => (
                 <FixedSizeList
                     className={styles.body}
-                    itemCount={diff.rows.length}
+                    itemCount={itemData.itemCount}
                     itemData={itemData}
                     itemSize={(fontSize ?? 12) * 1.33}
                     overscanCount={40}
                     width={width}
                     height={height}
                     innerElementType={innerElementType}
                 >
-                    {DiffRow}
+                    {DiffRow as any}
                 </FixedSizeList>
             )}
-        </AutoSizer>}
+        </AutoSizer>
     </div>
 }
 
@@ -173,8 +94,14 @@ function ThreeWayToggleButton({ enabled, setEnabled }: { enabled: boolean, setEn
     </button>
 }
 
+export const PADDING_TOP = 8
+export const PADDING_BOTTOM = 8
+
+export const SelectedSourceLineContext = createContext<number | null>(null)
+
 export type Props = {
-    diff: api.DiffOutput | null
+    diff: api.DiffOutput | DiffResult | null
+    diffLabel: string | null
     isCompiling: boolean
     isCurrentOutdated: boolean
     threeWayDiffEnabled: boolean
@@ -183,7 +110,7 @@ export type Props = {
     selectedSourceLine: number | null
 }
 
-export default function Diff({ diff, isCompiling, isCurrentOutdated, threeWayDiffEnabled, setThreeWayDiffEnabled, threeWayDiffBase, selectedSourceLine }: Props) {
+export default function Diff({ diff, diffLabel, isCompiling, isCurrentOutdated, threeWayDiffEnabled, setThreeWayDiffEnabled, threeWayDiffBase, selectedSourceLine }: Props) {
     const [fontSize] = useCodeFontSize()
 
     const container = useSize<HTMLDivElement>()
@@ -245,7 +172,7 @@ export default function Diff({ diff, isCompiling, isCurrentOutdated, threeWayDif
             </div>}
         </div>
         <SelectedSourceLineContext.Provider value={selectedSourceLine}>
-            <DiffBody diff={diff} fontSize={fontSize} />
+            <DiffBody diff={diff} diffLabel={diffLabel} fontSize={fontSize} />
         </SelectedSourceLineContext.Provider>
     </div>
 }

frontend/src/components/Diff/DiffRowAsmDiffer.tsx

@@ -0,0 +1,107 @@
+/* eslint css-modules/no-unused-class: off */
+
+import { CSSProperties, memo, useContext } from "react"
+
+import classNames from "classnames"
+import memoize from "memoize-one"
+import { areEqual } from "react-window"
+
+import * as api from "@/lib/api"
+
+import { PADDING_TOP, SelectedSourceLineContext } from "./Diff"
+import styles from "./Diff.module.scss"
+import { Highlighter } from "./Highlighter"
+
+// Regex for tokenizing lines for click-to-highlight purposes.
+// Strings matched by the first regex group (spaces, punctuation)
+// are treated as non-highlightable.
+const RE_TOKEN = /([ \t,()[\]:]+|~>)|%(?:lo|hi)\([^)]+\)|[^ \t,()[\]:]+/g
+
+function FormatDiffText({ texts, highlighter }: {
+    texts: api.DiffText[]
+    highlighter: Highlighter
+}) {
+    return <> {
+        texts.map((t, index1) =>
+            Array.from(t.text.matchAll(RE_TOKEN)).map((match, index2) => {
+                const text = match[0]
+                const isToken = !match[1]
+                const key = index1 + "," + index2
+
+                let className: string
+                if (t.format == "rotation") {
+                    className = styles[`rotation${t.index % 9}`]
+                } else if (t.format) {
+                    className = styles[t.format]
+                }
+
+                return <span
+                    key={key}
+                    className={classNames(className, {
+                        [styles.highlightable]: isToken,
+                        [styles.highlighted]: (highlighter.value === text),
+                    })}
+                    onClick={e => {
+                        if (isToken) {
+                            highlighter.select(text)
+                            e.stopPropagation()
+                        }
+                    }}
+                >
+                    {text}
+                </span>
+            })
+        )
+    }</>
+}
+
+function DiffCell({ cell, className, highlighter }: {
+    cell: api.DiffCell | undefined
+    className?: string
+    highlighter: Highlighter
+}) {
+    const selectedSourceLine = useContext(SelectedSourceLineContext)
+    const hasLineNo = typeof cell?.src_line != "undefined"
+
+    if (!cell)
+        return <div className={classNames(styles.cell, className)} />
+
+    return <div
+        className={classNames(styles.cell, className, {
+            [styles.highlight]: hasLineNo && cell.src_line == selectedSourceLine,
+        })}
+    >
+        {hasLineNo && <span className={styles.lineNumber}>{cell.src_line}</span>}
+        <FormatDiffText texts={cell.text} highlighter={highlighter} />
+    </div>
+}
+
+export type DiffListData = {
+    diff: api.DiffOutput | null
+    itemCount: number
+    highlighters: Highlighter[]
+}
+
+export const createDiffListData = memoize((
+    diff: api.DiffOutput | null,
+    _diffLabel: string,
+    highlighters: Highlighter[]
+): DiffListData => {
+    return { diff, highlighters, itemCount: diff?.rows?.length ?? 0 }
+})
+
+export const DiffRow = memo(function DiffRow({ data, index, style }: { data: DiffListData, index: number, style: CSSProperties }) {
+    const row = data.diff?.rows?.[index]
+    return <li
+        className={styles.row}
+        style={{
+            ...style,
+            top: `${parseFloat(style.top.toString()) + PADDING_TOP}px`,
+            lineHeight: `${style.height.toString()}px`,
+        }}
+    >
+        <DiffCell cell={row.base} highlighter={data.highlighters[0]} />
+        <DiffCell cell={row.current} highlighter={data.highlighters[1]} />
+        <DiffCell cell={row.previous} highlighter={data.highlighters[2]} />
+    </li>
+}, areEqual)