Edc active

demonstrator/triple-combined-service.rq

@@ -1,4 +1,4 @@
-# Datasources: https://triple.ilabt.imec.be/test/chist-era-annex-1-chemicals.ttl
+# Datasources: http://localhost:3000/test/Uploads/nbn-chist-era-annex-1-chemicals-alt.ttl
 PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
 PREFIX rh: <http://rdf.rhea-db.org/>
 PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>

demonstrator/triple-idsm-3.rq

@@ -0,0 +1,96 @@
+# Datasources: https://idsm.elixir-czech.cz/sparql/endpoint/idsm
+PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
+PREFIX sio: <http://semanticscience.org/resource/>
+PREFIX vocab: <http://rdf.ncbi.nlm.nih.gov/pubchem/vocabulary#>
+PREFIX sachem: <http://bioinfo.uochb.cas.cz/rdf/v1.0/sachem#>
+
+SELECT ?CAS ?COMPOUND ?SIMILAR_COMPOUND ?SCORE WHERE {
+  {
+    # values from Solid pod
+    VALUES ?CAS {
+      "75-35-4"
+      "71-55-6"
+      "79-00-5"
+      "630-20-6"
+      "79-34-5"
+      "106-93-4"
+      "107-06-2"
+      "542-75-6"
+      "10061-01-5"
+      "13952-84-6"
+      "91-59-8"
+      "553-00-4"
+      "612-52-2"
+      "120-23-0"
+      "121-14-2"
+      "93-76-5"
+      "10519-33-2"
+      "92-67-1"
+      "2113-61-3"
+      "92-93-3"
+      "101-77-9"
+      "81-15-2"
+      "30560-19-1"
+      "34256-82-1"
+      "50594-66-6"
+      "15972-60-8"
+      "116-06-3"
+      "834-12-8"
+      "33089-61-1"
+      "61-82-5"
+      "84-65-1"
+      "1332-21-4"
+      "77536-66-4"
+      "77536-67-5"
+      "12172-73-5"
+      "12001-28-4"
+      "77536-68-6"
+      "3337-71-1"
+      "2302-17-2"
+      "1912-24-9"
+      "2642-71-9"
+      "86-50-0"
+      "41083-11-8"
+      "71626-11-4"
+      "82560-54-1"
+      "17606-31-4"
+      "71-43-2"
+      "92-87-5"
+      "36341-27-2"
+      "85-68-7"
+      "1820573-27-0"
+      "65731-84-2"
+      "82657-04-3"
+      "485-31-4"
+    }
+
+    ?SYNONYM a sio:CHEMINF_000446 . # CAS registry number
+    ?SYNONYM sio:SIO_000300 ?CAS .
+    ?SYNONYM sio:SIO_000011 ?COMPOUND .
+
+    ?COMPOUND a vocab:Compound .
+
+    ?ATTRIBUTE a sio:SIO_011120 . # molecular structure file
+    ?ATTRIBUTE sio:SIO_000011 ?COMPOUND .
+    ?ATTRIBUTE sio:SIO_000300 ?MOLFILE .
+
+    SERVICE <https://idsm.elixir-czech.cz/sparql/endpoint/chebi> {
+      [
+        sachem:compound ?SIMILAR_COMPOUND ;
+          sachem:score ?SCORE
+      ] sachem:similaritySearch [
+        sachem:query ?MOLFILE ;
+        sachem:cutoff "0.7"^^xsd:double ;
+        sachem:similarityRadius "3"^^xsd:integer ;
+        sachem:aromaticityMode sachem:aromaticityDetectIfMissing ;
+        sachem:tautomerMode sachem:inchiTautomers
+      ] .
+    }
+  } UNION {
+    SERVICE <https://idsm.elixir-czech.cz/sparql/endpoint/chebi> {
+      ?SIMILAR_COMPOUND sachem:substructureSearch [
+        sachem:query "[As]"
+      ] .
+    }
+  }
+} ORDER BY DESC(?SCORE)

demonstrator/triple-oma-6.rq

@@ -0,0 +1,41 @@
+# Datasources: https://sparql.omabrowser.org/sparql
+PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
+PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
+PREFIX owl: <http://www.w3.org/2002/07/owl#>
+PREFIX xsd: <http://www.w3.org/2001/XMLSchema#>
+PREFIX dc: <http://purl.org/dc/elements/1.1/>
+PREFIX dct: <http://purl.org/dc/terms/>
+PREFIX skos: <http://www.w3.org/2004/02/skos/core#>
+PREFIX obo: <http://purl.obolibrary.org/obo/>
+PREFIX ensembl: <http://rdf.ebi.ac.uk/resource/ensembl/>
+PREFIX oma: <http://omabrowser.org/ontology/oma#>
+PREFIX orth: <http://purl.org/net/orth#>
+PREFIX sio: <http://semanticscience.org/resource/>
+PREFIX taxon: <http://purl.uniprot.org/taxonomy/>
+PREFIX up: <http://purl.uniprot.org/core/>
+PREFIX void: <http://rdfs.org/ns/void#>
+PREFIX lscr: <http://purl.org/lscr#>
+
+select ?protein2 ?OMA_LINK ?taxon_sci_name where {
+
+  VALUES (?Uniprot_link) { ( <http://purl.uniprot.org/uniprot/P72156> ) } # here
+  #The three that contains Orthologs. The leafs are proteins.
+  #This graph pattern defines the relationship protein1 is Orthologs to protein2
+  ?cluster a orth:OrthologsCluster.
+  ?cluster orth:hasHomologousMember ?node1.
+  ?cluster orth:hasHomologousMember ?node2.
+  ?node2 orth:hasHomologousMember* ?protein2.
+  ?node1 orth:hasHomologousMember* ?protein1.
+  ########
+
+  #Specify the protein to look for its orthologs
+  ?protein1 lscr:xrefUniprot ?Uniprot_link.
+  ########
+
+  #The OMA link to the second protein
+  ?protein2 rdfs:seeAlso ?OMA_LINK.
+  ?protein2 orth:organism/obo:RO_0002162/up:scientificName ?taxon_sci_name.
+  ########
+
+  filter(?node1 != ?node2)
+}

demonstrator/triple-solid-2.rq

@@ -0,0 +1,8 @@
+# Datasources: http://localhost:3000/test/Uploads/nbn-chist-era-annex-1-chemicals-alt.ttl
+PREFIX thd: <urn:triple-hybrid-demo:>
+SELECT DISTINCT ?CAS WHERE {
+
+  # Solid pod data
+  ?SOLIDPOD thd:predicate ?CAS .
+
+}

package.json

@@ -29,8 +29,8 @@
     "actor-query-process-remote-cache": "^0.1.0",
     "core-js": "^3.8.3",
     "fs": "^0.0.1-security",
-    "pinia": "^2.2.6",
-    "query-sparql-remote-cache": "^0.0.8",
+    "pinia": "^2.3.1",
+    "query-sparql-remote-cache": "^0.0.9",
     "sparqljs": "^3.7.3",
     "vite": "^6.2.3",
     "vue": "^3.2.13",

src/assets/main.css

@@ -1,5 +1,7 @@
+@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200..800&display=swap');
+
 body {
-  background-color: #a9a7ad;
+  background-color: var(--bg);
   margin: 0;
 }
 
@@ -8,11 +10,15 @@ body {
   flex-direction: column;
   min-height: 80vh;
   min-height: 80dvh;
-  color: #EDE7F6; /* This sets the text color inside the #app div to a dark grey */
+  color: var(--text);
 }
 
 #footer {
   display: flex;
   flex-direction: column;
   margin-top: auto;
 }
+
+.v-application, .v-overlay-container {
+  font-family: 'Oxanium', monospace;
+}

src/assets/theme.css

@@ -0,0 +1,144 @@
+:root {
+  --main: #445560;
+  --main-darker: #37474f;
+  --main-darker2: #28353e;
+  --main-gray: #bfbdc4;
+  --main-dark-gray: #1e1e1e;
+  --main-purple: #754ff6;
+  --main-purple-dark: #5728d9;
+  --main-purple-darker: #201054;
+  --main-white: #ede7f6;
+  --main-black: #000000;
+
+  --purple: hsl(262 92% 65%); /* #8a42f4 */
+  --teal: hsl(200 26% 26%); /* #344952 */
+  --ink: hsl(210 15% 12%); /* #1a1f21 */
+  --gray-50: hsl(260 20% 98%); /* #fafafc */
+  --gray-100: hsl(255 18% 96%); /* #f3f2f8 */
+  --gray-200: hsl(250 14% 90%); /* #e3e1e8 */
+  --gray-300: hsl(240 10% 84%); /* #d2d1d8 */
+  --gray-400: hsl(230 9% 70%); /* #adacb3 */
+  --gray-500: hsl(220 8% 56%); /* #888990 */
+  --gray-600: hsl(215 11% 40%); /* #5b6269 */
+  --gray-700: hsl(210 15% 30%); /* #414b52 */
+  --gray-800: hsl(205 18% 22%); /* #2d3a42 */
+  --gray-900: hsl(200 20% 12%); /* #181e21 */
+
+  /* radii & shadow */
+  --radius: 14px;
+  --shadow-1: 0 1px 2px hsl(0 0% 0% / 0.06), 0 1px 1px hsl(0 0% 0% / 0.04); /* #000000 */
+  --shadow-2: 0 8px 24px hsl(220 40% 2% / 0.22),
+    0 2px 8px hsl(220 40% 2% / 0.18); /* #040508 */
+}
+
+/* ---------------------------
+  Light theme (default)
+   --------------------------- */
+:root {
+  --bg: var(--gray-300); /* #d2d1d8 */
+  --bg-secondary: var(--gray-400); /* #adacb3 */
+  --panel: var(--main-gray); /* #ffffff */
+  --panel-elev: var(--gray-200);
+  --muted: hsl(250 14% 90%); /* #e3e1e8 */
+  --border: var(--main-white);
+  --text-primary: var(--gray-900);
+  --text-secondary: var(--ink);
+  --text-muted: hsl(215 11% 40%); /* #5b6269 */
+  --primary: var(--main-purple);
+  --primary-600: hsl(262 92% 58%); /* #6f23ec */
+  --primary-700: hsl(262 92% 52%); /* #5b09e5 */
+  --primary-100: hsl(262 92% 95%); /* #f2ebfd */
+  --accent: hsl(195 85% 48%); /* #1ba9e0 */
+  --accent-100: hsl(195 85% 94%); /* #e4f6fc */
+  --accent-700: hsl(195 85% 36%); /* #107eab */
+
+  --success: hsl(160 72% 42%); /* #1fba74 */
+  --warning: #ffd904; /* #f7a611 */
+  --danger: #ff7f7fbb;
+  --error: #ff1e00c2;
+  --info: hsl(195 85% 48%); /* #1ba9e0 */
+
+  --focus-ring: 2px solid hsl(262 92% 65% / 0.7); /* #8a42f4 */
+  --hover: #764ff633;
+  --active: hsl(210 15% 12% / 0.08); /* #1a1f21 */
+
+  --yasqe-bg: var(--main-white);
+  --yasqe-bg-2: var(--gray-200);
+  --yasqe-keyword: #5f3df1;
+  --yasqe-atom: #865700;
+  --yasqe-variable-2: #1f6feb;
+  --yasqe-string: #2e7d32;
+  --yasqe-string-2: #d32f45;
+  --yasqe-variable-3: #0e8a6a;
+  --yasqe-number: #6e56cf;
+  --yasqe-comment: #6b7280;
+  --yasqe-operator: #0b7fd3;
+  --yasqe-meta: #8a6d1a;
+  --yasqe-matchhighlight-bg: #fff2a8;
+  --yasqe-cursor: #7b61ff;
+  --yasqe-selected: #a0a0d8;
+}
+
+/* ---------------------------
+  Dark theme (stealth)
+   --------------------------- */
+:root[data-theme="dark"] {
+  --bg: hsl(200 26% 14%); /* #19262b */
+  --bg-secondary: var(--main-darker);
+  --panel: hsl(200 20% 18%); /* #242e33 */
+  --panel-elev: hsl(200 20% 22%); /* #2b3840 */
+  --muted: hsl(200 14% 28%); /* #3c474c */
+  --border: hsl(200 10% 34%); /* #4f585c */
+  --text-primary: var(--gray-300);
+  --text-secondary: var(--main-white);
+  --text-muted: hsl(260 14% 72%); /* #b3b0be */
+  --primary: var(--main-purple);
+  --primary-600: hsl(262 92% 58%); /* #6f23ec */
+  --primary-700: hsl(262 92% 50%); /* #5605e0 */
+  --primary-100: hsl(262 92% 20%); /* #1b023b */
+  --accent: hsl(195 85% 48%); /* #1ba9e0 */
+  --accent-100: hsl(195 85% 22%); /* #083a4d */
+  --accent-700: hsl(195 85% 60%); /* #4dc0ec */
+
+  --success: hsl(160 72% 46%); /* #26c980 */
+  --warning: #ffd700;
+  --danger: #ff7f7fbb;
+  --error: #ff1e00;
+  --info: hsl(195 85% 54%); /* #34b8e6 */
+
+  --focus-ring: 2px solid hsl(262 92% 65% / 0.8); /* #8a42f4 */
+  --hover: hsl(0 0% 100% / 0.03); /* #ffffff */
+  --active: hsl(0 0% 100% / 0.06); /* #ffffff */
+
+  --yasqe-bg: var(--ink);
+  --yasqe-bg-2: var(--main-darker2);
+  --yasqe-keyword: #c792ea;
+  --yasqe-atom: #f78c6c;
+  --yasqe-variable-2: #82aaff;
+  --yasqe-string: #c3e88d;
+  --yasqe-string-2: #ff5370;
+  --yasqe-variable-3: #a0fa87;
+  --yasqe-number: #ede7f6;
+  --yasqe-comment: #a9a7ad;
+  --yasqe-operator: #89ddff;
+  --yasqe-meta: #ffcb6b;
+  --yasqe-matchhighlight: #5f5f5f;
+  --yasqe-cursor: #ffcc00;
+  --yasqe-selected: #292929;
+}
+
+/* sensible global defaults */
+:where(html, body) {
+  background: var(--bg);
+  color: var(--text);
+}
+
+/* optional: smoothen transitions between themes */
+* {
+  transition: background-color 0.18s ease, color 0.18s ease,
+    border-color 0.18s ease;
+}
+
+:root {
+  --v-font-family: "Oxanium", monospace;
+}

src/components/ContainerNav.vue

@@ -160,11 +160,16 @@ export default defineComponent({
   list-style-type: none;
   padding-left: 1rem;
   margin-left: 0;
+  color: var(--text-secondary);
 }
 .dir-nav {
   padding: 1rem;
 }
-
+.dir-nav li {
+    display: flex;
+  justify-content: center;
+  align-items: center;
+}
 .directory-nav span {
   font-size: 16pt;
   font-family: "Oxanium", monospace;
@@ -181,17 +186,22 @@ export default defineComponent({
   margin-left: 15px;
   gap: 20px;
 }
-
-.select-dir .v-btn {
-  margin-bottom: 15px;
-}
 .select-dir .v-select {
   min-width: 150px;
-  margin-top: 15px;
   font-family: "Oxanium", monospace;
 }
 .navigate-btn {
   font-family: "Oxanium", monospace;
-  margin-top: 10px;
+  background-color: var(--primary);
+  color: var(--main-white);
+}
+.navigate-btn:hover {
+  background-color: var(--primary-700);
+}
+:deep(.v-input__details) {
+  display:none;
+}
+:deep(.v-field__loader) {
+  display:none;
 }
 </style>