+
+ {error}
}
+
+
+ 
+
+
+
+ {error &&
+
+
+ );
+}
+
+export default App;
diff --git a/src/api.ts b/src/api.ts
new file mode 100644
index 00000000..6887befa
--- /dev/null
+++ b/src/api.ts
@@ -0,0 +1,32 @@
+const REPO_OWNER = 'SegmentLinking';
+const BASE_API_URL = `https://api.github.com/repos/${REPO_OWNER}`;
+const RAW_URL = `https://raw.githubusercontent.com/${REPO_OWNER}`;
+
+export interface GitHubContent {
+ name: string;
+ path: string;
+ type: 'dir' | 'file';
+ download_url: string | null;
+ repo: string;
+}
+
+export async function fetchDirectories(repoName: string): Promise
+ LST Performance Web
+
+
+
+
+ );
+ }
+
+ return (
+ {detail.stem}
+
+
+
+ Loading…
}
+ >
+
+
+ );
+};
+
+export default CmssPlotViewer;
diff --git a/src/components/FlatPdfViewer.tsx b/src/components/FlatPdfViewer.tsx
new file mode 100644
index 00000000..70ffbe05
--- /dev/null
+++ b/src/components/FlatPdfViewer.tsx
@@ -0,0 +1,98 @@
+import React, { useMemo, useState, useEffect, useRef } from 'react';
+import { Document, Page } from 'react-pdf';
+import 'react-pdf/dist/Page/AnnotationLayer.css';
+import 'react-pdf/dist/Page/TextLayer.css';
+import type { DecompressedFile } from '../decompress';
+
+interface FlatPdfViewerProps {
+ files: DecompressedFile[];
+}
+
+const FlatPdfViewer: React.FC
+ {parsed.categories.length > 0 && (
+
+
+
+ Category:
+
+ )}
+
+ {groups.length > 0 && (
+
+ {parsed.categories.map(cat => (
+
+ ))}
+
+
+ Group:
+
+ )}
+
+ {groups.map(g => (
+
+ ))}
+
+
+
+
+
+
+ {currentFiles.map(f => (
+ setDetail(f)}
+ />
+ ))}
+
+
+
+
+ );
+};
+
+export default FlatPdfViewer;
diff --git a/src/components/PlotDetail.tsx b/src/components/PlotDetail.tsx
new file mode 100644
index 00000000..1b2ac09d
--- /dev/null
+++ b/src/components/PlotDetail.tsx
@@ -0,0 +1,68 @@
+import React from 'react';
+import { Document, Page } from 'react-pdf';
+import 'react-pdf/dist/Page/AnnotationLayer.css';
+import 'react-pdf/dist/Page/TextLayer.css';
+import type { PlotInfo, ParsedDataset } from '../plotLayout';
+import { formatMetric, formatVariable, PDGID_LABELS, SELECTION_LABELS, CHARGE_LABELS } from '../plotLayout';
+
+interface PlotDetailProps {
+ mainPlot: PlotInfo;
+ dataset: ParsedDataset;
+ onBack: () => void;
+}
+
+function sectionLabel(breakdown: PlotInfo): string {
+ if (breakdown.breakdownType === 'den') return `Denominator ${breakdown.breakdownIndex}`;
+ if (breakdown.breakdownType === 'num') return `Numerator ${breakdown.breakdownIndex}`;
+ if (breakdown.breakdownType === 'ratio') return `Double Ratio ${breakdown.breakdownIndex}`;
+ return 'Breakdown';
+}
+
+function makePlotTitle(plot: PlotInfo): string {
+ const metric = formatMetric(plot.metric);
+ const variable = formatVariable(plot.variable);
+ if (plot.metric === 'eff') {
+ const pdgLabel = plot.pdgid !== undefined ? (PDGID_LABELS[plot.pdgid] ?? String(plot.pdgid)) : '';
+ const selLabel = plot.selection ? (SELECTION_LABELS[plot.selection] ?? plot.selection) : '';
+ const chLabel = plot.charge !== undefined ? (CHARGE_LABELS[plot.charge] ?? String(plot.charge)) : '';
+ return `${plot.objectType} ${metric} — ${variable} | ${pdgLabel}, ${selLabel}, charge: ${chLabel}`;
+ }
+ return `${plot.objectType} ${metric} — ${variable}`;
+}
+
+const SinglePdf: React.FC<{ url: string; label: string }> = ({ url, label }) => (
+
+
+
+
+ {[...groups.entries()].map(([dir, groupFiles]) => (
+
+
+
+
+ ))}
+ {dir}
+ {groupFiles.map(f => { + const name = f.name.split('/').at(-1) ?? f.name; + return ( + setSelected(f)}
+ >
+ {name}
+
+ );
+ })}
+
+ {selected ? (
+ Loading…
}
+ >
+
+ Select a plot from the list.
+
+ )}
+
+
+
+);
+
+const PlotDetail: React.FC{label}
+
+ Loading…
}>
+
+
+
+ );
+};
+
+export default PlotDetail;
diff --git a/src/components/PlotGrid.tsx b/src/components/PlotGrid.tsx
new file mode 100644
index 00000000..0e4d3964
--- /dev/null
+++ b/src/components/PlotGrid.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import PlotThumbnail from './PlotThumbnail';
+import type { ParsedDataset, PlotInfo } from '../plotLayout';
+import {
+ formatVariable,
+ PDGID_LABELS,
+ makeNavKey,
+ getEffStem,
+ getRecoStem,
+} from '../plotLayout';
+
+interface PlotGridProps {
+ dataset: ParsedDataset;
+ objectType: string;
+ metric: string;
+ selection: string;
+ charge: number;
+ selectedStem: string | null;
+ onSelect: (plot: PlotInfo) => void;
+}
+
+const PlotGrid: React.FC{makePlotTitle(mainPlot)}
+ +
+ {pdgids.map(pdgid => {
+ const variables = dataset.variablesForNav.get(varKey(pdgid)) ?? [];
+ return (
+
+ );
+ }
+
+ // Reco metrics: flat grid of variables
+ const vKey = makeNavKey(objectType, metric);
+ const variables = dataset.variablesForNav.get(vKey) ?? [];
+
+ return (
+
+ {pdgids.length > 1 && (
+
+ );
+ })}
+ + {PDGID_LABELS[pdgid] ?? String(pdgid)} +
+ )} +
+ {variables.map(variable => {
+ const stem = getEffStem(objectType, selection, pdgid, charge, variable);
+ const plot = dataset.plotsByKey.get(stem);
+ if (!plot) return null;
+ return (
+ onSelect(plot)}
+ />
+ );
+ })}
+
+
+
+ );
+};
+
+export default PlotGrid;
diff --git a/src/components/PlotThumbnail.tsx b/src/components/PlotThumbnail.tsx
new file mode 100644
index 00000000..82655e08
--- /dev/null
+++ b/src/components/PlotThumbnail.tsx
@@ -0,0 +1,60 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Document, Page } from 'react-pdf';
+import 'react-pdf/dist/Page/AnnotationLayer.css';
+import 'react-pdf/dist/Page/TextLayer.css';
+
+interface PlotThumbnailProps {
+ url: string;
+ label: string;
+ isSelected: boolean;
+ onClick: () => void;
+}
+
+const PlotThumbnail: React.FC
+
+
+ {variables.map(variable => {
+ const stem = getRecoStem(objectType, metric, variable);
+ const plot = dataset.plotsByKey.get(stem);
+ if (!plot) return null;
+ return (
+ onSelect(plot)}
+ />
+ );
+ })}
+
+
+
+ );
+};
+
+export default PlotThumbnail;
diff --git a/src/components/PlotViewer.tsx b/src/components/PlotViewer.tsx
new file mode 100644
index 00000000..989bdb82
--- /dev/null
+++ b/src/components/PlotViewer.tsx
@@ -0,0 +1,312 @@
+import React, { useMemo, useState, useEffect } from 'react';
+import type { DecompressedFile } from '../decompress';
+import type { PlotInfo } from '../plotLayout';
+import {
+ parseFiles,
+ formatMetric,
+ formatDatasetName,
+ SELECTION_LABELS,
+ CHARGE_LABELS,
+ makeNavKey,
+} from '../plotLayout';
+import PlotGrid from './PlotGrid';
+import PlotDetail from './PlotDetail';
+import CmssPlotViewer from './CmssPlotViewer';
+import FlatPdfViewer from './FlatPdfViewer';
+
+interface PlotViewerProps {
+ files: DecompressedFile[];
+ isExtracting: boolean;
+}
+
+const PlotViewer: React.FC
+ {shouldRender ? (
+
+
+ ) : (
+
+ )}
+
+ {label}
+ Decompressing plots…
;
+ }
+
+ if (files.length === 0) {
+ return Select a CI run from the sidebar to view plots.
;
+ }
+
+ if (!parsedFiles.isMtvRun) {
+ return
+
+ );
+};
+
+export default PlotViewer;
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
new file mode 100644
index 00000000..013b4e93
--- /dev/null
+++ b/src/components/Sidebar.tsx
@@ -0,0 +1,184 @@
+import React, { useState, useMemo, useEffect } from 'react';
+import type { GitHubContent } from '../api';
+
+interface SidebarProps {
+ directories: GitHubContent[];
+ selectedDir: string | null;
+ onSelect: (dir: GitHubContent) => void;
+ isLoading: boolean;
+}
+
+interface RunTreeNode {
+ name: string;
+ type: 'pr' | 'commit' | 'run';
+ children: Record
+ {datasetNames.length > 1 && (
+
+
+
+ Dataset:
+
+ )}
+
+ {objectTypes.length > 1 && (
+
+ {datasetNames.map(name => (
+
+ ))}
+
+
+ Object:
+
+ )}
+
+ {metrics.length > 0 && (
+
+ {objectTypes.map(obj => (
+
+ ))}
+
+
+ Metric:
+
+ )}
+
+ {metric === 'eff' && selections.length > 1 && (
+
+ {metrics.map(m => (
+
+ ))}
+
+
+ Selection:
+
+
+ )}
+
+ {metric === 'eff' && charges.length > 1 && (
+
+ Charge:
+
+ )}
+
+ {charges.map(ch => (
+
+ ))}
+
+ -
+ {children.map(child => (
+
+ 🚀
+ {node.name.replace(/_(gpu|cpu)$/, '')}
+ {getHardwareTag(node.dir?.name ?? '') && (
+
+ {getHardwareTag(node.dir?.name ?? '')}
+
+ )}
+ {node.dir?.repo.includes('2026') ? '2026' : 'Legacy'}
+
+ -
+ {children.map(child => (
+