YACWC

2025-09-17 17:29:57 -04:00
parent 0fa6025514
commit 47f631fedb
3 changed files with 187 additions and 85 deletions
--- 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 (
        <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">
-                    <input
-                        type="text"
-                        placeholder="Enter query"
-                        value={queryText}
-                        onChange={(e) => 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
-                        }}
-                    />
+                    <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",
+                                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>
-                <div className="flex-group">
+                <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>
--- 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}`);
--- 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 (
+        <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>
    );
 }