11"use client" ;
22import { useEffect , useState } from "react" ;
33import { Card , CardContent } from "@/components/ui/card" ;
4- import { Textarea } from "@/components/ui/textarea" ;
54import { Button } from "@/components/ui/button" ;
65import { Input } from "@/components/ui/input" ;
76import { toast , Toaster } from "sonner" ;
87import { Loader2 } from "lucide-react" ;
98import { MdOutlineThumbDown , MdOutlineThumbUp } from 'react-icons/md' ;
9+ import Image from "next/image" ;
10+ import CodeMirror from "@uiw/react-codemirror" ;
11+ import { StreamLanguage } from "@codemirror/language" ;
12+ import { sparql } from "@codemirror/legacy-modes/mode/sparql" ;
13+ import { EditorView } from "@codemirror/view" ;
1014
1115interface SPARQLResult {
1216 head : {
@@ -54,11 +58,9 @@ export default function SPARQLQueryApp() {
5458 const [ prevUsedEntities , setPrevUsedEntities ] = useState < EntityWithType [ ] > ( [ ] ) ;
5559
5660 const exampleQuestions = [
57- "Top 10 most frequent authors from Germany who have published at the International Semantic Web Conference (ISWC)." ,
58- "Which publications from the International Semantic Web Conference are the highly cited?" ,
61+ "Top 10 most frequent authors who have published at the International Semantic Web Conference (ISWC)." ,
5962 "Database papers published in the Semantic Web Journal." ,
6063 "Who are the highly cited coauthors of Hannah Bast?"
61-
6264 ] ;
6365 const validateQuestion = async ( question : string ) : Promise < { valid : boolean ; feedback ?: string } > => {
6466 try {
@@ -164,9 +166,9 @@ export default function SPARQLQueryApp() {
164166 toast . error ( `Error generating SPARQL. (${ data . error } )` ) ;
165167 return ;
166168 }
167- const confidence_string = `# Confidence_score: ${ data . confidence_score } ` ;
169+ // const confidence_string = `# Confidence_score: ${data.confidence_score}`;
168170 const ask_dblp_string = `# ASK-DBLP: ${ userQuery } ` ;
169- updateSparqlQuery ( `${ confidence_string } \n ${ ask_dblp_string } \n${ data . sparql } ` ) ;
171+ updateSparqlQuery ( `${ ask_dblp_string } \n${ data . sparql } ` ) ;
170172 const allEntities : EntityGroup [ ] = data . linked_entities || [ ] ;
171173 const entitiesInSparql = data . entities_used_in_sparql || [ ] ;
172174
@@ -289,19 +291,27 @@ export default function SPARQLQueryApp() {
289291 return (
290292 //<div className="max-w-2xl mx-auto p-6 space-y-4">
291293 < div className = "max-w-6xl mx-auto overflow-x-auto" >
294+ < header className = "flex items-center space-x-4 p-4 border-b" >
295+ < Image
296+ src = "/ask-dblp-logo.png"
297+ alt = "ASK DBLP Logo"
298+ width = { 300 }
299+ height = { 100 }
300+ priority
301+ />
302+ </ header >
292303 < Card className = "mb-4" >
293304 < CardContent className = "p-4 space-y-2" >
294- < p className = "text-justify text-sm text-gray-600" >
305+ < p className = "text-justify text-sm text-gray-600 font-bold " >
295306 Welcome to ASK-DBLP! < br /> < br />
296307 ASK-DBLP offers a natural language interface (NLI) that allows users to question the DBLP Knowledge Graph.
297308 The system generates a corresponding SPARQL query, which you can review and edit. Once ready, it executes the query against the DBLP SPARQL endpoint and displays the results. < br />
298-
299309 </ p >
300- < p className = "text-sm text-gray-600" >
301- Type your question or choose from the sample questions below.
310+ < p className = "text-sm text-gray-600 font-bold " >
311+
302312 </ p >
303313 < Input
304- placeholder = "Enter your query "
314+ placeholder = "Type your question or select from the sample questions below. "
305315 value = { userQuery }
306316 onChange = { ( e ) => {
307317 setUserQuery ( e . target . value ) ;
@@ -310,11 +320,12 @@ export default function SPARQLQueryApp() {
310320 setEntityLinkingGroups ( [ ] ) ;
311321 } }
312322 />
313- < div className = "flex flex-wrap gap-2" >
323+ < div className = "overflow-x-auto flex flex-col items-start gap-2 mt-2 py-2 px-1 " >
314324 { exampleQuestions . map ( ( question , index ) => (
315325 < Button
316326 key = { index }
317327 variant = "outline"
328+ className = "text-left w-auto"
318329 onClick = { ( ) => handleExampleClick ( question ) }
319330 >
320331 { question }
@@ -374,11 +385,20 @@ export default function SPARQLQueryApp() {
374385 { sparqlQuery && (
375386 < Card className = "mb-4" >
376387 < CardContent className = "p-4 space-y-2" >
377- < Textarea
378- className = "w-full"
379- rows = { 10 }
388+ < CodeMirror
380389 value = { sparqlQuery }
381- onChange = { ( e ) => updateSparqlQuery ( e . target . value ) }
390+ height = "300px"
391+ basicSetup = { {
392+ lineNumbers : true ,
393+ highlightActiveLineGutter : true ,
394+ highlightActiveLine : true ,
395+ } }
396+ extensions = { [
397+ StreamLanguage . define ( sparql ) ,
398+ EditorView . lineWrapping ,
399+ ] }
400+ onChange = { ( value ) => updateSparqlQuery ( value ) }
401+ theme = "light"
382402 />
383403
384404 < div className = "row flex" >
@@ -439,13 +459,25 @@ export default function SPARQLQueryApp() {
439459 </ thead >
440460 < tbody >
441461 { queryResult . results . bindings . map ( ( binding , rowIndex ) => (
442- < tr key = { rowIndex } className = "hover:bg-gray-50" >
443- < td className = "border border-gray-300 px-4 py-2" > { rowIndex + 1 } </ td >
444- { queryResult . head . vars . map ( ( varName , colIndex ) => (
445- < td key = { colIndex } className = "border border-gray-300 px-4 py-2" >
446- { binding [ varName ] ?. value || "" }
447- </ td >
448- ) ) }
462+ < tr key = { rowIndex } className = "border-t" >
463+ < td className = "p-2 text-sm text-gray-600 font-mono" > { rowIndex + 1 } .</ td >
464+ { queryResult . head . vars . map ( ( varName , colIndex ) => {
465+ const valueObj = binding [ varName ] ;
466+ const value = valueObj ?. value || "" ;
467+ const isUri = valueObj ?. type === "uri" ;
468+
469+ return (
470+ < td key = { colIndex } className = "p-2 text-sm text-gray-800" >
471+ { isUri ? (
472+ < a href = { value } target = "_blank" rel = "noopener noreferrer" className = "text-blue-600 underline" >
473+ { value }
474+ </ a >
475+ ) : (
476+ value
477+ ) }
478+ </ td >
479+ ) ;
480+ } ) }
449481 </ tr >
450482 ) ) }
451483 </ tbody >
0 commit comments