@jbrowse/plugin-data-management 2.5.0 → 2.6.2

package/src/HierarchicalTrackSelectorWidget/components/__snapshots__/HierarchicalTrackSelector.test.tsx.snap

@@ -1,200 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders nothing with no assembly 1`] = `
-<button
-  class="MuiButtonBase-root MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary MuiFab-root MuiFab-circular MuiFab-sizeSmall MuiFab-secondary css-15opis6-MuiButtonBase-root-MuiFab-root-fab"
-  tabindex="0"
-  type="button"
->
-  <svg
-    aria-hidden="true"
-    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
-    data-testid="AddIcon"
-    focusable="false"
-    viewBox="0 0 24 24"
-  >
-    <path
-      d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
-    />
-  </svg>
-  <span
-    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-  />
-</button>
-`;
-
-exports[`renders with a couple of categorized tracks 1`] = `
-<div
-  data-testid="hierarchical_track_selector"
->
-  <div
-    style="display: flex;"
-  >
-    <button
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1kgqocu-MuiButtonBase-root-MuiIconButton-root-menuIcon"
-      tabindex="0"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
-        data-testid="MenuIcon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
-        />
-      </svg>
-      <span
-        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-      />
-    </button>
-    <div
-      class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root css-rlnh8o-MuiFormControl-root-MuiTextField-root-searchBox"
-    >
-      <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard css-1s1jvl0-MuiFormLabel-root-MuiInputLabel-root"
-        data-shrink="false"
-        for="mui-5"
-        id="mui-5-label"
-      >
-        Filter tracks
-      </label>
-      <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1blad95-MuiInputBase-root-MuiInput-root"
-      >
-        <input
-          aria-invalid="false"
-          class="MuiInputBase-input MuiInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-nz481w-MuiInputBase-input-MuiInput-input"
-          id="mui-5"
-          type="text"
-          value=""
-        />
-        <div
-          class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeSmall css-1laqsz7-MuiInputAdornment-root"
-        >
-          <button
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-9vna8i-MuiButtonBase-root-MuiIconButton-root"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
-              data-testid="ClearIcon"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-              />
-            </svg>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
-          </button>
-        </div>
-      </div>
-    </div>
-    <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall css-1c8zr45-MuiButtonBase-root-MuiButton-root-menuIcon"
-      tabindex="0"
-      type="button"
-    >
-      Open faceted selector
-      <span
-        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-      />
-    </button>
-  </div>
-</div>
-`;
-
-exports[`renders with a couple of uncategorized tracks 1`] = `
-<div
-  data-testid="hierarchical_track_selector"
->
-  <div
-    style="display: flex;"
-  >
-    <button
-      class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-1kgqocu-MuiButtonBase-root-MuiIconButton-root-menuIcon"
-      tabindex="0"
-      type="button"
-    >
-      <svg
-        aria-hidden="true"
-        class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
-        data-testid="MenuIcon"
-        focusable="false"
-        viewBox="0 0 24 24"
-      >
-        <path
-          d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
-        />
-      </svg>
-      <span
-        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-      />
-    </button>
-    <div
-      class="MuiFormControl-root MuiFormControl-marginDense MuiFormControl-fullWidth MuiTextField-root css-rlnh8o-MuiFormControl-root-MuiTextField-root-searchBox"
-    >
-      <label
-        class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-sizeSmall MuiInputLabel-standard css-1s1jvl0-MuiFormLabel-root-MuiInputLabel-root"
-        data-shrink="false"
-        for="mui-1"
-        id="mui-1-label"
-      >
-        Filter tracks
-      </label>
-      <div
-        class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-sizeSmall MuiInputBase-adornedEnd css-1blad95-MuiInputBase-root-MuiInput-root"
-      >
-        <input
-          aria-invalid="false"
-          class="MuiInputBase-input MuiInput-input MuiInputBase-inputSizeSmall MuiInputBase-inputAdornedEnd css-nz481w-MuiInputBase-input-MuiInput-input"
-          id="mui-1"
-          type="text"
-          value=""
-        />
-        <div
-          class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-standard MuiInputAdornment-sizeSmall css-1laqsz7-MuiInputAdornment-root"
-        >
-          <button
-            class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall css-9vna8i-MuiButtonBase-root-MuiIconButton-root"
-            tabindex="0"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-havevq-MuiSvgIcon-root"
-              data-testid="ClearIcon"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
-              />
-            </svg>
-            <span
-              class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-            />
-          </button>
-        </div>
-      </div>
-    </div>
-    <button
-      class="MuiButtonBase-root MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall MuiButton-root MuiButton-text MuiButton-textPrimary MuiButton-sizeSmall MuiButton-textSizeSmall css-1c8zr45-MuiButtonBase-root-MuiButton-root-menuIcon"
-      tabindex="0"
-      type="button"
-    >
-      Open faceted selector
-      <span
-        class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-      />
-    </button>
-  </div>
-</div>
-`;

package/src/HierarchicalTrackSelectorWidget/components/dialogs/CloseConnectionDialog.tsx

@@ -1,69 +0,0 @@
-import React from 'react'
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogContentText,
-  Button,
-  List,
-  ListItem,
-  DialogActions,
-} from '@mui/material'
-import { observer } from 'mobx-react'
-
-function CloseConnectionDialog({
-  modalInfo = {},
-  setModalInfo,
-}: {
-  modalInfo?: {
-    name?: string
-    dereferenceTypeCount?: { [key: string]: number }
-    safelyBreakConnection?: Function
-  }
-  setModalInfo: Function
-}) {
-  const { name, dereferenceTypeCount, safelyBreakConnection } = modalInfo
-  return (
-    <Dialog open>
-      <DialogTitle>Close connection &quot;{name}&quot;</DialogTitle>
-      <DialogContent>
-        {dereferenceTypeCount ? (
-          <>
-            <DialogContentText>
-              Closing this connection will close:
-            </DialogContentText>
-            <List>
-              {Object.entries(dereferenceTypeCount).map(([key, value]) => (
-                <ListItem key={key}>{`${value} ${key}`}</ListItem>
-              ))}
-            </List>
-          </>
-        ) : null}
-        <DialogContentText>
-          Are you sure you want to close this connection?
-        </DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={() => setModalInfo()} color="primary">
-          Cancel
-        </Button>
-        <Button
-          variant="contained"
-          onClick={
-            modalInfo
-              ? () => {
-                  safelyBreakConnection?.()
-                  setModalInfo()
-                }
-              : () => {}
-          }
-          color="primary"
-        >
-          OK
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-}
-
-export default observer(CloseConnectionDialog)

package/src/HierarchicalTrackSelectorWidget/components/dialogs/DeleteConnectionDialog.tsx

@@ -1,53 +0,0 @@
-import React from 'react'
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogContentText,
-  DialogActions,
-  Button,
-} from '@mui/material'
-import { observer } from 'mobx-react'
-import { AnyConfigurationModel } from '@jbrowse/core/configuration'
-import { AbstractSessionModel } from '@jbrowse/core/util'
-
-function DeleteConnectionDialog({
-  deleteDialogDetails,
-  session,
-  handleClose,
-}: {
-  deleteDialogDetails: { name: string; connectionConf: AnyConfigurationModel }
-  session: AbstractSessionModel
-  handleClose: () => void
-}) {
-  const { connectionConf, name } = deleteDialogDetails
-  return (
-    <Dialog open>
-      <DialogTitle>Delete connection &quot;{name}&quot;</DialogTitle>
-      <DialogContent>
-        <DialogContentText>
-          Are you sure you want to delete this connection?
-        </DialogContentText>
-      </DialogContent>
-      <DialogActions>
-        <Button onClick={() => handleClose()} color="primary">
-          Cancel
-        </Button>
-        <Button
-          variant="contained"
-          color="primary"
-          onClick={() => {
-            if (connectionConf) {
-              session.deleteConnection?.(connectionConf)
-            }
-            handleClose()
-          }}
-        >
-          OK
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-}
-
-export default observer(DeleteConnectionDialog)

package/src/HierarchicalTrackSelectorWidget/components/dialogs/ManageConnectionsDialog.tsx

@@ -1,84 +0,0 @@
-import React from 'react'
-import {
-  Button,
-  DialogContent,
-  DialogActions,
-  IconButton,
-  Tooltip,
-  Typography,
-} from '@mui/material'
-import { Dialog } from '@jbrowse/core/ui'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-import {
-  AnyConfigurationModel,
-  readConfObject,
-} from '@jbrowse/core/configuration'
-import { AbstractSessionModel } from '@jbrowse/core/util'
-
-// icons
-import CloseIcon from '@mui/icons-material/Close'
-
-const useStyles = makeStyles()(theme => ({
-  connectionContainer: {
-    margin: theme.spacing(4),
-    width: 500,
-  },
-}))
-
-function ManageConnectionsDlg({
-  session,
-  handleClose,
-  breakConnection,
-}: {
-  handleClose: () => void
-  session: AbstractSessionModel
-  breakConnection: (conf: AnyConfigurationModel, arg: boolean) => void
-}) {
-  const { classes } = useStyles()
-  const { adminMode, connections, sessionConnections } = session
-  return (
-    <Dialog open onClose={handleClose} maxWidth="lg" title="Delete connections">
-      <DialogContent>
-        <Typography>
-          Click the X icon to delete the connection from your config completely
-        </Typography>
-        <div className={classes.connectionContainer}>
-          {connections.map(conf => {
-            const name = readConfObject(conf, 'name')
-            return (
-              <Typography key={`conn-${name}`}>
-                {adminMode || sessionConnections?.includes(conf) ? (
-                  <IconButton onClick={() => breakConnection(conf, true)}>
-                    <CloseIcon color="error" />
-                  </IconButton>
-                ) : (
-                  <Tooltip title="Unable to delete connection in config file as non-admin user">
-                    <IconButton>
-                      <CloseIcon color="disabled" />
-                    </IconButton>
-                  </Tooltip>
-                )}
-                {name}
-              </Typography>
-            )
-          })}
-          {!connections.length ? (
-            <Typography>No connections found</Typography>
-          ) : null}
-        </div>
-      </DialogContent>
-      <DialogActions>
-        <Button
-          onClick={() => handleClose()}
-          variant="contained"
-          color="primary"
-        >
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-}
-
-export default observer(ManageConnectionsDlg)

package/src/HierarchicalTrackSelectorWidget/components/dialogs/ToggleConnectionsDialog.tsx

@@ -1,97 +0,0 @@
-import React from 'react'
-import {
-  Button,
-  Checkbox,
-  DialogContent,
-  DialogActions,
-  FormControlLabel,
-  Typography,
-} from '@mui/material'
-import { Dialog } from '@jbrowse/core/ui'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-import {
-  AnyConfigurationModel,
-  readConfObject,
-} from '@jbrowse/core/configuration'
-import { AbstractSessionModel } from '@jbrowse/core/util'
-
-export function ellipses(slug: string) {
-  return slug.length > 20 ? `${slug.slice(0, 20)}...` : slug
-}
-
-const useStyles = makeStyles()(theme => ({
-  connectionContainer: {
-    width: 500,
-    margin: theme.spacing(4),
-  },
-}))
-
-function ToggleConnectionDialog({
-  session,
-  handleClose,
-  breakConnection,
-}: {
-  handleClose: () => void
-  session: AbstractSessionModel
-  breakConnection: (arg: AnyConfigurationModel) => void
-}) {
-  const { classes } = useStyles()
-  const { connections, connectionInstances: instances = [] } = session
-  return (
-    <Dialog
-      open
-      onClose={handleClose}
-      maxWidth="lg"
-      title="Turn on/off connections"
-    >
-      <DialogContent>
-        <Typography>Use the checkbox to turn on/off connections</Typography>
-        <div className={classes.connectionContainer}>
-          {connections.map(conf => {
-            const name = readConfObject(conf, 'name')
-            const assemblyNames = readConfObject(conf, 'assemblyNames')
-            const found = instances.find(conn => name === conn.name)
-            return (
-              <FormControlLabel
-                key={conf.connectionId}
-                control={
-                  <Checkbox
-                    checked={!!found}
-                    onChange={() => {
-                      if (found) {
-                        breakConnection(conf)
-                      } else {
-                        session.makeConnection?.(conf)
-                      }
-                    }}
-                    color="primary"
-                  />
-                }
-                label={`${name} ${
-                  assemblyNames.length
-                    ? '(' + ellipses(assemblyNames.join(',')) + ')'
-                    : ''
-                }`}
-              />
-            )
-          })}
-          {!connections.length ? (
-            <Typography>No connections found</Typography>
-          ) : null}
-        </div>
-      </DialogContent>
-      <DialogActions>
-        <Button
-          onClick={() => handleClose()}
-          variant="contained"
-          color="primary"
-        >
-          Close
-        </Button>
-      </DialogActions>
-    </Dialog>
-  )
-}
-
-export default observer(ToggleConnectionDialog)

package/src/HierarchicalTrackSelectorWidget/components/faceted/FacetFilters.tsx

@@ -1,138 +0,0 @@
-import React, { useState } from 'react'
-import {
-  Typography,
-  FormControl,
-  Select,
-  IconButton,
-  Tooltip,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-
-// icon
-import ClearIcon from '@mui/icons-material/Clear'
-import MinimizeIcon from '@mui/icons-material/Minimize'
-import AddIcon from '@mui/icons-material/Add'
-
-const useStyles = makeStyles()(theme => ({
-  facet: {
-    margin: 0,
-    marginLeft: theme.spacing(2),
-  },
-  select: {
-    marginBottom: theme.spacing(2),
-  },
-}))
-
-function FacetFilter({
-  column,
-  vals,
-  width,
-  dispatch,
-  filters,
-}: {
-  column: { field: string }
-  vals: [string, number][]
-  width: number
-  dispatch: (arg: { key: string; val: string[] }) => void
-  filters: Record<string, string[]>
-}) {
-  const { classes } = useStyles()
-  const [visible, setVisible] = useState(true)
-  return (
-    <FormControl key={column.field} className={classes.facet} style={{ width }}>
-      <div style={{ display: 'flex' }}>
-        <Typography>{column.field}</Typography>
-        <Tooltip title="Clear selection on this facet filter">
-          <IconButton
-            onClick={() => {
-              dispatch({ key: column.field, val: [] })
-            }}
-            size="small"
-          >
-            <ClearIcon />
-          </IconButton>
-        </Tooltip>
-        <Tooltip title="Minimize/expand this facet filter">
-          <IconButton onClick={() => setVisible(!visible)} size="small">
-            {visible ? <MinimizeIcon /> : <AddIcon />}
-          </IconButton>
-        </Tooltip>
-      </div>
-      {visible ? (
-        <Select
-          multiple
-          native
-          className={classes.select}
-          value={filters[column.field]}
-          onChange={event => {
-            // @ts-expect-error
-            const { options } = event.target
-            const val: string[] = []
-            const len = options.length
-            for (let i = 0; i < len; i++) {
-              if (options[i].selected) {
-                val.push(options[i].value)
-              }
-            }
-            dispatch({ key: column.field, val })
-          }}
-        >
-          {vals
-            .sort((a, b) => a[0].localeCompare(b[0]))
-            .map(([name, count]) => (
-              <option key={name} value={name}>
-                {name} ({count})
-              </option>
-            ))}
-        </Select>
-      ) : null}
-    </FormControl>
-  )
-}
-
-export default function FacetFilters({
-  rows,
-  columns,
-  dispatch,
-  filters,
-  width,
-}: {
-  rows: Record<string, unknown>[]
-  filters: Record<string, string[]>
-  columns: { field: string }[]
-  dispatch: (arg: { key: string; val: string[] }) => void
-  width: number
-}) {
-  const facets = columns.slice(1)
-  const uniqs = facets.map(() => new Map<string, number>())
-  for (const row of rows) {
-    for (const [index, column] of facets.entries()) {
-      const elt = uniqs[index]
-      const key = `${row[column.field] || ''}`
-      const val = elt.get(key)
-      // we don't allow filtering on empty yet
-      if (key) {
-        if (val === undefined) {
-          elt.set(key, 1)
-        } else {
-          elt.set(key, val + 1)
-        }
-      }
-    }
-  }
-
-  return (
-    <div>
-      {facets.map((column, index) => (
-        <FacetFilter
-          key={column.field}
-          vals={[...uniqs[index]]}
-          column={column}
-          width={width}
-          dispatch={dispatch}
-          filters={filters}
-        />
-      ))}
-    </div>
-  )
-}

package/src/HierarchicalTrackSelectorWidget/components/faceted/FacetedDialog.tsx

@@ -1,29 +0,0 @@
-import React from 'react'
-import { DialogContent } from '@mui/material'
-import { Dialog } from '@jbrowse/core/ui'
-import { observer } from 'mobx-react'
-
-// locals
-import { HierarchicalTrackSelectorModel } from '../../model'
-import FacetedSelector from './FacetedSelector'
-
-function FacetedDlg(props: {
-  handleClose: () => void
-  model: HierarchicalTrackSelectorModel
-}) {
-  const { handleClose } = props
-  return (
-    <Dialog
-      open
-      onClose={handleClose}
-      maxWidth="xl"
-      title="Faceted track selector"
-    >
-      <DialogContent>
-        <FacetedSelector {...props} />
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export default observer(FacetedDlg)