Skip to content

Commit

Permalink
Misc
Browse files Browse the repository at this point in the history
  • Loading branch information
cmdcolin committed Aug 15, 2024
1 parent 67c8fcb commit 0bbe6d9
Show file tree
Hide file tree
Showing 7 changed files with 52 additions and 77 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -63,20 +63,17 @@ export interface ResultsDeserialized extends ServerSideResultsDeserialized {
export default class FeatureRendererType extends ServerSideRendererType {
/**
* replaces the `displayModel` param (which on the client is a MST model)
* with a stub that only contains the `selectedFeature`, since this is the only
* part of the track model that most renderers read. also serializes the config
* and regions to JSON from MST objects.
* with a stub that only contains the `selectedFeature`, since this is the
* only part of the track model that most renderers read. also serializes the
* config and regions to JSON from MST objects.
*
* @param args - the arguments passed to render
*/
serializeArgsInClient(args: RenderArgs) {
const { displayModel, regions } = args
const { regions } = args
const serializedArgs = {
...args,
displayModel: displayModel && {
id: displayModel.id,
selectedFeatureId: displayModel.selectedFeatureId,
},
displayModel: undefined,
regions: clone(regions),
}
return super.serializeArgsInClient(serializedArgs)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,13 @@ const NewHydrate = observer(function ServerSideRenderedContent({
...rest
}: Props) {
const ref = useRef<HTMLDivElement>(null)

const rootRef = useRef<any>()

const { hydrateFn } = getRoot<any>(rest.displayModel)

useEffect(() => {
// requestIdleCallback here helps to avoid hydration mismatch
// because it provides time for dangerouslySetInnerHTML to set the innerHTML
// contents of the node, otherwise ref.current.innerHTML can be empty
// requestIdleCallback here helps to avoid hydration mismatch because it
// provides time for dangerouslySetInnerHTML to set the innerHTML contents
// of the node, otherwise ref.current.innerHTML can be empty
const renderTimeout = rIC(() => {
if (!ref.current) {
return
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,25 @@ import { bpSpanPx } from '@jbrowse/core/util'
import { observer } from 'mobx-react'
import type { BaseLinearDisplayModel } from '@jbrowse/plugin-linear-genome-view'

interface Rect {
left: number
top: number
width: number
height: number
}

const PileupRendering = observer(function (props: {
blockKey: string
displayModel: BaseLinearDisplayModel
displayModel?: BaseLinearDisplayModel
width: number
height: number
regions: Region[]
bpPerPx: number
sortedBy?: { type: string; pos: number; refName: string }
colorBy?: { type: string; tag?: string }
filterBy?: { tagFilter?: { tag: string } }
sortedBy?: {
type: string
pos: number
refName: string
}
colorBy?: {
type: string
tag?: string
}
filterBy?: {
tagFilter?: { tag: string }
}
onMouseMove?: (event: React.MouseEvent, featureId?: string) => void
}) {
const {
Expand All @@ -37,51 +39,40 @@ const PileupRendering = observer(function (props: {
filterBy,
} = props
const { selectedFeatureId, featureIdUnderMouse, contextMenuFeature } =
displayModel
displayModel || {}
const [firstRender, setFirstRender] = useState(false)
useEffect(() => {
setFirstRender(true)
}, [])

const region = regions[0]!
let selected = undefined as Rect | undefined
let highlight = undefined as Rect | undefined
const ref = useRef<HTMLDivElement>(null)
const [mouseIsDown, setMouseIsDown] = useState(false)
const [movedDuringLastMouseDown, setMovedDuringLastMouseDown] =
useState(false)
const selectedRect = selectedFeatureId
? displayModel.getFeatureByID(blockKey, selectedFeatureId)
? displayModel?.getFeatureByID?.(blockKey, selectedFeatureId)
: undefined
if (selectedRect) {
const [leftBp, topPx, rightBp, bottomPx] = selectedRect
const [leftPx, rightPx] = bpSpanPx(leftBp, rightBp, region, bpPerPx)
const rectTop = Math.round(topPx)
const rectHeight = Math.round(bottomPx - topPx)
selected = {
left: leftPx - 2,
top: rectTop - 2,
width: rightPx - leftPx,
height: rectHeight,
}
}

const highlightedFeature = featureIdUnderMouse || contextMenuFeature?.id()
const highlightedRect = highlightedFeature
? displayModel.getFeatureByID(blockKey, highlightedFeature)
? displayModel?.getFeatureByID?.(blockKey, highlightedFeature)
: undefined

if (highlightedRect) {
const [leftBp, topPx, rightBp, bottomPx] = highlightedRect
function makeRect(r: [number, number, number, number], offset = 2) {
const [leftBp, topPx, rightBp, bottomPx] = r
const [leftPx, rightPx] = bpSpanPx(leftBp, rightBp, region, bpPerPx)
const rectTop = Math.round(topPx)
const rectHeight = Math.round(bottomPx - topPx)
highlight = {
left: leftPx,
top: rectTop,
return {
left: leftPx - offset,
top: rectTop - offset,
width: rightPx - leftPx,
height: rectHeight,
}
}
const selected = selectedRect ? makeRect(selectedRect) : undefined
const highlight = highlightedRect ? makeRect(highlightedRect, 0) : undefined

function onMouseDown(event: React.MouseEvent) {
setMouseIsDown(true)
Expand Down Expand Up @@ -137,7 +128,7 @@ const PileupRendering = observer(function (props: {

onMouseMove?.(
event,
displayModel.getFeatureOverlapping(blockKey, clientBp, offsetY),
displayModel?.getFeatureOverlapping(blockKey, clientBp, offsetY),
)
}

Expand Down
7 changes: 4 additions & 3 deletions plugins/arc/src/ArcRenderer/ArcRendering.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ function SemiCircles({
onFeatureClick,
feature,
}: {
selectedFeatureId: string
selectedFeatureId?: string
region: Region
config: AnyConfigurationModel
onFeatureClick: (event: React.MouseEvent, featureId: string) => void
Expand Down Expand Up @@ -214,21 +214,22 @@ const ArcRendering = observer(function ({
bpPerPx,
height,
exportSVG,
displayModel,
onFeatureClick,
displayModel: { selectedFeatureId },
}: {
features: Map<string, Feature>
config: AnyConfigurationModel
regions: Region[]
bpPerPx: number
height: number
displayModel: { selectedFeatureId: string }
displayModel?: { selectedFeatureId: string }
onFeatureClick: (event: React.MouseEvent, featureId: string) => void
exportSVG: boolean
}) {
const region = regions[0]!
const width = (region.end - region.start) / bpPerPx
const semicircles = readConfObject(config, 'displayMode') === 'semicircles'
const { selectedFeatureId } = displayModel || {}

return (
<Wrapper exportSVG={exportSVG} width={width} height={height}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,6 @@ export const BaseChordDisplayModel = types
return {
...getParentRenderProps(self),
rpcDriverName: self.rpcDriverName,
displayModel: self,
bezierRadius: view.radiusPx * self.bezierRadiusRatio,
radius: view.radiusPx,
blockDefinitions: this.blockDefinitions,
Expand Down
3 changes: 0 additions & 3 deletions plugins/hic/src/HicRenderer/components/HicRendering.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,6 @@ test('one', () => {
regions={[{ assemblyName: 'volvox', refName: 'zonk', start: 1, end: 3 }]}
bpPerPx={3}
blockKey="test"
/*
// @ts-expect-error */
displayModel={{}}
/>,
)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,12 @@ const StructuralVariantChordsReactComponent = observer(function ({
blockDefinitions,
radius,
bezierRadius,
displayModel: { selectedFeatureId },
onChordClick,
}: {
features: Map<string, Feature>
radius: number
config: AnyConfigurationModel
displayModel: { id: string; selectedFeatureId: string }
displayModel?: { id: string; selectedFeatureId: string }
blockDefinitions: Block[]
bezierRadius: number
onChordClick: (
Expand All @@ -29,6 +28,7 @@ const StructuralVariantChordsReactComponent = observer(function ({
evt: unknown,
) => void
}) {
const { id, selectedFeatureId } = displayModel || {}
// make a map of refName -> blockDefinition
const blocksForRefsMemo = useMemo(() => {
const blocksForRefs = {} as Record<string, Block>
Expand All @@ -44,27 +44,19 @@ const StructuralVariantChordsReactComponent = observer(function ({
}, [blockDefinitions])

return (
<g
id={`chords-${typeof jest !== 'undefined' ? 'test' : displayModel.id}`}
data-testid="structuralVariantChordRenderer"
>
{[...features.values()].map(feature => {
const id = feature.id()
const selected = String(selectedFeatureId) === String(id)

return (
<Chord
key={id}
feature={feature}
config={config}
radius={radius}
bezierRadius={bezierRadius}
blocksForRefs={blocksForRefsMemo}
selected={selected}
onClick={onChordClick}
/>
)
})}
<g data-testid="structuralVariantChordRenderer">
{[...features.values()].map(feature => (
<Chord
key={feature.id()}
feature={feature}
config={config}
radius={radius}
bezierRadius={bezierRadius}
blocksForRefs={blocksForRefsMemo}
selected={String(selectedFeatureId) === String(id)}
onClick={onChordClick}
/>
))}
</g>
)
})
Expand Down

0 comments on commit 0bbe6d9

Please sign in to comment.