gide-sparnatural/index.html at main · German-BioImaging/gide-sparnatural · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>GIDE Sparnatural Demo – foundingGIDE prototype</title>

  <link rel="icon" href="assets/ome-sparql-logo.svg" type="image/svg+xml">
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

  <!-- YASGUI CSS -->
  <link href="https://unpkg.com/@triply/yasgui/build/yasgui.min.css" rel="stylesheet" type="text/css" />

  <!-- Font Awesome -->
  <link rel="stylesheet" href="fa/css/all.min.css" />

  <!-- Sparnatural CSS -->
  <link rel="stylesheet" href="assets/css/sparnatural.css">

  <!-- This page custom CSS -->
  <link rel="stylesheet" href="assets/css/styles.css">
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-light">
    <div class="container">
      <a class="navbar-brand d-flex align-items-center">
        <img src="assets/ome-sparql-logo.svg" alt="OMERO-SPARQL Logo" height="30" class="me-2">
        GIDE Sparnatural Demo
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link" href="https://idr.openmicroscopy.org/" target="_blank" rel="noopener noreferrer">IDR</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://founding-gide.eurobioimaging.eu/" target="_blank" rel="noopener noreferrer">foundingGIDE</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://github.com/BioImage-Archive/gide-search" target="_blank" rel="noopener noreferrer">GIDE Search</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://github.com/German-BioImaging/idr-sparnatural" target="_blank" rel="noopener noreferrer">GitHub</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://sparnatural.eu" target="_blank" rel="noopener noreferrer">Sparnatural Home</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container my-5">
    <p>
      <em>This is a GIDE Sparnatural demo and prototype developed as part of the <a
          href="https://founding-gide.eurobioimaging.eu/" target="_blank" rel="noopener noreferrer">foundingGIDE</a> project.</em>
      It explores advanced metadata search for the <a href="https://idr.openmicroscopy.org/" target="_blank" rel="noopener noreferrer">Image Data
        Resource (IDR)</a>, using <a href="https://www.researchobject.org/ro-crate/" target="_blank" rel="noopener noreferrer">RO-Crate</a> to
      convert study metadata into JSON-LD/RDF.
    </p>
    <p class="small text-muted">
      Extended rationale and background are available at <a href="https://github.com/BioImage-Archive/gide-search"
        target="_blank" rel="noopener noreferrer">BioImage-Archive/gide-search</a>.
    </p>
    <div class="col-lg-12 px-0">

      <div class="d-flex align-items-center mb-3 bg-light p-2 rounded border">
        <label for="endpointSelect" class="me-2 fw-bold text-nowrap">SPARQL Endpoint:</label>
        <select class="form-select form-select-sm" id="endpointSelect" aria-label="Select SPARQL Endpoint">
          <option value="https://api.triplydb.com/datasets/tiago/IDR-studies/sparql">IDR Studies</option>
          <option value="https://api.triplydb.com/datasets/tiago/GIDE-crates/sparql" selected>GIDE Crates</option>
        </select>
      </div>

      <p>
        Load example queries :
      <ul>
        <li> <a href="#"
            onclick="document.querySelector('spar-natural').loadQuery(window['example_1']);return false;">Studies about Arabidopsis thaliana</a></li>
        <li> <a href="#"
            onclick="document.querySelector('spar-natural').loadQuery(window['example_2']);return false;">Sample
            studies excluding Mus musculus and Homo sapiens</a></li>
        <li> <a href="#"
            onclick="document.querySelector('spar-natural').loadQuery(window['example_3']);return false;">Studies
            released
            after 2020 with imaging methods.</a></li>
        <li> <a href="#"
            onclick="document.querySelector('spar-natural').loadQuery(window['example_4']);return false;">Studies
            about Bacteria that used light microscopy</a></li>
      </ul>
      </p>

    <!-- The sparnatural web component with config attributes. -->
    <!-- See http://docs.sparnatural.eu/Javascript-integration.html#html-attributes-reference -->

    <spar-natural id="sparnatural-component" src="idr_studies_shacl.ttl" endpoint="https://api.triplydb.com/datasets/tiago/GIDE-crates/sparql"
      lang="en" defaultLang="en" distinct="true" limit="1000" debug="true"></spar-natural>


      <span class="btn btn-primary" id="sparql-toggle">Toggle SPARQL query</span>


    </div>
  </div>

  <!-- raw SPARQL query editor, yasQE -->
  <!-- see https://triply.cc/docs/yasgui/ -->
  <div class="container my-5">
    <div id="yasqe" style="display:none; " />
  </div>

  <!-- SPARQL query results display, yasR -->
  <!-- see https://triply.cc/docs/yasgui/ -->
  <div class="container my-5">
    <div id="yasr">
    </div>
  </div>

  <!-- Footer -->
  <footer class="bg-light text-center text-muted py-4 mt-5">

    <p>
      Prototype for the <a href="https://founding-gide.eurobioimaging.eu/" target="_blank" rel="noopener noreferrer">foundingGIDE</a> project,
      supported by <a href="https://gerbi-gmb.de/" target="_blank" rel="noopener noreferrer">German BioImaging</a>.
    </p>
    <p class="small">
      Development by <a href="https://tiago.bio.br" target="_blank" rel="noopener noreferrer">Tiago Lubiana</a>
    </p>
    <p class="small">
      Built with
      <a href="https://sparnatural.eu" target="_blank" rel="noopener noreferrer">Sparnatural</a>
      (<a href="https://github.com/sparna-git/Sparnatural" target="_blank" rel="noopener noreferrer">source</a>,
      <a href="https://www.gnu.org/licenses/lgpl-3.0.html" target="_blank" rel="noopener noreferrer">LGPL-3.0</a>)
      and <a href="https://triply.cc/docs/yasgui/" target="_blank" rel="noopener noreferrer">YASGUI</a>.
      <em>This is in development – feedback welcome
        (<a href="https://github.com/German-BioImaging/gide-sparnatural" target="_blank" rel="noopener noreferrer">source</a>,
        <a href="https://github.com/BioImage-Archive/gide-search" target="_blank" rel="noopener noreferrer">rationale and extended info</a>).</em>
    </p>
  </footer>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
    crossorigin="anonymous"></script>

  <!-- YASGUI JS -->
  <script src="https://unpkg.com/@triply/yasgui/build/yasgui.min.js"></script>

  <!-- Sparnatural JS -->
  <script src="assets/js/sparnatural.js"></script>

  <!-- Sparnatural Custom YASR plugins -->
  <script src="assets/js/sparnatural-yasgui-plugins.js"></script>

  <!-- File containing example queries -->
  <script src="assets/js/example-queries.js"></script>

  <!-- This page custom JS -->
  <script src="assets/js/main.js"></script>
</body>

</html>