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
2026-03-07 11:41:53 -05:00
parent 32f63fe43b
commit 2cfc042724
1 changed files with 99 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -601,17 +601,29 @@ function App() {
</div> </div>
)} )}
<div className="controls-section"> <div className="controls-section" style={{
<div className="control-group"> display: "flex",
alignItems: "center",
justifyContent: "center",
gap: "16px",
flexWrap: "wrap",
padding: "12px 16px"
}}>
<div className="control-group" style={{ margin: 0 }}>
<button <button
className="drawer-toggle" className="drawer-toggle"
onClick={() => setDrawerOpen(!drawerOpen)} onClick={() => setDrawerOpen(!drawerOpen)}
style={{
padding: "8px 12px",
fontSize: "0.9em",
minWidth: "70px"
}}
> >
{drawerOpen ? "✕" : "Options"} {drawerOpen ? "✕" : "Options"}
</button> </button>
</div> </div>
<div className="control-group"> <div className="control-group" style={{ margin: 0, flexShrink: 0 }}>
<CustomDateRangePicker <CustomDateRangePicker
startDate={startRange} startDate={startRange}
endDate={endRange} endDate={endRange}
@@ -619,7 +631,8 @@ function App() {
setEndRange={setEndRange} setEndRange={setEndRange}
/> />
</div> </div>
<div className="control-group">
<div className="control-group" style={{ margin: 0, flex: "1 1 200px", minWidth: "200px" }}>
<input <input
type="text" type="text"
placeholder="Enter query" placeholder="Enter query"
@@ -629,23 +642,27 @@ function App() {
if (e.key === "Enter") handleResubmit(); if (e.key === "Enter") handleResubmit();
}} }}
style={{ style={{
// padding: "8px", padding: "8px 12px",
// borderRadius: "4px", borderRadius: "4px",
// border: "1px solid #343a40", border: "1px solid #343a40",
// color: "#fff", color: "#fff",
// backgroundColor: "#23272f", backgroundColor: "#1a1d23",
// width: "100%", width: "100%",
// minWidth: 0, boxSizing: "border-box",
// boxSizing: "border-box", fontSize: "0.9em"
fontSize: "1.1em",
// transition: "width 0.2s",
}} }}
ref={inputRef} ref={inputRef}
size={Math.max(queryText.length, 25)}
/> />
</div> </div>
<div className="control-group"> <div className="control-group" style={{
margin: 0,
display: "flex",
alignItems: "center",
gap: "6px",
color: "#fff",
fontSize: "0.9em"
}}>
<input <input
type="checkbox" type="checkbox"
name="do_high_res" name="do_high_res"
@@ -657,24 +674,16 @@ function App() {
) )
} }
/> />
HD Video <span>HD Video</span>
</div> </div>
<div
className="control-group" <div style={{
style={{ visibility: queryChanged ? "hidden" : "visible" }} display: "flex",
> alignItems: "center",
<label style={{ color: "#fff" }}>Threshold:</label> gap: "8px",
</div> visibility: queryChanged ? "hidden" : "visible"
<div }}>
className="control-group" <label style={{ color: "#fff", fontSize: "0.9em", whiteSpace: "nowrap" }}>Threshold:</label>
style={{
display: "inline-block",
verticalAlign: "middle",
margin: "0 8px",
width: "120px",
visibility: queryChanged ? "hidden" : "visible",
}}
>
<input <input
type="range" type="range"
min={sliderMin} min={sliderMin}
@@ -683,47 +692,76 @@ function App() {
value={sliderValue} value={sliderValue}
onChange={(e) => updateDataAndValue(e.target.value)} onChange={(e) => updateDataAndValue(e.target.value)}
style={{ style={{
width: "100%", width: "100px",
color: "#fff", margin: "0 4px"
backgroundColor: "#23272f",
minWidth: 0,
}} }}
/> />
</div> <span style={{
<div color: "#fff",
className="control-group" fontSize: "0.9em",
style={{ visibility: queryChanged ? "hidden" : "visible" }} minWidth: "40px",
> textAlign: "right"
<span style={{ color: "#fff" }}> }}>
{sliderValue.toFixed(2)} {sliderValue.toFixed(2)}
</span> </span>
</div> </div>
<div
className="control-group" <div className="control-group" style={{
style={{ visibility: queryChanged ? "visible" : "hidden" }} margin: 0,
> visibility: queryChanged ? "visible" : "hidden"
}}>
<button <button
onClick={handleResubmit} onClick={handleResubmit}
style={{ style={{
width: "100%", padding: "8px 16px",
padding: "12px 0", fontSize: "0.9em",
fontSize: "1.1em", backgroundColor: "#007acc",
marginTop: "8px", color: "white",
border: "none",
borderRadius: "4px",
cursor: "pointer"
}} }}
> >
Resubmit Resubmit
</button> </button>
</div> </div>
{videoPlaying && (
<div className="control-group"> <div className="control-group" style={{ margin: 0 }}>
<button onClick={() => window.open("api/media_download/low")}>Download Low-Res</button> <button
onClick={videoPlaying ? () => window.open("api/media_download/low") : undefined}
disabled={!videoPlaying}
style={{
padding: "6px 10px",
fontSize: "0.8em",
backgroundColor: videoPlaying ? "#28a745" : "#6c757d",
color: videoPlaying ? "white" : "#adb5bd",
border: "none",
borderRadius: "4px",
cursor: videoPlaying ? "pointer" : "not-allowed",
opacity: videoPlaying ? 1 : 0.6
}}
>
DL Low-Res
</button>
</div> </div>
)} <div className="control-group" style={{ margin: 0 }}>
{videoPlaying && ( <button
<div className="control-group"> onClick={videoPlaying ? () => window.open("api/media_download/high") : undefined}
<button onClick={() => window.open("api/media_download/high")}>Download High-Res</button> disabled={!videoPlaying}
style={{
padding: "6px 10px",
fontSize: "0.8em",
backgroundColor: videoPlaying ? "#17a2b8" : "#6c757d",
color: videoPlaying ? "white" : "#adb5bd",
border: "none",
borderRadius: "4px",
cursor: videoPlaying ? "pointer" : "not-allowed",
opacity: videoPlaying ? 1 : 0.6
}}
>
DL High-Res
</button>
</div> </div>
)}
</div> </div>
<div className="status-section"> <div className="status-section">