@jbrowse/core/esm/ui/FileSelector/LocalFileChooser.js

JBrowse 2 core libraries used by plugins

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Button, FormControl, Typography } from '@mui/material';
import { isFileSystemAccessSupported } from "../../util/fileHandleStore.js";
import { isElectron } from "../../util/index.js";
import { ensureFileHandleReady, getBlob, getFileFromCache, storeBlobLocation, storeFileHandleLocation, } from "../../util/tracks.js";
import { makeStyles } from "../../util/tss-react/index.js";
import { isBlobLocation, isFileHandleLocation, isLocalPathLocation, } from "../../util/types/index.js";
const useStyles = makeStyles()(theme => ({
    filename: {
        marginLeft: theme.spacing(1),
    },
}));
const supportsFileSystemAccess = isFileSystemAccessSupported() && !isElectron;
function getFilename(location) {
    if (!location) {
        return undefined;
    }
    if (isBlobLocation(location)) {
        return location.name;
    }
    if (isLocalPathLocation(location)) {
        return location.localPath;
    }
    if (isFileHandleLocation(location)) {
        return location.name;
    }
    return undefined;
}
function needsReload(location) {
    if (!location) {
        return false;
    }
    if (isBlobLocation(location)) {
        return !getBlob(location.blobId);
    }
    if (isFileHandleLocation(location)) {
        return !getFileFromCache(location.handleId);
    }
    return false;
}
async function openFileSystemAccessPicker() {
    const [handle] = await window.showOpenFilePicker();
    return storeFileHandleLocation(handle);
}
function FilePickerButton({ setLocation, }) {
    if (supportsFileSystemAccess) {
        return (_jsx(Button, { variant: "outlined", onClick: async () => {
                try {
                    setLocation(await openFileSystemAccessPicker());
                }
                catch (e) {
                    if (e.name !== 'AbortError') {
                        throw e;
                    }
                }
            }, children: "Choose File" }));
    }
    return (_jsxs(Button, { variant: "outlined", component: "label", children: ["Choose File", _jsx("input", { type: "file", hidden: true, onChange: ({ target }) => {
                    const file = target.files?.[0];
                    if (file) {
                        if (isElectron) {
                            const { webUtils } = window.require('electron');
                            setLocation({
                                localPath: webUtils.getPathForFile(file),
                                locationType: 'LocalPathLocation',
                            });
                        }
                        else {
                            const loc = storeBlobLocation({ blob: file });
                            if ('blobId' in loc) {
                                setLocation(loc);
                            }
                        }
                    }
                } })] }));
}
function ReloadPrompt({ location, setLocation, }) {
    const handleReopen = async () => {
        if (isFileHandleLocation(location)) {
            try {
                await ensureFileHandleReady(location.handleId, true);
                setLocation({ ...location });
            }
            catch {
                try {
                    setLocation(await openFileSystemAccessPicker());
                }
                catch (e) {
                    if (e.name !== 'AbortError') {
                        throw e;
                    }
                }
            }
        }
    };
    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(Typography, { color: "error", children: "(need to reload)" }), isFileHandleLocation(location) && (_jsx(Button, { size: "small", variant: "text", color: "primary", onClick: handleReopen, children: "Reopen" }))] }));
}
function LocalFileChooser({ location, setLocation, }) {
    const { classes } = useStyles();
    const filename = getFilename(location);
    return (_jsxs(Box, { display: "flex", flexDirection: "row", alignItems: "center", children: [_jsx(Box, { children: _jsx(FormControl, { fullWidth: true, children: _jsx(FilePickerButton, { setLocation: setLocation }) }) }), _jsxs(Box, { children: [_jsx(Typography, { component: "span", className: classes.filename, color: filename ? 'initial' : 'textSecondary', children: filename || 'No file chosen' }), location && needsReload(location) && (_jsx(ReloadPrompt, { location: location, setLocation: setLocation }))] })] }));
}
export default LocalFileChooser;