@jbrowse/core 2.4.0 → 2.4.2

package/ui/App.js

@@ -103,7 +103,7 @@ const App = (0, mobx_react_1.observer)(function (props) {
                 react_1.default.createElement(material_1.AppBar, { className: classes.appBar, position: "static" },
                     react_1.default.createElement(AppToolbar_1.default, { ...props }))),
             react_1.default.createElement("div", { className: classes.components },
-                views.length ? (views.map(view => (react_1.default.createElement(ViewPanel_1.default, { key: `view-${view.id}`, view: view, session: session })))) : (react_1.default.createElement(ViewLauncher_1.default, { ...props })),
+                views.length > 0 ? (views.map(view => (react_1.default.createElement(ViewPanel_1.default, { key: `view-${view.id}`, view: view, session: session })))) : (react_1.default.createElement(ViewLauncher_1.default, { ...props })),
                 react_1.default.createElement("div", { style: { height: 300 } }))),
         activeWidgets.size > 0 && minimized ? (react_1.default.createElement(material_1.Tooltip, { title: "Open drawer widget" },
             react_1.default.createElement(material_1.Fab, { className: drawerPosition === 'right' ? classes.fabRight : classes.fabLeft, color: "primary", "data-testid": "drawer-maximize", onClick: () => session.showWidgetDrawer() },

package/ui/AppLogo.js

@@ -12,11 +12,6 @@ const Logo_1 = require("./Logo");
 const Logo = (0, mobx_react_1.observer)(function ({ session, }) {
     const { configuration } = session;
     const logoPath = (0, configuration_1.readConfObject)(configuration, 'logoPath');
-    if (!(logoPath === null || logoPath === void 0 ? void 0 : logoPath.uri)) {
-        return react_1.default.createElement(Logo_1.LogoFull, { variant: "white" });
-    }
-    else {
-        return react_1.default.createElement("img", { src: logoPath.uri, alt: "Custom logo" });
-    }
+    return (logoPath === null || logoPath === void 0 ? void 0 : logoPath.uri) ? (react_1.default.createElement("img", { src: logoPath.uri, alt: "Custom logo" })) : (react_1.default.createElement(Logo_1.LogoFull, { variant: "white" }));
 });
 exports.default = Logo;

package/ui/ColorPicker.js

@@ -90,7 +90,7 @@ function ColorPicker({ onChange, color, }) {
                     const pal = event.target.value;
                     setVal(pal);
                 } }, palettes.map(p => (react_1.default.createElement(material_1.MenuItem, { value: p, key: p }, p)))),
-            react_1.default.createElement("div", { className: classes.swatches }, presetColors.map((presetColor, idx) => (react_1.default.createElement("button", { key: presetColor + '-' + idx, className: classes.swatch, style: { background: presetColor }, onClick: () => handleChange(presetColor) })))),
+            react_1.default.createElement("div", { className: classes.swatches }, presetColors.map((presetColor, idx) => (react_1.default.createElement("button", { key: `${presetColor}-${idx}`, className: classes.swatch, style: { background: presetColor }, onClick: () => handleChange(presetColor) })))),
             react_1.default.createElement(material_1.TextField, { helperText: 'Manually set color (hex, rgb, or css color name)', value: text, onChange: event => handleChange(event.target.value) }))));
 }
 exports.ColorPicker = ColorPicker;

package/ui/Dialog.js

@@ -32,7 +32,7 @@ function JBrowseDialog(props) {
             react_1.default.createElement(material_1.DialogTitle, null,
                 title,
                 onClose ? (react_1.default.createElement(material_1.IconButton, { className: classes.closeButton, onClick: () => {
-                        // @ts-ignore
+                        // @ts-expect-error
                         onClose();
                     } },
                     react_1.default.createElement(Close_1.default, null))) : null),

package/ui/DrawerWidget.js

@@ -77,13 +77,13 @@ const DrawerHeader = (0, mobx_react_1.observer)(({ session, setToolbarHeight, })
                         return HeadingComponent ? (react_1.default.createElement(HeadingComponent, { model: widget })) : (react_1.default.createElement(material_1.Typography, { variant: "h6", color: "inherit" }, heading));
                     }, onChange: e => {
                         const w = session.activeWidgets.get(e.target.value);
-                        if (!w) {
-                            session.notify(`Widget not found ${e.target.value}`, 'warning');
+                        if (w) {
+                            session.showWidget(w);
                         }
                         else {
-                            session.showWidget(w);
+                            session.notify(`Widget not found ${e.target.value}`, 'warning');
                         }
-                    } }, Array.from(activeWidgets.values()).map(widget => {
+                    } }, [...activeWidgets.values()].map(widget => {
                     const widgetType = pluginManager.getWidgetType(widget.type);
                     const { HeadingComponent, heading } = widgetType;
                     return (react_1.default.createElement(material_1.MenuItem, { "data-testid": `widget-drawer-selects-item-${widget.type}`, key: widget.id, value: widget.id },

package/ui/EditableTypography.js

@@ -59,7 +59,7 @@ const EditableTypography = react_1.default.forwardRef((props, ref) => {
     }, [blur, inputNode]);
     // possibly tss-react does not understand the passing of props to
     // useStyles, but it appears to work
-    // @ts-ignore
+    // @ts-expect-error
     const { classes } = useStyles(props, { props });
     const theme = (0, material_1.useTheme)();
     const clientWidth = sizerNode === null || sizerNode === void 0 ? void 0 : sizerNode.clientWidth;

package/ui/FileSelector/FileSelector.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { FileLocation, AbstractRootModel } from '../../util/types';
-declare const FileSelector: (props: {
+declare const _default: (props: {
     location?: FileLocation | undefined;
     setLocation: (param: FileLocation) => void;
     setName?: ((str: string) => void) | undefined;
@@ -8,4 +8,4 @@ declare const FileSelector: (props: {
     description?: string | undefined;
     rootModel?: AbstractRootModel | undefined;
 }) => JSX.Element;
-export default FileSelector;
+export default _default;

package/ui/FileSelector/FileSelector.js

@@ -42,46 +42,45 @@ function ToggleButtonWithTooltip(props) {
 }
 function shorten(str, len) {
     if (typeof str === 'string' && str.length > len) {
-        return `${str.substring(0, len)}…`;
+        return `${str.slice(0, Math.max(0, len))}…`;
     }
     return str;
 }
-const FileSelector = (0, mobx_react_1.observer)((props) => {
+exports.default = (0, mobx_react_1.observer)(function (props) {
     const { location, name, description, rootModel, setLocation } = props;
     const fileOrUrl = !location || (0, types_1.isUriLocation)(location) ? 'url' : 'file';
     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.slice()
-        : [];
+    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 [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
-    const selectedAcct = accts.find(ia => ia.internetAccountId === toggleButtonValue);
-    const setLocationWithAccount = (location) => {
+    const selectedAcct = accts.find(i => i.internetAccountId === toggleButtonValue);
+    const setLocationWithAcct = (0, react_1.useCallback)((location) => {
         setLocation({
             ...location,
-            internetAccountId: selectedAcct
-                ? selectedAcct.internetAccountId
-                : undefined,
+            ...((0, types_1.isUriLocation)(location)
+                ? { internetAccountId: selectedAcct === null || selectedAcct === void 0 ? void 0 : selectedAcct.internetAccountId }
+                : {}),
         });
-    };
-    // if you swap account selection after inputting url
-    if (location &&
-        selectedAcct &&
-        (0, types_1.isUriLocation)(location) &&
-        location.internetAccountId !== selectedAcct.internetAccountId) {
-        setLocationWithAccount(location);
-    }
-    let locationInput = (react_1.default.createElement(UrlChooser_1.default, { ...props, setLocation: setLocationWithAccount, label: selectedAcct === null || selectedAcct === void 0 ? void 0 : selectedAcct.selectorLabel }));
+    }, [setLocation, selectedAcct]);
+    (0, react_1.useEffect)(() => {
+        // if you swap account selection after inputting url
+        if (selectedAcct &&
+            (0, types_1.isUriLocation)(location) &&
+            location.internetAccountId !== selectedAcct.internetAccountId) {
+            setLocationWithAcct(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 }));
     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: setLocationWithAccount }));
+        locationInput = (react_1.default.createElement(SelectorComponent, { ...props, setLocation: setLocationWithAcct }));
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.Box, { display: "flex" },
@@ -93,7 +92,7 @@ const FileSelector = (0, mobx_react_1.observer)((props) => {
                             setToggleButtonValue(newState);
                         }
                         if ((0, types_1.isUriLocation)(location)) {
-                            setLocationWithAccount(location);
+                            setLocationWithAcct(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")),
@@ -101,23 +100,14 @@ const FileSelector = (0, mobx_react_1.observer)((props) => {
                     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 ? (
-                    // @ts-ignore
+                    hiddenAccts.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: () => {
+                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[shownAccts.length - 1];
-                        setShownAccts([
-                            ...shownAccts.slice(0, shownAccts.length - 1),
-                            acct,
-                        ]);
+                        setShownAccts([...shownAccts.slice(0, -1), acct]);
                         setHiddenAccts([
                             prev,
                             ...hiddenAccts.slice(0, idx),
@@ -129,4 +119,3 @@ const FileSelector = (0, mobx_react_1.observer)((props) => {
         locationInput,
         react_1.default.createElement(material_1.FormHelperText, null, description)));
 });
-exports.default = FileSelector;

package/ui/FileSelector/index.d.ts

@@ -1,2 +1 @@
-import FileSelector from './FileSelector';
-export default FileSelector;
+export { default } from './FileSelector';

package/ui/FileSelector/index.js

@@ -3,5 +3,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const FileSelector_1 = __importDefault(require("./FileSelector"));
-exports.default = FileSelector_1.default;
+exports.default = void 0;
+var FileSelector_1 = require("./FileSelector");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(FileSelector_1).default; } });

package/ui/LoadingEllipses.js

@@ -16,16 +16,16 @@ const useStyles = (0, mui_1.makeStyles)()({
             textAlign: 'left',
             animation: `${(0, tss_react_1.keyframes) `
       0% {
-        content: '...';
+        content: '';
       }
       25% {
-          content: '';
+          content: '.';
       }
       50% {
-        content: '.';
+        content: '..';
       }
       75% {
-        content: '..';
+        content: '...';
       }
       `} 1.2s infinite ease-in-out`,
         },

package/ui/Menu.js

@@ -69,26 +69,32 @@ function MenuItemEndDecoration(props) {
         ({ checked, disabled } = props);
     }
     let icon;
-    if (type === 'subMenu') {
-        icon = react_1.default.createElement(ArrowRight_1.default, { color: "action" });
-    }
-    else if (type === 'checkbox') {
-        if (checked) {
-            const color = disabled ? 'inherit' : undefined;
-            icon = react_1.default.createElement(CheckBox_1.default, { color: color });
-        }
-        else {
-            icon = react_1.default.createElement(CheckBoxOutlineBlank_1.default, { color: "action" });
+    switch (type) {
+        case 'subMenu': {
+            icon = react_1.default.createElement(ArrowRight_1.default, { color: "action" });
+            break;
         }
-    }
-    else if (type === 'radio') {
-        if (checked) {
-            const color = disabled ? 'inherit' : undefined;
-            icon = react_1.default.createElement(RadioButtonChecked_1.default, { color: color });
+        case 'checkbox': {
+            if (checked) {
+                const color = disabled ? 'inherit' : undefined;
+                icon = react_1.default.createElement(CheckBox_1.default, { color: color });
+            }
+            else {
+                icon = react_1.default.createElement(CheckBoxOutlineBlank_1.default, { color: "action" });
+            }
+            break;
         }
-        else {
-            icon = react_1.default.createElement(RadioButtonUnchecked_1.default, { color: "action" });
+        case 'radio': {
+            if (checked) {
+                const color = disabled ? 'inherit' : undefined;
+                icon = react_1.default.createElement(RadioButtonChecked_1.default, { color: color });
+            }
+            else {
+                icon = react_1.default.createElement(RadioButtonUnchecked_1.default, { color: "action" });
+            }
+            break;
         }
+        // No default
     }
     return react_1.default.createElement("div", { className: classes.menuItemEndDecoration }, icon);
 }
@@ -208,21 +214,28 @@ const MenuPage = react_1.default.forwardRef((props, ref) => {
                         setOpenSubMenuIdx(undefined);
                     }
                 }, onKeyDown: e => {
-                    if (e.key === 'ArrowLeft' || e.key === 'Escape') {
-                        onClose && onClose(e, 'escapeKeyDown');
-                    }
-                    else if (e.key === 'ArrowUp') {
-                        setSelectedMenuItemIdx(findPreviousValidIdx(menuItems, idx));
-                    }
-                    else if (e.key === 'ArrowDown') {
-                        const a = findNextValidIdx(menuItems, idx);
-                        setSelectedMenuItemIdx(a);
-                    }
-                    else if ('subMenu' in menuItem) {
-                        if (e.key === 'ArrowRight' || e.key === 'Enter') {
-                            setSubMenuAnchorEl(e.currentTarget);
-                            setOpenSubMenuIdx(idx);
-                            setIsSubMenuOpen(true);
+                    switch (e.key) {
+                        case 'ArrowLeft':
+                        case 'Escape': {
+                            onClose && onClose(e, 'escapeKeyDown');
+                            break;
+                        }
+                        case 'ArrowUp': {
+                            setSelectedMenuItemIdx(findPreviousValidIdx(menuItems, idx));
+                            break;
+                        }
+                        case 'ArrowDown': {
+                            const a = findNextValidIdx(menuItems, idx);
+                            setSelectedMenuItemIdx(a);
+                            break;
+                        }
+                        default: {
+                            if ('subMenu' in menuItem &&
+                                (e.key === 'ArrowRight' || e.key === 'Enter')) {
+                                setSubMenuAnchorEl(e.currentTarget);
+                                setOpenSubMenuIdx(idx);
+                                setIsSubMenuOpen(true);
+                            }
                         }
                     }
                 }, disabled: Boolean(menuItem.disabled) },

package/ui/ResizeBar.js

@@ -82,7 +82,12 @@ function Tick({ left, scrollLeft, idx, onDrag, }) {
 function ResizeBar({ widths, setWidths, checkbox, scrollLeft = 0, }) {
     const { classes } = useStyles();
     const offsets = [];
-    widths.reduce((a, b, i) => (offsets[i] = a + b), checkbox ? 52 : 0);
+    let init = checkbox ? 52 : 0;
+    for (let i = 0; i < widths.length; i++) {
+        const width = widths[i];
+        offsets[i] = width + init;
+        init += width;
+    }
     const onDrag = (0, react_1.useCallback)((distance, idx) => {
         const newWidths = [...widths];
         // mui doesn't allow columns smaller than 50

package/ui/ResizeHandle.js

@@ -72,12 +72,9 @@ function ResizeHandle({ onDrag, vertical = false, flexbox = false, className: or
     }, [mouseDragging, onDrag, vertical]);
     let className;
     if (flexbox) {
-        if (vertical) {
-            className = classes.flexbox_verticalHandle;
-        }
-        else {
-            className = classes.flexbox_horizontalHandle;
-        }
+        className = vertical
+            ? classes.flexbox_verticalHandle
+            : classes.flexbox_horizontalHandle;
     }
     else if (vertical) {
         className = classes.verticalHandle;

package/ui/ViewContainer.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 import { IBaseViewModel } from '../pluggableElementTypes/models';
-declare const ViewContainer: ({ view, onClose, onMinimize, style, children, }: {
+declare const _default: ({ view, onClose, onMinimize, children, }: {
     view: IBaseViewModel;
     onClose: () => void;
     onMinimize: () => void;
-    style?: React.CSSProperties | undefined;
     children: React.ReactNode;
 }) => JSX.Element;
-export default ViewContainer;
+export default _default;

package/ui/ViewContainer.js

@@ -30,19 +30,19 @@ const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
 const mobx_react_1 = require("mobx-react");
-const mobx_state_tree_1 = require("mobx-state-tree");
-const react_use_measure_1 = __importDefault(require("react-use-measure"));
 // icons
 const Close_1 = __importDefault(require("@mui/icons-material/Close"));
 const Minimize_1 = __importDefault(require("@mui/icons-material/Minimize"));
 const Add_1 = __importDefault(require("@mui/icons-material/Add"));
-const EditableTypography_1 = __importDefault(require("./EditableTypography"));
 const ViewMenu_1 = __importDefault(require("./ViewMenu"));
+const util_1 = require("../util");
+const ViewContainerTitle_1 = __importDefault(require("./ViewContainerTitle"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     viewContainer: {
         overflow: 'hidden',
         background: theme.palette.secondary.main,
         margin: theme.spacing(0.5),
+        padding: `0 ${theme.spacing(1)} ${theme.spacing(1)}`,
     },
     icon: {
         color: theme.palette.secondary.contrastText,
@@ -50,34 +50,11 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
     grow: {
         flexGrow: 1,
     },
-    input: {
-        paddingBottom: 0,
-        paddingTop: 2,
-    },
-    inputBase: {
-        color: theme.palette.secondary.contrastText,
-    },
-    inputRoot: {
-        '&:hover': {
-            backgroundColor: theme.palette.secondary.light,
-        },
-    },
-    inputFocused: {
-        borderColor: theme.palette.primary.main,
-        backgroundColor: theme.palette.secondary.light,
-    },
 }));
-const ViewContainer = (0, mobx_react_1.observer)(function ({ view, onClose, onMinimize, style, children, }) {
-    var _a;
+exports.default = (0, mobx_react_1.observer)(function ({ view, onClose, onMinimize, children, }) {
     const { classes } = useStyles();
     const theme = (0, material_1.useTheme)();
-    const padWidth = theme.spacing(1);
-    const [ref, { width }] = (0, react_use_measure_1.default)();
-    (0, react_1.useEffect)(() => {
-        if (width && (0, mobx_state_tree_1.isAlive)(view)) {
-            view.setWidth(width - parseInt(padWidth, 10) * 2);
-        }
-    }, [padWidth, view, width]);
+    const ref = (0, util_1.useWidthSetter)(view, theme.spacing(1));
     const scrollRef = (0, react_1.useRef)(null);
     // scroll the view into view when first mounted
     // note that this effect will run only once, because of
@@ -86,25 +63,14 @@ const ViewContainer = (0, mobx_react_1.observer)(function ({ view, onClose, onMi
         var _a, _b;
         (_b = (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(_a, { block: 'center' });
     }, []);
-    return (react_1.default.createElement(material_1.Paper, { ref: ref, elevation: 12, className: classes.viewContainer, style: { ...style, padding: `0px ${padWidth} ${padWidth}` } },
+    return (react_1.default.createElement(material_1.Paper, { ref: ref, elevation: 12, className: classes.viewContainer },
         react_1.default.createElement("div", { ref: scrollRef, style: { display: 'flex' } },
             react_1.default.createElement(ViewMenu_1.default, { model: view, IconProps: { className: classes.icon } }),
             react_1.default.createElement("div", { className: classes.grow }),
-            react_1.default.createElement(material_1.Tooltip, { title: "Rename view", arrow: true },
-                react_1.default.createElement(EditableTypography_1.default, { value: (view.displayName ||
-                        (
-                        // @ts-ignore
-                        (_a = view.assemblyNames) === null || _a === void 0 ? void 0 : _a.join(',')) ||
-                        'Untitled view') + (view.minimized ? ' (minimized)' : ''), setValue: val => view.setDisplayName(val), variant: "body2", classes: {
-                        input: classes.input,
-                        inputBase: classes.inputBase,
-                        inputRoot: classes.inputRoot,
-                        inputFocused: classes.inputFocused,
-                    } })),
+            react_1.default.createElement(ViewContainerTitle_1.default, { view: view }),
             react_1.default.createElement("div", { className: classes.grow }),
             react_1.default.createElement(material_1.IconButton, { "data-testid": "minimize_view", onClick: onMinimize }, view.minimized ? (react_1.default.createElement(Add_1.default, { className: classes.icon, fontSize: "small" })) : (react_1.default.createElement(Minimize_1.default, { className: classes.icon, fontSize: "small" }))),
             react_1.default.createElement(material_1.IconButton, { "data-testid": "close_view", onClick: onClose },
                 react_1.default.createElement(Close_1.default, { className: classes.icon, fontSize: "small" }))),
         react_1.default.createElement(material_1.Paper, null, children)));
 });
-exports.default = ViewContainer;

package/ui/ViewContainerTitle.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { IBaseViewModel } from '../pluggableElementTypes';
+declare const _default: ({ view, }: {
+    view: IBaseViewModel;
+}) => JSX.Element;
+export default _default;

package/ui/ViewContainerTitle.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const material_1 = require("@mui/material");
+const mui_1 = require("tss-react/mui");
+const mobx_react_1 = require("mobx-react");
+// locals
+const EditableTypography_1 = __importDefault(require("./EditableTypography"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    input: {
+        paddingBottom: 0,
+        paddingTop: 2,
+    },
+    inputBase: {
+        color: theme.palette.secondary.contrastText,
+    },
+    inputRoot: {
+        '&:hover': {
+            backgroundColor: theme.palette.secondary.light,
+        },
+    },
+    inputFocused: {
+        borderColor: theme.palette.primary.main,
+        backgroundColor: theme.palette.secondary.light,
+    },
+}));
+exports.default = (0, mobx_react_1.observer)(function ViewContainerTitle({ view, }) {
+    var _a;
+    const { classes } = useStyles();
+    return (react_1.default.createElement(material_1.Tooltip, { title: "Rename view", arrow: true },
+        react_1.default.createElement(EditableTypography_1.default, { value: view.displayName ||
+                // @ts-expect-error
+                `${((_a = view.assemblyNames) === null || _a === void 0 ? void 0 : _a.join(',')) || 'Untitled view'}${view.minimized ? ' (minimized)' : ''}`, setValue: val => view.setDisplayName(val), variant: "body2", classes: {
+                input: classes.input,
+                inputBase: classes.inputBase,
+                inputRoot: classes.inputRoot,
+                inputFocused: classes.inputFocused,
+            } })));
+});

package/ui/theme.js

@@ -25,7 +25,7 @@ function stockTheme() {
             bases: {
                 A: refTheme.palette.augmentColor({ color: colors_1.green }),
                 C: refTheme.palette.augmentColor({ color: colors_1.blue }),
-                G: refTheme.palette.augmentColor({ color: colors_1.amber }),
+                G: refTheme.palette.augmentColor({ color: colors_1.orange }),
                 T: refTheme.palette.augmentColor({ color: colors_1.red }),
             },
         },
@@ -70,7 +70,7 @@ function getDarkStockTheme() {
             bases: {
                 A: refTheme.palette.augmentColor({ color: colors_1.green }),
                 C: refTheme.palette.augmentColor({ color: colors_1.blue }),
-                G: refTheme.palette.augmentColor({ color: colors_1.amber }),
+                G: refTheme.palette.augmentColor({ color: colors_1.orange }),
                 T: refTheme.palette.augmentColor({ color: colors_1.red }),
             },
         },
@@ -103,7 +103,7 @@ function getDarkMinimalTheme() {
             bases: {
                 A: refTheme.palette.augmentColor({ color: colors_1.green }),
                 C: refTheme.palette.augmentColor({ color: colors_1.blue }),
-                G: refTheme.palette.augmentColor({ color: colors_1.amber }),
+                G: refTheme.palette.augmentColor({ color: colors_1.orange }),
                 T: refTheme.palette.augmentColor({ color: colors_1.red }),
             },
         },
@@ -122,7 +122,7 @@ function getMinimalTheme() {
             bases: {
                 A: refTheme.palette.augmentColor({ color: colors_1.green }),
                 C: refTheme.palette.augmentColor({ color: colors_1.blue }),
-                G: refTheme.palette.augmentColor({ color: colors_1.amber }),
+                G: refTheme.palette.augmentColor({ color: colors_1.orange }),
                 T: refTheme.palette.augmentColor({ color: colors_1.red }),
             },
         },
@@ -226,7 +226,7 @@ function createDefaultProps(theme) {
                 },
                 styleOverrides: {
                     secondary: {
-                        // @ts-ignore
+                        // @ts-expect-error
                         backgroundColor: (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.quaternary) === null || _b === void 0 ? void 0 : _b.main,
                     },
                 },
@@ -348,11 +348,11 @@ function createDefaultProps(theme) {
             MuiAccordionSummary: {
                 styleOverrides: {
                     root: {
-                        // @ts-ignore
+                        // @ts-expect-error
                         backgroundColor: (_d = (_c = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _c === void 0 ? void 0 : _c.tertiary) === null || _d === void 0 ? void 0 : _d.main,
                     },
                     content: {
-                        // @ts-ignore
+                        // @ts-expect-error
                         color: (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _e === void 0 ? void 0 : _e.tertiary) === null || _f === void 0 ? void 0 : _f.contrastText,
                     },
                 },