@jbrowse/plugin-linear-genome-view 2.7.0 → 2.7.2

package/dist/BaseLinearDisplay/components/LinearBlocks.js

@@ -51,7 +51,7 @@ const RenderedBlocks = (0, mobx_react_1.observer)(function ({ model, }) {
         if (block instanceof blockTypes_1.InterRegionPaddingBlock) {
             return (react_1.default.createElement(Block_1.InterRegionPaddingBlock, { key: block.key, width: block.widthPx, style: { background: 'none' }, boundary: block.variant === 'boundary' }));
         }
-        throw new Error(`invalid block type ${typeof block}`);
+        throw new Error(`invalid block type ${JSON.stringify(block)}`);
     })));
 });
 exports.RenderedBlocks = RenderedBlocks;

package/dist/BaseLinearDisplay/components/Tooltip.js

@@ -53,7 +53,8 @@ const TooltipContents = react_1.default.forwardRef(function TooltipContents2({ m
     return (react_1.default.createElement("div", { ref: ref }, react_1.default.isValidElement(message) ? (message) : message ? (react_1.default.createElement(ui_1.SanitizedHTML, { html: String(message) })) : null));
 });
 const Tooltip = (0, mobx_react_1.observer)(({ model, clientMouseCoord, }) => {
-    const { classes } = useStyles();
+    var _a, _b;
+    const { theme, classes } = useStyles();
     const { featureUnderMouse } = model;
     const [width, setWidth] = (0, react_1.useState)(0);
     const [popperElt, setPopperElt] = (0, react_1.useState)(null);
@@ -79,7 +80,8 @@ const Tooltip = (0, mobx_react_1.observer)(({ model, clientMouseCoord, }) => {
     const contents = featureUnderMouse
         ? (0, configuration_1.getConf)(model, 'mouseover', { feature: featureUnderMouse })
         : undefined;
-    return featureUnderMouse && contents ? (react_1.default.createElement(material_1.Portal, null,
+    const popperTheme = (_a = theme === null || theme === void 0 ? void 0 : theme.components) === null || _a === void 0 ? void 0 : _a.MuiPopper;
+    return featureUnderMouse && contents ? (react_1.default.createElement(material_1.Portal, { container: (_b = popperTheme === null || popperTheme === void 0 ? void 0 : popperTheme.defaultProps) === null || _b === void 0 ? void 0 : _b.container },
         react_1.default.createElement("div", { ref: setPopperElt, className: classes.tooltip, 
             // zIndex needed to go over widget drawer
             style: { ...styles.popper, zIndex: 100000 }, ...attributes.popper },

package/dist/LinearGenomeView/components/LinearGenomeView.js

@@ -30,12 +30,12 @@ const react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
 const ui_1 = require("@jbrowse/core/ui");
+const util_1 = require("@jbrowse/core/util");
 const mobx_react_1 = require("mobx-react");
 // icons
 const Icons_1 = require("@jbrowse/core/ui/Icons");
 const TrackContainer_1 = __importDefault(require("./TrackContainer"));
 const TracksContainer_1 = __importDefault(require("./TracksContainer"));
-const util_1 = require("@jbrowse/core/util");
 const ImportForm = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./ImportForm'))));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     note: {
@@ -43,14 +43,28 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         paddingTop: theme.spacing(1),
         paddingBottom: theme.spacing(1),
     },
+    rel: {
+        position: 'relative',
+    },
+    top: {
+        zIndex: 1000,
+    },
 }));
+function NoTracksActive({ model }) {
+    const { classes } = useStyles();
+    const { hideNoTracksActive } = model;
+    return (react_1.default.createElement(material_1.Paper, { className: classes.note }, !hideNoTracksActive ? (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.Typography, null, "No tracks active."),
+        react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: () => model.activateTrackSelector(), className: classes.top, startIcon: react_1.default.createElement(Icons_1.TrackSelector, null) }, "Open track selector"))) : (react_1.default.createElement("div", { style: { height: '48px' } }))));
+}
 const LinearGenomeView = (0, mobx_react_1.observer)(({ model }) => {
     const { tracks, error, initialized, hasDisplayedRegions } = model;
-    const { classes } = useStyles();
     const ref = (0, react_1.useRef)(null);
     const session = (0, util_1.getSession)(model);
+    const { classes } = useStyles();
     (0, react_1.useEffect)(() => {
-        // sets the focused view id based on a click within the LGV; necessary for subviews to be focused properly
+        // sets the focused view id based on a click within the LGV;
+        // necessary for subviews to be focused properly
         function handleSelectView(e) {
             var _a, _b;
             if (e.target instanceof Element && ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
@@ -72,11 +86,19 @@ const LinearGenomeView = (0, mobx_react_1.observer)(({ model }) => {
     }
     const MiniControlsComponent = model.MiniControlsComponent();
     const HeaderComponent = model.HeaderComponent();
-    return (react_1.default.createElement("div", { style: { position: 'relative' }, ref: ref },
+    return (react_1.default.createElement("div", { className: classes.rel, ref: ref, onMouseLeave: () => session.setHovered(undefined), onMouseMove: event => {
+            const c = ref.current;
+            if (!c) {
+                return;
+            }
+            const { tracks } = model;
+            const leftPx = event.clientX - c.getBoundingClientRect().left;
+            const hoverPosition = model.pxToBp(leftPx);
+            const hoverFeature = tracks.find(t => t.displays[0].featureUnderMouse);
+            session.setHovered({ hoverPosition, hoverFeature });
+        } },
         react_1.default.createElement(HeaderComponent, { model: model }),
         react_1.default.createElement(MiniControlsComponent, { model: model }),
-        react_1.default.createElement(TracksContainer_1.default, { model: model }, !tracks.length ? (react_1.default.createElement(material_1.Paper, { variant: "outlined", className: classes.note }, !model.hideNoTracksActive ? (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(material_1.Typography, null, "No tracks active."),
-            react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: model.activateTrackSelector, style: { zIndex: 1000 }, startIcon: react_1.default.createElement(Icons_1.TrackSelector, null) }, "Open track selector"))) : (react_1.default.createElement("div", { style: { height: '48px' } })))) : (tracks.map(track => (react_1.default.createElement(TrackContainer_1.default, { key: track.id, model: model, track: track })))))));
+        react_1.default.createElement(TracksContainer_1.default, { model: model }, !tracks.length ? (react_1.default.createElement(NoTracksActive, { model: model })) : (tracks.map(track => (react_1.default.createElement(TrackContainer_1.default, { key: track.id, model: model, track: track })))))));
 });
 exports.default = LinearGenomeView;

package/dist/LinearGenomeView/components/OverviewRubberband.js

@@ -46,6 +46,9 @@ const useStyles = (0, mui_1.makeStyles)()({
         position: 'absolute',
         zIndex: 10,
     },
+    rel: {
+        position: 'relative',
+    },
 });
 const HoverTooltip = (0, mobx_react_1.observer)(function ({ model, open, guideX, overview, }) {
     var _a;
@@ -131,7 +134,7 @@ const OverviewRubberband = (0, mobx_react_1.observer)(function OverviewRubberban
         setGuideX(undefined);
     }
     if (startX === undefined) {
-        return (react_1.default.createElement("div", { style: { position: 'relative' } },
+        return (react_1.default.createElement("div", { className: classes.rel },
             guideX !== undefined ? (react_1.default.createElement(HoverTooltip, { model: model, open: !mouseDragging, overview: overview, guideX: guideX })) : null,
             react_1.default.createElement("div", { className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent)));
     }
@@ -152,7 +155,7 @@ const OverviewRubberband = (0, mobx_react_1.observer)(function OverviewRubberban
             [leftBpOffset, rightBpOffset] = [rightBpOffset, leftBpOffset];
         }
     }
-    return (react_1.default.createElement("div", { style: { position: 'relative' } },
+    return (react_1.default.createElement("div", { className: classes.rel },
         leftBpOffset && rightBpOffset ? (react_1.default.createElement(RubberbandSpan_1.default, { leftBpOffset: leftBpOffset, rightBpOffset: rightBpOffset, width: Math.abs(width), left: left })) : null,
         react_1.default.createElement("div", { "data-testid": "rubberband_controls", className: classes.rubberbandControl, ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent)));
 });

package/dist/LinearGenomeView/components/TrackLabel.js

@@ -14,10 +14,10 @@ const ui_1 = require("@jbrowse/core/ui");
 const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
 // icons
 const MoreVert_1 = __importDefault(require("@mui/icons-material/MoreVert"));
-const DragIndicator_1 = __importDefault(require("@mui/icons-material/DragIndicator"));
 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 TrackLabelDragHandle_1 = __importDefault(require("./TrackLabelDragHandle"));
 const useStyles = (0, mui_1.makeStyles)()(theme => ({
     root: {
         background: (0, material_1.alpha)(theme.palette.background.paper, 0.8),
@@ -34,14 +34,6 @@ const useStyles = (0, mui_1.makeStyles)()(theme => ({
         fontSize: '0.8rem',
         pointerEvents: 'none',
     },
-    dragHandle: {
-        cursor: 'grab',
-    },
-    dragHandleIcon: {
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        pointerEvents: 'none',
-    },
     iconButton: {
         padding: theme.spacing(1),
     },
@@ -65,15 +57,7 @@ const TrackLabel = (0, mobx_react_1.observer)(react_1.default.forwardRef(functio
         ...track.trackMenuItems(),
     ].sort((a, b) => ((b === null || b === void 0 ? void 0 : b.priority) || 0) - ((a === null || a === void 0 ? void 0 : a.priority) || 0));
     return (react_1.default.createElement(material_1.Paper, { ref: ref, className: cx(className, classes.root) },
-        react_1.default.createElement("span", { draggable: true, className: classes.dragHandle, onDragStart: event => {
-                const target = event.currentTarget;
-                if (target.parentNode) {
-                    const parent = target.parentNode;
-                    event.dataTransfer.setDragImage(parent, 20, 20);
-                    view.setDraggingTrackId(track.id);
-                }
-            }, onDragEnd: () => view.setDraggingTrackId(undefined), "data-testid": `dragHandle-${view.id}-${trackId}` },
-            react_1.default.createElement(DragIndicator_1.default, { className: classes.dragHandleIcon, fontSize: "small" })),
+        react_1.default.createElement(TrackLabelDragHandle_1.default, { track: track, trackId: trackId, view: view }),
         react_1.default.createElement(material_1.IconButton, { onClick: () => view.hideTrack(trackId), className: classes.iconButton, title: "close this track" },
             react_1.default.createElement(Close_1.default, { fontSize: "small" })),
         react_1.default.createElement(material_1.Typography, { variant: "body1", component: "span", className: classes.trackName },

package/dist/LinearGenomeView/components/TrackLabelContainer.js

@@ -23,9 +23,9 @@ const TrackLabelContainer = (0, mobx_react_1.observer)(function ({ track, view,
     const { classes, cx } = useStyles();
     const display = track.displays[0];
     const { trackLabel, trackLabelOverlap, trackLabelOffset } = classes;
-    const labelStyle = view.trackLabels !== 'overlapping' || display.prefersOffset
+    const labelStyle = view.trackLabelsSetting !== 'overlapping' || display.prefersOffset
         ? trackLabelOffset
         : trackLabelOverlap;
-    return view.trackLabels !== 'hidden' ? (react_1.default.createElement(TrackLabel_1.default, { track: track, className: cx(trackLabel, labelStyle) })) : null;
+    return view.trackLabelsSetting !== 'hidden' ? (react_1.default.createElement(TrackLabel_1.default, { track: track, className: cx(trackLabel, labelStyle) })) : null;
 });
 exports.default = TrackLabelContainer;

package/dist/LinearGenomeView/components/TrackLabelDragHandle.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BaseTrackModel } from '@jbrowse/core/pluggableElementTypes/models';
+import { LinearGenomeViewModel } from '..';
+declare function TrackLabelDragHandle({ trackId, view, track, }: {
+    trackId: string;
+    track: BaseTrackModel;
+    view: LinearGenomeViewModel;
+}): React.JSX.Element;
+export default TrackLabelDragHandle;

package/dist/LinearGenomeView/components/TrackLabelDragHandle.js

@@ -0,0 +1,32 @@
+"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 mui_1 = require("tss-react/mui");
+// icons
+const DragIndicator_1 = __importDefault(require("@mui/icons-material/DragIndicator"));
+const useStyles = (0, mui_1.makeStyles)()({
+    dragHandle: {
+        cursor: 'grab',
+    },
+    dragHandleIcon: {
+        display: 'inline-block',
+        verticalAlign: 'middle',
+        pointerEvents: 'none',
+    },
+});
+function TrackLabelDragHandle({ trackId, view, track, }) {
+    const { classes } = useStyles();
+    return (react_1.default.createElement("span", { draggable: true, className: classes.dragHandle, onDragStart: event => {
+            const target = event.currentTarget;
+            if (target.parentNode) {
+                const parent = target.parentNode;
+                event.dataTransfer.setDragImage(parent, 20, 20);
+                view.setDraggingTrackId(track.id);
+            }
+        }, onDragEnd: () => view.setDraggingTrackId(undefined), "data-testid": `dragHandle-${view.id}-${trackId}` },
+        react_1.default.createElement(DragIndicator_1.default, { className: classes.dragHandleIcon, fontSize: "small" })));
+}
+exports.default = TrackLabelDragHandle;

package/dist/LinearGenomeView/index.d.ts

@@ -1,4 +1,3 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function LinearGenomeViewF(pluginManager: PluginManager): void;
 export * from './model';

package/dist/LinearGenomeView/index.js

@@ -29,7 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
 const model_1 = require("./model");
-exports.default = (pluginManager) => {
+function LinearGenomeViewF(pluginManager) {
     pluginManager.addViewType(() => {
         return new pluggableElementTypes_1.ViewType({
             name: 'LinearGenomeView',
@@ -38,5 +38,6 @@ exports.default = (pluginManager) => {
             ReactComponent: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/LinearGenomeView')))),
         });
     });
-};
+}
+exports.default = LinearGenomeViewF;
 __exportStar(require("./model"), exports);

package/dist/LinearGenomeView/model.d.ts

@@ -71,9 +71,9 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     hideHeaderOverview: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     hideNoTracksActive: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
     trackSelectorType: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
-    trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     showCenterLine: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     showCytobandsSetting: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    trackLabels: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
     showGridlines: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
 }, {
     width: number;
@@ -96,6 +96,12 @@ export declare function stateModelFactory(pluginManager: PluginManager): import(
     leftOffset: BpOffset | undefined;
     rightOffset: BpOffset | undefined;
 } & {
+    /**
+     * #getter
+     * this is the effective value of the track labels setting, incorporating
+     * both the config and view state. use this instead of view.trackLabels
+     */
+    readonly trackLabelsSetting: any;
     /**
      * #getter
      */

package/dist/LinearGenomeView/model.js

@@ -85,7 +85,7 @@ exports.WIDGET_HEIGHT = 32;
  */
 function stateModelFactory(pluginManager) {
     return mobx_state_tree_1.types
-        .compose(models_1.BaseViewModel, mobx_state_tree_1.types.model('LinearGenomeView', {
+        .compose('LinearGenomeView', models_1.BaseViewModel, mobx_state_tree_1.types.model({
         /**
          * #property
          */
@@ -137,12 +137,6 @@ function stateModelFactory(pluginManager) {
          * #property
          */
         trackSelectorType: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.enumeration(['hierarchical']), 'hierarchical'),
-        /**
-         * #property
-         * how to display the track labels, can be "overlapping", "offset", or
-         * "hidden"
-         */
-        trackLabels: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string, () => (0, util_1.localStorageGetItem)('lgv-trackLabels') || 'overlapping'),
         /**
          * #property
          * show the "center line"
@@ -153,6 +147,15 @@ function stateModelFactory(pluginManager) {
          * show the "cytobands" in the overview scale bar
          */
         showCytobandsSetting: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.boolean, () => Boolean(JSON.parse((0, util_1.localStorageGetItem)('lgv-showCytobands') || 'true'))),
+        /**
+         * #property
+         * how to display the track labels, can be "overlapping", "offset", or
+         * "hidden", or empty string "" (which results in conf being used). see
+         * LinearGenomeViewPlugin
+         * https://jbrowse.org/jb2/docs/config/lineargenomeviewplugin/ docs for
+         * how conf is used
+         */
+        trackLabels: mobx_state_tree_1.types.optional(mobx_state_tree_1.types.string, () => (0, util_1.localStorageGetItem)('lgv-trackLabels') || ''),
         /**
          * #property
          * show the "gridlines" in the track area
@@ -175,6 +178,18 @@ function stateModelFactory(pluginManager) {
         rightOffset: undefined,
     }))
         .views(self => ({
+        /**
+         * #getter
+         * this is the effective value of the track labels setting, incorporating
+         * both the config and view state. use this instead of view.trackLabels
+         */
+        get trackLabelsSetting() {
+            const sessionSetting = (0, configuration_1.getConf)((0, util_1.getSession)(self), [
+                'LinearGenomeViewPlugin',
+                'trackLabels',
+            ]);
+            return self.trackLabels || sessionSetting;
+        },
         /**
          * #getter
          */
@@ -615,6 +630,7 @@ function stateModelFactory(pluginManager) {
          * #action
          */
         setTrackLabels(setting) {
+            localStorage.setItem('lgv-trackLabels', setting);
             self.trackLabels = setting;
         },
         /**
@@ -945,21 +961,21 @@ function stateModelFactory(pluginManager) {
                             label: 'Overlapping',
                             icon: Visibility_1.default,
                             type: 'radio',
-                            checked: self.trackLabels === 'overlapping',
+                            checked: self.trackLabelsSetting === 'overlapping',
                             onClick: () => self.setTrackLabels('overlapping'),
                         },
                         {
                             label: 'Offset',
                             icon: Visibility_1.default,
                             type: 'radio',
-                            checked: self.trackLabels === 'offset',
+                            checked: self.trackLabelsSetting === 'offset',
                             onClick: () => self.setTrackLabels('offset'),
                         },
                         {
                             label: 'Hidden',
                             icon: Visibility_1.default,
                             type: 'radio',
-                            checked: self.trackLabels === 'hidden',
+                            checked: self.trackLabelsSetting === 'hidden',
                             onClick: () => self.setTrackLabels('hidden'),
                         },
                     ],
@@ -1050,9 +1066,8 @@ function stateModelFactory(pluginManager) {
             }, { delay: 150 }));
             (0, mobx_state_tree_1.addDisposer)(self, (0, mobx_1.autorun)(() => {
                 const s = (s) => JSON.stringify(s);
-                const { trackLabels, showCytobandsSetting, showCenterLine } = self;
+                const { showCytobandsSetting, showCenterLine } = self;
                 if (typeof localStorage !== 'undefined') {
-                    localStorage.setItem('lgv-trackLabels', trackLabels);
                     localStorage.setItem('lgv-showCytobands', s(showCytobandsSetting));
                     localStorage.setItem('lgv-showCenterLine', s(showCenterLine));
                 }
@@ -1264,22 +1279,18 @@ function stateModelFactory(pluginManager) {
                 if (session.focusedViewId === self.id && (e.ctrlKey || e.metaKey)) {
                     if (e.code === 'ArrowLeft') {
                         e.preventDefault();
-                        // pan left
                         self.slide(-0.9);
                     }
-                    if (e.code === 'ArrowRight') {
+                    else if (e.code === 'ArrowRight') {
                         e.preventDefault();
-                        // pan right
                         self.slide(0.9);
                     }
-                    if (e.code === 'ArrowUp' && self.scaleFactor === 1) {
+                    else if (e.code === 'ArrowUp' && self.scaleFactor === 1) {
                         e.preventDefault();
-                        // zoom in
                         self.zoom(self.bpPerPx / 2);
                     }
-                    if (e.code === 'ArrowDown' && self.scaleFactor === 1) {
+                    else if (e.code === 'ArrowDown' && self.scaleFactor === 1) {
                         e.preventDefault();
-                        // zoom out
                         self.zoom(self.bpPerPx * 2);
                     }
                 }

package/dist/LinearGenomeView/svgcomponents/SVGTrackLabel.js

@@ -5,11 +5,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const material_1 = require("@mui/material");
+const util_1 = require("@jbrowse/core/util");
 function SVGTrackLabel({ trackLabels, trackName, fontSize, trackLabelOffset, x, }) {
     const theme = (0, material_1.useTheme)();
     const fill = theme.palette.text.primary;
     const xoff = trackLabels === 'overlay' ? 5 : 0;
     const yoff = trackLabels === 'offset' ? 5 : 0;
-    return trackLabels !== 'none' ? (react_1.default.createElement("g", null, trackLabels === 'left' ? (react_1.default.createElement("text", { x: trackLabelOffset - 40, y: 20, fill: fill, fontSize: fontSize, dominantBaseline: "hanging", textAnchor: "end" }, trackName)) : (react_1.default.createElement("text", { x: x + xoff, y: yoff, fill: fill, fontSize: fontSize, dominantBaseline: "hanging" }, trackName)))) : null;
+    const name = (0, util_1.coarseStripHTML)(trackName);
+    return trackLabels !== 'none' ? (react_1.default.createElement("g", null, trackLabels === 'left' ? (react_1.default.createElement("text", { x: trackLabelOffset - 40, y: 20, fill: fill, fontSize: fontSize, dominantBaseline: "hanging", textAnchor: "end" }, name)) : (react_1.default.createElement("text", { x: x + xoff, y: yoff, fill: fill, fontSize: fontSize, dominantBaseline: "hanging" }, name)))) : null;
 }
 exports.default = SVGTrackLabel;