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

122
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">
<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>