refactor: cleanup

packages/web/src/components/GeneMap/GeneMap.tsx

@@ -47,14 +47,14 @@ export function GeneView({ gene, pixelsPerBase, ...rest }: GeneViewProps) {
   return <rect id={id} fill={gene.color} x={x} y={-10 + 7.5 * frame} width={width} height={GENE_HEIGHT_PX} {...rest} />
 }
 
-export const GeneMap = withResizeDetector(GeneMapView, {
+export const GeneMap = withResizeDetector(GeneMapUnsized, {
   handleWidth: true,
   handleHeight: true,
   refreshRate: 300,
   refreshMode: 'debounce',
 })
 
-function GeneMapView({ width, height }: ReactResizeDetectorDimensions) {
+export function GeneMapUnsized({ width, height }: ReactResizeDetectorDimensions) {
   const [currGene, setCurrGene] = useState<Gene | undefined>(undefined)
 
   if (!width || !height) {

packages/web/src/components/SequenceView/SequenceView.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 
-import ReactResizeDetector from 'react-resize-detector'
-import AutoSizer from 'react-virtualized-auto-sizer'
+import { ReactResizeDetectorDimensions, withResizeDetector } from 'react-resize-detector'
 
 import type { AnalysisResult } from 'src/algorithms/types'
 
@@ -11,70 +10,61 @@ import { SequenceMarkerMutation } from './SequenceMarkerMutation'
 
 export const GENOME_SIZE = 30000 as const // TODO: deduce from sequences?
 
-export interface SequenceViewProps {
+export interface SequenceViewProps extends ReactResizeDetectorDimensions {
   sequence: AnalysisResult
 }
 
-export function SequenceView({ sequence }: SequenceViewProps) {
+export const SequenceView = withResizeDetector(SequenceViewUnsized)
+
+export function SequenceViewUnsized({ sequence, width }: SequenceViewProps) {
   const { seqName, substitutions, missing, deletions } = sequence
 
-  return (
-    <ReactResizeDetector handleHeight>
-      {({ width }) => {
-        if (!width) {
-          return (
-            <div className="sequence-view-wrapper d-inline-flex w-100 h-100">
-              <svg className="sequence-view-body" viewBox={`0 0 10 10`} />
-            </div>
-          )
-        }
+  if (!width) {
+    return (
+      <div className="sequence-view-wrapper d-inline-flex w-100 h-100">
+        <svg className="sequence-view-body" viewBox={`0 0 10 10`} />
+      </div>
+    )
+  }
 
-        const pixelsPerBase = width / GENOME_SIZE
+  const pixelsPerBase = width / GENOME_SIZE
 
-        const mutationViews = substitutions.map((substitution) => {
-          return (
-            <SequenceMarkerMutation
-              key={substitution.pos}
-              seqName={seqName}
-              substitution={substitution}
-              pixelsPerBase={pixelsPerBase}
-            />
-          )
-        })
+  const mutationViews = substitutions.map((substitution) => {
+    return (
+      <SequenceMarkerMutation
+        key={substitution.pos}
+        seqName={seqName}
+        substitution={substitution}
+        pixelsPerBase={pixelsPerBase}
+      />
+    )
+  })
 
-        const missingViews = missing.map((oneMissing) => {
-          return (
-            <SequenceMarkerMissing
-              key={oneMissing.begin}
-              seqName={seqName}
-              missing={oneMissing}
-              pixelsPerBase={pixelsPerBase}
-            />
-          )
-        })
+  const missingViews = missing.map((oneMissing) => {
+    return (
+      <SequenceMarkerMissing
+        key={oneMissing.begin}
+        seqName={seqName}
+        missing={oneMissing}
+        pixelsPerBase={pixelsPerBase}
+      />
+    )
+  })
 
-        const deletionViews = deletions.map((deletion) => {
-          return (
-            <SequenceMarkerGap
-              key={deletion.start}
-              seqName={seqName}
-              deletion={deletion}
-              pixelsPerBase={pixelsPerBase}
-            />
-          )
-        })
+  const deletionViews = deletions.map((deletion) => {
+    return (
+      <SequenceMarkerGap key={deletion.start} seqName={seqName} deletion={deletion} pixelsPerBase={pixelsPerBase} />
+    )
+  })
 
-        return (
-          <div className="sequence-view-wrapper d-inline-flex w-100 h-100">
-            <svg className="sequence-view-body" viewBox={`0 0 ${width} 10`}>
-              <rect className="sequence-view-background" x={0} y={-10} width={GENOME_SIZE} height="30" />
-              {mutationViews}
-              {missingViews}
-              {deletionViews}
-            </svg>
-          </div>
-        )
-      }}
-    </ReactResizeDetector>
+  return (
+    <div className="sequence-view-wrapper d-inline-flex w-100 h-100">
+      <svg className="sequence-view-body" viewBox={`0 0 ${width} 10`}>
+        <rect className="sequence-view-background" x={0} y={-10} width={GENOME_SIZE} height="30" />
+        {mutationViews}
+        {missingViews}
+        {deletionViews}
+      </svg>
+    </div>
   )
 }