@jbrowse/plugin-linear-comparative-view 2.6.1 → 2.6.2

package/src/LinearComparativeDisplay/stateModelFactory.ts

@@ -1,212 +0,0 @@
-import {
-  readConfObject,
-  ConfigurationReference,
-  AnyConfigurationSchemaType,
-} from '@jbrowse/core/configuration'
-import { types, getSnapshot, Instance } from 'mobx-state-tree'
-import {
-  dedupe,
-  Feature,
-  getContainingView,
-  getSession,
-  makeAbortableReaction,
-} from '@jbrowse/core/util'
-import { getRpcSessionId } from '@jbrowse/core/util/tracks'
-import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models'
-import { LinearComparativeViewModel } from '../LinearComparativeView/model'
-
-/**
- * #stateModel LinearComparativeDisplay
- */
-function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
-  return types
-    .compose(
-      'LinearComparativeDisplay',
-      BaseDisplay,
-      types.model({
-        /**
-         * #property
-         */
-        type: types.literal('LinearComparativeDisplay'),
-        /**
-         * #property
-         */
-        configuration: ConfigurationReference(configSchema),
-        /**
-         * #property
-         */
-        height: 100,
-      }),
-    )
-    .volatile((/* self */) => ({
-      renderInProgress: undefined as AbortController | undefined,
-      features: undefined as Feature[] | undefined,
-      message: undefined as string | undefined,
-    }))
-    .views(self => ({
-      /**
-       * #getter
-       */
-      renderProps() {
-        return {
-          rpcDriverName: self.rpcDriverName,
-          displayModel: self,
-          highResolutionScaling: 2,
-        }
-      },
-    }))
-    .actions(self => {
-      let renderInProgress: undefined | AbortController
-
-      return {
-        /**
-         * #action
-         * controlled by a reaction
-         */
-        setLoading(abortController: AbortController) {
-          self.message = undefined
-          self.error = undefined
-          renderInProgress = abortController
-        },
-
-        /**
-         * #action
-         * controlled by a reaction
-         */
-        setMessage(messageText: string) {
-          if (renderInProgress && !renderInProgress.signal.aborted) {
-            renderInProgress.abort()
-          }
-          self.message = messageText
-          self.error = undefined
-          renderInProgress = undefined
-        },
-
-        /**
-         * #action
-         * controlled by a reaction
-         */
-        setRendered(args?: { features: Feature[] }) {
-          if (!args) {
-            return
-          }
-          const { features } = args
-          const existingFeatures = self.features || []
-
-          const featIds = new Set(existingFeatures.map(f => f.id()) || [])
-          const newFeatIds = new Set(features?.map(f => f.id()) || [])
-
-          let foundNewFeatureNotInExistingMap = false
-          let foundExistingFeatureNotInNewMap = false
-          for (let i = 0; i < features.length; i++) {
-            if (!featIds.has(features[i].id())) {
-              foundNewFeatureNotInExistingMap = true
-              break
-            }
-          }
-          for (let i = 0; i < existingFeatures.length; i++) {
-            if (!newFeatIds.has(existingFeatures[i].id())) {
-              foundExistingFeatureNotInNewMap = true
-              break
-            }
-          }
-
-          self.message = undefined
-          self.error = undefined
-          renderInProgress = undefined
-
-          if (
-            foundNewFeatureNotInExistingMap ||
-            foundExistingFeatureNotInNewMap ||
-            !self.features
-          ) {
-            self.features = features
-          }
-        },
-
-        /**
-         * #action
-         * controlled by a reaction
-         */
-        setError(error: unknown) {
-          console.error(error)
-          if (renderInProgress && !renderInProgress.signal.aborted) {
-            renderInProgress.abort()
-          }
-          // the rendering failed for some reason
-          self.message = undefined
-          self.error = error
-          renderInProgress = undefined
-        },
-      }
-    })
-    .actions(self => ({
-      afterAttach() {
-        makeAbortableReaction(
-          // @ts-expect-error
-          self,
-          renderBlockData,
-          renderBlockEffect,
-          {
-            name: `${self.type} ${self.id} rendering`,
-            delay: 1000,
-            fireImmediately: true,
-          },
-          self.setLoading,
-          self.setRendered,
-          self.setError,
-        )
-      },
-    }))
-}
-function renderBlockData(self: LinearComparativeDisplay) {
-  const { rpcManager } = getSession(self)
-  const display = self
-
-  // Alternative to readConfObject(config) is below used because renderProps is
-  // something under our control.  Compare to serverSideRenderedBlock
-  readConfObject(self.configuration)
-
-  const { adapterConfig } = self
-  const parent = getContainingView(self) as LinearComparativeViewModel
-  const sessionId = getRpcSessionId(self)
-  getSnapshot(parent)
-
-  return parent.initialized
-    ? {
-        rpcManager,
-        renderProps: {
-          ...display.renderProps(),
-          view: parent,
-          adapterConfig,
-          sessionId,
-          timeout: 1000000,
-          self,
-        },
-      }
-    : undefined
-}
-
-async function renderBlockEffect(props: ReturnType<typeof renderBlockData>) {
-  if (!props) {
-    return
-  }
-
-  const { rpcManager, renderProps } = props
-  const { adapterConfig } = renderProps
-  const view0 = renderProps.view.views[0]
-
-  const features = (await rpcManager.call('getFeats', 'CoreGetFeatures', {
-    regions: view0.staticBlocks.contentBlocks,
-    sessionId: 'getFeats',
-    adapterConfig,
-  })) as Feature[]
-
-  return {
-    features: dedupe(features, f => f.id()),
-  }
-}
-
-export default stateModelFactory
-export type LinearComparativeDisplayModel = ReturnType<typeof stateModelFactory>
-export type LinearComparativeDisplay = Instance<LinearComparativeDisplayModel>

package/src/LinearComparativeView/components/Header.tsx

@@ -1,103 +0,0 @@
-import React, { useState } from 'react'
-import { IconButton, Typography } from '@mui/material'
-import { makeStyles } from 'tss-react/mui'
-import { SearchBox } from '@jbrowse/plugin-linear-genome-view'
-import { observer } from 'mobx-react'
-import { Menu } from '@jbrowse/core/ui'
-
-// icons
-import MoreVertIcon from '@mui/icons-material/MoreVert'
-
-// locals
-import { LinearComparativeViewModel } from '../model'
-import { TrackSelector as TrackSelectorIcon } from '@jbrowse/core/ui/Icons'
-
-type LCV = LinearComparativeViewModel
-
-const useStyles = makeStyles()(() => ({
-  headerBar: {
-    gridArea: '1/1/auto/span 2',
-    display: 'flex',
-  },
-  spacer: {
-    flexGrow: 1,
-  },
-  iconButton: {
-    margin: 5,
-  },
-  bp: {
-    display: 'flex',
-    alignItems: 'center',
-    marginLeft: 10,
-  },
-  searchContainer: {
-    marginLeft: 5,
-  },
-  searchBox: {
-    display: 'flex',
-  },
-}))
-
-const TrackSelector = observer(({ model }: { model: LCV }) => {
-  return (
-    <IconButton
-      onClick={model.activateTrackSelector}
-      title="Open track selector"
-    >
-      <TrackSelectorIcon />
-    </IconButton>
-  )
-})
-
-const Header = observer(function ({ model }: { model: LCV }) {
-  const { classes } = useStyles()
-  const [menuAnchorEl, setMenuAnchorEl] = useState<HTMLElement>()
-  const anyShowHeaders = model.views.some(view => !view.hideHeader)
-  return (
-    <div className={classes.headerBar}>
-      <TrackSelector model={model} />
-
-      <IconButton
-        onClick={event => setMenuAnchorEl(event.currentTarget)}
-        className={classes.iconButton}
-      >
-        <MoreVertIcon />
-      </IconButton>
-      {!anyShowHeaders
-        ? model.views.map(view => (
-            <div key={view.id} className={classes.searchBox}>
-              <div className={classes.searchContainer}>
-                <SearchBox model={view} showHelp={false} />
-              </div>
-              <div className={classes.bp}>
-                <Typography
-                  variant="body2"
-                  color="textSecondary"
-                  className={classes.bp}
-                >
-                  {Math.round(view.coarseTotalBp).toLocaleString('en-US')} bp
-                </Typography>
-              </div>
-            </div>
-          ))
-        : null}
-
-      <div className={classes.spacer} />
-
-      {menuAnchorEl ? (
-        <Menu
-          anchorEl={menuAnchorEl}
-          open
-          onMenuItemClick={(_event, callback) => {
-            callback()
-            setMenuAnchorEl(undefined)
-          }}
-          menuItems={model.headerMenuItems()}
-          onClose={() => setMenuAnchorEl(undefined)}
-        />
-      ) : null}
-    </div>
-  )
-})
-
-export default Header

package/src/LinearComparativeView/components/LinearComparativeView.tsx

@@ -1,152 +0,0 @@
-import React from 'react'
-import { makeStyles } from 'tss-react/mui'
-import { observer } from 'mobx-react'
-import { getConf, AnyConfigurationModel } from '@jbrowse/core/configuration'
-import { getEnv } from '@jbrowse/core/util'
-import { ResizeHandle } from '@jbrowse/core/ui'
-
-// locals
-import { LinearComparativeViewModel } from '../model'
-import Rubberband from './Rubberband'
-import Header from './Header'
-
-const useStyles = makeStyles()(theme => ({
-  container: {
-    display: 'grid',
-  },
-  overlay: {
-    zIndex: 100,
-    gridArea: '1/1',
-  },
-  content: {
-    gridArea: '1/1',
-    position: 'relative',
-  },
-  grid: {
-    display: 'grid',
-  },
-  relative: {
-    position: 'relative',
-  },
-
-  // this helps keep the vertical guide inside the parent view container,
-  // similar style exists in the single LGV's trackscontainer
-  rubberbandContainer: {
-    position: 'relative',
-    overflow: 'hidden',
-  },
-
-  rubberbandDiv: {
-    width: '100%',
-    background: theme.palette.action.disabledBackground,
-    height: 15,
-    '&:hover': {
-      background: theme.palette.action.selected,
-    },
-  },
-}))
-
-type LCV = LinearComparativeViewModel
-
-const Overlays = observer(({ model }: { model: LCV }) => {
-  const { classes } = useStyles()
-  return (
-    <>
-      {model.tracks.map(track => {
-        const [display] = track.displays
-        const { RenderingComponent } = display
-        const trackId = getConf(track, 'trackId')
-        return RenderingComponent ? (
-          <div
-            className={classes.overlay}
-            key={trackId}
-            style={{
-              height: model.middleComparativeHeight,
-              overflow: 'hidden',
-            }}
-          >
-            <RenderingComponent model={display} />
-          </div>
-        ) : null
-      })}
-    </>
-  )
-})
-
-// The comparative is in the middle of the views
-const MiddleComparativeView = observer(({ model }: { model: LCV }) => {
-  const { classes } = useStyles()
-  const { views } = model
-  const { pluginManager } = getEnv(model)
-  const { ReactComponent } = pluginManager.getViewType(views[0].type)
-
-  return (
-    <div className={classes.rubberbandContainer}>
-      <Header model={model} />
-      <Rubberband
-        model={model}
-        ControlComponent={<div className={classes.rubberbandDiv} />}
-      />
-      <div className={classes.container}>
-        <ReactComponent model={views[0]} />
-        <div className={classes.grid}>
-          <Overlays model={model} />
-        </div>
-        <ResizeHandle
-          onDrag={n =>
-            model.setMiddleComparativeHeight(model.middleComparativeHeight + n)
-          }
-          style={{
-            height: 4,
-            background: '#ccc',
-          }}
-        />
-        <ReactComponent model={views[1]} />
-      </div>
-    </div>
-  )
-})
-const OverlayComparativeView = observer(({ model }: { model: LCV }) => {
-  const { classes } = useStyles()
-  const { views } = model
-  const { pluginManager } = getEnv(model)
-  return (
-    <div className={classes.rubberbandContainer}>
-      <Header model={model} />
-      <Rubberband
-        model={model}
-        ControlComponent={<div className={classes.rubberbandDiv} />}
-      />
-
-      <div className={classes.container}>
-        <div className={classes.content}>
-          <div className={classes.relative}>
-            {views.map(view => {
-              const { ReactComponent } = pluginManager.getViewType(view.type)
-              return <ReactComponent key={view.id} model={view} />
-            })}
-          </div>
-          <Overlays model={model} />
-        </div>
-      </div>
-    </div>
-  )
-})
-
-export default observer(function (props: {
-  ExtraButtons?: React.ReactNode
-  model: LCV
-}) {
-  const { model } = props
-
-  const middle = model.tracks.some(({ displays }) =>
-    displays.some((d: { configuration: AnyConfigurationModel }) =>
-      getConf(d, 'middle'),
-    ),
-  )
-  return middle ? (
-    <MiddleComparativeView {...props} />
-  ) : (
-    <OverlayComparativeView {...props} />
-  )
-})