forkless/strix
1
0
Fork 0
mirror of https://github.com/usestrix/strix.git synced 2026-08-21 18:52:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

Make the run details panel collapsible

Browse Source
This commit is contained in:
Jonathan Singer
2026-07-20 22:22:51 -04:00
parent 000a243861
commit a0d0d248f3
3 changed files with 91 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
strix/viewer/viewer_dist/assets/index-C6BkTz7a.js → strix/viewer/viewer_dist/assets/index-5M4xOhKX.js
+71 -71
View File
File diff suppressed because one or more lines are too long
strix/viewer/viewer_dist/index.html
+1 -1
View File
@@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="dark" />
<title>Strix Results</title>
<script type="module" crossorigin src="./assets/index-C6BkTz7a.js"></script>
<script type="module" crossorigin src="./assets/index-5M4xOhKX.js"></script>
<link rel="stylesheet" crossorigin href="./assets/index-C0NveaV7.css">
</head>
<body>
strix/viewer_src/src/components/RunDetails.tsx
+19 -4
View File
@@ -1,4 +1,5 @@
import { Info } from "lucide-react";
import { useState } from "react";
import { ChevronDown, ChevronUp, Info } from "lucide-react";
import { formatNumber } from "@/lib/display-number";
/**
@@ -54,6 +55,8 @@ export function RunDetails({
raw: Rec;
durationSeconds: number | null;
}) {
const [open, setOpen] = useState(true);
// Configuration (launch inputs)
const targets = arr(raw.targets_info).map((t) => {
const o = rec(t);
@@ -98,12 +101,23 @@ export function RunDetails({
return (
<div className="rounded-xl border border-[#222] bg-[rgba(255,255,255,0.02)] p-5">
<div className="mb-4 flex items-center gap-2">
<button
type="button"
onClick={() => setOpen((v) => !v)}
aria-expanded={open}
className="flex w-full cursor-pointer items-center gap-2 text-left"
>
<Info className="h-4 w-4 text-[#888]" aria-hidden="true" />
<h2 className="text-sm font-semibold text-white">Run details</h2>
</div>
{open ? (
<ChevronUp className="ml-auto h-4 w-4 text-[#666]" aria-hidden="true" />
) : (
<ChevronDown className="ml-auto h-4 w-4 text-[#666]" aria-hidden="true" />
)}
</button>
<div className="grid grid-cols-1 gap-x-8 gap-y-6 md:grid-cols-2">
{open && (
<div className="mt-4 grid grid-cols-1 gap-x-8 gap-y-6 md:grid-cols-2">
<section>
<h3 className="mb-3 text-[11px] font-semibold uppercase tracking-wide text-[#555]">
Configuration
@@ -178,6 +192,7 @@ export function RunDetails({
)}
</section>
</div>
)}
</div>
);
}