@jbrowse/plugin-variants 2.16.1 → 2.18.0

package/esm/shared/SharedVariantMixin.d.ts

@@ -0,0 +1,309 @@
+import type { AnyConfigurationSchemaType } from '@jbrowse/core/configuration';
+import type { Feature } from '@jbrowse/core/util';
+export default function SharedVariantMixin(configSchema: AnyConfigurationSchemaType): import("mobx-state-tree").IModelType<{
+    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    type: import("mobx-state-tree").ISimpleType<string>;
+    rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+} & {
+    heightPreConfig: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+} & {
+    userBpPerPxLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+    userByteSizeLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+} & {
+    blockState: import("mobx-state-tree").IMapType<import("mobx-state-tree").IModelType<{
+        key: import("mobx-state-tree").ISimpleType<string>;
+        region: import("mobx-state-tree").IType<import("@jbrowse/core/util").Region, import("@jbrowse/core/util").Region, import("@jbrowse/core/util").Region>;
+        reloadFlag: import("mobx-state-tree").IType<number | undefined, number, number>;
+        isLeftEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    }, {
+        stopToken: string | undefined;
+        filled: boolean;
+        reactElement: React.ReactElement | undefined;
+        features: Map<string, Feature> | undefined;
+        layout: any;
+        status: string;
+        error: unknown;
+        message: string | undefined;
+        maxHeightReached: boolean;
+        ReactComponent: ({ model, }: {
+            model: {
+                error?: unknown;
+                reload: () => void;
+                message: React.ReactNode;
+                filled?: boolean;
+                status?: string;
+                reactElement?: React.ReactElement;
+            };
+        }) => import("react").JSX.Element | undefined;
+        renderProps: any;
+    } & {
+        doReload(): void;
+        afterAttach(): void;
+        setStatus(message: string): void;
+        setLoading(newStopToken: string): void;
+        setMessage(messageText: string): void;
+        setRendered(props: import("@jbrowse/plugin-linear-genome-view/src/BaseLinearDisplay/models/serverSideRenderedBlock").RenderedProps | undefined): void;
+        setError(error: unknown): void;
+        reload(): void;
+        beforeDestroy(): void;
+    }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    configuration: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+        maxFeatureScreenDensity: {
+            type: string;
+            description: string;
+            defaultValue: number;
+        };
+        fetchSizeLimit: {
+            type: string;
+            defaultValue: number;
+            description: string;
+        };
+        height: {
+            type: string;
+            defaultValue: number;
+            description: string;
+        };
+        mouseover: {
+            type: string;
+            description: string;
+            defaultValue: string;
+            contextVariable: string[];
+        };
+        jexlFilters: {
+            type: string;
+            description: string;
+            defaultValue: never[];
+        };
+    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
+} & {
+    selectedRendering: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    summaryScoreMode: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+    rendererTypeNameState: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+    configuration: AnyConfigurationSchemaType;
+}, {
+    rendererTypeName: string;
+    error: unknown;
+    message: string | undefined;
+} & {
+    readonly RenderingComponent: React.FC<{
+        model: {
+            id: string;
+            type: string;
+            rpcDriverName: string | undefined;
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+            rendererTypeName: string;
+            error: unknown;
+            message: string | undefined;
+        } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
+            id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+            type: import("mobx-state-tree").ISimpleType<string>;
+            rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+        }, {
+            rendererTypeName: string;
+            error: unknown;
+            message: string | undefined;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+        onHorizontalScroll?: () => void;
+        blockState?: Record<string, any>;
+    }>;
+    readonly DisplayBlurb: React.FC<{
+        model: {
+            id: string;
+            type: string;
+            rpcDriverName: string | undefined;
+        } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+            rendererTypeName: string;
+            error: unknown;
+            message: string | undefined;
+        } & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
+            id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+            type: import("mobx-state-tree").ISimpleType<string>;
+            rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+        }, {
+            rendererTypeName: string;
+            error: unknown;
+            message: string | undefined;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    }> | null;
+    readonly adapterConfig: any;
+    readonly parentTrack: any;
+    renderProps(): any;
+    readonly rendererType: import("@jbrowse/core/pluggableElementTypes").RendererType;
+    readonly DisplayMessageComponent: undefined | React.FC<any>;
+    trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
+    readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
+    regionCannotBeRendered(): null;
+} & {
+    setMessage(arg?: string): void;
+    setError(error?: unknown): void;
+    setRpcDriverName(rpcDriverName: string): void;
+    reload(): void;
+} & {
+    scrollTop: number;
+} & {
+    readonly height: number;
+} & {
+    setScrollTop(scrollTop: number): void;
+    setHeight(displayHeight: number): number;
+    resizeHeight(distance: number): number;
+} & {
+    featureDensityStatsP: undefined | Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats>;
+    featureDensityStats: undefined | import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats;
+    currStatsBpPerPx: number;
+} & {
+    readonly currentBytesRequested: number;
+    readonly currentFeatureScreenDensity: number;
+    readonly maxFeatureScreenDensity: any;
+    readonly featureDensityStatsReady: boolean;
+    readonly maxAllowableBytes: number;
+} & {
+    afterAttach(): void;
+} & {
+    setCurrStatsBpPerPx(n: number): void;
+    setFeatureDensityStatsLimit(stats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats): void;
+    getFeatureDensityStats(): Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats>;
+    setFeatureDensityStatsP(arg: any): void;
+    setFeatureDensityStats(featureDensityStats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats): void;
+    clearFeatureDensityStats(): void;
+} & {
+    readonly regionTooLarge: boolean;
+    readonly regionTooLargeReason: string;
+} & {
+    readonly statsReadyAndRegionNotTooLarge: boolean;
+    regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
+    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): import("react").JSX.Element | null;
+} & {
+    featureIdUnderMouse: undefined | string;
+    contextMenuFeature: undefined | Feature;
+} & {
+    readonly DisplayMessageComponent: import("react").FC<any> | undefined;
+    readonly blockType: "dynamicBlocks" | "staticBlocks";
+    readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
+} & {
+    readonly renderDelay: number;
+    readonly TooltipComponent: import("@jbrowse/core/util").AnyReactComponentType;
+    readonly selectedFeatureId: string | undefined;
+} & {
+    readonly features: import("@jbrowse/core/util/compositeMap").default<string, Feature>;
+    readonly featureUnderMouse: Feature | undefined;
+    getFeatureOverlapping(blockKey: string, x: number, y: number): string | undefined;
+    getFeatureByID(blockKey: string, id: string): [number, number, number, number] | undefined;
+    searchFeatureByID(id: string): [number, number, number, number] | undefined;
+} & {
+    addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
+    deleteBlock(key: string): void;
+    selectFeature(feature: Feature): void;
+    navToFeature(feature: Feature): void;
+    clearFeatureSelection(): void;
+    setFeatureIdUnderMouse(feature?: string): void;
+    setContextMenuFeature(feature?: Feature): void;
+} & {
+    reload(): Promise<void>;
+} & {
+    trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
+    contextMenuItems(): import("@jbrowse/core/ui").MenuItem[];
+    renderProps(): any;
+} & {
+    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
+    afterAttach(): void;
+} & {
+    message: undefined | string;
+} & {
+    selectFeature(feature: Feature): void;
+    setRendererType(val: string): void;
+} & {
+    readonly adapterTypeName: any;
+    readonly rendererTypeNameSimple: any;
+    readonly filters: undefined;
+} & {
+    readonly adapterCapabilities: string[];
+} & {
+    reload(): Promise<void>;
+}, {
+    type: string;
+} & Partial<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
+    id: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    type: import("mobx-state-tree").ISimpleType<string>;
+    rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
+} & {
+    heightPreConfig: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+} & {
+    userBpPerPxLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+    userByteSizeLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+} & {
+    blockState: import("mobx-state-tree").IMapType<import("mobx-state-tree").IModelType<{
+        key: import("mobx-state-tree").ISimpleType<string>;
+        region: import("mobx-state-tree").IType<import("@jbrowse/core/util").Region, import("@jbrowse/core/util").Region, import("@jbrowse/core/util").Region>;
+        reloadFlag: import("mobx-state-tree").IType<number | undefined, number, number>;
+        isLeftEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+        isRightEndOfDisplayedRegion: import("mobx-state-tree").IType<boolean | undefined, boolean, boolean>;
+    }, {
+        stopToken: string | undefined;
+        filled: boolean;
+        reactElement: React.ReactElement | undefined;
+        features: Map<string, Feature> | undefined;
+        layout: any;
+        status: string;
+        error: unknown;
+        message: string | undefined;
+        maxHeightReached: boolean;
+        ReactComponent: ({ model, }: {
+            model: {
+                error?: unknown;
+                reload: () => void;
+                message: React.ReactNode;
+                filled?: boolean;
+                status?: string;
+                reactElement?: React.ReactElement;
+            };
+        }) => import("react").JSX.Element | undefined;
+        renderProps: any;
+    } & {
+        doReload(): void;
+        afterAttach(): void;
+        setStatus(message: string): void;
+        setLoading(newStopToken: string): void;
+        setMessage(messageText: string): void;
+        setRendered(props: import("@jbrowse/plugin-linear-genome-view/src/BaseLinearDisplay/models/serverSideRenderedBlock").RenderedProps | undefined): void;
+        setError(error: unknown): void;
+        reload(): void;
+        beforeDestroy(): void;
+    }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+    configuration: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+        maxFeatureScreenDensity: {
+            type: string;
+            description: string;
+            defaultValue: number;
+        };
+        fetchSizeLimit: {
+            type: string;
+            defaultValue: number;
+            description: string;
+        };
+        height: {
+            type: string;
+            defaultValue: number;
+            description: string;
+        };
+        mouseover: {
+            type: string;
+            description: string;
+            defaultValue: string;
+            contextVariable: string[];
+        };
+        jexlFilters: {
+            type: string;
+            description: string;
+            defaultValue: never[];
+        };
+    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, "displayId">>;
+}>> & import("mobx-state-tree/dist/internal").NonEmptyObject & import("mobx-state-tree")._NotCustomized, {
+    type: string;
+    id: string;
+    configuration: import("mobx-state-tree").ModelSnapshotType<Record<string, any>>;
+    rpcDriverName: string | undefined;
+    heightPreConfig: number | undefined;
+    userBpPerPxLimit: number | undefined;
+    userByteSizeLimit: number | undefined;
+} & import("mobx-state-tree")._NotCustomized>;

package/esm/shared/SharedVariantMixin.js

@@ -0,0 +1,55 @@
+import { ConfigurationReference, getConf } from '@jbrowse/core/configuration';
+import { getEnv, getSession, isSelectionContainer } from '@jbrowse/core/util';
+import { BaseLinearDisplay } from '@jbrowse/plugin-linear-genome-view';
+import { types } from 'mobx-state-tree';
+export default function SharedVariantMixin(configSchema) {
+    return types
+        .compose(BaseLinearDisplay, types.model({
+        selectedRendering: types.optional(types.string, ''),
+        summaryScoreMode: types.maybe(types.string),
+        rendererTypeNameState: types.maybe(types.string),
+        configuration: ConfigurationReference(configSchema),
+    }))
+        .volatile(() => ({
+        message: undefined,
+    }))
+        .actions(self => ({
+        selectFeature(feature) {
+            const session = getSession(self);
+            if (isSelectionContainer(session)) {
+                session.setSelection(feature);
+            }
+        },
+        setRendererType(val) {
+            self.rendererTypeNameState = val;
+        },
+    }))
+        .views(self => ({
+        get adapterTypeName() {
+            return self.adapterConfig.type;
+        },
+        get rendererTypeNameSimple() {
+            var _a;
+            return (_a = self.rendererTypeNameState) !== null && _a !== void 0 ? _a : getConf(self, 'defaultRendering');
+        },
+        get filters() {
+            return undefined;
+        },
+    }))
+        .views(self => ({
+        get adapterCapabilities() {
+            const type = self.adapterTypeName;
+            const { pluginManager } = getEnv(self);
+            return pluginManager.getAdapterType(type).adapterCapabilities;
+        },
+    }))
+        .actions(self => {
+        const { reload: superReload } = self;
+        return {
+            async reload() {
+                self.setError();
+                superReload();
+            },
+        };
+    });
+}

package/esm/shared/SourcesGrid.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { Source } from '../util';
+declare function SourcesGrid({ rows, onChange, showTips, }: {
+    rows: Source[];
+    onChange: (arg: Source[]) => void;
+    showTips: boolean;
+}): React.JSX.Element;
+export default SourcesGrid;

package/esm/shared/SourcesGrid.js

@@ -0,0 +1,115 @@
+import React, { useState } from 'react';
+import { SanitizedHTML } from '@jbrowse/core/ui';
+import ColorPicker, { ColorPopover } from '@jbrowse/core/ui/ColorPicker';
+import { getStr, measureGridWidth } from '@jbrowse/core/util';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
+import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import KeyboardDoubleArrowUpIcon from '@mui/icons-material/KeyboardDoubleArrowUp';
+import { Button } from '@mui/material';
+import { DataGrid } from '@mui/x-data-grid';
+import { makeStyles } from 'tss-react/mui';
+import { moveDown, moveUp } from './util';
+const useStyles = makeStyles()({
+    cell: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+});
+function SourcesGrid({ rows, onChange, showTips, }) {
+    const { classes } = useStyles();
+    const [selected, setSelected] = useState([]);
+    const { name: _name, color: _color, baseUri: _baseUri, ...rest } = rows[0];
+    const [currSort, setCurrSort] = useState({
+        idx: 0,
+        field: null,
+    });
+    return (React.createElement("div", null,
+        React.createElement(GridHeader, { selected: selected, rows: rows, showTips: showTips, onChange: onChange }),
+        React.createElement("div", { style: { height: 400, width: '100%' } },
+            React.createElement(DataGrid, { getRowId: row => row.name, checkboxSelection: true, disableRowSelectionOnClick: true, onRowSelectionModelChange: arg => {
+                    setSelected(arg);
+                }, rows: rows, rowHeight: 25, columnHeaderHeight: 33, columns: [
+                    {
+                        field: 'color',
+                        headerName: 'Color',
+                        renderCell: params => {
+                            const { value, id } = params;
+                            return (React.createElement(ColorPicker, { color: value || 'blue', onChange: c => {
+                                    const elt = rows.find(f => f.name === id);
+                                    if (elt) {
+                                        elt.color = c;
+                                    }
+                                    onChange([...rows]);
+                                } }));
+                        },
+                    },
+                    {
+                        field: 'name',
+                        headerName: 'Name',
+                        width: measureGridWidth(rows.map(r => r.name)),
+                    },
+                    ...Object.keys(rest).map(val => ({
+                        field: val,
+                        renderCell: ({ value }) => (React.createElement("div", { className: classes.cell },
+                            React.createElement(SanitizedHTML, { html: getStr(value) }))),
+                        width: measureGridWidth(rows.map(r => `${r[val]}`)),
+                    })),
+                ], sortModel: [], onSortModelChange: args => {
+                    const sort = args[0];
+                    const idx = (currSort.idx + 1) % 2;
+                    const field = sort.field || currSort.field;
+                    setCurrSort({ idx, field });
+                    onChange(field
+                        ? [...rows].sort((a, b) => {
+                            const aa = getStr(a[field]);
+                            const bb = getStr(b[field]);
+                            return idx === 1
+                                ? aa.localeCompare(bb)
+                                : bb.localeCompare(aa);
+                        })
+                        : rows);
+                } }))));
+}
+function GridHeader({ selected, onChange, rows, showTips, }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [widgetColor, setWidgetColor] = useState('blue');
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { disabled: !selected.length, onClick: event => {
+                setAnchorEl(event.currentTarget);
+            } }, "Change color of selected items"),
+        React.createElement(Button, { onClick: () => {
+                onChange(moveUp([...rows], selected));
+            }, disabled: !selected.length },
+            React.createElement(KeyboardArrowUpIcon, null),
+            showTips ? 'Move selected items up' : null),
+        React.createElement(Button, { onClick: () => {
+                onChange(moveDown([...rows], selected));
+            }, disabled: !selected.length },
+            React.createElement(KeyboardArrowDownIcon, null),
+            showTips ? 'Move selected items down' : null),
+        React.createElement(Button, { onClick: () => {
+                onChange(moveUp([...rows], selected, rows.length));
+            }, disabled: !selected.length },
+            React.createElement(KeyboardDoubleArrowUpIcon, null),
+            showTips ? 'Move selected items to top' : null),
+        React.createElement(Button, { onClick: () => {
+                onChange(moveDown([...rows], selected, rows.length));
+            }, disabled: !selected.length },
+            React.createElement(KeyboardDoubleArrowDownIcon, null),
+            showTips ? 'Move selected items to bottom' : null),
+        React.createElement(ColorPopover, { anchorEl: anchorEl, color: widgetColor, onChange: c => {
+                setWidgetColor(c);
+                selected.forEach(id => {
+                    const elt = rows.find(f => f.name === id);
+                    if (elt) {
+                        elt.color = c;
+                    }
+                });
+                onChange([...rows]);
+            }, onClose: () => {
+                setAnchorEl(null);
+            } })));
+}
+export default SourcesGrid;

package/esm/shared/Tooltip.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import type { TooltipContentsComponent } from '../Tooltip';
+import type { Source } from '../util';
+import type { Feature } from '@jbrowse/core/util';
+type Coord = [number, number];
+declare const VariantTooltip: (props: {
+    model: {
+        featureUnderMouse: Feature;
+        sources: Source[];
+        rowHeight: number;
+    };
+    height: number;
+    offsetMouseCoord: Coord;
+    clientMouseCoord: Coord;
+    clientRect?: DOMRect;
+    TooltipContents?: TooltipContentsComponent;
+}) => React.JSX.Element;
+export default VariantTooltip;

package/esm/shared/Tooltip.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { observer } from 'mobx-react';
+import Tooltip from '../Tooltip';
+const en = (n) => n.toLocaleString('en-US');
+const TooltipContents = React.forwardRef(function TooltipContents2({ model, feature }, ref) {
+    const start = feature.get('start');
+    const end = feature.get('end');
+    const refName = feature.get('refName');
+    const coord = start === end ? en(start) : `${en(start)}..${en(end)}`;
+    const sources = feature.get('sources');
+    const source = feature.get('source');
+    const obj = Object.fromEntries(model.sources.map(ent => [ent.name, ent]));
+    return (React.createElement("div", { ref: ref },
+        [refName, coord].filter(f => !!f).join(':'),
+        React.createElement("br", null),
+        sources ? (React.createElement("table", null,
+            React.createElement("thead", null,
+                React.createElement("tr", null,
+                    React.createElement("th", null, "color"),
+                    React.createElement("th", null, "source"),
+                    React.createElement("th", null, "score"))),
+            React.createElement("tbody", null, Object.entries(sources).map(([source, data]) => {
+                var _a;
+                return (React.createElement("tr", { key: source },
+                    React.createElement("td", { style: { background: (_a = obj[source]) === null || _a === void 0 ? void 0 : _a.color } }, " "),
+                    React.createElement("td", null, source),
+                    React.createElement("td", null, data.score)));
+            })))) : (React.createElement("span", null, source))));
+});
+const VariantTooltip = observer((props) => {
+    return React.createElement(Tooltip, { useClientY: true, TooltipContents: TooltipContents, ...props });
+});
+export default VariantTooltip;

package/esm/shared/util.d.ts

@@ -0,0 +1,10 @@
+export declare function moveUp(arr: {
+    name: string;
+}[], sel: string[], by?: number): {
+    name: string;
+}[];
+export declare function moveDown(arr: {
+    name: string;
+}[], sel: string[], by?: number): {
+    name: string;
+}[];

package/esm/shared/util.js

@@ -0,0 +1,28 @@
+export function moveUp(arr, sel, by = 1) {
+    const idxs = sel
+        .map(l => arr.findIndex(v => v.name === l))
+        .sort((a, b) => a - b);
+    let lastIdx = 0;
+    for (const old of idxs) {
+        const idx = Math.max(lastIdx, old - by);
+        if (idx >= lastIdx) {
+            arr.splice(idx, 0, arr.splice(old, 1)[0]);
+        }
+        lastIdx = lastIdx + 1;
+    }
+    return arr;
+}
+export function moveDown(arr, sel, by = 1) {
+    const idxs = sel
+        .map(l => arr.findIndex(v => v.name === l))
+        .sort((a, b) => b - a);
+    let lastIdx = arr.length - 1;
+    for (const old of idxs) {
+        const idx = Math.min(lastIdx, old + by);
+        if (idx <= lastIdx) {
+            arr.splice(idx, 0, arr.splice(old, 1)[0]);
+        }
+        lastIdx = lastIdx - 1;
+    }
+    return arr;
+}

package/esm/util.d.ts

@@ -0,0 +1,11 @@
+export interface Source {
+    baseUri?: string;
+    name: string;
+    color?: string;
+    group?: string;
+    [key: string]: unknown;
+}
+export declare function fillRectCtx(x: number, y: number, width: number, height: number, ctx: CanvasRenderingContext2D, color?: string): void;
+export declare function getCol(gt: string): "#ccc" | "teal" | "blue" | "#CBC3E3";
+export declare const colorPaletteDefault: string[];
+export declare function randomColor(str: string): string;

package/esm/util.js

@@ -0,0 +1,47 @@
+export function fillRectCtx(x, y, width, height, ctx, color) {
+    if (width < 0) {
+        x += width;
+        width = -width;
+    }
+    if (height < 0) {
+        y += height;
+        height = -height;
+    }
+    if (color) {
+        ctx.fillStyle = color;
+    }
+    ctx.fillRect(x, y, width, height);
+}
+export function getCol(gt) {
+    if (gt === '0|0' || gt === '0/0') {
+        return '#ccc';
+    }
+    else if (gt === '1|0' || gt === '0|1' || gt === '0/1' || gt === '1/0') {
+        return 'teal';
+    }
+    else if (gt === '1|1' || gt === '1/1') {
+        return 'blue';
+    }
+    else {
+        return '#CBC3E3';
+    }
+}
+export const colorPaletteDefault = [
+    'red',
+    'blue',
+    'green',
+    'orange',
+    'purple',
+    'cyan',
+    'pink',
+    'darkblue',
+    'darkred',
+    'pink',
+];
+export function randomColor(str) {
+    let sum = 0;
+    for (let i = 0; i < str.length; i++) {
+        sum += str.charCodeAt(i);
+    }
+    return `hsl(${sum * 10}, 20%, 50%)`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-variants",
-  "version": "2.16.1",
+  "version": "2.18.0",
   "description": "JBrowse 2 variant adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -39,8 +39,8 @@
     "@flatten-js/interval-tree": "^1.0.15",
     "@gmod/bgzf-filehandle": "^1.4.3",
     "@gmod/tabix": "^1.5.6",
-    "@gmod/vcf": "^5.0.9",
-    "@jbrowse/sv-core": "^2.16.1",
+    "@gmod/vcf": "^6.0.0",
+    "@jbrowse/sv-core": "^2.18.0",
     "@mui/icons-material": "^6.0.0",
     "@mui/x-data-grid": "^7.0.0",
     "generic-filehandle": "^3.0.0"
@@ -63,5 +63,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "c6a658d2344989895543f0456b1cf7dd3b937769"
+  "gitHead": "c344ea60099cb7e460b77f15808946b24a7eee74"
 }