benchforge 0.1.9 → 0.2.4

package/src/viewer/report.css

@@ -0,0 +1,427 @@
+/* Report panel — benchmark results rendered by SummaryPanel */
+
+.report-panel {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  overflow: auto;
+  background: #f5f5f5;
+  padding: 20px;
+  display: none;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  line-height: 1.6;
+}
+
+.report-panel.active { display: block; }
+
+/* --- Header --- */
+
+.report-panel .report-header {
+  background: white;
+  padding: 10px 15px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.report-panel .cli-args {
+  font-family: "SF Mono", Monaco, "Consolas", monospace;
+  font-size: 11px;
+  color: #555;
+  background: #f0f0f0;
+  padding: 6px 10px;
+  border-radius: 4px;
+  word-break: break-word;
+}
+
+.report-panel .metadata { color: #666; font-size: 12px; }
+.report-panel .benchforge-version { font-size: 10px; color: #999; }
+.report-panel .header-right { text-align: right; }
+.report-panel .version-info { font-size: 12px; color: #666; margin-top: 6px; }
+
+/* --- Group --- */
+
+.report-panel .benchmark-group { margin-bottom: 24px; }
+
+.report-panel .group-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 0;
+  border-bottom: 2px solid #e0e0e0;
+  cursor: pointer;
+  user-select: none;
+}
+
+.report-panel .group-header h2 {
+  margin: 0;
+  font-size: 18px;
+  color: #555;
+}
+
+.report-panel .group-toggle {
+  font-size: 40px;
+  line-height: 0;
+  position: relative;
+  top: -2px;
+  color: #999;
+  width: 24px;
+  text-align: center;
+}
+
+/* --- Badges --- */
+
+.report-panel .badge {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  white-space: nowrap;
+}
+
+.report-panel .badge-faster { background: #dcfce7; color: #166534; }
+.report-panel .badge-slower { background: #fee2e2; color: #991b1b; }
+.report-panel .badge-uncertain { background: #dbeafe; color: #1e40af; }
+.report-panel .badge-equivalent { background: #f0fdf4; color: #166534; }
+.report-panel .batch-warnings { display: flex; flex-direction: column; gap: 0.3em; margin-left: 8px; }
+.report-panel .batch-warning { font-size: 11px; color: #92400e; }
+
+.report-panel .comparison-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* --- CI plots --- */
+
+.report-panel .ci-plot-container { display: inline-block; vertical-align: middle; }
+.report-panel .ci-plot-container svg { display: block; }
+.report-panel .ci-plot-inline { display: inline-block; vertical-align: middle; margin-left: 6px; }
+.report-panel .ci-plot-inline svg { display: block; }
+
+/* --- Panel grid --- */
+
+.report-panel .panel-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+  margin-top: 12px;
+}
+
+/* --- Section panel --- */
+
+.report-panel .section-panel {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+  overflow: hidden;
+}
+
+.report-panel .panel-header {
+  padding: 8px 14px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #888;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.report-panel .panel-title-link {
+  color: #5f61d8;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.report-panel .panel-title-link:hover { text-decoration: underline; }
+
+.report-panel .panel-body { padding: 8px 14px; }
+
+/* --- Stat rows --- */
+
+.report-panel .stat-row {
+  margin-bottom: 8px;
+}
+
+.report-panel .stat-row:last-child { margin-bottom: 0; }
+
+.report-panel .row-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 2px;
+}
+
+.report-panel .row-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: #666;
+}
+
+.report-panel .primary-row .row-label {
+  font-size: 14px;
+  font-weight: 700;
+  color: #444;
+}
+
+.report-panel .shared-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.report-panel .shared-row .row-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  font-variant-numeric: tabular-nums;
+}
+
+/* --- Run entries --- */
+
+.report-panel .run-entry {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 1px 0 1px 16px;
+}
+
+.report-panel .run-name {
+  font-size: 12px;
+  color: #999;
+  flex: 0 0 var(--run-name-width, 80px);
+}
+
+.report-panel .run-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: #333;
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+  flex: 0 0 var(--run-value-width, 80px);
+}
+
+/* --- Plot areas (kept for SamplesPanel) --- */
+
+.report-panel .plot-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.report-panel .plot-container {
+  background: white;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.report-panel .plot-title { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: #333; }
+.report-panel .plot-description { font-size: 14px; color: #666; margin-bottom: 15px; }
+
+.report-panel .plot-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 10px;
+}
+
+.report-panel .series-toggles {
+  display: flex;
+  gap: 6px;
+}
+
+.report-panel .toggle-pill {
+  font-size: 12px;
+  padding: 2px 10px;
+  border-radius: 12px;
+  border: 1px solid #ccc;
+  background: #f0f0f0;
+  color: #666;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.report-panel .toggle-pill.active {
+  background: #4682b4;
+  border-color: #4682b4;
+  color: white;
+}
+
+.report-panel .toggle-pill:hover { border-color: #999; }
+
+.report-panel .batch-stepper {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 12px;
+}
+
+.report-panel .batch-btn {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 1px solid #ccc;
+  background: #f0f0f0;
+  color: #555;
+  cursor: pointer;
+  font-size: 14px;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+
+.report-panel .batch-btn:hover { border-color: #999; background: #e0e0e0; }
+
+.report-panel .batch-label {
+  min-width: 80px;
+  text-align: center;
+  color: #555;
+  font-variant-numeric: tabular-nums;
+}
+
+.report-panel .plot-area {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+}
+
+.report-panel .plot-area svg { overflow: visible; }
+.report-panel .plot-area svg g[aria-label="x-axis label"] text { font-size: 14px; }
+
+/* --- Equivalence margin zone --- */
+.margin-zone { stroke: #f59e0b; opacity: .7 }
+.margin-hatch-stroke { stroke: #f59e0b; stroke-width: 3.5; opacity: .7; }
+
+/* --- CI region overlay opacity (light/dark aware) --- */
+.ci-region { opacity: 0.55; }
+.ci-region-strong { opacity: 0.65; }
+.ci-region.ci-faster, .ci-region.ci-equivalent { opacity: 0.5; }
+.ci-region-strong.ci-faster, .ci-region-strong.ci-equivalent { opacity: 0.55; }
+.ci-unreliable { stroke: none; }
+.dist-stroke { opacity: 0.35; }
+.dist-fill { opacity: 0.08; }
+
+/* --- Misc --- */
+
+.report-panel .loading { color: #666; font-style: italic; padding: 20px; text-align: center; }
+.report-panel .single-sample-notice { color: #999; font-style: italic; padding: 20px; text-align: center; }
+.report-panel .error { color: #d32f2f; background: #ffebee; padding: 15px; border-radius: 4px; margin: 10px 0; }
+
+.report-panel .ci-faster { color: #22c55e; }
+.report-panel .ci-slower { color: #ef4444; }
+.report-panel .ci-uncertain { color: #6b7280; }
+
+.report-panel .empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: #999;
+  font-size: 15px;
+}
+
+.report-panel .empty-state code {
+  background: #e8e8e8;
+  padding: 2px 6px;
+  border-radius: 3px;
+  font-size: 13px;
+}
+
+/* --- Dark mode — system preference --- */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .report-panel { background: #181818; }
+  :root:not([data-theme="light"]) .report-panel .report-header { background: #252525; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
+  :root:not([data-theme="light"]) .report-panel .cli-args { color: #bbb; background: #333; }
+  :root:not([data-theme="light"]) .report-panel .metadata { color: #999; }
+  :root:not([data-theme="light"]) .report-panel .benchforge-version { color: #666; }
+  :root:not([data-theme="light"]) .report-panel .version-info { color: #999; }
+  :root:not([data-theme="light"]) .report-panel .group-header { border-color: #444; }
+  :root:not([data-theme="light"]) .report-panel .group-header h2 { color: #ccc; }
+  :root:not([data-theme="light"]) .report-panel .group-toggle { color: #666; }
+  :root:not([data-theme="light"]) .report-panel .section-panel { background: #252525; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
+  :root:not([data-theme="light"]) .report-panel .panel-header { color: #777; border-color: #333; }
+  :root:not([data-theme="light"]) .report-panel .row-label { color: #999; }
+  :root:not([data-theme="light"]) .report-panel .primary-row .row-label { color: #ccc; }
+  :root:not([data-theme="light"]) .report-panel .row-value,
+  :root:not([data-theme="light"]) .report-panel .run-value { color: #ddd; }
+  :root:not([data-theme="light"]) .report-panel .run-name { color: #777; }
+  :root:not([data-theme="light"]) .report-panel .toggle-pill { background: #333; border-color: #555; color: #aaa; }
+  :root:not([data-theme="light"]) .report-panel .toggle-pill.active { background: #4682b4; border-color: #4682b4; color: white; }
+  :root:not([data-theme="light"]) .report-panel .toggle-pill:hover { border-color: #777; }
+  :root:not([data-theme="light"]) .report-panel .batch-btn { background: #333; border-color: #555; color: #aaa; }
+  :root:not([data-theme="light"]) .report-panel .batch-btn:hover { border-color: #777; background: #444; }
+  :root:not([data-theme="light"]) .report-panel .batch-label { color: #aaa; }
+  :root:not([data-theme="light"]) .report-panel .plot-container { background: #252525; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
+  :root:not([data-theme="light"]) .report-panel .plot-title { color: #ddd; }
+  :root:not([data-theme="light"]) .report-panel .plot-description { color: #999; }
+  :root:not([data-theme="light"]) .report-panel .loading { color: #999; }
+  :root:not([data-theme="light"]) .report-panel .empty-state { color: #666; }
+  :root:not([data-theme="light"]) .report-panel .empty-state code { background: #333; }
+  :root:not([data-theme="light"]) .dist-stroke { opacity: 0.35; }
+  :root:not([data-theme="light"]) .dist-fill { opacity: 0.08; }
+  :root:not([data-theme="light"]) .report-panel .badge-faster { background: #166534; color: #bbf7d0; }
+  :root:not([data-theme="light"]) .report-panel .badge-slower { background: #991b1b; color: #fecaca; }
+  :root:not([data-theme="light"]) .report-panel .badge-uncertain { background: #1e40af; color: #bfdbfe; }
+  :root:not([data-theme="light"]) .report-panel .badge-equivalent { background: #166534; color: #bbf7d0; }
+  :root:not([data-theme="light"]) .margin-hatch-stroke { opacity: 0.65; }
+  :root:not([data-theme="light"]) .margin-zone { opacity: 0.65; }
+  :root:not([data-theme="light"]) .ci-region { opacity: 0.2; }
+  :root:not([data-theme="light"]) .ci-region-strong { opacity: 0.35; }
+  :root:not([data-theme="light"]) .ci-region.ci-faster,
+  :root:not([data-theme="light"]) .ci-region.ci-equivalent { opacity: 0.15; }
+  :root:not([data-theme="light"]) .ci-region-strong.ci-faster,
+  :root:not([data-theme="light"]) .ci-region-strong.ci-equivalent { opacity: 0.25; }
+}
+
+/* --- Dark mode — user forced --- */
+:root[data-theme="dark"] .report-panel { background: #181818; }
+:root[data-theme="dark"] .report-panel .report-header { background: #252525; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
+:root[data-theme="dark"] .report-panel .cli-args { color: #bbb; background: #333; }
+:root[data-theme="dark"] .report-panel .metadata { color: #999; }
+:root[data-theme="dark"] .report-panel .benchforge-version { color: #666; }
+:root[data-theme="dark"] .report-panel .version-info { color: #999; }
+:root[data-theme="dark"] .report-panel .group-header { border-color: #444; }
+:root[data-theme="dark"] .report-panel .group-header h2 { color: #ccc; }
+:root[data-theme="dark"] .report-panel .group-toggle { color: #666; }
+:root[data-theme="dark"] .report-panel .section-panel { background: #252525; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }
+:root[data-theme="dark"] .report-panel .panel-header { color: #777; border-color: #333; }
+:root[data-theme="dark"] .report-panel .row-label { color: #999; }
+:root[data-theme="dark"] .report-panel .primary-row .row-label { color: #ccc; }
+:root[data-theme="dark"] .report-panel .row-value,
+:root[data-theme="dark"] .report-panel .run-value { color: #ddd; }
+:root[data-theme="dark"] .report-panel .run-name { color: #777; }
+:root[data-theme="dark"] .report-panel .toggle-pill { background: #333; border-color: #555; color: #aaa; }
+:root[data-theme="dark"] .report-panel .toggle-pill.active { background: #4682b4; border-color: #4682b4; color: white; }
+:root[data-theme="dark"] .report-panel .toggle-pill:hover { border-color: #777; }
+:root[data-theme="dark"] .report-panel .batch-btn { background: #333; border-color: #555; color: #aaa; }
+:root[data-theme="dark"] .report-panel .batch-btn:hover { border-color: #777; background: #444; }
+:root[data-theme="dark"] .report-panel .batch-label { color: #aaa; }
+:root[data-theme="dark"] .report-panel .plot-container { background: #252525; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
+:root[data-theme="dark"] .report-panel .plot-title { color: #ddd; }
+:root[data-theme="dark"] .report-panel .plot-description { color: #999; }
+:root[data-theme="dark"] .report-panel .loading { color: #999; }
+:root[data-theme="dark"] .report-panel .empty-state { color: #666; }
+:root[data-theme="dark"] .report-panel .empty-state code { background: #333; }
+:root[data-theme="dark"] .dist-stroke { opacity: 0.35; }
+:root[data-theme="dark"] .dist-fill { opacity: 0.08; }
+:root[data-theme="dark"] .report-panel .badge-faster { background: #166534; color: #bbf7d0; }
+:root[data-theme="dark"] .report-panel .badge-slower { background: #991b1b; color: #fecaca; }
+:root[data-theme="dark"] .report-panel .badge-uncertain { background: #1e40af; color: #bfdbfe; }
+:root[data-theme="dark"] .report-panel .badge-equivalent { background: #166534; color: #bbf7d0; }
+:root[data-theme="dark"] .margin-hatch-stroke { opacity: 0.4; }
+:root[data-theme="dark"] .margin-zone { opacity: 0.4; }
+:root[data-theme="dark"] .ci-region { opacity: 0.2; }
+:root[data-theme="dark"] .ci-region-strong { opacity: 0.35; }
+:root[data-theme="dark"] .ci-region.ci-faster,
+:root[data-theme="dark"] .ci-region.ci-equivalent { opacity: 0.15; }
+:root[data-theme="dark"] .ci-region-strong.ci-faster,
+:root[data-theme="dark"] .ci-region-strong.ci-equivalent { opacity: 0.25; }