@logilab/sparqlexplorer 0.7.0

package/src/lib/components/layout/DrawerContent.tsx

@@ -0,0 +1,55 @@
+import ArrowLeftIcon from "@mui/icons-material/ChevronLeft";
+import Box from "@mui/material/Box";
+import Divider from "@mui/material/Divider";
+import IconButton from "@mui/material/IconButton";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { Link } from "react-router-dom";
+import { useEndpoint } from "../../context/ConfigContext";
+import { GraphSelector } from "../GraphSelector";
+import { ViewSelector } from "../ViewSelector";
+
+export const DRAWER_WIDTH = 340;
+
+export function DrawerContent({ onClose }: { onClose: () => void }) {
+    const endpoint = useEndpoint();
+    return (
+        <Box
+            height={"100%"}
+            display={"flex"}
+            flexDirection={"column"}
+            width={340}
+        >
+            <Stack direction={"row"}>
+                <Box
+                    padding={1}
+                    display={"flex"}
+                    alignItems={"center"}
+                    justifyContent={"center"}
+                >
+                    <IconButton size="large" color="inherit" onClick={onClose}>
+                        <ArrowLeftIcon />
+                    </IconButton>
+                </Box>
+                <Box padding={1} flex={1}>
+                    <Typography variant="h5">SparqlExplorer</Typography>
+                    {endpoint ? (
+                        <Link to={endpoint} target="_blank">
+                            <Typography variant="caption" color={"GrayText"}>
+                                {endpoint}
+                            </Typography>
+                        </Link>
+                    ) : null}
+                </Box>
+            </Stack>
+            <Divider />
+            <Box paddingTop={2}>
+                <Stack spacing={1}>
+                    <ViewSelector />
+                    <Divider />
+                    <GraphSelector />
+                </Stack>
+            </Box>
+        </Box>
+    );
+}

package/src/lib/components/layout/Footer.tsx

@@ -0,0 +1,32 @@
+import packageJson from "../../../../package.json";
+
+export function Footer() {
+    return (
+        <footer
+            style={{
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                borderTop: 1,
+                borderTopStyle: "solid",
+                borderTopColor: "rgba(140, 130, 115, 0.1)",
+                padding: 5,
+            }}
+        >
+            <p style={{ margin: 0 }}>
+                SparqlExplorer v{packageJson.version} made with ✨ by{" "}
+                <a
+                    href="https://logilab.fr/"
+                    style={{
+                        textDecoration: "none",
+                    }}
+                    target="_blank"
+                    rel="noopener"
+                >
+                    Logilab
+                </a>
+                .
+            </p>
+        </footer>
+    );
+}

package/src/lib/components/layout/Layout.tsx

@@ -0,0 +1,103 @@
+import Box from "@mui/material/Box";
+import Drawer from "@mui/material/Drawer";
+import Stack from "@mui/material/Stack";
+import { styled } from "@mui/material/styles";
+import { type PropsWithChildren, useState } from "react";
+import { ConfigProvider } from "../../context/ConfigContext";
+import { useParam } from "../../hooks/useParams";
+import { DRAWER_WIDTH, DrawerContent } from "./DrawerContent";
+import { Footer } from "./Footer";
+import { NavBar } from "./Navbar";
+
+const Main = styled("div", { shouldForwardProp: (prop) => prop !== "open" })<{
+    open?: boolean;
+}>(({ theme, open }) => ({
+    flexGrow: 1,
+    transition: theme.transitions.create("margin", {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+    }),
+    marginLeft: 0,
+    ...(open && {
+        width: `calc(100% - ${DRAWER_WIDTH}px)`,
+        marginLeft: `${DRAWER_WIDTH}px`,
+        transition: theme.transitions.create("margin", {
+            easing: theme.transitions.easing.easeOut,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    }),
+}));
+
+const OPEN_DRAWER_KEY = "sparqlexplorer_drawer open";
+
+function shouldOpenDrawer() {
+    return window.localStorage.getItem(OPEN_DRAWER_KEY) === "1";
+}
+
+function saveDrawerState(open: boolean) {
+    return window.localStorage.setItem(OPEN_DRAWER_KEY, open ? "1" : "0");
+}
+
+function useGraphsParam(): string[] {
+    const selectedGraphsParam = useParam("graphs");
+    const parsedGraphs = JSON.parse(selectedGraphsParam ?? "[]");
+    if (
+        Array.isArray(parsedGraphs) &&
+        parsedGraphs.every((v) => typeof v === "string")
+    ) {
+        return parsedGraphs;
+    }
+    return [];
+}
+
+export function Layout({ children }: PropsWithChildren) {
+    const endpointParam = useParam("endpoint");
+    const endpointFixed = window.SPARQL_ENDPOINT;
+    const isEndpointFixed = endpointFixed !== null && endpointFixed !== "";
+    const endpoint = isEndpointFixed ? endpointFixed : endpointParam;
+    const view = useParam("view");
+    const selectedGraphs = useGraphsParam();
+    const [drawerOpen, setDrawerOpen] = useState(shouldOpenDrawer());
+
+    function setDrawerState(open: boolean) {
+        saveDrawerState(open);
+        setDrawerOpen(open);
+    }
+
+    return (
+        <ConfigProvider
+            config={{
+                endpoint,
+                canEditEndpoint: !isEndpointFixed,
+                view,
+                selectedGraphs,
+            }}
+        >
+            <div
+                style={{
+                    minHeight: "100vh",
+                }}
+            >
+                <Stack spacing={2} sx={{ minHeight: "100vh" }}>
+                    <Box>
+                        <NavBar
+                            onBurgerPressed={() => setDrawerState(!drawerOpen)}
+                            drawerOpen={drawerOpen}
+                        />
+                    </Box>
+                    <Box display={"flex"} flex={1}>
+                        <Main open={drawerOpen}>{children}</Main>
+                    </Box>
+                    <Footer />
+                </Stack>
+                <Drawer
+                    open={drawerOpen}
+                    onClose={() => setDrawerState(false)}
+                    variant="persistent"
+                >
+                    <DrawerContent onClose={() => setDrawerState(false)} />
+                </Drawer>
+            </div>
+        </ConfigProvider>
+    );
+}

package/src/lib/components/layout/Navbar.tsx

@@ -0,0 +1,231 @@
+import HomeIcon from "@mui/icons-material/HomeOutlined";
+import LinkIcon from "@mui/icons-material/Link";
+import MenuIcon from "@mui/icons-material/Menu";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import SearchIcon from "@mui/icons-material/Search";
+import TerminalIcon from "@mui/icons-material/Terminal";
+import AppBar, { type AppBarProps } from "@mui/material/AppBar";
+import Box from "@mui/material/Box";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import InputBase from "@mui/material/InputBase";
+import Stack from "@mui/material/Stack";
+import { alpha, styled } from "@mui/material/styles";
+import Toolbar from "@mui/material/Toolbar";
+import Tooltip from "@mui/material/Tooltip";
+import Typography from "@mui/material/Typography";
+import { useEffect, useState } from "react";
+import { useMatch, useParams } from "react-router-dom";
+import { useEndpoint } from "../../context/ConfigContext";
+import { useNavigateWithParams } from "../../hooks/useNavigateWithParams";
+import { useParam } from "../../hooks/useParams";
+import { DRAWER_WIDTH } from "./DrawerContent";
+
+interface CustomAppBarProps extends AppBarProps {
+    open?: boolean;
+}
+
+const CustomAppBar = styled(AppBar, {
+    shouldForwardProp: (prop) => prop !== "open",
+})<CustomAppBarProps>(({ theme, open }) => ({
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    transition: theme.transitions.create(["margin", "width"], {
+        easing: theme.transitions.easing.sharp,
+        duration: theme.transitions.duration.leavingScreen,
+    }),
+    ...(open && {
+        width: `calc(100% - ${DRAWER_WIDTH}px)`,
+        marginLeft: `${DRAWER_WIDTH}px`,
+        transition: theme.transitions.create(["margin", "width"], {
+            easing: theme.transitions.easing.easeOut,
+            duration: theme.transitions.duration.enteringScreen,
+        }),
+    }),
+}));
+
+const Search = styled("div")(({ theme }) => ({
+    position: "relative",
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: alpha(theme.palette.common.black, 0.05),
+    "&:hover": {
+        backgroundColor: alpha(theme.palette.common.black, 0.1),
+    },
+    flex: 1,
+    height: 40,
+}));
+
+export function NavBar({
+    onBurgerPressed,
+    drawerOpen,
+}: {
+    onBurgerPressed: () => void;
+    drawerOpen: boolean;
+}) {
+    const searchInput = useParam("search");
+    const params = useParams();
+    const currentUri = params["*"];
+
+    const [currentSearch, setCurrentSearch] = useState(
+        currentUri ?? searchInput ?? "",
+    );
+    const navigate = useNavigateWithParams();
+    const endpoint = useEndpoint();
+
+    useEffect(() => {
+        if (currentUri && currentUri !== currentSearch) {
+            setCurrentSearch(currentUri);
+        }
+    }, [currentUri, currentSearch]);
+
+    useEffect(() => {
+        if (searchInput && searchInput !== currentSearch) {
+            setCurrentSearch(searchInput);
+        }
+    }, [searchInput, currentSearch]);
+
+    function startSearch() {
+        if (!currentSearch) {
+            return;
+        }
+
+        const encodedSearch = encodeURIComponent(currentSearch);
+        if (
+            currentSearch.startsWith("http://") ||
+            currentSearch.startsWith("https://") ||
+            currentSearch.startsWith("urn:")
+        ) {
+            navigate(`/browse/${encodedSearch}`);
+        } else {
+            navigate("/search", {
+                search: encodedSearch,
+            });
+        }
+    }
+
+    // We show the home screen on all routes not matching those patterns
+    // See App.tsx
+    const onYasgui = useMatch("/yasgui");
+    const onSearch = useMatch("/search");
+    const onUri = useMatch("/browse/:uri");
+
+    const showHomeButton =
+        onYasgui !== null || onSearch !== null || onUri !== null;
+
+    return (
+        <CustomAppBar position="static" open={drawerOpen}>
+            <Toolbar>
+                {!drawerOpen ? (
+                    <IconButton
+                        size="large"
+                        edge="start"
+                        color="inherit"
+                        aria-label="open drawer"
+                        sx={{ mr: 2 }}
+                        onClick={onBurgerPressed}
+                    >
+                        <MenuIcon />
+                    </IconButton>
+                ) : null}
+                <Stack
+                    direction={"row"}
+                    spacing={1}
+                    alignItems={"center"}
+                    flexGrow={1}
+                >
+                    {!drawerOpen ? (
+                        <Typography
+                            variant="h6"
+                            noWrap
+                            component="a"
+                            sx={{
+                                display: { xs: "none", sm: "block" },
+                                cursor: "pointer",
+                                textDecoration: "none",
+                                color: "inherit",
+                            }}
+                            onClick={() => navigate("/")}
+                        >
+                            SparqlExplorer
+                        </Typography>
+                    ) : null}
+                    {showHomeButton ? (
+                        <IconButton
+                            size="large"
+                            edge="start"
+                            color="inherit"
+                            sx={{ mr: 2 }}
+                            onClick={() => navigate("/")}
+                        >
+                            <HomeIcon />
+                        </IconButton>
+                    ) : null}
+                    {endpoint ? (
+                        <Search>
+                            <Stack
+                                paddingLeft={1}
+                                paddingRight={1}
+                                direction={"row"}
+                                spacing={1}
+                                alignItems={"center"}
+                                flexGrow={1}
+                                height={"100%"}
+                            >
+                                <Box>
+                                    {!currentUri ||
+                                    currentUri !== currentSearch ? (
+                                        <SearchIcon />
+                                    ) : (
+                                        <LinkIcon />
+                                    )}
+                                </Box>
+                                <form
+                                    style={{ flex: 1, display: "flex" }}
+                                    onSubmit={(e) => {
+                                        e.preventDefault();
+                                        startSearch();
+                                    }}
+                                >
+                                    <InputBase
+                                        sx={{
+                                            flex: 1,
+                                        }}
+                                        name="search"
+                                        placeholder="Search…"
+                                        inputProps={{
+                                            "aria-label": "search",
+                                        }}
+                                        value={currentSearch}
+                                        onChange={(event) =>
+                                            setCurrentSearch(event.target.value)
+                                        }
+                                    />
+                                </form>
+                                {currentUri && currentUri === currentSearch ? (
+                                    <Tooltip title="Open URI">
+                                        <IconButton
+                                            href={currentUri}
+                                            target="_blank"
+                                            color="inherit"
+                                        >
+                                            <OpenInNewIcon />
+                                        </IconButton>
+                                    </Tooltip>
+                                ) : null}
+                            </Stack>
+                        </Search>
+                    ) : null}
+                    {endpoint ? (
+                        <Button
+                            sx={{ color: "inherit" }}
+                            onClick={() => navigate("/yasgui")}
+                            startIcon={<TerminalIcon />}
+                        >
+                            Query
+                        </Button>
+                    ) : null}
+                </Stack>
+            </Toolbar>
+        </CustomAppBar>
+    );
+}