@logilab/sparqlexplorer 0.7.0

package/src/lib/hooks/useNavigateWithParams.tsx

@@ -0,0 +1,97 @@
+import { useCallback } from "react";
+import { createSearchParams, useLocation, useNavigate } from "react-router-dom";
+import {
+    useCanEditEndpoint,
+    useEndpoint,
+    useSelectedGraphs,
+    useView,
+} from "../context/ConfigContext";
+
+export function useNavigateWithParams() {
+    const navigate = useNavigate();
+    const getSearchParamsString = useSearchParamsString();
+
+    return useCallback(
+        (
+            pathname: string,
+            newParams?: Record<string, string | null>,
+            replace?: boolean,
+        ) => {
+            console.log(getSearchParamsString());
+            navigate(
+                {
+                    pathname: pathname,
+                    search: getSearchParamsString(newParams),
+                },
+                { replace },
+            );
+        },
+        [navigate, getSearchParamsString],
+    );
+}
+
+export function useSearchParamsString() {
+    const endpoint = useEndpoint();
+    const viewUrl = useView();
+    const selectedGraphs = useSelectedGraphs();
+    const canEditEndpoint = useCanEditEndpoint();
+
+    return useCallback(
+        (newParams?: Record<string, string | null>) => {
+            const params: Record<string, string | null> = newParams ?? {};
+            if (canEditEndpoint && endpoint && !("endpoint" in params)) {
+                params.endpoint = endpoint;
+            }
+            if (viewUrl && !("view" in params)) {
+                params.view = viewUrl;
+            }
+            if (!("graphs" in params)) {
+                params.graphs = JSON.stringify(selectedGraphs);
+            }
+
+            const cleanedParams: Record<string, string> = {};
+            Object.entries(params).forEach(([k, v]) => {
+                if (v) {
+                    cleanedParams[k] = v;
+                }
+            });
+            return createSearchParams(cleanedParams).toString();
+        },
+        [endpoint, viewUrl, canEditEndpoint, selectedGraphs],
+    );
+}
+
+export function useChangeView() {
+    const navigate = useNavigateWithParams();
+    const location = useLocation();
+    return (view: string | null) => navigate(location.pathname, { view }, true);
+}
+
+export function useAddGraph() {
+    const navigate = useNavigateWithParams();
+    const location = useLocation();
+    const selectedGraphs = useSelectedGraphs();
+    return (graph: string) => {
+        const newGraphs = [...selectedGraphs];
+        newGraphs.push(graph);
+        navigate(
+            location.pathname,
+            { graphs: JSON.stringify(newGraphs) },
+            true,
+        );
+    };
+}
+
+export function useRemoveGraph() {
+    const navigate = useNavigateWithParams();
+    const location = useLocation();
+    const selectedGraphs = useSelectedGraphs();
+    return (graph: string) => {
+        const newGraphs = selectedGraphs.filter((g) => g !== graph);
+        navigate(
+            location.pathname,
+            { graphs: JSON.stringify(newGraphs) },
+            true,
+        );
+    };
+}

package/src/lib/hooks/useParams.tsx

@@ -0,0 +1,8 @@
+import { useSearchParams } from "react-router-dom";
+
+export function useParam(param: string) {
+    const [searchParams] = useSearchParams();
+
+    const paramValue = searchParams.get(param);
+    return paramValue;
+}

package/src/lib/hooks/useURIData.ts

@@ -0,0 +1,180 @@
+import {
+    querySparql,
+    type SparqlAuth,
+    sparqlResultToArray,
+} from "@logilab/sparqlutils";
+import { useEffect, useState } from "react";
+import { useAuth } from "../context/AuthContext";
+import { getLabelSparqlClause, type Label, type RDFNode } from "../utils/utils";
+
+export interface ITriples {
+    // use objects from rdfjs instead ?
+    subject: RDFNode;
+    predicate: RDFNode;
+    object: RDFNode;
+    graph: RDFNode;
+}
+
+async function fetchUriData(
+    endpoint: string,
+    uri: string,
+    graphs: string[],
+    search: string,
+    page: number,
+    perPage: number,
+    auth?: SparqlAuth,
+): Promise<{ triples: ITriples[]; total: number; labels: Label[] }> {
+    const triples: ITriples[] = [];
+    const escapedSearch = search.replace('"', '\\"');
+    const searchFilter =
+        search !== ""
+            ? ` FILTER (
+            regex(str(?s), "${escapedSearch}", "i") OR
+            regex(str(?p), "${escapedSearch}", "i") OR
+            regex(str(?o), "${escapedSearch}", "i") OR
+            regex(str(?g), "${escapedSearch}", "i")
+        )`
+            : "";
+
+    const defaultGraphSelect = `
+        {
+            {
+                <${uri}> ?p ?o.
+                BIND (<${uri}> AS ?s)
+            } UNION {
+                ?s ?p <${uri}>
+                BIND (<${uri}> AS ?o)
+            }
+        }`;
+
+    function getSpecificGraphSelect(g: string) {
+        return `
+        {
+            {
+                GRAPH <${g}> {
+                    <${uri}> ?p ?o.
+                }
+                BIND (<${uri}> AS ?s)
+            } UNION {
+                GRAPH <${g}> {
+                    ?s ?p <${uri}>
+                }
+                BIND (<${uri}> AS ?o)
+            }
+            BIND (<${g}> AS ?g)
+        }`;
+    }
+    const graphList = graphs
+        .filter((g) => g !== "default")
+        .map((g) => getSpecificGraphSelect(g))
+        .join(" UNION ");
+
+    let graphSelect = "";
+    if (graphs.includes("default")) {
+        graphSelect += defaultGraphSelect;
+        if (graphs.length > 1) {
+            graphSelect += ` UNION ${graphList}`;
+        }
+    } else {
+        graphSelect = graphList;
+    }
+
+    const fetchTriplesWhereQuery = `${graphSelect}${searchFilter}`;
+    const [triplesResult, countResult, labelResult] = await Promise.all([
+        querySparql(
+            endpoint,
+            `SELECT DISTINCT ?g ?s ?p ?o WHERE {${fetchTriplesWhereQuery} } ORDER BY ?p LIMIT ${perPage} OFFSET ${page * perPage}`,
+            auth,
+        ),
+        querySparql(
+            endpoint,
+            `SELECT (COUNT(*) as ?count) WHERE { ${fetchTriplesWhereQuery} }`,
+            auth,
+        ),
+        querySparql(
+            endpoint,
+            `SELECT DISTINCT ?label WHERE {
+                ${getLabelSparqlClause(uri)}
+            }`,
+            auth,
+        ),
+    ]);
+
+    sparqlResultToArray(triplesResult).forEach((elem) => {
+        triples.push({
+            subject: elem.s,
+            predicate: elem.p,
+            object: elem.o,
+            graph: elem.g ?? { type: "uri", value: "default" },
+        });
+    });
+
+    const total = parseInt(countResult.results.bindings[0].count.value, 10);
+
+    const labels: Label[] = [];
+
+    sparqlResultToArray(labelResult).forEach((elem) => {
+        labels.push({
+            value: elem.label?.value,
+            lang: null,
+        });
+    });
+
+    return {
+        triples,
+        total,
+        labels,
+    };
+}
+
+export function useURIData({
+    endpoint,
+    uri,
+    graphs,
+    search,
+    page,
+    perPage,
+}: {
+    endpoint: string;
+    uri: string;
+    graphs: string[];
+    search: string;
+    page: number;
+    perPage: number;
+}) {
+    const [triples, setTriples] = useState<ITriples[]>([]);
+    const [error, setError] = useState<string | null>(null);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const [total, setTotal] = useState(0);
+    const [labels, setLabels] = useState<Label[]>([]);
+    const { auth } = useAuth();
+    useEffect(() => {
+        async function fetchResults() {
+            try {
+                setIsLoaded(false);
+                const {
+                    triples: tempTriples,
+                    total: tempTotals,
+                    labels: tempLabels,
+                } = await fetchUriData(
+                    endpoint,
+                    uri,
+                    graphs,
+                    search,
+                    page,
+                    perPage,
+                    auth,
+                );
+                setTriples(tempTriples);
+                setTotal(tempTotals);
+                setLabels(tempLabels);
+                setIsLoaded(true);
+            } catch (e) {
+                setError(e.message);
+            }
+        }
+        fetchResults();
+    }, [endpoint, uri, graphs, search, page, perPage, auth]);
+
+    return { triples, total, labels, error, isLoaded };
+}

package/src/lib/hooks/useURILink.ts

@@ -0,0 +1,7 @@
+import { useSearchParamsString } from "./useNavigateWithParams";
+
+export function useURILink(uri: string) {
+    const getSearchParamsString = useSearchParamsString();
+    const encodedUri = encodeURIComponent(uri);
+    return `/browse/${encodedUri}?${getSearchParamsString()}`;
+}

package/src/lib/index.tsx

@@ -0,0 +1,9 @@
+export * from "./App"; 
+export * from "./utils/utils"
+export * from "./context/ViewsContext";
+export * from "./context/AuthContext";
+export * from "./context/ConfigContext";
+export * from "./utils/getIconFromURI";
+
+import App from "./App";
+export default App

package/src/lib/public-path.ts

@@ -0,0 +1,3 @@
+/* eslint-disable no-var */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+declare var SPARQL_ENDPOINT: string;

package/src/lib/routes/Home.tsx

@@ -0,0 +1,13 @@
+import Container from "@mui/material/Container";
+import { HomePage } from "../components/HomePage";
+import { Layout } from "../components/layout/Layout";
+
+export function Home() {
+    return (
+        <Layout>
+            <Container>
+                <HomePage />
+            </Container>
+        </Layout>
+    );
+}

package/src/lib/routes/Search.tsx

@@ -0,0 +1,13 @@
+import Container from "@mui/material/Container";
+import { Layout } from "../components/layout/Layout";
+import { SearchPage } from "../components/SearchPage";
+
+export function Search() {
+    return (
+        <Layout>
+            <Container>
+                <SearchPage />
+            </Container>
+        </Layout>
+    );
+}

package/src/lib/routes/Uri.tsx

@@ -0,0 +1,10 @@
+import { Layout } from "../components/layout/Layout";
+import { UriPage } from "../components/UriPage";
+
+export function Uri() {
+    return (
+        <Layout>
+            <UriPage />
+        </Layout>
+    );
+}

package/src/lib/routes/Yasgui.tsx

@@ -0,0 +1,13 @@
+import Container from "@mui/material/Container";
+import { Layout } from "../components/layout/Layout";
+import { YasguiPage } from "../components/Yasgui";
+
+export function Yasgui() {
+    return (
+        <Layout>
+            <Container>
+                <YasguiPage />
+            </Container>
+        </Layout>
+    );
+}

package/src/lib/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import "@testing-library/jest-dom/extend-expect";

package/src/lib/types.d.ts

@@ -0,0 +1,6 @@
+declare module "*.svg";
+declare module "*.png";
+declare module "*.gif";
+declare module "*.jpg";
+
+declare const BASENAME: string | undefined;

package/src/lib/utils/getIconFromURI.ts

@@ -0,0 +1,32 @@
+import ChevronRight from "@mui/icons-material/ChevronRight";
+import Face from "@mui/icons-material/Face";
+import Inventory2 from "@mui/icons-material/Inventory2";
+import LibraryBooks from "@mui/icons-material/LibraryBooks";
+import ListAlt from "@mui/icons-material/ListAlt";
+import LocationOn from "@mui/icons-material/LocationOn";
+import TextFields from "@mui/icons-material/TextFields";
+import Widgets from "@mui/icons-material/Widgets";
+
+export function getIconFromURI(uri: string) {
+    switch (uri) {
+        case "http://purl.org/dc/dcmitype/PhysicalObject":
+            return Inventory2;
+        case "http://purl.org/dc/terms/Location":
+            return LocationOn;
+        case "http://xmlns.com/foaf/0.1/Agent":
+            return Face;
+        case "http://www.w3.org/2000/01/rdf-schema#Class":
+        case "http://www.w3.org/2002/07/owl#Class":
+            return Widgets;
+        case "http://www.w3.org/2002/07/owl#Ontology":
+            return LibraryBooks;
+        case "http://www.w3.org/2002/07/owl#AnnotationProperty":
+        case "http://www.w3.org/2002/07/owl#OntologyProperty":
+        case "http://www.w3.org/1999/02/22-rdf-syntax-ns#Property":
+            return TextFields;
+        case "http://www.w3.org/2004/02/skos/core#Concept":
+            return ListAlt;
+        default:
+            return ChevronRight;
+    }
+}