thebears/SearchInterface
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

YACWC

Browse Source
This commit is contained in:
Ishan S. Patel
2025-09-17 17:29:57 -04:00
parent 0fa6025514
commit 47f631fedb
3 changed files with 187 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
SearchFrontend/search_ui/src/components/StatusDisplay.jsx
View File

@@ -2,6 +2,37 @@ import { useTable } from "react-table";
import { useMemo } from "react";
import "./StatusDisplay.css";
function ProgressBar({ progress, total }) {
const percent = total ? Math.round((progress / total) * 100) : 0;
return (
<div style={{ display: "flex", alignItems: "center", gap: 8 }}>
<div
style={{
background: "#181a20",
borderRadius: 6,
width: 80,
height: 14,
overflow: "hidden",
border: "1px solid #3a7afe",
marginRight: 8,
}}
>
<div
style={{
width: `${percent}%`,
height: "100%",
background: "#3a7afe",
transition: "width 0.3s",
}}
/>
</div>
<span style={{ color: "#e0e6ed", fontSize: 13 }}>
{progress}/{total} ({percent}%)
</span>
</div>
);
}
export default function StatusesDisplayHUD({ statusMessages }) {
const msg = {};
const dataPre = {};
@@ -9,7 +40,19 @@ export default function StatusesDisplayHUD({ statusMessages }) {
{ Header: "When", accessor: "WHEN" },
{ Header: "Scheduled", accessor: "SCHEDULED" },
{ Header: "Queued", accessor: "QUEUED" },
{ Header: "Processing", accessor: "VECTOR_CALC" },
{
Header: "Processing",
accessor: "VECTOR_CALC",
Cell: ({ value }) =>
value && value.type === "progress" ? (
<ProgressBar
progress={value.progress}
total={value.how_many}
/>
) : (
value || ""
),
},
{ Header: "Calculating", accessor: "SCORE_CALC" },
{ Header: "Status", accessor: "STATUS" },
];
@@ -55,8 +98,13 @@ export default function StatusesDisplayHUD({ statusMessages }) {
m["progress"] +
"/" +
m["how_many"];
dataPre[when_key]["VECTOR_CALC"] =
m["progress"] + "/" + m["how_many"];
// dataPre[when_key]["VECTOR_CALC"] =
// m["progress"] + "/" + m["how_many"];
dataPre[when_key]["VECTOR_CALC"] = {
progress: m["progress"],
how_many: m["how_many"],
type: "progress",
};
break;
case "VECTOR_CALC_IN_FOLDER_DONE":
msg_show = "Finished processing videos";
@@ -72,7 +120,7 @@ export default function StatusesDisplayHUD({ statusMessages }) {
msg_show = c_task;
}
msg[when_key] = msg_show;
console.log(when_key);
// console.log(when_key);
dataPre[when_key]["STATUS"] = msg_show;
}
});
@@ -86,48 +134,42 @@ export default function StatusesDisplayHUD({ statusMessages }) {
const { getTableProps, getTableBodyProps, headerGroups, rows, prepareRow } =
useTable({ columns: columnsMemo, data });
return (
<div className="table-container">
<table
{...getTableProps()}
style={{ "--col-count": columns.length - 1 }}
>
{rows.length > 0 && (
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>
{column.render("Header")}
</th>
))}
</tr>
))}
</thead>
)}
<tbody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => (
<td {...cell.getCellProps()}>
{cell.render("Cell")}
</td>
))}
</tr>
);
})}
</tbody>
</table>
</div>
);
return (
<div>
{Object.entries(msg).map(([when, messages], idx) => (
<StatusDisplay key={when} when={when} message={messages} />
))}
{rows.length > 0 && (
<div className="table-container">
<table
{...getTableProps()}
style={{ "--col-count": columns.length - 1 }}
>
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map((column) => (
<th {...column.getHeaderProps()}>
{column.render("Header")}
</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
return (
<tr {...row.getRowProps()}>
{row.cells.map((cell) => (
<td {...cell.getCellProps()}>
{cell.render("Cell")}
</td>
))}
</tr>
);
})}
</tbody>
</table>
</div>
)}
</div>
);
}