@vitessce/launcher 3.8.6

package/src/UncontrolledLauncher.js

@@ -0,0 +1,110 @@
+/* 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 (
+    <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 (
+    <QueryParamProvider>
+      <div style={{ display: 'none' }}>
+        {/* TEMP: links for quick testing */}
+        <a href="/">Reset</a>&nbsp;
+        <a href="/?source=https://storage.googleapis.com/vitessce-demo-data/maynard-2021/151673.sdata.zarr">SpatialData Example</a>&nbsp;
+        <a href="/#?source=https://uk1s3.embassy.ebi.ac.uk/idr/zarr/v0.4/idr0062A/6001240.zarr$image.ome-zarr">OME-Zarr Example</a>
+      </div>
+      <UncontrolledLauncherInner
+        marginTop={marginTop}
+        setIsFooterVisible={setIsFooterVisible}
+
+        isEditingParamName={isEditingParamName}
+        exampleIdParamName={exampleIdParamName}
+        configUrlParamName={configUrlParamName}
+        sourceUrlParamName={sourceUrlParamName}
+      />
+    </QueryParamProvider>
+  );
+}

package/src/index.js

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

package/src/launcher-styles.js

@@ -0,0 +1,71 @@
+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/src/use-hash-param.js

@@ -0,0 +1,124 @@
+/* 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/src/use-query-or-hash-param.js

@@ -0,0 +1,63 @@
+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];
+  }
+}