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

96
SearchFrontend/search_ui/src/App.jsx
View File

@@ -15,6 +15,7 @@ function App() {
const [statusMessages, setStatusMessages] = useState([]);
const [markerTime, setMarkerTime] = useState(0);
const playerRef = useRef(null);
const [drawerOpen, setDrawerOpen] = useState(false);
const playerInstanceRef = useRef(null);
// State for the values
window.chartRef = chartRef;
@@ -22,6 +23,8 @@ function App() {
window.playerInstanceRef = playerInstanceRef;
// Slider states
const inputRef = useRef(null);
const [sliderMin, setSliderMin] = useState(0.0);
const [sliderMax, setSliderMax] = useState(1.0);
// Date range states
@@ -39,16 +42,25 @@ function App() {
const [lastSubmitted, setLastSubmitted] = useState({
startRange,
endRange,
sliderValue,
queryText,
});
// Check if any value has changed
const hasChanged =
startRange !== lastSubmitted.startRange ||
endRange !== lastSubmitted.endRange ||
sliderValue !== lastSubmitted.sliderValue ||
queryText !== lastSubmitted.queryText;
// // Check if any value has changed
// const queryChanged =
// startRange !== lastSubmitted.startRange ||
// endRange !== lastSubmitted.endRange ||
// queryText !== lastSubmitted.queryText;
// Check if queryText is different from lastSubmitted.queryText
const textChanged = queryText !== lastSubmitted.queryText;
const startChanged =
startRange.getTime() !== new Date(lastSubmitted.startRange).getTime();
const endChanged =
endRange.getTime() !== new Date(lastSubmitted.endRange).getTime();
const queryChanged = textChanged || startChanged || endChanged;
const streamComputeStatus = () => {
fetch("api/return_status")
@@ -78,7 +90,6 @@ function App() {
let c_line = JSON.parse(line);
if (c_line["task"] !== "DONE_QUIT") {
console.log(c_line);
setStatusMessages((msgs) => [
...msgs,
c_line,
@@ -98,8 +109,6 @@ function App() {
};
// Function to resubmit fetch
const handleResubmit = (doTestMode = false) => {
console.log("startRange, endRange:", startRange, endRange);
console.log("test mode:", doTestMode);
let startRangeUse;
let endRangeUse;
if (doTestMode == true) {
@@ -114,7 +123,6 @@ function App() {
endRangeUse = endRange;
}
console.log("Using date range:", startRangeUse, endRangeUse);
setStartRange(startRangeUse);
setEndRange(endRangeUse);
@@ -134,9 +142,8 @@ function App() {
});
setLastSubmitted({
startRangeUse,
endRangeUse,
sliderValue,
startRange: startRangeUse,
endRange: endRangeUse,
queryText,
});
};
@@ -256,7 +263,11 @@ function App() {
return (
<div className="app-container">
<div className="section-box-horiz">
<div
className={`section-box-horiz${
drawerOpen ? " drawer-open" : ""
}`}
>
<div className="flex-group">
<CustomDateRangePicker
startDate={startRange}
@@ -266,23 +277,38 @@ function App() {
/>
</div>
<div className="flex-group">
<div style={{ position: "relative", width: "100%" }}>
<input
type="text"
placeholder="Enter query"
value={queryText}
onChange={(e) => setQueryText(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") handleResubmit();
}}
style={{
marginLeft: "16px",
marginRight: "16px",
padding: "8px",
borderRadius: "4px",
border: "1px solid #343a40",
color: "#fff", // Text white
backgroundColor: "#23272f", // Optional: dark background for contrast
color: "#fff",
backgroundColor: "#23272f",
width: "100%",
minWidth: 0,
boxSizing: "border-box",
fontSize: "1.1em",
transition: "width 0.2s",
}}
ref={inputRef}
size={Math.max(queryText.length, 1)}
/>
</div>
<div className="flex-group">
</div>
<div
className="flex-group"
style={{ visibility: queryChanged ? "hidden" : "visible" }}
>
<label
style={{
marginLeft: "8px",
@@ -293,7 +319,10 @@ function App() {
Threshold:
</label>
</div>
<div className="flex-group">
<div
className="flex-group"
style={{ visibility: queryChanged ? "hidden" : "visible" }}
>
<input
type="range"
min={sliderMin}
@@ -302,19 +331,36 @@ function App() {
value={sliderValue}
onChange={(e) => updateDataAndValue(e.target.value)}
style={{
width: "120px",
color: "#fff", // Text white
backgroundColor: "#23272f", // Optional: dark background for contrast
width: "100%",
color: "#fff",
backgroundColor: "#23272f",
minWidth: 0,
}}
/>
</div>
<div className="flex-group">
<div
className="flex-group"
style={{ visibility: queryChanged ? "hidden" : "visible" }}
>
<span style={{ marginLeft: "8px", color: "#fff" }}>
{sliderValue.toFixed(2)}
</span>
</div>
<div className="flex-group">
<button onClick={handleResubmit}>Resubmit</button>
<div
className="flex-group"
style={{ visibility: queryChanged ? "visible" : "hidden" }}
>
<button
onClick={handleResubmit}
style={{
width: "100%",
padding: "12px 0",
fontSize: "1.1em",
marginTop: "8px",
}}
>
Resubmit
</button>
</div>
</div>
<div>

20
SearchFrontend/search_ui/src/components/EmbedTimeline.jsx
View File

@@ -443,16 +443,30 @@ const EmbedTimeline = React.memo(function EmbedTimeline({
// --- Chart Event Handlers ---
async function onChartClick(params, echarts) {
let pixel;
const nativeEvent = params.event.event;
const pixel = [nativeEvent.offsetX, nativeEvent.offsetY];
// Support both mouse and touch events
if (nativeEvent.touches && nativeEvent.touches.length > 0) {
// Touch event
const rect = nativeEvent.target.getBoundingClientRect();
const touch = nativeEvent.touches[0];
pixel = [
touch.clientX - rect.left,
touch.clientY - rect.top
];
} else {
// Mouse event
pixel = [nativeEvent.offsetX, nativeEvent.offsetY];
}
const dataCoord = echarts.convertFromPixel({ seriesIndex: 0 }, pixel);
const res = await fetch("/api/events/click", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
timestamp:
mapVirtualToRealTime(dataCoord[0], breaks, virtualTime) / 1000,
timestamp: mapVirtualToRealTime(dataCoord[0], breaks, virtualTime) / 1000,
}),
});
if (!res.ok) throw new Error(`HTTP error: ${res.status}`);

68
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;
}
});
@@ -87,12 +135,13 @@ export default function StatusesDisplayHUD({ statusMessages }) {
useTable({ columns: columnsMemo, data });
return (
<div>
{rows.length > 0 && (
<div className="table-container">
<table
{...getTableProps()}
style={{ "--col-count": columns.length - 1 }}
>
{rows.length > 0 && (
<thead>
{headerGroups.map((headerGroup) => (
<tr {...headerGroup.getHeaderGroupProps()}>
@@ -104,7 +153,6 @@ export default function StatusesDisplayHUD({ statusMessages }) {
</tr>
))}
</thead>
)}
<tbody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
@@ -121,13 +169,7 @@ export default function StatusesDisplayHUD({ statusMessages }) {
</tbody>
</table>
</div>
);
return (
<div>
{Object.entries(msg).map(([when, messages], idx) => (
<StatusDisplay key={when} when={when} message={messages} />
))}
)}
</div>
);
}