@jbrowse/plugin-linear-genome-view 1.7.11 → 2.1.0

package/esm/LinearGenomeView/components/OverviewRubberBand.js

@@ -0,0 +1,197 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { Popover, Tooltip, Typography, alpha } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { getSession, stringify } from '@jbrowse/core/util';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import ReactPropTypes from 'prop-types';
+import { HEADER_OVERVIEW_HEIGHT } from '..';
+const useStyles = makeStyles()(theme => {
+    // @ts-ignore
+    const { tertiary, primary } = theme.palette;
+    const background = tertiary
+        ? alpha(tertiary.main, 0.7)
+        : alpha(primary.main, 0.7);
+    return {
+        rubberBand: {
+            height: '100%',
+            background,
+            position: 'absolute',
+            zIndex: 10,
+            textAlign: 'center',
+            overflow: 'hidden',
+        },
+        rubberBandControl: {
+            cursor: 'crosshair',
+            width: '100%',
+            minHeight: 8,
+        },
+        rubberBandText: {
+            color: tertiary ? tertiary.contrastText : primary.contrastText,
+        },
+        popover: {
+            mouseEvents: 'none',
+            cursor: 'crosshair',
+        },
+        paper: {
+            paddingLeft: theme.spacing(1),
+            paddingRight: theme.spacing(1),
+        },
+        guide: {
+            pointerEvents: 'none',
+            height: '100%',
+            width: 1,
+            position: 'absolute',
+            zIndex: 10,
+        },
+    };
+});
+const HoverTooltip = observer(({ model, open, guideX, overview, }) => {
+    var _a;
+    const { classes } = useStyles();
+    const { cytobandOffset } = model;
+    const { assemblyManager } = getSession(model);
+    const px = overview.pxToBp(guideX - cytobandOffset);
+    const assembly = assemblyManager.get(px.assemblyName);
+    const cytoband = (_a = assembly === null || assembly === void 0 ? void 0 : assembly.cytobands) === null || _a === void 0 ? void 0 : _a.find(f => px.coord > f.get('start') &&
+        px.coord < f.get('end') &&
+        px.refName === assembly.getCanonicalRefName(f.get('refName')));
+    return (React.createElement(Tooltip, { open: open, placement: "top", title: [stringify(px), cytoband === null || cytoband === void 0 ? void 0 : cytoband.get('name')].join(' '), arrow: true },
+        React.createElement("div", { className: classes.guide, style: {
+                left: guideX,
+            } })));
+});
+function OverviewRubberBand({ model, overview, ControlComponent = React.createElement("div", null), }) {
+    const { cytobandOffset } = model;
+    const [startX, setStartX] = useState();
+    const [currentX, setCurrentX] = useState();
+    const [guideX, setGuideX] = useState();
+    const controlsRef = useRef(null);
+    const rubberBandRef = useRef(null);
+    const { classes } = useStyles();
+    const mouseDragging = startX !== undefined;
+    useEffect(() => {
+        function globalMouseMove(event) {
+            const ref = controlsRef.current;
+            if (ref && mouseDragging) {
+                const relativeX = event.clientX - ref.getBoundingClientRect().left;
+                setCurrentX(relativeX);
+            }
+        }
+        function globalMouseUp() {
+            // click and drag
+            if (startX !== undefined && currentX !== undefined) {
+                if (Math.abs(currentX - startX) > 3) {
+                    model.moveTo(overview.pxToBp(startX - cytobandOffset), overview.pxToBp(currentX - cytobandOffset));
+                }
+            }
+            // just a click
+            if (startX !== undefined && currentX === undefined) {
+                const click = overview.pxToBp(startX - cytobandOffset);
+                if (!click.refName) {
+                    getSession(model).notify('unknown position clicked');
+                    console.error('unknown position clicked', click);
+                }
+                else {
+                    model.centerAt(Math.round(click.coord), click.refName, click.index);
+                }
+            }
+            setStartX(undefined);
+            setCurrentX(undefined);
+            if (startX !== undefined) {
+                setGuideX(undefined);
+            }
+        }
+        function globalKeyDown(event) {
+            if (event.key === 'Escape') {
+                setStartX(undefined);
+                setCurrentX(undefined);
+            }
+        }
+        if (mouseDragging) {
+            window.addEventListener('mousemove', globalMouseMove, true);
+            window.addEventListener('mouseup', globalMouseUp, true);
+            window.addEventListener('keydown', globalKeyDown, true);
+            return () => {
+                window.removeEventListener('mousemove', globalMouseMove, true);
+                window.removeEventListener('mouseup', globalMouseUp, true);
+                window.removeEventListener('keydown', globalKeyDown, true);
+            };
+        }
+        return () => { };
+    }, [mouseDragging, currentX, startX, model, overview, cytobandOffset]);
+    function mouseDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (controlsRef.current) {
+            setStartX(event.clientX - controlsRef.current.getBoundingClientRect().left);
+        }
+    }
+    function mouseMove(event) {
+        if (controlsRef.current) {
+            setGuideX(event.clientX - controlsRef.current.getBoundingClientRect().left);
+        }
+    }
+    function mouseOut() {
+        setGuideX(undefined);
+    }
+    if (startX === undefined) {
+        return (React.createElement("div", { style: { position: 'relative' } },
+            guideX !== undefined ? (React.createElement(HoverTooltip, { model: model, open: !mouseDragging, overview: overview, guideX: guideX })) : null,
+            React.createElement("div", { className: classes.rubberBandControl, role: "presentation", ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent)));
+    }
+    let left = startX || 0;
+    let width = 0;
+    if (startX !== undefined && currentX !== undefined) {
+        left = currentX < startX ? currentX : startX;
+        width = currentX - startX;
+    }
+    // calculate the start and end bp of drag
+    let leftBpOffset;
+    let rightBpOffset;
+    if (startX) {
+        leftBpOffset = overview.pxToBp(startX - cytobandOffset);
+        rightBpOffset = overview.pxToBp(startX + width - cytobandOffset);
+        if (currentX && currentX < startX) {
+            ;
+            [leftBpOffset, rightBpOffset] = [rightBpOffset, leftBpOffset];
+        }
+    }
+    return (React.createElement("div", { style: { position: 'relative' } },
+        rubberBandRef.current ? (React.createElement(React.Fragment, null,
+            React.createElement(Popover, { className: classes.popover, classes: {
+                    paper: classes.paper,
+                }, open: true, anchorEl: rubberBandRef.current, anchorOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left',
+                }, transformOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'right',
+                }, keepMounted: true, disableRestoreFocus: true },
+                React.createElement(Typography, null, leftBpOffset ? stringify(leftBpOffset) : '')),
+            React.createElement(Popover, { className: classes.popover, classes: {
+                    paper: classes.paper,
+                }, open: true, anchorEl: rubberBandRef.current, anchorOrigin: {
+                    vertical: 'top',
+                    horizontal: 'right',
+                }, transformOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                }, keepMounted: true, disableRestoreFocus: true },
+                React.createElement(Typography, null, rightBpOffset ? stringify(rightBpOffset) : '')))) : null,
+        React.createElement("div", { ref: rubberBandRef, className: classes.rubberBand, style: {
+                left,
+                width: Math.abs(width),
+                height: HEADER_OVERVIEW_HEIGHT,
+            } }),
+        React.createElement("div", { "data-testid": "rubberBand_controls", className: classes.rubberBandControl, role: "presentation", ref: controlsRef, onMouseDown: mouseDown, onMouseOut: mouseOut, onMouseMove: mouseMove }, ControlComponent)));
+}
+OverviewRubberBand.propTypes = {
+    model: MobxPropTypes.objectOrObservableObject.isRequired,
+    overview: MobxPropTypes.objectOrObservableObject.isRequired,
+    ControlComponent: ReactPropTypes.node,
+};
+OverviewRubberBand.defaultProps = {
+    ControlComponent: React.createElement("div", null),
+};
+export default observer(OverviewRubberBand);
+//# sourceMappingURL=OverviewRubberBand.js.map

package/esm/LinearGenomeView/components/OverviewRubberBand.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverviewRubberBand.js","sourceRoot":"","sources":["../../../src/LinearGenomeView/components/OverviewRubberBand.tsx"],"names":[],"mappings":"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"}

package/esm/LinearGenomeView/components/OverviewScaleBar.d.ts

@@ -0,0 +1,148 @@
+import React from 'react';
+import { Instance } from 'mobx-state-tree';
+import { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
+import { ContentBlock } from '@jbrowse/core/util/blockTypes';
+import { Assembly } from '@jbrowse/core/assemblyManager/assembly';
+import { LinearGenomeViewModel } from '..';
+declare const Polygon: ({ model, overview, useOffset, }: {
+    model: LGV;
+    overview: Instance<Base1DViewModel>;
+    useOffset?: boolean | undefined;
+}) => JSX.Element | null;
+declare type LGV = LinearGenomeViewModel;
+declare const Cytobands: ({ overview, block, assembly, }: {
+    overview: Base1DViewModel;
+    assembly?: ({
+        configuration: any;
+    } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+        error: Error | undefined;
+        regions: import("@jbrowse/core/assemblyManager/assembly").BasicRegion[] | undefined;
+        refNameAliases: {
+            [x: string]: string;
+        } | undefined;
+        lowerCaseRefNameAliases: {
+            [x: string]: string;
+        } | undefined;
+        cytobands: import("@jbrowse/core/util").Feature[] | undefined;
+    } & {
+        readonly initialized: boolean;
+        readonly name: string;
+        readonly aliases: string[];
+        hasName(name: string): boolean;
+        readonly allAliases: string[];
+        readonly refNames: string[] | undefined;
+        readonly allRefNames: string[] | undefined;
+        readonly rpcManager: any;
+        readonly refNameColors: string[];
+    } & {
+        getCanonicalRefName(refName: string): string;
+        getRefNameColor(refName: string): string | undefined;
+        isValidRefName(refName: string): boolean;
+    } & {
+        setLoading(): void;
+        setLoaded({ adapterRegionsWithAssembly, refNameAliases, lowerCaseRefNameAliases, cytobands, }: {
+            adapterRegionsWithAssembly: import("@jbrowse/core/util").Region[];
+            refNameAliases: {
+                [x: string]: string;
+            };
+            lowerCaseRefNameAliases: {
+                [x: string]: string;
+            };
+            cytobands: import("@jbrowse/core/util").Feature[];
+        }): void;
+        setError(e: Error): void;
+        setRegions(regions: import("@jbrowse/core/util").Region[]): void;
+        setRefNameAliases(refNameAliases: {
+            [x: string]: string;
+        }, lowerCaseRefNameAliases: {
+            [x: string]: string;
+        }): void;
+        setCytobands(cytobands: import("@jbrowse/core/util").Feature[]): void;
+        afterAttach(): void;
+    } & {
+        getAdapterMapEntry(adapterConf: unknown, options: import("@jbrowse/core/assemblyManager/assembly").BaseOptions): Promise<{
+            forwardMap: {
+                [k: string]: string;
+            };
+            reverseMap: {
+                [k: string]: string;
+            };
+        }>;
+        getRefNameMapForAdapter(adapterConf: unknown, opts: import("@jbrowse/core/assemblyManager/assembly").BaseOptions): Promise<{
+            [k: string]: string;
+        }>;
+        getReverseRefNameMapForAdapter(adapterConf: unknown, opts: import("@jbrowse/core/assemblyManager/assembly").BaseOptions): Promise<{
+            [k: string]: string;
+        }>;
+    } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
+        configuration: import("mobx-state-tree").IMaybe<import("mobx-state-tree").IReferenceType<import("mobx-state-tree").IAnyType>>;
+    }, {
+        error: Error | undefined;
+        regions: import("@jbrowse/core/assemblyManager/assembly").BasicRegion[] | undefined;
+        refNameAliases: {
+            [x: string]: string;
+        } | undefined;
+        lowerCaseRefNameAliases: {
+            [x: string]: string;
+        } | undefined;
+        cytobands: import("@jbrowse/core/util").Feature[] | undefined;
+    } & {
+        readonly initialized: boolean;
+        readonly name: string;
+        readonly aliases: string[];
+        hasName(name: string): boolean;
+        readonly allAliases: string[];
+        readonly refNames: string[] | undefined;
+        readonly allRefNames: string[] | undefined;
+        readonly rpcManager: any;
+        readonly refNameColors: string[];
+    } & {
+        getCanonicalRefName(refName: string): string;
+        getRefNameColor(refName: string): string | undefined;
+        isValidRefName(refName: string): boolean;
+    } & {
+        setLoading(): void;
+        setLoaded({ adapterRegionsWithAssembly, refNameAliases, lowerCaseRefNameAliases, cytobands, }: {
+            adapterRegionsWithAssembly: import("@jbrowse/core/util").Region[];
+            refNameAliases: {
+                [x: string]: string;
+            };
+            lowerCaseRefNameAliases: {
+                [x: string]: string;
+            };
+            cytobands: import("@jbrowse/core/util").Feature[];
+        }): void;
+        setError(e: Error): void;
+        setRegions(regions: import("@jbrowse/core/util").Region[]): void;
+        setRefNameAliases(refNameAliases: {
+            [x: string]: string;
+        }, lowerCaseRefNameAliases: {
+            [x: string]: string;
+        }): void;
+        setCytobands(cytobands: import("@jbrowse/core/util").Feature[]): void;
+        afterAttach(): void;
+    } & {
+        getAdapterMapEntry(adapterConf: unknown, options: import("@jbrowse/core/assemblyManager/assembly").BaseOptions): Promise<{
+            forwardMap: {
+                [k: string]: string;
+            };
+            reverseMap: {
+                [k: string]: string;
+            };
+        }>;
+        getRefNameMapForAdapter(adapterConf: unknown, opts: import("@jbrowse/core/assemblyManager/assembly").BaseOptions): Promise<{
+            [k: string]: string;
+        }>;
+        getReverseRefNameMapForAdapter(adapterConf: unknown, opts: import("@jbrowse/core/assemblyManager/assembly").BaseOptions): Promise<{
+            [k: string]: string;
+        }>;
+    }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>) | undefined;
+    block: ContentBlock;
+}) => JSX.Element;
+declare function OverviewScaleBar({ model, children, }: {
+    model: LGV;
+    children: React.ReactNode;
+}): JSX.Element;
+declare const _default: typeof OverviewScaleBar;
+export default _default;
+export { Cytobands, Polygon };

package/esm/LinearGenomeView/components/OverviewScaleBar.js

@@ -0,0 +1,287 @@
+import React from 'react';
+import { Typography, useTheme, alpha } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
+import { observer } from 'mobx-react';
+import Base1DView from '@jbrowse/core/util/Base1DViewModel';
+import { getSession, getTickDisplayStr } from '@jbrowse/core/util';
+import { ContentBlock } from '@jbrowse/core/util/blockTypes';
+// locals
+import { HEADER_BAR_HEIGHT, HEADER_OVERVIEW_HEIGHT, } from '..';
+import { chooseGridPitch } from '../util';
+import OverviewRubberBand from './OverviewRubberBand';
+const wholeSeqSpacer = 2;
+const useStyles = makeStyles()(theme => ({
+    scaleBar: {
+        height: HEADER_OVERVIEW_HEIGHT,
+    },
+    scaleBarBorder: {
+        border: '1px solid',
+    },
+    scaleBarContig: {
+        backgroundColor: theme.palette.background.default,
+        position: 'absolute',
+        top: 0,
+        height: HEADER_OVERVIEW_HEIGHT,
+    },
+    scaleBarContigForward: {
+        backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M-.1 0L6 4.5L-.1 9' fill='none' stroke='%23ddd'/%3E%3C/svg%3E")`,
+        backgroundRepeat: 'repeat',
+    },
+    scaleBarContigReverse: {
+        backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 9'%3E%3Cpath d='M6 0L0 4.5L6 9' fill='none' stroke='%23ddd'/%3E%3C/svg%3E")`,
+        backgroundRepeat: 'repeat',
+    },
+    scaleBarRefName: {
+        position: 'absolute',
+        fontWeight: 'bold',
+        pointerEvents: 'none',
+        zIndex: 100,
+    },
+    scaleBarLabel: {
+        height: HEADER_OVERVIEW_HEIGHT,
+        position: 'absolute',
+        display: 'flex',
+        justifyContent: 'center',
+        pointerEvents: 'none',
+    },
+    scaleBarVisibleRegion: {
+        position: 'absolute',
+        height: HEADER_OVERVIEW_HEIGHT,
+        pointerEvents: 'none',
+        zIndex: 100,
+        border: '1px solid',
+    },
+    overview: {
+        height: HEADER_BAR_HEIGHT,
+        position: 'relative',
+    },
+    overviewSvg: {
+        width: '100%',
+        position: 'absolute',
+    },
+}));
+const Polygon = observer(({ model, overview, useOffset = true, }) => {
+    const theme = useTheme();
+    const multiplier = Number(useOffset);
+    const { interRegionPaddingWidth, offsetPx, dynamicBlocks, cytobandOffset } = model;
+    const { contentBlocks, totalWidthPxWithoutBorders } = dynamicBlocks;
+    // @ts-ignore
+    const { tertiary, primary } = theme.palette;
+    const polygonColor = tertiary ? tertiary.light : primary.light;
+    if (!contentBlocks.length) {
+        return null;
+    }
+    const first = contentBlocks[0];
+    const last = contentBlocks[contentBlocks.length - 1];
+    const topLeft = (overview.bpToPx({
+        ...first,
+        coord: first.reversed ? first.end : first.start,
+    }) || 0) +
+        cytobandOffset * multiplier;
+    const topRight = (overview.bpToPx({
+        ...last,
+        coord: last.reversed ? last.start : last.end,
+    }) || 0) +
+        cytobandOffset * multiplier;
+    const startPx = Math.max(0, -offsetPx);
+    const endPx = startPx +
+        totalWidthPxWithoutBorders +
+        (contentBlocks.length * interRegionPaddingWidth) / 2;
+    const points = [
+        [startPx, HEADER_BAR_HEIGHT],
+        [endPx, HEADER_BAR_HEIGHT],
+        [topRight, 0],
+        [topLeft, 0],
+    ];
+    return (React.createElement("polygon", { points: points.toString(), fill: alpha(polygonColor, 0.3), stroke: alpha(polygonColor, 0.8) }));
+});
+// rounded rect from https://stackoverflow.com/a/45889603/2129219
+// prettier-ignore
+function rightRoundedRect(x, y, width, height, radius) {
+    return "M" + x + "," + y
+        + "h" + (width - radius)
+        + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
+        + "v" + (height - 2 * radius)
+        + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
+        + "h" + (radius - width)
+        + "z";
+}
+// prettier-ignore
+function leftRoundedRect(x, y, width, height, radius) {
+    return "M" + (x + radius) + "," + y
+        + "h" + (width - radius)
+        + "v" + height
+        + "h" + (radius - width)
+        + "a" + radius + "," + radius + " 0 0 1 " + (-radius) + "," + (-radius)
+        + "v" + (2 * radius - height)
+        + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + (-radius)
+        + "z";
+}
+const colorMap = {
+    gneg: 'rgb(227,227,227)',
+    gpos25: 'rgb(142,142,142)',
+    gpos50: 'rgb(85,85,85)',
+    gpos100: 'rgb(0,0,0)',
+    gpos75: 'rgb(57,57,57)',
+    gvar: 'rgb(0,0,0)',
+    stalk: 'rgb(127,127,127)',
+    acen: '#800',
+};
+function getCytobands(assembly, refName) {
+    var _a;
+    return (((_a = assembly === null || assembly === void 0 ? void 0 : assembly.cytobands) === null || _a === void 0 ? void 0 : _a.map(f => ({
+        refName: assembly.getCanonicalRefName(f.get('refName')),
+        start: f.get('start'),
+        end: f.get('end'),
+        type: f.get('type'),
+    })).filter(f => f.refName === refName)) || []);
+}
+const Cytobands = observer(({ overview, block, assembly, }) => {
+    const { offsetPx, reversed } = block;
+    const cytobands = getCytobands(assembly, block.refName);
+    const coords = cytobands.map(f => {
+        const { refName, start, end, type } = f;
+        return [
+            overview.bpToPx({
+                refName,
+                coord: start,
+            }),
+            overview.bpToPx({
+                refName,
+                coord: end,
+            }),
+            type,
+        ];
+    });
+    const arr = cytobands || [];
+    const lcap = reversed ? arr.length - 1 : 0;
+    const rcap = reversed ? 0 : arr.length - 1;
+    let firstCent = true;
+    return (React.createElement("g", { transform: `translate(-${offsetPx})` }, coords.map(([start, end, type], index) => {
+        const key = `${start}-${end}-${type}`;
+        if (type === 'acen' && firstCent) {
+            firstCent = false;
+            return (React.createElement("polygon", { key: key, points: [
+                    [start, 0],
+                    [end, HEADER_OVERVIEW_HEIGHT / 2],
+                    [start, HEADER_OVERVIEW_HEIGHT],
+                ].toString(), fill: colorMap[type] }));
+        }
+        if (type === 'acen' && !firstCent) {
+            return (React.createElement("polygon", { key: key, points: [
+                    [start, HEADER_OVERVIEW_HEIGHT / 2],
+                    [end, 0],
+                    [end, HEADER_OVERVIEW_HEIGHT],
+                ].toString(), fill: colorMap[type] }));
+        }
+        if (lcap === index) {
+            return (React.createElement("path", { key: key, d: leftRoundedRect(Math.min(start, end), 0, Math.abs(end - start), HEADER_OVERVIEW_HEIGHT, 8), fill: colorMap[type] }));
+        }
+        else if (rcap === index) {
+            return (React.createElement("path", { key: key, d: rightRoundedRect(Math.min(start, end), 0, Math.abs(end - start) - 2, HEADER_OVERVIEW_HEIGHT, 8), fill: colorMap[type] }));
+        }
+        else {
+            return (React.createElement("rect", { key: key, x: Math.min(start, end), y: 0, width: Math.abs(end - start), height: HEADER_OVERVIEW_HEIGHT, fill: colorMap[type] }));
+        }
+    })));
+});
+const OverviewBox = observer(({ scale, model, block, overview, }) => {
+    const { classes, cx } = useStyles();
+    const { cytobandOffset, bpPerPx, showCytobands } = model;
+    const { start, end, reversed, refName, assemblyName } = block;
+    const { majorPitch } = chooseGridPitch(scale, 120, 15);
+    const { assemblyManager } = getSession(model);
+    const assembly = assemblyManager.get(assemblyName);
+    const refNameColor = assembly === null || assembly === void 0 ? void 0 : assembly.getRefNameColor(refName);
+    const tickLabels = [];
+    for (let i = 0; i < Math.floor((end - start) / majorPitch); i++) {
+        const offsetLabel = (i + 1) * majorPitch;
+        tickLabels.push(reversed ? end - offsetLabel : start + offsetLabel);
+    }
+    const canDisplayCytobands = showCytobands && getCytobands(assembly, block.refName).length;
+    return (React.createElement("div", null,
+        React.createElement(Typography, { style: {
+                left: block.offsetPx + 3,
+                color: canDisplayCytobands ? 'black' : refNameColor,
+            }, className: classes.scaleBarRefName }, refName),
+        React.createElement("div", { className: cx(classes.scaleBarContig, canDisplayCytobands
+                ? undefined
+                : reversed
+                    ? classes.scaleBarContigReverse
+                    : classes.scaleBarContigForward, !canDisplayCytobands ? classes.scaleBarBorder : undefined), style: {
+                left: block.offsetPx + cytobandOffset,
+                width: block.widthPx,
+                borderColor: refNameColor,
+            } },
+            !canDisplayCytobands
+                ? tickLabels.map((tickLabel, labelIdx) => (React.createElement(Typography, { key: `${JSON.stringify(block)}-${tickLabel}-${labelIdx}`, className: classes.scaleBarLabel, variant: "body2", style: {
+                        left: ((labelIdx + 1) * majorPitch) / scale,
+                        pointerEvents: 'none',
+                        color: refNameColor,
+                    } }, getTickDisplayStr(tickLabel, bpPerPx))))
+                : null,
+            canDisplayCytobands ? (React.createElement("svg", { style: { width: '100%' } },
+                React.createElement(Cytobands, { overview: overview, assembly: assembly, block: block }))) : null)));
+});
+const ScaleBar = observer(({ model, scale, overview, }) => {
+    const { classes } = useStyles();
+    const theme = useTheme();
+    const { dynamicBlocks, showCytobands, cytobandOffset } = model;
+    const visibleRegions = dynamicBlocks.contentBlocks;
+    const overviewVisibleRegions = overview.dynamicBlocks;
+    // @ts-ignore
+    const { tertiary, primary } = theme.palette;
+    const scaleBarColor = tertiary ? tertiary.light : primary.light;
+    if (!visibleRegions.length) {
+        return null;
+    }
+    const first = visibleRegions[0];
+    const firstOverviewPx = overview.bpToPx({
+        ...first,
+        coord: first.reversed ? first.end : first.start,
+    }) || 0;
+    const last = visibleRegions[visibleRegions.length - 1];
+    const lastOverviewPx = overview.bpToPx({
+        ...last,
+        coord: last.reversed ? last.start : last.end,
+    }) || 0;
+    const color = showCytobands ? '#f00' : scaleBarColor;
+    const transparency = showCytobands ? 0.1 : 0.3;
+    return (React.createElement("div", { className: classes.scaleBar },
+        React.createElement("div", { className: classes.scaleBarVisibleRegion, style: {
+                width: lastOverviewPx - firstOverviewPx,
+                left: firstOverviewPx + cytobandOffset,
+                background: alpha(color, transparency),
+                borderColor: color,
+            } }),
+        overviewVisibleRegions.map((block, idx) => {
+            return !(block instanceof ContentBlock) ? (React.createElement("div", { key: `${JSON.stringify(block)}-${idx}`, className: classes.scaleBarContig, style: {
+                    width: block.widthPx,
+                    left: block.offsetPx,
+                    backgroundColor: '#999',
+                    backgroundImage: 'repeating-linear-gradient(90deg, transparent, transparent 1px, rgba(255,255,255,.5) 1px, rgba(255,255,255,.5) 3px)',
+                } })) : (React.createElement(OverviewBox, { scale: scale, block: block, model: model, overview: overview, key: `${JSON.stringify(block)}-${idx}` }));
+        })));
+});
+function OverviewScaleBar({ model, children, }) {
+    const { classes } = useStyles();
+    const { totalBp, width, cytobandOffset, displayedRegions } = model;
+    const overview = Base1DView.create({
+        displayedRegions: JSON.parse(JSON.stringify(displayedRegions)),
+        interRegionPaddingWidth: 0,
+        minimumBlockWidth: model.minimumBlockWidth,
+    });
+    const modWidth = width - cytobandOffset;
+    overview.setVolatileWidth(modWidth);
+    overview.showAllRegions();
+    const scale = totalBp / (modWidth - (displayedRegions.length - 1) * wholeSeqSpacer);
+    return (React.createElement("div", null,
+        React.createElement(OverviewRubberBand, { model: model, overview: overview, ControlComponent: React.createElement(ScaleBar, { model: model, overview: overview, scale: scale }) }),
+        React.createElement("div", { className: classes.overview },
+            React.createElement("svg", { height: HEADER_BAR_HEIGHT, className: classes.overviewSvg },
+                React.createElement(Polygon, { model: model, overview: overview })),
+            children)));
+}
+export default observer(OverviewScaleBar);
+export { Cytobands, Polygon };
+//# sourceMappingURL=OverviewScaleBar.js.map