@@ -4,6 +4,7 @@ type JobSummary = {
44 id : string ;
55 origin_url : string ;
66 max_depth : number ;
7+ max_urls_to_visit ?: number | null ;
78 created_at : string ;
89 updated_at : string ;
910 status : string ;
@@ -25,6 +26,7 @@ type JobDetail = {
2526 id : string ;
2627 origin_url : string ;
2728 max_depth : number ;
29+ max_urls_to_visit ?: number | null ;
2830 created_at : string ;
2931 updated_at : string ;
3032 status : string ;
@@ -74,6 +76,7 @@ export const App: React.FC = () => {
7476 const [ viewMode , setViewMode ] = useState < "crawler" | "search" > ( "crawler" ) ;
7577 const [ origin , setOrigin ] = useState ( "" ) ;
7678 const [ depth , setDepth ] = useState ( 2 ) ;
79+ const [ maxUrlsToVisit , setMaxUrlsToVisit ] = useState ( "500" ) ;
7780 const [ rateLimit , setRateLimit ] = useState ( 1.0 ) ;
7881 const [ currentJobId , setCurrentJobId ] = useState < string | null > ( null ) ;
7982 const [ selectedJobId , setSelectedJobId ] = useState < string | null > ( null ) ;
@@ -141,7 +144,12 @@ export const App: React.FC = () => {
141144 const res = await fetch ( "/index" , {
142145 method : "POST" ,
143146 headers : { "Content-Type" : "application/json" } ,
144- body : JSON . stringify ( { origin, k : depth , rate_limit_per_sec : rateLimit } )
147+ body : JSON . stringify ( {
148+ origin,
149+ k : depth ,
150+ max_urls_to_visit : maxUrlsToVisit ? Number ( maxUrlsToVisit ) : null ,
151+ rate_limit_per_sec : rateLimit ,
152+ } ) ,
145153 } ) ;
146154 if ( ! res . ok ) {
147155 const data = await res . json ( ) ;
@@ -219,23 +227,34 @@ export const App: React.FC = () => {
219227 } ;
220228
221229 const searchPanel = (
222- < section className = "panel panel-search" >
223- < h2 > Search</ h2 >
230+ < section className = "panel panel-search panel-search-upgraded" >
231+ < div className = "search-header" >
232+ < h2 >
233+ < span className = "search-icon" aria-hidden = "true" >
234+ 🔎
235+ </ span > { " " }
236+ Search
237+ </ h2 >
238+ < p className = "search-subtitle" > Find relevant URLs in pages already indexed by active or finished crawlers.</ p >
239+ </ div >
224240 < label className = "field" >
225241 < span > Query</ span >
226242 < input
243+ className = "search-input"
227244 type = "text"
228245 placeholder = "search terms"
229246 value = { query }
230247 onChange = { ( e ) => setQuery ( e . target . value ) }
231248 />
232249 </ label >
233- < button onClick = { runSearch } disabled = { ! query } >
234- Search Indexed Pages
235- </ button >
236- < button onClick = { runFeelingLucky } disabled = { ! query } >
237- I'm Feeling Lucky
238- </ button >
250+ < div className = "search-actions" >
251+ < button onClick = { runSearch } disabled = { ! query } >
252+ Search Indexed Pages
253+ </ button >
254+ < button className = "button-secondary" onClick = { runFeelingLucky } disabled = { ! query } >
255+ I'm Feeling Lucky
256+ </ button >
257+ </ div >
239258 < div className = "results" >
240259 { results . length === 0 ? (
241260 < p className = "hint" > No results yet. Try searching after indexing.</ p >
@@ -321,6 +340,15 @@ export const App: React.FC = () => {
321340 onChange = { ( e ) => setDepth ( Number ( e . target . value ) ) }
322341 />
323342 </ label >
343+ < label className = "field" >
344+ < span > Max URLs to Visit</ span >
345+ < input
346+ type = "number"
347+ min = { 1 }
348+ value = { maxUrlsToVisit }
349+ onChange = { ( e ) => setMaxUrlsToVisit ( e . target . value ) }
350+ />
351+ </ label >
324352 < label className = "field" >
325353 < span >
326354 Crawler Speed (req/s)
@@ -438,6 +466,7 @@ export const App: React.FC = () => {
438466 < div className = "job-card-url" > { job . origin_url } </ div >
439467 < div className = "job-card-meta" >
440468 < span > Depth: { job . max_depth } </ span >
469+ < span > Max URLs: { job . max_urls_to_visit ?? "unbounded" } </ span >
441470 < span > Processed: { job . processed_urls } </ span >
442471 < span > Queue: { job . queued_urls } </ span >
443472 < span > { new Date ( job . updated_at ) . toLocaleTimeString ( ) } </ span >
@@ -535,6 +564,10 @@ export const App: React.FC = () => {
535564 < span className = "label" > Rate Limit</ span >
536565 < span className = "value" > { selectedJob . rate_limit_per_sec . toFixed ( 1 ) } req/s</ span >
537566 </ div >
567+ < div className = "metric" >
568+ < span className = "label" > Max URLs</ span >
569+ < span className = "value" > { selectedJob . max_urls_to_visit ?? "unbounded" } </ span >
570+ </ div >
538571 < div className = "metric" >
539572 < span className = "label" > Visited</ span >
540573 < span className = "value" > { selectedJob . visited_count } </ span >
0 commit comments