Zoom in/out on-click to enable faster review of STR readviz images (#…

…1303)
broadinstitute · Nov 20, 2023 · 6a44dce · 6a44dce
1 parent aceee92
commit 6a44dce
Showing 1 changed file with 29 additions and 13 deletions.
diff --git a/browser/src/ShortTandemRepeatPage/ShortTandemRepeatReads.tsx b/browser/src/ShortTandemRepeatPage/ShortTandemRepeatReads.tsx
@@ -14,12 +14,23 @@ import ControlSection from '../VariantPage/ControlSection'
 import { ShortTandemRepeatPropType } from './ShortTandemRepeatPropTypes'
 
 const ShortTandemRepeatReadImageWrapper = styled.div`
-  overflow-x: auto;
   width: 100%;
 `
 
 const ShortTandemRepeatReadImage = styled.img`
-  display: block;
+  &.zoomedOut {
+    display: block;
+    max-width: 100%;
+    cursor: zoom-in;
+  }
+
+  &.zoomedIn {
+    position: absolute;
+    left: 0;
+    display: block;
+    cursor: zoom-out;
+    padding: 10px;
+  }
 `
 
 type ShortTandemRepeatReadProps = {
@@ -41,6 +52,8 @@ type ShortTandemRepeatReadProps = {
 }
 
 const ShortTandemRepeatRead = ({ read }: ShortTandemRepeatReadProps) => {
+  const [readImageZoom, setReadImageZoom] = useState('zoomedOut')
+
   return (
     <div>
       <AttributeList style={{ marginBottom: '1em' }}>
@@ -79,9 +92,12 @@ const ShortTandemRepeatRead = ({ read }: ShortTandemRepeatReadProps) => {
         </AttributeList.Item>
       </AttributeList>
       <ShortTandemRepeatReadImageWrapper>
-        <a href={read.path} target="_blank" rel="noopener noreferrer">
-          <ShortTandemRepeatReadImage alt="Reads for short tandem repeat" src={read.path} />
-        </a>
+        <ShortTandemRepeatReadImage
+          alt="REViewer read visualization"
+          src={read.path}
+          className={readImageZoom}
+          onClick={() => setReadImageZoom(readImageZoom === 'zoomedOut' ? 'zoomedIn' : 'zoomedOut')}
+        />
       </ShortTandemRepeatReadImageWrapper>
     </div>
   )
@@ -209,7 +225,7 @@ const ShortTandemRepeatReads = ({
       fetchReadsTimer.current = setTimeout(() => {
         fetchNumReads({ datasetId, shortTandemRepeatId: shortTandemRepeat.id, filter }).then(
           resolve,
-          reject
+          reject,
         )
       }, 300)
     })
@@ -251,7 +267,7 @@ const ShortTandemRepeatReads = ({
                 const read = i < fetchedReads.length ? fetchedReads[i] : null
                 readsStore.current.set(readIndexToFetch + i, read)
                 return read
-              })
+              }),
             )
           })
 
@@ -372,8 +388,8 @@ const ShortTandemRepeatReadsAllelesFilterControls = ({
                 const newRepeatUnit = e.target.value
                 onChange(
                   value.map((v, i) =>
-                    i === alleleIndex ? { ...v, repeat_unit: newRepeatUnit } : v
-                  )
+                    i === alleleIndex ? { ...v, repeat_unit: newRepeatUnit } : v,
+                  ),
                 )
               }}
             >
@@ -399,8 +415,8 @@ const ShortTandemRepeatReadsAllelesFilterControls = ({
                 const newMinRepeats = Math.max(Math.min(Number(e.target.value), maxNumRepeats), 0)
                 onChange(
                   value.map((v, i) =>
-                    i === alleleIndex ? { ...v, min_repeats: newMinRepeats } : v
-                  )
+                    i === alleleIndex ? { ...v, min_repeats: newMinRepeats } : v,
+                  ),
                 )
               }}
             />
@@ -417,8 +433,8 @@ const ShortTandemRepeatReadsAllelesFilterControls = ({
                 const newMaxRepeats = Math.max(Math.min(Number(e.target.value), maxNumRepeats), 0)
                 onChange(
                   value.map((v, i) =>
-                    i === alleleIndex ? { ...v, max_repeats: newMaxRepeats } : v
-                  )
+                    i === alleleIndex ? { ...v, max_repeats: newMaxRepeats } : v,
+                  ),
                 )
               }}
             />