@jbrowse/core 2.9.0 → 2.10.0

package/ui/FileSelector/FileSelector.js

@@ -33,9 +33,10 @@ const material_1 = require("@mui/material");
 const types_1 = require("../../util/types");
 const LocalFileChooser_1 = __importDefault(require("./LocalFileChooser"));
 const UrlChooser_1 = __importDefault(require("./UrlChooser"));
+const util_1 = require("../../util");
 // icons
 const ArrowDropDown_1 = __importDefault(require("@mui/icons-material/ArrowDropDown"));
-const util_1 = require("../../util");
+const NUM_SHOWN = 2;
 function ToggleButtonWithTooltip(props) {
     const { title, children, ...other } = props;
     return (react_1.default.createElement(material_1.Tooltip, { title: title || '' },
@@ -53,35 +54,40 @@ const FileSelector = (0, mobx_react_1.observer)(function (props) {
     const [toggleButtonValue, setToggleButtonValue] = (0, react_1.useState)(location && 'internetAccountId' in location && location.internetAccountId
         ? location.internetAccountId
         : fileOrUrl);
-    const accts = (0, types_1.isAppRootModel)(rootModel) ? [...rootModel.internetAccounts] : [];
-    const numShown = 2;
-    const [shownAccts, setShownAccts] = (0, react_1.useState)(accts.slice(0, numShown));
-    const [hiddenAccts, setHiddenAccts] = (0, react_1.useState)(accts.slice(numShown));
+    const accounts = (0, types_1.isAppRootModel)(rootModel)
+        ? rootModel.internetAccounts.filter(f => f.type !== 'HTTPBasicInternetAccount')
+        : [];
+    const [recentlyUsedInternetAccounts, setRecentlyUsedInternetAccounts] = (0, util_1.useLocalStorage)('fileSelector-recentlyUsedInternetAccounts', []);
+    const map = Object.fromEntries(accounts.map(a => [a.internetAccountId, a]));
+    const arr = [...new Set(accounts.map(s => s.internetAccountId))].sort((a, b) => recentlyUsedInternetAccounts.indexOf(a) -
+        recentlyUsedInternetAccounts.indexOf(b));
+    const shownAccounts = arr.slice(0, NUM_SHOWN);
+    const hiddenAccounts = arr.slice(NUM_SHOWN);
     const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
-    const selectedAcct = accts.find(i => i.internetAccountId === toggleButtonValue);
-    const setLocationWithAcct = (0, react_1.useCallback)((location) => {
+    const selectedAccount = map[toggleButtonValue];
+    const setLocationWithAccount = (0, react_1.useCallback)((location) => {
         setLocation({
             ...location,
             ...((0, types_1.isUriLocation)(location)
-                ? { internetAccountId: selectedAcct === null || selectedAcct === void 0 ? void 0 : selectedAcct.internetAccountId }
+                ? { internetAccountId: selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.internetAccountId }
                 : {}),
         });
-    }, [setLocation, selectedAcct]);
+    }, [setLocation, selectedAccount]);
     (0, react_1.useEffect)(() => {
         // if you swap account selection after inputting url
-        if (selectedAcct &&
+        if (selectedAccount &&
             (0, types_1.isUriLocation)(location) &&
-            location.internetAccountId !== selectedAcct.internetAccountId) {
-            setLocationWithAcct(location);
+            location.internetAccountId !== selectedAccount.internetAccountId) {
+            setLocationWithAccount(location);
         }
-    }, [location, selectedAcct, setLocationWithAcct]);
-    let locationInput = (react_1.default.createElement(UrlChooser_1.default, { ...props, setLocation: setLocationWithAcct, label: selectedAcct === null || selectedAcct === void 0 ? void 0 : selectedAcct.selectorLabel }));
+    }, [location, selectedAccount, setLocationWithAccount]);
+    let locationInput = (react_1.default.createElement(UrlChooser_1.default, { ...props, setLocation: setLocationWithAccount, label: selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.selectorLabel }));
     if (toggleButtonValue === 'file') {
         locationInput = react_1.default.createElement(LocalFileChooser_1.default, { ...props });
     }
-    if (selectedAcct === null || selectedAcct === void 0 ? void 0 : selectedAcct.SelectorComponent) {
-        const { SelectorComponent } = selectedAcct;
-        locationInput = (react_1.default.createElement(SelectorComponent, { ...props, setLocation: setLocationWithAcct }));
+    if (selectedAccount === null || selectedAccount === void 0 ? void 0 : selectedAccount.SelectorComponent) {
+        const { SelectorComponent } = selectedAccount;
+        locationInput = (react_1.default.createElement(SelectorComponent, { ...props, setLocation: setLocationWithAccount }));
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.Box, { display: "flex" },
@@ -89,34 +95,42 @@ const FileSelector = (0, mobx_react_1.observer)(function (props) {
         react_1.default.createElement(material_1.Box, { display: "flex", flexDirection: "row" },
             react_1.default.createElement(material_1.Box, null,
                 react_1.default.createElement(material_1.ToggleButtonGroup, { value: toggleButtonValue, exclusive: true, onChange: (_event, newState) => {
+                        setRecentlyUsedInternetAccounts([
+                            ...new Set([newState, ...recentlyUsedInternetAccounts].filter(util_1.notEmpty)),
+                        ]);
                         if (newState) {
                             setToggleButtonValue(newState);
                         }
                         if ((0, types_1.isUriLocation)(location)) {
-                            setLocationWithAcct(location);
+                            setLocationWithAccount(location);
                         }
                     }, "aria-label": "file, url, or account picker" },
                     new URLSearchParams(window.location.search).get('adminKey') ? null : (react_1.default.createElement(material_1.ToggleButton, { value: "file", "aria-label": "local file" }, "File")),
                     react_1.default.createElement(material_1.ToggleButton, { value: "url", "aria-label": "url" }, "URL"),
-                    shownAccts.map(({ internetAccountId, toggleContents, name }) => (react_1.default.createElement(ToggleButtonWithTooltip, { key: internetAccountId, value: internetAccountId, "aria-label": name, title: name }, typeof toggleContents === 'string'
-                        ? shorten(toggleContents, 5)
-                        : toggleContents || shorten(name, 5)))),
-                    hiddenAccts.length > 0 ? (
+                    shownAccounts.map(id => {
+                        const { internetAccountId, name, toggleContents } = map[id];
+                        return (react_1.default.createElement(ToggleButtonWithTooltip, { key: id, value: internetAccountId, title: name }, typeof toggleContents === 'string'
+                            ? shorten(toggleContents, 5)
+                            : toggleContents || shorten(name, 5)));
+                    }),
+                    hiddenAccounts.length > 0 ? (
                     // @ts-expect-error
                     react_1.default.createElement(material_1.ToggleButton, { onClick: event => setAnchorEl(event.target), selected: false },
                         "More",
                         react_1.default.createElement(ArrowDropDown_1.default, null))) : null),
-                react_1.default.createElement(material_1.Menu, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: () => setAnchorEl(null), anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' } }, hiddenAccts === null || hiddenAccts === void 0 ? void 0 : hiddenAccts.map((acct, idx) => (react_1.default.createElement(material_1.MenuItem, { key: acct.internetAccountId, value: acct.internetAccountId, onClick: () => {
-                        const prev = shownAccts.at(-1);
-                        setShownAccts([...shownAccts.slice(0, -1), acct]);
-                        setHiddenAccts([
-                            prev,
-                            ...hiddenAccts.slice(0, idx),
-                            ...hiddenAccts.slice(idx + 1),
-                        ].filter(util_1.notEmpty));
-                        setToggleButtonValue(acct.internetAccountId);
-                        setAnchorEl(null);
-                    } }, acct.name)))))),
+                react_1.default.createElement(material_1.Menu, { open: Boolean(anchorEl), anchorEl: anchorEl, onClose: () => setAnchorEl(null), anchorOrigin: { vertical: 'bottom', horizontal: 'center' }, transformOrigin: { vertical: 'top', horizontal: 'center' } }, hiddenAccounts === null || hiddenAccounts === void 0 ? void 0 : hiddenAccounts.map(id => {
+                    const { internetAccountId, name } = map[id];
+                    return (react_1.default.createElement(material_1.MenuItem, { key: id, value: internetAccountId, onClick: () => {
+                            setRecentlyUsedInternetAccounts([
+                                ...new Set([
+                                    internetAccountId,
+                                    ...recentlyUsedInternetAccounts,
+                                ].filter(util_1.notEmpty)),
+                            ]);
+                            setToggleButtonValue(internetAccountId);
+                            setAnchorEl(null);
+                        } }, name));
+                })))),
         locationInput,
         react_1.default.createElement(material_1.FormHelperText, null, description)));
 });

package/util/index.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import PluginManager from '../PluginManager';
 import { IAnyStateTreeNode, IStateTreeNode, Instance } from 'mobx-state-tree';
 import { IReactionPublic, IReactionOptions } from 'mobx';
@@ -16,7 +16,7 @@ export * from './offscreenCanvasUtils';
 export declare function useDebounce<T>(value: T, delay: number): T;
 export declare function useWidthSetter(view: {
     setWidth: (arg: number) => void;
-}, padding: string): import("react").RefObject<HTMLDivElement>;
+}, padding: string): React.RefObject<HTMLDivElement>;
 export declare function useDebouncedCallback<T>(callback: (...args: T[]) => void, wait?: number): (...args: T[]) => void;
 /**
  * find the first node in the hierarchy that matches the given predicate
@@ -213,7 +213,7 @@ export declare function renameRegionsIfNeeded<ARGTYPE extends {
     assemblyName?: string;
     regions?: Region[];
     signal?: AbortSignal;
-    adapterConfig: unknown;
+    adapterConfig: Record<string, unknown>;
     sessionId: string;
     statusCallback?: (arg: string) => void;
 }>(assemblyManager: AssemblyManager, args: ARGTYPE): Promise<ARGTYPE & {
@@ -389,6 +389,9 @@ interface BasicFeature {
     refName: string;
 }
 export declare function gatherOverlaps(regions: BasicFeature[]): BasicFeature[];
-export { default as SimpleFeature, type Feature, type SimpleFeatureSerialized, isFeature, } from './simpleFeature';
 export declare function stripAlpha(str: string): string;
+export declare function renderToStaticMarkup(node: React.ReactElement, createRootFn?: (elt: Element | DocumentFragment) => {
+    render: (node: React.ReactElement) => unknown;
+}): string;
+export { default as SimpleFeature, type Feature, type SimpleFeatureSerialized, isFeature, } from './simpleFeature';
 export { blobToDataURL } from './blobToDataURL';

package/util/index.js

@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.toLocale = exports.getBpDisplayStr = exports.isSupportedIndexingAdapter = exports.bytesForRegions = exports.objectHash = exports.hashCode = exports.updateStatus = exports.generateCodonTable = exports.defaultCodonTable = exports.defaultStops = exports.defaultStarts = exports.measureText = exports.rIC = exports.complement = exports.reverse = exports.revcom = exports.isElectron = exports.stringify = exports.shorten = exports.minmax = exports.renameRegionsIfNeeded = exports.renameRegionIfNeeded = exports.makeAbortableReaction = exports.findLast = exports.findLastIndex = exports.iterMap = exports.bpSpanPx = exports.featureSpanPx = exports.cartesianToPolar = exports.polarToCartesian = exports.degToRad = exports.radToDeg = exports.bpToPx = exports.clamp = exports.compareLocStrings = exports.compareLocs = exports.parseLocString = exports.parseLocStringOneBased = exports.assembleLocStringFast = exports.assembleLocString = exports.getContainingDisplay = exports.getContainingTrack = exports.getContainingView = exports.getSession = exports.findParentThatIs = exports.springAnimate = exports.findParentThat = exports.useDebouncedCallback = exports.useWidthSetter = exports.useDebounce = void 0;
-exports.blobToDataURL = exports.stripAlpha = exports.isFeature = exports.SimpleFeature = exports.gatherOverlaps = exports.mergeIntervals = exports.notEmpty = exports.groupBy = exports.avg = exports.sum = exports.min = exports.max = exports.localStorageSetItem = exports.localStorageGetItem = exports.getEnv = exports.measureGridWidth = exports.linkify = exports.coarseStripHTML = exports.getStr = exports.getUriLink = exports.useLocalStorage = exports.getLayoutId = exports.getViewParams = exports.getTickDisplayStr = void 0;
+exports.blobToDataURL = exports.isFeature = exports.SimpleFeature = exports.renderToStaticMarkup = exports.stripAlpha = exports.gatherOverlaps = exports.mergeIntervals = exports.notEmpty = exports.groupBy = exports.avg = exports.sum = exports.min = exports.max = exports.localStorageSetItem = exports.localStorageGetItem = exports.getEnv = exports.measureGridWidth = exports.linkify = exports.coarseStripHTML = exports.getStr = exports.getUriLink = exports.useLocalStorage = exports.getLayoutId = exports.getViewParams = exports.getTickDisplayStr = void 0;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const react_1 = require("react");
 const is_object_1 = __importDefault(require("is-object"));
@@ -30,6 +30,8 @@ const types_2 = require("./types");
 // has to be the full path and not the relative path to get the jest mock
 const useMeasure_1 = __importDefault(require("@jbrowse/core/util/useMeasure"));
 const colord_1 = require("./colord");
+// eslint-disable-next-line react/no-deprecated
+const react_dom_1 = require("react-dom");
 __exportStar(require("./types"), exports);
 __exportStar(require("./aborting"), exports);
 __exportStar(require("./when"), exports);
@@ -1132,13 +1134,27 @@ function gatherOverlaps(regions) {
     return Object.values(memo).flatMap(group => mergeIntervals(group.sort((a, b) => a.start - b.start)));
 }
 exports.gatherOverlaps = gatherOverlaps;
-var simpleFeature_1 = require("./simpleFeature");
-Object.defineProperty(exports, "SimpleFeature", { enumerable: true, get: function () { return __importDefault(simpleFeature_1).default; } });
-Object.defineProperty(exports, "isFeature", { enumerable: true, get: function () { return simpleFeature_1.isFeature; } });
 function stripAlpha(str) {
     const c = (0, colord_1.colord)(str);
     return c.alpha(1).toHex();
 }
 exports.stripAlpha = stripAlpha;
+// https://react.dev/reference/react-dom/server/renderToString#removing-rendertostring-from-the-client-code
+function renderToStaticMarkup(node, createRootFn) {
+    const div = document.createElement('div');
+    (0, react_dom_1.flushSync)(() => {
+        if (createRootFn) {
+            createRootFn(div).render(node);
+        }
+        else {
+            (0, react_dom_1.render)(node, div);
+        }
+    });
+    return div.innerHTML.replace('&gt;', '>').replace('&lt;', '<');
+}
+exports.renderToStaticMarkup = renderToStaticMarkup;
+var simpleFeature_1 = require("./simpleFeature");
+Object.defineProperty(exports, "SimpleFeature", { enumerable: true, get: function () { return __importDefault(simpleFeature_1).default; } });
+Object.defineProperty(exports, "isFeature", { enumerable: true, get: function () { return simpleFeature_1.isFeature; } });
 var blobToDataURL_1 = require("./blobToDataURL");
 Object.defineProperty(exports, "blobToDataURL", { enumerable: true, get: function () { return blobToDataURL_1.blobToDataURL; } });

package/util/io/RemoteFileWithRangeCache.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="node" />
+import { Buffer } from 'buffer';
 import { RemoteFile, PolyfilledResponse } from 'generic-filehandle';
 export interface BinaryRangeResponse {
     headers: Record<string, string>;