Merge pull request #87 from opendata-mvcr/chore/86-update-ldkit

[#86] Update LDKit to v0.2

package.json

@@ -5,10 +5,10 @@
   "dependencies": {
     "@emotion/react": "^11.6.0",
     "@emotion/styled": "^11.6.0",
-    "@ldkit/core": "^0.1.7",
-    "@ldkit/namespaces": "^0.1.7",
-    "@ldkit/rdf": "^0.1.7",
-    "@ldkit/sparql": "^0.1.7",
+    "@ldkit/core": "^0.2.1",
+    "@ldkit/namespaces": "^0.2.1",
+    "@ldkit/rdf": "^0.2.1",
+    "@ldkit/sparql": "^0.2.1",
     "@mui/icons-material": "^5.1.0",
     "@mui/material": "^5.1.0",
     "@mui/styles": "^5.1.0",

src/api/TermAPI.ts

@@ -3,50 +3,20 @@ import { firstValueFrom } from "rxjs";
 
 import { TermBaseInterface, Terms } from "./data/terms";
 
-// TODO: remove this interface / move it somewhere else
-export interface TermBase {
-  uri: string;
-  vocabulary: string;
-}
-
-const materializeVocabulary = (
-  vocabulary: TermBaseInterface["vocabulary"]
-): TermBaseInterface["vocabulary"] => ({
-  "@id": vocabulary["@id"],
-  "@type": vocabulary["@type"],
-  label: vocabulary.label,
-});
-
-const materializeTerm = (term: TermBaseInterface): TermBaseInterface => ({
-  "@id": term["@id"],
-  "@type": term["@type"],
-  label: term.label,
-  definition: term.definition,
-  vocabulary: materializeVocabulary(term.vocabulary),
-});
+// This is a supertype of TermBaseInterface containing term id and vocabulary id
+export type TermBase = Pick<TermBaseInterface, "$id"> & {
+  vocabulary: Pick<TermBaseInterface["vocabulary"], "$id">;
+};
 
 export const getTerm = async (termIri: string) => {
-  const data = await firstValueFrom(Terms.findByIris([termIri]));
+  const data = await firstValueFrom(Terms.findByIri(termIri));
 
-  if (data.length < 1) {
+  if (!data) {
     // Term not found
     throw new Error("404 Term not found");
   }
 
-  const item = data[0];
-
-  // Materialize data to actual JS objects for React Query support
-  return {
-    "@id": item["@id"],
-    "@type": item["@type"],
-    label: item.label,
-    altLabels: item.altLabels,
-    definition: item.definition,
-    source: item.source,
-    parentTerms: item.parentTerms.map(materializeTerm),
-    subTerms: item.subTerms.map(materializeTerm),
-    vocabulary: materializeVocabulary(item.vocabulary),
-  };
+  return data;
 };
 
 export const useTerm = (termIri: string) => {

src/api/VocabularyAPI.ts

@@ -7,21 +7,14 @@ import {
 } from "./data/vocabularies";
 
 export const getVocabulary = async (vocabularyIri: string) => {
-  const data = await firstValueFrom(Vocabularies.findByIris([vocabularyIri]));
+  const data = await firstValueFrom(Vocabularies.findByIri(vocabularyIri));
 
-  if (data.length < 1) {
+  if (!data) {
     // Vocabulary not found
     throw new Error("404 Vocabulary not found");
   }
 
-  const item = data[0];
-
-  return {
-    "@id": item["@id"],
-    "@type": item["@type"],
-    label: item.label,
-    description: item.description,
-  };
+  return data;
 };
 
 export const useVocabulary = (vocabularyUri: string) => {
@@ -36,18 +29,11 @@ export const useVocabulary = (vocabularyUri: string) => {
 };
 
 const getVocabularyTerms = async (vocabularyIri: string) => {
-  const dynamicData = await firstValueFrom(
+  const data = await firstValueFrom(
     VocabularyTerms.query(getVocabularyTermsQuery(vocabularyIri))
   );
 
-  // Materialize data to actual JS objects so that we can manipulate it with lodash
-  const data = dynamicData
-    .map((item) => ({
-      "@id": item["@id"],
-      "@type": item["@type"],
-      label: item.label,
-    }))
-    .sort((a, b) => a.label.localeCompare(b.label));
+  data.sort((a, b) => a.label.localeCompare(b.label));
 
   return data;
 };

src/api/WordsAPI.ts

@@ -7,33 +7,7 @@ const getSearchResults = async (word: string | undefined) => {
   if (!word) {
     return [];
   }
-  const dynamicData = await firstValueFrom(
-    SearchResource.query(getSearchQuery(word))
-  );
-
-  // Materialize data to actual JS objects so that we can manipulate it with lodash
-  const data = dynamicData.map((item) => {
-    const {
-      "@id": uri,
-      label,
-      definition,
-      vocabulary,
-      vocabularyTitle,
-      score,
-      snippetField,
-      snippetText,
-    } = item;
-    return {
-      uri,
-      label,
-      definition,
-      vocabulary,
-      vocabularyTitle,
-      score,
-      snippetField,
-      snippetText,
-    };
-  });
+  const data = await firstValueFrom(SearchResource.query(getSearchQuery(word)));
 
   // Groups results with the same label
   // adds isWord flag when there are multiple
@@ -50,7 +24,7 @@ const getSearchResults = async (word: string | undefined) => {
         isWord: objs.length !== 1,
         // vocabularies: _.map(_.uniqBy(objs, "vocabulary"), "vocabulary"),
         vocabularies: objs.reduce((map, item) => {
-          map[item.vocabulary] = item.vocabularyTitle;
+          map[item.vocabulary.$id] = item.vocabulary.title;
           return map;
         }, {} as Record<string, string>),
       };

src/api/data/search.ts

@@ -1,16 +1,26 @@
 import { SchemaInterface, createResource } from "@ldkit/core";
-import { xsd, skos, dcterms } from "@ldkit/namespaces";
+import { xsd, skos, dcterms, ldkit } from "@ldkit/namespaces";
 import { namedNode as n, literal as l } from "@ldkit/rdf";
 import { $ } from "@ldkit/sparql";
 import { lucene, luceneInstance, popisDat } from "./namespaces";
 import { context } from "./context";
 
+const VocabularySchema = {
+  "@type": skos.Concept,
+  title: dcterms.title,
+};
+
 const SearchSchema = {
   "@type": skos.Concept,
   label: skos.prefLabel,
-  definition: skos.definition,
-  vocabulary: popisDat["je-pojmem-ze-slovníku"],
-  vocabularyTitle: dcterms.title,
+  definition: {
+    "@id": skos.definition,
+    "@optional": true,
+  },
+  vocabulary: {
+    "@id": popisDat["je-pojmem-ze-slovníku"],
+    "@context": VocabularySchema,
+  },
   snippetField: lucene.snippetField,
   snippetText: lucene.snippetText,
   score: {
@@ -45,14 +55,14 @@ export const getSearchQuery = (text: string) => {
 
   const query = $`
 CONSTRUCT {
-  ?entity a ${n(skos.Concept)} ;
+  ?entity a ${n(skos.Concept)} , ${n(ldkit.Resource)} ;
           ${n(skos.prefLabel)} ?label ;
           ${n(skos.definition)} ?definition ;
           ${n(popisDat["je-pojmem-ze-slovníku"])} ?vocabulary ;
-          ${n(dcterms.title)} ?vocabularyTitle ;
           ${n(lucene.snippetText)} ?snippetText ;
           ${n(lucene.snippetField)} ?snippetField ;
           ${n(lucene.score)} ?score .
+  ?vocabulary ${n(dcterms.title)} ?vocabularyTitle .
 } WHERE {
   SELECT DISTINCT ?entity ?label ?definition ?vocabulary ?vocabularyTitle ?snippetField ?snippetText ?score {
     { ?search a ${n(luceneInstance.label_index)} } 

src/api/data/terms.ts

@@ -13,34 +13,37 @@ export const TermBaseSchema = {
       "@type": popisDat["slovník"],
       label: {
         "@id": dcterms.title,
-        "@meta": ["@optional"],
+        "@optional": true,
       },
     },
   },
   definition: {
     "@id": skos.definition,
-    "@meta": "@optional",
+    "@optional": true,
   },
 } as const;
 
 const TermSchema = {
   ...TermBaseSchema,
   altLabels: {
     "@id": skos.altLabel,
-    "@meta": ["@array", "@optional"],
+    "@optional": true,
+    "@array": true,
   },
   source: {
     "@id": dcterms.source,
-    "@meta": ["@optional"],
+    "@optional": true,
   },
   parentTerms: {
     "@id": skos.broader,
-    "@meta": ["@array", "@optional"],
+    "@optional": true,
+    "@array": true,
     "@context": TermBaseSchema,
   },
   subTerms: {
     "@id": skos.narrower,
-    "@meta": ["@array", "@optional"],
+    "@optional": true,
+    "@array": true,
     "@context": TermBaseSchema,
   },
 } as const;

src/api/data/vocabularies.ts

@@ -1,5 +1,5 @@
 import { createResource, SchemaInterface } from "@ldkit/core";
-import { dcterms, skos } from "@ldkit/namespaces";
+import { dcterms, skos, ldkit } from "@ldkit/namespaces";
 import { namedNode as n } from "@ldkit/rdf";
 import { $ } from "@ldkit/sparql";
 
@@ -19,7 +19,7 @@ const VocabularySchema = {
   },
   description: {
     "@id": dcterms.description,
-    "@meta": ["@optional"],
+    "@optional": true,
   },
 } as const;
 
@@ -36,7 +36,7 @@ export const VocabularyTerms = createResource(VocabularyTermSchema, context);
 export const getVocabularyTermsQuery = (vocabularyIri: string) => {
   const query = $`
   CONSTRUCT {
-    ?iri a ${n(skos.Concept)} ;
+    ?iri a ${n(skos.Concept)} , ${n(ldkit.Resource)} ;
       ${n(skos.prefLabel)} ?label ;
       ${n(skos.definition)} ?definition .
   }

src/components/DisambiguationPage.tsx

@@ -48,7 +48,7 @@ const WordContent: React.FC<WordContentProps> = (props) => {
       <Box pt={2} pb={4}>
         <NumberOfResults amount={props.terms.length} />
         {props.terms.map((term) => {
-          return <TermResult key={term.uri} {...term} />;
+          return <TermResult key={term.$id} {...term} />;
         })}
       </Box>
     </Container>

src/components/Hierarchy.tsx

@@ -28,7 +28,7 @@ export const Hierarchy: React.FC<HierarchyProps> = ({ term }) => {
             <HierarchyParents
               items={parentTerms}
               level={0}
-              vocabularyDefault={term.vocabulary["@id"]}
+              vocabularyDefault={term.vocabulary.$id}
             />
             <CurrentTerm
               level={currIndex}
@@ -38,7 +38,7 @@ export const Hierarchy: React.FC<HierarchyProps> = ({ term }) => {
             <HierarchyChildren
               items={subTerms}
               level={currIndex + 1}
-              vocabularyDefault={term.vocabulary["@id"]}
+              vocabularyDefault={term.vocabulary.$id}
             />
           </Box>
         </Box>

src/components/HierarchyChildren.tsx

@@ -13,9 +13,9 @@ const HierarchyChildren: React.FC<ExpandableItemsProps> = (props) => {
           <TermAccordion
             level={props.level}
             term={item}
-            key={item["@id"]}
+            key={item.$id}
             connector={connector}
-            showVocabulary={props.vocabularyDefault !== item.vocabulary["@id"]}
+            showVocabulary={props.vocabularyDefault !== item.vocabulary.$id}
           />
         );
       })}

src/components/HierarchyParents.tsx

@@ -11,9 +11,9 @@ const HierarchyParents: React.FC<ExpandableItemsProps> = (props) => {
         level={props.level}
         connector={<NormalEnd />}
         showVocabulary={
-          props.vocabularyDefault !== props.items[0].vocabulary["@id"]
+          props.vocabularyDefault !== props.items[0].vocabulary.$id
         }
-        key={props.items[0]["@id"]}
+        key={props.items[0].$id}
       />
     );
   }
@@ -27,9 +27,9 @@ const HierarchyParents: React.FC<ExpandableItemsProps> = (props) => {
           <TermAccordion
             level={props.level}
             term={item}
-            key={item["@id"]}
+            key={item.$id}
             connector={connector}
-            showVocabulary={props.vocabularyDefault !== item.vocabulary["@id"]}
+            showVocabulary={props.vocabularyDefault !== item.vocabulary.$id}
           />
         );
       })}

src/components/TermAccordion.tsx

@@ -70,10 +70,7 @@ export interface TermAccordionProps {
 
 export const TermAccordion: React.FC<TermAccordionProps> = (props) => {
   const [expanded, setExpanded] = useState(false);
-  const routeProps = generateTermRoute({
-    uri: props.term["@id"],
-    vocabulary: props.term.vocabulary["@id"],
-  });
+  const routeProps = generateTermRoute(props.term);
   return (
     <HierarchyItem level={props.level} connector={props.connector}>
       <Accordion

src/components/TermHeader.tsx

@@ -10,12 +10,12 @@ export interface DetailHeaderProps {
 }
 
 const TermHeader: React.FC<DetailHeaderProps> = ({ term }) => {
-  const { "@id": iri, label, altLabels, vocabulary } = term;
+  const { $id, label, altLabels, vocabulary } = term;
 
-  const vocabularyRoute = generateVocabularyRoute(vocabulary["@id"]);
+  const vocabularyRoute = generateVocabularyRoute(vocabulary.$id);
   const above = (
     <RouteLink to={vocabularyRoute} variant="h5" color="textSecondary">
-      {vocabulary.label || vocabulary["@id"]}
+      {vocabulary.label || vocabulary.$id}
     </RouteLink>
   );
   const below = <AltLabel altLabels={altLabels} />;
@@ -25,7 +25,7 @@ const TermHeader: React.FC<DetailHeaderProps> = ({ term }) => {
       aboveLabel={above}
       label={label}
       belowLabel={below}
-      iri={iri}
+      iri={$id}
     />
   );
 };

src/components/TermPage.tsx

@@ -11,7 +11,7 @@ import ErrorPage from "./ErrorPage";
 
 const TermPage: React.FC = () => {
   const term = useURLTerm();
-  const { data, isLoading, isSuccess, isError } = useTerm(term.uri);
+  const { data, isLoading, isSuccess, isError } = useTerm(term.$id);
 
   if (isLoading) return <Loader />;
 

src/components/TermResult.tsx

@@ -16,7 +16,7 @@ const TermResult: React.FC<SearchTerm> = (props) => {
         <SearchCard borderColor={`${theme.palette.primary.main} !important`}>
           <DefinitionSnippet {...props} />
           <Box mt={1}>
-            <Typography variant="h6">{props.vocabularyTitle}</Typography>
+            <Typography variant="h6">{props.vocabulary.title}</Typography>
           </Box>
         </SearchCard>
       </RouteLink>