Preload SPARCL Data GUI

gigamaster · Jul 13, 2024 · 885368a · 885368a
1 parent 7ed88ec
commit 885368a
Show file tree

Hide file tree

Showing 7 changed files with 339 additions and 14 deletions.
diff --git a/app/dataviz/sparc-data-gui/index.html b/app/dataviz/sparc-data-gui/index.html
@@ -1,18 +1,43 @@
 <!DOCTYPE html>
-<html lang="en" >
+<html lang="en">
 <head>
   <meta charset="UTF-8">
-  <title>CodePen - GUI-App-Build-Diagram-Europe-Sparql-Data-Provider</title>
-  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'><link rel="stylesheet" href="./style.css">
-
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>App GUI for SPARQL Data Provider</title>
+  <meta name="description" content="App GUI for SPARQL Data Provider - European Union">
+  <meta name="robots" content="all">
+  <meta name="keywords" content="app, gui, web, dataviz, sparql, european union, data, provider, diagram, generator, svg">
+  <meta name="rating" content="general">
+  <meta name="author" content="Nuno Luciano">
+  <meta name="copyright" content="Authors">
+  <meta name="generator" content="SPARQL">
+  <link rel="stylesheet" href="./style.css">
+  <!-- <link rel="preload" as="script" href="https://unpkg.com/[email protected]/dist/ontodia-full.min.js"> -->
+  <link rel="preload" as="script" href="./ontodia-custom-full.min.js">
+  <link rel="preload" as="script" href="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.js">
+  <link rel="preload" as="script" href="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.js">
+  <script>
+  window.addEventListener('load', () => {
+    const preload = document.querySelector('.preloader');
+    setTimeout( function() {
+        preload.classList.add('preloader-done');
+    }, 3000 );
+  });
+</script>
 </head>
 <body>
-<!-- partial:index.partial.html -->
+<div class="preloader">
+  <div class="loading">
+  <h1>SPARQL Data Provider </h1>
+  <h4>European Union :: Data Loading...</h4>
+  </div>
+</div>
 <div id="container"></div>
-<!-- partial -->
-  <script src='https://unpkg.com/[email protected]/dist/ontodia-full.min.js'></script>
+<!-- local first -->
+<script src='./ontodia-custom-full.min.js'></script>
+<!-- <script src='https://unpkg.com/[email protected]/dist/ontodia-full.min.js'></script> -->
 <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.js'></script>
-<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.js'></script><script  src="./script.js"></script>
-
+<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.js'></script>
+<script src="./script.js"></script>
 </body>
 </html>
diff --git a/app/dataviz/sparc-data-gui/ontodia-custom-full.min.js b/app/dataviz/sparc-data-gui/ontodia-custom-full.min.js
diff --git a/app/dataviz/sparc-data-gui/style.css b/app/dataviz/sparc-data-gui/style.css
@@ -3,4 +3,101 @@ html, body, #container {
   overflow: hidden;
   margin: 0;
   padding: 0;
-}
+}
+.preloader {
+  background:rgba(0,0,0,.8); 
+  display: block;
+  width: 100vw; 
+  height: 100vh; 
+  position:absolute; 
+  top:0; 
+  left:0; 
+  transition: all 2s ease-out;
+  z-index: 100
+}
+.preloader .loading {
+  background: #dbdbdb;
+  border: 5px solid;
+  position: absolute;
+  font-family: system-ui, sans-serif;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align:center;
+  padding: .5em 2em;
+}
+.preloader h1 {font-size:24px;margin-bottom: 4px;}
+.preloader h4 { font-size:16px; margin-top: 4px;}
+.preloader-done{ display:none}
+
+[class^="icon-"] {
+  display: inline-block;
+  height: 1em;
+  background-color: currentColor;
+  -webkit-mask-image: var(--svg);
+  mask-image: var(--svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+.icon-sort-alpha-asc {
+  width: 0.92em;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1632 1792'%3E%3Cpath fill='%23000' d='M1159 408h177l-72-218l-12-47q-2-16-2-20h-4l-3 20q0 1-3.5 18t-7.5 29zM704 1440q0 12-10 24l-319 319q-10 9-23 9q-12 0-23-9L9 1463q-15-16-7-35q8-20 30-20h192V32q0-14 9-23t23-9h192q14 0 23 9t9 23v1376h192q14 0 23 9t9 23m836 119v233H956v-90l369-529q12-18 21-27l11-9v-3q-2 0-6.5.5t-7.5.5q-12 3-30 3h-232v115H961v-229h567v89l-369 530q-6 8-21 26l-11 11v2l14-2q9-2 30-2h248v-119zm89-897v106h-288V662h75l-47-144h-243l-47 144h75v106H867V662h70L1167 0h162l230 662z'/%3E%3C/svg%3E");
+}
+.icon-lightbulb {
+  width: 0.67em;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1536'%3E%3Cpath fill='%23000' d='M736 448q0 13-9.5 22.5T704 480t-22.5-9.5T672 448q0-46-54-71t-106-25q-13 0-22.5-9.5T480 320t9.5-22.5T512 288q50 0 99.5 16t87 54t37.5 90m160 0q0-72-34.5-134t-90-101.5t-123-62T512 128t-136.5 22.5t-123 62t-90 101.5T128 448q0 101 68 180q10 11 30.5 33t30.5 33q128 153 141 298h228q13-145 141-298q10-11 30.5-33t30.5-33q68-79 68-180m128 0q0 155-103 268q-45 49-74.5 87T787 898.5T753 1006q47 28 47 82q0 37-25 64q25 27 25 64q0 52-45 81q13 23 13 47q0 46-31.5 71t-77.5 25q-20 44-60 70t-87 26t-87-26t-60-70q-46 0-77.5-25t-31.5-71q0-24 13-47q-45-29-45-81q0-37 25-64q-25-27-25-64q0-54 47-82q-4-50-34-107.5T177.5 803T103 716Q0 603 0 448q0-99 44.5-184.5t117-142t164-89T512 0t186.5 32.5t164 89t117 142T1024 448'/%3E%3C/svg%3E");
+}
+.icon-floppy-o {
+  width: 1em;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1536'%3E%3Cpath fill='%23000' d='M384 1408h768v-384H384zm896 0h128V512q0-14-10-38.5t-20-34.5l-281-281q-10-10-34-20t-39-10v416q0 40-28 68t-68 28H352q-40 0-68-28t-28-68V128H128v1280h128V992q0-40 28-68t68-28h832q40 0 68 28t28 68zM896 480V160q0-13-9.5-22.5T864 128H672q-13 0-22.5 9.5T640 160v320q0 13 9.5 22.5T672 512h192q13 0 22.5-9.5T896 480m640 32v928q0 40-28 68t-68 28H96q-40 0-68-28t-28-68V96q0-40 28-68T96 0h928q40 0 88 20t76 48l280 280q28 28 48 76t20 88'/%3E%3C/svg%3E");
+}
+.icon-info-circle {
+  width: 1em;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1536'%3E%3Cpath fill='%23000' d='M1024 1248v-160q0-14-9-23t-23-9h-96V544q0-14-9-23t-23-9H544q-14 0-23 9t-9 23v160q0 14 9 23t23 9h96v320h-96q-14 0-23 9t-9 23v160q0 14 9 23t23 9h448q14 0 23-9t9-23M896 352V192q0-14-9-23t-23-9H672q-14 0-23 9t-9 23v160q0 14 9 23t23 9h192q14 0 23-9t9-23m640 416q0 209-103 385.5T1153.5 1433T768 1536t-385.5-103T103 1153.5T0 768t103-385.5T382.5 103T768 0t385.5 103T1433 382.5T1536 768'/%3E%3C/svg%3E");
+}
+.icon-sitemap {
+  width: 1.17em;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1536'%3E%3Cpath fill='%23000' d='M1792 1120v320q0 40-28 68t-68 28h-320q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h96V832H960v192h96q40 0 68 28t28 68v320q0 40-28 68t-68 28H736q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h96V832H320v192h96q40 0 68 28t28 68v320q0 40-28 68t-68 28H96q-40 0-68-28t-28-68v-320q0-40 28-68t68-28h96V832q0-52 38-90t90-38h512V512h-96q-40 0-68-28t-28-68V96q0-40 28-68t68-28h320q40 0 68 28t28 68v320q0 40-28 68t-68 28h-96v192h512q52 0 90 38t38 90v192h96q40 0 68 28t28 68'/%3E%3C/svg%3E");
+}
+.icon-search-plus {
+  width: 1em;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1664'%3E%3Cpath fill='%23000' d='M1024 672v64q0 13-9.5 22.5T992 768H768v224q0 13-9.5 22.5T736 1024h-64q-13 0-22.5-9.5T640 992V768H416q-13 0-22.5-9.5T384 736v-64q0-13 9.5-22.5T416 640h224V416q0-13 9.5-22.5T672 384h64q13 0 22.5 9.5T768 416v224h224q13 0 22.5 9.5t9.5 22.5m128 32q0-185-131.5-316.5T704 256T387.5 387.5T256 704t131.5 316.5T704 1152t316.5-131.5T1152 704m512 832q0 53-37.5 90.5T1536 1664q-54 0-90-38l-343-342q-179 124-399 124q-143 0-273.5-55.5t-225-150t-150-225T0 704t55.5-273.5t150-225t225-150T704 0t273.5 55.5t225 150t150 225T1408 704q0 220-124 399l343 343q37 37 37 90'/%3E%3C/svg%3E");
+}
+.icon-search-minus {
+  width: 1em;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1664'%3E%3Cpath fill='%23000' d='M1024 672v64q0 13-9.5 22.5T992 768H416q-13 0-22.5-9.5T384 736v-64q0-13 9.5-22.5T416 640h576q13 0 22.5 9.5t9.5 22.5m128 32q0-185-131.5-316.5T704 256T387.5 387.5T256 704t131.5 316.5T704 1152t316.5-131.5T1152 704m512 832q0 53-37.5 90.5T1536 1664q-54 0-90-38l-343-342q-179 124-399 124q-143 0-273.5-55.5t-225-150t-150-225T0 704t55.5-273.5t150-225t225-150T704 0t273.5 55.5t225 150t150 225T1408 704q0 220-124 399l343 343q37 37 37 90'/%3E%3C/svg%3E");
+}
+.icon-arrows-alt {
+  width: 1em;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1536'%3E%3Cpath fill='%23000' d='M1283 413L928 768l355 355l144-144q29-31 70-14q39 17 39 59v448q0 26-19 45t-45 19h-448q-42 0-59-40q-17-39 14-69l144-144l-355-355l-355 355l144 144q31 30 14 69q-17 40-59 40H64q-26 0-45-19t-19-45v-448q0-42 40-59q39-17 69 14l144 144l355-355l-355-355l-144 144q-19 19-45 19q-12 0-24-5q-40-17-40-59V64q0-26 19-45T64 0h448q42 0 59 40q17 39-14 69L413 253l355 355l355-355l-144-144q-31-30-14-69q17-40 59-40h448q26 0 45 19t19 45v448q0 42-39 59q-13 5-25 5q-26 0-45-19z'/%3E%3C/svg%3E");
+}
+.icon-picture {
+  width: 1.25em;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1536'%3E%3Cpath fill='%23000' d='M640 448q0 80-56 136t-136 56t-136-56t-56-136t56-136t136-56t136 56t56 136m1024 384v448H256v-192l320-320l160 160l512-512zm96-704H160q-13 0-22.5 9.5T128 160v1216q0 13 9.5 22.5t22.5 9.5h1600q13 0 22.5-9.5t9.5-22.5V160q0-13-9.5-22.5T1760 128m160 32v1216q0 66-47 113t-113 47H160q-66 0-113-47T0 1376V160Q0 94 47 47T160 0h1600q66 0 113 47t47 113'/%3E%3C/svg%3E");
+}
+.icon-print {
+  width: 1.09em;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1536'%3E%3Cpath fill='%23000' d='M384 1408h896v-256H384zm0-640h896V384h-160q-40 0-68-28t-28-68V128H384zm1152 64q0-26-19-45t-45-19t-45 19t-19 45t19 45t45 19t45-19t19-45m128 0v416q0 13-9.5 22.5t-22.5 9.5h-224v160q0 40-28 68t-68 28H352q-40 0-68-28t-28-68v-160H32q-13 0-22.5-9.5T0 1248V832q0-79 56.5-135.5T192 640h64V96q0-40 28-68t68-28h672q40 0 88 20t76 48l152 152q28 28 48 76t20 88v256h64q79 0 135.5 56.5T1664 832'/%3E%3C/svg%3E");
+}
+.icon-chevron-down {
+  width: 1.27em;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1312'%3E%3Cpath fill='%23000' d='m1619 552l-742 741q-19 19-45 19t-45-19L45 552q-19-19-19-45.5T45 461l166-165q19-19 45-19t45 19l531 531l531-531q19-19 45-19t45 19l166 165q19 19 19 45.5t-19 45.5'/%3E%3C/svg%3E");
+}
+.icon-search {
+  width: 1em;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1664'%3E%3Cpath fill='%23000' d='M1152 704q0-185-131.5-316.5T704 256T387.5 387.5T256 704t131.5 316.5T704 1152t316.5-131.5T1152 704m512 832q0 52-38 90t-90 38q-54 0-90-38l-343-342q-179 124-399 124q-143 0-273.5-55.5t-225-150t-150-225T0 704t55.5-273.5t150-225t225-150T704 0t273.5 55.5t225 150t150 225T1408 704q0 220-124 399l343 343q37 37 37 90'/%3E%3C/svg%3E");
+}
+.icon-times {
+  width: 0.93em;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1216 1312'%3E%3Cpath fill='%23000' d='M1202 1066q0 40-28 68l-136 136q-28 28-68 28t-68-28L608 976l-294 294q-28 28-68 28t-68-28L42 1134q-28-28-28-68t28-68l294-294L42 410q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294l294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68L880 704l294 294q28 28 28 68'/%3E%3C/svg%3E");
+}
+.icon-arrows-h {
+  width: 1.4em;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1280'%3E%3Cpath fill='%23000' d='M1792 640q0 26-19 45l-256 256q-19 19-45 19t-45-19t-19-45V768H384v128q0 26-19 45t-45 19t-45-19L19 685Q0 666 0 640t19-45l256-256q19-19 45-19t45 19t19 45v128h1024V384q0-26 19-45t45-19t45 19l256 256q19 19 19 45'/%3E%3C/svg%3E");
+}
+.icon-text-width {
+  width: 0.93em;
+  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1664'%3E%3Cpath fill='%23000' d='m81 1l54 27q12 5 211 5q44 0 132-2t132-2q70 0 246.5-1t304.5-.5t247 4.5q33 1 56-31l42-1q4 0 14 .5t14 .5q2 112 2 336q0 80-5 109q-39 14-68 18q-25-44-54-128q-3-9-11-47.5t-15-73.5t-7-36q-10-13-27-19q-5-2-66-2q-30 0-93-1t-103-1t-94 2t-96 7q-9 81-8 136l1 152v-52q0 55 1 154t1.5 180t.5 153q0 16-2.5 71.5t0 91.5t12.5 69q40 21 124 42.5t120 37.5q5 40 5 50q0 14-3 29l-34 1q-76 2-218-8t-207-10q-50 0-151 9t-152 9q-3-51-3-52v-9q17-27 61.5-43t98.5-29t78-27q7-16 11.5-74t6-145.5t1.5-155t-.5-153.5t-.5-89q0-7-2.5-21.5T635 459q0-7 .5-44t1-73t0-76.5t-3-67.5t-6.5-32q-11-12-162-12q-41 0-163 13.5T164 192q-19 12-34 71.5T98.5 375T56 429q-42-26-56-44V2zm1229 1282q12 0 42 19.5t57.5 41.5t59.5 49t36 30q26 21 26 49t-26 49q-4 3-36 30t-59.5 49t-57.5 41.5t-42 19.5q-13 0-20.5-10.5t-10-28.5t-2.5-33.5t1.5-33t1.5-19.5H256q0 2 1.5 19.5t1.5 33t-2.5 33.5t-10 28.5T226 1661q-12 0-42-19.5t-57.5-41.5t-59.5-49t-36-30q-26-21-26-49t26-49q4-3 36-30t59.5-49t57.5-41.5t42-19.5q13 0 20.5 10.5t10 28.5t2.5 33.5t-1.5 33t-1.5 19.5h1024q0-2-1.5-19.5t-1.5-33t2.5-33.5t10-28.5t20.5-10.5'/%3E%3C/svg%3E");
+}
diff --git a/app/dataviz/sparcl-data-gui-eu.jpg b/app/dataviz/sparcl-data-gui-eu.jpg
diff --git a/app/dataviz/sparcl-data-gui-eu.webp b/app/dataviz/sparcl-data-gui-eu.webp
diff --git a/app/dataviz/sparc-data-gui.md → app/dataviz/sparcl-data-gui.md b/app/dataviz/sparc-data-gui.md → app/dataviz/sparcl-data-gui.md
@@ -1,8 +1,12 @@
-# GUI-App-Build-Diagram-Europe-Sparql-Data-Provider
+# GUI-App-Build-Diagram
 
-Ontodia needs to have an access to data, therefore you have to provide a SPARQL endpoint URL in environment property.   
+European Union Sparql Data Provider   
+Ontodia needs to have an access to data,  
+therefore you have to provide a SPARQL  
+endpoint URL in environment property.   
 
-We've set European Union Data Provider to use for demonstration purposes. 
+We've set European Union Data Provider   
+to use for demonstration purposes. 
 
 ## Ontodia
 

diff --git a/src/template/head.html b/src/template/head.html
@@ -47,7 +47,7 @@
 <style>[x-cloak] { display: none; }</style>
 </head>
 <body>
-  <div x-data="setup()" x-init="$refs.loading.classList.add('hidden'); setColors(color);" :class="{ 'dark': isDark}">
+  <div x-data="setup()" x-init="setTimeout(() => $refs.loading.classList.add('hidden') = true, 2000); setColors(color);" :class="{ 'dark': isDark}">
     <div id="notificationWrapper" class="fixed top-4 w-64 right-4 space-y-2"></div>
     <div class="flex h-screen antialiased text-gray-900 bg-gray-100 dark:bg-dark dark:text-light">
       <!-- Loading -->