Skip to content

Commit

Permalink
Misc
Browse files Browse the repository at this point in the history
  • Loading branch information
cmdcolin committed Dec 4, 2024
1 parent 4c09a6a commit af98fbb
Show file tree
Hide file tree
Showing 37 changed files with 524 additions and 611 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import RpcMethodType from './RpcMethodType'
import { renameRegionsIfNeeded } from '../util'
import SerializableFilterChain from './renderers/util/serializableFilterChain'

import type { RenderArgs } from '@jbrowse/core/rpc/coreRpcMethods'

export default abstract class RpcMethodTypeWithFiltersAndRenameRegions extends RpcMethodType {
async deserializeArguments(args: any, rpcDriverClassName: string) {
const l = await super.deserializeArguments(args, rpcDriverClassName)
return {
...l,
filters: args.filters
? new SerializableFilterChain({
filters: args.filters,
})
: undefined,
}
}

async serializeArguments(
args: RenderArgs & {
stopToken?: string
statusCallback?: (arg: string) => void
},
rpcDriverClassName: string,
) {
const pm = this.pluginManager
const assemblyManager = pm.rootModel?.session?.assemblyManager
if (!assemblyManager) {
throw new Error('no assembly manager')
}

const renamedArgs = await renameRegionsIfNeeded(assemblyManager, {
...args,
filters: args.filters?.toJSON().filters,
})

return super.serializeArguments(renamedArgs, rpcDriverClassName)
}
}
8 changes: 6 additions & 2 deletions packages/core/ui/LoadingEllipses.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,13 @@ export default function LoadingEllipses({
variant = 'body2',
...rest
}: Props) {
const { classes } = useStyles()
const { cx, classes } = useStyles()
return (
<Typography className={classes.dots} {...rest} variant={variant}>
<Typography
className={cx(classes.dots, rest.className)}
{...rest}
variant={variant}
>
{message || 'Loading'}
</Typography>
)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@ import {
} from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
import { Paper } from '@mui/material'
import { observer } from 'mobx-react'
import { SimpleFeatureSerialized } from '@jbrowse/core/util'

import type { SimpleFeatureSerialized } from '@jbrowse/core/util'

const BreakpointAlignmentsFeatureDetail = observer(function ({
model,
Expand Down
5 changes: 0 additions & 5 deletions plugins/dotplot-view/src/ComparativeRenderer/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,6 @@ interface RenderArgsSerialized extends ComparativeRenderArgsSerialized {
rendererType: string
}

/**
* call a synteny renderer with the given args
* param views: a set of views that each contain a set of regions
* used instead of passing regions directly as in render()
*/
export default class ComparativeRender extends RpcMethodType {
name = 'ComparativeRender'

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import React from 'react'

import ErrorMessageStackTraceDialog from '@jbrowse/core/ui/ErrorMessageStackTraceDialog'
import { getSession } from '@jbrowse/core/util'
import RefreshIcon from '@mui/icons-material/Refresh'
import ReportIcon from '@mui/icons-material/Report'
import { IconButton, Tooltip } from '@mui/material'
import { observer } from 'mobx-react'

import BlockMsg from './BlockMsg'

const BlockError = observer(function ({ model }: { model: any }) {
return (
<BlockMsg
message={`${model.error}`}
severity="error"
action={
<>
<Tooltip title="Reload track">
<IconButton
data-testid="reload_button"
onClick={() => {
model.reload()
}}
>
<RefreshIcon />
</IconButton>
</Tooltip>
<Tooltip title="Show stack trace">
<IconButton
onClick={() => {
getSession(model).queueDialog(onClose => [
ErrorMessageStackTraceDialog,
{ onClose, error: model.error as Error },
])
}}
>
<ReportIcon />
</IconButton>
</Tooltip>
</>
}
/>
)
})

export default BlockError
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,9 @@ export default function BlockMsg({
const { classes } = useStyles()
return (
<Alert
onClick={event => {
event.stopPropagation()
}}
severity={severity}
action={action}
classes={{ message: classes.ellipses }}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,19 +1,14 @@
import React, { lazy } from 'react'
import React, { Suspense, lazy } from 'react'

import { LoadingEllipses } from '@jbrowse/core/ui'
import { getSession } from '@jbrowse/core/util'
import RefreshIcon from '@mui/icons-material/Refresh'
import ReportIcon from '@mui/icons-material/Report'
import { IconButton, Tooltip } from '@mui/material'
import { observer } from 'mobx-react'
import { getParent } from 'mobx-state-tree'
import { makeStyles } from 'tss-react/mui'

import BlockMsg from './BlockMsg'

const ErrorMessageStackTraceDialog = lazy(
() => import('@jbrowse/core/ui/ErrorMessageStackTraceDialog'),
)
// lazies
const BlockError = lazy(() => import('./BlockError'))

const useStyles = makeStyles()(theme => {
const bg = theme.palette.action.disabledBackground
Expand Down Expand Up @@ -53,39 +48,13 @@ const ServerSideRenderedBlockContent = observer(function ({
}) {
if (model.error) {
return (
<BlockMsg
message={`${model.error}`}
severity="error"
action={
<>
<Tooltip title="Reload track">
<IconButton
data-testid="reload_button"
onClick={() => {
model.reload()
}}
>
<RefreshIcon />
</IconButton>
</Tooltip>
<Tooltip title="Show stack trace">
<IconButton
onClick={() => {
getSession(model).queueDialog(onClose => [
ErrorMessageStackTraceDialog,
{ onClose, error: model.error as Error },
])
}}
>
<ReportIcon />
</IconButton>
</Tooltip>
</>
}
/>
<Suspense fallback={null}>
<BlockError model={model} />
</Suspense>
)
} else if (model.message) {
// the message can be a fully rendered react component, e.g. the region too large message
// the message can be a fully rendered react component, e.g. the region too
// large message
return React.isValidElement(model.message) ? (
model.message
) : (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { getContainingView } from '@jbrowse/core/util'
import { getContainingView, isAbortException } from '@jbrowse/core/util'
import { isAlive } from 'mobx-state-tree'

import type { BaseLinearDisplayModel } from './BaseLinearDisplayModel'
Expand Down Expand Up @@ -40,7 +40,7 @@ export default async function autorunFeatureDensityStats(
}
} catch (e) {
console.error(e)
if (isAlive(self)) {
if (isAlive(self) && !isAbortException(e)) {
self.setError(e)
}
}
Expand Down
8 changes: 7 additions & 1 deletion plugins/variants/src/MultiLinearVariantDisplay/model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ export function stateModelFactory(
}))
.map((s, i) => ({
...s,
color: s.color || set1[i] || randomColor(),
color: s.color || set1[i] || randomColor(s.name),
}))
},
}))
Expand Down Expand Up @@ -194,6 +194,12 @@ export function stateModelFactory(
.views(self => {
const { renderProps: superRenderProps } = self
return {
/**
* #getter
*/
get canDisplayLabels() {
return self.rowHeight > 8
},
/**
* #getter
*/
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import React from 'react'

import { getContainingView, getSession } from '@jbrowse/core/util'
import { observer } from 'mobx-react'

import type { MultiLinearVariantMatrixDisplayModel } from '../model'
import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'

const Wrapper = observer(function ({
children,
model,
exportSVG,
}: {
model: MultiLinearVariantMatrixDisplayModel
children: React.ReactNode
exportSVG?: boolean
}) {
const { height } = model
return exportSVG ? (
<g
transform={`translate(${Math.max(
0,
-(getContainingView(model) as LinearGenomeViewModel).offsetPx,
)})`}
>
{children}
</g>
) : (
<svg
style={{
position: 'absolute',
top: 0,
left: Math.max(
0,
-(getContainingView(model) as LinearGenomeViewModel).offsetPx,
),
pointerEvents: 'none',
height,
width: getContainingView(model).width,
}}
>
{children}
</svg>
)
})

const LinesConnectingMatrixToGenomicPosition = observer(function ({
model,
exportSVG,
}: {
model: MultiLinearVariantMatrixDisplayModel
exportSVG?: boolean
}) {
const { assemblyManager } = getSession(model)
const view = getContainingView(model) as LinearGenomeViewModel
const { featuresVolatile } = model
const { offsetPx, assemblyNames } = view
const assembly = assemblyManager.get(assemblyNames[0]!)
const b0 = view.dynamicBlocks.contentBlocks[0]?.widthPx || 0
const w = b0 / (featuresVolatile?.length || 1)
return assembly && featuresVolatile ? (
<Wrapper exportSVG={exportSVG} model={model}>
{featuresVolatile.map((f, i) => {
const c =
(view.bpToPx({
refName:
assembly.getCanonicalRefName(f.get('refName')) ||
f.get('refName'),
coord: f.get('start'),
})?.offsetPx || 0) - Math.max(offsetPx, 0)
return (
<line
stroke="black"
key={f.id()}
x1={i * w + w / 2}
x2={c}
y1={20}
y2={0}
/>
)
})}
</Wrapper>
) : null
})

export default LinesConnectingMatrixToGenomicPosition
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { BaseLinearDisplayComponent } from '@jbrowse/plugin-linear-genome-view'
import { observer } from 'mobx-react'
import { makeStyles } from 'tss-react/mui'

import LinesConnectingMatrixToGenomicPosition from './LinesConnectingMatrixToGenomicPosition'
import LegendBar from '../../shared/LegendBar'

import type { MultiLinearVariantMatrixDisplayModel } from '../model'
Expand All @@ -16,6 +17,7 @@ const useStyles = makeStyles()({
cursor: {
pointerEvents: 'none',
zIndex: 1000,
position: 'relative',
},
})

Expand Down Expand Up @@ -45,9 +47,17 @@ const MultiLinearVariantMatrixDisplayComponent = observer(function (props: {
setMouseX(undefined)
}}
>
<BaseLinearDisplayComponent {...props} />
<LegendBar model={model} />
{mouseY && mouseY > 20 && sources ? (
<div style={{ position: 'relative' }}>
<LinesConnectingMatrixToGenomicPosition model={model} />
<div style={{ position: 'absolute', top: 20 }}>
<LegendBar model={model} />
<BaseLinearDisplayComponent {...props} />
</div>
</div>

{mouseY &&
mouseY > 20 &&
sources?.[Math.floor((mouseY - 20) / rowHeight)] ? (
<>
<svg className={classes.cursor} width={width} height={height}>
<line x1={0} x2={width} y1={mouseY} y2={mouseY} stroke="black" />
Expand Down
Loading

0 comments on commit af98fbb

Please sign in to comment.