@jbrowse/plugin-variants 2.5.0 → 2.6.1

package/src/VariantFeatureWidget/VariantFeatureWidget.tsx

@@ -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'
@@ -7,25 +6,31 @@ 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'
+import { SimpleFeatureSerialized } from '@jbrowse/core/util'
 
-function VariantFeatureDetails(props: any) {
+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: {
+  model: {
+    featureData: SimpleFeatureSerialized
+    descriptions: Record<string, string>
+  }
+}) {
   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 (
     <Paper data-testid="variant-side-drawer">
@@ -35,9 +40,9 @@ function VariantFeatureDetails(props: any) {
         {...props}
       />
       <Divider />
-      <VariantCsqPanel feature={rest} descriptions={descriptions} />
+      <CsqPanel feature={rest} descriptions={descriptions} />
       <Divider />
-      <VariantAnnPanel feature={rest} descriptions={descriptions} />
+      <AnnPanel feature={rest} descriptions={descriptions} />
       <Divider />
       {feat.type === 'breakend' ? (
         <BreakendPanel
@@ -64,4 +69,44 @@ function VariantFeatureDetails(props: any) {
   )
 }
 
+function AnnPanel({
+  descriptions,
+  feature,
+}: {
+  descriptions: { INFO?: { ANN?: { Description?: string } } }
+  feature: { INFO?: { ANN?: string[] } }
+}) {
+  const annDesc = descriptions?.INFO?.ANN?.Description
+  const annFields =
+    annDesc?.match(/.*Functional annotations:'(.*)'$/)?.[1].split('|') || []
+  const ann = feature.INFO?.ANN || []
+  return (
+    <VariantAnnotationTable
+      fields={annFields}
+      data={ann}
+      title="Variant ANN field"
+    />
+  )
+}
+
+function CsqPanel({
+  descriptions,
+  feature,
+}: {
+  descriptions: { INFO?: { CSQ?: { Description?: string } } }
+  feature: { INFO?: { CSQ?: string[] } }
+}) {
+  const csqDescription = descriptions?.INFO?.CSQ?.Description
+  const csqFields =
+    csqDescription?.match(/.*Format: (.*)/)?.[1].split('|') || []
+  const csq = feature.INFO?.CSQ || []
+  return (
+    <VariantAnnotationTable
+      fields={csqFields}
+      data={csq}
+      title="Variant CSQ field"
+    />
+  )
+}
+
 export default observer(VariantFeatureDetails)

package/src/VariantFeatureWidget/VariantSampleGrid.tsx

@@ -54,8 +54,7 @@ function SampleFilters({
 
 export default function VariantSamples(props: {
   feature: SimpleFeatureSerialized
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  descriptions: any
+  descriptions: { FORMAT?: { [key: string]: { Description?: string } } }
 }) {
   const { feature, descriptions = {} } = props
   const { ref, scrollLeft } = useResizeBar()

package/dist/VariantFeatureWidget/VariantAnnPanel.d.ts

@@ -1,4 +0,0 @@
-export default function VariantAnnPanel({ feature, descriptions, }: {
-    feature: any;
-    descriptions: any;
-}): JSX.Element | null;

package/dist/VariantFeatureWidget/VariantAnnPanel.js

@@ -1,25 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const react_1 = __importDefault(require("react"));
-const BaseFeatureDetail_1 = require("@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail");
-const AnnotGrid_1 = __importDefault(require("./AnnotGrid"));
-function VariantAnnPanel({ feature, descriptions, }) {
-    var _a, _b, _c, _d;
-    const annFields = (((_d = (_c = (_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) === null || _c === void 0 ? void 0 : _c.match(/.*Functional annotations:'(.*)'$/)) === null || _d === void 0 ? void 0 : _d[1].split('|')) || []);
-    const ann = (feature.INFO.ANN || []);
-    const rows = ann.map((elt, id) => ({
-        id,
-        ...Object.fromEntries(elt.split('|').map((e, i) => [annFields[i], e])),
-    })) || [];
-    const columns = annFields.map(c => ({
-        field: c,
-    }));
-    return ann.length ? (react_1.default.createElement(BaseFeatureDetail_1.BaseCard, { title: "ANN table" },
-        react_1.default.createElement(AnnotGrid_1.default, { rows: rows, columns: columns }))) : null;
-}
-exports.default = VariantAnnPanel;
-//# sourceMappingURL=VariantAnnPanel.js.map

package/dist/VariantFeatureWidget/VariantAnnPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"VariantAnnPanel.js","sourceRoot":"","sources":["../../src/VariantFeatureWidget/VariantAnnPanel.tsx"],"names":[],"mappings":";;;;;AAAA,uDAAuD;AACvD,kDAAyB;AACzB,yFAA4E;AAC5E,4DAAmC;AAEnC,SAAwB,eAAe,CAAC,EACtC,OAAO,EACP,YAAY,GAIb;;IACC,MAAM,SAAS,GAAG,CAAC,CAAA,MAAA,MAAA,MAAA,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,0CAAE,GAAG,0CAAE,WAAW,0CAAE,KAAK,CAC5D,kCAAkC,CACnC,0CAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,KAAI,EAAE,CAAa,CAAA;IACpC,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,EAAE,CAAa,CAAA;IAEhD,MAAM,IAAI,GACR,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;QACpB,EAAE;QACF,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;KACvE,CAAC,CAAC,IAAI,EAAE,CAAA;IACX,MAAM,OAAO,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAClC,KAAK,EAAE,CAAC;KACT,CAAC,CAAC,CAAA;IACH,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAClB,8BAAC,4BAAQ,IAAC,KAAK,EAAC,WAAW;QACzB,8BAAC,mBAAS,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,CAClC,CACZ,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC;AAzBD,kCAyBC"}

package/dist/VariantFeatureWidget/VariantCsqPanel.d.ts

@@ -1,4 +0,0 @@
-export default function VariantCsqPanel({ feature, descriptions, }: {
-    feature: any;
-    descriptions: any;
-}): JSX.Element | null;

package/dist/VariantFeatureWidget/VariantCsqPanel.js

@@ -1,25 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-/* eslint-disable @typescript-eslint/no-explicit-any */
-const react_1 = __importDefault(require("react"));
-const BaseFeatureDetail_1 = require("@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail");
-const AnnotGrid_1 = __importDefault(require("./AnnotGrid"));
-function VariantCsqPanel({ feature, descriptions, }) {
-    var _a, _b, _c, _d;
-    const csqFields = (((_d = (_c = (_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) === null || _c === void 0 ? void 0 : _c.match(/.*Format: (.*)/)) === null || _d === void 0 ? void 0 : _d[1].split('|')) || []);
-    const csq = (feature.INFO.CSQ || []);
-    const rows = csq.map((elt, id) => ({
-        id,
-        ...Object.fromEntries(elt.split('|').map((e, i) => [csqFields[i], e])),
-    })) || [];
-    const columns = csqFields.map(c => ({
-        field: c,
-    }));
-    return csq.length ? (react_1.default.createElement(BaseFeatureDetail_1.BaseCard, { title: "CSQ table" },
-        react_1.default.createElement(AnnotGrid_1.default, { rows: rows, columns: columns }))) : null;
-}
-exports.default = VariantCsqPanel;
-//# sourceMappingURL=VariantCsqPanel.js.map

package/dist/VariantFeatureWidget/VariantCsqPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"VariantCsqPanel.js","sourceRoot":"","sources":["../../src/VariantFeatureWidget/VariantCsqPanel.tsx"],"names":[],"mappings":";;;;;AAAA,uDAAuD;AACvD,kDAAyB;AACzB,yFAA4E;AAC5E,4DAAmC;AAEnC,SAAwB,eAAe,CAAC,EACtC,OAAO,EACP,YAAY,GAIb;;IACC,MAAM,SAAS,GAAG,CAAC,CAAA,MAAA,MAAA,MAAA,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,0CAAE,GAAG,0CAAE,WAAW,0CAAE,KAAK,CAC5D,gBAAgB,CACjB,0CAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,KAAI,EAAE,CAAa,CAAA;IAEpC,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,EAAE,CAAa,CAAA;IAChD,MAAM,IAAI,GACR,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;QACpB,EAAE;QACF,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;KACvE,CAAC,CAAC,IAAI,EAAE,CAAA;IACX,MAAM,OAAO,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAClC,KAAK,EAAE,CAAC;KACT,CAAC,CAAC,CAAA;IACH,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAClB,8BAAC,4BAAQ,IAAC,KAAK,EAAC,WAAW;QACzB,8BAAC,mBAAS,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,CAClC,CACZ,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC;AAzBD,kCAyBC"}

package/esm/VariantFeatureWidget/VariantAnnPanel.d.ts

@@ -1,4 +0,0 @@
-export default function VariantAnnPanel({ feature, descriptions, }: {
-    feature: any;
-    descriptions: any;
-}): JSX.Element | null;

package/esm/VariantFeatureWidget/VariantAnnPanel.js

@@ -1,19 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
-import AnnotGrid from './AnnotGrid';
-export default function VariantAnnPanel({ feature, descriptions, }) {
-    var _a, _b, _c, _d;
-    const annFields = (((_d = (_c = (_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) === null || _c === void 0 ? void 0 : _c.match(/.*Functional annotations:'(.*)'$/)) === null || _d === void 0 ? void 0 : _d[1].split('|')) || []);
-    const ann = (feature.INFO.ANN || []);
-    const rows = ann.map((elt, id) => ({
-        id,
-        ...Object.fromEntries(elt.split('|').map((e, i) => [annFields[i], e])),
-    })) || [];
-    const columns = annFields.map(c => ({
-        field: c,
-    }));
-    return ann.length ? (React.createElement(BaseCard, { title: "ANN table" },
-        React.createElement(AnnotGrid, { rows: rows, columns: columns }))) : null;
-}
-//# sourceMappingURL=VariantAnnPanel.js.map

package/esm/VariantFeatureWidget/VariantAnnPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"VariantAnnPanel.js","sourceRoot":"","sources":["../../src/VariantFeatureWidget/VariantAnnPanel.tsx"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,mDAAmD,CAAA;AAC5E,OAAO,SAAS,MAAM,aAAa,CAAA;AAEnC,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,OAAO,EACP,YAAY,GAIb;;IACC,MAAM,SAAS,GAAG,CAAC,CAAA,MAAA,MAAA,MAAA,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,0CAAE,GAAG,0CAAE,WAAW,0CAAE,KAAK,CAC5D,kCAAkC,CACnC,0CAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,KAAI,EAAE,CAAa,CAAA;IACpC,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,EAAE,CAAa,CAAA;IAEhD,MAAM,IAAI,GACR,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;QACpB,EAAE;QACF,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;KACvE,CAAC,CAAC,IAAI,EAAE,CAAA;IACX,MAAM,OAAO,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAClC,KAAK,EAAE,CAAC;KACT,CAAC,CAAC,CAAA;IACH,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAClB,oBAAC,QAAQ,IAAC,KAAK,EAAC,WAAW;QACzB,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,CAClC,CACZ,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC"}

package/esm/VariantFeatureWidget/VariantCsqPanel.d.ts

@@ -1,4 +0,0 @@
-export default function VariantCsqPanel({ feature, descriptions, }: {
-    feature: any;
-    descriptions: any;
-}): JSX.Element | null;

package/esm/VariantFeatureWidget/VariantCsqPanel.js

@@ -1,19 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail';
-import AnnotGrid from './AnnotGrid';
-export default function VariantCsqPanel({ feature, descriptions, }) {
-    var _a, _b, _c, _d;
-    const csqFields = (((_d = (_c = (_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) === null || _c === void 0 ? void 0 : _c.match(/.*Format: (.*)/)) === null || _d === void 0 ? void 0 : _d[1].split('|')) || []);
-    const csq = (feature.INFO.CSQ || []);
-    const rows = csq.map((elt, id) => ({
-        id,
-        ...Object.fromEntries(elt.split('|').map((e, i) => [csqFields[i], e])),
-    })) || [];
-    const columns = csqFields.map(c => ({
-        field: c,
-    }));
-    return csq.length ? (React.createElement(BaseCard, { title: "CSQ table" },
-        React.createElement(AnnotGrid, { rows: rows, columns: columns }))) : null;
-}
-//# sourceMappingURL=VariantCsqPanel.js.map

package/esm/VariantFeatureWidget/VariantCsqPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"VariantCsqPanel.js","sourceRoot":"","sources":["../../src/VariantFeatureWidget/VariantCsqPanel.tsx"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,mDAAmD,CAAA;AAC5E,OAAO,SAAS,MAAM,aAAa,CAAA;AAEnC,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,OAAO,EACP,YAAY,GAIb;;IACC,MAAM,SAAS,GAAG,CAAC,CAAA,MAAA,MAAA,MAAA,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,0CAAE,GAAG,0CAAE,WAAW,0CAAE,KAAK,CAC5D,gBAAgB,CACjB,0CAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,KAAI,EAAE,CAAa,CAAA;IAEpC,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,EAAE,CAAa,CAAA;IAChD,MAAM,IAAI,GACR,GAAG,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;QACpB,EAAE;QACF,GAAG,MAAM,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;KACvE,CAAC,CAAC,IAAI,EAAE,CAAA;IACX,MAAM,OAAO,GAAG,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAClC,KAAK,EAAE,CAAC;KACT,CAAC,CAAC,CAAA;IACH,OAAO,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAClB,oBAAC,QAAQ,IAAC,KAAK,EAAC,WAAW;QACzB,oBAAC,SAAS,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,GAAI,CAClC,CACZ,CAAC,CAAC,CAAC,IAAI,CAAA;AACV,CAAC"}

package/src/VariantFeatureWidget/VariantAnnPanel.tsx

@@ -1,31 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react'
-import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
-import AnnotGrid from './AnnotGrid'
-
-export default function VariantAnnPanel({
-  feature,
-  descriptions,
-}: {
-  feature: any
-  descriptions: any
-}) {
-  const annFields = (descriptions?.INFO?.ANN?.Description?.match(
-    /.*Functional annotations:'(.*)'$/,
-  )?.[1].split('|') || []) as string[]
-  const ann = (feature.INFO.ANN || []) as string[]
-
-  const rows =
-    ann.map((elt, id) => ({
-      id,
-      ...Object.fromEntries(elt.split('|').map((e, i) => [annFields[i], e])),
-    })) || []
-  const columns = annFields.map(c => ({
-    field: c,
-  }))
-  return ann.length ? (
-    <BaseCard title="ANN table">
-      <AnnotGrid rows={rows} columns={columns} />
-    </BaseCard>
-  ) : null
-}

package/src/VariantFeatureWidget/VariantCsqPanel.tsx

@@ -1,31 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react'
-import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
-import AnnotGrid from './AnnotGrid'
-
-export default function VariantCsqPanel({
-  feature,
-  descriptions,
-}: {
-  feature: any
-  descriptions: any
-}) {
-  const csqFields = (descriptions?.INFO?.CSQ?.Description?.match(
-    /.*Format: (.*)/,
-  )?.[1].split('|') || []) as string[]
-
-  const csq = (feature.INFO.CSQ || []) as string[]
-  const rows =
-    csq.map((elt, id) => ({
-      id,
-      ...Object.fromEntries(elt.split('|').map((e, i) => [csqFields[i], e])),
-    })) || []
-  const columns = csqFields.map(c => ({
-    field: c,
-  }))
-  return csq.length ? (
-    <BaseCard title="CSQ table">
-      <AnnotGrid rows={rows} columns={columns} />
-    </BaseCard>
-  ) : null
-}