@jbrowse/core 4.0.3 → 4.1.0

package/esm/BaseFeatureWidget/BaseFeatureDetail/ArrayValue.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import Attributes from "./Attributes.js";
 import BasicValue from "./BasicValue.js";
 import FieldName from "./FieldName.js";
 import { isObject } from "../../util/index.js";
 import { makeStyles } from "../../util/tss-react/index.js";
+const MAX_ARRAY_LENGTH = 100;
 const useStyles = makeStyles()(theme => ({
     field: {
         display: 'flex',
@@ -20,6 +22,9 @@ const useStyles = makeStyles()(theme => ({
 }));
 export default function ArrayValue({ name, value, description, formatter, prefix = [], }) {
     const { classes } = useStyles();
+    const [showAll, setShowAll] = useState(false);
+    const needsTruncation = value.length > MAX_ARRAY_LENGTH;
+    const displayedValues = needsTruncation && !showAll ? value.slice(0, MAX_ARRAY_LENGTH) : value;
     if (value.length === 1) {
         return isObject(value[0]) ? (_jsx(Attributes, { formatter: formatter, attributes: value[0], prefix: [...prefix, name] })) : (_jsxs("div", { className: classes.field, children: [_jsx(FieldName, { prefix: prefix, description: description, name: name }), _jsx(BasicValue, { value: formatter ? formatter(value[0], name) : value[0] })] }));
     }
@@ -27,6 +32,10 @@ export default function ArrayValue({ name, value, description, formatter, prefix
         return (_jsx(_Fragment, { children: value.map((val, i) => (_jsx(Attributes, { formatter: formatter, attributes: val, prefix: [...prefix, `${name}-${i}`] }, `${JSON.stringify(val)}-${i}`))) }));
     }
     else {
-        return (_jsxs("div", { className: classes.field, children: [_jsx(FieldName, { prefix: prefix, description: description, name: name }), value.map((val, i) => (_jsx("div", { className: classes.fieldSubvalue, children: _jsx(BasicValue, { value: formatter ? formatter(val, name) : val }) }, `${JSON.stringify(val)}-${i}`)))] }));
+        return (_jsxs("div", { className: classes.field, children: [_jsx(FieldName, { prefix: prefix, description: description, name: name }), displayedValues.map((val, i) => (_jsx("div", { className: classes.fieldSubvalue, children: _jsx(BasicValue, { value: formatter ? formatter(val, name) : val }) }, `${JSON.stringify(val)}-${i}`))), needsTruncation ? (_jsx("button", { type: "button", onClick: () => {
+                        setShowAll(val => !val);
+                    }, children: showAll
+                        ? 'Show less'
+                        : `Showing ${MAX_ARRAY_LENGTH} of ${value.length}. Show all...` })) : null] }));
     }
 }

package/esm/PluginLoader.js

@@ -1,4 +1,3 @@
-import domLoadScript from 'load-script';
 import Plugin from "./Plugin.js";
 import ReExports from "./ReExports/index.js";
 import { isElectron } from "./util/index.js";
@@ -14,14 +13,17 @@ export function isESMPluginDefinition(def) {
 }
 function promisifiedLoadScript(src) {
     return new Promise((resolve, reject) => {
-        domLoadScript(src, (err, script) => {
-            if (err) {
-                reject(err);
-            }
-            else {
-                resolve(script.src);
-            }
-        });
+        const script = document.createElement('script');
+        script.type = 'text/javascript';
+        script.async = true;
+        script.src = src;
+        script.onload = () => {
+            resolve(script.src);
+        };
+        script.onerror = () => {
+            reject(new Error(`Failed to load script: ${src}`));
+        };
+        document.head.append(script);
     });
 }
 async function loadScript(scriptUrl) {

package/esm/pluggableElementTypes/RpcMethodType.d.ts

@@ -2,6 +2,7 @@ import PluggableElementBase from './PluggableElementBase.ts';
 import type PluginManager from '../PluginManager.ts';
 import type { UriLocation } from '../util/types/index.ts';
 export type RpcMethodConstructor = new (pm: PluginManager) => RpcMethodType;
+export declare function convertFileHandleLocations(obj: unknown, blobMap: Record<string, File>, seen?: WeakSet<object>): void;
 export default abstract class RpcMethodType extends PluggableElementBase {
     pluginManager: PluginManager;
     constructor(pluginManager: PluginManager);

package/esm/pluggableElementTypes/RpcMethodType.js

@@ -1,8 +1,50 @@
 import PluggableElementBase from "./PluggableElementBase.js";
 import mapObject from "../util/map-obj/index.js";
 import { isRpcResult } from "../util/rpc.js";
-import { getBlobMap, setBlobMap } from "../util/tracks.js";
-import { RetryError, isAppRootModel, isAuthNeededException, isUriLocation, } from "../util/types/index.js";
+import { getBlobMap, getFileFromCache, setBlobMap } from "../util/tracks.js";
+import { RetryError, isAppRootModel, isAuthNeededException, isFileHandleLocation, isUriLocation, } from "../util/types/index.js";
+export function convertFileHandleLocations(obj, blobMap, seen = new WeakSet()) {
+    const convertLocation = (loc) => {
+        const file = getFileFromCache(loc.handleId);
+        if (!file) {
+            throw new Error(`File not in cache for handleId: ${loc.handleId}. ` +
+                `The file "${loc.name}" may need to be reopened.`);
+        }
+        const blobId = `fh-blob-${loc.handleId}`;
+        blobMap[blobId] = file;
+        return { locationType: 'BlobLocation', name: loc.name, blobId };
+    };
+    const convert = (current) => {
+        if (!current || typeof current !== 'object' || seen.has(current)) {
+            return;
+        }
+        seen.add(current);
+        if (Array.isArray(current)) {
+            for (let i = 0; i < current.length; i++) {
+                const item = current[i];
+                if (isFileHandleLocation(item)) {
+                    current[i] = convertLocation(item);
+                }
+                else {
+                    convert(item);
+                }
+            }
+        }
+        else {
+            const record = current;
+            for (const key of Object.keys(record)) {
+                const val = record[key];
+                if (isFileHandleLocation(val)) {
+                    record[key] = convertLocation(val);
+                }
+                else {
+                    convert(val);
+                }
+            }
+        }
+    };
+    convert(obj);
+}
 export default class RpcMethodType extends PluggableElementBase {
     pluginManager;
     constructor(pluginManager) {
@@ -62,11 +104,10 @@ export default class RpcMethodType extends PluggableElementBase {
     }
     async augmentLocationObjects(thing, rpcDriverClassName) {
         const rootModel = this.pluginManager.rootModel;
-        if (isAppRootModel(rootModel) && rootModel.internetAccounts.length === 0) {
-            return thing;
-        }
         const uris = [];
+        const blobMap = getBlobMap();
         const { renderingProps, ...rest } = thing;
+        convertFileHandleLocations(rest, blobMap);
         mapObject(rest, (key, val) => {
             if (isUriLocation(val)) {
                 uris.push(val);
@@ -80,6 +121,9 @@ export default class RpcMethodType extends PluggableElementBase {
             }
             return [key, val];
         }, { deep: true });
+        if (isAppRootModel(rootModel) && rootModel.internetAccounts.length === 0) {
+            return thing;
+        }
         for (const uri of uris) {
             await this.serializeNewAuthArguments(uri, rpcDriverClassName);
         }

package/esm/pluggableElementTypes/RpcMethodTypeWithFiltersAndRenameRegions.js

@@ -9,6 +9,7 @@ export default class RpcMethodTypeWithFiltersAndRenameRegions extends RpcMethodT
             filters: args.filters
                 ? new SerializableFilterChain({
                     filters: args.filters,
+                    jexl: this.pluginManager.jexl,
                 })
                 : undefined,
         };

package/esm/pluggableElementTypes/models/BaseDisplayModel.d.ts

@@ -52,6 +52,7 @@ export declare const BaseDisplay: import("@jbrowse/mobx-state-tree").IModelType<
     }> | null;
     readonly adapterConfig: any;
     readonly parentTrack: import("../../util/index.ts").AbstractTrackModel;
+    readonly isMinimized: boolean;
     readonly parentDisplay: any;
     readonly effectiveRpcDriverName: any;
 } & {
@@ -108,6 +109,7 @@ export declare const BaseDisplay: import("@jbrowse/mobx-state-tree").IModelType<
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: import("../../util/index.ts").AbstractTrackModel;
+            readonly isMinimized: boolean;
             readonly parentDisplay: any;
             readonly effectiveRpcDriverName: any;
         } & import("@jbrowse/mobx-state-tree").IStateTreeNode<import("@jbrowse/mobx-state-tree").IModelType<{
@@ -161,6 +163,7 @@ export declare const BaseDisplay: import("@jbrowse/mobx-state-tree").IModelType<
             }> | null;
             readonly adapterConfig: any;
             readonly parentTrack: import("../../util/index.ts").AbstractTrackModel;
+            readonly isMinimized: boolean;
             readonly parentDisplay: any;
             readonly effectiveRpcDriverName: any;
         }, import("@jbrowse/mobx-state-tree")._NotCustomized, import("@jbrowse/mobx-state-tree")._NotCustomized>>;

package/esm/pluggableElementTypes/models/BaseDisplayModel.js

@@ -30,6 +30,9 @@ function stateModelFactory() {
         get parentTrack() {
             return getContainingTrack(self);
         },
+        get isMinimized() {
+            return this.parentTrack.minimized;
+        },
         get parentDisplay() {
             try {
                 const parent = getParent(self);
@@ -62,7 +65,7 @@ function stateModelFactory() {
         renderProps() {
             return {
                 ...getParentRenderProps(self),
-                notReady: getContainingView(self).minimized,
+                notReady: self.isMinimized || getContainingView(self).minimized,
                 rpcDriverName: self.effectiveRpcDriverName,
             };
         },

package/esm/pluggableElementTypes/models/saveTrackFileTypes/bed.js

@@ -1,9 +1,12 @@
 export function stringifyBED({ features }) {
+    if (features.length === 0) {
+        return '';
+    }
     const fields = ['refName', 'start', 'end', 'name', 'score', 'strand'];
-    return features
+    return `${features
         .map(feature => fields
         .map(field => feature.get(field) ?? '.')
         .join('\t')
         .trim())
-        .join('\n');
+        .join('\n')}\n`;
 }

package/esm/pluggableElementTypes/models/saveTrackFileTypes/genbank.js

@@ -2,6 +2,7 @@ import { fetchSequence } from "./fetchSequence.js";
 import { max, min } from "../../../util/index.js";
 const coreFields = new Set([
     'uniqueId',
+    'id',
     'refName',
     'source',
     'type',
@@ -14,31 +15,42 @@ const coreFields = new Set([
     'subfeatures',
     'phase',
 ]);
+const TYPE_COLUMN_WIDTH = 16;
 const blank = '                     ';
 const retitle = {
     name: 'Name',
 };
 function fmt(obj) {
+    if (obj === null || obj === undefined) {
+        return undefined;
+    }
     if (Array.isArray(obj)) {
-        return obj.map(o => fmt(o)).join(',');
+        const items = obj.map(o => fmt(o)).filter(o => o !== undefined);
+        return items.length > 0 ? items.join(',') : undefined;
     }
-    else if (typeof obj === 'object') {
+    if (typeof obj === 'object') {
         return JSON.stringify(obj);
     }
-    else {
-        return `${obj}`;
-    }
+    return `${obj}`;
 }
 function formatTags(f, parentId, parentType) {
-    return [
-        parentId && parentType ? `${blank}/${parentType}="${parentId}"` : '',
-        f.get('id') ? `${blank}/name=${f.get('id')}` : '',
-        ...Object.keys(f.toJSON())
-            .filter(tag => !coreFields.has(tag))
-            .map(tag => [tag, fmt(f.get(tag))])
-            .filter(tag => !!tag[1] && tag[0] !== parentType)
-            .map(tag => `${blank}/${retitle[tag[0]] || tag[0]}="${tag[1]}"`),
-    ].filter(f => !!f);
+    const tags = [];
+    if (parentId && parentType) {
+        tags.push(`${blank}/${parentType}="${parentId}"`);
+    }
+    const id = f.get('id');
+    if (id) {
+        tags.push(`${blank}/name="${id}"`);
+    }
+    for (const key of Object.keys(f.toJSON())) {
+        if (!coreFields.has(key) && key !== parentType) {
+            const value = fmt(f.get(key));
+            if (value) {
+                tags.push(`${blank}/${retitle[key] || key}="${value}"`);
+            }
+        }
+    }
+    return tags;
 }
 function relativeStart(f, min) {
     return f.get('start') - min + 1;
@@ -50,36 +62,56 @@ function loc(f, min) {
     return `${relativeStart(f, min)}..${relativeEnd(f, min)}`;
 }
 function formatFeat(f, min, parentType, parentId) {
-    const type = `${f.get('type')}`.slice(0, 16);
+    const type = `${f.get('type')}`.slice(0, TYPE_COLUMN_WIDTH);
     const l = loc(f, min);
     const locstrand = f.get('strand') === -1 ? `complement(${l})` : l;
     return [
-        `     ${type.padEnd(16)}${locstrand}`,
+        `     ${type.padEnd(TYPE_COLUMN_WIDTH)}${locstrand}`,
         ...formatTags(f, parentType, parentId),
     ];
 }
 function formatCDS(feats, parentId, parentType, strand, min) {
-    const cds = feats.map(f => loc(f, min));
-    const pre = `join(${cds})`;
-    const str = strand === -1 ? `complement(${pre})` : pre;
-    return feats.length
-        ? [`     ${'CDS'.padEnd(16)}${str}`, `${blank}/${parentType}="${parentId}"`]
-        : [];
+    if (feats.length === 0) {
+        return [];
+    }
+    const locs = feats.map(f => loc(f, min));
+    const locExpr = locs.length === 1 ? locs[0] : `join(${locs.join(',')})`;
+    const strandExpr = strand === -1 ? `complement(${locExpr})` : locExpr;
+    return [
+        `     ${'CDS'.padEnd(TYPE_COLUMN_WIDTH)}${strandExpr}`,
+        `${blank}/${parentType}="${parentId}"`,
+    ];
 }
 export function formatFeatWithSubfeatures(feature, min, parentId, parentType) {
     const primary = formatFeat(feature, min, parentId, parentType);
     const subfeatures = feature.get('subfeatures') || [];
-    const cds = subfeatures.filter(f => f.get('type') === 'CDS');
+    const cds = subfeatures
+        .filter(f => f.get('type') === 'CDS')
+        .sort((a, b) => a.get('start') - b.get('start'));
     const sansCDS = subfeatures.filter(f => f.get('type') !== 'CDS' && f.get('type') !== 'exon');
     const newParentId = feature.get('id');
     const newParentType = feature.get('type');
     const newParentStrand = feature.get('strand');
+    const cdsLines = cds.length > 0 && newParentId && newParentType
+        ? formatCDS(cds, newParentId, newParentType, newParentStrand, min)
+        : [];
     return [
         ...primary,
-        ...formatCDS(cds, newParentId, newParentType, newParentStrand, min),
+        ...cdsLines,
         ...sansCDS.flatMap(sub => formatFeatWithSubfeatures(sub, min, newParentId, newParentType)),
     ].join('\n');
 }
+function formatOrigin(sequence) {
+    const lines = ['ORIGIN'];
+    for (let i = 0; i < sequence.length; i += 60) {
+        const pos = String(i + 1).padStart(9);
+        const chunk = sequence.slice(i, i + 60).toLowerCase();
+        const groups = chunk.match(/.{1,10}/g) || [];
+        lines.push(`${pos} ${groups.join(' ')}`);
+    }
+    lines.push('//');
+    return lines;
+}
 export async function stringifyGBK({ features, assemblyName, session, }) {
     if (!features.length) {
         return '';
@@ -103,6 +135,5 @@ export async function stringifyGBK({ features, assemblyName, session, }) {
         region: { assemblyName, start, end, refName },
     })) ?? '';
     const lines = features.map(feat => formatFeatWithSubfeatures(feat, start));
-    const seqlines = ['ORIGIN', `\t1 ${contig}`, '//'];
-    return [l1, l2, ...lines, ...seqlines].join('\n');
+    return `${[l1, l2, ...lines, ...formatOrigin(contig)].join('\n')}\n`;
 }

package/esm/pluggableElementTypes/models/saveTrackFileTypes/gff3.js

@@ -1,5 +1,6 @@
 const coreFields = new Set([
     'uniqueId',
+    'id',
     'refName',
     'source',
     'type',
@@ -14,10 +15,8 @@ const coreFields = new Set([
     '_lineHash',
 ]);
 const retitle = {
-    id: 'ID',
     name: 'Name',
     alias: 'Alias',
-    parent: 'Parent',
     target: 'Target',
     gap: 'Gap',
     derives_from: 'Derives_from',
@@ -27,31 +26,51 @@ const retitle = {
     ontology_term: 'Ontology_term',
     is_circular: 'Is_circular',
 };
+function encodeGFF3Value(str) {
+    return str
+        .replace(/%/g, '%25')
+        .replace(/;/g, '%3B')
+        .replace(/=/g, '%3D')
+        .replace(/&/g, '%26')
+        .replace(/,/g, '%2C')
+        .replace(/\t/g, '%09')
+        .replace(/\n/g, '%0A')
+        .replace(/\r/g, '%0D');
+}
 function fmt(obj) {
-    if (Array.isArray(obj)) {
-        return obj.map(o => fmt(o)).join(',');
+    if (obj === null || obj === undefined) {
+        return undefined;
     }
-    else if (typeof obj === 'object' && obj !== null) {
-        return JSON.stringify(obj);
+    if (Array.isArray(obj)) {
+        const items = obj.map(o => fmt(o)).filter(o => o !== undefined);
+        return items.length > 0 ? items.join(',') : undefined;
     }
-    else {
-        return String(obj);
+    if (typeof obj === 'object') {
+        return encodeGFF3Value(JSON.stringify(obj));
     }
+    return encodeGFF3Value(String(obj));
 }
 function formatAttributes(f, parentId) {
     const attributes = [];
+    const id = f.get('id');
+    if (id) {
+        attributes.push(`ID=${encodeGFF3Value(String(id))}`);
+    }
     if (parentId) {
-        attributes.push(`Parent=${parentId}`);
+        attributes.push(`Parent=${encodeGFF3Value(String(parentId))}`);
     }
     const tags = Object.keys(f.toJSON()).filter(tag => !coreFields.has(tag));
+    const hasDescription = tags.includes('description');
+    const hasNote = tags.includes('note');
     for (const tag of tags) {
         const val = f.get(tag);
-        if (val !== undefined && val !== null) {
-            const formattedVal = fmt(val);
-            if (formattedVal) {
-                const key = retitle[tag] || tag;
-                attributes.push(`${key}=${formattedVal}`);
+        const formattedVal = fmt(val);
+        if (formattedVal) {
+            let key = retitle[tag] || tag;
+            if (tag === 'note' && hasDescription && hasNote) {
+                key = 'note2';
             }
+            attributes.push(`${key}=${formattedVal}`);
         }
     }
     return attributes.join(';');
@@ -84,8 +103,8 @@ export function formatMultiLevelFeat(feature, parentId, parentRef) {
     ].join('\n');
 }
 export function stringifyGFF3({ features }) {
-    return [
+    return `${[
         '##gff-version 3',
         ...features.map(f => formatMultiLevelFeat(f)),
-    ].join('\n');
+    ].join('\n')}\n`;
 }

package/esm/pluggableElementTypes/renderers/LayoutSession.js

@@ -21,9 +21,12 @@ export class LayoutSession {
         });
     }
     cachedLayoutIsValid(cachedLayout) {
-        return (cachedLayout.props.bpPerPx === this.props.bpPerPx &&
-            deepEqual(readConfObject(this.props.config), readConfObject(cachedLayout.props.config)) &&
-            deepEqual(this.props.filters, cachedLayout.props.filters));
+        const bpPerPxMatch = cachedLayout.props.bpPerPx === this.props.bpPerPx;
+        const currentConfig = readConfObject(this.props.config);
+        const cachedConfig = readConfObject(cachedLayout.props.config);
+        const configMatch = deepEqual(currentConfig, cachedConfig);
+        const filtersMatch = deepEqual(this.props.filters, cachedLayout.props.filters);
+        return bpPerPxMatch && configMatch && filtersMatch;
     }
     get layout() {
         if (!this.cachedLayout || !this.cachedLayoutIsValid(this.cachedLayout)) {

package/esm/pluggableElementTypes/renderers/ServerSideRendererType.js

@@ -73,7 +73,10 @@ export default class ServerSideRenderer extends RendererType {
                 pluginManager: this.pluginManager,
             }),
             filters: args.filters
-                ? new SerializableFilterChain({ filters: args.filters })
+                ? new SerializableFilterChain({
+                    filters: args.filters,
+                    jexl: this.pluginManager.jexl,
+                })
                 : undefined,
         };
     }

package/esm/pluggableElementTypes/renderers/util/serializableFilterChain.d.ts

@@ -6,8 +6,9 @@ interface Filter {
 export type SerializedFilterChain = string[];
 export default class SerializableFilterChain {
     filterChain: Filter[];
-    constructor({ filters }: {
+    constructor({ filters, jexl, }: {
         filters: SerializedFilterChain;
+        jexl?: unknown;
     });
     passes(...args: any[]): boolean;
     toJSON(): {

package/esm/pluggableElementTypes/renderers/util/serializableFilterChain.js

@@ -1,13 +1,13 @@
 import { stringToJexlExpression } from "../../../util/jexlStrings.js";
 export default class SerializableFilterChain {
     filterChain;
-    constructor({ filters }) {
+    constructor({ filters, jexl, }) {
         this.filterChain = filters
             .map(f => f.trim())
             .filter(f => !!f)
             .map(inputFilter => {
             if (typeof inputFilter === 'string') {
-                const expr = stringToJexlExpression(inputFilter);
+                const expr = stringToJexlExpression(inputFilter, jexl);
                 return { expr, string: inputFilter };
             }
             throw new Error(`invalid inputFilter string "${inputFilter}"`);

package/esm/rpc/methods/CoreRender.js

@@ -1,6 +1,7 @@
 import { validateRendererType } from "./util.js";
-import RpcMethodType from "../../pluggableElementTypes/RpcMethodType.js";
+import RpcMethodType, { convertFileHandleLocations, } from "../../pluggableElementTypes/RpcMethodType.js";
 import { renameRegionsIfNeeded } from "../../util/index.js";
+import { getBlobMap, setBlobMap } from "../../util/tracks.js";
 export default class CoreRender extends RpcMethodType {
     name = 'CoreRender';
     async serializeArguments(args, rpcDriver) {
@@ -18,7 +19,11 @@ export default class CoreRender extends RpcMethodType {
         if (!sessionId) {
             throw new Error('must pass a unique session id');
         }
-        return validateRendererType(rendererType, this.pluginManager.getRendererType(rendererType)).renderDirect(renamedArgs);
+        const { renderingProps, ...rest } = renamedArgs;
+        const blobMap = getBlobMap();
+        convertFileHandleLocations(rest, blobMap);
+        setBlobMap(blobMap);
+        return validateRendererType(rendererType, this.pluginManager.getRendererType(rendererType)).renderDirect({ ...rest, renderingProps });
     }
     async execute(args, rpcDriver) {
         const deserializedArgs = await this.deserializeArguments(args, rpcDriver);

package/esm/ui/CascadingMenu.js

@@ -5,9 +5,16 @@ import { Divider, ListItemIcon, ListItemText, ListSubheader, Menu, MenuItem, } f
 import CascadingMenuHelpIconButton from "./CascadingMenuHelpIconButton.js";
 import HoverMenu from "./HoverMenu.js";
 import { MenuItemEndDecoration } from "./MenuItems.js";
+function labelToTestId(label) {
+    if (typeof label === 'string') {
+        return label.toLowerCase().replace(/\s+/g, '_');
+    }
+    return undefined;
+}
 function CascadingSubmenu({ title, Icon, inset, menuItems, onMenuItemClick, closeAfterItemClick, onCloseRoot, isOpen, onOpen, onClose, }) {
     const [anchorEl, setAnchorEl] = useState(null);
-    return (_jsxs(_Fragment, { children: [_jsxs(MenuItem, { ref: setAnchorEl, onMouseOver: onOpen, onFocus: onOpen, onClick: onOpen, children: [Icon ? (_jsx(ListItemIcon, { children: _jsx(Icon, {}) })) : null, _jsx(ListItemText, { primary: title, inset: inset }), _jsx(ChevronRight, {})] }), _jsx(HoverMenu, { open: isOpen, anchorEl: anchorEl, onClose: onClose, anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, children: _jsx(CascadingMenuList, { closeAfterItemClick: closeAfterItemClick, onMenuItemClick: onMenuItemClick, menuItems: menuItems, onCloseRoot: onCloseRoot }) })] }));
+    const testId = labelToTestId(title);
+    return (_jsxs(_Fragment, { children: [_jsxs(MenuItem, { ref: setAnchorEl, "data-testid": testId ? `cascading-submenu-${testId}` : undefined, onMouseOver: onOpen, onFocus: onOpen, onClick: onOpen, children: [Icon ? (_jsx(ListItemIcon, { children: _jsx(Icon, {}) })) : null, _jsx(ListItemText, { primary: title, inset: inset }), _jsx(ChevronRight, {})] }), _jsx(HoverMenu, { open: isOpen, anchorEl: anchorEl, onClose: onClose, anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, children: _jsx(CascadingMenuList, { closeAfterItemClick: closeAfterItemClick, onMenuItemClick: onMenuItemClick, menuItems: menuItems, onCloseRoot: onCloseRoot }) })] }));
 }
 function CascadingMenuList({ onMenuItemClick, closeAfterItemClick, menuItems, onCloseRoot, }) {
     const [openSubmenuIdx, setOpenSubmenuIdx] = useState();
@@ -34,7 +41,8 @@ function CascadingMenuList({ onMenuItemClick, closeAfterItemClick, menuItems, on
             const actionItem = item;
             const helpText = actionItem.helpText;
             const isCheckOrRadio = actionItem.type === 'checkbox' || actionItem.type === 'radio';
-            return (_jsxs(MenuItem, { disabled: Boolean(actionItem.disabled), onClick: event => {
+            const itemTestId = labelToTestId(actionItem.label);
+            return (_jsxs(MenuItem, { "data-testid": itemTestId ? `cascading-menuitem-${itemTestId}` : undefined, disabled: Boolean(actionItem.disabled), onClick: event => {
                     if (closeAfterItemClick) {
                         onCloseRoot();
                     }

package/esm/ui/FileSelector/FileSelector.d.ts

@@ -6,6 +6,5 @@ declare const FileSelector: ({ inline, location, name, description, rootModel, s
     inline?: boolean;
     rootModel?: AbstractRootModel;
     setLocation: (param: FileLocation) => void;
-    setName?: (str: string) => void;
 }) => import("react/jsx-runtime").JSX.Element;
 export default FileSelector;

package/esm/ui/FileSelector/FileSelector.js

@@ -5,48 +5,36 @@ import { observer } from 'mobx-react';
 import LocationInput from "./LocationInput.js";
 import SourceTypeSelector from "./SourceTypeSelector.js";
 import useInternetAccounts from "./useInternetAccounts.js";
+import { addAccountToLocation, getInitialSourceType } from "./util.js";
 import { notEmpty } from "../../util/index.js";
 import { isUriLocation } from "../../util/types/index.js";
-function getInitialToggleValue(location) {
-    if (location &&
-        'internetAccountId' in location &&
-        location.internetAccountId) {
-        return location.internetAccountId;
-    }
-    return !location || isUriLocation(location) ? 'url' : 'file';
-}
 const FileSelector = observer(function FileSelector({ inline, location, name, description, rootModel, setLocation, }) {
-    const [toggleButtonValue, setToggleButtonValue] = useState(() => getInitialToggleValue(location));
+    const [sourceType, setSourceType] = useState(() => getInitialSourceType(location));
     const { accountMap, shownAccountIds, hiddenAccountIds, recentlyUsed, setRecentlyUsed, } = useInternetAccounts(rootModel);
-    const selectedAccount = accountMap[toggleButtonValue];
-    const setLocationWithAccount = useCallback((loc) => {
-        setLocation({
-            ...loc,
-            ...(selectedAccount && isUriLocation(loc)
-                ? { internetAccountId: selectedAccount.internetAccountId }
-                : {}),
-        });
+    const selectedAccount = accountMap[sourceType];
+    const handleLocationChange = useCallback((loc) => {
+        setLocation(addAccountToLocation(loc, selectedAccount));
     }, [setLocation, selectedAccount]);
     useEffect(() => {
         if (selectedAccount &&
             isUriLocation(location) &&
             location.internetAccountId !== selectedAccount.internetAccountId) {
-            setLocationWithAccount(location);
+            handleLocationChange(location);
         }
-    }, [location, selectedAccount, setLocationWithAccount]);
-    const selectSourceType = useCallback((newValue) => {
-        setRecentlyUsed([
-            ...new Set([newValue, ...recentlyUsed].filter(notEmpty)),
-        ]);
+    }, [location, selectedAccount, handleLocationChange]);
+    const handleSourceTypeChange = useCallback((newValue) => {
         if (newValue) {
-            setToggleButtonValue(newValue);
+            setRecentlyUsed([
+                ...new Set([newValue, ...recentlyUsed].filter(notEmpty)),
+            ]);
+            setSourceType(newValue);
+            if (isUriLocation(location)) {
+                handleLocationChange(location);
+            }
         }
-        if (isUriLocation(location)) {
-            setLocationWithAccount(location);
-        }
-    }, [location, recentlyUsed, setRecentlyUsed, setLocationWithAccount]);
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { display: "flex", children: _jsx(InputLabel, { shrink: true, children: name }) }), _jsx(FormGroup, { children: _jsxs(Box, { display: "flex", flexDirection: inline ? 'row' : 'column', gap: 0.5, children: [_jsx(SourceTypeSelector, { value: toggleButtonValue, shownAccountIds: shownAccountIds, hiddenAccountIds: hiddenAccountIds, accountMap: accountMap, onChange: (_event, newValue) => {
-                                selectSourceType(newValue);
-                            }, onHiddenAccountSelect: selectSourceType }), _jsx(LocationInput, { toggleButtonValue: toggleButtonValue, selectedAccount: selectedAccount, location: location, inline: inline, setLocation: setLocationWithAccount })] }) }), _jsx(FormHelperText, { children: description })] }));
+    }, [location, recentlyUsed, setRecentlyUsed, handleLocationChange]);
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { display: "flex", children: _jsx(InputLabel, { shrink: true, children: name }) }), _jsx(FormGroup, { children: _jsxs(Box, { display: "flex", flexDirection: inline ? 'row' : 'column', gap: 0.5, children: [_jsx(SourceTypeSelector, { value: sourceType, shownAccountIds: shownAccountIds, hiddenAccountIds: hiddenAccountIds, accountMap: accountMap, onChange: (_event, newValue) => {
+                                handleSourceTypeChange(newValue);
+                            }, onHiddenAccountSelect: handleSourceTypeChange }), _jsx(LocationInput, { toggleButtonValue: sourceType, selectedAccount: selectedAccount, location: location, inline: inline, setLocation: handleLocationChange })] }) }), _jsx(FormHelperText, { children: description })] }));
 });
 export default FileSelector;