@logilab/sparqlexplorer 0.7.0

package/src/lib/components/HomePage.tsx

@@ -0,0 +1,51 @@
+import Alert from "@mui/material/Alert";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { useCanEditEndpoint, useEndpoint } from "../context/ConfigContext";
+import { ClassList } from "./ClassList";
+import { EndpointForm } from "./EndpointForm";
+
+export function HomePage() {
+    const endpoint = useEndpoint();
+    const canEditEndpoint = useCanEditEndpoint();
+    console.log("home");
+    return (
+        <Stack spacing={4}>
+            <Stack spacing={2}>
+                <Typography variant="h4" component={"h1"}>
+                    Welcome to SparqlExplorer
+                </Typography>
+
+                {canEditEndpoint ? (
+                    <Stack spacing={1}>
+                        <Typography>
+                            Enter the URL of your SPARQL endpoint below to
+                            browse its data conveniently using an hypertext user
+                            interface:
+                        </Typography>
+                        <EndpointForm />
+                    </Stack>
+                ) : (
+                    <Alert severity="info">
+                        <Stack
+                            direction={"row"}
+                            spacing={1}
+                            alignItems={"baseline"}
+                        >
+                            <Typography>Currently exploring</Typography>
+                            <Typography fontFamily={"monospace"}>
+                                {endpoint}
+                            </Typography>
+                        </Stack>
+                    </Alert>
+                )}
+            </Stack>
+            {endpoint ? (
+                <Stack spacing={1}>
+                    <Typography variant="h4">Available Classes</Typography>
+                    <ClassList endpoint={endpoint} />
+                </Stack>
+            ) : null}
+        </Stack>
+    );
+}

package/src/lib/components/SearchPage.tsx

@@ -0,0 +1,211 @@
+import { querySparql, sparqlResultToArray } from "@logilab/sparqlutils";
+import CheckIcon from "@mui/icons-material/Check";
+import Box from "@mui/material/Box";
+import Card from "@mui/material/Card";
+import Chip from "@mui/material/Chip";
+import List from "@mui/material/List";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import React, { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+import { useAuth } from "../context/AuthContext";
+import { useEndpoint } from "../context/ConfigContext";
+import { useNavigateWithParams } from "../hooks/useNavigateWithParams";
+import { useParam } from "../hooks/useParams";
+import { useURILink } from "../hooks/useURILink";
+import { getIconFromURI } from "../utils/getIconFromURI";
+import { prefixedNameFromUri, type RDFNode } from "../utils/utils";
+import { Loading, NoResults } from "./UtilsComponents";
+
+interface Result {
+    node: RDFNode;
+    label: string;
+    types: string[];
+}
+
+export function SearchPage() {
+    const searchInput = useParam("search");
+    const [results, setResults] = useState<Result[]>([]);
+    const [loading, setLoading] = useState<boolean>(false);
+    const endpoint = useEndpoint();
+    const { auth } = useAuth();
+
+    const navigate = useNavigateWithParams();
+
+    useEffect(() => {
+        if (!endpoint || !searchInput) {
+            navigate("/", undefined, true);
+            return;
+        }
+
+        try {
+            setLoading(true);
+            querySparql(
+                endpoint,
+                `select distinct ?x ?z (GROUP_CONCAT(DISTINCT ?type, ", ") as ?types) where {
+                 {?x ?y ?z. OPTIONAL { ?x a ?type.} }
+                UNION{
+                    GRAPH ?g
+                    {?x ?y ?z. OPTIONAL { ?x a ?type.} }
+                }
+                FILTER(isLiteral(?z) && regex(str(?z), "${searchInput}","i"))
+                } GROUP BY ?x ?z
+                LIMIT 100`,
+                auth,
+            ).then((queryResults) => {
+                const temp = sparqlResultToArray(queryResults).map((elem) => {
+                    return {
+                        node: elem.x,
+                        label: elem.z.value,
+                        types: elem.types.value.split(", "),
+                    };
+                });
+                setResults(temp);
+                setLoading(false);
+            });
+        } catch (e) {
+            console.error(e.message);
+            setLoading(false);
+        }
+    }, [endpoint, searchInput, auth, navigate]);
+
+    if (!endpoint || !searchInput) {
+        return null;
+    }
+
+    if (loading) {
+        return <Loading />;
+    }
+
+    return <ResultsDisplay results={results} searchValue={searchInput} />;
+}
+
+function ResultsDisplay({
+    results,
+    searchValue,
+}: {
+    results: Result[];
+    searchValue: string;
+}) {
+    const [allDifferentTypes, setAllDifferentTypes] = useState<string[]>([]);
+    const [renderResults, setRenderResults] = useState<
+        { result: Result; score: number }[]
+    >([]);
+    const [selectedType, setSelectedType] = useState<string | null>(null);
+    React.useEffect(() => {
+        const comparisonValue = searchValue.toLowerCase();
+        const scoredResults: { result: Result; score: number }[] = results.map(
+            (result) => {
+                const resultValue = result.label.toLowerCase();
+                if (resultValue === comparisonValue) {
+                    return { result, score: 1 };
+                }
+                return {
+                    result,
+                    score: 1 / (resultValue.length - comparisonValue.length),
+                };
+            },
+        );
+        setAllDifferentTypes(
+            Array.from(new Set(results.flatMap((r) => r.types))),
+        );
+        scoredResults.sort((result1, result2) => result2.score - result1.score);
+        setRenderResults(scoredResults);
+    }, [results, searchValue]);
+
+    if (results.length === 0) {
+        return <NoResults />;
+    }
+    return (
+        <Stack spacing={2} width={"100%"}>
+            <Stack
+                direction={"row"}
+                spacing={1}
+                display={"flex"}
+                alignItems={"center"}
+            >
+                <Box>
+                    <Typography>Filter:</Typography>
+                </Box>
+                {allDifferentTypes.map((type) => (
+                    <Chip
+                        key={type}
+                        icon={
+                            selectedType !== null && selectedType === type ? (
+                                <CheckIcon />
+                            ) : undefined
+                        }
+                        onClick={() => {
+                            selectedType === type
+                                ? setSelectedType(null)
+                                : setSelectedType(type);
+                        }}
+                        variant={
+                            selectedType !== null && selectedType === type
+                                ? "filled"
+                                : "outlined"
+                        }
+                        label={prefixedNameFromUri(type)}
+                    />
+                ))}
+            </Stack>
+            <Card>
+                <List>
+                    {renderResults.map(({ result: elem }) => (
+                        <ResultListItem
+                            selectedType={selectedType}
+                            result={elem}
+                            // there is a distinct clause, hence this tuple should be unique for the results
+                            key={elem.node.value + elem.types + elem.label}
+                        />
+                    ))}
+                </List>
+            </Card>
+        </Stack>
+    );
+}
+
+function ResultListItem({
+    selectedType,
+    result,
+}: {
+    selectedType: string | null;
+    result: Result;
+}) {
+    const uriLink = useURILink(result.node.value);
+    if (selectedType !== null && result.types.indexOf(selectedType) < 0) {
+        return null;
+    }
+
+    const Icon = getIconFromURI(result.types[0]);
+
+    return (
+        <Link
+            to={uriLink}
+            key={result.node.value + result.label}
+            style={{
+                textDecoration: "none",
+                color: "inherit",
+            }}
+        >
+            <ListItemButton divider>
+                <ListItemIcon>
+                    <Icon />
+                </ListItemIcon>
+                <ListItemText
+                    primary={
+                        result.label.length > 180
+                            ? `${result.label.slice(0, 180)}...`
+                            : result.label
+                    }
+                    secondary={result.types
+                        .map((t) => prefixedNameFromUri(t))
+                        .join(", ")}
+                />
+            </ListItemButton>
+        </Link>
+    );
+}

package/src/lib/components/UriPage.tsx

@@ -0,0 +1,158 @@
+import type { SparqlViewConfig } from "@logilab/sparqlexplorer-views";
+import ArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import Accordion from "@mui/material/Accordion";
+import AccordionDetails from "@mui/material/AccordionDetails";
+import AccordionSummary from "@mui/material/AccordionSummary";
+import Box from "@mui/material/Box";
+import Snackbar from "@mui/material/Snackbar";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import React, { useState, useContext } from "react";
+import { useParams } from "react-router-dom";
+import { useAuth } from "../context/AuthContext";
+import {
+    useEndpoint,
+    useSelectedGraphs,
+    useView,
+} from "../context/ConfigContext";
+import { ViewsContext } from "../context/ViewsContext";
+import { useNavigateWithParams } from "../hooks/useNavigateWithParams";
+import { getApplicableViews, isDefaultView } from "../utils/utils";
+import { Loading } from "./UtilsComponents";
+import { URIDefaultView } from "./uri/URIDefaultView";
+import { URIWithSelectedView } from "./uri/URIWithSelectedView";
+
+export function UriPage() {
+    const params = useParams();
+    const endpoint = useEndpoint();
+    const viewName = useView();
+    const selectedGraphs = useSelectedGraphs();
+    const uri = params["*"];
+
+    const [loadingViews, setLoadingViews] = useState(viewName !== null);
+    const { setApplicableViews, selectedView, setSelectedView } =
+        useContext(ViewsContext);
+    const [snackbarMessage, setSnackbarMessage] = useState<string | null>(null);
+    const { auth } = useAuth();
+
+    const navigate = useNavigateWithParams();
+
+    React.useEffect(() => {
+        setSnackbarMessage(null);
+        if (uri === undefined || endpoint === null) {
+            return;
+        }
+        setLoadingViews(isDefaultView(viewName));
+        getApplicableViews(uri, endpoint, auth).then((applicableViews) => {
+            setApplicableViews(applicableViews);
+            if (viewName === null) {
+                if (applicableViews.length > 0) {
+                    setSelectedView(applicableViews[0]);
+                } else {
+                    setSnackbarMessage(
+                        "No view suitable for these data, falling back to default",
+                    );
+                    setSelectedView(undefined);
+                }
+            } else if (!isDefaultView(viewName)) {
+                const validView = applicableViews.find(
+                    (v) => v.name === viewName,
+                );
+                if (validView) {
+                    setSelectedView(validView);
+                } else {
+                    setSnackbarMessage(
+                        "No view suitable for these data, falling back to default",
+                    );
+                    setSelectedView(undefined);
+                }
+            } else {
+                setSelectedView(undefined);
+            }
+            setLoadingViews(false);
+        });
+    }, [viewName, endpoint, uri, auth, setSelectedView, setApplicableViews]);
+
+    if (endpoint === null || uri === undefined) {
+        navigate("/", undefined, true);
+        return null;
+    }
+
+    if (loadingViews) {
+        return <Loading />;
+    }
+
+    let content = null;
+    if (selectedView === undefined) {
+        content = (
+            <URIDefaultView
+                uri={uri}
+                endpoint={endpoint ?? ""}
+                graphs={selectedGraphs}
+            />
+        );
+    } else {
+        content = (
+            <CustomView
+                uri={uri}
+                endpoint={endpoint ?? ""}
+                graphs={selectedGraphs}
+                selectedView={selectedView}
+            />
+        );
+    }
+
+    return (
+        <>
+            <Snackbar
+                open={snackbarMessage !== null}
+                autoHideDuration={6000}
+                onClose={() => setSnackbarMessage(null)}
+                message={snackbarMessage}
+                anchorOrigin={{ vertical: "top", horizontal: "center" }}
+            />
+            {content}
+        </>
+    );
+}
+
+function CustomView({
+    endpoint,
+    uri,
+    graphs,
+    selectedView,
+}: {
+    endpoint: string;
+    uri: string;
+    graphs: string[];
+    selectedView: SparqlViewConfig;
+}) {
+    return (
+        <Stack spacing={5}>
+            <Box>
+                <URIWithSelectedView
+                    uri={uri}
+                    endpoint={endpoint}
+                    viewWrapper={selectedView}
+                />
+            </Box>
+            <Accordion>
+                <AccordionSummary
+                    expandIcon={<ArrowDownIcon />}
+                    aria-controls="panel1-content"
+                    id="panel1-header"
+                >
+                    <Typography>See all triples</Typography>
+                </AccordionSummary>
+                <AccordionDetails>
+                    <URIDefaultView
+                        uri={uri}
+                        endpoint={endpoint}
+                        graphs={graphs}
+                        showUri={false}
+                    />
+                </AccordionDetails>
+            </Accordion>
+        </Stack>
+    );
+}

package/src/lib/components/UtilsComponents.tsx

@@ -0,0 +1,54 @@
+import Alert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import CircularProgress from "@mui/material/CircularProgress";
+import Typography from "@mui/material/Typography";
+import { Link } from "react-router-dom";
+import { useURILink } from "../hooks/useURILink";
+import { prefixedNameFromUri, type RDFNode } from "../utils/utils";
+
+export function Loading() {
+    return (
+        <Box
+            height={"100%"}
+            minHeight={200}
+            display={"flex"}
+            alignItems={"center"}
+            justifyContent={"center"}
+        >
+            <CircularProgress />
+        </Box>
+    );
+}
+
+export function AlertError({ error }: { error: string }) {
+    return <Alert severity="error">{error}</Alert>;
+}
+
+export function NoResults() {
+    return <div>No data to display</div>;
+}
+
+export function URILink({
+    node,
+    focusUri,
+    label,
+}: {
+    node: RDFNode;
+    focusUri?: string;
+    label?: string;
+}) {
+    const uriLink = useURILink(node.value);
+    if (node.type === "uri") {
+        const text = label ?? prefixedNameFromUri(node.value);
+        if (node.value === focusUri) {
+            return <Typography color={"GrayText"}>{text}</Typography>;
+        } else {
+            return (
+                <Link to={uriLink}>
+                    <Typography>{text}</Typography>
+                </Link>
+            );
+        }
+    }
+    return <Typography color={"GrayText"}>{node.value}</Typography>;
+}

package/src/lib/components/ViewSelector.css

@@ -0,0 +1,22 @@
+.list-group-item.view-item {
+    border-color: white;
+    width: 80%;
+    font-size: 1rem;
+}
+.list-group-item.view-item:not(.list-group-item-success) {
+    background: none;
+    color: black;
+}
+.list-group-item.view-item.disabled:not(.list-group-item-success) {
+    background: none;
+    color: grey;
+}
+.list-group-item.view-item:hover {
+    background-color: lightblue;
+    color: black;
+}
+
+.view-list {
+    max-height: 400px;
+    overflow-y: auto;
+}

package/src/lib/components/ViewSelector.tsx

@@ -0,0 +1,78 @@
+import "./ViewSelector.css";
+import Box from "@mui/material/Box";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import List from "@mui/material/List";
+import ListItemButton from "@mui/material/ListItemButton";
+import Radio from "@mui/material/Radio";
+import Switch from "@mui/material/Switch";
+import Typography from "@mui/material/Typography";
+import { useEffect, useContext } from "react";
+import { useParams } from "react-router-dom";
+import { useView } from "../context/ConfigContext";
+import { ViewsContext } from "../context/ViewsContext";
+import { useChangeView } from "../hooks/useNavigateWithParams";
+import { DEFAUT_VIEW_NAME, isDefaultView } from "../utils/utils";
+
+export function ViewSelector() {
+    const view = useView();
+    const params = useParams();
+    const currentUri = params["*"];
+
+    const { views, selectedView, applicableViews, setApplicableViews } =
+        useContext(ViewsContext);
+
+    const isAutomatic = () => view === null;
+    const changeView = useChangeView();
+
+    useEffect(() => {
+        if (!currentUri && applicableViews) {
+            setApplicableViews(undefined);
+        }
+    }, [currentUri, applicableViews, setApplicableViews]);
+
+    return (
+        <div>
+            <Box paddingLeft={1} paddingRight={1}>
+                <Typography variant="h6">Available views</Typography>
+                <FormControlLabel
+                    control={
+                        <Switch
+                            checked={isAutomatic()}
+                            onChange={() => {
+                                changeView(
+                                    isAutomatic() ? DEFAUT_VIEW_NAME : null,
+                                );
+                            }}
+                        />
+                    }
+                    label="Automatic"
+                />
+            </Box>
+            <List>
+                {views?.map((item) => {
+                    const selected =
+                        (selectedView === undefined &&
+                            isDefaultView(item.name)) ||
+                        (selectedView !== undefined &&
+                            selectedView.name === item.name);
+                    return (
+                        <ListItemButton
+                            disabled={
+                                !isDefaultView(item.name) &&
+                                !applicableViews?.find(
+                                    (v) => v.name === item.name,
+                                )
+                            }
+                            key={item.name}
+                            onClick={() => changeView(item.name)}
+                            selected={selected}
+                        >
+                            <Radio checked={selected} size="small" />
+                            {item.name}
+                        </ListItemButton>
+                    );
+                })}
+            </List>
+        </div>
+    );
+}