Fix hydration warning by only rendering the SvgFeature "selected feat…

…ure" and "mouseover" client side (#3921) * Only render the overlay clientside * Remove some unused console silencings
GMOD · Sep 11, 2023 · daf93bb · daf93bb
1 parent 595acd6
commit daf93bb
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 86 deletions.
diff --git a/config/jest/console.js b/config/jest/console.js
@@ -1,15 +1,6 @@
 const originalWarn = console.warn
 const originalError = console.error
 
-// this is here to silence a warning related to @material-ui/data-grid
-// not precisely sure why it warns but this error is silenced during test
-jest.spyOn(console, 'warn').mockImplementation((...args) => {
-  if (typeof args[0] === 'string' && args[0].includes('useResizeContainer')) {
-    return undefined
-  }
-  return originalWarn.call(console, ...args)
-})
-
 jest.spyOn(console, 'error').mockImplementation((...args) => {
   if (String(args[0]).includes('volvox.2bit_404')) {
     return undefined
@@ -36,13 +27,6 @@ jest.spyOn(console, 'error').mockImplementation((...args) => {
   if (String(args).includes('was not wrapped in act')) {
     return undefined
   }
-  if (
-    String(args).includes(
-      'attempting to unmount was rendered by another copy of React',
-    )
-  ) {
-    return undefined
-  }
 
   return originalError.call(console, ...args)
 })
diff --git a/plugins/svg/src/SvgFeatureRenderer/components/SvgFeatureRendering.tsx b/plugins/svg/src/SvgFeatureRenderer/components/SvgFeatureRendering.tsx
@@ -219,7 +219,7 @@ function SvgFeatureRendering(props: {
   const {
     layout,
     blockKey,
-    regions,
+    regions = [],
     bpPerPx,
     config,
     displayModel = {},
@@ -235,7 +235,7 @@ function SvgFeatureRendering(props: {
     onClick,
   } = props
 
-  const [region] = regions || []
+  const [region] = regions
   const width = (region.end - region.start) / bpPerPx
   const displayMode = readConfObject(config, 'displayMode') as string
 
@@ -313,17 +313,14 @@ function SvgFeatureRendering(props: {
     setHeight(layout.getTotalHeight())
   }, [layout])
 
-  if (exportSVG) {
-    return (
-      <RenderedFeatures
-        displayMode={displayMode}
-        isFeatureDisplayed={featureDisplayHandler}
-        region={region}
-        {...props}
-      />
-    )
-  }
-  return (
+  return exportSVG ? (
+    <RenderedFeatures
+      displayMode={displayMode}
+      isFeatureDisplayed={featureDisplayHandler}
+      region={region}
+      {...props}
+    />
+  ) : (
     <svg
       ref={ref}
       data-testid="svgfeatures"

diff --git a/plugins/svg/src/SvgFeatureRenderer/components/SvgOverlay.tsx b/plugins/svg/src/SvgFeatureRenderer/components/SvgOverlay.tsx
@@ -1,10 +1,57 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { bpSpanPx, Feature, Region } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 
 type LayoutRecord = [number, number, number, number]
 
-interface SvgOverlayProps {
+interface OverlayRectProps extends React.SVGProps<SVGRectElement> {
+  rect?: LayoutRecord
+  region: Region
+  bpPerPx: number
+}
+
+function OverlayRect({
+  rect,
+  region,
+  bpPerPx,
+  ...rectProps
+}: OverlayRectProps) {
+  if (!rect) {
+    return null
+  }
+  const [leftBp, topPx, rightBp, bottomPx] = rect
+  const [leftPx, rightPx] = bpSpanPx(leftBp, rightBp, region, bpPerPx)
+  const rectTop = Math.round(topPx)
+  const screenWidth = (region.end - region.start) / bpPerPx
+  const rectHeight = Math.round(bottomPx - topPx)
+  const width = rightPx - leftPx
+
+  if (leftPx + width < 0) {
+    return null
+  }
+  const leftWithinBlock = Math.max(leftPx, 0)
+  const diff = leftWithinBlock - leftPx
+  const widthWithinBlock = Math.max(1, Math.min(width - diff, screenWidth))
+
+  return (
+    <rect
+      x={leftWithinBlock - 2}
+      y={rectTop - 2}
+      width={widthWithinBlock + 4}
+      height={rectHeight + 4}
+      {...rectProps}
+    />
+  )
+}
+
+export default observer(function SvgOverlay({
+  displayModel = {},
+  blockKey,
+  region,
+  bpPerPx,
+  movedDuringLastMouseDown,
+  ...handlers
+}: {
   region: Region
   displayModel?: {
     getFeatureByID?: (arg0: string, arg1: string) => LayoutRecord
@@ -56,60 +103,15 @@ interface SvgOverlayProps {
     event: React.MouseEvent<SVGRectElement, MouseEvent>,
     featureId: string,
   ): {}
-}
-
-interface OverlayRectProps extends React.SVGProps<SVGRectElement> {
-  rect?: LayoutRecord
-  region: Region
-  bpPerPx: number
-}
-
-function OverlayRect({
-  rect,
-  region,
-  bpPerPx,
-  ...rectProps
-}: OverlayRectProps) {
-  if (!rect) {
-    return null
-  }
-  const [leftBp, topPx, rightBp, bottomPx] = rect
-  const [leftPx, rightPx] = bpSpanPx(leftBp, rightBp, region, bpPerPx)
-  const rectTop = Math.round(topPx)
-  const screenWidth = (region.end - region.start) / bpPerPx
-  const rectHeight = Math.round(bottomPx - topPx)
-  const width = rightPx - leftPx
-
-  if (leftPx + width < 0) {
-    return null
-  }
-  const leftWithinBlock = Math.max(leftPx, 0)
-  const diff = leftWithinBlock - leftPx
-  const widthWithinBlock = Math.max(1, Math.min(width - diff, screenWidth))
-
-  return (
-    <rect
-      x={leftWithinBlock - 2}
-      y={rectTop - 2}
-      width={widthWithinBlock + 4}
-      height={rectHeight + 4}
-      {...rectProps}
-    />
-  )
-}
-
-function SvgOverlay({
-  displayModel = {},
-  blockKey,
-  region,
-  bpPerPx,
-  movedDuringLastMouseDown,
-  ...handlers
-}: SvgOverlayProps) {
+}) {
   const { selectedFeatureId, featureIdUnderMouse, contextMenuFeature } =
     displayModel
 
   const mouseoverFeatureId = featureIdUnderMouse || contextMenuFeature?.id()
+  const [renderOverlay, setRenderOverlay] = useState(false)
+  useEffect(() => {
+    setRenderOverlay(true)
+  }, [])
 
   function onFeatureMouseDown(
     event: React.MouseEvent<SVGRectElement, MouseEvent>,
@@ -207,7 +209,7 @@ function SvgOverlay({
     return handler(event, mouseoverFeatureId)
   }
 
-  return (
+  return renderOverlay ? (
     <>
       {mouseoverFeatureId ? (
         <OverlayRect
@@ -240,7 +242,5 @@ function SvgOverlay({
         />
       ) : null}
     </>
-  )
-}
-
-export default observer(SvgOverlay)
+  ) : null
+})