Skip to content

Commit b0ad058

Browse files
phrdangphrdang
committed
Display unified, collapsed diff by default; otherwise show basic file viewer
1 parent 4c120af commit b0ad058

3 files changed

Lines changed: 145 additions & 70 deletions

File tree

‎src/snapshots-app/client/bundles/components/submission/tabs/timeline/BasicFileViewer.jsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from "react";
2+
3+
import Editor from "@monaco-editor/react";
4+
5+
import "./FileViewer.css";
6+
7+
function BasicFileViewer({ code, language, lightMode }) {
8+
9+
return (
10+
<>
11+
<Editor
12+
defaultLanguage={language}
13+
defaultValue={code}
14+
theme={lightMode ? "light" : "vs-dark"}
15+
options={{
16+
renderValidationDecorations: "on",
17+
domReadOnly: true,
18+
readOnly: true,
19+
renderLineHighlight: "all",
20+
renderWhitespace: "all",
21+
rulers: [80],
22+
scrollBeyondLastLine: false,
23+
}}
24+
/>
25+
</>
26+
);
27+
}
28+
29+
export default BasicFileViewer;

‎src/snapshots-app/client/bundles/components/submission/tabs/timeline/DiffViewer.jsx‎

Lines changed: 73 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,15 @@ import { DiffEditor } from "@monaco-editor/react";
1313
// TODO I have been accidentally relying on this import for styling the entire website
1414
import "@git-diff-view/react/styles/diff-view.css";
1515

16-
function DiffViewer({ open, onClose, prevFileContents, currentFileContents }) {
16+
// TODO refactor properly
17+
function DiffViewer({
18+
open,
19+
onClose,
20+
prevFileContents,
21+
currentFileContents,
22+
lightMode = false,
23+
renderSideBySide = false,
24+
}) {
1725
const editorRef = useRef(null);
1826

1927
const onDiffEditorMount = (editor, monaco) => {
@@ -34,58 +42,71 @@ function DiffViewer({ open, onClose, prevFileContents, currentFileContents }) {
3442
};
3543

3644
return (
37-
<Dialog
38-
open={open}
39-
onClose={onClose}
40-
aria-labelledby="diff-viewer-dialog-title"
41-
aria-describedby="diff-viewer-dialog-description"
42-
maxWidth="xl"
43-
fullWidth
44-
>
45-
<DialogTitle id="diff-viewer-dialog-title">Diff Viewer</DialogTitle>
46-
<DialogContent>
47-
<ButtonGroup
48-
sx={{
49-
marginBottom: "1rem",
50-
}}
45+
// <Dialog
46+
// open={open}
47+
// onClose={onClose}
48+
// aria-labelledby="diff-viewer-dialog-title"
49+
// aria-describedby="diff-viewer-dialog-description"
50+
// maxWidth="xl"
51+
// fullWidth
52+
// >
53+
// <DialogTitle id="diff-viewer-dialog-title">Diff Viewer</DialogTitle>
54+
// <DialogContent>
55+
<>
56+
<ButtonGroup
57+
sx={{
58+
marginBottom: "1rem",
59+
position: "sticky",
60+
}}
61+
>
62+
<Button
63+
size="small"
64+
variant="outlined"
65+
startIcon={<ArrowUpwardIcon />}
66+
onClick={goToPreviousDiff}
5167
>
52-
<Button
53-
size="small"
54-
variant="outlined"
55-
startIcon={<ArrowUpwardIcon />}
56-
onClick={goToPreviousDiff}
57-
>
58-
Previous Change
59-
</Button>
60-
<Button
61-
size="small"
62-
variant="outlined"
63-
endIcon={<ArrowDownwardIcon />}
64-
onClick={goToNextDiff}
65-
>
66-
Next Change
67-
</Button>
68-
</ButtonGroup>
69-
<DiffEditor
70-
height="100vh"
71-
original={prevFileContents}
72-
modified={currentFileContents}
73-
language="python"
74-
onMount={onDiffEditorMount}
75-
// https://github.com/suren-atoyan/monaco-react/issues/647#issuecomment-2897027817
76-
keepCurrentOriginalModel={true}
77-
keepCurrentModifiedModel={true}
78-
options={{
79-
readOnly: true,
80-
domReadOnly: true,
81-
renderLineHighlight: "all",
82-
renderWhitespace: "all",
83-
rulers: [80],
84-
scrollBeyondLastLine: false,
85-
}}
86-
/>
87-
</DialogContent>
88-
</Dialog>
68+
Previous Change
69+
</Button>
70+
<Button
71+
size="small"
72+
variant="outlined"
73+
endIcon={<ArrowDownwardIcon />}
74+
onClick={goToNextDiff}
75+
>
76+
Next Change
77+
</Button>
78+
</ButtonGroup>
79+
<DiffEditor
80+
height="100vh"
81+
original={prevFileContents}
82+
modified={currentFileContents}
83+
language="python"
84+
theme={lightMode ? "light" : "vs-dark"}
85+
onMount={onDiffEditorMount}
86+
// https://github.com/suren-atoyan/monaco-react/issues/647#issuecomment-2897027817
87+
keepCurrentOriginalModel={true}
88+
keepCurrentModifiedModel={true}
89+
options={{
90+
readOnly: true,
91+
domReadOnly: true,
92+
renderLineHighlight: "all",
93+
renderWhitespace: "all",
94+
rulers: [80],
95+
scrollBeyondLastLine: false,
96+
renderSideBySide: renderSideBySide,
97+
// Enable the auto-collapse feature
98+
hideUnchangedRegions: {
99+
enabled: true,
100+
contextLineCount: 5, // Lines of unchanged code to show around a diff
101+
minimumLineCount: 3, // Minimum unchanged lines required to trigger a collapse
102+
// TODO this isn't working properly
103+
revealLineCount: 20, // How many lines to reveal when clicking the "expand" button
104+
},
105+
}}
106+
/>
107+
</>
108+
// {/* </DialogContent>
109+
// </Dialog> */}
89110
);
90111
}
91112

‎src/snapshots-app/client/bundles/components/submission/tabs/timeline/TimelineTab.jsx‎

Lines changed: 43 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,15 @@ import { FormControl, InputLabel } from "@mui/material";
1919
import DifferenceIcon from "@mui/icons-material/Difference";
2020

2121
import FileViewer from "./FileViewer";
22+
import BasicFileViewer from "./BasicFileViewer";
2223
import Graphs from "./Graphs";
2324
import Timeline from "./Timeline";
2425
import AutograderOutputDialog from "./AutograderOutputDialog";
2526
import UnlockingTestOutputDialog from "./UnlockingTestOutputDialog";
2627
import DiffViewer from "./DiffViewer";
2728
import InfoTooltip from "../../../common/InfoTooltip";
2829
import { backupsAtom } from "../../../../state/atoms";
30+
import { Editor } from "@monaco-editor/react";
2931

3032
// TODO minWidth: 0 prevent main content from stretching out to sidebars, but this seems rather hacky?
3133

@@ -428,11 +430,12 @@ function TimelineTab() {
428430
{/* TODO make width more responsive */}
429431
<MainContent>
430432
{/* Main Content Area */}
433+
{/* TODO make scrolling less awkward */}
431434
<div
432435
style={{
433-
position: "sticky",
434-
top: -20,
435-
zIndex: 10,
436+
// position: "sticky",
437+
// top: -20,
438+
// zIndex: 10,
436439
background: "white",
437440
paddingBottom: "1rem",
438441
marginBottom: "1rem",
@@ -467,7 +470,7 @@ function TimelineTab() {
467470
></FormControlLabel>
468471
</FormGroup>
469472

470-
{selectedBackup !== 0 &&
473+
{/* {selectedBackup !== 0 &&
471474
code === "" &&
472475
prevFileContents === "" ? (
473476
<CircularProgress />
@@ -495,7 +498,7 @@ function TimelineTab() {
495498
? "No diff available"
496499
: "Diff available"}
497500
</Tooltip>
498-
)}
501+
)} */}
499502

500503
<Tooltip title="Copy code">
501504
<IconButton
@@ -531,17 +534,39 @@ function TimelineTab() {
531534
{code === "" ? (
532535
<CircularProgress />
533536
) : (
534-
<FileViewer
535-
code={code}
536-
language={getLanguage(file)}
537-
lightMode={lightMode}
538-
lintErrors={lintErrors}
539-
// NOTE: This is needed so that the FileViewer component
540-
// re-mounts after DiffViewer dialog closes, otherwise
541-
// error occurs because Monaco editor ref gets disposed
542-
// when DiffViewer dialog opens
543-
key={`${file}-${diffViewerOpen}`}
544-
/>
537+
<div style={{ paddingLeft: "1rem", paddingRight: "1rem", height: "100%" }}>
538+
{selectedBackup === 0 ||
539+
code === "" ||
540+
prevFileContents === "" ||
541+
prevFileContents === code ? (
542+
<BasicFileViewer
543+
code={code}
544+
language={"python"}
545+
lightMode={lightMode}
546+
/>
547+
) : (
548+
<DiffViewer
549+
open={true}
550+
onClose={() => setDiffViewerOpen(false)}
551+
prevBackup={backups[selectedBackup - 1]}
552+
currentFileContents={code}
553+
selectedFile={file}
554+
prevFileContents={prevFileContents}
555+
lightMode={lightMode}
556+
/>
557+
)}
558+
</div>
559+
// <FileViewer
560+
// code={code}
561+
// language={getLanguage(file)}
562+
// lightMode={lightMode}
563+
// lintErrors={lintErrors}
564+
// // NOTE: This is needed so that the FileViewer component
565+
// // re-mounts after DiffViewer dialog closes, otherwise
566+
// // error occurs because Monaco editor ref gets disposed
567+
// // when DiffViewer dialog opens
568+
// key={`${file}-${diffViewerOpen}`}
569+
// />
545570
)}
546571

547572
<Toolbar />
@@ -571,14 +596,14 @@ function TimelineTab() {
571596

572597
{getOutputDialog()}
573598

574-
<DiffViewer
599+
{/* <DiffViewer
575600
open={diffViewerOpen}
576601
onClose={() => setDiffViewerOpen(false)}
577602
prevBackup={backups[selectedBackup - 1]}
578603
currentFileContents={code}
579604
selectedFile={file}
580605
prevFileContents={prevFileContents}
581-
/>
606+
/> */}
582607
</Box>
583608
);
584609
}

0 commit comments

Comments
 (0)