OP-TED · victoriobentivogli · Dec 8, 2024 · Dec 11, 2024 · Dec 11, 2024 · Dec 13, 2024
diff --git a/README.md b/README.md
@@ -11,7 +11,7 @@ A web-based SPARQL query editor for exploring TED Open Data. This application al
 
 ## Live Version
 
-Visit [TED SPARQL Editor](https://docs.ted.europa.eu/ted-sparql-editor) to use the live version of the application.
+Visit [TED Open Data](https://data.ted.europa.eu/) to use the live version of the application.
 
 ## Development Setup
 
@@ -96,6 +96,11 @@ This project uses the following third-party components:
   - License: MIT
   - Website: https://codemirror.net/
 
+- **js-yaml** (v4.1.0)
+  - Purpose: YAML parser and dumper
+  - License: MIT
+  - Website: https://github.com/nodeca/js-yaml
+
 ### Backend Components
 - **Express** (v4.17.1)
   - Purpose: Web server framework
@@ -117,10 +122,14 @@ This project uses the following third-party components:
   - License: MIT
   - Website: https://github.com/TooTallNate/node-https-proxy-agent
 
+- **sparqljs** (v3.7.3)
+  - Purpose: SPARQL query parser and generator
+  - License: MIT
+  - Website: https://github.com/RubenVerborgh/SPARQL.js
+
 All third-party components are used under their respective licenses.
 
 [^1]: _Copyright 2022 European Union_  
-_Licensed under the EUPL, Version 1.2 or – as soon they will be approved by the European Commission –
-subsequent versions of the EUPL (the "Licence");_
+_Licensed under the EUPL, Version 1.2 or – as soon they will be approved by the European Commission – subsequent versions of the EUPL (the "Licence");_
 _You may not use this work except in compliance with the Licence. You may obtain [a copy of the Licence here](LICENSE)._  
-_Unless required by applicable law or agreed to in writing, software distributed under the Licence is distributed on an "AS IS" basis, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the Licence for the specific language governing permissions and limitations under the Licence._
+_Unless required by applicable law or agreed to in writing, software distributed under the Licence is distributed on an "AS IS" basis, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the Licence for the specific language governing permissions and limitations under the Licence._
diff --git a/index.html b/index.html
@@ -25,6 +25,9 @@
     <!-- Custom TED Branding -->
     <link rel="stylesheet" href="src/assets/style.css">
 
+    <!-- Custom Styles -->
+    <link rel="stylesheet" href="src/assets/style.css">
+
     <!-- Favicon (if applicable) -->
     <link rel="icon" type="image/png" href="/path-to-ted-favicon.png">
 
@@ -34,7 +37,6 @@
 </head>
 
 <body class="bg-light">
-
     <!-- Header -->
     <header class="navbar navbar-expand-lg navbar-light">
         <div class="container-fluid">
@@ -55,6 +57,10 @@
                 <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-content"
                     type="button" role="tab" aria-controls="home-tab-content" aria-selected="true">Home</button>
             </li>
+            <li class="nav-item" role="presentation">
+                <button class="nav-link" id="query-library-tab" data-bs-toggle="tab" data-bs-target="#query-library"
+                    type="button" role="tab" aria-controls="query-library" aria-selected="false">Query Library</button>
+            </li>
             <li class="nav-item" role="presentation">
                 <button class="nav-link" id="query-editor-tab" data-bs-toggle="tab" data-bs-target="#query-editor"
                     type="button" role="tab" aria-controls="query-editor" aria-selected="false">Query Editor</button>
@@ -96,18 +102,55 @@ <h1 class="display-4">TED Open Data</h1>
                     We welcome your feedback, suggestions for improvement as well as your contributions to the project. 
                     Visit our <a href="https://github.com/OP-TED/ted-open-data/discussions" target="_blank">GitHub Discussions</a> forum to share your ideas and feedback.
                 </p>
-                <button id="start-tour" class="btn btn-primary">Write your query</button>
+                <button id="try-query-library" class="btn btn-primary">Try our query library</button>
+                <button id="start-tour" class="btn btn-primary">Write your own query</button>
             </div>
         </div> <!-- Close home-tab-content div -->
 
+        <!-- Query Library -->
+        <div class="tab-pane w-100 h-100 fade position-absolute" id="query-library" role="tabpanel" aria-labelledby="query-library-tab">
+            <div class="container-fluid h-100">
+                <div class="row h-100">
+                    <div class="col-md-4 d-flex flex-column h-100">
+                        <div class="accordion-container">
+                            <div class="accordion accordion-flush flex-grow-1" id="queryAccordion">
+                                <!-- Categories and queries will be populated here -->
+                            </div>
+                        </div>
+                    </div>
+                    <div class="col-md-8 d-flex flex-column">
+                        <div id="selectQueryMessage" class="d-flex align-items-center justify-content-center flex-grow-1">
+                            <p class="text-muted">Select a query from the available categories on the left.</p>
+                        </div>
+                        <div class="card flex-grow-1 border-0 m-0 p-0 d-none" id="queryCard">
+                            <div class="card-body d-flex flex-column p-0">
+                                <textarea id="querySparql" class="d-none"></textarea>
+                                <div id="queryDetails" class="p-3">
+                                    <h5 id="queryTitle" class="mt-3">Query Title</h5>
+                                    <p id="queryDescription">Select a query to see its description.</p>
+                                    <div class="d-flex justify-content-end">
+                                        <button id="tryQueryButton" class="btn btn-primary mt-3" disabled>Try this query</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div> <!-- Close query-library div -->
+
         <!-- Main Container -->
         <div class="tab-pane w-100 fade position-absolute" id="query-editor" role="tabpanel" aria-labelledby="query-editor-tab">
+            <!-- Error Alert -->
+            <div id="syntax-error-alert" class="alert alert-danger" role="alert" style="display: none;"></div>
+
             <!-- Query Form -->
             <form id="queryForm" class="d-flex flex-column h-100">
                 <div class="mb-3 flex-grow-1 d-flex flex-column">
                     <div class="form-group flex-grow-1 d-flex flex-column">
                         <label for="query" class="form-label">SPARQL Query</label>
                         <textarea id="query" name="query" class="form-control flex-grow-1" placeholder="Add your SPARQL query here"></textarea>
+                        <div id="syntax-error" class="text-danger mt-2" style="display: none;"></div> <!-- Syntax error display -->
                     </div>
                 </div>
 
@@ -213,6 +256,7 @@ <h2>Help</h2>
                         <h3>How to use this tool</h3>
                         <p>
                             <ul>
+                                <li>Use the <b>Query Library</b> tab to explore suggested SPARQL queries. These will help you get started.</li>
                                 <li>Use the <b>Query Editor</b> tab to compose your SPARQL query.</li>
                                 <li>To test your query use the <b>Run Query</b> button.</li>
                                 <li>The results will be displayed in the <b>Query Results</b> tab.</li>
@@ -247,6 +291,11 @@ <h6>Frontend Components</h6>
                                         <br><small class="text-muted">Code editor with SPARQL syntax highlighting</small>
                                         <br><small class="text-secondary">License: MIT</small>
                                     </li>
+                                    <li class="mb-3">
+                                        <strong>js-yaml</strong> (v4.1.0)
+                                        <br><small class="text-muted">YAML parser and dumper</small>
+                                        <br><small class="text-secondary">License: MIT</small>
+                                    </li>
                                 </ul>
 
                                 <h6 class="mt-4">Backend Components</h6>
@@ -266,11 +315,16 @@ <h6 class="mt-4">Backend Components</h6>
                                         <br><small class="text-muted">Fetch API implementation for Node.js</small>
                                         <br><small class="text-secondary">License: MIT</small>
                                     </li>
-                                    <li>
+                                    <li class="mb-3">
                                         <strong>https-proxy-agent</strong> (v7.0.5)
                                         <br><small class="text-muted">HTTP(s) proxy agent for Node.js</small>
                                         <br><small class="text-secondary">License: MIT</small>
                                     </li>
+                                    <li>
+                                        <strong>sparqljs</strong> (v3.7.3)
+                                        <br><small class="text-muted">SPARQL query parser and generator</small>
+                                        <br><small class="text-secondary">License: MIT</small>
+                                    </li>
                                 </ul>
                             </div>
                         </div>
@@ -323,7 +377,7 @@ <h6 class="mt-4">Backend Components</h6>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
 
     <!-- JavaScript File -->
-    <script src="src/js/script.js"></script>
+    <script src="src/js/script.js" type="module" defer></script>
 
     <!-- Add these before the closing body tag -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -10,6 +10,8 @@
     "cors": "^2.8.5",
     "express": "^4.17.1",
     "https-proxy-agent": "^7.0.5",
-    "node-fetch": "^2.6.1"
+    "node-fetch": "^2.6.1",
+    "sparqljs": "^3.7.3",
+    "ted-sparql-editor": "file:"
   }
 }
diff --git a/src/assets/queries/index.yaml b/src/assets/queries/index.yaml
@@ -0,0 +1,81 @@
+queries:
+  - category: Category1
+    title: Query1
+    description: Description for Query1 in Category1
+    sparql: query1.sparql
+  - category: Category1
+    title: Query2
+    description: Description for Query2 in Category1
+    sparql: query2.sparql
+  - category: Category2
+    title: Query3
+    description: Description for Query3 in Category2
+    sparql: query3.sparql
+  - category: Category2
+    title: Query4
+    description: Description for Query4 in Category2
+    sparql: query4.sparql
+  - category: Category3
+    title: Query5
+    description: Description for Query5 in Category3
+    sparql: query5.sparql
+  - category: Category3
+    title: Query6
+    description: Description for Query6 in Category3
+    sparql: query6.sparql
+  - category: Category4
+    title: Query7
+    description: Description for Query7 in Category4
+    sparql: query7.sparql
+  - category: Category4
+    title: Query8
+    description: Description for Query8 in Category4
+    sparql: query8.sparql
+  - category: Category5
+    title: Query9
+    description: Description for Query9 in Category5
+    sparql: query9.sparql
+  - category: Category5
+    title: Query10
+    description: Description for Query10 in Category5
+    sparql: query10.sparql
+  - category: Category6
+    title: Query11
+    description: Description for Query11 in Category6
+    sparql: query11.sparql
+  - category: Category6
+    title: Query12
+    description: Description for Query12 in Category6
+    sparql: query12.sparql
+  - category: Category7
+    title: Query13
+    description: Description for Query13 in Category7
+    sparql: query13.sparql
+  - category: Category7
+    title: Query14
+    description: Description for Query14 in Category7
+    sparql: query14.sparql
+  - category: Category8
+    title: Query15
+    description: Description for Query15 in Category8
+    sparql: query15.sparql
+  - category: Category8
+    title: Query16
+    description: Description for Query16 in Category8
+    sparql: query16.sparql
+  - category: Category9
+    title: Query17
+    description: Description for Query17 in Category9
+    sparql: query17.sparql
+  - category: Category9
+    title: Query18
+    description: Description for Query18 in Category9
+    sparql: query18.sparql
+  - category: Category10
+    title: Query19
+    description: Description for Query19 in Category10
+    sparql: query19.sparql
+  - category: Category10
+    title: Query20
+    description: Description for Query20 in Category10
+    sparql: query20.sparql