@vitessce/launcher 3.8.6

package/dist-tsc/ControlledLauncher.d.ts

@@ -0,0 +1,2 @@
+export function ControlledLauncher(props: any): JSX.Element;
+//# sourceMappingURL=ControlledLauncher.d.ts.map

package/dist-tsc/ControlledLauncher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledLauncher.d.ts","sourceRoot":"","sources":["../src/ControlledLauncher.js"],"names":[],"mappings":"AA+LA,4DAgBC"}

package/dist-tsc/ControlledLauncher.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable max-len */
+/* eslint-disable no-console */
+/* eslint-disable prefer-destructuring */
+import React, { useMemo, useState, useEffect } from 'react';
+import { Vitessce } from '@vitessce/all';
+import { generateConfigAlt as generateConfig, parseUrls } from '@vitessce/config';
+import { Alert } from '@vitessce/styles';
+import clsx from 'clsx';
+import { QueryClient, QueryClientProvider, useQuery } from '@tanstack/react-query';
+import { useStyles } from './launcher-styles.js';
+import { LauncherStart } from './LauncherStart.js';
+function logConfigUpgrade(prevConfig, nextConfig) {
+    // eslint-disable-next-line no-console
+    console.log(`Upgrade view config schema from ${prevConfig.version} to ${nextConfig.version}`);
+    // eslint-disable-next-line no-console
+    console.log(prevConfig);
+    // eslint-disable-next-line no-console
+    console.log(nextConfig);
+}
+function ControlledLauncherInner(props) {
+    const { isEditing, setIsEditing, setIsUsingLocalFiles, configUrl, setConfigUrl, sourceUrlArr, setSourceUrlArr, marginTop = 0, launcherError, setLauncherError, } = props;
+    const { classes } = useStyles();
+    const [validConfigFromDroppedData, setValidConfigFromDroppedData] = useState(null);
+    const [storesFromDroppedData, setStoresFromDroppedData] = useState(null);
+    const configUrlQueryEnabled = !isEditing && !!configUrl;
+    const configUrlResult = useQuery({
+        enabled: configUrlQueryEnabled,
+        queryKey: ['config-from-url', configUrl],
+        queryFn: async () => {
+            const resp = await fetch(configUrl);
+            if (!resp.ok) {
+                throw new Error(`Failed to fetch config from URL: ${resp.status} ${resp.statusText}`);
+            }
+            const configJson = await resp.json();
+            return configJson;
+        },
+    });
+    const sourceUrlQueryEnabled = !isEditing && Array.isArray(sourceUrlArr) && sourceUrlArr.length > 0;
+    const sourceUrlResult = useQuery({
+        enabled: sourceUrlQueryEnabled,
+        queryKey: ['data-metadata-from-urls', sourceUrlArr],
+        queryFn: async () => {
+            const { config, stores } = await generateConfig(parseUrls(sourceUrlArr));
+            return { config, stores };
+        },
+    });
+    let isLoading = false;
+    let validConfig = null;
+    let stores = null;
+    if (configUrlQueryEnabled) {
+        isLoading = configUrlResult.isLoading;
+        if (configUrlResult.isSuccess) {
+            validConfig = configUrlResult.data;
+            setLauncherError(null);
+        }
+        else if (configUrlResult.isError) {
+            setIsEditing(true);
+            setLauncherError(`Error loading config from URL: ${configUrlResult.error.message}`);
+        }
+    }
+    else if (sourceUrlQueryEnabled) {
+        isLoading = sourceUrlResult.isLoading;
+        if (sourceUrlResult.isSuccess) {
+            validConfig = sourceUrlResult.data.config.toJSON();
+            stores = sourceUrlResult.data.stores;
+            setLauncherError(null);
+        }
+        else if (sourceUrlResult.isError) {
+            setIsEditing(true);
+            setLauncherError(`Error loading data/metadata from source URL(s): ${sourceUrlResult.error.message}`);
+        }
+    }
+    else if (validConfigFromDroppedData) {
+        validConfig = validConfigFromDroppedData;
+        stores = storesFromDroppedData;
+        setLauncherError(null);
+    }
+    // Possible states:
+    // - needsStart: No URL parameters; Show the launcher UI.
+    // - Awaiting URL parameter parsing.
+    // - Invalid/unrecognized example ID
+    // - Loading config or data/metadata from URL.
+    // - Loaded config but was invalid.
+    // - Could not identify a valid/supported data format from data file extension(s).
+    //   - Suggest to append `$supportedFileType` to source URL(s) to specify the data format if file extension is non-standard.
+    // - Failed to load config or data/metadata from URL.
+    // - Error if BOTH config and source parameters are provided.
+    // - Error if BOTH hash and query parameters are provided.
+    const pageMode = false; // TODO
+    const PageComponent = null; // TODO
+    const isExpanded = true; // TODO
+    const onDropHandler = null; // TODO
+    const debug = false; // TODO
+    const theme = 'light2'; // TODO
+    return (isEditing ? (_jsxs(_Fragment, { children: [launcherError ? (_jsx(Alert, { severity: "error", onClose: () => setLauncherError(null), children: launcherError })) : null, _jsx(LauncherStart, { setIsEditing: setIsEditing, setIsUsingLocalFiles: setIsUsingLocalFiles, configUrl: configUrl, setConfigUrl: setConfigUrl, sourceUrlArr: sourceUrlArr, setSourceUrlArr: setSourceUrlArr, setValidConfigFromDroppedData: setValidConfigFromDroppedData, setStoresFromDroppedData: setStoresFromDroppedData, launcherError: launcherError, setLauncherError: setLauncherError })] })) : (validConfig ? (_jsxs("main", { className: clsx(classes.vitessceApp, { 'vitessce-expanded': isExpanded, 'vitessce-page': pageMode }), style: {
+            height: `calc(100vh - ${marginTop}px)`,
+        }, children: [pageMode ? (_jsx("style", { children: `
+          .vitessce-container {
+            height: max(100%,100vh);
+            width: 100%;
+            overflow: hidden;
+            position: relative;
+            left: 0;
+          }
+        ` })) : (_jsx("style", { children: `
+          .vitessce-container {
+            min-height: calc(100vh - ${marginTop}px);
+            width: 100%;
+            overflow: hidden;
+            position: relative;
+            left: 0;
+          }
+        ` })), _jsx(Vitessce, { theme: theme, validateOnConfigChange: debug, onConfigChange: debug ? console.log : undefined, onConfigUpgrade: debug ? logConfigUpgrade : undefined, config: validConfig, height: isExpanded ? undefined : 800, pageMode: pageMode, stores: stores, onDrop: onDropHandler, children: pageMode && PageComponent ? (_jsx(PageComponent, {})) : null })] })) : (isLoading ? (_jsx("h2", { children: "Loading..." })) : (_jsx("p", { children: "Error: undefined state" })))));
+}
+export function ControlledLauncher(props) {
+    const queryClient = useMemo(() => new QueryClient({
+        // Reference: https://tanstack.com/query/latest/docs/react/guides/window-focus-refetching
+        defaultOptions: {
+            queries: {
+                refetchOnWindowFocus: false,
+                retry: 2,
+            },
+        },
+    }), []);
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ControlledLauncherInner, { ...props }) }));
+}

package/dist-tsc/LauncherStart.d.ts

@@ -0,0 +1,2 @@
+export function LauncherStart(props: any): JSX.Element;
+//# sourceMappingURL=LauncherStart.d.ts.map

package/dist-tsc/LauncherStart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LauncherStart.d.ts","sourceRoot":"","sources":["../src/LauncherStart.js"],"names":[],"mappings":"AAoBA,uDA0UC"}

package/dist-tsc/LauncherStart.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/no-unknown-property */
+/* eslint-disable max-len */
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { createOnDrop } from '@vitessce/vit-s';
+import { TextField, Button, Typography, Card, CardContent, Accordion, AccordionSummary, AccordionDetails, ExpandMore, } from '@vitessce/styles';
+import clsx from 'clsx';
+import { useStyles } from './launcher-styles.js';
+export function LauncherStart(props) {
+    const { setIsEditing, setIsUsingLocalFiles, configUrl, setConfigUrl, sourceUrlArr, setSourceUrlArr, setValidConfigFromDroppedData, setStoresFromDroppedData, setLauncherError, } = props;
+    const { classes } = useStyles();
+    const [spotlightCard, setSpotlightCard] = useState(null);
+    // Single dropzone for both data files/folders and config files.
+    const dropzoneRef = useRef(null);
+    const localDataInputFoldersRef = useRef(null);
+    const localDataInputFilesRef = useRef(null);
+    const localConfigInputRef = useRef(null);
+    // Handlers for drag-and-drop and file input changes.
+    const onDropHandler = useMemo(() => createOnDrop({ setViewConfig: setValidConfigFromDroppedData, setStores: setStoresFromDroppedData }, false, // isFileInput
+    true), [setValidConfigFromDroppedData, setStoresFromDroppedData]);
+    const onFileInputHandler = useMemo(() => createOnDrop({ setViewConfig: setValidConfigFromDroppedData, setStores: setStoresFromDroppedData }, true, // isFileInput
+    true), [setValidConfigFromDroppedData, setStoresFromDroppedData]);
+    // Effect for setting up drag-and-drop event listeners for data file/folder input.
+    useEffect(() => {
+        // Make the entire Launcher a dropzone,
+        // and then determine whether the dropped file(s) are config or data files
+        // (e.g., if a single .json file, assume config; else data).
+        const zone = dropzoneRef.current;
+        const zoneDataInput1 = localDataInputFoldersRef.current;
+        const zoneDataInput2 = localDataInputFilesRef.current;
+        const zoneConfigInput = localConfigInputRef.current;
+        const onDragEnter = (e) => {
+            e.preventDefault();
+            setSpotlightCard('data-local');
+        };
+        const onDragLeave = () => {
+            setSpotlightCard(null);
+        };
+        const onDragOver = (e) => {
+            e.preventDefault();
+        };
+        const onDrop = async (e) => {
+            e.preventDefault();
+            setIsEditing(false);
+            // Clear the other field values.
+            setConfigUrl(undefined);
+            setSourceUrlArr(undefined);
+            // Call onDrop handler passed in from parent of <VitS/Vitessce/> via prop.
+            try {
+                await onDropHandler(e);
+                setIsUsingLocalFiles(true);
+            }
+            catch (err) {
+                setLauncherError(`Error processing dropped files: ${err.message}`);
+                setIsEditing(true);
+            }
+            setSpotlightCard(null);
+        };
+        const onDataInputChange = async (e) => {
+            // Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
+            e.preventDefault();
+            setIsEditing(false);
+            setSpotlightCard('data-local');
+            // Clear the other field values.
+            setConfigUrl(undefined);
+            setSourceUrlArr(undefined);
+            try {
+                await onFileInputHandler(e);
+                setIsUsingLocalFiles(true);
+            }
+            catch (err) {
+                setLauncherError(`Error processing selected files: ${err.message}`);
+                setIsEditing(true);
+            }
+            setSpotlightCard(null);
+        };
+        const onConfigInputChange = async (e) => {
+            // Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop
+            e.preventDefault();
+            setIsEditing(false);
+            setSpotlightCard('config-local');
+            // Clear the other field values.
+            setConfigUrl(undefined);
+            setSourceUrlArr(undefined);
+            try {
+                await onFileInputHandler(e);
+                setIsUsingLocalFiles(true);
+            }
+            catch (err) {
+                setLauncherError(`Error processing selected file: ${err.message}`);
+                setIsEditing(true);
+            }
+            setSpotlightCard(null);
+        };
+        // The dragenter event happens at the moment you drag something in to the target element,
+        // and then it stops.
+        // The dragover event happens during the time you are dragging something until you drop it.
+        zone.addEventListener('dragenter', onDragEnter);
+        zone.addEventListener('dragleave', onDragLeave);
+        zone.addEventListener('dragover', onDragOver);
+        zone.addEventListener('drop', onDrop);
+        zoneDataInput1.addEventListener('change', onDataInputChange);
+        zoneDataInput2.addEventListener('change', onDataInputChange);
+        zoneConfigInput.addEventListener('change', onConfigInputChange);
+        return () => {
+            zone.removeEventListener('dragenter', onDragEnter);
+            zone.removeEventListener('dragleave', onDragLeave);
+            zone.removeEventListener('dragover', onDragOver);
+            zone.removeEventListener('drop', onDrop);
+            zoneDataInput1.removeEventListener('change', onDataInputChange);
+            zoneDataInput2.removeEventListener('change', onDataInputChange);
+            zoneConfigInput.removeEventListener('change', onConfigInputChange);
+        };
+    }, [dropzoneRef, localDataInputFoldersRef, localDataInputFilesRef,
+        onDropHandler, setIsUsingLocalFiles, setIsEditing, setSpotlightCard,
+        onFileInputHandler, setConfigUrl, setSourceUrlArr, setLauncherError,
+    ]);
+    return (_jsxs("div", { className: classes.launcher, ref: dropzoneRef, children: [_jsxs("div", { className: classes.launcherRow, children: [_jsxs("div", { className: clsx({ [classes.cardDim]: spotlightCard && (spotlightCard === 'config-local' || spotlightCard === 'config-remote') }), children: [_jsx(Typography, { variant: "h5", children: "Begin with data" }), _jsxs("p", { children: ["Let Vitessce ", _jsx("a", { href: "https://vitessce.io/docs/default-config-json/", children: "infer an initial configuration" }), " based on the contents of your ", _jsx("a", { href: "https://vitessce.io/docs/data-types-file-types/", children: "data files." })] })] }), _jsxs("div", { className: classes.launcherCardRow, children: [_jsx(Card, { className: clsx(classes.launcherCard, { [classes.cardDim]: spotlightCard && spotlightCard !== 'data-local' }), children: _jsx("span", { className: classes.cardDashed, children: _jsxs(CardContent, { className: classes.cardContent, children: [_jsxs(Typography, { variant: "h6", children: ["Local data ", _jsx("br", {}), "(Drag and drop)"] }), _jsx("p", { children: "Select or drop local files (or folders) to view them in Vitessce. Vitessce launches with a default configuration (based on file extensions and contents). Files remain local; no upload occurs." }), _jsx("div", { className: classes.buttonSpacer }), _jsxs("div", { className: classes.dataButtonGroup, children: [_jsxs(Button, { component: "label", htmlFor: "data-local-input-directory", variant: "outlined", fullWidth: true, children: [_jsx("span", { children: "Select folder(s)" }), _jsx("input", { id: "data-local-input-directory", type: "file", ref: localDataInputFoldersRef, className: classes.hiddenFileInput, multiple: true, directory: "true", webkitdirectory: "true", mozdirectory: "true" })] }), "\u00A0", _jsxs(Button, { component: "label", htmlFor: "data-local-input-files", variant: "outlined", fullWidth: true, children: [_jsx("span", { children: "Select file(s)" }), _jsx("input", { id: "data-local-input-files", type: "file", ref: localDataInputFilesRef, className: classes.hiddenFileInput, multiple: true })] })] }), _jsx("div", { className: classes.buttonSpacer })] }) }) }), _jsx(Card, { className: clsx(classes.launcherCard, { [classes.cardDim]: spotlightCard && spotlightCard !== 'data-remote' }), children: _jsxs(CardContent, { children: [_jsxs(Typography, { variant: "h6", children: ["Remote data ", _jsx("br", {}), " (Load from URL)"] }), _jsxs("p", { children: ["Enter file (or folder) URLs to view them in Vitessce. Vitessce launches with a default configuration (based on file types and contents). See our ", _jsx("a", { href: "https://vitessce.io/docs/data-hosting/", children: "data hosting" }), " documentation for assistance in making your data accessible to Vitessce.\u00A0"] }), _jsxs("div", { className: classes.textareaAndButton, children: [_jsx(TextField, { multiline: true, label: "Data URL(s)", placeholder: "One or more file URLs (semicolon-separated)", minRows: 2, className: classes.dataUrlTextarea, value: sourceUrlArr ? sourceUrlArr.join(';') : '', onChange: (e) => {
+                                                        // Clear existing state.
+                                                        setConfigUrl(undefined);
+                                                        setSourceUrlArr(e.target.value);
+                                                    }, onBlur: () => setSpotlightCard(null), onFocus: () => {
+                                                        setSpotlightCard('data-remote');
+                                                        // We need to set isEditing, otherwise the launcher UI will disappear
+                                                        // as soon as there is a non-empty sourceUrlArr value.
+                                                        setIsEditing(true);
+                                                    } }), _jsx(Button, { variant: "outlined", onClick: () => {
+                                                        setIsEditing(false);
+                                                    }, children: "Visualize" })] }), _jsxs(Accordion, { disableGutters: true, style: { marginTop: '5px' }, children: [_jsx(AccordionSummary, { expandIcon: _jsx(ExpandMore, {}), "aria-controls": "panel1-content", id: "panel1-header", children: "Specifying file extensions" }), _jsx(AccordionDetails, { children: _jsxs(Typography, { variant: "body2", children: ["Vitessce automatically tries to infer the file type based on the file extension. For URLs with non-standard extensions, the file type can be specified by appending ", _jsxs("code", { children: [_jsx("b", { children: "$" }), "FILE_TYPE"] }), " to the URL. For example, to specify that a folder at ", _jsx("code", { children: "https://example.com/my_data.zarr" }), " is in SpatialData format, use the URL ", _jsxs("code", { children: ["https://example.com/my_data.zarr", _jsx("b", { children: "$" }), "spatialdata.zarr"] }), ". See our ", _jsx("a", { href: "https://vitessce.io/docs/data-types-file-types/", children: "data types and file types documentation" }), " for a list of supported file types."] }) })] })] }) })] })] }), _jsxs("div", { className: classes.launcherRow, children: [_jsxs("div", { className: clsx({ [classes.cardDim]: spotlightCard && (spotlightCard === 'data-local' || spotlightCard === 'data-remote') }), children: [_jsx(Typography, { variant: "h5", children: "Begin with configuration" }), _jsxs("p", { children: ["Use the options below to supply a Vitessce ", _jsx("a", { href: "https://vitessce.io/docs/view-config-json/", children: "configuration in JSON format." })] })] }), _jsxs("div", { className: classes.launcherCardRow, children: [_jsx(Card, { className: clsx(classes.launcherCard, { [classes.cardDim]: spotlightCard && spotlightCard !== 'config-local' }), children: _jsx("span", { className: classes.cardDashed, children: _jsxs(CardContent, { className: classes.cardContent, children: [_jsxs(Typography, { variant: "h6", children: ["Local config file ", _jsx("br", {}), " (Drag and drop)"] }), _jsx("p", { children: "View a configured Vitessce visualization by selecting or dropping a local JSON file." }), _jsx("div", { className: classes.buttonSpacer }), _jsxs(Button, { component: "label", variant: "outlined", fullWidth: true, children: [_jsx("span", { children: "Select file" }), _jsx("input", { type: "file", ref: localConfigInputRef, className: classes.hiddenFileInput, accept: ".json,application/json" })] }), _jsx("div", { className: classes.buttonSpacer })] }) }) }), _jsx(Card, { className: clsx(classes.launcherCard, { [classes.cardDim]: spotlightCard && spotlightCard !== 'config-remote' }), children: _jsxs(CardContent, { children: [_jsxs(Typography, { variant: "h6", children: ["Remote config file ", _jsx("br", {}), " (Load from URL)"] }), _jsxs("p", { children: ["View a configured Vitessce visualization by specifying a URL to a JSON config file. See our ", _jsx("a", { href: "https://vitessce.io/docs/data-hosting/", children: "data hosting" }), " documentation for assistance in making your config file accessible to Vitessce.\u00A0"] }), _jsxs("div", { className: classes.textareaAndButton, children: [_jsx(TextField, { multiline: true, label: "Config URL", placeholder: "Enter a URL", minRows: 2, className: classes.dataUrlTextarea, value: configUrl || '', onChange: (e) => {
+                                                        // Clear existing state.
+                                                        setSourceUrlArr(undefined);
+                                                        setConfigUrl(e.target.value);
+                                                    }, onBlur: () => setSpotlightCard(null), onFocus: () => {
+                                                        setSpotlightCard('config-remote');
+                                                        // We need to set isEditing, otherwise the launcher UI will disappear
+                                                        // as soon as there is a non-empty configUrl value.
+                                                        setIsEditing(true);
+                                                    } }), _jsx(Button, { variant: "outlined", onClick: () => {
+                                                        setIsEditing(false);
+                                                    }, children: "Visualize" })] })] }) })] })] })] }));
+}

package/dist-tsc/UncontrolledLauncher.d.ts

@@ -0,0 +1,14 @@
+/**
+ *
+ * @param {object} props
+ * @param {number} [props.marginTop=0] The distance in pixels from the top of the window.
+ * This is used to calculate the height of the Vitessce component (100vh minus marginTop).
+ * @param {function} [props.setIsFooterVisible] Callback to set whether the footer is visible.
+ * Used to hide the footer when Vitessce component is visible.
+ * @returns
+ */
+export function UncontrolledLauncher(props: {
+    marginTop?: number | undefined;
+    setIsFooterVisible?: Function | undefined;
+}): JSX.Element;
+//# sourceMappingURL=UncontrolledLauncher.d.ts.map

package/dist-tsc/UncontrolledLauncher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UncontrolledLauncher.d.ts","sourceRoot":"","sources":["../src/UncontrolledLauncher.js"],"names":[],"mappings":"AAmEA;;;;;;;;GAQG;AACH,4CANG;IAAuB,SAAS;IAEP,kBAAkB;CAE3C,eAmCF"}

package/dist-tsc/UncontrolledLauncher.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable no-unused-vars */
+/* eslint-disable max-len */
+import React, { useEffect, useState } from 'react';
+import { QueryParamProvider } from 'use-query-params';
+import { useHashOrQueryParam } from './use-query-or-hash-param.js';
+import { ControlledLauncher } from './ControlledLauncher.js';
+function UncontrolledLauncherInner(props) {
+    const { marginTop = 0, setIsFooterVisible, configUrlParamName = 'config', sourceUrlParamName = 'source', exampleIdParamName = 'example', isEditingParamName = 'edit', } = props;
+    const [launcherError, setLauncherError] = useState(null);
+    // Logic for managing state and query/hash params.
+    const [exampleId, setExampleId, exampleIdParamError] = useHashOrQueryParam(exampleIdParamName, undefined, 'string');
+    // TODO: support vitessce-link code param
+    // const wsCodeValue = useHashOrQueryParam('session', undefined, 'string');
+    const [configUrl, setConfigUrl, configUrlParamError] = useHashOrQueryParam(configUrlParamName, undefined, 'string');
+    const [sourceUrlArr, setSourceUrlArr, sourceUrlArrParamError] = useHashOrQueryParam(sourceUrlParamName, undefined, 'string-array');
+    const [isEditingParam, setIsEditing, isEditingParamError] = useHashOrQueryParam(isEditingParamName, undefined, 'boolean');
+    // We need this here since the URL param will not indicate whether local data was dropped.
+    // TODO: Store in a cookie/localStorage? Store in a URL param?
+    // However if the page changes, we will lose the dropped data anyway...
+    const [isUsingLocalFiles, setIsUsingLocalFiles] = useState(false);
+    // Check for parameter errors (e.g., both hash+query for same value) and conflicting parameters.
+    const hasNoParamError = !exampleIdParamError && !configUrlParamError && !sourceUrlArrParamError && !isEditingParamError;
+    const hasNoConflictingParams = ((exampleId ? 1 : 0)
+        + (configUrl ? 1 : 0)
+        + (sourceUrlArr && sourceUrlArr.length > 0 ? 1 : 0)) <= 1;
+    const needsStart = !exampleId && !configUrl && (!sourceUrlArr || (Array.isArray(sourceUrlArr) && sourceUrlArr.length === 0));
+    const isEditing = !isUsingLocalFiles && (isEditingParam === true || needsStart);
+    useEffect(() => {
+        if (typeof setIsFooterVisible === 'function') {
+            setIsFooterVisible(isEditing);
+        }
+    }, [isEditing, setIsFooterVisible]);
+    return (_jsx(ControlledLauncher, { isEditing: isEditing, setIsEditing: setIsEditing, isUsingLocalFiles: isUsingLocalFiles, setIsUsingLocalFiles: setIsUsingLocalFiles, configUrl: configUrl, setConfigUrl: setConfigUrl, sourceUrlArr: sourceUrlArr, setSourceUrlArr: setSourceUrlArr, marginTop: marginTop, launcherError: launcherError, setLauncherError: setLauncherError }));
+}
+/**
+ *
+ * @param {object} props
+ * @param {number} [props.marginTop=0] The distance in pixels from the top of the window.
+ * This is used to calculate the height of the Vitessce component (100vh minus marginTop).
+ * @param {function} [props.setIsFooterVisible] Callback to set whether the footer is visible.
+ * Used to hide the footer when Vitessce component is visible.
+ * @returns
+ */
+export function UncontrolledLauncher(props) {
+    const { marginTop = 0, setIsFooterVisible = null, configUrlParamName = 'config', sourceUrlParamName = 'source', exampleIdParamName = 'example', isEditingParamName = 'edit', 
+    // TODO: Optional mapping from example IDs to their full JSON config, and potentially more values such as PageComponent, Plugins, etc.
+    // See https://github.com/vitessce/vitessce/blob/main/sites/demo/src/api.js
+    exampleConfigs = null, } = props;
+    // TODO: wrap in MUI themeProvider?
+    return (_jsxs(QueryParamProvider, { children: [_jsxs("div", { style: { display: 'none' }, children: [_jsx("a", { href: "/", children: "Reset" }), "\u00A0", _jsx("a", { href: "/?source=https://storage.googleapis.com/vitessce-demo-data/maynard-2021/151673.sdata.zarr", children: "SpatialData Example" }), "\u00A0", _jsx("a", { href: "/#?source=https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0062A/6001240.zarr$image.ome-zarr", children: "OME-Zarr Example" })] }), _jsx(UncontrolledLauncherInner, { marginTop: marginTop, setIsFooterVisible: setIsFooterVisible, isEditingParamName: isEditingParamName, exampleIdParamName: exampleIdParamName, configUrlParamName: configUrlParamName, sourceUrlParamName: sourceUrlParamName })] }));
+}

package/dist-tsc/index.d.ts

@@ -0,0 +1,3 @@
+export { UncontrolledLauncher } from "./UncontrolledLauncher.js";
+export { ControlledLauncher } from "./ControlledLauncher.js";
+//# sourceMappingURL=index.d.ts.map

package/dist-tsc/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.js"],"names":[],"mappings":""}

package/dist-tsc/index.js

@@ -0,0 +1,2 @@
+export { UncontrolledLauncher } from './UncontrolledLauncher.js';
+export { ControlledLauncher } from './ControlledLauncher.js';

package/dist-tsc/launcher-styles.d.ts

@@ -0,0 +1,10 @@
+export const useStyles: (params: void, muiStyleOverridesParams?: {
+    props: Record<string, unknown>;
+    ownerState?: Record<string, unknown> | undefined;
+} | undefined) => {
+    classes: Record<"launcher" | "launcherRow" | "launcherRowTitle" | "launcherCardRow" | "launcherCard" | "cardTitle" | "cardDashed" | "cardDim" | "cardContent" | "buttonSpacer" | "dataButtonGroup" | "vitessceApp" | "dataUrlTextarea" | "textareaAndButton" | "hiddenFileInput", string>;
+    theme: import("@mui/material").Theme;
+    css: import("tss-react").Css;
+    cx: import("tss-react").Cx;
+};
+//# sourceMappingURL=launcher-styles.d.ts.map

package/dist-tsc/launcher-styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"launcher-styles.d.ts","sourceRoot":"","sources":["../src/launcher-styles.js"],"names":[],"mappings":"AAGA;;cAmCG,CAAC;;;kBAMF,eACC;gBAEG,WAAU;eACC,WACT;EAqBJ"}

package/dist-tsc/launcher-styles.js

@@ -0,0 +1,69 @@
+import { makeStyles } from '@vitessce/styles';
+export const useStyles = makeStyles()(() => ({
+    launcher: {
+        display: 'flex',
+        flexDirection: 'column',
+        margin: '0 10px',
+    },
+    launcherRow: {
+        marginTop: '15px',
+        marginBottom: '15px',
+    },
+    launcherRowTitle: {
+        marginBottom: 0,
+    },
+    launcherCardRow: {
+        display: 'grid',
+        gridTemplateColumns: '1fr 1fr',
+        gap: '10px',
+    },
+    launcherCard: {
+        transition: 'opacity 0.3s',
+    },
+    cardTitle: {
+        marginTop: 0,
+    },
+    cardDashed: {
+        display: 'inline-block',
+        boxSizing: 'border-box',
+        height: '100%',
+        width: '100%',
+        borderRadius: '4px',
+        border: '2px dashed rgba(128, 128, 128, 0.2)',
+    },
+    cardDim: {
+        opacity: 0.2,
+    },
+    cardContent: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        boxSizing: 'border-box',
+    },
+    buttonSpacer: {
+        flexGrow: 1,
+    },
+    dataButtonGroup: {
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '5px',
+    },
+    vitessceApp: {
+        position: 'relative',
+        display: 'flex',
+        width: '100%',
+    },
+    dataUrlTextarea: {
+        width: '100%',
+        boxSizing: 'border-box',
+    },
+    textareaAndButton: {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '5px',
+    },
+    hiddenFileInput: {
+        display: 'none',
+    },
+}));

package/dist-tsc/use-hash-param.d.ts

@@ -0,0 +1,3 @@
+export function useHashParam(key: any, defaultValue: any, varType: any): any[];
+export function useSetHashParams(): (values: any, location?: Location) => void;
+//# sourceMappingURL=use-hash-param.d.ts.map

package/dist-tsc/use-hash-param.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-hash-param.d.ts","sourceRoot":"","sources":["../src/use-hash-param.js"],"names":[],"mappings":"AAyEO,+EAmCN;AAEM,+EAaN"}

package/dist-tsc/use-hash-param.js

@@ -0,0 +1,110 @@
+/* eslint-disable no-param-reassign */
+// Adapted from https://github.com/hejmsdz/use-hash-param/blob/3fd6818/src/index.js
+import { useState, useEffect, useCallback } from 'react';
+const getHashSearchParams = (location) => {
+    const hash = location.hash.slice(1);
+    const [prefix, query] = hash.split('?');
+    return [prefix, new URLSearchParams(query)];
+};
+const getHashParam = (key, location = window.location) => {
+    // eslint-disable-next-line no-unused-vars
+    const [_, searchParams] = getHashSearchParams(location);
+    return searchParams.get(key);
+};
+const getAllHashParams = (key, location = window.location) => {
+    // eslint-disable-next-line no-unused-vars
+    const [_, searchParams] = getHashSearchParams(location);
+    return searchParams.getAll(key);
+};
+const getTypedHashParam = (key, varType) => {
+    if (varType === 'string-array') {
+        return getAllHashParams(key);
+    }
+    const val = getHashParam(key);
+    let typedVal = val;
+    if (varType === 'boolean') {
+        try {
+            typedVal = JSON.parse(val);
+        }
+        catch (e) {
+            typedVal = false;
+        }
+    }
+    return typedVal;
+};
+const setHashParam = (key, value, location = window.location) => {
+    const [prefix, searchParams] = getHashSearchParams(location);
+    if (typeof value === 'undefined' || value === '') {
+        searchParams.delete(key);
+    }
+    else {
+        searchParams.set(key, value);
+    }
+    const search = searchParams.toString();
+    location.hash = search ? `${prefix}?${search}` : prefix;
+};
+// There is no "pushState" or "replaceState" event on the
+// window, only a "popstate" event. We can add our own
+// pushState and replaceState events by wrapping the
+// methods of the window.history object and dispatching
+// as custom events.
+// Reference: https://stackoverflow.com/a/25673911
+const wrapHistoryMethod = (methodName) => {
+    const orig = window.history[methodName];
+    window.history.wrapped = true;
+    // eslint-disable-next-line func-names
+    return function () {
+        // eslint-disable-next-line prefer-rest-params
+        const rv = orig.apply(this, arguments);
+        const e = new Event(methodName);
+        // eslint-disable-next-line prefer-rest-params
+        e.arguments = arguments;
+        window.dispatchEvent(e);
+        return rv;
+    };
+};
+export const useHashParam = (key, defaultValue, varType) => {
+    const [innerValue, setInnerValue] = useState(getTypedHashParam(key, varType));
+    useEffect(() => {
+        let unmounted = false;
+        if (window.history && !window.history.wrapped) {
+            window.history.pushState = wrapHistoryMethod('pushState');
+        }
+        const handleHashChange = () => {
+            if (unmounted) {
+                return;
+            }
+            const nextValue = getTypedHashParam(key, varType);
+            setInnerValue(nextValue);
+        };
+        window.addEventListener('hashchange', handleHashChange);
+        window.addEventListener('pushState', handleHashChange);
+        return () => {
+            unmounted = true;
+            window.removeEventListener('hashchange', handleHashChange);
+            window.removeEventListener('pushState', handleHashChange);
+        };
+    }, [key, varType]);
+    const setValue = useCallback((value) => {
+        if (typeof value === 'function') {
+            setHashParam(key, value(getHashParam(key)));
+        }
+        else {
+            setHashParam(key, value);
+        }
+    }, [key]);
+    return [innerValue === undefined ? defaultValue : innerValue, setValue];
+};
+export const useSetHashParams = () => (values, location = window.location) => {
+    const [prefix, searchParams] = getHashSearchParams(location);
+    Object.entries(values).forEach(([key, value]) => {
+        if (typeof value === 'undefined' || value === '') {
+            searchParams.delete(key);
+        }
+        else {
+            searchParams.set(key, value);
+        }
+    });
+    const search = searchParams.toString();
+    location.hash = search ? `${prefix}?${search}` : prefix;
+};

package/dist-tsc/use-query-or-hash-param.d.ts

@@ -0,0 +1,2 @@
+export function useHashOrQueryParam(paramName: any, defaultValue: any, dtype: any): any[];
+//# sourceMappingURL=use-query-or-hash-param.d.ts.map

package/dist-tsc/use-query-or-hash-param.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-query-or-hash-param.d.ts","sourceRoot":"","sources":["../src/use-query-or-hash-param.js"],"names":[],"mappings":"AAuDA,0FAOC"}

package/dist-tsc/use-query-or-hash-param.js

@@ -0,0 +1,51 @@
+import { useQueryParam, StringParam as StringQueryParam, ArrayParam as StringArrayQueryParam, } from 'use-query-params';
+import { useHashParam } from './use-hash-param.js';
+const DtypeToParamType = {
+    string: StringQueryParam,
+    'string-array': StringArrayQueryParam,
+    // Use string param for boolean since use-query-params only supports 0/1.
+    boolean: StringQueryParam,
+};
+function isTruthyString(v) {
+    return ['1', 'true'].includes(String(v).toLowerCase());
+}
+function useHashOrQueryParamAux(paramName, defaultValue, dtype) {
+    const [valueQ, setValueQ] = useQueryParam(paramName, DtypeToParamType[dtype]);
+    const [valueH, setValueH] = useHashParam(paramName, undefined, dtype);
+    if (dtype === 'boolean') {
+        const boolValueQ = valueQ !== undefined ? isTruthyString(valueQ) : undefined;
+        const boolValueH = valueH !== undefined ? isTruthyString(valueH) : undefined;
+        return valueQ ? [boolValueQ, setValueQ] : [boolValueH, setValueH];
+    }
+    if (dtype === 'string-array') {
+        // eslint-disable-next-line max-len
+        if (Array.isArray(valueH) && valueH.length > 0 && (!Array.isArray(valueQ) || valueQ.length === 0)) {
+            // Check for ; delimiter in individual array values, and split if necessary.
+            const splitValues = valueH.map(item => item.split(';')).flat();
+            return [splitValues, setValueH];
+            // eslint-disable-next-line max-len
+        }
+        if (Array.isArray(valueQ) && valueQ.length > 0 && (!Array.isArray(valueH) || valueH.length === 0)) {
+            // Check for ; delimiter in individual array values, and split if necessary.
+            const splitValues = valueQ.map(item => item.split(';')).flat();
+            return [splitValues, setValueQ];
+        }
+        return [null, setValueH];
+    }
+    if (Array.isArray(valueQ) || Array.isArray(valueH)) {
+        throw new Error(`Expected non-array values for "${paramName}".`);
+    }
+    if (valueQ && valueH) {
+        throw new Error(`Both query and hash parameters provided for "${paramName}". Please provide only one.`);
+    }
+    return valueQ ? [valueQ, setValueQ] : [valueH, setValueH];
+}
+export function useHashOrQueryParam(paramName, defaultValue, dtype) {
+    const [value, setValue] = useHashOrQueryParamAux(paramName, defaultValue, dtype);
+    try {
+        return [value, setValue, false];
+    }
+    catch (error) {
+        return [value, setValue, error.message];
+    }
+}