index.html

<!--
  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"); You may not use this work except in
  compliance with the Licence. You may obtain a copy of the Licence at:
  https://joinup.ec.europa.eu/software/page/eupl

  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
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TED Open Data Service</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- 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">

    <!-- CodeMirror CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/eclipse.min.css">
</head>

<body class="bg-light">
    <!-- Header -->
    <header class="navbar navbar-expand-lg navbar-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#">
                <img src="./src/assets/ted-logo.png" alt="TED - Publications Office of the EU" width="60"
                    class="d-inline-block align-middle mr-2"><span>TED Open Data Service</span>
            </a>
            <div class="d-flex align-items-center arrow">
                <!-- not used for now -->
            </div>
        </div>
    </header>

    <nav>
        <ul class="nav nav-tabs w-100 d-flex align-items-center" role="tablist">
            <div style="width: 20px;"><!-- leaves some space before the first tab --></div>
            <li class="nav-item" role="presentation">
                <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>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="query-results-tab" data-bs-toggle="tab" data-bs-target="#query-results"
                    type="button" role="tab" aria-controls="query-results" aria-selected="false">Query Results</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="help-tab" data-bs-toggle="tab" data-bs-target="#help" type="button" role="tab"
                    aria-controls="help" aria-selected="false">Help</button>
            </li>
            <li class="flex-grow-1"></li> <!-- Spacer -->
            <div style="width: 20px;"></div> <!-- Right margin -->
        </ul>
    </nav>

    <main class="tab-content h-100">

        <!-- Home -->
        <div class="tab-pane w-100 fade show active position-absolute" id="home-tab-content" role="tabpanel" aria-labelledby="home-tab">
            <div class="alert alert-warning" role="alert"><b>Please note</b>: This is a pre-release version of the TED SPARQL Editor. Some features may not be fully functional.</div>
            <div class="jumbotron">
                <h1 class="display-4">TED Open Data</h1>
                <p class="lead">Explore and download TED Open Data using SPARQL queries.</p>
                <hr class="my-4">
                <p>
                    The public procurement data collected by the Publications Office is available as Linked Open Data in the TED Open Data Service.
                </p>
                <p>
                    This tool allows you to explore and download TED Open Data using SPARQL queries. 
                    You can use it to compose your queries, test them, and customise the dataset that you want to retrieve. 
                    You can then use these queries to retrieve live data directly into your applications. 
                    See the Help tab for more information or writing queries and examples on how to connect Excel and other applications with TED Open Data, for further analysis and reporting.
                </p>
                <p>
                    This application is developed by the Publications Office of the EU and is available as open
                    source on <a href="https://github.com/OP-TED/ted-sparql-editor">GitHub</a>. 
                    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="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>

                <div class="form-floating mb-3">
                    <select id="format" name="format" class="form-select">
                        <option value="auto" selected>Auto</option>
                        <option value="text/html">HTML</option>
                        <option value="text/x-html+tr">HTML (Basic Browsing Links)</option>
                        <option value="application/vnd.ms-excel">Spreadsheet</option>
                        <option value="application/sparql-results+xml">XML</option>
                        <option value="application/sparql-results+json">JSON</option>
                        <option value="application/javascript">Javascript</option>
                        <option value="text/turtle">Turtle</option>
                        <option value="application/rdf+xml">RDF/XML</option>
                        <option value="text/plain">N-Triples</option>
                        <option value="text/csv">CSV</option>
                        <option value="text/tab-separated-values">TSV</option>
                    </select>
                    <label for="format">Results Format</label>
                </div>

                <div class="mb-3 d-flex justify-content-between">
                    <button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#optionsCollapse" aria-expanded="false" aria-controls="optionsCollapse">
                        Options
                    </button>
                    <button type="submit" class="btn btn-primary" id="runQueryButton" disabled>Run Query</button>
                </div>

                <div class="collapse" id="optionsCollapse">
                    <div class="card card-body">
                        <div class="row">
                            <!-- First Column: Checkboxes -->
                            <div class="col-md-6">
                                <div class="d-flex flex-column">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" id="strict" name="strict" checked>
                                        <label class="form-check-label" for="strict">Strict checking of void variables</label>
                                    </div>

                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" id="debug" name="debug">
                                        <label class="form-check-label" for="debug">Log debug info at the end of output</label>
                                    </div>

                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="report" name="report">
                                        <label class="form-check-label" for="report">Generate SPARQL compilation report</label>
                                    </div>
                                </div>
                            </div>

                            <!-- Second Column: Inputs -->
                            <div class="col-md-6">
                                <div class="form-floating mb-3">
                                    <input type="number" id="timeout" name="timeout" class="form-control"
                                        placeholder="Enter timeout in milliseconds (optional)">
                                    <label for="timeout">Timeout (ms)</label>
                                </div>
                            </div>
                        </div>

                        <!-- Keep the hidden default-graph-uri input -->
                        <div class="d-none">
                            <input type="text" id="default-graph-uri" name="default-graph-uri" class="form-control"
                                placeholder="Enter Graph IRI (optional)">
                        </div>
                    </div>
                </div>
            </form>
        </div> <!-- Close query-editor div -->

        <!-- Query Results -->
        <div class="tab-pane w-100 fade position-absolute" id="query-results" role="tabpanel" aria-labelledby="query-results-tab">
            <!-- Copy URL Alert Box -->
            <div class="alert alert-info d-flex justify-content-between align-items-center mb-2" id="copy-url-alert" style="display: none!important;">
                <span>You can run this query directly from Excel or any other application by using its URL.</span>
                <div>
                    <button id="copy-url-button" class="btn btn-secondary me-2">Copy URL</button>
                    <button id="open-url-button" class="btn btn-secondary">Download</button>
                </div>
            </div>
            <!-- Results Section -->
            <div id="results">
                <p class="text-muted">Query results will appear here...</p>
            </div>
        </div> <!-- Close query-results div -->

        <!-- Help -->
        <div class="tab-pane w-100 fade position-absolute" id="help" role="tabpanel" aria-labelledby="help-tab">
            <div class="container-fluid mt-4">
                <div class="row">
                    <!-- Left Column - Help Content -->
                    <div class="col-lg-8">
                        <h2>Help</h2>
                        <p>
                            The TED Open Data Service allows you to extract custom datasets from the entire collection of public procurement data published by the Publications Office. 
                            This is made possible with Semantic Web technologies, specifically the SPARQL query language which allows you to specify the data you want to retrieve to meet the specific needs of your application.
                        </p>
                        <p>
                            To use this tool you will need to develop some familiarity with the logic and syntax of SPARQL as well as the concepts defined in the eProcurement Ontology. 
                            For detailed information and guidance on these topics, please visit our <a href="https://docs.ted.europa.eu/" target="_blank">documentation website</a>.</p>
                        </p>
                        <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>
                                <li>You can get a URL that directly runs your query by clicking on the <b>Copy URL</b> button in the <b>Query Results</b> tab.<br/> 
                                    You can use this URL to run your query and retrieve live results directly into <b>Excel</b>, <b>Power BI</b>, or any application that can get data from the web.</li>
                                <li>To download a copy of the data retrieved by your query you can use the <b>Download</b> button in the <b>Query Results</b> tab.</li>
                            </ul>
                        </p>
                        <h3>Questions & feedback</h3>
                        <p>
                            For questions and feedback, please visit our <a href="https://github.com/OP-TED/ted-open-data/discussions" target="_blank">GitHub Discussions</a> forum.
                        </p>
                    </div>

                    <!-- Right Column - Components -->
                    <div class="col-lg-4">
                        <!-- Third-Party Components -->
                        <div class="card">
                            <div class="card-header">
                                <h5 class="card-title mb-0">Third-Party Components</h5>
                            </div>
                            <div class="card-body">
                                <h6>Frontend Components</h6>
                                <ul class="list-unstyled">
                                    <li class="mb-3">
                                        <strong>Bootstrap</strong> (v5.3.0-alpha3)
                                        <br><small class="text-muted">CSS framework for styling and components</small>
                                        <br><small class="text-secondary">License: MIT</small>
                                    </li>
                                    <li class="mb-3">
                                        <strong>CodeMirror</strong> (v5.65.2)
                                        <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>
                                <ul class="list-unstyled">
                                    <li class="mb-3">
                                        <strong>Express</strong> (v4.17.1)
                                        <br><small class="text-muted">Web server framework</small>
                                        <br><small class="text-secondary">License: MIT</small>
                                    </li>
                                    <li class="mb-3">
                                        <strong>cors</strong> (v2.8.5)
                                        <br><small class="text-muted">CORS middleware for Express</small>
                                        <br><small class="text-secondary">License: MIT</small>
                                    </li>
                                    <li class="mb-3">
                                        <strong>node-fetch</strong> (v2.6.1)
                                        <br><small class="text-muted">Fetch API implementation for Node.js</small>
                                        <br><small class="text-secondary">License: MIT</small>
                                    </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>
                    </div>
                </div>
            </div>
        </div>

    </main>

    <!-- Footer -->
    <footer class="d-flex w-100">
        <!-- Legend -->
        <div class="legend-container flex-grow-1 ml-3">
            Developed by the Publications Office of the EU.
        </div>
        <div class="progress mr-3" style="width: 10%; min-width: 100px">
            <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" style="width: 0%"></div>
        </div>
        <div id="apiStatus" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
            <div class="toast-header">
                <svg width="16" height="16" class="rounded mr-2">
                    <rect width="16" height="16" fill="red"></rect>
                </svg>
                <strong class="mr-auto">Error</strong>
                <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <ul class="toast-body">
                <!-- Error message will be inserted here -->
            </ul>
        </div>
    </footer>

    <!-- Toast Container -->
    <div class="toast-container position-fixed bottom-0 end-0 p-3">
        <div id="copyUrlToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
            <div class="toast-header">
                <strong class="me-auto">TED SPARQL Editor</strong>
                <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
            </div>
            <div class="toast-body">
                URL copied to clipboard
            </div>
        </div>
    </div>

    <!-- Bootstrap JS Bundle -->
    <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" 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>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/sparql/sparql.min.js"></script>
</body>

</html>