@jbrowse/embedded-core 3.7.0 → 4.0.0

package/esm/index.d.ts

@@ -1,2 +1,2 @@
-export { default as ModalWidget } from './ui/ModalWidget';
-export { default as EmbeddedViewContainer } from './ui/EmbeddedViewContainer';
+export { default as ModalWidget } from './ui/ModalWidget.tsx';
+export { default as EmbeddedViewContainer } from './ui/EmbeddedViewContainer.tsx';

package/esm/index.js

@@ -1,2 +1,2 @@
-export { default as ModalWidget } from './ui/ModalWidget';
-export { default as EmbeddedViewContainer } from './ui/EmbeddedViewContainer';
+export { default as ModalWidget } from "./ui/ModalWidget.js";
+export { default as EmbeddedViewContainer } from "./ui/EmbeddedViewContainer.js";

package/esm/ui/EmbeddedViewContainer.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense } from 'react';
 import { getSession, useWidthSetter } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { Paper, ScopedCssBaseline, useTheme } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import ViewTitle from './ViewTitle';
+import ViewTitle from "./ViewTitle.js";
 const useStyles = makeStyles()(theme => ({
     avoidParentStyle: {
         all: 'initial',
@@ -16,14 +16,14 @@ const useStyles = makeStyles()(theme => ({
         padding: `0 ${theme.spacing(1)} ${theme.spacing(1)}`,
     },
 }));
-const ViewContainer = observer(function ({ view, children, }) {
+const ViewContainer = observer(function ViewContainer({ view, children, }) {
     const { classes } = useStyles();
     const session = getSession(view);
     const theme = useTheme();
     const ref = useWidthSetter(view, theme.spacing(1));
     return (_jsxs(Paper, { elevation: 12, ref: ref, className: classes.viewContainer, children: [session.DialogComponent ? (_jsx(Suspense, { fallback: null, children: _jsx(session.DialogComponent, { ...session.DialogProps }) })) : null, _jsx(ViewTitle, { view: view }), _jsx(Paper, { children: children })] }));
 });
-const ViewContainerWrapper = observer(function ({ view, children, }) {
+const ViewContainerWrapper = observer(function ViewContainerWrapper({ view, children, }) {
     const { classes } = useStyles();
     return (_jsx("div", { className: classes.avoidParentStyle, children: _jsx(ScopedCssBaseline, { children: _jsx(ViewContainer, { view: view, children: children }) }) }));
 });

package/esm/ui/ModalWidget.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Suspense } from 'react';
 import { Dialog } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
+import { getEnv } from '@jbrowse/mobx-state-tree';
 import { AppBar, Paper, Toolbar, Typography } from '@mui/material';
 import { observer } from 'mobx-react';
-import { getEnv } from 'mobx-state-tree';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     paper: {
         overflow: 'auto',
     },
 });
-const ModalWidget = observer(function ({ session, }) {
+const ModalWidget = observer(function ModalWidget({ session, }) {
     const { classes } = useStyles();
     const { visibleWidget } = session;
     const { pluginManager } = getEnv(session);

package/esm/ui/VersionAboutDialog.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Dialog, ExternalLink } from '@jbrowse/core/ui';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { DialogContent, Typography } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     content: {
         minWidth: 800,

package/esm/ui/ViewMenu.d.ts

@@ -1,8 +1,8 @@
 import type { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
-import type { IconButtonProps as IconButtonPropsType, SvgIconProps } from '@mui/material';
+import type { IconButtonProps, SvgIconProps } from '@mui/material';
 declare const ViewMenu: ({ model, IconButtonProps, IconProps, }: {
     model: IBaseViewModel;
-    IconButtonProps: IconButtonPropsType;
-    IconProps: SvgIconProps;
+    IconButtonProps?: IconButtonProps;
+    IconProps?: SvgIconProps;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ViewMenu;

package/esm/ui/ViewMenu.js

@@ -1,15 +1,8 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { CascadingMenu } from '@jbrowse/core/ui';
-import { bindPopover, bindTrigger, usePopupState } from '@jbrowse/core/ui/hooks';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CascadingMenuButton } from '@jbrowse/core/ui';
 import MenuIcon from '@mui/icons-material/Menu';
-import { IconButton } from '@mui/material';
 import { observer } from 'mobx-react';
-const ViewMenu = observer(function ({ model, IconButtonProps, IconProps, }) {
-    const popupState = usePopupState({
-        variant: 'popover',
-    });
-    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { ...IconButtonProps, ...bindTrigger(popupState), "data-testid": "view_menu_icon", children: _jsx(MenuIcon, { ...IconProps }) }), _jsx(CascadingMenu, { ...bindPopover(popupState), onMenuItemClick: (_event, callback) => {
-                    callback();
-                }, menuItems: model.menuItems(), popupState: popupState })] }));
+const ViewMenu = observer(function ViewMenu({ model, IconButtonProps, IconProps, }) {
+    return (_jsx(CascadingMenuButton, { menuItems: () => model.menuItems(), "data-testid": "view_menu_icon", ...IconButtonProps, children: _jsx(MenuIcon, { ...IconProps }) }));
 });
 export default ViewMenu;

package/esm/ui/ViewTitle.d.ts

@@ -1,5 +1,5 @@
 import type { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
-declare const ViewTitle: ({ view }: {
+declare const ViewTitle: ({ view, }: {
     view: IBaseViewModel;
 }) => import("react/jsx-runtime").JSX.Element;
 export default ViewTitle;

package/esm/ui/ViewTitle.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Suspense, lazy, useState } from 'react';
 import { Logomark } from '@jbrowse/core/ui';
 import { getSession } from '@jbrowse/core/util';
+import { makeStyles } from '@jbrowse/core/util/tss-react';
 import { IconButton, Typography, alpha } from '@mui/material';
 import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import ViewMenu from './ViewMenu';
-const VersionAboutDialog = lazy(() => import('./VersionAboutDialog'));
+import ViewMenu from "./ViewMenu.js";
+const VersionAboutDialog = lazy(() => import("./VersionAboutDialog.js"));
 const useStyles = makeStyles()(theme => ({
     icon: {
         color: theme.palette.secondary.contrastText,
@@ -30,7 +30,7 @@ const useStyles = makeStyles()(theme => ({
         },
     },
 }));
-const ViewTitle = observer(({ view }) => {
+const ViewTitle = observer(function ViewTitle({ view, }) {
     const { classes } = useStyles();
     const { displayName } = view;
     const [dialogOpen, setDialogOpen] = useState(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/embedded-core",
-  "version": "3.7.0",
+  "version": "4.0.0",
   "description": "JBrowse 2 code shared between embedded products",
   "keywords": [
     "jbrowse",
@@ -18,40 +18,17 @@
     "directory": "packages/embedded-core"
   },
   "author": "JBrowse Team",
-  "distMain": "dist/index.js",
-  "distModule": "esm/index.js",
-  "srcMain": "src/index.ts",
-  "srcModule": "src/index.ts",
-  "main": "dist/index.js",
-  "module": "esm/index.js",
+  "main": "esm/index.js",
   "files": [
-    "dist",
     "esm"
   ],
-  "scripts": {
-    "build:esm": "tsc --build tsconfig.build.esm.json",
-    "build:commonjs": "tsc --build tsconfig.build.commonjs.json",
-    "build": "npm run build:esm && npm run build:commonjs",
-    "test": "cd ../..; jest --passWithNoTests packages/embedded-core",
-    "clean": "rimraf dist esm *.tsbuildinfo",
-    "prebuild": "yarn clean",
-    "prepack": "yarn build && yarn useDist",
-    "postpack": "yarn useSrc",
-    "useDist": "node ../../scripts/useDist.js",
-    "useSrc": "node ../../scripts/useSrc.js"
-  },
   "dependencies": {
-    "@babel/runtime": "^7.16.3",
-    "@jbrowse/core": "^3.7.0",
-    "@jbrowse/product-core": "^3.7.0",
-    "@mui/icons-material": "^7.0.0",
-    "@mui/material": "^7.0.0",
-    "copy-to-clipboard": "^3.3.1",
-    "mobx": "^6.0.0",
-    "mobx-react": "^9.0.0",
-    "mobx-state-tree": "^5.0.0",
-    "rxjs": "^7.0.0",
-    "tss-react": "^4.0.0"
+    "@jbrowse/mobx-state-tree": "^5.5.0",
+    "@mui/icons-material": "^7.3.6",
+    "@mui/material": "^7.3.6",
+    "mobx": "^6.15.0",
+    "mobx-react": "^9.2.1",
+    "@jbrowse/core": "^4.0.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -60,5 +37,19 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "85bdd0d58286b7adbfd408146b15847676317635"
-}
+  "sideEffects": false,
+  "scripts": {
+    "build:esm": "tsc -p tsconfig.build.esm.json",
+    "build": "pnpm build:esm",
+    "test": "cd ../..; jest --passWithNoTests packages/embedded-core",
+    "clean": "rimraf esm *.tsbuildinfo",
+    "prebuild": "pnpm clean"
+  },
+  "types": "esm/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./esm/index.d.ts",
+      "import": "./esm/index.js"
+    }
+  }
+}

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-export { default as ModalWidget } from './ui/ModalWidget';
-export { default as EmbeddedViewContainer } from './ui/EmbeddedViewContainer';

package/dist/index.js

@@ -1,10 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EmbeddedViewContainer = exports.ModalWidget = void 0;
-var ModalWidget_1 = require("./ui/ModalWidget");
-Object.defineProperty(exports, "ModalWidget", { enumerable: true, get: function () { return __importDefault(ModalWidget_1).default; } });
-var EmbeddedViewContainer_1 = require("./ui/EmbeddedViewContainer");
-Object.defineProperty(exports, "EmbeddedViewContainer", { enumerable: true, get: function () { return __importDefault(EmbeddedViewContainer_1).default; } });

package/dist/ui/EmbeddedViewContainer.d.ts

@@ -1,6 +0,0 @@
-import type { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
-declare const ViewContainerWrapper: ({ view, children, }: {
-    view: IBaseViewModel;
-    children: React.ReactNode;
-}) => import("react/jsx-runtime").JSX.Element;
-export default ViewContainerWrapper;

package/dist/ui/EmbeddedViewContainer.js

@@ -1,35 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const util_1 = require("@jbrowse/core/util");
-const material_1 = require("@mui/material");
-const mobx_react_1 = require("mobx-react");
-const mui_1 = require("tss-react/mui");
-const ViewTitle_1 = __importDefault(require("./ViewTitle"));
-const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    avoidParentStyle: {
-        all: 'initial',
-    },
-    viewContainer: {
-        overflow: 'hidden',
-        background: theme.palette.secondary.main,
-        margin: theme.spacing(0.5),
-        padding: `0 ${theme.spacing(1)} ${theme.spacing(1)}`,
-    },
-}));
-const ViewContainer = (0, mobx_react_1.observer)(function ({ view, children, }) {
-    const { classes } = useStyles();
-    const session = (0, util_1.getSession)(view);
-    const theme = (0, material_1.useTheme)();
-    const ref = (0, util_1.useWidthSetter)(view, theme.spacing(1));
-    return ((0, jsx_runtime_1.jsxs)(material_1.Paper, { elevation: 12, ref: ref, className: classes.viewContainer, children: [session.DialogComponent ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(session.DialogComponent, { ...session.DialogProps }) })) : null, (0, jsx_runtime_1.jsx)(ViewTitle_1.default, { view: view }), (0, jsx_runtime_1.jsx)(material_1.Paper, { children: children })] }));
-});
-const ViewContainerWrapper = (0, mobx_react_1.observer)(function ({ view, children, }) {
-    const { classes } = useStyles();
-    return ((0, jsx_runtime_1.jsx)("div", { className: classes.avoidParentStyle, children: (0, jsx_runtime_1.jsx)(material_1.ScopedCssBaseline, { children: (0, jsx_runtime_1.jsx)(ViewContainer, { view: view, children: children }) }) }));
-});
-exports.default = ViewContainerWrapper;

package/dist/ui/ModalWidget.d.ts

@@ -1,5 +0,0 @@
-import type { SessionWithWidgets } from '@jbrowse/core/util';
-declare const ModalWidget: ({ session, }: {
-    session: SessionWithWidgets;
-}) => import("react/jsx-runtime").JSX.Element | null;
-export default ModalWidget;

package/dist/ui/ModalWidget.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ui_1 = require("@jbrowse/core/ui");
-const material_1 = require("@mui/material");
-const mobx_react_1 = require("mobx-react");
-const mobx_state_tree_1 = require("mobx-state-tree");
-const mui_1 = require("tss-react/mui");
-const useStyles = (0, mui_1.makeStyles)()({
-    paper: {
-        overflow: 'auto',
-    },
-});
-const ModalWidget = (0, mobx_react_1.observer)(function ({ session, }) {
-    const { classes } = useStyles();
-    const { visibleWidget } = session;
-    const { pluginManager } = (0, mobx_state_tree_1.getEnv)(session);
-    if (!visibleWidget) {
-        return null;
-    }
-    const { ReactComponent, HeadingComponent, heading } = pluginManager.getWidgetType(visibleWidget.type);
-    const Component = pluginManager.evaluateExtensionPoint('Core-replaceWidget', ReactComponent, {
-        session,
-        model: visibleWidget,
-    });
-    return ((0, jsx_runtime_1.jsx)(ui_1.Dialog, { open: true, onClose: () => {
-            session.hideAllWidgets();
-        }, maxWidth: "xl", header: (0, jsx_runtime_1.jsx)(material_1.AppBar, { position: "static", children: (0, jsx_runtime_1.jsx)(material_1.Toolbar, { children: HeadingComponent ? ((0, jsx_runtime_1.jsx)(HeadingComponent, { model: visibleWidget })) : ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "h6", children: heading })) }) }), children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)("div", { children: "Loading..." }), children: (0, jsx_runtime_1.jsx)(material_1.Paper, { className: classes.paper, children: (0, jsx_runtime_1.jsx)(Component, { model: visibleWidget, session: session, overrideDimensions: {
-                        height: (window.innerHeight * 5) / 8,
-                        width: 800,
-                    } }) }) }) }));
-});
-exports.default = ModalWidget;

package/dist/ui/VersionAboutDialog.d.ts

@@ -1,5 +0,0 @@
-export default function AboutDialog({ open, version, onClose, }: {
-    open: boolean;
-    version: string;
-    onClose: () => void;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/VersionAboutDialog.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = AboutDialog;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ui_1 = require("@jbrowse/core/ui");
-const material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
-const useStyles = (0, mui_1.makeStyles)()({
-    content: {
-        minWidth: 800,
-    },
-});
-function AboutDialog({ open, version, onClose, }) {
-    const { classes } = useStyles();
-    return ((0, jsx_runtime_1.jsx)(ui_1.Dialog, { open: open, onClose: onClose, maxWidth: "xl", title: `JBrowse v${version}`, children: (0, jsx_runtime_1.jsxs)(material_1.DialogContent, { className: classes.content, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { children: "JBrowse is a GMOD project \u00A9 2019-2021, The Evolutionary Software Foundation" }), (0, jsx_runtime_1.jsx)(material_1.Typography, { children: "Here are some resources and documentation. Please report the version number above when asking questions. Thanks!" }), (0, jsx_runtime_1.jsxs)("ul", { children: [(0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ui_1.ExternalLink, { href: "https://github.com/GMOD/jbrowse-components/discussions", children: "Question & answer forum" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ui_1.ExternalLink, { href: "https://github.com/GMOD/jbrowse-components/issues/new/choose", children: "Report a bug" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ui_1.ExternalLink, { href: "https://jbrowse.org/jb2/docs/user_guide", children: "User guide" }) }), (0, jsx_runtime_1.jsx)("li", { children: (0, jsx_runtime_1.jsx)(ui_1.ExternalLink, { href: "https://jbrowse.org/jb2/docs/", children: "Documentation" }) })] })] }) }));
-}

package/dist/ui/ViewMenu.d.ts

@@ -1,8 +0,0 @@
-import type { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
-import type { IconButtonProps as IconButtonPropsType, SvgIconProps } from '@mui/material';
-declare const ViewMenu: ({ model, IconButtonProps, IconProps, }: {
-    model: IBaseViewModel;
-    IconButtonProps: IconButtonPropsType;
-    IconProps: SvgIconProps;
-}) => import("react/jsx-runtime").JSX.Element;
-export default ViewMenu;

package/dist/ui/ViewMenu.js

@@ -1,20 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const ui_1 = require("@jbrowse/core/ui");
-const hooks_1 = require("@jbrowse/core/ui/hooks");
-const Menu_1 = __importDefault(require("@mui/icons-material/Menu"));
-const material_1 = require("@mui/material");
-const mobx_react_1 = require("mobx-react");
-const ViewMenu = (0, mobx_react_1.observer)(function ({ model, IconButtonProps, IconProps, }) {
-    const popupState = (0, hooks_1.usePopupState)({
-        variant: 'popover',
-    });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, { ...IconButtonProps, ...(0, hooks_1.bindTrigger)(popupState), "data-testid": "view_menu_icon", children: (0, jsx_runtime_1.jsx)(Menu_1.default, { ...IconProps }) }), (0, jsx_runtime_1.jsx)(ui_1.CascadingMenu, { ...(0, hooks_1.bindPopover)(popupState), onMenuItemClick: (_event, callback) => {
-                    callback();
-                }, menuItems: model.menuItems(), popupState: popupState })] }));
-});
-exports.default = ViewMenu;

package/dist/ui/ViewTitle.d.ts

@@ -1,5 +0,0 @@
-import type { IBaseViewModel } from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel';
-declare const ViewTitle: ({ view }: {
-    view: IBaseViewModel;
-}) => import("react/jsx-runtime").JSX.Element;
-export default ViewTitle;

package/dist/ui/ViewTitle.js

@@ -1,85 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ui_1 = require("@jbrowse/core/ui");
-const util_1 = require("@jbrowse/core/util");
-const material_1 = require("@mui/material");
-const mobx_react_1 = require("mobx-react");
-const mui_1 = require("tss-react/mui");
-const ViewMenu_1 = __importDefault(require("./ViewMenu"));
-const VersionAboutDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./VersionAboutDialog'))));
-const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    icon: {
-        color: theme.palette.secondary.contrastText,
-    },
-    displayName: {
-        marginTop: 2,
-        color: theme.palette.secondary.contrastText,
-    },
-    grow: {
-        flexGrow: 1,
-    },
-    container: {
-        display: 'flex',
-    },
-    iconRoot: {
-        '&:hover': {
-            backgroundColor: (0, material_1.alpha)(theme.palette.secondary.contrastText, theme.palette.action.hoverOpacity),
-            '@media (hover: none)': {
-                backgroundColor: 'transparent',
-            },
-        },
-    },
-}));
-const ViewTitle = (0, mobx_react_1.observer)(({ view }) => {
-    const { classes } = useStyles();
-    const { displayName } = view;
-    const [dialogOpen, setDialogOpen] = (0, react_1.useState)(false);
-    const session = (0, util_1.getSession)(view);
-    return ((0, jsx_runtime_1.jsxs)("div", { className: classes.container, children: [(0, jsx_runtime_1.jsx)(ViewMenu_1.default, { model: view, IconButtonProps: {
-                    classes: { root: classes.iconRoot },
-                    edge: 'start',
-                }, IconProps: { className: classes.icon } }), (0, jsx_runtime_1.jsx)("div", { className: classes.grow }), displayName ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", className: classes.displayName, children: displayName })) : null, (0, jsx_runtime_1.jsx)("div", { className: classes.grow }), (0, jsx_runtime_1.jsx)(material_1.IconButton, { onClick: () => {
-                    setDialogOpen(true);
-                }, children: (0, jsx_runtime_1.jsx)("div", { style: { width: 22, height: 22 }, children: (0, jsx_runtime_1.jsx)(ui_1.Logomark, { variant: "white" }) }) }), dialogOpen ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(VersionAboutDialog, { open: true, onClose: () => {
-                        setDialogOpen(false);
-                    }, version: session.version }) })) : null] }));
-});
-exports.default = ViewTitle;