feat: add evaluation query examples to search frontend and support TikZ/pgfplots boxplot output

ftosoni · ftosoni · commit 053ad4bc86a2 · 2026-06-03T17:01:10.000+02:00
diff --git a/frontend/css/style.css b/frontend/css/style.css
@@ -248,6 +248,33 @@ body {
     box-shadow: inset 0 0 0 1px #3366cc;
 }
 
+.cdx-select {
+    font-family: 'Ubuntu', sans-serif;
+    font-size: 0.9375rem;
+    color: #202122;
+    background: #fff;
+    border: 1px solid #a2a9b1;
+    border-radius: 2px;
+    padding: 8px 10px;
+    width: 100%;
+    transition: border-color 0.15s, box-shadow 0.15s;
+    outline: none;
+    cursor: pointer;
+}
+
+.cdx-select:hover {
+    border-color: #72777d;
+}
+
+.cdx-select:focus {
+    border-color: #3366cc;
+    box-shadow: inset 0 0 0 1px #3366cc;
+}
+
+.examples-field {
+    margin-top: 16px;
+}
+
 textarea.cdx-text-input {
     font-family: 'JetBrains Mono', monospace;
     font-size: 0.8125rem;
diff --git a/frontend/i18n/as.json b/frontend/i18n/as.json
@@ -50,5 +50,7 @@
     "footer_section_resources": "সম্পদ",
     "footer_section_source": "উৎস আৰু সমৰ্থন",
     "footer_section_status": "অনুজ্ঞাপত্ৰ আৰু স্থিতি",
-    "footer_release_date": "প্ৰকাশৰ তাৰিখ:"
+    "footer_release_date": "প্ৰকাশৰ তাৰিখ:",
+    "example_queries_label": "মূল্যায়ন কোয়েরি উদাহরণ চেষ্টা করুন (Try an evaluation query example)",
+    "example_queries_placeholder": "-- এটা মূল্যায়ন কোয়েরি বাছক --"
 }
diff --git a/frontend/i18n/bn.json b/frontend/i18n/bn.json
@@ -50,5 +50,7 @@
     "footer_section_resources": "সম্পদ",
     "footer_section_source": "উৎস এবং সমর্থন",
     "footer_section_status": "লাইসেন্স এবং স্থিতি",
-    "footer_release_date": "প্রকাশের তারিখ:"
+    "footer_release_date": "প্রকাশের তারিখ:",
+    "example_queries_label": "মূল্যায়ন কোয়েরি উদাহরণ চেষ্টা করুন",
+    "example_queries_placeholder": "-- একটি মূল্যায়ন কোয়েরি নির্বাচন করুন --"
 }
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
@@ -61,5 +61,7 @@
     "footer_section_resources": "Resources",
     "footer_section_source": "Source & Support",
     "footer_section_status": "Licence & Status",
-    "footer_release_date": "Release date:"
+    "footer_release_date": "Release date:",
+    "example_queries_label": "Try an evaluation query example",
+    "example_queries_placeholder": "-- Select an evaluation query --"
 }
diff --git a/frontend/i18n/fr.json b/frontend/i18n/fr.json
@@ -52,5 +52,7 @@
     "footer_section_resources": "Ressources",
     "footer_section_source": "Source et Support",
     "footer_section_status": "Licence et Statut",
-    "footer_release_date": "Date de sortie :"
+    "footer_release_date": "Date de sortie :",
+    "example_queries_label": "Essayer un exemple de requête d'évaluation",
+    "example_queries_placeholder": "-- Sélectionner une requête d'évaluation --"
 }
diff --git a/frontend/i18n/gu.json b/frontend/i18n/gu.json
@@ -50,5 +50,7 @@
     "footer_section_resources": "સંસાધનો",
     "footer_section_source": "સ્ત્રોત અને સમર્થન",
     "footer_section_status": "લાયસન્સ અને સ્થિતિ",
-    "footer_release_date": "પ્રકાશન તારીખ:"
+    "footer_release_date": "પ્રકાશન તારીખ:",
+    "example_queries_label": "મૂલ્યાંકন ક્વેરી ઉદાહરણ અજમાવો",
+    "example_queries_placeholder": "-- મૂલ્યાંકન ક્વેરી પસંદ કરો --"
 }
diff --git a/frontend/i18n/hi.json b/frontend/i18n/hi.json
@@ -50,5 +50,7 @@
     "footer_section_resources": "संसाधन",
     "footer_section_source": "स्रोत और समर्थन",
     "footer_section_status": "लाइसेंस और स्थिति",
-    "footer_release_date": "रिलीज़ की तारीख:"
+    "footer_release_date": "रिलीज़ की तारीख:",
+    "example_queries_label": "मूल्यांकन क्वेरी उदाहरण आज़माएं",
+    "example_queries_placeholder": "-- मूल्यांकन क्वेरी चुनें --"
 }
diff --git a/frontend/i18n/it.json b/frontend/i18n/it.json
@@ -51,5 +51,7 @@
     "footer_section_resources": "Risorse",
     "footer_section_source": "Sorgente e Supporto",
     "footer_section_status": "Licenza e Stato",
-    "footer_release_date": "Data di rilascio:"
+    "footer_release_date": "Data di rilascio:",
+    "example_queries_label": "Prova una query di valutazione di esempio",
+    "example_queries_placeholder": "-- Seleziona una query di valutazione --"
 }
diff --git a/frontend/i18n/kn.json b/frontend/i18n/kn.json
@@ -50,5 +50,7 @@
     "footer_section_resources": "ಸಂಪನ್ಮೂಲಗಳು",
     "footer_section_source": "ಮೂಲ ಮತ್ತು ಬೆಂಬಲ",
     "footer_section_status": "ಪರವಾನಗಿ ಮತ್ತು ಸ್ಥಿತಿ",
-    "footer_release_date": "ಬಿಡುగಡೆ ದಿನಾಂಕ:"
+    "footer_release_date": "ಬಿಡುగಡೆ ದಿನಾಂಕ:",
+    "example_queries_label": "ಮೌಲ್ಯಮಾಪನ ಪ್ರಶ್ನೆಯ ಉದಾಹರಣೆಯನ್ನು ప్రయత్ಿಸಿ",
+    "example_queries_placeholder": "-- ಮೌಲ್ಯಮಾపನ ಪ್ರಶ್ನೆಯನ್ನು ఆರಿಸಿ --"
 }
diff --git a/frontend/i18n/mai.json b/frontend/i18n/mai.json
@@ -50,5 +50,7 @@
     "footer_section_resources": "संसाधन",
     "footer_section_source": "स्रोत आ समर्थन",
     "footer_section_status": "लाइसेंस आ स्थिति",
-    "footer_release_date": "रिलीज़क तारीख:"
+    "footer_release_date": "रिलीज़क तारीख:",
+    "example_queries_label": "मूल्यांकन क्वेरी उदाहरण आज़माएं",
+    "example_queries_placeholder": "-- मूल्यांकन क्वेरी चुनु --"
 }
diff --git a/frontend/i18n/ml.json b/frontend/i18n/ml.json
@@ -50,5 +50,7 @@
     "footer_section_resources": "വിഭവങ്ങൾ",
     "footer_section_source": "ഉറവിടവും പിന്തുണയും",
     "footer_section_status": "ലൈസൻസും നിലയും",
-    "footer_release_date": "റിലീസ് തീയതി:"
+    "footer_release_date": "റിലീസ് തീയതി:",
+    "example_queries_label": "ഒരു മൂല്യനിർണ്ണയ അന്വേഷണ ഉദാഹരണം പരീക്ഷിക്കുക",
+    "example_queries_placeholder": "-- ഒരു മൂല്യനിർണ്ണയ അന്വേഷണം തിരഞ്ഞെടുക്കുക --"
 }
diff --git a/frontend/i18n/mr.json b/frontend/i18n/mr.json
@@ -50,5 +50,7 @@
     "footer_section_resources": "संसाधने",
     "footer_section_source": "स्रोत आणि समर्थन",
     "footer_section_status": "परवाना आणि स्थिती",
-    "footer_release_date": "प्रकाशन तारीख:"
+    "footer_release_date": "प्रकाशन तारीख:",
+    "example_queries_label": "मूल्यांकन क्वेरीचे उदाहरण पहा",
+    "example_queries_placeholder": "-- मूल्यांकन क्वेरी निवडा --"
 }
diff --git a/frontend/i18n/or.json b/frontend/i18n/or.json
@@ -50,5 +50,7 @@
     "footer_section_resources": "ସମ୍ପଦ",
     "footer_section_source": "ଉତ୍ସ ଏବଂ ସମର୍ଥନ",
     "footer_section_status": "ଲାଇସେନ୍ସ ଏବଂ ସ୍ଥିତି",
-    "footer_release_date": "ରିଲିଜ୍ ତାରିଖ:"
+    "footer_release_date": "ରିଲିଜ୍ ତାରିଖ:",
+    "example_queries_label": "ମୂଲ୍ୟାଙ୍କନ ପ୍ରଶ୍ନର ଏକ ଉଦାহରଣ ଚେଷ୍ଟာ କରନ୍ତু",
+    "example_queries_placeholder": "-- ମୂଲ୍ୟାଙ୍କନ ପ୍ରଶ୍ନ ଚୟନ କରନ୍ତୁ --"
 }
diff --git a/frontend/i18n/pa.json b/frontend/i18n/pa.json
@@ -50,5 +50,7 @@
     "footer_section_resources": "ਸੰਸਾਧਨ",
     "footer_section_source": "ਸਰੋਤ ਅਤੇ ਸਮਰਥਨ",
     "footer_section_status": "ਲਾਇਸੈਂਸ ਅਤੇ ਸਥਿਤੀ",
-    "footer_release_date": "ਜਾਰੀ ਕਰਨ ਦੀ ਮਿਤੀ:"
+    "footer_release_date": "ਜਾਰੀ ਕਰਨ ਦੀ ਮਿਤੀ:",
+    "example_queries_label": "ਮੁਲਾਂਕਣ ਪੁੱਛਗਿੱਛ ਦੀ ਉਦਾਹরਣ ਵੇਖੋ",
+    "example_queries_placeholder": "-- ਮੁਲਾਂਕਣ ਪੁੱਛਗਿੱਛ ਦੀ ਚੋਣ ਕਰੋ --"
 }
diff --git a/frontend/i18n/qqq.json b/frontend/i18n/qqq.json
@@ -61,5 +61,7 @@
     "footer_section_resources": "Resources",
     "footer_section_source": "Source & Support",
     "footer_section_status": "Licence & Status",
-    "footer_release_date": "Release date:"
+    "footer_release_date": "Release date:",
+    "example_queries_label": "Try an evaluation query example",
+    "example_queries_placeholder": "-- Select an evaluation query --"
 }
diff --git a/frontend/i18n/sat.json b/frontend/i18n/sat.json
@@ -50,5 +50,7 @@
     "footer_section_resources": "ᱥᱟᱫᱷᱚᱱ",
     "footer_section_source": "ᱥᱳᱨᱥ ᱟᱨ ᱜᱚᱲᱚ",
     "footer_section_status": "ᱞᱟᱭᱥᱮᱱᱥ ᱟᱨ ᱦᱟᱞᱟᱛ",
-    "footer_release_date": "ᱨᱤᱞᱤᱡᱽ ᱢᱟᱹᱦིତ:"
+    "footer_release_date": "ᱨᱤᱞᱤᱡᱽ ᱢᱟᱹᱦིତ:",
+    "example_queries_label": "ᱢᱩᱞᱟᱹᱭᱟᱹᱱ ᱠᱩᱠᱞᱤ ᱨᱮᱱᱟᱜ ᱩᱫᱟᱹᱦᱚᱨᱚᱱ ᱧᱮᱞ ᱢᱮ",
+    "example_queries_placeholder": "-- ᱢᱩᱞᱟᱹᱭᱟᱹᱱ ᱠᱩᱠᱞᱤ ᱵᱟᱪᱷᱟᱣ ᱢᱮ --"
 }
diff --git a/frontend/i18n/ta.json b/frontend/i18n/ta.json
@@ -50,5 +50,7 @@
     "footer_section_resources": "வளங்கள்",
     "footer_section_source": "மூலம் & ஆதரவு",
     "footer_section_status": "உரிமம் & நிலை",
-    "footer_release_date": "வெளியீட்டு தேதி:"
+    "footer_release_date": "வெளியீட்டு தேதி:",
+    "example_queries_label": "மதிப்பீட்டுக் குறியீடு உதாரணத்தை முயற்சிக்கவும்",
+    "example_queries_placeholder": "-- மதிப்பீட்டுக் குறியீட்டைத் தேர்ந்தெடுக்கவும் --"
 }
diff --git a/frontend/i18n/te.json b/frontend/i18n/te.json
@@ -50,5 +50,7 @@
     "footer_section_resources": "వనరులు",
     "footer_section_source": "మూలం & మద్దతు",
     "footer_section_status": "లైసెన్స్ & స్థితి",
-    "footer_release_date": "ವಿಡುదల తేదీ:"
+    "footer_release_date": "ವಿಡುదల తేదీ:",
+    "example_queries_label": "మూల్యాంకన క్వెరీ ఉదాహరణను ప్రయత్నించండి",
+    "example_queries_placeholder": "-- మూల్యాంకన క్వెరీని ఎంచుకోండి --"
 }
diff --git a/frontend/i18n/ur.json b/frontend/i18n/ur.json
@@ -50,5 +50,7 @@
     "footer_section_resources": "وسائل",
     "footer_section_source": "ماخذ اور تعاون",
     "footer_section_status": "لائسنس اور حیثیت",
-    "footer_release_date": "تاریخ اشاعت:"
+    "footer_release_date": "تاریخ اشاعت:",
+    "example_queries_label": "تشخیص سوال کی مثال آزمائیں",
+    "example_queries_placeholder": "-- تشخیص سوال منتخب کریں --"
 }
diff --git a/frontend/index.html b/frontend/index.html
@@ -160,6 +160,49 @@ <h1 class="page-hero__heading">Search source code</h1>
   return gcd(b,a%b)"></textarea>
                 </div>
 
+                <div class="cdx-field examples-field">
+                    <label class="cdx-label" for="example-queries">Try an evaluation query example</label>
+                    <select id="example-queries" class="cdx-select">
+                        <option value="" selected>-- Select an evaluation query --</option>
+                        <optgroup label="Category A: Basic Algorithmic Tasks">
+                            <option value="A1">A1 - Greatest common divisor (Python)</option>
+                            <option value="A2">A2 - Binary search (JavaScript)</option>
+                            <option value="A3">A3 - String truncation with ellipsis (PHP)</option>
+                            <option value="A4">A4 - JSON encode with error forwarding (Go)</option>
+                            <option value="A5">A5 - Retry with exponential back-off (Python)</option>
+                        </optgroup>
+                        <optgroup label="Category B: MediaWiki-like Tasks / Libraries">
+                            <option value="B1">B1 - Permission check: canUserEdit (PHP)</option>
+                            <option value="B2">B2 - Debounce: delayExecution (JavaScript)</option>
+                            <option value="B3">B3 - Session invalidation (PHP)</option>
+                            <option value="B4">B4 - LRU eviction: evictOldest (Python)</option>
+                            <option value="B5">B5 - Rate-limit gate: isRateLimited (PHP)</option>
+                            <option value="B6">B6 - Error normaliser: toError (TypeScript)</option>
+                            <option value="B7">B7 - URL slug: make_slug (Python)</option>
+                            <option value="B8">B8 - CAPTCHA verify (PHP)</option>
+                            <option value="B9">B9 - Worker pool: processWithPool (Go)</option>
+                            <option value="B10">B10 - Recursive category subtree: getDescendants (PHP)</option>
+                            <option value="B11">B11 - Paginated API fetch: fetch_all_pages (Python)</option>
+                            <option value="B12">B12 - HTTP retry on 5xx (Go)</option>
+                        </optgroup>
+                        <optgroup label="Category C: Cross-Language Porting Tasks">
+                            <option value="C1">C1 - SHA-256 file hash (PHP → Go / Python)</option>
+                            <option value="C2">C2 - ISO-8601 date parsing (Python → PHP / JavaScript)</option>
+                            <option value="C3">C3 - Fan-out / parallel map (Go → JS Promise.all)</option>
+                            <option value="C4">C4 - Throttle / call-rate limiter (TypeScript → PHP)</option>
+                            <option value="C5">C5 - Recursive table/dict serialiser (Lua → Python / PHP)</option>
+                            <option value="C6">C6 - Wikidata SPARQL query runner (Python → PHP / JS)</option>
+                        </optgroup>
+                        <optgroup label="Category D: MediaWiki Core / Extension Domain-Specific Tasks">
+                            <option value="D1">D1 - Wikitext internal link extractor (PHP)</option>
+                            <option value="D2">D2 - Git-compatible SHA-1 / SWHID computation (Python)</option>
+                            <option value="D3">D3 - IRC message line parser (Python)</option>
+                            <option value="D4">D4 - MediaWiki hook dispatcher (PHP)</option>
+                            <option value="D5">D5 - Bloom filter membership check (Go)</option>
+                        </optgroup>
+                    </select>
+                </div>
+
                 <div class="filters-container">
                     <div class="filter-group" id="filter-repos">
                         <h3 class="filter-label">Repository groups</h3>
diff --git a/frontend/js/main.js b/frontend/js/main.js
diff --git a/scripts/evaluation/benchmark_latency.py b/scripts/evaluation/benchmark_latency.py
diff --git a/scripts/evaluation/evaluation_results.json b/scripts/evaluation/evaluation_results.json
diff --git a/scripts/evaluation/latency_boxplot.png b/scripts/evaluation/latency_boxplot.png
diff --git a/scripts/evaluation/latency_boxplot.tex b/scripts/evaluation/latency_boxplot.tex

Original file line number	Diff line number	Diff line change
`@@ -50,5 +50,7 @@`
`50`	`50`	`"footer_section_resources": "সম্পদ",`
`51`	`51`	`"footer_section_source": "উৎস আৰু সমৰ্থন",`
`52`	`52`	`"footer_section_status": "অনুজ্ঞাপত্ৰ আৰু স্থিতি",`
`53`		`- "footer_release_date": "প্ৰকাশৰ তাৰিখ:"`
	`53`	`+ "footer_release_date": "প্ৰকাশৰ তাৰিখ:",`
	`54`	`+ "example_queries_label": "মূল্যায়ন কোয়েরি উদাহরণ চেষ্টা করুন (Try an evaluation query example)",`
	`55`	`+ "example_queries_placeholder": "-- এটা মূল্যায়ন কোয়েরি বাছক --"`
`54`	`56`	`}`
Original file line number	Diff line number	Diff line change
`@@ -61,5 +61,7 @@`
`61`	`61`	`"footer_section_resources": "Resources",`
`62`	`62`	`"footer_section_source": "Source & Support",`
`63`	`63`	`"footer_section_status": "Licence & Status",`
`64`		`- "footer_release_date": "Release date:"`
	`64`	`+ "footer_release_date": "Release date:",`
	`65`	`+ "example_queries_label": "Try an evaluation query example",`
	`66`	`+ "example_queries_placeholder": "-- Select an evaluation query --"`
`65`	`67`	`}`
Original file line number	Diff line number	Diff line change
`@@ -52,5 +52,7 @@`
`52`	`52`	`"footer_section_resources": "Ressources",`
`53`	`53`	`"footer_section_source": "Source et Support",`
`54`	`54`	`"footer_section_status": "Licence et Statut",`
`55`		`- "footer_release_date": "Date de sortie :"`
	`55`	`+ "footer_release_date": "Date de sortie :",`
	`56`	`+ "example_queries_label": "Essayer un exemple de requête d'évaluation",`
	`57`	`+ "example_queries_placeholder": "-- Sélectionner une requête d'évaluation --"`
`56`	`58`	`}`
Original file line number	Diff line number	Diff line change
`@@ -51,5 +51,7 @@`
`51`	`51`	`"footer_section_resources": "Risorse",`
`52`	`52`	`"footer_section_source": "Sorgente e Supporto",`
`53`	`53`	`"footer_section_status": "Licenza e Stato",`
`54`		`- "footer_release_date": "Data di rilascio:"`
	`54`	`+ "footer_release_date": "Data di rilascio:",`
	`55`	`+ "example_queries_label": "Prova una query di valutazione di esempio",`
	`56`	`+ "example_queries_placeholder": "-- Seleziona una query di valutazione --"`
`55`	`57`	`}`