Skip to content

Commit dc28301

Browse files
FindHaofacebook-github-bot
FindHao
authored and
facebook-github-bot
committed
PR7: UI-polish and improvement (#115)
Summary: - UI/UX refinements, navigation polish, and cleanup of debug/translation issues. - Moves "File Diff" to the last tab; renames tab label "IR Code Comparison" to "IR Code". #### Key Changes - `website/src/App.tsx`: share button reflects File Diff params; Home resets active tab to overview and clears `view` param. - `website/src/components/CopyCodeButton.tsx`: fixes invalid SVG props to camelCase (`strokeWidth`, `strokeLinecap`, `strokeLinejoin`). - `website/src/pages/FileDiffView.tsx`: compact spacing, default diff height, lazy All IRs, stable keys for diff instances. - Removes debug prints and translates Chinese comments to English across touched files. Pull Request resolved: #115 Reviewed By: sfzhu93 Differential Revision: D82745984 Pulled By: FindHao fbshipit-source-id: 77e1e96ca41b5d57f43607b1645eb4bd4a69abb6
1 parent 3890faf commit dc28301

File tree

3 files changed

+66
-38
lines changed

3 files changed

+66
-38
lines changed

‎website/src/App.tsx‎

Lines changed: 46 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,13 @@ function App() {
288288
});
289289
}, [sess, setActiveTab]);
290290

291+
// Clear FileDiff preview when entering/returning to File Diff to avoid preview intercepting other views
292+
useEffect(() => {
293+
if (activeTab === 'file_diff' && sess.preview.active) {
294+
sess.clearPreview();
295+
}
296+
}, [activeTab, sess]);
297+
291298
// Show loading indicator while data is being fetched
292299
if (loading) {
293300
return (
@@ -343,6 +350,7 @@ function App() {
343350
if (sess.preview.view === 'overview') {
344351
return (
345352
<KernelOverview
353+
key={`preview-overview-${sess.preview.side}-${idx}`}
346354
kernels={kernelsSrc}
347355
onViewIR={handleViewSingleIR}
348356
selectedKernel={idx}
@@ -351,11 +359,26 @@ function App() {
351359
);
352360
}
353361
if (sess.preview.view === 'ir') {
354-
return <CodeView kernels={kernelsSrc} selectedKernel={idx} />;
362+
return (
363+
<CodeView
364+
key={`preview-ir-${sess.preview.side}-${idx}`}
365+
kernels={kernelsSrc}
366+
selectedKernel={idx}
367+
/>
368+
);
355369
}
356370
return null;
357371
} else if (!dataLoaded) {
358-
// Show welcome screen if no data is loaded
372+
// Show welcome screen if no data is loaded, but allow File Diff tab to render its view when selected
373+
if (activeTab === 'file_diff') {
374+
return (
375+
<FileDiffView
376+
kernelsLeft={kernels}
377+
selectedLeftIndex={Math.max(0, selectedKernel)}
378+
leftLoadedUrl={loadedUrl}
379+
/>
380+
);
381+
}
359382
return (
360383
<WelcomeScreen
361384
loadDefaultData={loadDefaultData}
@@ -389,7 +412,13 @@ function App() {
389412
);
390413
}
391414
if (activeTab === "comparison") {
392-
return <CodeView kernels={kernels} selectedKernel={selectedKernel} />;
415+
return (
416+
<CodeView
417+
key={`codeview-main-${selectedKernel}`}
418+
kernels={kernels}
419+
selectedKernel={selectedKernel}
420+
/>
421+
);
393422
}
394423
if (activeTab === "file_diff") {
395424
return (
@@ -474,30 +503,19 @@ function App() {
474503
isLoading={loading}
475504
/>
476505

477-
{/* Tab navigation: File Diff is always visible; other tabs only when data is loaded and not in IR view */}
506+
{/* Tab navigation: File Diff button placed as the last (rightmost) button */}
478507
<div className="flex space-x-4">
479-
<button
480-
className={`px-3 py-2 text-sm font-medium rounded-md ${activeTab === "file_diff" ? "bg-blue-700 text-white shadow-md" : "bg-blue-100 text-blue-700 hover:bg-blue-200"
481-
}`}
482-
onClick={() => {
483-
setActiveTab("file_diff");
484-
}}
485-
>
486-
File Diff
487-
</button>
488-
489508
{dataLoaded && kernels.length > 0 && !selectedIR && (
490509
<>
491510
<button
492511
className={`px-3 py-2 text-sm font-medium rounded-md ${activeTab === "overview" ? "bg-blue-700 text-white shadow-md" : "bg-blue-100 text-blue-700 hover:bg-blue-200"
493512
}`}
494513
onClick={() => {
514+
if (sess.preview?.active) sess.clearPreview();
495515
setActiveTab("overview");
496516

497-
// Update URL parameters when switching to overview
498517
if (loadedUrl) {
499518
const newUrl = new URL(window.location.href);
500-
// Remove view parameter but keep kernel_hash
501519
newUrl.searchParams.delete("view");
502520
window.history.replaceState({}, "", newUrl.toString());
503521
}
@@ -509,12 +527,11 @@ function App() {
509527
className={`px-3 py-2 text-sm font-medium rounded-md ${activeTab === "comparison" ? "bg-blue-700 text-white shadow-md" : "bg-blue-100 text-blue-700 hover:bg-blue-200"
510528
}`}
511529
onClick={() => {
530+
if (sess.preview?.active) sess.clearPreview();
512531
setActiveTab("comparison");
513532

514-
// Update URL parameters when switching to comparison view
515533
if (loadedUrl) {
516534
const newUrl = new URL(window.location.href);
517-
// Add view parameter
518535
newUrl.searchParams.set("view", "ir_code_comparison");
519536
window.history.replaceState({}, "", newUrl.toString());
520537
}
@@ -524,6 +541,17 @@ function App() {
524541
</button>
525542
</>
526543
)}
544+
545+
<button
546+
className={`px-3 py-2 text-sm font-medium rounded-md ${activeTab === "file_diff" ? "bg-blue-700 text-white shadow-md" : "bg-blue-100 text-blue-700 hover:bg-blue-200"
547+
}`}
548+
onClick={() => {
549+
if (sess.preview?.active) sess.clearPreview();
550+
setActiveTab("file_diff");
551+
}}
552+
>
553+
File Diff
554+
</button>
527555
</div>
528556
</div>
529557
</div>

‎website/src/components/DiffComparisonView.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const DiffComparisonView: React.FC<DiffComparisonViewProps> = ({
2121
leftContent,
2222
rightContent,
2323
language = "plaintext",
24-
height = "calc(100vh - 16rem)",
24+
height = "calc(100vh - 12rem)",
2525
options,
2626
}) => {
2727
const monacoOptions = useMemo(() => {
@@ -160,8 +160,6 @@ const DiffComparisonView: React.FC<DiffComparisonViewProps> = ({
160160
// Ensure both panes use the same wrapping and scrollbar behavior
161161
onMount={(editor: any) => {
162162
try {
163-
// Expose for optional console debugging
164-
(window as any).__DIFF = editor;
165163
editorRef.current = editor;
166164

167165
const applyWrap = (_when: string) => {
@@ -205,3 +203,5 @@ const DiffComparisonView: React.FC<DiffComparisonViewProps> = ({
205203
};
206204

207205
export default DiffComparisonView;
206+
207+

‎website/src/pages/FileDiffView.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -143,8 +143,7 @@ const FileDiffView: React.FC<FileDiffViewProps> = ({ kernelsLeft, selectedLeftIn
143143
try { if (li >= 0) sess.setLeftIdx(li); } catch {}
144144
}
145145
} catch (e) {
146-
console.warn('[FDV] loadLeft(URL) error:', e);
147-
// ignore errors here; show via UI if needed later
146+
console.warn("[FDV] loadLeft(URL) error:", e);
148147
}
149148
}
150149
if (leftLoadedUrlLocal) {
@@ -186,10 +185,10 @@ const FileDiffView: React.FC<FileDiffViewProps> = ({ kernelsLeft, selectedLeftIn
186185
if (sessLeftLen === 0 && kernelsLeft.length > 0) {
187186
if (leftLoadedUrl) {
188187
sess.setLeftFromUrl(leftLoadedUrl, kernelsLeft);
189-
188+
190189
} else {
191190
sess.setLeftFromLocal(kernelsLeft);
192-
191+
193192
}
194193
sess.setLeftIdx(Math.max(0, leftIdx));
195194
}
@@ -423,7 +422,6 @@ const FileDiffView: React.FC<FileDiffViewProps> = ({ kernelsLeft, selectedLeftIn
423422
setLeftLoadedFromLocal(true);
424423
setLeftLoadedUrlLocal(null);
425424
sess.setLeftFromLocal(processed);
426-
console.debug('[FDV] loadLeft(Local): kernels=', processed.length);
427425
// select first by default
428426
setLeftIdx(0);
429427
try { sess.setLeftIdx(0); } catch {}
@@ -439,14 +437,14 @@ const FileDiffView: React.FC<FileDiffViewProps> = ({ kernelsLeft, selectedLeftIn
439437
};
440438

441439
return (
442-
<div className="p-6">
443-
<h1 className="text-2xl font-bold text-gray-800 mb-3">File Diff</h1>
440+
<div className="p-4">
441+
<h1 className="text-xl font-semibold text-gray-800 mb-2">File Diff</h1>
444442

445-
<div className="bg-white rounded-lg p-3 mb-3 shadow border border-gray-200">
446-
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
443+
<div className="bg-white rounded-lg p-3 mb-3 border border-gray-200">
444+
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
447445
<div>
448446
<div className="text-sm text-gray-500 mb-1">Left Source (json_url)</div>
449-
<div className="flex items-center gap-2 mb-2">
447+
<div className="flex items-center gap-2 mb-1">
450448
<input
451449
type="url"
452450
placeholder="https://.../trace.ndjson.gz"
@@ -461,7 +459,7 @@ const FileDiffView: React.FC<FileDiffViewProps> = ({ kernelsLeft, selectedLeftIn
461459
Load
462460
</button>
463461
</div>
464-
<div className="flex items-center gap-2 mb-2">
462+
<div className="flex items-center gap-2 mb-1">
465463
<input
466464
type="file"
467465
accept=".ndjson,.ndjson.gz,.gz,.jsonl"
@@ -481,22 +479,22 @@ const FileDiffView: React.FC<FileDiffViewProps> = ({ kernelsLeft, selectedLeftIn
481479
<button
482480
className="px-2 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded border"
483481
disabled={leftArrayResolved.length === 0}
484-
onClick={() => { console.debug('[FDV] click Left→Overview', { leftIdx }); setHideDiff(true); setTimeout(() => sess.gotoOverview('left'), 0); }}
482+
onClick={() => { setHideDiff(true); setTimeout(() => sess.gotoOverview('left'), 0); }}
485483
>
486484
Left → Kernel Overview
487485
</button>
488486
<button
489487
className="px-2 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded border"
490488
disabled={leftArrayResolved.length === 0}
491-
onClick={() => { console.debug('[FDV] click Left→IR', { leftIdx }); setHideDiff(true); setTimeout(() => sess.gotoIRCode('left'), 0); }}
489+
onClick={() => { setHideDiff(true); setTimeout(() => sess.gotoIRCode('left'), 0); }}
492490
>
493491
Left → IR Code
494492
</button>
495493
</div>
496494
</div>
497495
<div>
498496
<div className="text-sm text-gray-500 mb-1">Right Source (json_b_url)</div>
499-
<div className="flex items-center gap-2 mb-2">
497+
<div className="flex items-center gap-2 mb-1">
500498
<input
501499
type="url"
502500
placeholder="https://.../trace.ndjson.gz"
@@ -512,7 +510,7 @@ const FileDiffView: React.FC<FileDiffViewProps> = ({ kernelsLeft, selectedLeftIn
512510
{loadingRight ? "Loading..." : "Load"}
513511
</button>
514512
</div>
515-
<div className="flex items-center gap-2 mb-2">
513+
<div className="flex items-center gap-2 mb-1">
516514
<input
517515
type="file"
518516
accept=".ndjson,.ndjson.gz,.gz,.jsonl"
@@ -551,7 +549,7 @@ const FileDiffView: React.FC<FileDiffViewProps> = ({ kernelsLeft, selectedLeftIn
551549
</div>
552550

553551
{/* Aligned kernel selectors row */}
554-
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-2">
552+
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 mt-2">
555553
<div>
556554
<label className="block text-sm font-medium text-gray-700 mb-1">Left Kernel</label>
557555
<select
@@ -584,7 +582,7 @@ const FileDiffView: React.FC<FileDiffViewProps> = ({ kernelsLeft, selectedLeftIn
584582
</div>
585583
</div>
586584

587-
<div className="grid grid-cols-1 md:grid-cols-3 gap-3 mt-3">
585+
<div className="grid grid-cols-1 md:grid-cols-3 gap-2 mt-2">
588586
<div>
589587
<label className="block text-sm font-medium text-gray-700 mb-1">Mode</label>
590588
<div className="flex items-center gap-2">
@@ -643,3 +641,5 @@ const FileDiffView: React.FC<FileDiffViewProps> = ({ kernelsLeft, selectedLeftIn
643641
};
644642

645643
export default FileDiffView;
644+
645+

0 commit comments

Comments
 (0)