@jbrowse/plugin-variants 2.5.0 → 2.6.1

package/esm/LinearVariantDisplay/model.d.ts

@@ -13,6 +13,13 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     rpcDriverName: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
 } & {
     heightPreConfig: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
+} & {
+    /**
+     * #property
+     */
+    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").IModelType<{
@@ -59,8 +66,6 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
         reload(): void;
         beforeDestroy(): void;
     }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
-    userBpPerPxLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
-    userByteSizeLimit: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
     configuration: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
         maxFeatureScreenDensity: {
             type: string;
@@ -70,18 +75,12 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
         fetchSizeLimit: {
             type: string;
             defaultValue: number;
-            description: string; /**
-             * #property
-             */
-        }; /**
-         * #property
-         */
+            description: string;
+        };
         height: {
             type: string;
             defaultValue: number;
-            description: string; /**
-             * #action
-             */
+            description: string;
         };
         mouseover: {
             type: string;
@@ -93,9 +92,7 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
 } & {
     type: import("mobx-state-tree").ISimpleType<"LinearBasicDisplay">;
     trackShowLabels: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
-    trackShowDescriptions: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>; /**
-     * #action
-     */
+    trackShowDescriptions: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<boolean>>;
     trackDisplayMode: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<string>>;
     trackMaxHeight: import("mobx-state-tree").IMaybe<import("mobx-state-tree").ISimpleType<number>>;
     configuration: AnyConfigurationSchemaType;
@@ -111,6 +108,7 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
 }, {
     rendererTypeName: string;
     error: unknown;
+    message: string | undefined;
 } & {
     readonly RenderingComponent: import("react").FC<{
         model: {
@@ -120,6 +118,7 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
         } & 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>;
@@ -127,6 +126,7 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
         }, {
             rendererTypeName: string;
             error: unknown;
+            message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
         onHorizontalScroll?: Function | undefined;
         blockState?: Record<string, any> | undefined;
@@ -139,6 +139,7 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
         } & 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>;
@@ -146,6 +147,7 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
         }, {
             rendererTypeName: string;
             error: unknown;
+            message: string | undefined;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
     }> | null;
     readonly adapterConfig: any;
@@ -155,21 +157,49 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     readonly DisplayMessageComponent: import("react").FC<any> | undefined;
     trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     readonly viewMenuActions: import("@jbrowse/core/ui").MenuItem[];
-    regionCannotBeRendered(): undefined;
+    regionCannotBeRendered(): null;
 } & {
+    setMessage(arg?: string | undefined): void;
     setError(error?: unknown): void;
     setRpcDriverName(rpcDriverName: string): void;
     reload(): void;
 } & {
-    currBpPerPx: number;
     scrollTop: number;
-    message: string;
-    featureIdUnderMouse: string | undefined;
-    contextMenuFeature: Feature | undefined;
+} & {
+    readonly height: number;
+} & {
+    setScrollTop(scrollTop: number): void;
+    setHeight(displayHeight: number): number;
+    resizeHeight(distance: number): number;
+} & {
     featureDensityStatsP: Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats> | undefined;
     featureDensityStats: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined;
+    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 | undefined): void;
+    getFeatureDensityStats(): Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats>;
+    setFeatureDensityStatsP(arg: any): void;
+    setFeatureDensityStats(featureDensityStats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined): void;
+    clearFeatureDensityStats(): void;
+} & {
+    readonly regionTooLarge: boolean;
+    readonly regionTooLargeReason: string;
+} & {
+    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: string | undefined;
+    contextMenuFeature: Feature | undefined;
 } & {
-    readonly height: number;
     readonly blockType: "dynamicBlocks" | "staticBlocks";
     readonly blockDefinitions: import("@jbrowse/core/util/blockTypes").BlockSet;
 } & {
@@ -183,49 +213,22 @@ export default function stateModelFactory(configSchema: AnyConfigurationSchemaTy
     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;
-    readonly currentBytesRequested: number;
-    readonly currentFeatureScreenDensity: number;
-    readonly maxFeatureScreenDensity: any;
-    readonly featureDensityStatsReady: boolean;
-    readonly maxAllowableBytes: number;
-} & {
-    setMessage(message: string): void;
 } & {
-    afterAttach(): void;
-    getFeatureDensityStats(): Promise<import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats>;
-    setFeatureDensityStatsP(arg: any): void;
-    setFeatureDensityStats(featureDensityStats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined): void;
-    clearFeatureDensityStats(): void;
-    setHeight(displayHeight: number): number;
-    resizeHeight(distance: number): number;
-    setScrollTop(scrollTop: number): void;
-    setFeatureDensityStatsLimit(stats?: import("@jbrowse/core/data_adapters/BaseAdapter").FeatureDensityStats | undefined): void;
     addBlock(key: string, block: import("@jbrowse/core/util/blockTypes").BaseBlock): void;
-    setCurrBpPerPx(n: number): void;
     deleteBlock(key: string): void;
     selectFeature(feature: Feature): void;
     clearFeatureSelection(): void;
     setFeatureIdUnderMouse(feature?: string | undefined): void;
-    reload(): void;
     setContextMenuFeature(feature?: Feature | undefined): void;
-} & {
-    readonly regionTooLarge: boolean;
-    readonly regionTooLargeReason: string;
 } & {
     reload(): Promise<void>;
 } & {
-    afterAttach(): void;
-} & {
-    regionCannotBeRenderedText(_region: import("@jbrowse/core/util").Region): "" | "Force load to see features";
-    regionCannotBeRendered(_region: import("@jbrowse/core/util").Region): JSX.Element | null;
     trackMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     contextMenuItems(): import("@jbrowse/core/ui").MenuItem[];
     renderProps(): any;
 } & {
-    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view/src/LinearGenomeView").ExportSvgOptions & {
-        overrideHeight: number;
-        theme: import("@mui/material").ThemeOptions;
-    }): Promise<JSX.Element>;
+    renderSvg(opts: import("@jbrowse/plugin-linear-genome-view").ExportSvgDisplayOptions): Promise<import("react").JSX.Element>;
+    afterAttach(): void;
 } & {
     readonly rendererTypeName: any;
     readonly showLabels: any;

package/esm/StructuralVariantChordRenderer/Chord.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Feature } from '@jbrowse/core/util';
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 export interface Region {
@@ -27,5 +28,5 @@ declare const Chord: ({ feature, blocksForRefs, radius, config, bezierRadius, se
     bezierRadius: number;
     selected: boolean;
     onClick: (feature: Feature, reg: AnyRegion, endBlock: AnyRegion, evt: unknown) => void;
-}) => JSX.Element | null;
+}) => React.JSX.Element | null;
 export default Chord;

package/esm/StructuralVariantChordRenderer/ReactComponent.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { Feature } from '@jbrowse/core/util';
 import { AnyConfigurationModel } from '@jbrowse/core/configuration';
 import { Block, AnyRegion } from './Chord';
@@ -12,5 +13,5 @@ declare const _default: ({ features, config, displayModel, blockDefinitions, rad
     blockDefinitions: Block[];
     bezierRadius: number;
     onChordClick: (feature: Feature, reg: AnyRegion, endBlock: AnyRegion, evt: unknown) => void;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default _default;

package/esm/VariantFeatureWidget/AnnotGrid.d.ts

@@ -1,5 +1,6 @@
+import React from 'react';
 import { GridColDef, GridValidRowModel } from '@mui/x-data-grid';
 export default function VariantAnnotPanel({ rows, columns, }: {
     rows: GridValidRowModel[];
     columns: GridColDef[];
-}): JSX.Element | null;
+}): React.JSX.Element | null;

package/esm/VariantFeatureWidget/AnnotGrid.js

@@ -1,21 +1,16 @@
 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 { measureGridWidth } from '@jbrowse/core/util';
 export default function VariantAnnotPanel({ rows, columns, }) {
-    const rowHeight = 25;
-    const headerHeight = 100;
-    const footerHeight = 50;
+    const { ref, scrollLeft } = useResizeBar();
     const [checked, setChecked] = useState(false);
-    const height = Math.min(rows.length, 100) * rowHeight +
-        headerHeight +
-        (checked ? 50 : 0) +
-        footerHeight;
-    return rows.length ? (React.createElement("div", null,
+    const [widths, setWidths] = useState(columns.map(e => measureGridWidth(rows.map(r => r[e.field]))));
+    return rows.length ? (React.createElement("div", { ref: ref },
         React.createElement(FormControlLabel, { control: React.createElement(Checkbox, { checked: checked, onChange: event => setChecked(event.target.checked) }), label: React.createElement(Typography, { variant: "body2" }, "Show options") }),
-        React.createElement("div", { style: {
-                height,
-                width: '100%',
-            } },
-            React.createElement(DataGrid, { rowHeight: rowHeight, rows: rows, columns: columns, slots: { toolbar: checked ? GridToolbar : null } })))) : null;
+        React.createElement("div", { ref: ref },
+            React.createElement(ResizeBar, { widths: widths, setWidths: setWidths, scrollLeft: scrollLeft }),
+            React.createElement(DataGrid, { rowHeight: 25, rows: rows, columns: columns.map((c, i) => ({ ...c, width: widths[i] })), slots: { toolbar: checked ? GridToolbar : null } })))) : null;
 }
 //# sourceMappingURL=AnnotGrid.js.map

package/esm/VariantFeatureWidget/AnnotGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"AnnotGrid.js","sourceRoot":"","sources":["../../src/VariantFeatureWidget/AnnotGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EACL,QAAQ,EAER,WAAW,GAEZ,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAEtE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,IAAI,EACJ,OAAO,GAIR;IACC,MAAM,SAAS,GAAG,EAAE,CAAA;IACpB,MAAM,YAAY,GAAG,GAAG,CAAA;IACxB,MAAM,YAAY,GAAG,EAAE,CAAA;IACvB,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,MAAM,GACV,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,SAAS;QACtC,YAAY;QACZ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;QAClB,YAAY,CAAA;IACd,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CACnB;QACE,oBAAC,gBAAgB,IACf,OAAO,EACL,oBAAC,QAAQ,IACP,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GACnD,EAEJ,KAAK,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,OAAO,mBAA0B,GAC5D;QACF,6BACE,KAAK,EAAE;gBACL,MAAM;gBACN,KAAK,EAAE,MAAM;aACd;YAED,oBAAC,QAAQ,IACP,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,EAAE,GAChD,CACE,CACF,CACP,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC"}
+{"version":3,"file":"AnnotGrid.js","sourceRoot":"","sources":["../../src/VariantFeatureWidget/AnnotGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EACL,QAAQ,EAER,WAAW,GAEZ,MAAM,kBAAkB,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACtE,OAAO,SAAS,EAAE,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAErD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,IAAI,EACJ,OAAO,GAIR;IACC,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,YAAY,EAAE,CAAA;IAC1C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC7C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAClC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAC9D,CAAA;IAED,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CACnB,6BAAK,GAAG,EAAE,GAAG;QACX,oBAAC,gBAAgB,IACf,OAAO,EACL,oBAAC,QAAQ,IACP,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GACnD,EAEJ,KAAK,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,OAAO,mBAA0B,GAC5D;QACF,6BAAK,GAAG,EAAE,GAAG;YACX,oBAAC,SAAS,IACR,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,GACtB;YACF,oBAAC,QAAQ,IACP,SAAS,EAAE,EAAE,EACb,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAC5D,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,EAAE,GAChD,CACE,CACF,CACP,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC"}

package/esm/VariantFeatureWidget/BreakendOptionDialog.d.ts

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

package/esm/VariantFeatureWidget/BreakendPanel.d.ts

@@ -1,6 +1,7 @@
+import React from 'react';
 import { SimpleFeatureSerialized } from '@jbrowse/core/util/simpleFeature';
 export default function BreakendPanel(props: {
     locStrings: string[];
     model: any;
     feature: SimpleFeatureSerialized;
-}): JSX.Element;
+}): React.JSX.Element;

package/esm/VariantFeatureWidget/VariantAnnotationTable.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export default function VariantAnnotationTable({ data, fields, title, }: {
+    data: string[];
+    fields: string[];
+    title: string;
+}): React.JSX.Element | null;

package/esm/VariantFeatureWidget/VariantAnnotationTable.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
+import AnnotGrid from './AnnotGrid';
+export default function VariantAnnotationTable({ data, fields, title, }) {
+    return data.length ? (React.createElement(BaseCard, { title: title },
+        React.createElement(AnnotGrid, { rows: data.map((elt, id) => ({
+                id,
+                ...Object.fromEntries(elt.split('|').map((e, i) => [fields[i], e])),
+            })) || [], columns: fields.map(c => ({ field: c })) }))) : null;
+}
+//# sourceMappingURL=VariantAnnotationTable.js.map

package/esm/VariantFeatureWidget/VariantAnnotationTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariantAnnotationTable.js","sourceRoot":"","sources":["../../src/VariantFeatureWidget/VariantAnnotationTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,mDAAmD,CAAA;AAC5E,OAAO,SAAS,MAAM,aAAa,CAAA;AAEnC,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAAC,EAC7C,IAAI,EACJ,MAAM,EACN,KAAK,GAKN;IACC,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CACnB,oBAAC,QAAQ,IAAC,KAAK,EAAE,KAAK;QACpB,oBAAC,SAAS,IACR,IAAI,EACF,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;gBACrB,EAAE;gBACF,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;aACpE,CAAC,CAAC,IAAI,EAAE,EAEX,OAAO,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,GACxC,CACO,CACZ,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC"}

package/esm/VariantFeatureWidget/VariantFeatureWidget.d.ts

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

package/esm/VariantFeatureWidget/VariantFeatureWidget.js

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import React from 'react';
 import { observer } from 'mobx-react';
 import { Divider, Paper } from '@mui/material';
@@ -6,33 +5,46 @@ import { FeatureDetails } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetai
 import { parseBreakend } from '@gmod/vcf';
 // locals
 import VariantSampleGrid from './VariantSampleGrid';
-import VariantCsqPanel from './VariantCsqPanel';
-import VariantAnnPanel from './VariantAnnPanel';
 import BreakendPanel from './BreakendPanel';
+import VariantAnnotationTable from './VariantAnnotationTable';
+const basicDescriptions = {
+    CHROM: 'chromosome: An identifier from the reference genome',
+    POS: 'position: The reference position, with the 1st base having position 1',
+    ID: 'identifier: Semi-colon separated list of unique identifiers where available',
+    REF: 'reference base(s): Each base must be one of A,C,G,T,N (case insensitive).',
+    ALT: 'alternate base(s): Comma-separated list of alternate non-reference alleles',
+    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;
-    const basicDescriptions = {
-        CHROM: 'chromosome: An identifier from the reference genome',
-        POS: 'position: The reference position, with the 1st base having position 1',
-        ID: 'identifier: Semi-colon separated list of unique identifiers where available',
-        REF: 'reference base(s): Each base must be one of A,C,G,T,N (case insensitive).',
-        ALT: 'alternate base(s): Comma-separated list of alternate non-reference alleles',
-        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',
-    };
     return (React.createElement(Paper, { "data-testid": "variant-side-drawer" },
         React.createElement(FeatureDetails, { feature: rest, descriptions: { ...basicDescriptions, ...descriptions }, ...props }),
         React.createElement(Divider, null),
-        React.createElement(VariantCsqPanel, { feature: rest, descriptions: descriptions }),
+        React.createElement(CsqPanel, { feature: rest, descriptions: descriptions }),
         React.createElement(Divider, null),
-        React.createElement(VariantAnnPanel, { feature: rest, descriptions: descriptions }),
+        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;
+    const annFields = ((_c = annDesc === null || annDesc === void 0 ? void 0 : annDesc.match(/.*Functional annotations:'(.*)'$/)) === null || _c === void 0 ? void 0 : _c[1].split('|')) || [];
+    const ann = ((_d = feature.INFO) === null || _d === void 0 ? void 0 : _d.ANN) || [];
+    return (React.createElement(VariantAnnotationTable, { fields: annFields, data: ann, title: "Variant ANN field" }));
+}
+function CsqPanel({ descriptions, feature, }) {
+    var _a, _b, _c, _d;
+    const csqDescription = (_b = (_a = descriptions === null || descriptions === void 0 ? void 0 : descriptions.INFO) === null || _a === void 0 ? void 0 : _a.CSQ) === null || _b === void 0 ? void 0 : _b.Description;
+    const csqFields = ((_c = csqDescription === null || csqDescription === void 0 ? void 0 : csqDescription.match(/.*Format: (.*)/)) === null || _c === void 0 ? void 0 : _c[1].split('|')) || [];
+    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);
 //# sourceMappingURL=VariantFeatureWidget.js.map

package/esm/VariantFeatureWidget/VariantFeatureWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"VariantFeatureWidget.js","sourceRoot":"","sources":["../../src/VariantFeatureWidget/VariantFeatureWidget.tsx"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,mDAAmD,CAAA;AAClF,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AAEzC,SAAS;AACT,OAAO,iBAAiB,MAAM,qBAAqB,CAAA;AACnD,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,eAAe,MAAM,mBAAmB,CAAA;AAC/C,OAAO,aAAa,MAAM,iBAAiB,CAAA;AAE3C,SAAS,qBAAqB,CAAC,KAAU;IACvC,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,CAAA;IACvB,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,KAAK,CAAA;IAC3C,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC,CAAA;IACpD,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,IAAI,CAAA;IACjC,MAAM,iBAAiB,GAAG;QACxB,KAAK,EAAE,qDAAqD;QAC5D,GAAG,EAAE,uEAAuE;QAC5E,EAAE,EAAE,6EAA6E;QACjF,GAAG,EAAE,2EAA2E;QAChF,GAAG,EAAE,4EAA4E;QACjF,IAAI,EAAE,mEAAmE;QACzE,MAAM,EACJ,kIAAkI;KACrI,CAAA;IAED,OAAO,CACL,oBAAC,KAAK,mBAAa,qBAAqB;QACtC,oBAAC,cAAc,IACb,OAAO,EAAE,IAAI,EACb,YAAY,EAAE,EAAE,GAAG,iBAAiB,EAAE,GAAG,YAAY,EAAE,KACnD,KAAK,GACT;QACF,oBAAC,OAAO,OAAG;QACX,oBAAC,eAAe,IAAC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,GAAI;QAC9D,oBAAC,OAAO,OAAG;QACX,oBAAC,eAAe,IAAC,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,GAAI;QAC9D,oBAAC,OAAO,OAAG;QACV,IAAI,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,CAC1B,oBAAC,aAAa,IACZ,OAAO,EAAE,IAAI,EACb,UAAU,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,CACtB,CAAC,GAAW,EAAE,EAAE,WAAC,OAAA,CAAA,MAAA,aAAa,CAAC,GAAG,CAAC,0CAAE,YAAY,KAAI,EAAE,CAAA,EAAA,CACxD,EACD,KAAK,EAAE,KAAK,GACZ,CACH,CAAC,CAAC,CAAC,IAAI;QACP,IAAI,CAAC,IAAI,KAAK,eAAe,CAAC,CAAC,CAAC,CAC/B,oBAAC,aAAa,IACZ,OAAO,EAAE,IAAI,EACb,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,GACrD,CACH,CAAC,CAAC,CAAC,IAAI;QACR,oBAAC,iBAAiB,IAChB,OAAO,EAAE,IAAI,KACT,KAAK,EACT,YAAY,EAAE,YAAY,GAC1B,CACI,CACT,CAAA;AACH,CAAC;AAED,eAAe,QAAQ,CAAC,qBAAqB,CAAC,CAAA"}
+{"version":3,"file":"VariantFeatureWidget.js","sourceRoot":"","sources":["../../src/VariantFeatureWidget/VariantFeatureWidget.tsx"],"names":[],"mappings":"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"}

package/esm/VariantFeatureWidget/VariantSampleGrid.d.ts

@@ -1,5 +1,12 @@
+import React from 'react';
 import { SimpleFeatureSerialized } from '@jbrowse/core/util';
 export default function VariantSamples(props: {
     feature: SimpleFeatureSerialized;
-    descriptions: any;
-}): JSX.Element | null;
+    descriptions: {
+        FORMAT?: {
+            [key: string]: {
+                Description?: string;
+            };
+        };
+    };
+}): React.JSX.Element | null;

package/esm/VariantFeatureWidget/VariantSampleGrid.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-variants",
-  "version": "2.5.0",
+  "version": "2.6.1",
   "description": "JBrowse 2 variant adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -64,5 +64,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "d1ca073996d008f0fe9a52f7c1a47ae649dcfdaf"
+  "gitHead": "1cbe7ba097fb2d2763c776e5e429e4670cdd583c"
 }

package/src/VariantFeatureWidget/AnnotGrid.tsx

@@ -6,6 +6,8 @@ import {
   GridValidRowModel,
 } from '@mui/x-data-grid'
 import { Checkbox, FormControlLabel, Typography } from '@mui/material'
+import ResizeBar, { useResizeBar } from '@jbrowse/core/ui/ResizeBar'
+import { measureGridWidth } from '@jbrowse/core/util'
 
 export default function VariantAnnotPanel({
   rows,
@@ -14,17 +16,14 @@ export default function VariantAnnotPanel({
   rows: GridValidRowModel[]
   columns: GridColDef[]
 }) {
-  const rowHeight = 25
-  const headerHeight = 100
-  const footerHeight = 50
+  const { ref, scrollLeft } = useResizeBar()
   const [checked, setChecked] = useState(false)
-  const height =
-    Math.min(rows.length, 100) * rowHeight +
-    headerHeight +
-    (checked ? 50 : 0) +
-    footerHeight
+  const [widths, setWidths] = useState(
+    columns.map(e => measureGridWidth(rows.map(r => r[e.field]))),
+  )
+
   return rows.length ? (
-    <div>
+    <div ref={ref}>
       <FormControlLabel
         control={
           <Checkbox
@@ -34,16 +33,16 @@ export default function VariantAnnotPanel({
         }
         label={<Typography variant="body2">Show options</Typography>}
       />
-      <div
-        style={{
-          height,
-          width: '100%',
-        }}
-      >
+      <div ref={ref}>
+        <ResizeBar
+          widths={widths}
+          setWidths={setWidths}
+          scrollLeft={scrollLeft}
+        />
         <DataGrid
-          rowHeight={rowHeight}
+          rowHeight={25}
           rows={rows}
-          columns={columns}
+          columns={columns.map((c, i) => ({ ...c, width: widths[i] }))}
           slots={{ toolbar: checked ? GridToolbar : null }}
         />
       </div>

package/src/VariantFeatureWidget/VariantAnnotationTable.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
+import AnnotGrid from './AnnotGrid'
+
+export default function VariantAnnotationTable({
+  data,
+  fields,
+  title,
+}: {
+  data: string[]
+  fields: string[]
+  title: string
+}) {
+  return data.length ? (
+    <BaseCard title={title}>
+      <AnnotGrid
+        rows={
+          data.map((elt, id) => ({
+            id,
+            ...Object.fromEntries(elt.split('|').map((e, i) => [fields[i], e])),
+          })) || []
+        }
+        columns={fields.map(c => ({ field: c }))}
+      />
+    </BaseCard>
+  ) : null
+}