@jbrowse/plugin-linear-genome-view 2.6.1 → 2.6.3

package/src/LinearBasicDisplay/components/SetMaxHeight.tsx

@@ -1,73 +0,0 @@
-import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-import { Dialog } from '@jbrowse/core/ui'
-import {
-  Button,
-  DialogActions,
-  DialogContent,
-  Typography,
-  TextField,
-} from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-
-const useStyles = makeStyles()({
-  root: {
-    width: 500,
-  },
-})
-
-function SetMaxHeightDlg({
-  model,
-  handleClose,
-}: {
-  model: {
-    maxHeight?: number
-    setMaxHeight: (arg?: number) => void
-  }
-  handleClose: () => void
-}) {
-  const { classes } = useStyles()
-  const { maxHeight = '' } = model
-  const [max, setMax] = useState(`${maxHeight}`)
-
-  return (
-    <Dialog open onClose={handleClose} title="Set max height">
-      <DialogContent className={classes.root}>
-        <Typography>
-          Set max height for the track. For example, you can increase this if
-          the layout says &quot;Max height reached&quot;
-        </Typography>
-        <TextField
-          value={max}
-          onChange={event => setMax(event.target.value)}
-          placeholder="Enter max score"
-        />
-        <DialogActions>
-          <Button
-            variant="contained"
-            color="primary"
-            type="submit"
-            autoFocus
-            onClick={() => {
-              model.setMaxHeight(
-                max !== '' && !Number.isNaN(+max) ? +max : undefined,
-              )
-              handleClose()
-            }}
-          >
-            Submit
-          </Button>
-          <Button
-            variant="contained"
-            color="secondary"
-            onClick={() => handleClose()}
-          >
-            Cancel
-          </Button>
-        </DialogActions>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-export default observer(SetMaxHeightDlg)

package/src/LinearBasicDisplay/configSchema.ts

@@ -1,28 +0,0 @@
-import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import PluginManager from '@jbrowse/core/PluginManager'
-import { baseLinearDisplayConfigSchema } from '../BaseLinearDisplay'
-
-/**
- * #config LinearBasicDisplay
- * #category display
- */
-function configSchemaFactory(pluginManager: PluginManager) {
-  return ConfigurationSchema(
-    'LinearBasicDisplay',
-    {
-      /**
-       * #slot
-       */
-      renderer: pluginManager.pluggableConfigSchemaType('renderer'),
-    },
-    {
-      /**
-       * #baseConfiguration
-       */
-      baseConfiguration: baseLinearDisplayConfigSchema,
-      explicitlyTyped: true,
-    },
-  )
-}
-
-export default configSchemaFactory

package/src/LinearBasicDisplay/index.ts

@@ -1,25 +0,0 @@
-import PluginManager from '@jbrowse/core/PluginManager'
-import { DisplayType } from '@jbrowse/core/pluggableElementTypes'
-import { BaseLinearDisplayComponent } from '../BaseLinearDisplay'
-
-// locals
-import configSchema from './configSchema'
-import modelFactory from './model'
-
-export default (pluginManager: PluginManager) => {
-  pluginManager.addDisplayType(() => {
-    const config = configSchema(pluginManager)
-    return new DisplayType({
-      name: 'LinearBasicDisplay',
-      displayName: 'Basic feature display',
-      configSchema: config,
-      stateModel: modelFactory(config),
-      trackType: 'FeatureTrack',
-      viewType: 'LinearGenomeView',
-      ReactComponent: BaseLinearDisplayComponent,
-    })
-  })
-}
-
-export { default as modelFactory } from './model'
-export { default as configSchema } from './configSchema'

package/src/LinearBasicDisplay/model.ts

@@ -1,215 +0,0 @@
-import { lazy } from 'react'
-import {
-  getConf,
-  ConfigurationReference,
-  AnyConfigurationSchemaType,
-} from '@jbrowse/core/configuration'
-import { getSession } from '@jbrowse/core/util'
-import { MenuItem } from '@jbrowse/core/ui'
-import { types, getEnv, Instance } from 'mobx-state-tree'
-
-// icons
-import VisibilityIcon from '@mui/icons-material/Visibility'
-
-// locals
-import { BaseLinearDisplay } from '../BaseLinearDisplay'
-
-const SetMaxHeightDlg = lazy(() => import('./components/SetMaxHeight'))
-
-/**
- * #stateModel LinearBasicDisplay
- * #category display
- * used by `FeatureTrack`, has simple settings like "show/hide feature labels",
- * etc.
- */
-function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
-  return types
-    .compose(
-      'LinearBasicDisplay',
-      BaseLinearDisplay,
-      types.model({
-        /**
-         * #property
-         */
-        type: types.literal('LinearBasicDisplay'),
-        /**
-         * #property
-         */
-        trackShowLabels: types.maybe(types.boolean),
-        /**
-         * #property
-         */
-        trackShowDescriptions: types.maybe(types.boolean),
-        /**
-         * #property
-         */
-        trackDisplayMode: types.maybe(types.string),
-        /**
-         * #property
-         */
-        trackMaxHeight: types.maybe(types.number),
-        /**
-         * #property
-         */
-        configuration: ConfigurationReference(configSchema),
-      }),
-    )
-    .views(self => ({
-      /**
-       * #getter
-       */
-      get rendererTypeName() {
-        return getConf(self, ['renderer', 'type'])
-      },
-
-      /**
-       * #getter
-       */
-      get showLabels() {
-        return self.trackShowLabels ?? getConf(self, ['renderer', 'showLabels'])
-      },
-
-      /**
-       * #getter
-       */
-      get showDescriptions() {
-        return (
-          self.trackShowDescriptions ??
-          getConf(self, ['renderer', 'showDescriptions'])
-        )
-      },
-
-      /**
-       * #getter
-       */
-      get maxHeight() {
-        return self.trackMaxHeight ?? getConf(self, ['renderer', 'maxHeight'])
-      },
-
-      /**
-       * #getter
-       */
-      get displayMode() {
-        return (
-          self.trackDisplayMode ?? getConf(self, ['renderer', 'displayMode'])
-        )
-      },
-    }))
-    .views(self => ({
-      /**
-       * #getter
-       */
-      get rendererConfig() {
-        const configBlob = getConf(self, ['renderer']) || {}
-        const config = configBlob as Omit<typeof configBlob, symbol>
-
-        return self.rendererType.configSchema.create(
-          {
-            ...config,
-            showLabels: self.showLabels,
-            showDescriptions: self.showDescriptions,
-            displayMode: self.displayMode,
-            maxHeight: self.maxHeight,
-          },
-          getEnv(self),
-        )
-      },
-    }))
-
-    .actions(self => ({
-      /**
-       * #action
-       */
-      toggleShowLabels() {
-        self.trackShowLabels = !self.showLabels
-      },
-      /**
-       * #action
-       */
-      toggleShowDescriptions() {
-        self.trackShowDescriptions = !self.showDescriptions
-      },
-      /**
-       * #action
-       */
-      setDisplayMode(val: string) {
-        self.trackDisplayMode = val
-      },
-      /**
-       * #action
-       */
-      setMaxHeight(val?: number) {
-        self.trackMaxHeight = val
-      },
-    }))
-    .views(self => {
-      const {
-        trackMenuItems: superTrackMenuItems,
-        renderProps: superRenderProps,
-      } = self
-      return {
-        /**
-         * #method
-         */
-        renderProps() {
-          const config = self.rendererConfig
-          const superProps = superRenderProps()
-          const superPropsOmit = superProps as Omit<typeof superProps, symbol>
-          return {
-            ...superPropsOmit,
-            config,
-          }
-        },
-
-        /**
-         * #method
-         */
-        trackMenuItems(): MenuItem[] {
-          return [
-            ...superTrackMenuItems(),
-            {
-              label: 'Show labels',
-              icon: VisibilityIcon,
-              type: 'checkbox',
-              checked: self.showLabels,
-              onClick: () => self.toggleShowLabels(),
-            },
-            {
-              label: 'Show descriptions',
-              icon: VisibilityIcon,
-              type: 'checkbox',
-              checked: self.showDescriptions,
-              onClick: () => self.toggleShowDescriptions(),
-            },
-            {
-              label: 'Display mode',
-              icon: VisibilityIcon,
-              subMenu: [
-                'compact',
-                'reducedRepresentation',
-                'normal',
-                'collapse',
-              ].map(val => ({
-                label: val,
-                onClick: () => self.setDisplayMode(val),
-              })),
-            },
-            {
-              label: 'Set max height',
-              onClick: () => {
-                getSession(self).queueDialog(handleClose => [
-                  SetMaxHeightDlg,
-                  { model: self, handleClose },
-                ])
-              },
-            },
-          ]
-        },
-      }
-    })
-}
-
-export type FeatureTrackStateModel = ReturnType<typeof stateModelFactory>
-export type FeatureTrackModel = Instance<FeatureTrackStateModel>
-
-export default stateModelFactory

package/src/LinearGenomeView/README.md

@@ -1,9 +0,0 @@
-# Key LinearGenomeView state fields
-
-- displayedRegions - array of { refName, start, end }, tiled in the display left
-  to right
-- offsetPx - the offset in px of the left edge of the view
-- bpPerPx - ratio of basepairs to screen pixels
-- width - width in px of the view
-
-Everything runs off of these four things.

package/src/LinearGenomeView/components/CenterLine.tsx

@@ -1,65 +0,0 @@
-import React, { useRef } from 'react'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-import { LinearGenomeViewModel } from '..'
-
-type LGV = LinearGenomeViewModel
-
-const useStyles = makeStyles()(theme => ({
-  centerLineContainer: {
-    background: 'transparent',
-    height: '100%',
-    zIndex: 5, // above the track but under menu
-    position: 'absolute',
-    border: `1px ${theme.palette.action.active} dashed`,
-    borderTop: 'none',
-    borderBottom: 'none',
-    pointerEvents: 'none',
-  },
-  centerLineText: {
-    position: 'absolute',
-    pointerEvents: 'none',
-    whiteSpace: 'nowrap',
-    fontWeight: 'bold',
-  },
-}))
-
-function CenterLine({ model }: { model: LGV }) {
-  const { bpPerPx, centerLineInfo, trackHeights, tracks, width } = model
-  const ref = useRef<HTMLDivElement>(null)
-  const { classes } = useStyles()
-  const startingPosition = width / 2
-
-  return tracks.length ? (
-    <div
-      data-testid="centerline_container"
-      className={classes.centerLineContainer}
-      role="presentation"
-      ref={ref}
-      style={{
-        left: `${startingPosition}px`,
-        width: Math.max(1 / bpPerPx, 1),
-      }}
-    >
-      {centerLineInfo && (
-        <div
-          // text that indicates what bp is center, positioned
-          // at the bottom right of the center line
-          data-testid="centerline_text"
-          className={classes.centerLineText}
-          role="presentation"
-          style={{
-            left: Math.max(1 / bpPerPx, 1) + 5,
-            top: trackHeights,
-          }}
-        >
-          {/* change bp to refName */}
-          {centerLineInfo.refName}:{' '}
-          {Math.max(Math.round(centerLineInfo.offset) + 1, 0)}
-        </div>
-      )}
-    </div>
-  ) : null
-}
-
-export default observer(CenterLine)

package/src/LinearGenomeView/components/Cytobands.tsx

@@ -1,154 +0,0 @@
-import React from 'react'
-import { observer } from 'mobx-react'
-
-// core
-import { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel'
-import { ContentBlock } from '@jbrowse/core/util/blockTypes'
-import { Assembly } from '@jbrowse/core/assemblyManager/assembly'
-
-// locals
-import { HEADER_OVERVIEW_HEIGHT } from '..'
-import { getCytobands } from './util'
-
-// rounded rect from https://stackoverflow.com/a/45889603/2129219
-// prettier-ignore
-function rightRoundedRect(x: number, y: number, width: number, height: number, radius: number) {
-  return "M" + x + "," + y
-       + "h" + (width - radius)
-       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
-       + "v" + (height - 2 * radius)
-       + "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
-       + "h" + (radius - width)
-       + "z";
-}
-
-// prettier-ignore
-function leftRoundedRect(x: number, y: number, width: number, height: number, radius: number ) {
-  return "M" + (x + radius) + "," + y
-       + "h" + (width - radius)
-       + "v" + height
-       + "h" + (radius - width)
-       + "a" + radius + "," + radius + " 0 0 1 " + (-radius) + "," + (-radius)
-       + "v" + (2 * radius - height)
-       + "a" + radius + "," + radius + " 0 0 1 " + radius + "," + (-radius)
-       + "z";
-}
-
-const colorMap: { [key: string]: string | undefined } = {
-  gneg: 'rgb(227,227,227)',
-  gpos25: 'rgb(142,142,142)',
-  gpos50: 'rgb(85,85,85)',
-  gpos100: 'rgb(0,0,0)',
-  gpos75: 'rgb(57,57,57)',
-  gvar: 'rgb(0,0,0)',
-  stalk: 'rgb(127,127,127)',
-  acen: '#800',
-}
-
-export default observer(function Cytobands({
-  overview,
-  block,
-  assembly,
-}: {
-  overview: Base1DViewModel
-  assembly?: Assembly
-  block: ContentBlock
-}) {
-  const { offsetPx, reversed } = block
-  const cytobands = getCytobands(assembly, block.refName)
-  const coords = cytobands.map(f => {
-    const { refName, start, end, type } = f
-    return [
-      overview.bpToPx({
-        refName,
-        coord: start,
-      }),
-      overview.bpToPx({
-        refName,
-        coord: end,
-      }),
-      type,
-    ]
-  })
-
-  const arr = cytobands || []
-  const lcap = reversed ? arr.length - 1 : 0
-  const rcap = reversed ? 0 : arr.length - 1
-
-  let firstCent = true
-  return (
-    <g transform={`translate(-${offsetPx})`}>
-      {coords.map(([start, end, type], index) => {
-        const key = `${start}-${end}-${type}`
-        if (type === 'acen' && firstCent) {
-          firstCent = false
-          return (
-            <polygon
-              key={key}
-              points={[
-                [start, 0],
-                [end, HEADER_OVERVIEW_HEIGHT / 2],
-                [start, HEADER_OVERVIEW_HEIGHT],
-              ].toString()}
-              fill={colorMap[type]}
-            />
-          )
-        }
-        if (type === 'acen' && !firstCent) {
-          return (
-            <polygon
-              key={key}
-              points={[
-                [start, HEADER_OVERVIEW_HEIGHT / 2],
-                [end, 0],
-                [end, HEADER_OVERVIEW_HEIGHT],
-              ].toString()}
-              fill={colorMap[type]}
-            />
-          )
-        }
-
-        if (lcap === index) {
-          return (
-            <path
-              key={key}
-              d={leftRoundedRect(
-                Math.min(start, end),
-                0,
-                Math.abs(end - start),
-                HEADER_OVERVIEW_HEIGHT,
-                8,
-              )}
-              fill={colorMap[type]}
-            />
-          )
-        } else if (rcap === index) {
-          return (
-            <path
-              key={key}
-              d={rightRoundedRect(
-                Math.min(start, end),
-                0,
-                Math.abs(end - start) - 2,
-                HEADER_OVERVIEW_HEIGHT,
-                8,
-              )}
-              fill={colorMap[type]}
-            />
-          )
-        } else {
-          return (
-            <rect
-              key={key}
-              x={Math.min(start, end)}
-              y={0}
-              width={Math.abs(end - start)}
-              height={HEADER_OVERVIEW_HEIGHT}
-              fill={colorMap[type]}
-            />
-          )
-        }
-      })}
-    </g>
-  )
-})