@jbrowse/plugin-variants 2.6.3 → 2.7.1

package/dist/ChordVariantDisplay/models/stateModelFactory.d.ts

@@ -31,9 +31,7 @@ declare const stateModelFactory: (configSchema: AnyConfigurationSchemaType) => i
     configuration: AnyConfigurationSchemaType;
 }, {
     rendererTypeName: string;
-    error: unknown; /**
-     * #property
-     */
+    error: unknown;
     message: string | undefined;
 } & {
     readonly RenderingComponent: import("react").FC<{
@@ -43,9 +41,7 @@ declare const stateModelFactory: (configSchema: AnyConfigurationSchemaType) => i
             rpcDriverName: string | undefined;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
-            error: unknown; /**
-             * #method
-             */
+            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]>;

package/dist/StructuralVariantChordRenderer/Chord.d.ts

@@ -20,9 +20,7 @@ export interface Block {
 }
 declare const Chord: ({ feature, blocksForRefs, radius, config, bezierRadius, selected, onClick, }: {
     feature: Feature;
-    blocksForRefs: {
-        [key: string]: Block;
-    };
+    blocksForRefs: Record<string, Block>;
     radius: number;
     config: AnyConfigurationModel;
     bezierRadius: number;

package/dist/StructuralVariantChordRenderer/ReactComponent.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { Feature } from '@jbrowse/core/util';
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import { Block, AnyRegion } from './Chord';
-declare const _default: ({ features, config, displayModel, blockDefinitions, radius, bezierRadius, displayModel: { selectedFeatureId }, onChordClick, }: {
+declare const StructuralVariantChordsReactComponent: ({ features, config, displayModel, blockDefinitions, radius, bezierRadius, displayModel: { selectedFeatureId }, onChordClick, }: {
     features: Map<string, Feature>;
     radius: number;
     config: AnyConfigurationModel;
@@ -14,4 +14,4 @@ declare const _default: ({ features, config, displayModel, blockDefinitions, rad
     bezierRadius: number;
     onChordClick: (feature: Feature, reg: AnyRegion, endBlock: AnyRegion, evt: unknown) => void;
 }) => React.JSX.Element;
-export default _default;
+export default StructuralVariantChordsReactComponent;

package/dist/StructuralVariantChordRenderer/ReactComponent.js

@@ -30,7 +30,7 @@ const react_1 = __importStar(require("react"));
 const mobx_react_1 = require("mobx-react");
 // locals
 const Chord_1 = __importDefault(require("./Chord"));
-exports.default = (0, mobx_react_1.observer)(function StructuralVariantChords({ features, config, displayModel, blockDefinitions, radius, bezierRadius, displayModel: { selectedFeatureId }, onChordClick, }) {
+const StructuralVariantChordsReactComponent = (0, mobx_react_1.observer)(function ({ features, config, displayModel, blockDefinitions, radius, bezierRadius, displayModel: { selectedFeatureId }, onChordClick, }) {
     // make a map of refName -> blockDefinition
     const blocksForRefsMemo = (0, react_1.useMemo)(() => {
         const blocksForRefs = {};
@@ -60,3 +60,4 @@ exports.default = (0, mobx_react_1.observer)(function StructuralVariantChords({
             } }),
         chords));
 });
+exports.default = StructuralVariantChordsReactComponent;

package/dist/VariantFeatureWidget/AnnotGrid.js

@@ -22,14 +22,18 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 react_1 = __importStar(require("react"));
 const x_data_grid_1 = require("@mui/x-data-grid");
 const material_1 = require("@mui/material");
-const ResizeBar_1 = __importStar(require("@jbrowse/core/ui/ResizeBar"));
+const ResizeBar_1 = __importDefault(require("@jbrowse/core/ui/ResizeBar"));
 const util_1 = require("@jbrowse/core/util");
+const useResizeBar_1 = require("@jbrowse/core/ui/useResizeBar");
 function VariantAnnotPanel({ rows, columns, }) {
-    const { ref, scrollLeft } = (0, ResizeBar_1.useResizeBar)();
+    const { ref, scrollLeft } = (0, useResizeBar_1.useResizeBar)();
     const [checked, setChecked] = (0, react_1.useState)(false);
     const [widths, setWidths] = (0, react_1.useState)(columns.map(e => (0, util_1.measureGridWidth)(rows.map(r => r[e.field]))));
     return rows.length ? (react_1.default.createElement("div", { ref: ref },

package/dist/VariantFeatureWidget/BreakendOptionDialog.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Feature } from '@jbrowse/core/util';
-declare const _default: ({ model, handleClose, feature, viewType, }: {
+declare const BreakendOptionDialog: ({ model, handleClose, feature, viewType, }: {
     model: any;
     handleClose: () => void;
     feature: Feature;
     viewType: any;
 }) => React.JSX.Element;
-export default _default;
+export default BreakendOptionDialog;

package/dist/VariantFeatureWidget/BreakendOptionDialog.js

@@ -37,7 +37,7 @@ const useStyles = (0, mui_1.makeStyles)()({
         display: 'block',
     },
 });
-exports.default = (0, mobx_react_1.observer)(function BreakendOptionDialog({ model, handleClose, feature, viewType, }) {
+const BreakendOptionDialog = (0, mobx_react_1.observer)(function ({ model, handleClose, feature, viewType, }) {
     const { classes } = useStyles();
     const [copyTracks, setCopyTracks] = (0, react_1.useState)(true);
     const [mirrorTracks, setMirrorTracks] = (0, react_1.useState)(true);
@@ -74,3 +74,4 @@ exports.default = (0, mobx_react_1.observer)(function BreakendOptionDialog({ mod
                 }, variant: "contained", color: "primary", autoFocus: true }, "OK"),
             react_1.default.createElement(material_1.Button, { onClick: () => handleClose(), color: "secondary", variant: "contained" }, "Cancel"))));
 });
+exports.default = BreakendOptionDialog;

package/dist/VariantFeatureWidget/VariantFeatureWidget.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 import { SimpleFeatureSerialized } from '@jbrowse/core/util';
-declare function VariantFeatureDetails(props: {
+declare const VariantFeatureWidget: (props: {
     model: {
         featureData: SimpleFeatureSerialized;
         descriptions: Record<string, string>;
     };
-}): React.JSX.Element;
-declare const _default: typeof VariantFeatureDetails;
-export default _default;
+}) => React.JSX.Element;
+export default VariantFeatureWidget;

package/dist/VariantFeatureWidget/VariantFeatureWidget.js

@@ -21,22 +21,6 @@ const basicDescriptions = {
     QUAL: 'quality: Phred-scaled quality score for the assertion made in ALT',
     FILTER: 'filter status: PASS if this position has passed all filters, otherwise a semicolon-separated list of codes for filters that fail',
 };
-function VariantFeatureDetails(props) {
-    const { model } = props;
-    const { featureData, descriptions } = model;
-    const feat = JSON.parse(JSON.stringify(featureData));
-    const { samples, ...rest } = feat;
-    return (react_1.default.createElement(material_1.Paper, { "data-testid": "variant-side-drawer" },
-        react_1.default.createElement(BaseFeatureDetail_1.FeatureDetails, { feature: rest, descriptions: { ...basicDescriptions, ...descriptions }, ...props }),
-        react_1.default.createElement(material_1.Divider, null),
-        react_1.default.createElement(CsqPanel, { feature: rest, descriptions: descriptions }),
-        react_1.default.createElement(material_1.Divider, null),
-        react_1.default.createElement(AnnPanel, { feature: rest, descriptions: descriptions }),
-        react_1.default.createElement(material_1.Divider, null),
-        feat.type === 'breakend' ? (react_1.default.createElement(BreakendPanel_1.default, { feature: feat, locStrings: feat.ALT.map((alt) => { var _a; return ((_a = (0, vcf_1.parseBreakend)(alt)) === null || _a === void 0 ? void 0 : _a.MatePosition) || ''; }), model: model })) : null,
-        feat.type === 'translocation' ? (react_1.default.createElement(BreakendPanel_1.default, { feature: feat, model: model, locStrings: [`${feat.INFO.CHR2[0]}:${feat.INFO.END}`] })) : null,
-        react_1.default.createElement(VariantSampleGrid_1.default, { feature: feat, ...props, descriptions: descriptions })));
-}
 function AnnPanel({ descriptions, feature, }) {
     var _a, _b, _c, _d;
     const annDesc = (_b = (_a = descriptions === null || descriptions === void 0 ? void 0 : descriptions.INFO) === null || _a === void 0 ? void 0 : _a.ANN) === null || _b === void 0 ? void 0 : _b.Description;
@@ -51,4 +35,20 @@ function CsqPanel({ descriptions, feature, }) {
     const csq = ((_d = feature.INFO) === null || _d === void 0 ? void 0 : _d.CSQ) || [];
     return (react_1.default.createElement(VariantAnnotationTable_1.default, { fields: csqFields, data: csq, title: "Variant CSQ field" }));
 }
-exports.default = (0, mobx_react_1.observer)(VariantFeatureDetails);
+const VariantFeatureWidget = (0, mobx_react_1.observer)(function (props) {
+    const { model } = props;
+    const { featureData, descriptions } = model;
+    const feat = JSON.parse(JSON.stringify(featureData));
+    const { samples, ...rest } = feat;
+    return (react_1.default.createElement(material_1.Paper, { "data-testid": "variant-side-drawer" },
+        react_1.default.createElement(BaseFeatureDetail_1.FeatureDetails, { feature: rest, descriptions: { ...basicDescriptions, ...descriptions }, ...props }),
+        react_1.default.createElement(material_1.Divider, null),
+        react_1.default.createElement(CsqPanel, { feature: rest, descriptions: descriptions }),
+        react_1.default.createElement(material_1.Divider, null),
+        react_1.default.createElement(AnnPanel, { feature: rest, descriptions: descriptions }),
+        react_1.default.createElement(material_1.Divider, null),
+        feat.type === 'breakend' ? (react_1.default.createElement(BreakendPanel_1.default, { feature: feat, locStrings: feat.ALT.map((alt) => { var _a; return ((_a = (0, vcf_1.parseBreakend)(alt)) === null || _a === void 0 ? void 0 : _a.MatePosition) || ''; }), model: model })) : null,
+        feat.type === 'translocation' ? (react_1.default.createElement(BreakendPanel_1.default, { feature: feat, model: model, locStrings: [`${feat.INFO.CHR2[0]}:${feat.INFO.END}`] })) : null,
+        react_1.default.createElement(VariantSampleGrid_1.default, { feature: feat, ...props, descriptions: descriptions })));
+});
+exports.default = VariantFeatureWidget;

package/dist/VariantFeatureWidget/VariantSampleGrid.d.ts

@@ -3,10 +3,8 @@ import { SimpleFeatureSerialized } from '@jbrowse/core/util';
 export default function VariantSamples(props: {
     feature: SimpleFeatureSerialized;
     descriptions: {
-        FORMAT?: {
-            [key: string]: {
-                Description?: string;
-            };
-        };
+        FORMAT?: Record<string, {
+            Description?: string;
+        }>;
     };
 }): React.JSX.Element | null;

package/dist/VariantFeatureWidget/VariantSampleGrid.js

@@ -22,13 +22,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __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 react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const x_data_grid_1 = require("@mui/x-data-grid");
 const BaseFeatureDetail_1 = require("@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail");
 const util_1 = require("@jbrowse/core/util");
-const ResizeBar_1 = __importStar(require("@jbrowse/core/ui/ResizeBar"));
+const ResizeBar_1 = __importDefault(require("@jbrowse/core/ui/ResizeBar"));
+const useResizeBar_1 = require("@jbrowse/core/ui/useResizeBar");
 function SampleFilters({ columns, filter, setFilter, }) {
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(material_1.Typography, null, "These filters can use a plain text search or regex style query, e.g. in the genotype field, entering 1 will query for all genotypes that include the first alternate allele e.g. 0|1 or 1|1, entering [1-9]\\d* will find any non-zero allele e.g. 0|2 or 2/33"),
@@ -37,7 +41,7 @@ function SampleFilters({ columns, filter, setFilter, }) {
 function VariantSamples(props) {
     var _a;
     const { feature, descriptions = {} } = props;
-    const { ref, scrollLeft } = (0, ResizeBar_1.useResizeBar)();
+    const { ref, scrollLeft } = (0, useResizeBar_1.useResizeBar)();
     const [filter, setFilter] = (0, react_1.useState)({});
     const samples = (feature.samples || {});
     const preFilteredRows = Object.entries(samples);

package/dist/VcfAdapter/VcfAdapter.d.ts

@@ -11,9 +11,7 @@ export default class VcfAdapter extends BaseFeatureDataAdapter {
     getMetadata(): Promise<any>;
     setupP(): Promise<{
         header: string;
-        intervalTree: {
-            [key: string]: IntervalTree<any>;
-        };
+        intervalTree: Record<string, IntervalTree<any>>;
     }>;
     setup(): Promise<{
         header: string;

package/dist/VcfFeature/index.d.ts

@@ -1,12 +1,8 @@
 import { Feature } from '@jbrowse/core/util';
 import VCF from '@gmod/vcf';
-interface Samples {
-    [key: string]: {
-        [key: string]: {
-            values: string[] | number[] | null;
-        };
-    };
-}
+type Samples = Record<string, Record<string, {
+    values: string[] | number[] | null;
+}>>;
 interface FeatureData {
     [key: string]: unknown;
     refName: string;

package/dist/VcfFeature/util.js

@@ -42,14 +42,14 @@ function getSOTermAndDescription(ref, alt, parser) {
             const prefix = desc.split('->');
             return prefix[1] ? prefix[0] : desc;
         }));
-        descriptions = new Set([...prefixes].map(prefix => {
+        descriptions = new Set([...prefixes]
+            .map(r => r.trim())
+            .map(prefix => {
             const suffixes = descs
-                .map(desc => {
-                const pref = desc.split('-> ');
-                return pref[1] && pref[0] === prefix ? pref[1] : '';
-            })
+                .map(desc => desc.split('->').map(r => r.trim()))
+                .map(pref => (pref[1] && pref[0] === prefix ? pref[1] : ''))
                 .filter(f => !!f);
-            return suffixes.length ? prefix + '-> ' + suffixes.join(',') : prefix;
+            return suffixes.length ? `${prefix} -> ${suffixes.join(',')}` : prefix;
         }));
     }
     if (soTerms.size) {
@@ -98,7 +98,7 @@ function getSOAndDescByExamination(ref, alt) {
         return ['deletion', alt];
     }
     else if (alt === '<INV>') {
-        return ['deletion', alt];
+        return ['inversion', alt];
     }
     else if (alt === '<TRA>') {
         return ['translocation', alt];
@@ -112,10 +112,20 @@ function getSOAndDescByExamination(ref, alt) {
             : ['substitution', makeDescriptionString('substitution', ref, alt)];
     }
     else if (ref.length <= alt.length) {
-        return ['insertion', makeDescriptionString('insertion', ref, alt)];
+        const len = alt.length - ref.length;
+        const lena = len.toLocaleString('en-US');
+        return [
+            'insertion',
+            len > 5 ? lena + 'bp INS' : makeDescriptionString('insertion', ref, alt),
+        ];
     }
     else if (ref.length > alt.length) {
-        return ['deletion', makeDescriptionString('deletion', ref, alt)];
+        const len = ref.length - alt.length;
+        const lena = len.toLocaleString('en-US');
+        return [
+            'deletion',
+            len > 5 ? lena + 'bp DEL' : makeDescriptionString('deletion', ref, alt),
+        ];
     }
     return ['indel', makeDescriptionString('indel', ref, alt)];
 }

package/esm/ChordVariantDisplay/models/stateModelFactory.d.ts

@@ -31,9 +31,7 @@ declare const stateModelFactory: (configSchema: AnyConfigurationSchemaType) => i
     configuration: AnyConfigurationSchemaType;
 }, {
     rendererTypeName: string;
-    error: unknown; /**
-     * #property
-     */
+    error: unknown;
     message: string | undefined;
 } & {
     readonly RenderingComponent: import("react").FC<{
@@ -43,9 +41,7 @@ declare const stateModelFactory: (configSchema: AnyConfigurationSchemaType) => i
             rpcDriverName: string | undefined;
         } & import("mobx-state-tree/dist/internal").NonEmptyObject & {
             rendererTypeName: string;
-            error: unknown; /**
-             * #method
-             */
+            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]>;

package/esm/ChordVariantDisplay/models/stateModelFactory.js

@@ -1,4 +1,4 @@
-import { BaseChordDisplayModel } from '@jbrowse/plugin-circular-view';
+import { BaseChordDisplayModel, } from '@jbrowse/plugin-circular-view';
 import { ConfigurationReference, } from '@jbrowse/core/configuration';
 import { types } from 'mobx-state-tree';
 import { getContainingView } from '@jbrowse/core/util';

package/esm/StructuralVariantChordRenderer/Chord.d.ts

@@ -20,9 +20,7 @@ export interface Block {
 }
 declare const Chord: ({ feature, blocksForRefs, radius, config, bezierRadius, selected, onClick, }: {
     feature: Feature;
-    blocksForRefs: {
-        [key: string]: Block;
-    };
+    blocksForRefs: Record<string, Block>;
     radius: number;
     config: AnyConfigurationModel;
     bezierRadius: number;

package/esm/StructuralVariantChordRenderer/ReactComponent.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { Feature } from '@jbrowse/core/util';
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import { Block, AnyRegion } from './Chord';
-declare const _default: ({ features, config, displayModel, blockDefinitions, radius, bezierRadius, displayModel: { selectedFeatureId }, onChordClick, }: {
+declare const StructuralVariantChordsReactComponent: ({ features, config, displayModel, blockDefinitions, radius, bezierRadius, displayModel: { selectedFeatureId }, onChordClick, }: {
     features: Map<string, Feature>;
     radius: number;
     config: AnyConfigurationModel;
@@ -14,4 +14,4 @@ declare const _default: ({ features, config, displayModel, blockDefinitions, rad
     bezierRadius: number;
     onChordClick: (feature: Feature, reg: AnyRegion, endBlock: AnyRegion, evt: unknown) => void;
 }) => React.JSX.Element;
-export default _default;
+export default StructuralVariantChordsReactComponent;

package/esm/StructuralVariantChordRenderer/ReactComponent.js

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { observer } from 'mobx-react';
 // locals
 import Chord from './Chord';
-export default observer(function StructuralVariantChords({ features, config, displayModel, blockDefinitions, radius, bezierRadius, displayModel: { selectedFeatureId }, onChordClick, }) {
+const StructuralVariantChordsReactComponent = observer(function ({ features, config, displayModel, blockDefinitions, radius, bezierRadius, displayModel: { selectedFeatureId }, onChordClick, }) {
     // make a map of refName -> blockDefinition
     const blocksForRefsMemo = useMemo(() => {
         const blocksForRefs = {};
@@ -32,3 +32,4 @@ export default observer(function StructuralVariantChords({ features, config, dis
             } }),
         chords));
 });
+export default StructuralVariantChordsReactComponent;

package/esm/VariantFeatureWidget/AnnotGrid.js

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
 import { DataGrid, GridToolbar, } from '@mui/x-data-grid';
 import { Checkbox, FormControlLabel, Typography } from '@mui/material';
-import ResizeBar, { useResizeBar } from '@jbrowse/core/ui/ResizeBar';
+import ResizeBar from '@jbrowse/core/ui/ResizeBar';
 import { measureGridWidth } from '@jbrowse/core/util';
+import { useResizeBar } from '@jbrowse/core/ui/useResizeBar';
 export default function VariantAnnotPanel({ rows, columns, }) {
     const { ref, scrollLeft } = useResizeBar();
     const [checked, setChecked] = useState(false);

package/esm/VariantFeatureWidget/BreakendOptionDialog.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Feature } from '@jbrowse/core/util';
-declare const _default: ({ model, handleClose, feature, viewType, }: {
+declare const BreakendOptionDialog: ({ model, handleClose, feature, viewType, }: {
     model: any;
     handleClose: () => void;
     feature: Feature;
     viewType: any;
 }) => React.JSX.Element;
-export default _default;
+export default BreakendOptionDialog;

package/esm/VariantFeatureWidget/BreakendOptionDialog.js

@@ -12,7 +12,7 @@ const useStyles = makeStyles()({
         display: 'block',
     },
 });
-export default observer(function BreakendOptionDialog({ model, handleClose, feature, viewType, }) {
+const BreakendOptionDialog = observer(function ({ model, handleClose, feature, viewType, }) {
     const { classes } = useStyles();
     const [copyTracks, setCopyTracks] = useState(true);
     const [mirrorTracks, setMirrorTracks] = useState(true);
@@ -49,3 +49,4 @@ export default observer(function BreakendOptionDialog({ model, handleClose, feat
                 }, variant: "contained", color: "primary", autoFocus: true }, "OK"),
             React.createElement(Button, { onClick: () => handleClose(), color: "secondary", variant: "contained" }, "Cancel"))));
 });
+export default BreakendOptionDialog;

package/esm/VariantFeatureWidget/VariantFeatureWidget.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
 import { SimpleFeatureSerialized } from '@jbrowse/core/util';
-declare function VariantFeatureDetails(props: {
+declare const VariantFeatureWidget: (props: {
     model: {
         featureData: SimpleFeatureSerialized;
         descriptions: Record<string, string>;
     };
-}): React.JSX.Element;
-declare const _default: typeof VariantFeatureDetails;
-export default _default;
+}) => React.JSX.Element;
+export default VariantFeatureWidget;

package/esm/VariantFeatureWidget/VariantFeatureWidget.js

@@ -16,22 +16,6 @@ const basicDescriptions = {
     QUAL: 'quality: Phred-scaled quality score for the assertion made in ALT',
     FILTER: 'filter status: PASS if this position has passed all filters, otherwise a semicolon-separated list of codes for filters that fail',
 };
-function VariantFeatureDetails(props) {
-    const { model } = props;
-    const { featureData, descriptions } = model;
-    const feat = JSON.parse(JSON.stringify(featureData));
-    const { samples, ...rest } = feat;
-    return (React.createElement(Paper, { "data-testid": "variant-side-drawer" },
-        React.createElement(FeatureDetails, { feature: rest, descriptions: { ...basicDescriptions, ...descriptions }, ...props }),
-        React.createElement(Divider, null),
-        React.createElement(CsqPanel, { feature: rest, descriptions: descriptions }),
-        React.createElement(Divider, null),
-        React.createElement(AnnPanel, { feature: rest, descriptions: descriptions }),
-        React.createElement(Divider, null),
-        feat.type === 'breakend' ? (React.createElement(BreakendPanel, { feature: feat, locStrings: feat.ALT.map((alt) => { var _a; return ((_a = parseBreakend(alt)) === null || _a === void 0 ? void 0 : _a.MatePosition) || ''; }), model: model })) : null,
-        feat.type === 'translocation' ? (React.createElement(BreakendPanel, { feature: feat, model: model, locStrings: [`${feat.INFO.CHR2[0]}:${feat.INFO.END}`] })) : null,
-        React.createElement(VariantSampleGrid, { feature: feat, ...props, descriptions: descriptions })));
-}
 function AnnPanel({ descriptions, feature, }) {
     var _a, _b, _c, _d;
     const annDesc = (_b = (_a = descriptions === null || descriptions === void 0 ? void 0 : descriptions.INFO) === null || _a === void 0 ? void 0 : _a.ANN) === null || _b === void 0 ? void 0 : _b.Description;
@@ -46,4 +30,20 @@ function CsqPanel({ descriptions, feature, }) {
     const csq = ((_d = feature.INFO) === null || _d === void 0 ? void 0 : _d.CSQ) || [];
     return (React.createElement(VariantAnnotationTable, { fields: csqFields, data: csq, title: "Variant CSQ field" }));
 }
-export default observer(VariantFeatureDetails);
+const VariantFeatureWidget = observer(function (props) {
+    const { model } = props;
+    const { featureData, descriptions } = model;
+    const feat = JSON.parse(JSON.stringify(featureData));
+    const { samples, ...rest } = feat;
+    return (React.createElement(Paper, { "data-testid": "variant-side-drawer" },
+        React.createElement(FeatureDetails, { feature: rest, descriptions: { ...basicDescriptions, ...descriptions }, ...props }),
+        React.createElement(Divider, null),
+        React.createElement(CsqPanel, { feature: rest, descriptions: descriptions }),
+        React.createElement(Divider, null),
+        React.createElement(AnnPanel, { feature: rest, descriptions: descriptions }),
+        React.createElement(Divider, null),
+        feat.type === 'breakend' ? (React.createElement(BreakendPanel, { feature: feat, locStrings: feat.ALT.map((alt) => { var _a; return ((_a = parseBreakend(alt)) === null || _a === void 0 ? void 0 : _a.MatePosition) || ''; }), model: model })) : null,
+        feat.type === 'translocation' ? (React.createElement(BreakendPanel, { feature: feat, model: model, locStrings: [`${feat.INFO.CHR2[0]}:${feat.INFO.END}`] })) : null,
+        React.createElement(VariantSampleGrid, { feature: feat, ...props, descriptions: descriptions })));
+});
+export default VariantFeatureWidget;

package/esm/VariantFeatureWidget/VariantSampleGrid.d.ts

@@ -3,10 +3,8 @@ import { SimpleFeatureSerialized } from '@jbrowse/core/util';
 export default function VariantSamples(props: {
     feature: SimpleFeatureSerialized;
     descriptions: {
-        FORMAT?: {
-            [key: string]: {
-                Description?: string;
-            };
-        };
+        FORMAT?: Record<string, {
+            Description?: string;
+        }>;
     };
 }): React.JSX.Element | null;

package/esm/VariantFeatureWidget/VariantSampleGrid.js

@@ -3,7 +3,8 @@ import { FormControlLabel, Checkbox, TextField, Typography, } from '@mui/materia
 import { DataGrid, GridToolbar } from '@mui/x-data-grid';
 import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
 import { measureGridWidth } from '@jbrowse/core/util';
-import ResizeBar, { useResizeBar } from '@jbrowse/core/ui/ResizeBar';
+import ResizeBar from '@jbrowse/core/ui/ResizeBar';
+import { useResizeBar } from '@jbrowse/core/ui/useResizeBar';
 function SampleFilters({ columns, filter, setFilter, }) {
     return (React.createElement(React.Fragment, null,
         React.createElement(Typography, null, "These filters can use a plain text search or regex style query, e.g. in the genotype field, entering 1 will query for all genotypes that include the first alternate allele e.g. 0|1 or 1|1, entering [1-9]\\d* will find any non-zero allele e.g. 0|2 or 2/33"),

package/esm/VcfAdapter/VcfAdapter.d.ts

@@ -11,9 +11,7 @@ export default class VcfAdapter extends BaseFeatureDataAdapter {
     getMetadata(): Promise<any>;
     setupP(): Promise<{
         header: string;
-        intervalTree: {
-            [key: string]: IntervalTree<any>;
-        };
+        intervalTree: Record<string, IntervalTree<any>>;
     }>;
     setup(): Promise<{
         header: string;

package/esm/VcfFeature/index.d.ts

@@ -1,12 +1,8 @@
 import { Feature } from '@jbrowse/core/util';
 import VCF from '@gmod/vcf';
-interface Samples {
-    [key: string]: {
-        [key: string]: {
-            values: string[] | number[] | null;
-        };
-    };
-}
+type Samples = Record<string, Record<string, {
+    values: string[] | number[] | null;
+}>>;
 interface FeatureData {
     [key: string]: unknown;
     refName: string;

package/esm/VcfFeature/util.js

@@ -39,14 +39,14 @@ export function getSOTermAndDescription(ref, alt, parser) {
             const prefix = desc.split('->');
             return prefix[1] ? prefix[0] : desc;
         }));
-        descriptions = new Set([...prefixes].map(prefix => {
+        descriptions = new Set([...prefixes]
+            .map(r => r.trim())
+            .map(prefix => {
             const suffixes = descs
-                .map(desc => {
-                const pref = desc.split('-> ');
-                return pref[1] && pref[0] === prefix ? pref[1] : '';
-            })
+                .map(desc => desc.split('->').map(r => r.trim()))
+                .map(pref => (pref[1] && pref[0] === prefix ? pref[1] : ''))
                 .filter(f => !!f);
-            return suffixes.length ? prefix + '-> ' + suffixes.join(',') : prefix;
+            return suffixes.length ? `${prefix} -> ${suffixes.join(',')}` : prefix;
         }));
     }
     if (soTerms.size) {
@@ -93,7 +93,7 @@ export function getSOAndDescByExamination(ref, alt) {
         return ['deletion', alt];
     }
     else if (alt === '<INV>') {
-        return ['deletion', alt];
+        return ['inversion', alt];
     }
     else if (alt === '<TRA>') {
         return ['translocation', alt];
@@ -107,10 +107,20 @@ export function getSOAndDescByExamination(ref, alt) {
             : ['substitution', makeDescriptionString('substitution', ref, alt)];
     }
     else if (ref.length <= alt.length) {
-        return ['insertion', makeDescriptionString('insertion', ref, alt)];
+        const len = alt.length - ref.length;
+        const lena = len.toLocaleString('en-US');
+        return [
+            'insertion',
+            len > 5 ? lena + 'bp INS' : makeDescriptionString('insertion', ref, alt),
+        ];
     }
     else if (ref.length > alt.length) {
-        return ['deletion', makeDescriptionString('deletion', ref, alt)];
+        const len = ref.length - alt.length;
+        const lena = len.toLocaleString('en-US');
+        return [
+            'deletion',
+            len > 5 ? lena + 'bp DEL' : makeDescriptionString('deletion', ref, alt),
+        ];
     }
     return ['indel', makeDescriptionString('indel', ref, alt)];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-variants",
-  "version": "2.6.3",
+  "version": "2.7.1",
   "description": "JBrowse 2 variant adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -51,7 +51,7 @@
     "@jbrowse/plugin-linear-genome-view": "^2.0.0",
     "@mui/material": "^5.0.0",
     "mobx": "^6.0.0",
-    "mobx-react": "^7.0.0",
+    "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.0.0",
     "react": ">=16.8.0",
     "rxjs": "^7.0.0",
@@ -63,5 +63,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "ed402c87efb0904858d602c363bd1757d5742129"
+  "gitHead": "2cda1611eebd12517f2a3cfc1b612face27005d4"
 }