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:46:24 -05:00
parent 2cfc042724
commit f40a5c551f
1 changed files with 165 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -605,25 +605,52 @@ function App() {
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
gap: "16px", gap: "12px",
flexWrap: "wrap", flexWrap: "nowrap",
padding: "12px 16px" padding: "12px 16px",
background: "linear-gradient(135deg, #2a2d3a 0%, #1f2129 100%)",
borderRadius: "12px",
boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
border: "1px solid #3a3f4f",
overflowX: "auto"
}}> }}>
<div className="control-group" style={{ margin: 0 }}> <div className="control-group" style={{ margin: 0, flexShrink: 0 }}>
<button <button
className="drawer-toggle" className="drawer-toggle"
onClick={() => setDrawerOpen(!drawerOpen)} onClick={() => setDrawerOpen(!drawerOpen)}
style={{ style={{
padding: "8px 12px", padding: "8px 12px",
fontSize: "0.9em", fontSize: "0.85em",
minWidth: "70px" minWidth: "70px",
background: "linear-gradient(135deg, #4a90e2 0%, #357abd 100%)",
color: "white",
border: "none",
borderRadius: "6px",
cursor: "pointer",
fontWeight: "500",
boxShadow: "0 2px 4px rgba(74, 144, 226, 0.3)",
transition: "all 0.2s ease"
}}
onMouseEnter={(e) => {
e.target.style.transform = "translateY(-1px)";
e.target.style.boxShadow = "0 4px 8px rgba(74, 144, 226, 0.4)";
}}
onMouseLeave={(e) => {
e.target.style.transform = "translateY(0)";
e.target.style.boxShadow = "0 2px 4px rgba(74, 144, 226, 0.3)";
}} }}
> >
{drawerOpen ? "✕" : "Options"} {drawerOpen ? "✕" : "Options"}
</button> </button>
</div> </div>
<div className="control-group" style={{ margin: 0, flexShrink: 0 }}> <div className="control-group" style={{
margin: 0,
flexShrink: 0,
background: "rgba(255, 255, 255, 0.05)",
borderRadius: "6px",
border: "1px solid rgba(255, 255, 255, 0.1)"
}}>
<CustomDateRangePicker <CustomDateRangePicker
startDate={startRange} startDate={startRange}
endDate={endRange} endDate={endRange}
@@ -632,24 +659,36 @@ function App() {
/> />
</div> </div>
<div className="control-group" style={{ margin: 0, flex: "1 1 200px", minWidth: "200px" }}> <div className="control-group" style={{ margin: 0, flex: "1 1 180px", minWidth: "180px", maxWidth: "300px" }}>
<input <input
type="text" type="text"
placeholder="Enter query" placeholder="Enter search query..."
value={queryText} value={queryText}
onChange={(e) => setQueryText(e.target.value)} onChange={(e) => setQueryText(e.target.value)}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === "Enter") handleResubmit(); if (e.key === "Enter") handleResubmit();
}} }}
style={{ style={{
padding: "8px 12px", padding: "10px 12px",
borderRadius: "4px", borderRadius: "6px",
border: "1px solid #343a40", border: "2px solid #3a3f4f",
color: "#fff", color: "#e1e5e9",
backgroundColor: "#1a1d23", backgroundColor: "rgba(26, 29, 35, 0.8)",
width: "100%", width: "100%",
boxSizing: "border-box", boxSizing: "border-box",
fontSize: "0.9em" fontSize: "0.9em",
fontWeight: "400",
outline: "none",
transition: "all 0.2s ease",
boxShadow: "inset 0 2px 4px rgba(0, 0, 0, 0.1)"
}}
onFocus={(e) => {
e.target.style.borderColor = "#4a90e2";
e.target.style.boxShadow = "inset 0 2px 4px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(74, 144, 226, 0.15)";
}}
onBlur={(e) => {
e.target.style.borderColor = "#3a3f4f";
e.target.style.boxShadow = "inset 0 2px 4px rgba(0, 0, 0, 0.1)";
}} }}
ref={inputRef} ref={inputRef}
/> />
@@ -660,8 +699,13 @@ function App() {
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
gap: "6px", gap: "6px",
color: "#fff", color: "#e1e5e9",
fontSize: "0.9em" fontSize: "0.85em",
background: "rgba(255, 255, 255, 0.05)",
padding: "6px 10px",
borderRadius: "6px",
border: "1px solid rgba(255, 255, 255, 0.1)",
flexShrink: 0
}}> }}>
<input <input
type="checkbox" type="checkbox"
@@ -673,17 +717,34 @@ function App() {
setSelectedHighRes, setSelectedHighRes,
) )
} }
style={{
width: "14px",
height: "14px",
accentColor: "#4a90e2"
}}
/> />
<span>HD Video</span> <span style={{ fontWeight: "500", whiteSpace: "nowrap" }}>HD</span>
</div> </div>
<div style={{ <div style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
gap: "8px", gap: "8px",
visibility: queryChanged ? "hidden" : "visible" visibility: queryChanged ? "hidden" : "visible",
background: "rgba(255, 255, 255, 0.05)",
padding: "6px 12px",
borderRadius: "6px",
border: "1px solid rgba(255, 255, 255, 0.1)",
flexShrink: 0
}}> }}>
<label style={{ color: "#fff", fontSize: "0.9em", whiteSpace: "nowrap" }}>Threshold:</label> <label style={{
color: "#e1e5e9",
fontSize: "0.85em",
whiteSpace: "nowrap",
fontWeight: "500"
}}>
Threshold:
</label>
<input <input
type="range" type="range"
min={sliderMin} min={sliderMin}
@@ -692,15 +753,21 @@ function App() {
value={sliderValue} value={sliderValue}
onChange={(e) => updateDataAndValue(e.target.value)} onChange={(e) => updateDataAndValue(e.target.value)}
style={{ style={{
width: "100px", width: "80px",
margin: "0 4px" height: "6px",
background: "linear-gradient(to right, #3a3f4f 0%, #4a90e2 100%)",
borderRadius: "3px",
outline: "none",
appearance: "none"
}} }}
/> />
<span style={{ <span style={{
color: "#fff", color: "#4a90e2",
fontSize: "0.9em", fontSize: "0.8em",
minWidth: "40px", minWidth: "35px",
textAlign: "right" textAlign: "right",
fontWeight: "600",
fontFamily: "monospace"
}}> }}>
{sliderValue.toFixed(2)} {sliderValue.toFixed(2)}
</span> </span>
@@ -708,58 +775,111 @@ function App() {
<div className="control-group" style={{ <div className="control-group" style={{
margin: 0, margin: 0,
visibility: queryChanged ? "visible" : "hidden" visibility: queryChanged ? "visible" : "hidden",
flexShrink: 0
}}> }}>
<button <button
onClick={handleResubmit} onClick={handleResubmit}
style={{ style={{
padding: "8px 16px", padding: "8px 14px",
fontSize: "0.9em", fontSize: "0.85em",
backgroundColor: "#007acc", background: "linear-gradient(135deg, #28a745 0%, #20a73a 100%)",
color: "white", color: "white",
border: "none", border: "none",
borderRadius: "4px", borderRadius: "6px",
cursor: "pointer" cursor: "pointer",
fontWeight: "600",
boxShadow: "0 2px 4px rgba(40, 167, 69, 0.3)",
transition: "all 0.2s ease",
whiteSpace: "nowrap"
}}
onMouseEnter={(e) => {
e.target.style.transform = "translateY(-1px)";
e.target.style.boxShadow = "0 4px 8px rgba(40, 167, 69, 0.4)";
}}
onMouseLeave={(e) => {
e.target.style.transform = "translateY(0)";
e.target.style.boxShadow = "0 2px 4px rgba(40, 167, 69, 0.3)";
}} }}
> >
Resubmit 🔄 Resubmit
</button> </button>
</div> </div>
<div className="control-group" style={{ margin: 0 }}> <div className="control-group" style={{ margin: 0, flexShrink: 0 }}>
<button <button
onClick={videoPlaying ? () => window.open("api/media_download/low") : undefined} onClick={videoPlaying ? () => window.open("api/media_download/low") : undefined}
disabled={!videoPlaying} disabled={!videoPlaying}
style={{ style={{
padding: "6px 10px", padding: "6px 10px",
fontSize: "0.8em", fontSize: "0.75em",
backgroundColor: videoPlaying ? "#28a745" : "#6c757d", background: videoPlaying
? "linear-gradient(135deg, #17c671 0%, #15b565 100%)"
: "linear-gradient(135deg, #6c757d 0%, #5a6169 100%)",
color: videoPlaying ? "white" : "#adb5bd", color: videoPlaying ? "white" : "#adb5bd",
border: "none", border: "none",
borderRadius: "4px", borderRadius: "6px",
cursor: videoPlaying ? "pointer" : "not-allowed", cursor: videoPlaying ? "pointer" : "not-allowed",
opacity: videoPlaying ? 1 : 0.6 opacity: videoPlaying ? 1 : 0.6,
fontWeight: "500",
boxShadow: videoPlaying
? "0 2px 4px rgba(23, 198, 113, 0.3)"
: "0 1px 2px rgba(108, 117, 125, 0.2)",
transition: "all 0.2s ease",
whiteSpace: "nowrap"
}}
onMouseEnter={(e) => {
if (videoPlaying) {
e.target.style.transform = "translateY(-1px)";
e.target.style.boxShadow = "0 4px 8px rgba(23, 198, 113, 0.4)";
}
}}
onMouseLeave={(e) => {
if (videoPlaying) {
e.target.style.transform = "translateY(0)";
e.target.style.boxShadow = "0 2px 4px rgba(23, 198, 113, 0.3)";
}
}} }}
> >
DL Low-Res DL Low-Res Video
</button> </button>
</div> </div>
<div className="control-group" style={{ margin: 0 }}> <div className="control-group" style={{ margin: 0, flexShrink: 0 }}>
<button <button
onClick={videoPlaying ? () => window.open("api/media_download/high") : undefined} onClick={videoPlaying ? () => window.open("api/media_download/high") : undefined}
disabled={!videoPlaying} disabled={!videoPlaying}
style={{ style={{
padding: "6px 10px", padding: "6px 10px",
fontSize: "0.8em", fontSize: "0.75em",
backgroundColor: videoPlaying ? "#17a2b8" : "#6c757d", background: videoPlaying
? "linear-gradient(135deg, #007bff 0%, #0056b3 100%)"
: "linear-gradient(135deg, #6c757d 0%, #5a6169 100%)",
color: videoPlaying ? "white" : "#adb5bd", color: videoPlaying ? "white" : "#adb5bd",
border: "none", border: "none",
borderRadius: "4px", borderRadius: "6px",
cursor: videoPlaying ? "pointer" : "not-allowed", cursor: videoPlaying ? "pointer" : "not-allowed",
opacity: videoPlaying ? 1 : 0.6 opacity: videoPlaying ? 1 : 0.6,
fontWeight: "500",
boxShadow: videoPlaying
? "0 2px 4px rgba(0, 123, 255, 0.3)"
: "0 1px 2px rgba(108, 117, 125, 0.2)",
transition: "all 0.2s ease",
whiteSpace: "nowrap"
}}
onMouseEnter={(e) => {
if (videoPlaying) {
e.target.style.transform = "translateY(-1px)";
e.target.style.boxShadow = "0 4px 8px rgba(0, 123, 255, 0.4)";
}
}}
onMouseLeave={(e) => {
if (videoPlaying) {
e.target.style.transform = "translateY(0)";
e.target.style.boxShadow = "0 2px 4px rgba(0, 123, 255, 0.3)";
}
}} }}
> >
DL High-Res DL High-Res Video
</button> </button>
</div> </div>
</div> </div>