Added support for setting preferred language

examples/custom-query/src/index.ts

@@ -1,7 +1,7 @@
-import { lucene, lucene_instance, SearchResource } from "./store";
+import { lucene, lucene_instance, SearchResource, popisDat } from "./store";
 import { $ } from "@ldkit/sparql";
 import { namedNode as n } from "@ldkit/rdf";
-import { skos } from "@ldkit/namespaces";
+import { skos, dcterms } from "@ldkit/namespaces";
 
 console.log("CUSTOM SEARCH QUERY USING LUCENE GRAPHDB CONNECTOR");
 
@@ -16,9 +16,11 @@ CONSTRUCT {
           ${n(skos.prefLabel)} ?label ;
           ${n(lucene.snippetText)} ?snippetText ;
           ${n(lucene.snippetField)} ?snippetField ;
-          ${n(lucene.score)} ?score .
+          ${n(lucene.score)} ?score ;
+          ${n(popisDat["je-pojmem-ze-slovníku"])} ?vocabulary ;
+          ${n(dcterms.title)} ?vocabularyTitle .
 } WHERE {
-  SELECT DISTINCT ?entity ?label ?snippetField ?snippetText ?score {
+  SELECT DISTINCT ?entity ?label ?snippetField ?snippetText ?score ?vocabulary ?vocabularyTitle {
     { ?search a ${n(lucene_instance.label_index)} } 
     UNION 
     { ?search a ${n(lucene_instance.defcom_index)} }
@@ -29,6 +31,8 @@ CONSTRUCT {
       ?entity a ${n(skos.Concept)} ;
               ${n(skos.prefLabel)} ?label .
     }
+    ?entity ${n(popisDat["je-pojmem-ze-slovníku"])} ?vocabulary .
+    ?vocabulary ${n(dcterms.title)} ?vocabularyTitle .
     ?entity ${n(lucene.score)} ?initScore ;
             ${n(lucene.snippets)} _:s .
     _:s ${n(lucene.snippetText)} ?snippetText ;
@@ -51,6 +55,13 @@ console.log(query);
 const results = SearchResource.query(query);
 results.subscribe((res) => {
   for (const r of res) {
-    console.log(r.label, r.score, r.snippetField, r.snippetText);
+    console.log(
+      r.label,
+      r.score,
+      r.snippetField,
+      r.snippetText,
+      r.vocabulary,
+      r.vocabularyTitle
+    );
   }
 });

examples/custom-query/src/store.ts

@@ -4,7 +4,13 @@ import {
   createDefaultContext,
 } from "@ldkit/core";
 import type { SchemaInterface } from "@ldkit/core";
-import { xsd, skos } from "@ldkit/namespaces";
+import { xsd, skos, dcterms } from "@ldkit/namespaces";
+
+export const popisDat = createNamespace({
+  iri: "http://onto.fel.cvut.cz/ontologies/slovník/agendový/popis-dat/pojem/",
+  prefix: "popisdat:",
+  terms: ["je-pojmem-ze-slovníku"],
+} as const);
 
 export const lucene = createNamespace({
   iri: "http://www.ontotext.com/connectors/lucene#",
@@ -35,6 +41,8 @@ const SearchSchema = {
     "@id": lucene.score,
     "@type": xsd.double,
   },
+  vocabulary: popisDat["je-pojmem-ze-slovníku"],
+  vocabularyTitle: dcterms.title,
 } as const;
 
 const customFetch = (resource: RequestInfo, init?: RequestInit) => {

examples/dbpedia-actors/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@ldkit/example-dbpedia-actors",
+  "version": "0.1.5",
+  "author": "Karel Klima",
+  "license": "MIT",
+  "scripts": {
+    "start": "parcel src/index.html",
+    "build": "parcel build src/index.html --no-scope-hoist"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "@ldkit/core": "*",
+    "@ldkit/namespaces": "*",
+    "@ldkit/rdf": "*",
+    "@ldkit/react": "*",
+    "@ldkit/sparql": "*",
+    "@mui/material": "^5.0.4",
+    "rxjs": "^7.4.0"
+  }
+}

examples/dbpedia-actors/src/components/Actor.tsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from "react";
+import { firstValueFrom } from "rxjs";
+
+import { createLocalizedActorResource, ActorInterface } from "../store";
+import { Grid, Typography } from "@mui/material";
+
+type ActorProps = {
+  actorIri: string;
+  language: string;
+};
+
+export const Actor: React.FC<ActorProps> = ({ actorIri, language }) => {
+  const [actor, setActor] = useState<ActorInterface | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      setActor(null);
+      const result = await firstValueFrom(
+        createLocalizedActorResource(language).findByIris([actorIri])
+      );
+      setActor(result[0]);
+    };
+    fetchData();
+  }, [setActor, actorIri, language]);
+
+  if (!actor) {
+    return <>Loading...</>;
+  }
+
+  return (
+    <Grid container spacing={2}>
+      <Grid item xs={12}>
+        <Typography variant="h2">{actor.name}</Typography>
+        <Typography>
+          Born {actor.birthDate.toLocaleDateString()} as {actor.birthName}
+        </Typography>
+      </Grid>
+      <Grid item xs={8}>
+        <Typography>{actor.abstract}</Typography>
+      </Grid>
+      <Grid item xs={4}>
+        <img src={actor.thumbnail} />
+      </Grid>
+    </Grid>
+  );
+};

examples/dbpedia-actors/src/components/Actors.tsx

@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from "react";
+import { Container, Grid, TextField, MenuItem } from "@mui/material";
+
+import { favouriteActors, languages } from "../store";
+import { Actor } from "./Actor";
+
+export const Actors: React.FC = () => {
+  const [initialized, setInitialized] = useState(false);
+  const [actorIri, setActorIri] = useState("");
+  const [language, setLanguage] = useState("");
+
+  useEffect(() => {
+    setActorIri(favouriteActors[0]), setLanguage(languages[0]);
+    setInitialized(true);
+  }, [setActorIri, setLanguage, setInitialized]);
+
+  if (!initialized) {
+    return null;
+  }
+
+  const handleActorChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setActorIri(event.target.value);
+  };
+
+  const handleLanguageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setLanguage(event.target.value);
+  };
+
+  return (
+    <Container maxWidth="md" sx={{ paddingTop: 4 }}>
+      <Grid container spacing={2}>
+        <Grid item xs={8}>
+          <TextField
+            select
+            fullWidth
+            label="Select actor resource"
+            value={actorIri}
+            onChange={handleActorChange}
+          >
+            {favouriteActors.map((option) => (
+              <MenuItem key={option} value={option}>
+                {option}
+              </MenuItem>
+            ))}
+          </TextField>
+        </Grid>
+        <Grid item xs={4}>
+          <TextField
+            select
+            fullWidth
+            label="Select preferred language"
+            value={language}
+            onChange={handleLanguageChange}
+          >
+            {languages.map((option) => (
+              <MenuItem key={option} value={option}>
+                {option}
+              </MenuItem>
+            ))}
+          </TextField>
+        </Grid>
+        <Grid item xs={12}>
+          <Actor actorIri={actorIri} language={language} />
+        </Grid>
+      </Grid>
+    </Container>
+  );
+};

examples/dbpedia-actors/src/components/App.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Actors } from "./Actors";
+
+import {
+  CssBaseline,
+  AppBar,
+  Toolbar,
+  Typography,
+  Box,
+  Button,
+} from "@mui/material";
+
+export const App = () => (
+  <>
+    <CssBaseline />
+    <AppBar position="static">
+      <Toolbar>
+        <Typography variant="h6" noWrap>
+          DBpedia Actors example app
+        </Typography>
+
+        <Box sx={{ flexGrow: 1 }} />
+        <Button color="inherit" href="https://github.com/karelklima/ldkit">
+          LDKit
+        </Button>
+      </Toolbar>
+    </AppBar>
+    <Actors />
+  </>
+);

examples/dbpedia-actors/src/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>LDKit DBpedia Actors example</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="index.tsx"></script>
+  </body>
+</html>

examples/dbpedia-actors/src/index.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { render } from "react-dom";
+
+import { App } from "./components/App";
+
+render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("app")
+);

examples/dbpedia-actors/src/store.ts

@@ -0,0 +1,58 @@
+import {
+  createResource,
+  createNamespace,
+  createDefaultContext,
+  createContext,
+} from "@ldkit/core";
+import type { SchemaInterface } from "@ldkit/core";
+import { xsd } from "@ldkit/namespaces";
+
+export const dbo = createNamespace({
+  iri: "http://dbpedia.org/ontology/",
+  prefix: "dbo:",
+  terms: ["Person", "abstract", "thumbnail", "birthDate", "birthName"],
+} as const);
+
+export const dbp = createNamespace({
+  iri: "http://dbpedia.org/property/",
+  prefix: "dbp:",
+  terms: ["name"],
+} as const);
+
+export const rdfs = createNamespace({
+  iri: "http://www.w3.org/2000/01/rdf-schema#",
+  prefix: "rdfs:",
+  terms: ["label"],
+} as const);
+
+const ActorSchema = {
+  "@type": dbo.Person,
+  name: rdfs.label,
+  abstract: dbo.abstract,
+  thumbnail: dbo.thumbnail,
+  birthDate: {
+    "@id": dbo.birthDate,
+    "@type": xsd.date,
+  },
+  birthName: dbo.birthName,
+} as const;
+
+export const createLanguageContext = (language: string) =>
+  createContext({
+    sources: ["https://dbpedia.org/sparql"],
+    language,
+  });
+
+export type ActorInterface = SchemaInterface<typeof ActorSchema>;
+
+export const createLocalizedActorResource = (language: string) =>
+  createResource(ActorSchema, createLanguageContext(language));
+
+export const favouriteActors = [
+  "http://dbpedia.org/resource/Brad_Pitt",
+  "http://dbpedia.org/resource/Karl_Urban",
+  "http://dbpedia.org/resource/Margot_Robbie",
+  "http://dbpedia.org/resource/Gal_Gadot",
+];
+
+export const languages = ["en", "cs", "ru", "de"];

examples/dbpedia-actors/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": ["src"],
+  "references": [
+    {
+      "path": "../../library/context"
+    },
+    {
+      "path": "../../library/core"
+    },
+    {
+      "path": "../../library/namespaces"
+    },
+    {
+      "path": "../../library/rdf"
+    },
+    {
+      "path": "../../library/react"
+    },
+    {
+      "path": "../../library/sparql"
+    }
+  ]
+}

library/context/src/index.ts

@@ -29,6 +29,7 @@ type ComunicaContext = {
 
 type LibraryContext = {
   graph: string;
+  language: string;
 };
 
 export type Context = Partial<LibraryContext> & Partial<ComunicaContext>;

library/react/src/index.ts

@@ -1,10 +1,16 @@
+import { useMemo } from "react";
 import type { Observable } from "rxjs";
 import { useObservable, useObservableState } from "observable-hooks";
 
 export const useResource = <T extends any>(
   observableInit: () => Observable<T>,
-  defaultState: T
+  defaultState: T,
+  deps: React.DependencyList = []
 ) => {
-  const o$ = useObservable(observableInit);
+  const o$ = useMemo(() => {
+    console.log("REMEMOIZING");
+    return observableInit();
+  }, deps);
+  // const o$ = useObservable(memoizedObservableInit);
   return useObservableState(o$, defaultState);
 };