@logilab/sparqlexplorer 0.7.0

package/package.json

@@ -0,0 +1,73 @@
+{
+    "name": "@logilab/sparqlexplorer",
+    "version": "0.7.0",
+    "description": "A tool to explore sparql endpoints",
+    "exports": "./build/src/lib/index.js",
+    "types": "./build/src/lib/index.d.ts",
+    "scripts": {
+        "clean": "rm -rf build",
+        "format": "biome format",
+        "format:write": "biome format --write",
+        "build": "webpack --config webpack.dev.js",
+        "build:production": "webpack --config webpack.prod.js",
+        "build:pages": "webpack --config webpack.pages.js",
+        "build:lib": "concurrently --kill-others  'tsc --project ./tsconfig.lib.json --watch' 'cpx \"src/lib/**/*.css\" build/src/lib/ --watch'",
+        "build:lib:production": "webpack --config webpack.lib.prod.js",
+        "serve": "webpack-dev-server --config webpack.dev.js",
+        "lint": "biome lint",
+        "lint:write": "biome lint --fix",
+        "check": "biome check",
+        "check:write": "biome check --fix"
+    },
+    "peerDependencies": {
+        "react": "^19.2.3",
+        "react-dom": "^19.2.3"
+    },
+    "repository": {
+        "type": "hg",
+        "url": "https://forge.extranet.logilab.fr/open-source/SemWeb/sparqlexplorer"
+    },
+    "author": "Logilab",
+    "license": "LGPL-3.0",
+    "devDependencies": {
+        "@biomejs/biome": "2.3.12",
+        "@types/react": "^19.2.9",
+        "@types/react-dom": "^19.2.3",
+        "@types/react-router-dom": "^5.3.3",
+        "concurrently": "^9.2.1",
+        "copy-webpack-plugin": "^13.0.1",
+        "cpx": "^1.5.0",
+        "css-loader": "^7.1.2",
+        "file-loader": "^6.2.0",
+        "html-webpack-plugin": "^5.6.6",
+        "sass": "^1.97.3",
+        "sass-loader": "^16.0.6",
+        "serve": "^14.2.5",
+        "source-map-loader": "^5.0.0",
+        "style-loader": "^4.0.0",
+        "ts-loader": "^9.5.4",
+        "typescript": "^5.9.3",
+        "webpack": "^5.104.1",
+        "webpack-cli": "^6.0.1",
+        "webpack-dev-server": "^5.2.3",
+        "webpack-merge": "^6.0.1"
+    },
+    "dependencies": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.1",
+        "@logilab/sparqlexplorer-views": "^1.9.1",
+        "@logilab/sparqlutils": "^1.1.0",
+        "@logilab/yasgui": "^4.2.30",
+        "@mui/icons-material": "^7.3.7",
+        "@mui/material": "^7.3.7",
+        "datatables.net": "^2.3.6",
+        "react": "^19.2.3",
+        "react-dom": "^19.2.3",
+        "react-router-dom": "^7.13.0",
+        "ts-essentials": "^10.1.1"
+    },
+    "files": [
+        "./build",
+        "./src/"
+    ]
+}

package/src/app/index.css

@@ -0,0 +1,23 @@
+html {
+    min-height: 100vh;
+}
+
+body {
+    margin: 0;
+    font-family:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+        "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+        sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    min-height: 100vh;
+}
+
+#root {
+    min-height: 100vh;
+}
+
+code {
+    font-family:
+        source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}

package/src/app/index.tsx

@@ -0,0 +1,28 @@
+import {
+    SPARQL_VIEWS,
+    type SparqlViewConfig,
+} from "@logilab/sparqlexplorer-views";
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { DEFAUT_VIEW_NAME } from "../lib/utils/utils";
+import "./index.css";
+import App from "../lib/App";
+
+const container = document.getElementById("root");
+/* biome-ignore lint/style/noNonNullAssertion: needed to compile */
+const root = createRoot(container!);
+
+const allViews: Array<SparqlViewConfig> = [
+    {
+        name: DEFAUT_VIEW_NAME,
+        component: () => undefined,
+        isApplicable: () => Promise.resolve(true),
+    },
+    ...SPARQL_VIEWS,
+];
+
+root.render(
+    <React.StrictMode>
+        <App views={allViews} />
+    </React.StrictMode>,
+);

package/src/app/templates/constants.js

@@ -0,0 +1 @@
+window.SPARQL_ENDPOINT = null;

package/src/app/templates/index.hbs

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="description" content="">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="static/js/constants.js"></script>
+  <title>
+    <%= htmlWebpackPlugin.options.title %>
+  </title>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>

package/src/lib/App.css

@@ -0,0 +1,83 @@
+.App {
+    text-align: center;
+}
+
+.App-logo {
+    height: 40vmin;
+    pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .App-logo {
+        animation: App-logo-spin infinite 20s linear;
+    }
+}
+
+.App-header {
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
+}
+
+.App-link {
+    color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.bm-burger-button:hover {
+    /* biome-ignore lint/complexity/noImportantStyles: important */
+    opacity: 1 !important;
+}
+
+.jumbotron {
+    width: 700px;
+    margin: auto;
+}
+
+.jumbotron button {
+    float: right;
+}
+
+.out-link {
+    position: absolute;
+    top: 5px;
+    right: 150px;
+}
+
+.search-link {
+    position: absolute;
+    top: 5px;
+    right: 100px;
+}
+
+.whole-height-container {
+    height: 100vh;
+    display: flex;
+}
+
+.rbt-input-main {
+    /* biome-ignore lint/complexity/noImportantStyles: important */
+    width: 100% !important;
+}
+
+.yasgui-container {
+    height: 100%;
+    overflow-y: auto;
+}
+
+#yasgui {
+    width: 100%;
+}

package/src/lib/App.tsx

@@ -0,0 +1,31 @@
+import type { SparqlViewConfig } from "@logilab/sparqlexplorer-views";
+import { Route, HashRouter as Router, Routes } from "react-router-dom";
+
+import "./App.css";
+
+import { ViewsProvider } from "./context/ViewsContext";
+import { AuthProvider } from "./context/AuthContext";
+import { Home } from "./routes/Home";
+import { Search } from "./routes/Search";
+import { Uri } from "./routes/Uri";
+import { Yasgui } from "./routes/Yasgui";
+
+function App({ views }: { views: Array<SparqlViewConfig> }) {
+    return (
+        <AuthProvider>
+            <ViewsProvider views={views}>
+                <Router>
+                    <Routes>
+                        <Route path="/" element={<Home />} />
+                        <Route path="/yasgui" element={<Yasgui />} />
+                        <Route path="/search" element={<Search />} />
+                        <Route path="/browse/*" element={<Uri />} />
+                        <Route path="*" element={<Home />} />
+                    </Routes>
+                </Router>
+            </ViewsProvider>
+        </AuthProvider>
+    );
+}
+
+export default App;

package/src/lib/components/ClassList.tsx

@@ -0,0 +1,173 @@
+import FilterAltIcon from "@mui/icons-material/FilterAlt";
+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 Card from "@mui/material/Card";
+import CardActionArea from "@mui/material/CardActionArea";
+import CardContent from "@mui/material/CardContent";
+import Chip from "@mui/material/Chip";
+import Grid from "@mui/material/Grid";
+import InputAdornment from "@mui/material/InputAdornment";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import React from "react";
+import { Link } from "react-router-dom";
+import { useClasses } from "../hooks/useClasses";
+import { useURILink } from "../hooks/useURILink";
+import { getIconFromURI } from "../utils/getIconFromURI";
+import { prefixedNameFromUri } from "../utils/utils";
+import { AlertError, Loading } from "./UtilsComponents";
+
+export interface ListQueryResult {
+    uri: string;
+    nbInstances?: string;
+    label?: string;
+}
+
+export interface ClassListProps {
+    endpoint: string;
+}
+
+function isMetaClass(uri: string) {
+    return (
+        uri.startsWith("http://www.w3.org/1999/02/22-rdf-syntax-ns") ||
+        uri.startsWith("http://www.w3.org/2000/01/rdf-schema") ||
+        uri.startsWith("http://www.w3.org/ns/sparql-service-description") ||
+        uri.startsWith("http://www.w3.org/2002/07/owl")
+    );
+}
+
+export function ClassList({ endpoint }: ClassListProps) {
+    const { classes, isLoaded, error } = useClasses({ endpoint });
+    console.log("render");
+    const [fitlerClassLabel, setFilterClassLabel] = React.useState<string>("");
+    if (!isLoaded) {
+        return <Loading />;
+    } else if (error !== null) {
+        return <AlertError error={error} />;
+    }
+
+    const fitleredClasses = classes.filter((item) =>
+        item.uri.toLowerCase().includes(fitlerClassLabel.toLowerCase()),
+    );
+
+    const metaClasses: ListQueryResult[] = [];
+    const mainClasses: ListQueryResult[] = [];
+    fitleredClasses.forEach((c) => {
+        if (isMetaClass(c.uri)) {
+            metaClasses.push(c);
+        } else {
+            mainClasses.push(c);
+        }
+    });
+
+    return (
+        <Stack spacing={1}>
+            <TextField
+                value={fitlerClassLabel}
+                onChange={(e) => setFilterClassLabel(e.target.value)}
+                type="text"
+                placeholder="Filter classes"
+                InputProps={{
+                    endAdornment: (
+                        <InputAdornment position="start">
+                            <FilterAltIcon />
+                        </InputAdornment>
+                    ),
+                }}
+            />
+            <Box>
+                <Grid container spacing={2} columns={12}>
+                    {mainClasses.map((item) => (
+                        <ClassListItem
+                            key={item.uri}
+                            uri={item.uri}
+                            instanceCount={item.nbInstances}
+                            label={item.label}
+                        />
+                    ))}
+                </Grid>
+            </Box>
+            {metaClasses.length > 0 ? (
+                <Accordion>
+                    <AccordionSummary expandIcon={<ArrowDownIcon />}>
+                        <Typography>Meta Classes</Typography>
+                    </AccordionSummary>
+                    <AccordionDetails>
+                        <Grid container spacing={2} columns={12}>
+                            {metaClasses.map((item) => (
+                                <ClassListItem
+                                    key={item.uri}
+                                    uri={item.uri}
+                                    instanceCount={item.nbInstances}
+                                    label={item.label}
+                                />
+                            ))}
+                        </Grid>
+                    </AccordionDetails>
+                </Accordion>
+            ) : null}
+        </Stack>
+    );
+}
+
+function ClassListItem({
+    uri,
+    instanceCount,
+    label,
+}: {
+    uri: string;
+    instanceCount?: string;
+    label?: string;
+}) {
+    const uriLink = useURILink(uri);
+
+    const Icon = getIconFromURI(uri);
+
+    return (
+        <Grid size={{ xs: 4 }} sx={{ flexFlow: 1 }}>
+            <Link
+                key={uri}
+                to={uriLink}
+                style={{
+                    textDecoration: "none",
+                    color: "inherit",
+                }}
+            >
+                <Card sx={{ minHeight: 80, display: "flex" }}>
+                    <CardActionArea sx={{ display: "flex", flex: 1 }}>
+                        <CardContent sx={{ display: "flex", flex: 1 }}>
+                            <Stack
+                                flex={1}
+                                spacing={2}
+                                direction={"row"}
+                                alignItems={"center"}
+                            >
+                                <Icon sx={{ color: "GrayText" }} />
+                                <Stack flex={1}>
+                                    <Typography variant="body1">
+                                        {label ?? prefixedNameFromUri(uri)}
+                                    </Typography>
+                                    {label ? (
+                                        <Typography
+                                            variant="caption"
+                                            color={"GrayText"}
+                                        >
+                                            {prefixedNameFromUri(uri)}
+                                        </Typography>
+                                    ) : null}
+                                </Stack>
+                                {instanceCount !== undefined ? (
+                                    <Chip size="small" label={instanceCount} />
+                                ) : null}
+                            </Stack>
+                        </CardContent>
+                    </CardActionArea>
+                </Card>
+            </Link>
+        </Grid>
+    );
+}

package/src/lib/components/EndpointForm.tsx

@@ -0,0 +1,126 @@
+import { BasicAuth, querySparql, type SparqlAuth } from "@logilab/sparqlutils";
+import ExploreIcon from "@mui/icons-material/Explore";
+import Autocomplete from "@mui/material/Autocomplete";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import Stack from "@mui/material/Stack";
+import TextField from "@mui/material/TextField";
+import * as React from "react";
+import { useAuth } from "../context/AuthContext";
+import { useEndpoint } from "../context/ConfigContext";
+import { useNavigateWithParams } from "../hooks/useNavigateWithParams";
+import { addToSavedEndpoints, getSavedEndpoints } from "../utils/utils";
+
+async function checkServerValid(endpoint: string, auth?: SparqlAuth) {
+    try {
+        await querySparql(endpoint, `ASK { ?s ?p ?o }`, auth);
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+export const EndpointForm = () => {
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState<string | undefined>();
+    const savedEndpoints = getSavedEndpoints();
+    const { auth, setAuth } = useAuth();
+
+    const endpoint = useEndpoint();
+
+    const [endpointInput, setEndpointInput] = React.useState<string>(
+        endpoint ?? "",
+    );
+    const [username, setUsername] = React.useState(auth?.username ?? "");
+    const [password, setPassword] = React.useState(auth?.password ?? "");
+
+    const navigate = useNavigateWithParams();
+
+    React.useEffect(() => {
+        if (error) {
+            setError(undefined);
+        }
+    }, [error]);
+
+    return (
+        <form
+            onSubmit={async (e) => {
+                e.preventDefault();
+                setLoading(true);
+                const newAuth =
+                    username && password
+                        ? new BasicAuth(username, password)
+                        : undefined;
+                const valid = await checkServerValid(endpointInput, newAuth);
+                setLoading(false);
+                if (!valid) {
+                    setError("Invalid endpoint");
+                    return;
+                }
+                addToSavedEndpoints(endpointInput);
+                setAuth(newAuth);
+                navigate("/", {
+                    endpoint: endpointInput,
+                    graphs: null,
+                });
+            }}
+        >
+            <Stack spacing={1} direction={"row"}>
+                <Stack spacing={1} style={{ flex: 1 }}>
+                    <Autocomplete
+                        disablePortal
+                        id="combo-box-demo"
+                        options={savedEndpoints}
+                        freeSolo
+                        value={endpoint}
+                        onChange={(_, value) => setEndpointInput(value ?? "")}
+                        renderInput={(params) => (
+                            <TextField
+                                {...params}
+                                label="Sparql Endpoint"
+                                onChange={(event) =>
+                                    setEndpointInput(event.target.value)
+                                }
+                                error={error !== undefined}
+                                helperText={error}
+                                required
+                            />
+                        )}
+                        fullWidth
+                    />
+                    <Stack direction={"row"} spacing={1}>
+                        <TextField
+                            label="Username"
+                            defaultValue={auth}
+                            value={username}
+                            onChange={(event) =>
+                                setUsername(event.target.value)
+                            }
+                            fullWidth
+                        />
+                        <TextField
+                            label="Password"
+                            defaultValue={auth}
+                            value={password}
+                            type="password"
+                            onChange={(event) =>
+                                setPassword(event.target.value)
+                            }
+                            fullWidth
+                        />
+                    </Stack>
+                </Stack>
+                <Box>
+                    <Button
+                        variant="contained"
+                        type="submit"
+                        disabled={endpointInput === "" || loading}
+                        startIcon={<ExploreIcon />}
+                    >
+                        Explore
+                    </Button>
+                </Box>
+            </Stack>
+        </form>
+    );
+};

package/src/lib/components/GraphSelector.tsx

@@ -0,0 +1,114 @@
+import Alert from "@mui/material/Alert";
+import Box from "@mui/material/Box";
+import Checkbox from "@mui/material/Checkbox";
+import CircularProgress from "@mui/material/CircularProgress";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import List from "@mui/material/List";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemText from "@mui/material/ListItemText";
+import Switch from "@mui/material/Switch";
+import Typography from "@mui/material/Typography";
+import { useState } from "react";
+import { useEndpoint, useSelectedGraphs } from "../context/ConfigContext";
+import { useGraphs } from "../hooks/useGraphs";
+import { useAddGraph, useRemoveGraph } from "../hooks/useNavigateWithParams";
+
+const SHOW_ALL_KEY = "sparqlexplorer.graphs.showall";
+
+function shouldShowAll() {
+    return window.localStorage.getItem(SHOW_ALL_KEY) === "1";
+}
+
+function saveShowAll(open: boolean) {
+    return window.localStorage.setItem(SHOW_ALL_KEY, open ? "1" : "0");
+}
+
+export function GraphSelector() {
+    const endpoint = useEndpoint();
+    const [showAll, setShowAll] = useState(shouldShowAll());
+    const { error, graphs, isLoaded } = useGraphs(showAll);
+
+    if (!endpoint) {
+        return null;
+    }
+
+    function updateShowAll(newValue: boolean) {
+        setShowAll(newValue);
+        saveShowAll(newValue);
+    }
+
+    return (
+        <Box>
+            <Box paddingLeft={1} paddingRight={1}>
+                <Typography variant="h6">Available Graphs</Typography>
+            </Box>
+            {isLoaded ? (
+                <>
+                    <Box paddingLeft={1} paddingRight={1}>
+                        <FormControlLabel
+                            control={
+                                <Switch
+                                    checked={showAll}
+                                    onChange={() => updateShowAll(!showAll)}
+                                />
+                            }
+                            label="Show all"
+                        />
+                    </Box>
+                    <GraphList graphs={graphs} error={error} />
+                </>
+            ) : (
+                <Box paddingTop={5} display={"flex"} justifyContent={"center"}>
+                    <CircularProgress />
+                </Box>
+            )}
+        </Box>
+    );
+}
+
+function GraphList({
+    graphs,
+    error,
+}: {
+    graphs: Array<{ graph: string }>;
+    error: string | null;
+}) {
+    const selectedGraphs = useSelectedGraphs();
+    const addGraph = useAddGraph();
+    const removeGraph = useRemoveGraph();
+
+    if (error) {
+        return <Alert severity="error">{error}</Alert>;
+    }
+    if (graphs.length === 0) {
+        return <Typography color={"GrayText"}>No graphs found</Typography>;
+    }
+
+    return (
+        <List>
+            {graphs.map((g) => {
+                const selected = selectedGraphs.includes(g.graph);
+                return (
+                    <ListItemButton
+                        key={g.graph}
+                        onClick={() => {
+                            if (selected) {
+                                removeGraph(g.graph);
+                            } else {
+                                addGraph(g.graph);
+                            }
+                        }}
+                        disabled={
+                            selected &&
+                            g.graph === "default" &&
+                            selectedGraphs.length === 1
+                        }
+                    >
+                        <Checkbox checked={selected} />
+                        <ListItemText primary={g.graph} />
+                    </ListItemButton>
+                );
+            })}
+        </List>
+    );
+}