@logilab/sparqlexplorer 0.7.0

package/src/lib/components/uri/URIDefaultView.tsx

@@ -0,0 +1,392 @@
+import BlockIcon from "@mui/icons-material/Block";
+import FilterAltIcon from "@mui/icons-material/FilterAlt";
+import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+import Container from "@mui/material/Container";
+import IconButton from "@mui/material/IconButton";
+import InputBase from "@mui/material/InputBase";
+import Paper from "@mui/material/Paper";
+import Stack from "@mui/material/Stack";
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TablePagination from "@mui/material/TablePagination";
+import type { TablePaginationActionsProps } from "@mui/material/TablePaginationActions";
+import TablePaginationActions from "@mui/material/TablePaginationActions";
+import TableRow from "@mui/material/TableRow";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { type PropsWithChildren, useEffect, useState } from "react";
+import { useNavigateWithParams } from "../../hooks/useNavigateWithParams";
+import { useParam } from "../../hooks/useParams";
+import { type ITriples, useURIData } from "../../hooks/useURIData";
+import { getBestLabel } from "../../utils/utils";
+import { AlertError, Loading, URILink } from "../UtilsComponents";
+
+function usePageParam() {
+    const pageParam = useParam("page");
+    const parsedPage = parseInt(pageParam ?? "0", 10);
+    const page =
+        parsedPage > 0 && !Number.isNaN(parsedPage) ? parsedPage - 1 : 0;
+    return page;
+}
+
+function usePerPageParam() {
+    const perPageParam = useParam("perpage");
+    const parsedPerPage = parseInt(perPageParam ?? "20", 10);
+    const perPage =
+        !Number.isNaN(parsedPerPage) &&
+        (parsedPerPage === 20 || parsedPerPage === 50 || parsedPerPage === 100)
+            ? parsedPerPage
+            : 20;
+    return perPage;
+}
+
+function useFilter() {
+    const filter = useParam("filter");
+    return filter ?? "";
+}
+
+export function URIDefaultView({
+    endpoint,
+    uri,
+    graphs,
+    showUri = true,
+}: {
+    endpoint: string;
+    uri: string;
+    graphs: string[];
+    showUri?: boolean;
+}) {
+    const pageNumber = usePageParam();
+    const filter = useFilter();
+    const perPage = usePerPageParam();
+    const [filterInput, setFilterInput] = useState(filter);
+    const { triples, total, labels, error, isLoaded } = useURIData({
+        endpoint,
+        uri,
+        graphs,
+        search: filter,
+        page: pageNumber,
+        perPage: perPage,
+    });
+    const navigate = useNavigateWithParams();
+
+    function updatePage(newPage: number) {
+        const params: Record<string, string> = {
+            page: (newPage + 1).toString(),
+            perpage: perPage.toString(),
+        };
+        if (filter !== "") {
+            params.filter = filter;
+        }
+        navigate(`/browse/${encodeURIComponent(uri)}`, params);
+    }
+
+    function updatePerPage(newPerPage: string) {
+        const params: Record<string, string> = {
+            perpage: newPerPage,
+        };
+        if (filter !== "") {
+            params.filter = filter;
+        }
+        navigate(`/browse/${encodeURIComponent(uri)}`, params);
+    }
+
+    function updateFilter(newFilter: string) {
+        navigate(`/browse/${encodeURIComponent(uri)}`, {
+            page: "1",
+            perpage: perPage.toString(),
+            filter: newFilter,
+        });
+    }
+
+    useEffect(() => {
+        if (filterInput !== filter) {
+            setFilterInput(filter);
+        }
+    }, [filter, filterInput]);
+
+    const hasResults = triples.length !== 0;
+
+    return (
+        <Stack spacing={1}>
+            {showUri ? (
+                <Box>
+                    <Container>
+                        {isLoaded ? (
+                            <Typography variant="h4">
+                                {getBestLabel({ labels, uri })}
+                            </Typography>
+                        ) : (
+                            <CircularProgress />
+                        )}
+                    </Container>
+                </Box>
+            ) : null}
+            <Box padding={2}>
+                <Paper>
+                    <Box padding={2}>
+                        <Paper
+                            component="form"
+                            sx={{
+                                paddingLeft: 2,
+                                paddingRight: 2,
+                                paddingTop: 1,
+                                paddingBottom: 1,
+                                display: "flex",
+                                alignItems: "center",
+                            }}
+                            onSubmit={(e: React.FormEvent<HTMLFormElement>) => {
+                                e.preventDefault();
+                                const value = (
+                                    e.currentTarget.elements.namedItem(
+                                        "search",
+                                    ) as HTMLInputElement
+                                ).value;
+                                updateFilter(value);
+                            }}
+                        >
+                            <InputBase
+                                type="text"
+                                placeholder="Filter triples"
+                                name="search"
+                                disabled={!hasResults && filter.length === 0}
+                                sx={{
+                                    flex: 1,
+                                }}
+                                value={filterInput}
+                                onChange={(event) =>
+                                    setFilterInput(event.target.value)
+                                }
+                            />
+                            {isLoaded ? (
+                                <IconButton type="submit" aria-label="search">
+                                    <FilterAltIcon />
+                                </IconButton>
+                            ) : (
+                                <CircularProgress />
+                            )}
+                        </Paper>
+                    </Box>
+                    <TableContainer>
+                        <Table>
+                            <TableHead>
+                                <TableRow>
+                                    <TableCell>
+                                        <Typography fontWeight={600}>
+                                            Subject
+                                        </Typography>
+                                    </TableCell>
+                                    <TableCell>
+                                        <Typography fontWeight={600}>
+                                            Predicate
+                                        </Typography>
+                                    </TableCell>
+                                    <TableCell>
+                                        <Typography fontWeight={600}>
+                                            Object
+                                        </Typography>
+                                    </TableCell>
+                                    <TableCell>
+                                        <Typography fontWeight={600}>
+                                            Graph
+                                        </Typography>
+                                    </TableCell>
+                                </TableRow>
+                            </TableHead>
+                            <TableBody>
+                                <TableContent
+                                    triples={triples}
+                                    uri={uri}
+                                    isLoaded={isLoaded}
+                                    error={error}
+                                    perPage={perPage}
+                                />
+                            </TableBody>
+                        </Table>
+                    </TableContainer>
+                    <Box paddingRight={1}>
+                        <Stack
+                            direction="row"
+                            alignItems={"center"}
+                            justifyContent={"end"}
+                        >
+                            <TablePagination
+                                component={"div"}
+                                rowsPerPageOptions={[20, 50, 100]}
+                                page={pageNumber}
+                                onPageChange={(_, page) => updatePage(page)}
+                                onRowsPerPageChange={(event) => {
+                                    updatePerPage(event.target.value);
+                                }}
+                                count={total}
+                                rowsPerPage={perPage}
+                                showFirstButton
+                                showLastButton
+                                ActionsComponent={CustomPaginationActionAction}
+                            />
+                            <Box width={30}>
+                                {!isLoaded ? (
+                                    <CircularProgress size={30} />
+                                ) : null}
+                            </Box>
+                        </Stack>
+                    </Box>
+                </Paper>
+            </Box>
+        </Stack>
+    );
+}
+
+function CustomPaginationActionAction(props: TablePaginationActionsProps) {
+    const totalPages = Math.ceil(props.count / props.rowsPerPage);
+    const currentPage = props.page + 1;
+    const [inputValue, setInputValue] = useState(currentPage);
+
+    useEffect(() => {
+        setInputValue(currentPage);
+    }, [currentPage]);
+
+    return (
+        <Box flexShrink={0} paddingLeft={2} paddingTop={1} paddingBottom={1}>
+            <Stack direction={"row"} alignItems={"center"}>
+                <Stack direction={"row"} alignItems={"center"} spacing={1}>
+                    <Box
+                        component={"form"}
+                        onSubmit={() => {
+                            if (Number.isNaN(inputValue) || inputValue <= 0) {
+                                props.onPageChange(null, 0);
+                                // Make sure to reset the input value if we are already on the first page
+                                // as the useEffect would not get triggered
+                                setInputValue(1);
+                            } else if (inputValue > totalPages) {
+                                props.onPageChange(null, totalPages - 1);
+                                // Make sure to reset the input value if we are already on the last page
+                                // as the useEffect would not get triggered
+                                setInputValue(totalPages);
+                            } else {
+                                props.onPageChange(null, inputValue - 1);
+                            }
+                        }}
+                    >
+                        <TextField
+                            label={"Page"}
+                            onChange={(event) => {
+                                const intValue = parseInt(
+                                    event.target.value,
+                                    10,
+                                );
+                                if (Number.isNaN(intValue)) {
+                                    setInputValue(0);
+                                } else {
+                                    setInputValue(intValue);
+                                }
+                            }}
+                            size="small"
+                            sx={{
+                                width: 60,
+                            }}
+                            value={inputValue}
+                        />
+                    </Box>
+                    <Typography>/ {totalPages}</Typography>
+                </Stack>
+                <TablePaginationActions {...props} style={{ marginLeft: 0 }} />
+            </Stack>
+        </Box>
+    );
+}
+
+function TableContent({
+    triples,
+    uri,
+    error,
+    isLoaded,
+    perPage,
+}: {
+    triples: ITriples[];
+    uri: string;
+    error: string | null;
+    isLoaded: boolean;
+    perPage: number;
+}) {
+    const hasResults = triples.length !== 0;
+    if (!isLoaded) {
+        return (
+            <FullSizeTableCell perPage={perPage}>
+                <Loading />
+            </FullSizeTableCell>
+        );
+    }
+    if (error) {
+        return (
+            <FullSizeTableCell perPage={perPage}>
+                <AlertError error={error} />
+            </FullSizeTableCell>
+        );
+    }
+    if (hasResults) {
+        const emptyCells = perPage - triples.length;
+        return (
+            <>
+                {triples.map((triple) => (
+                    /* biome-ignore lint/correctness/useJsxKeyInIterable: no key */
+                    <TableRow>
+                        <TableCell>
+                            <URILink node={triple.subject} focusUri={uri} />
+                        </TableCell>
+                        <TableCell>
+                            <URILink node={triple.predicate} focusUri={uri} />
+                        </TableCell>
+                        <TableCell>
+                            <URILink node={triple.object} focusUri={uri} />
+                        </TableCell>
+                        <TableCell>
+                            <URILink node={triple.graph} />
+                        </TableCell>
+                    </TableRow>
+                ))}
+                {emptyCells > 0 ? (
+                    <TableRow sx={{ height: 57 * emptyCells }}>
+                        <TableCell colSpan={4}> </TableCell>
+                    </TableRow>
+                ) : null}
+            </>
+        );
+    }
+    return (
+        <FullSizeTableCell perPage={perPage}>
+            <Stack spacing={4} display={"flex"} justifyContent={"center"}>
+                <Box display={"flex"} justifyContent={"center"}>
+                    <BlockIcon color="disabled" sx={{ fontSize: "15em" }} />
+                </Box>
+                <Typography
+                    variant="subtitle1"
+                    color={"GrayText"}
+                    textAlign={"center"}
+                >
+                    No results
+                </Typography>
+            </Stack>
+        </FullSizeTableCell>
+    );
+}
+
+function FullSizeTableCell({
+    children,
+    perPage,
+}: PropsWithChildren<{ perPage: number }>) {
+    return (
+        <TableRow
+            sx={{
+                // 57 = size of one row
+                height: 57 * perPage,
+            }}
+        >
+            <TableCell colSpan={4}>{children}</TableCell>
+        </TableRow>
+    );
+}

package/src/lib/components/uri/URIWithSelectedView.tsx

@@ -0,0 +1,31 @@
+import type { SparqlViewConfig } from "@logilab/sparqlexplorer-views";
+import { useAuth } from "../../context/AuthContext";
+import { useSearchParamsString } from "../../hooks/useNavigateWithParams";
+
+export interface URIWithSelectedViewProps {
+    endpoint: string;
+    uri: string;
+    viewWrapper: SparqlViewConfig;
+}
+
+export function URIWithSelectedView({
+    endpoint,
+    uri,
+    viewWrapper,
+}: URIWithSelectedViewProps) {
+    const getSearchParamsString = useSearchParamsString();
+    const { auth } = useAuth();
+
+    const Component = viewWrapper.component;
+    return (
+        <Component
+            uri={uri}
+            endpoint={endpoint}
+            generateUrl={(originalUrl: string) => {
+                const encodedUri = encodeURIComponent(originalUrl);
+                return `#/browse/${encodedUri}?${getSearchParamsString()}`;
+            }}
+            auth={auth}
+        />
+    );
+}

package/src/lib/context/AuthContext.tsx

@@ -0,0 +1,32 @@
+import type { BasicAuth } from "@logilab/sparqlutils";
+import {
+    createContext,
+    type PropsWithChildren,
+    useContext,
+    useState,
+} from "react";
+
+export type AuthContextType = {
+    auth: BasicAuth | undefined;
+    setAuth: (auth: BasicAuth | undefined) => void;
+};
+
+const AuthContext = createContext<AuthContextType>({
+    auth: undefined,
+    setAuth: () => undefined,
+});
+
+export function AuthProvider({ children }: PropsWithChildren) {
+    const [auth, setAuth] = useState<BasicAuth | undefined>(undefined);
+
+    return (
+        <AuthContext.Provider value={{ auth, setAuth }}>
+            {children}
+        </AuthContext.Provider>
+    );
+}
+
+export function useAuth() {
+    const { auth, setAuth } = useContext(AuthContext);
+    return { auth, setAuth };
+}

package/src/lib/context/ConfigContext.tsx

@@ -0,0 +1,50 @@
+import React, { type PropsWithChildren, useContext } from "react";
+
+export type SparqlExplorerConfig = {
+    endpoint: string | null;
+    canEditEndpoint: boolean;
+    view: string | null;
+    selectedGraphs: string[];
+};
+
+const ConfigContext = React.createContext<SparqlExplorerConfig>({
+    endpoint: null,
+    canEditEndpoint: true,
+    view: null,
+    selectedGraphs: [],
+});
+
+export function ConfigProvider({
+    children,
+    config,
+}: PropsWithChildren<{ config: SparqlExplorerConfig }>) {
+    return (
+        <ConfigContext.Provider value={config}>
+            {children}
+        </ConfigContext.Provider>
+    );
+}
+
+export function useConfig() {
+    return useContext(ConfigContext);
+}
+
+export function useEndpoint() {
+    const { endpoint } = useConfig();
+    return endpoint;
+}
+
+export function useView() {
+    const { view } = useConfig();
+    return view;
+}
+
+export function useCanEditEndpoint() {
+    const { canEditEndpoint } = useConfig();
+    return canEditEndpoint;
+}
+
+export function useSelectedGraphs() {
+    const { selectedGraphs } = useConfig();
+    return selectedGraphs.length === 0 ? ["default"] : selectedGraphs;
+}

package/src/lib/context/ViewsContext.tsx

@@ -0,0 +1,53 @@
+import type { SparqlViewConfig } from "@logilab/sparqlexplorer-views";
+import {
+    type PropsWithChildren,
+    createContext,
+    type Dispatch,
+    type SetStateAction,
+    useState,
+} from "react";
+
+type ViewsProps = {
+    views: SparqlViewConfig[];
+};
+
+export const ViewsContext = createContext<{
+    views: SparqlViewConfig[];
+    selectedView?: SparqlViewConfig;
+    setSelectedView: Dispatch<SetStateAction<SparqlViewConfig | undefined>>;
+    applicableViews?: SparqlViewConfig[];
+    setApplicableViews: Dispatch<
+        SetStateAction<SparqlViewConfig[] | undefined>
+    >;
+}>({
+    views: [],
+    selectedView: undefined,
+    setSelectedView: () => undefined,
+    applicableViews: [],
+    setApplicableViews: () => undefined,
+});
+
+export function ViewsProvider({
+    views,
+    children,
+}: PropsWithChildren<ViewsProps>) {
+    const [selectedView, setSelectedView] = useState<
+        SparqlViewConfig | undefined
+    >();
+    const [applicableViews, setApplicableViews] = useState<
+        SparqlViewConfig[] | undefined
+    >(undefined);
+    return (
+        <ViewsContext
+            value={{
+                views,
+                selectedView,
+                setSelectedView,
+                applicableViews,
+                setApplicableViews,
+            }}
+        >
+            {children}
+        </ViewsContext>
+    );
+}

package/src/lib/hooks/useClasses.ts

@@ -0,0 +1,48 @@
+import { querySparql, sparqlResultToArray } from "@logilab/sparqlutils";
+import { useEffect, useState } from "react";
+import type { ClassListProps, ListQueryResult } from "../components/ClassList";
+import { useAuth } from "../context/AuthContext";
+import { getLabelSparqlClause } from "../utils/utils";
+
+export function useClasses({ endpoint }: ClassListProps) {
+    const [classes, setClasses] = useState<ListQueryResult[]>([]);
+    const [error, setError] = useState<string | null>(null);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const { auth } = useAuth();
+    useEffect(() => {
+        async function fetchClasses() {
+            try {
+                setIsLoaded(false);
+                setError(null);
+                // Ignore OpenLinks classes as these are internal to virtuoso
+                const queryResults = await querySparql(
+                    endpoint,
+                    `SELECT DISTINCT ?uri (COUNT(?x) as ?c) ?label WHERE {
+                        ?x a ?uri
+                        ${getLabelSparqlClause(undefined, true)}
+                    } GROUP BY ?uri ?label ORDER BY DESC(?c)`,
+                    auth,
+                );
+                const temp = sparqlResultToArray(queryResults).map((elem) => {
+                    return {
+                        uri: elem.uri.value,
+                        nbInstances: elem.c.value,
+                        label: elem.label?.value,
+                    };
+                });
+                // Filtering within the request is too slow
+                const filteredTemp = temp.filter(
+                    (e) => !e.uri.startsWith("http://www.openlinksw.com"),
+                );
+                setClasses(filteredTemp);
+            } catch (e) {
+                setError(e.message);
+            } finally {
+                setIsLoaded(true);
+            }
+        }
+        fetchClasses();
+    }, [endpoint, auth]);
+
+    return { classes, error, isLoaded };
+}

package/src/lib/hooks/useGraphs.ts

@@ -0,0 +1,67 @@
+import { querySparql, sparqlResultToArray } from "@logilab/sparqlutils";
+import { useEffect, useState } from "react";
+import { useAuth } from "../context/AuthContext";
+import { useEndpoint } from "../context/ConfigContext";
+
+export interface ListQueryResult {
+    graph: string;
+}
+
+const IGNORED_GRAPHS = [
+    "http://www.openlinksw.com/schemas/virtrdf#",
+    "urn:core:services:sparql",
+    "urn:activitystreams-owl:map",
+];
+
+export function useGraphs(showAll = false) {
+    const endpoint = useEndpoint();
+    const [graphs, setGraphs] = useState<ListQueryResult[]>([]);
+    const [error, setError] = useState<string | null>(null);
+    const [isLoaded, setIsLoaded] = useState(false);
+    const { auth } = useAuth();
+    useEffect(() => {
+        async function fetchClasses() {
+            if (!endpoint) {
+                setGraphs([]);
+                setIsLoaded(true);
+                setError(null);
+                return;
+            }
+            try {
+                setIsLoaded(false);
+                setError(null);
+                const queryResults = await querySparql(
+                    endpoint,
+                    `SELECT DISTINCT ?g WHERE {
+                        GRAPH ?g { ?s ?p ?o }
+                    } `,
+                    auth,
+                );
+                const temp = sparqlResultToArray(queryResults).map((elem) => {
+                    return { graph: elem.g.value };
+                });
+                setGraphs([{ graph: "default" }, ...temp]);
+            } catch (e) {
+                setError(e.message);
+            } finally {
+                setIsLoaded(true);
+            }
+        }
+        fetchClasses();
+    }, [endpoint, auth]);
+
+    const ignoredGraphs = IGNORED_GRAPHS.map((g) => `<${g}>`).join(", ");
+    return {
+        graphs: showAll
+            ? graphs
+            : // Filtering within the request is too slow
+              graphs.filter(
+                  (e) =>
+                      !ignoredGraphs.includes(e.graph) &&
+                      !e.graph.startsWith("http://www.w3.org") &&
+                      !e.graph.includes("/DAV"),
+              ),
+        error,
+        isLoaded,
+    };
+}