Don't send displayModel to "rendering" components on server side (#4518)

packages/core/pluggableElementTypes/renderers/ComparativeServerSideRendererType.ts

@@ -16,18 +16,15 @@ import { firstValueFrom } from 'rxjs'
 import { AnyConfigurationModel } from '../../configuration'
 
 export interface RenderArgs extends ServerSideRenderArgs {
-  displayModel: Record<string, unknown>
   blockKey: string
 }
 
 export interface RenderArgsSerialized extends ServerSideRenderArgsSerialized {
-  displayModel: Record<string, unknown>
   blockKey: string
 }
 
 export interface RenderArgsDeserialized
   extends ServerSideRenderArgsDeserialized {
-  displayModel: Record<string, unknown>
   blockKey: string
 }
 
@@ -53,10 +50,6 @@ export default class ComparativeServerSideRenderer extends ServerSideRenderer {
    * directly modifies the render arguments to prepare them to be serialized
    * and sent to the worker.
    *
-   * the base class 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.
-   *
    * @param args - the arguments passed to render
    * @returns the same object
    */
@@ -68,7 +61,7 @@ export default class ComparativeServerSideRenderer extends ServerSideRenderer {
   serializeArgsInClient(args: RenderArgs) {
     const deserializedArgs = {
       ...args,
-      displayModel: {},
+      displayModel: undefined,
     }
 
     return super.serializeArgsInClient(deserializedArgs)
@@ -80,7 +73,10 @@ export default class ComparativeServerSideRenderer extends ServerSideRenderer {
     args: RenderArgs,
   ): ResultsDeserialized {
     const deserialized = super.deserializeResultsInClient(result, args)
-    return { ...deserialized, blockKey: args.blockKey }
+    return {
+      ...deserialized,
+      blockKey: args.blockKey,
+    }
   }
 
   /**

packages/core/pluggableElementTypes/renderers/FeatureRendererType.ts

@@ -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)

packages/core/pluggableElementTypes/renderers/ServerSideRenderedContent.tsx

@@ -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

plugins/alignments/src/PileupRenderer/components/PileupRendering.tsx

@@ -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 {
@@ -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)
@@ -137,7 +128,7 @@ const PileupRendering = observer(function (props: {
 
     onMouseMove?.(
       event,
-      displayModel.getFeatureOverlapping(blockKey, clientBp, offsetY),
+      displayModel?.getFeatureOverlapping(blockKey, clientBp, offsetY),
     )
   }
 

plugins/arc/src/ArcRenderer/ArcRendering.tsx

@@ -17,7 +17,7 @@ function Arc({
   onFeatureClick,
   feature,
 }: {
-  selectedFeatureId: string
+  selectedFeatureId?: string
   region: Region
   config: AnyConfigurationModel
   onFeatureClick: (event: React.MouseEvent, featureId: string) => void
@@ -136,7 +136,7 @@ function SemiCircles({
   onFeatureClick,
   feature,
 }: {
-  selectedFeatureId: string
+  selectedFeatureId?: string
   region: Region
   config: AnyConfigurationModel
   onFeatureClick: (event: React.MouseEvent, featureId: string) => void
@@ -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}>

plugins/circular-view/src/BaseChordDisplay/models/model.tsx

@@ -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,

plugins/hic/src/HicRenderer/components/HicRendering.test.tsx

@@ -11,9 +11,6 @@ test('one', () => {
       regions={[{ assemblyName: 'volvox', refName: 'zonk', start: 1, end: 3 }]}
       bpPerPx={3}
       blockKey="test"
-      /*
-      // @ts-expect-error */
-      displayModel={{}}
     />,
   )
 

plugins/variants/src/StructuralVariantChordRenderer/ReactComponent.tsx

@@ -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: (
@@ -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>
@@ -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>
   )
 })

plugins/wiggle/src/MultiWiggleRendering.tsx

@@ -14,7 +14,7 @@ const MultiWiggleRendering = observer(function (props: {
   height: number
   blockKey: string
   sources: Source[]
-  displayModel: { isMultiRow: boolean }
+  displayModel?: { isMultiRow: boolean }
   onMouseLeave?: (event: React.MouseEvent) => void
   onMouseMove?: (event: React.MouseEvent, arg?: Feature) => void
   onFeatureClick?: (event: React.MouseEvent, arg?: Feature) => void
@@ -33,6 +33,7 @@ const MultiWiggleRendering = observer(function (props: {
   } = props
   const region = regions[0]!
   const ref = useRef<HTMLDivElement>(null)
+  const { isMultiRow } = displayModel || {}
 
   function getFeatureUnderMouse(eventClientX: number, eventClientY: number) {
     if (!ref.current) {
@@ -48,7 +49,7 @@ const MultiWiggleRendering = observer(function (props: {
     const px = region.reversed ? width - offsetX : offsetX
     const mouseoverBp = region.start + bpPerPx * px
     let featureUnderMouse: Feature | undefined
-    if (displayModel.isMultiRow) {
+    if (isMultiRow) {
       for (const feature of features.values()) {
         if (feature.get('source') !== source.name) {
           continue