From 47f631fedb144da9d1d9cd23ebc0d9fcd514e3ef Mon Sep 17 00:00:00 2001 From: "Ishan S. Patel" Date: Wed, 17 Sep 2025 17:29:57 -0400 Subject: [PATCH] YACWC --- SearchFrontend/search_ui/src/App.jsx | 122 +++++++++++----- .../src/components/EmbedTimeline.jsx | 20 ++- .../src/components/StatusDisplay.jsx | 130 ++++++++++++------ 3 files changed, 187 insertions(+), 85 deletions(-) diff --git a/SearchFrontend/search_ui/src/App.jsx b/SearchFrontend/search_ui/src/App.jsx index 5c22c88..017eab6 100644 --- a/SearchFrontend/search_ui/src/App.jsx +++ b/SearchFrontend/search_ui/src/App.jsx @@ -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 (
-
+
- setQueryText(e.target.value)} - style={{ - marginLeft: "16px", - marginRight: "16px", - padding: "8px", - borderRadius: "4px", - border: "1px solid #343a40", - color: "#fff", // Text white - backgroundColor: "#23272f", // Optional: dark background for contrast - }} - /> +
+ 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", + backgroundColor: "#23272f", + width: "100%", + minWidth: 0, + boxSizing: "border-box", + fontSize: "1.1em", + transition: "width 0.2s", + }} + ref={inputRef} + size={Math.max(queryText.length, 1)} + /> +
-
+
-
+
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, }} />
-
+
{sliderValue.toFixed(2)}
-
- +
+
diff --git a/SearchFrontend/search_ui/src/components/EmbedTimeline.jsx b/SearchFrontend/search_ui/src/components/EmbedTimeline.jsx index 31a7d04..1eedd0e 100644 --- a/SearchFrontend/search_ui/src/components/EmbedTimeline.jsx +++ b/SearchFrontend/search_ui/src/components/EmbedTimeline.jsx @@ -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}`); diff --git a/SearchFrontend/search_ui/src/components/StatusDisplay.jsx b/SearchFrontend/search_ui/src/components/StatusDisplay.jsx index fa12460..0b7c9c4 100644 --- a/SearchFrontend/search_ui/src/components/StatusDisplay.jsx +++ b/SearchFrontend/search_ui/src/components/StatusDisplay.jsx @@ -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 ( +
+
+
+
+ + {progress}/{total} ({percent}%) + +
+ ); +} + 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" ? ( + + ) : ( + 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 ( -
- - {rows.length > 0 && ( - - {headerGroups.map((headerGroup) => ( - - {headerGroup.headers.map((column) => ( - - ))} - - ))} - - )} - - {rows.map((row) => { - prepareRow(row); - return ( - - {row.cells.map((cell) => ( - - ))} - - ); - })} - -
- {column.render("Header")} -
- {cell.render("Cell")} -
-
- ); - return (
- {Object.entries(msg).map(([when, messages], idx) => ( - - ))} + {rows.length > 0 && ( +
+ + + {headerGroups.map((headerGroup) => ( + + {headerGroup.headers.map((column) => ( + + ))} + + ))} + + + {rows.map((row) => { + prepareRow(row); + return ( + + {row.cells.map((cell) => ( + + ))} + + ); + })} + +
+ {column.render("Header")} +
+ {cell.render("Cell")} +
+
+ )}
); }