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