react-msaview 9.0.0 → 9.1.0

package/src/renderToSvg.tsx

@@ -6,7 +6,7 @@ import { when } from 'mobx'
 import { visibleRowRange } from './components/getVisibleLeaves.ts'
 import MinimapSVG from './components/minimap/MinimapSVG.tsx'
 import { legendRows } from './components/msa/legendRows.ts'
-import { rasterImageHref, rasterSupported } from './components/msa/msaRaster.ts'
+import { rasterApplies, rasterImageHref } from './components/msa/msaRaster.ts'
 import { renderBoxFeatureCanvasBlock } from './components/msa/renderBoxFeatureCanvasBlock.ts'
 import { renderPersistentHighlights } from './components/msa/renderHighlights.ts'
 import { renderMSABlock } from './components/msa/renderMSABlock.ts'
@@ -15,141 +15,32 @@ import { headerRunsAcross } from './components/rowpanels/headerLayout.ts'
 import { renderRowPanels } from './components/rowpanels/renderRowPanel.ts'
 import { renderAllTracks } from './components/tracks/drawTracks.ts'
 import ScaleBarSVG from './components/tree/ScaleBarSVG.tsx'
-import {
-  bracketGap,
-  cladeHeight,
-  cladeInGutter,
-  cladeLabelHorizontal,
-  cladeLabelOffset,
-} from './components/tree/cladeBrackets.ts'
+import { cladeLabelBoxes } from './components/tree/cladeBrackets.ts'
+import { ellipsize } from './components/tree/ellipsize.ts'
 import { renderTreeCanvas } from './components/tree/renderTreeCanvas.ts'
 import { renderTreeOverview } from './components/tree/renderTreeOverview.ts'
 import { treeScaleBarHeight } from './constants.ts'
+import {
+  LEGEND_CHAR_W,
+  LEGEND_FONT,
+  LEGEND_PAD,
+  LEGEND_ROW_H,
+  LEGEND_SWATCH,
+  LEGEND_TEXT_X,
+  exportPageSize,
+  getLayout,
+  legendHeight,
+} from './exportLayout.ts'
 import { measureTextCanvas } from './measureTextCanvas.ts'
 import { renderToStaticMarkup, svgSafeColors } from './renderToStaticMarkup.ts'
 import { outlineColor } from './util.ts'
 
-import type { LegendRow } from './components/msa/legendRows.ts'
+import type { ExportSvgOptions, Layout } from './exportLayout.ts'
 import type { MsaViewModel } from './model.ts'
 import type { Context as ContextType } from '@jbrowse/svgcanvas'
 import type { Theme } from '@mui/material'
 
-export interface ExportSvgOptions {
-  theme: Theme
-  includeMinimap?: boolean
-  includeTracks?: boolean
-  exportType: 'entire' | 'viewport'
-}
-
-// legend geometry, shared by the width calculation and the renderer so the
-// reserved column on the right exactly fits the drawn legends
-const LEGEND_PAD = 8
-const LEGEND_ROW_H = 16
-const LEGEND_SWATCH = 12
-const LEGEND_FONT = 12
-const LEGEND_CHAR_W = 7
-
-// the width of a character as a fraction of the font size, close enough for a
-// sans-serif average
-const CHAR_WIDTH = 0.6
-
-const LEGEND_MAX_W = 360
-const LEGEND_TEXT_X = LEGEND_PAD + LEGEND_SWATCH + 6
-
-function getLegendWidth(rows: LegendRow[]) {
-  const maxLen = rows.reduce((a, r) => Math.max(a, r.label.length), 0)
-  const w = LEGEND_TEXT_X + LEGEND_PAD + maxLen * LEGEND_CHAR_W
-  return Math.min(LEGEND_MAX_W, Math.max(120, w))
-}
-
-function legendHeight(rows: LegendRow[]) {
-  return LEGEND_PAD * 2 + rows.length * LEGEND_ROW_H
-}
-
-// resolved sizes/offsets (in svg user units) for the chosen export, shared by
-// every layer; 'entire' renders the whole alignment unscrolled, 'viewport'
-// mirrors the live scroll position
-interface Layout {
-  width: number
-  msaAreaWidth: number
-  height: number
-  contentHeight: number
-  trackHeight: number
-  // the band the minimap, the row panel headers and the tree overview stacked
-  // on the scale bar share across the top
-  topHeight: number
-  offsetX: number
-  offsetY: number
-  includeMinimap: boolean
-  legendWidth: number
-}
-
-function getLayout(model: MsaViewModel, opts: ExportSvgOptions): Layout {
-  const {
-    scrollX,
-    scrollY,
-    totalWidth,
-    totalHeight,
-    effectiveTreeAreaWidth,
-    rowPanelsWidth,
-    rowPanelsHeaderHeight,
-    totalTrackAreaHeight,
-    minimapHeight,
-    msaAreaHeight,
-    msaCanvasWidth,
-    showHorizontalScrollbar,
-    treeOverviewHeight,
-    treeScaleBar,
-  } = model
-  const trackHeight = opts.includeTracks ? totalTrackAreaHeight : 0
-  // the minimap reflects the live viewport scroll position, so it's only
-  // meaningful for a viewport export, never for the entire alignment -- and
-  // only when the live view shows one at all, since a minimap over an alignment
-  // that already fits marks a viewport wider than the bar
-  const includeMinimap =
-    opts.exportType === 'viewport' &&
-    !!opts.includeMinimap &&
-    showHorizontalScrollbar
-  const rows = legendRows(model.legends)
-  const legendWidth = rows.length > 0 ? getLegendWidth(rows) : 0
-  const topHeight = Math.max(
-    includeMinimap ? minimapHeight : 0,
-    rowPanelsHeaderHeight,
-    treeOverviewHeight + (treeScaleBar ? treeScaleBarHeight : 0),
-  )
-  const gutterWidth = effectiveTreeAreaWidth + rowPanelsWidth
-
-  // width stays content-only; the legend occupies an extra column added at the
-  // svg root in MsaSvg. The viewport export takes the alignment canvas's own
-  // size rather than the widget's -- the widget box also covers the header, the
-  // resize handle and the scrollbars, and rendering that box exports rows and
-  // columns the scrollbars hide on screen
-  return opts.exportType === 'entire'
-    ? {
-        width: totalWidth + gutterWidth,
-        msaAreaWidth: totalWidth,
-        height: totalHeight + trackHeight + topHeight,
-        contentHeight: totalHeight,
-        trackHeight,
-        topHeight,
-        offsetX: 0,
-        offsetY: 0,
-        includeMinimap,
-        legendWidth,
-      }
-    : {
-        width: msaCanvasWidth + gutterWidth,
-        msaAreaWidth: msaCanvasWidth,
-        height: msaAreaHeight + topHeight + trackHeight,
-        contentHeight: msaAreaHeight,
-        trackHeight,
-        topHeight,
-        offsetX: -scrollX,
-        offsetY: -scrollY,
-        includeMinimap,
-        legendWidth,
-      }
-}
+export type { ExportSvgOptions } from './exportLayout.ts'
 
 export async function renderToSvg(model: MsaViewModel, opts: ExportSvgOptions) {
   // dataInitialized stays false while the model holds a load error, so waiting
@@ -173,12 +64,13 @@ export async function renderToSvg(model: MsaViewModel, opts: ExportSvgOptions) {
       layers={layers}
     />,
   )
+  // innerHTML serializes as HTML, and an XML parser rejects its  
   return svgSafeColors(
     markup.replaceAll(/<g data-layer="([^"]+)"><\/g>/g, (match, id: string) => {
       const ctx = layers.get(id)
       return ctx ? `<g id="${id}">${ctx.getSvg().innerHTML}</g>` : match
     }),
-  )
+  ).replaceAll('&nbsp;', '&#160;')
 }
 
 function MsaSvg({
@@ -196,17 +88,8 @@ function MsaSvg({
 }) {
   const { width, trackHeight, includeMinimap, legendWidth, topHeight } = layout
   const { effectiveTreeAreaWidth, rowPanelsWidth } = model
-  const totalWidth = width + legendWidth
+  const { width: totalWidth, height } = exportPageSize(model, layout)
   const legendTop = topHeight
-  // a short alignment with many legend entries has a key taller than its rows,
-  // and the page has to hold the whole key
-  const height =
-    legendWidth > 0
-      ? Math.max(
-          layout.height,
-          legendTop + legendHeight(legendRows(model.legends)),
-        )
-      : layout.height
   const props = { Context, model, theme, layout, layers }
 
   const body = (
@@ -227,6 +110,9 @@ function MsaSvg({
       xmlns="http://www.w3.org/2000/svg"
       xmlnsXlink="http://www.w3.org/1999/xlink"
       viewBox={`0 0 ${totalWidth} ${height}`}
+      // the canvas layers name sans-serif on each glyph; the legend, labels
+      // and headers inherit it here instead of an editor's default serif
+      fontFamily="sans-serif"
     >
       {/* every layer below draws in the theme's colors, so the page has to be
           the theme's background too -- a hardcoded white one turns a dark-theme
@@ -359,7 +245,6 @@ function RowPanelHeadersSVG({
         const center = effectiveTreeAreaWidth + panel.offsetX + panel.width / 2
         const x = across ? center : center + size / 3
         const room = across ? panel.width : y - LEGEND_PAD
-        const maxChars = Math.floor(room / (size * CHAR_WIDTH))
         return size < 5 ? null : (
           <text
             key={panel.id}
@@ -371,9 +256,10 @@ function RowPanelHeadersSVG({
             fontSize={size}
             fill={theme.palette.text.primary}
           >
-            {panel.header.length > maxChars
-              ? `${panel.header.slice(0, Math.max(1, maxChars - 1))}…`
-              : panel.header}
+            {
+              ellipsize(t => measureTextCanvas(t, size), panel.header, room)
+                .text
+            }
           </text>
         )
       })}
@@ -381,21 +267,11 @@ function RowPanelHeadersSVG({
   )
 }
 
-// A label past the room it has, cut to what fits with an ellipsis. The measure
-// is the one cladeGutterWidth sizes the gutter with, so a label the gutter
-// holds keeps every character.
-function clipCladeLabel(label: string, room: number, fontSize: number) {
-  const width = measureTextCanvas(label, fontSize)
-  if (width <= room) {
-    return label
-  }
-  const fits = Math.floor((label.length * room) / width)
-  return `${label.slice(0, Math.max(1, fits - 1))}…`
-}
-
 // Each bracket's label in the gutter beside its bar, where the live view puts
 // it (see CladeLabels). The canvas layer draws the bar; a label longer than the
 // gutter or the clade is clipped, since text that overruns runs off the figure.
+// cladeGutterWidth sizes the gutter with the same measureTextCanvas, so a label
+// the gutter holds keeps every character.
 function CladeLabelsSVG({
   model,
   theme,
@@ -405,43 +281,32 @@ function CladeLabelsSVG({
   theme: Theme
   offsetY: number
 }) {
-  const {
-    resolvedClades,
-    cladeGutterWidth,
-    rowHeight,
-    effectiveTreeAreaWidth,
-    fontSize,
-  } = model
-  if (cladeGutterWidth === 0) {
-    return null
-  }
-  const gutterLeft = effectiveTreeAreaWidth - cladeGutterWidth
-  return (
+  const { fontSize } = model
+  const boxes = cladeLabelBoxes(model)
+  return boxes.length === 0 ? null : (
     <g id="clade-labels">
-      {resolvedClades.map((clade, index) => {
-        const { label, markColor, rows } = clade
-        if (!label || !cladeInGutter(clade)) {
-          return null
-        }
-        const left = gutterLeft + cladeLabelOffset(clade)
-        const top = rows[0] * rowHeight - offsetY
-        const height = cladeHeight(clade, rowHeight)
-        const horizontal = cladeLabelHorizontal(clade, rowHeight, fontSize)
-        const room = horizontal
-          ? effectiveTreeAreaWidth - left - bracketGap
-          : height
-        const x = horizontal ? left : left + fontSize
-        const y = horizontal ? top + height / 2 + fontSize / 3 : top + height
+      {boxes.map(box => {
+        const top = box.top - offsetY
+        const x = box.horizontal ? box.left : box.left + fontSize
+        const y = box.horizontal
+          ? top + box.height / 2 + fontSize / 3
+          : top + box.height
         return (
           <text
-            key={`${rows[0]}-${rows[1]}-${index}`}
+            key={box.key}
             x={x}
             y={y}
-            transform={horizontal ? undefined : `rotate(-90 ${x} ${y})`}
+            transform={box.horizontal ? undefined : `rotate(-90 ${x} ${y})`}
             fontSize={fontSize}
-            fill={markColor ?? theme.palette.text.primary}
+            fill={box.color ?? theme.palette.text.primary}
           >
-            {clipCladeLabel(label, room, fontSize)}
+            {
+              ellipsize(
+                t => measureTextCanvas(t, fontSize),
+                box.label,
+                box.horizontal ? box.width : box.height,
+              ).text
+            }
           </text>
         )
       })}
@@ -464,9 +329,7 @@ function LegendSVG({
   const boxHeight = legendHeight(rows)
   // the column is capped at LEGEND_MAX_W, so a name too long for it has to be
   // clipped here -- text that overruns the reserved width runs off the figure
-  const maxChars = Math.floor(
-    (width - LEGEND_TEXT_X - LEGEND_PAD) / LEGEND_CHAR_W,
-  )
+  const room = width - LEGEND_TEXT_X - LEGEND_PAD
   return (
     <g>
       <rect
@@ -499,9 +362,7 @@ function LegendSVG({
               fontWeight={row.color ? undefined : 'bold'}
               fill={theme.palette.text.primary}
             >
-              {row.label.length > maxChars
-                ? `${row.label.slice(0, Math.max(1, maxChars - 1))}…`
-                : row.label}
+              {ellipsize(t => t.length * LEGEND_CHAR_W, row.label, room).text}
             </text>
           </g>
         )
@@ -622,9 +483,8 @@ function CoreRendering({ model, theme, layout, Context, layers }: LayerProps) {
 }
 
 /**
- * The alignment background as a single <image>, under the live canvas's
- * conditions: no domain overlay boxes, background coloring on, and a canvas
- * that reads back.
+ * The alignment background as a single <image>, wherever the live canvas
+ * draws the raster.
  *
  * The vector path's <rect> per cell exhausts the heap on a real alignment. The
  * image is one pixel per cell, and image-rendering keeps the upscaled cell
@@ -640,8 +500,8 @@ function rasterBackground({
   layout: Layout
 }) {
   const { contentHeight, offsetX, offsetY, msaAreaWidth } = layout
-  const { colWidth, rowHeight, actuallyShowDomains, bgColor } = model
-  if (actuallyShowDomains || !bgColor || !rasterSupported()) {
+  const { colWidth, rowHeight } = model
+  if (!rasterApplies(model)) {
     return undefined
   }
   const { xStart, xEnd } = visibleColRange({
@@ -728,7 +588,8 @@ function TrackLabelsSVG({
     const top = turnedOnTracks
       .slice(0, i)
       .reduce((acc, t) => acc + t.model.height, 0)
-    return { id, name, size, baseline: top + height / 2 + size / 3 }
+    // pinned to the top of the track, as the live view's flex row pins it
+    return { id, name, size, baseline: top + size * 0.8 }
   })
   return (
     <>

package/src/types.ts

@@ -64,7 +64,6 @@ export interface ArcTrackModel extends BasicTrackModel {
 }
 
 export interface BasicTrack {
-  ReactComponent: React.FC<any>
   model: TextTrackModel & BarTrackModel & ArcTrackModel
 }
 

package/src/version.ts

@@ -1 +1 @@
-export const version = '9.0.0'
+export const version = '9.1.0'

package/src/viewerSnapshot.ts

@@ -0,0 +1,147 @@
+import { createJBrowseTheme } from '@jbrowse/core/ui/theme'
+
+import type { MSAViewerProps } from './components/MSAViewer.tsx'
+import type { ColorScheme, Highlight } from './types.ts'
+
+export function colorSchemeSnapshot(scheme: ColorScheme | undefined) {
+  return typeof scheme === 'string'
+    ? { colorSchemeName: scheme }
+    : scheme
+      ? { customColorScheme: scheme.map }
+      : {}
+}
+
+/**
+ * The `highlightColumns` prop as `highlights`: one `{start, end}` per run of
+ * adjacent 1-based alignment columns
+ */
+export function columnHighlights(columns: number[] = []) {
+  const sorted = [...new Set(columns)].sort((a, b) => a - b)
+  const runs: { start: number; end: number }[] = []
+  for (const column of sorted) {
+    const last = runs.at(-1)
+    if (last?.end === column - 1) {
+      last.end = column
+    } else {
+      runs.push({ start: column, end: column })
+    }
+  }
+  return runs
+}
+
+export function viewerHighlights({
+  highlights = [],
+  highlightColumns,
+}: Pick<MSAViewerProps, 'highlights' | 'highlightColumns'>): Highlight[] {
+  return [...highlights, ...columnHighlights(highlightColumns)]
+}
+
+function urlLocation(uri: string | undefined) {
+  return uri ? { uri, locationType: 'UriLocation' as const } : undefined
+}
+
+/** each filehandle prop, or the URL prop standing in for it */
+export function fileLocations({
+  msaFilehandle,
+  treeFilehandle,
+  gffFilehandle,
+  msaUrl,
+  treeUrl,
+  gffUrl,
+}: MSAViewerProps) {
+  return {
+    msaFilehandle: msaFilehandle ?? urlLocation(msaUrl),
+    treeFilehandle: treeFilehandle ?? urlLocation(treeUrl),
+    gffFilehandle: gffFilehandle ?? urlLocation(gffUrl),
+  }
+}
+
+export function resolveTheme(theme: MSAViewerProps['theme']) {
+  return createJBrowseTheme(
+    theme === 'dark'
+      ? { palette: { mode: 'dark' } }
+      : typeof theme === 'object'
+        ? theme
+        : undefined,
+  )
+}
+
+/**
+ * The model snapshot `MSAViewer` creates from its props. The CLI's `--props`
+ * reads the same JSON the R and Python widgets send, so a figure exported
+ * headlessly draws what the widget drew.
+ */
+export function viewerSnapshot(props: MSAViewerProps) {
+  const {
+    msa,
+    tree,
+    gff,
+    rowData,
+    colorScheme,
+    height,
+    colWidth,
+    rowHeight,
+    allowedGappyness,
+    highlightColumns,
+    highlights,
+    features,
+    selection,
+    clades,
+    relativeTo,
+    columnTracks,
+    residueMappings,
+    encodings,
+    rowPanels,
+    drawTree,
+    treeAreaWidth,
+    showBranchLen,
+    treeOrder,
+    treeRoot,
+    region,
+    residueEncoding,
+  } = props
+  const { msaFilehandle, treeFilehandle, gffFilehandle } = fileLocations(props)
+  return {
+    type: 'MsaView' as const,
+    ...(msa || tree || gff || rowData
+      ? {
+          data: {
+            msa: msa ?? '',
+            tree: tree ?? '',
+            gff,
+            // the row table is stored as this JSON string, which is what a
+            // shared URL and the size limit already cover
+            ...(rowData ? { treeMetadata: JSON.stringify(rowData) } : {}),
+          },
+        }
+      : {}),
+    ...(msaFilehandle ? { msaFilehandle } : {}),
+    ...(treeFilehandle ? { treeFilehandle } : {}),
+    ...(gffFilehandle ? { gffFilehandle } : {}),
+    ...colorSchemeSnapshot(colorScheme),
+    ...(height ? { height } : {}),
+    ...(colWidth ? { colWidth } : {}),
+    ...(rowHeight ? { rowHeight } : {}),
+    ...(allowedGappyness !== undefined ? { allowedGappyness } : {}),
+    ...(highlights || highlightColumns
+      ? { highlights: viewerHighlights({ highlights, highlightColumns }) }
+      : {}),
+    ...(features ? { features } : {}),
+    ...(selection ? { selection } : {}),
+    ...(clades ? { clades } : {}),
+    ...(relativeTo ? { relativeTo } : {}),
+    ...(columnTracks ? { columnTracks } : {}),
+    ...(residueMappings ? { residueMappings } : {}),
+    ...(encodings ? { encodings } : {}),
+    ...(rowPanels ? { rowPanels } : {}),
+    ...(drawTree !== undefined ? { drawTree } : {}),
+    ...(treeAreaWidth ? { treeAreaWidth } : {}),
+    ...(showBranchLen !== undefined ? { showBranchLen } : {}),
+    ...(treeOrder ? { treeOrder } : {}),
+    ...(treeRoot ? { treeRoot } : {}),
+    ...(region ? { region } : {}),
+    ...(residueEncoding !== undefined
+      ? { bgColor: residueEncoding === 'fill' }
+      : {}),
+  }
+}

package/dist/components/header/ZoomMenu.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import type { MsaViewModel } from '../../model.ts';
-declare const ZoomMenu: ({ model }: {
-    model: MsaViewModel;
-}) => React.JSX.Element;
-export default ZoomMenu;

package/dist/components/header/ZoomMenu.js

@@ -1,37 +0,0 @@
-import React from 'react';
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-import MoreVert from '@mui/icons-material/MoreVert';
-import RestartAlt from '@mui/icons-material/RestartAlt';
-import { observer } from 'mobx-react';
-const ZoomMenu = observer(function ({ model }) {
-    return (React.createElement(CascadingMenuButton, { tooltip: "Fit / zoom options", menuItems: [
-            {
-                label: 'Fit both vertically/horizontally',
-                onClick: () => {
-                    model.fit();
-                },
-            },
-            {
-                label: 'Fit vertically',
-                onClick: () => {
-                    model.fitVertically();
-                },
-            },
-            {
-                label: 'Fit horizontally',
-                onClick: () => {
-                    model.fitHorizontally();
-                },
-            },
-            {
-                label: 'Reset zoom to default',
-                icon: RestartAlt,
-                onClick: () => {
-                    model.resetZoom();
-                },
-            },
-        ] },
-        React.createElement(MoreVert, null)));
-});
-export default ZoomMenu;
-//# sourceMappingURL=ZoomMenu.js.map

package/dist/components/header/ZoomMenu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ZoomMenu.js","sourceRoot":"","sources":["../../../src/components/header/ZoomMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,mBAAmB,MAAM,sCAAsC,CAAA;AACtE,OAAO,QAAQ,MAAM,8BAA8B,CAAA;AACnD,OAAO,UAAU,MAAM,gCAAgC,CAAA;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,MAAM,QAAQ,GAAG,QAAQ,CAAC,UAAU,EAAE,KAAK,EAA2B;IACpE,OAAO,CACL,oBAAC,mBAAmB,IAClB,OAAO,EAAC,oBAAoB,EAC5B,SAAS,EAAE;YACT;gBACE,KAAK,EAAE,kCAAkC;gBACzC,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,GAAG,EAAE,CAAA;gBACb,CAAC;aACF;YACD;gBACE,KAAK,EAAE,gBAAgB;gBACvB,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,aAAa,EAAE,CAAA;gBACvB,CAAC;aACF;YACD;gBACE,KAAK,EAAE,kBAAkB;gBACzB,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,eAAe,EAAE,CAAA;gBACzB,CAAC;aACF;YAED;gBACE,KAAK,EAAE,uBAAuB;gBAC9B,IAAI,EAAE,UAAU;gBAChB,OAAO,EAAE,GAAG,EAAE;oBACZ,KAAK,CAAC,SAAS,EAAE,CAAA;gBACnB,CAAC;aACF;SACF;QAED,oBAAC,QAAQ,OAAG,CACQ,CACvB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/src/components/header/ZoomMenu.tsx

@@ -1,48 +0,0 @@
-import React from 'react'
-
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
-import MoreVert from '@mui/icons-material/MoreVert'
-import RestartAlt from '@mui/icons-material/RestartAlt'
-import { observer } from 'mobx-react'
-
-import type { MsaViewModel } from '../../model.ts'
-
-const ZoomMenu = observer(function ({ model }: { model: MsaViewModel }) {
-  return (
-    <CascadingMenuButton
-      tooltip="Fit / zoom options"
-      menuItems={[
-        {
-          label: 'Fit both vertically/horizontally',
-          onClick: () => {
-            model.fit()
-          },
-        },
-        {
-          label: 'Fit vertically',
-          onClick: () => {
-            model.fitVertically()
-          },
-        },
-        {
-          label: 'Fit horizontally',
-          onClick: () => {
-            model.fitHorizontally()
-          },
-        },
-
-        {
-          label: 'Reset zoom to default',
-          icon: RestartAlt,
-          onClick: () => {
-            model.resetZoom()
-          },
-        },
-      ]}
-    >
-      <MoreVert />
-    </CascadingMenuButton>
-  )
-})
-
-export default ZoomMenu