Improved rendering of phased VCF and polyploid VCF in multi-variant v…

…iew (#4795)
GMOD · Jan 26, 2025 · 3f9bf04 · 3f9bf04
1 parent 73b24f4
commit 3f9bf04
Show file tree

Hide file tree

Showing 26 changed files with 630 additions and 545 deletions.
diff --git a/packages/core/ui/colors.ts b/packages/core/ui/colors.ts
@@ -21,8 +21,8 @@ const dark2 = [
   '#666666',
 ]
 const set1 = [
-  '#e41a1c',
   '#377eb8',
+  '#e41a1c',
   '#4daf4a',
   '#984ea3',
   '#ff7f00',

diff --git a/packages/core/util/index.ts b/packages/core/util/index.ts
@@ -1252,23 +1252,23 @@ export function localStorageSetItem(str: string, item: string) {
   }
 }
 
-export function max(arr: number[], init = Number.NEGATIVE_INFINITY) {
+export function max(arr: Iterable<number>, init = Number.NEGATIVE_INFINITY) {
   let max = init
   for (const entry of arr) {
     max = Math.max(entry, max)
   }
   return max
 }
 
-export function min(arr: number[], init = Number.POSITIVE_INFINITY) {
+export function min(arr: Iterable<number>, init = Number.POSITIVE_INFINITY) {
   let min = init
   for (const entry of arr) {
     min = Math.min(entry, min)
   }
   return min
 }
 
-export function sum(arr: number[]) {
+export function sum(arr: Iterable<number>) {
   let sum = 0
   for (const entry of arr) {
     sum += entry

diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/ZoomControls.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/ZoomControls.tsx
@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react'
 
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import MoreVert from '@mui/icons-material/MoreVert'
 import ZoomIn from '@mui/icons-material/ZoomIn'
 import ZoomOut from '@mui/icons-material/ZoomOut'
 import { IconButton, Slider, Tooltip } from '@mui/material'
@@ -35,19 +37,6 @@ const ZoomControls = observer(function ({
   const zoomOutDisabled = bpPerPx >= maxBpPerPx - 0.0001
   return (
     <div className={classes.container}>
-      <Tooltip title="Zoom out 15x">
-        <span>
-          <IconButton
-            data-testid="zoom_out_more"
-            disabled={zoomOutDisabled}
-            onClick={() => {
-              model.zoom(bpPerPx * 15)
-            }}
-          >
-            <ZoomOut fontSize="large" />
-          </IconButton>
-        </span>
-      </Tooltip>
       <Tooltip title="Zoom out 2x">
         <span>
           <IconButton
@@ -86,19 +75,56 @@ const ZoomControls = observer(function ({
           </IconButton>
         </span>
       </Tooltip>
-      <Tooltip title="Zoom in 15x">
-        <span>
-          <IconButton
-            data-testid="zoom_in_more"
-            disabled={zoomInDisabled}
-            onClick={() => {
+
+      <CascadingMenuButton
+        menuItems={[
+          {
+            label: 'Zoom in 2x',
+            icon: ZoomIn,
+            onClick: () => {
+              model.zoom(model.bpPerPx / 2)
+            },
+          },
+          {
+            label: 'Zoom in 15x',
+            icon: ZoomIn,
+            onClick: () => {
               model.zoom(model.bpPerPx / 15)
-            }}
-          >
-            <ZoomIn fontSize="large" />
-          </IconButton>
-        </span>
-      </Tooltip>
+            },
+          },
+          {
+            label: 'Zoom in 100x',
+            icon: ZoomIn,
+            onClick: () => {
+              model.zoom(model.bpPerPx / 100)
+            },
+          },
+          {
+            label: 'Zoom out 2x',
+            icon: ZoomOut,
+            onClick: () => {
+              model.zoom(model.bpPerPx * 2)
+            },
+          },
+          {
+            label: 'Zoom out 15x',
+
+            icon: ZoomOut,
+            onClick: () => {
+              model.zoom(model.bpPerPx * 15)
+            },
+          },
+          {
+            label: 'Zoom out 100x',
+            icon: ZoomOut,
+            onClick: () => {
+              model.zoom(model.bpPerPx * 100)
+            },
+          },
+        ]}
+      >
+        <MoreVert />
+      </CascadingMenuButton>
     </div>
   )
 })