@jbrowse/plugin-variants 2.4.2 → 2.5.0

package/esm/VcfAdapter/configSchema.d.ts

@@ -1,2 +1,13 @@
-declare const VcfAdapter: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
+declare const VcfAdapter: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+    /**
+     * #slot
+     */
+    vcfLocation: {
+        type: string;
+        defaultValue: {
+            uri: string;
+            locationType: string;
+        };
+    };
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
 export default VcfAdapter;

package/esm/VcfTabixAdapter/configSchema.d.ts

@@ -1,2 +1,33 @@
-declare const VcfTabixAdapter: import("@jbrowse/core/configuration").AnyConfigurationSchemaType;
+declare const VcfTabixAdapter: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+    /**
+     * #slot
+     */
+    vcfGzLocation: {
+        type: string;
+        defaultValue: {
+            uri: string;
+            locationType: string;
+        };
+    };
+    index: import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaType<{
+        /**
+         * #slot index.indexType
+         */
+        indexType: {
+            model: import("mobx-state-tree").ISimpleType<string>;
+            type: string;
+            defaultValue: string;
+        };
+        /**
+         * #slot index.location
+         */
+        location: {
+            type: string;
+            defaultValue: {
+                uri: string;
+                locationType: string;
+            };
+        };
+    }, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
+}, import("@jbrowse/core/configuration/configurationSchema").ConfigurationSchemaOptions<undefined, undefined>>;
 export default VcfTabixAdapter;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-variants",
-  "version": "2.4.2",
+  "version": "2.5.0",
   "description": "JBrowse 2 variant adapters, tracks, etc.",
   "keywords": [
     "jbrowse",
@@ -42,7 +42,7 @@
     "@gmod/tabix": "^1.5.6",
     "@gmod/vcf": "^5.0.9",
     "@mui/icons-material": "^5.0.2",
-    "@mui/x-data-grid": "^5.0.1",
+    "@mui/x-data-grid": "^6.0.1",
     "generic-filehandle": "^3.0.0"
   },
   "peerDependencies": {
@@ -64,5 +64,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "36e382a70e7d220343b873e7e6aba5c83e5342c8"
+  "gitHead": "d1ca073996d008f0fe9a52f7c1a47ae649dcfdaf"
 }

package/src/VariantFeatureWidget/AnnotGrid.tsx

@@ -1,28 +1,52 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react'
-import { DataGrid } from '@mui/x-data-grid'
+import React, { useState } from 'react'
+import {
+  DataGrid,
+  GridColDef,
+  GridToolbar,
+  GridValidRowModel,
+} from '@mui/x-data-grid'
+import { Checkbox, FormControlLabel, Typography } from '@mui/material'
 
 export default function VariantAnnotPanel({
   rows,
   columns,
 }: {
-  rows: any
-  columns: any[]
+  rows: GridValidRowModel[]
+  columns: GridColDef[]
 }) {
   const rowHeight = 25
-  const hideFooter = rows.length < 100
-  const headerHeight = 80
+  const headerHeight = 100
+  const footerHeight = 50
+  const [checked, setChecked] = useState(false)
+  const height =
+    Math.min(rows.length, 100) * rowHeight +
+    headerHeight +
+    (checked ? 50 : 0) +
+    footerHeight
   return rows.length ? (
-    <div
-      style={{
-        height:
-          Math.min(rows.length, 100) * rowHeight +
-          headerHeight +
-          (hideFooter ? 0 : 50),
-        width: '100%',
-      }}
-    >
-      <DataGrid rowHeight={rowHeight} rows={rows} columns={columns} />
+    <div>
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={checked}
+            onChange={event => setChecked(event.target.checked)}
+          />
+        }
+        label={<Typography variant="body2">Show options</Typography>}
+      />
+      <div
+        style={{
+          height,
+          width: '100%',
+        }}
+      >
+        <DataGrid
+          rowHeight={rowHeight}
+          rows={rows}
+          columns={columns}
+          slots={{ toolbar: checked ? GridToolbar : null }}
+        />
+      </div>
     </div>
   ) : null
 }

package/src/VariantFeatureWidget/BreakendOptionDialog.tsx

@@ -20,7 +20,7 @@ const useStyles = makeStyles()({
   },
 })
 
-function BreakendOptionDialog({
+export default observer(function BreakendOptionDialog({
   model,
   handleClose,
   feature,
@@ -43,7 +43,7 @@ function BreakendOptionDialog({
           control={
             <Checkbox
               checked={copyTracks}
-              onChange={() => setCopyTracks(val => !val)}
+              onChange={event => setCopyTracks(event.target.checked)}
             />
           }
           label="Copy tracks into the new view"
@@ -54,7 +54,7 @@ function BreakendOptionDialog({
           control={
             <Checkbox
               checked={mirrorTracks}
-              onChange={() => setMirrorTracks(val => !val)}
+              onChange={event => setMirrorTracks(event.target.checked)}
             />
           }
           label="Mirror tracks vertically in vertically stacked view"
@@ -114,5 +114,4 @@ function BreakendOptionDialog({
       </DialogActions>
     </Dialog>
   )
-}
-export default observer(BreakendOptionDialog)
+})

package/src/VariantFeatureWidget/VariantSampleGrid.tsx

@@ -7,7 +7,7 @@ import {
   Typography,
 } from '@mui/material'
 
-import { DataGrid } from '@mui/x-data-grid'
+import { DataGrid, GridToolbar } from '@mui/x-data-grid'
 import { BaseCard } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
 import { measureGridWidth, SimpleFeatureSerialized } from '@jbrowse/core/util'
 import ResizeBar, { useResizeBar } from '@jbrowse/core/ui/ResizeBar'
@@ -30,38 +30,24 @@ function SampleFilters({
   filter: Filters
   setFilter: (arg: Filters) => void
 }) {
-  const [showFilters, setShowFilters] = useState(false)
   return (
     <>
-      <FormControlLabel
-        control={
-          <Checkbox
-            checked={showFilters}
-            onChange={() => setShowFilters(f => !f)}
-          />
-        }
-        label="Show sample filters"
-      />
-      {showFilters ? (
-        <>
-          <Typography>
-            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
-          </Typography>
-          {columns.map(({ field }) => (
-            <TextField
-              key={`filter-${field}`}
-              placeholder={`Filter ${field}`}
-              value={filter[field] || ''}
-              onChange={event =>
-                setFilter({ ...filter, [field]: event.target.value })
-              }
-            />
-          ))}
-        </>
-      ) : null}
+      <Typography>
+        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
+      </Typography>
+      {columns.map(({ field }) => (
+        <TextField
+          key={`filter-${field}`}
+          placeholder={`Filter ${field}`}
+          value={filter[field] || ''}
+          onChange={event =>
+            setFilter({ ...filter, [field]: event.target.value })
+          }
+        />
+      ))}
     </>
   )
 }
@@ -98,9 +84,10 @@ export default function VariantSamples(props: {
       .filter(row =>
         filters.length
           ? filters.every(key => {
-              const val = row[key]
               const currFilter = filter[key]
-              return currFilter ? val.match(new RegExp(currFilter, 'i')) : true
+              return currFilter
+                ? row[key].match(new RegExp(currFilter, 'i'))
+                : true
             })
           : true,
       )
@@ -109,7 +96,7 @@ export default function VariantSamples(props: {
   }
 
   const keys = ['sample', ...Object.keys(preFilteredRows[0]?.[1] || {})]
-
+  const [checked, setChecked] = useState(false)
   const [widths, setWidths] = useState(
     keys.map(e => measureGridWidth(rows.map(r => r[e]))),
   )
@@ -119,28 +106,46 @@ export default function VariantSamples(props: {
     width: widths[index],
   }))
 
-  // disableSelectionOnClick helps avoid
+  // disableRowSelectionOnClick helps avoid
   // https://github.com/mui-org/material-ui-x/issues/1197
   return !preFilteredRows.length ? null : (
     <BaseCard {...props} title="Samples">
       {error ? <Typography color="error">{`${error}`}</Typography> : null}
-      <SampleFilters setFilter={setFilter} columns={columns} filter={filter} />
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={checked}
+            onChange={event => setChecked(event.target.checked)}
+          />
+        }
+        label={<Typography variant="body2">Show options</Typography>}
+      />
+      {checked ? (
+        <SampleFilters
+          setFilter={setFilter}
+          columns={columns}
+          filter={filter}
+        />
+      ) : null}
       <div ref={ref}>
         <ResizeBar
           widths={widths}
           setWidths={setWidths}
           scrollLeft={scrollLeft}
         />
-        <div ref={ref} style={{ height: 600, width: '100%', overflow: 'auto' }}>
-          <DataGrid
-            rows={rows}
-            columns={columns}
-            disableSelectionOnClick
-            rowHeight={25}
-            headerHeight={35}
-            disableColumnMenu
-          />
-        </div>
+        <DataGrid
+          rows={rows}
+          hideFooter={rows.length < 100}
+          columns={columns}
+          disableRowSelectionOnClick
+          rowHeight={25}
+          columnHeaderHeight={35}
+          disableColumnMenu
+          slots={{ toolbar: checked ? GridToolbar : null }}
+          slotProps={{
+            toolbar: { printOptions: { disableToolbarButton: true } },
+          }}
+        />
       </div>
     </BaseCard>
   )

package/src/VariantFeatureWidget/__snapshots__/VariantFeatureWidget.test.tsx.snap

@@ -188,7 +188,7 @@ exports[`renders with just the required model elements 1`] = `
                 </div>
               </div>
               <div
-                class="css-1upvn7b-container2"
+                class="css-1lttu3w-container"
               >
                 <button
                   class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-sghohy-MuiButtonBase-root-MuiButton-root"
@@ -224,7 +224,6 @@ exports[`renders with just the required model elements 1`] = `
                     />
                   </button>
                 </div>
-                <br />
               </div>
             </div>
           </div>