jbrowse-plugin-mafviewer 1.2.2 → 1.2.4

package/src/LinearMafDisplay/components/YScaleBars.tsx

@@ -1,13 +1,11 @@
 import React from 'react'
 
-import { measureText } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 
-// locals
-import { LinearMafDisplayModel } from '../stateModel'
 import ColorLegend from './ColorLegend'
 import SvgWrapper from './SvgWrapper'
-import { max } from './util'
+
+import type { LinearMafDisplayModel } from '../stateModel'
 
 export const YScaleBars = observer(function (props: {
   model: LinearMafDisplayModel
@@ -15,25 +13,9 @@ export const YScaleBars = observer(function (props: {
   exportSVG?: boolean
 }) {
   const { model } = props
-  const { rowHeight, samples } = model
-  const svgFontSize = Math.min(Math.max(rowHeight, 8), 14)
-  const canDisplayLabel = rowHeight >= 8
-  const minWidth = 20
-
-  const labelWidth = max(
-    samples
-      ?.map(s => measureText(s.label, svgFontSize))
-      .map(width => (canDisplayLabel ? width : minWidth)) || [],
-    0,
-  )
-
   return (
     <SvgWrapper {...props}>
-      <ColorLegend
-        model={model}
-        labelWidth={labelWidth}
-        svgFontSize={svgFontSize}
-      />
+      <ColorLegend model={model} />
     </SvgWrapper>
   )
 })

package/src/LinearMafDisplay/index.ts

@@ -1,7 +1,7 @@
 import PluginManager from '@jbrowse/core/PluginManager'
 import { DisplayType } from '@jbrowse/core/pluggableElementTypes'
 
-import ReactComponent from './components/ReactComponent'
+import ReactComponent from './components/LinearMafDisplayComponent'
 import configSchemaF from './configSchema'
 import stateModelFactory from './stateModel'
 

package/src/LinearMafDisplay/stateModel.ts

@@ -1,5 +1,7 @@
+import { lazy } from 'react'
+
 import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
-import { getEnv, getSession } from '@jbrowse/core/util'
+import { getEnv, getSession, max, measureText } from '@jbrowse/core/util'
 import { getRpcSessionId } from '@jbrowse/core/util/tracks'
 import { ascending } from 'd3-array'
 import { cluster, hierarchy } from 'd3-hierarchy'
@@ -7,11 +9,10 @@ import deepEqual from 'fast-deep-equal'
 import { autorun } from 'mobx'
 import { addDisposer, isAlive, types } from 'mobx-state-tree'
 
-import SetRowHeightDialog from './components/SetRowHeight'
-import { maxLength, setBrLength } from './types'
+import { maxLength, setBrLength } from './util'
 import { normalize } from '../util'
 
-import type { NodeWithIds, NodeWithIdsAndLength } from './types'
+import type { NodeWithIds, NodeWithIdsAndLength, Sample } from './types'
 import type PluginManager from '@jbrowse/core/PluginManager'
 import type {
   AnyConfigurationModel,
@@ -21,11 +22,7 @@ import type { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view
 import type { HierarchyNode } from 'd3-hierarchy'
 import type { Instance } from 'mobx-state-tree'
 
-interface Sample {
-  id: string
-  label: string
-  color?: string
-}
+const SetRowHeightDialog = lazy(() => import('./components/SetRowHeightDialog'))
 
 /**
  * #stateModel LinearMafDisplay
@@ -193,8 +190,20 @@ export default function stateModelFactory(
        * #getter
        */
       get samples() {
-        return this.rowNames ? normalize(this.rowNames) : self.volatileSamples
+        if (this.rowNames) {
+          const volatileSamplesMap = self.volatileSamples
+            ? Object.fromEntries(self.volatileSamples.map(e => [e.id, e]))
+            : undefined
+          return normalize(this.rowNames).map(r => ({
+            ...r,
+            label: volatileSamplesMap?.[r.id]?.label || r.label,
+            color: volatileSamplesMap?.[r.id]?.color || r.color,
+          }))
+        } else {
+          return self.volatileSamples
+        }
       },
+
       /**
        * #getter
        */
@@ -311,6 +320,32 @@ export default function stateModelFactory(
         },
       }
     })
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get svgFontSize() {
+        return Math.min(Math.max(self.rowHeight, 8), 14)
+      },
+      /**
+       * #getter
+       */
+      get canDisplayLabel() {
+        return self.rowHeight >= 7
+      },
+      /**
+       * #getter
+       */
+      get labelWidth() {
+        const minWidth = 20
+        return max(
+          self.samples
+            ?.map(s => measureText(s.label, this.svgFontSize))
+            .map(width => (this.canDisplayLabel ? width : minWidth)) || [],
+          0,
+        )
+      },
+    }))
     .actions(self => ({
       afterCreate() {
         addDisposer(
@@ -319,11 +354,8 @@ export default function stateModelFactory(
             try {
               const { rpcManager } = getSession(self)
               const sessionId = getRpcSessionId(self)
-
-              const results = (await rpcManager.call(
-                sessionId,
-                'MafGetSamples',
-                {
+              self.setSamples(
+                (await rpcManager.call(sessionId, 'MafGetSamples', {
                   sessionId,
                   adapterConfig: self.adapterConfig,
                   statusCallback: (message: string) => {
@@ -331,9 +363,8 @@ export default function stateModelFactory(
                       self.setMessage(message)
                     }
                   },
-                },
-              )) as any
-              self.setSamples(results)
+                })) as { samples: Sample[]; tree: unknown },
+              )
             } catch (e) {
               console.error(e)
               getSession(self).notifyError(`${e}`, e)

package/src/LinearMafDisplay/types.ts

@@ -1,7 +1,3 @@
-import { max } from 'd3-array'
-
-import type { HierarchyNode } from 'd3-hierarchy'
-
 export interface NodeWithIds {
   id: string
   name: string
@@ -18,24 +14,8 @@ export interface NodeWithIdsAndLength {
   length: number
 }
 
-// basically same as maxLength from https://observablehq.com/@d3/tree-of-life
-export function maxLength(d: HierarchyNode<NodeWithIds>): number {
-  return (
-    (d.data.length || 0) + (d.children ? max(d.children, maxLength) || 0 : 0)
-  )
-}
-// basically same as setRadius from https://observablehq.com/@d3/tree-of-life
-export function setBrLength(
-  d: HierarchyNode<NodeWithIds>,
-  y0: number,
-  k: number,
-) {
-  // @ts-expect-error
-  d.len = (y0 += Math.max(d.data.length || 0, 0)) * k
-
-  if (d.children) {
-    d.children.forEach(d => {
-      setBrLength(d, y0, k)
-    })
-  }
+export interface Sample {
+  id: string
+  label: string
+  color?: string
 }

package/src/LinearMafDisplay/util.ts

@@ -0,0 +1,27 @@
+import { max } from 'd3-array'
+
+import type { NodeWithIds } from './types'
+import type { HierarchyNode } from 'd3-hierarchy'
+
+// basically same as maxLength from https://observablehq.com/@d3/tree-of-life
+export function maxLength(d: HierarchyNode<NodeWithIds>): number {
+  return (
+    (d.data.length || 0) + (d.children ? max(d.children, maxLength) || 0 : 0)
+  )
+}
+
+// basically same as setRadius from https://observablehq.com/@d3/tree-of-life
+export function setBrLength(
+  d: HierarchyNode<NodeWithIds>,
+  y0: number,
+  k: number,
+) {
+  // @ts-expect-error
+  d.len = (y0 += Math.max(d.data.length || 0, 0)) * k
+
+  if (d.children) {
+    d.children.forEach(d => {
+      setBrLength(d, y0, k)
+    })
+  }
+}

package/src/LinearMafRenderer/LinearMafRenderer.ts

@@ -42,25 +42,20 @@ export default class LinearMafRenderer extends FeatureRendererType {
       rowHeight,
     } = renderProps
     const region = regions[0]!
-    const height = samples.length * (rowHeight + 1) + 100
+    const height = samples.length * rowHeight + 100
     const width = (region.end - region.start) / bpPerPx
     const features = await this.getFeatures(renderProps)
-    const res = await renderToAbstractCanvas(
-      width,
-      height,
-      renderProps,
-      async ctx => {
-        await updateStatus('Rendering alignment', statusCallback, () => {
-          makeImageData({
-            ctx,
-            renderArgs: {
-              ...renderProps,
-              features,
-            },
-          })
+    const res = await updateStatus('Rendering alignment', statusCallback, () =>
+      renderToAbstractCanvas(width, height, renderProps, ctx => {
+        makeImageData({
+          ctx,
+          renderArgs: {
+            ...renderProps,
+            features,
+          },
         })
         return undefined
-      },
+      }),
     )
     const results = await super.render({
       ...renderProps,

package/src/LinearMafRenderer/makeImageData.ts

@@ -1,6 +1,6 @@
 import { RenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'
 import { createJBrowseTheme } from '@jbrowse/core/ui'
-import { Feature, featureSpanPx } from '@jbrowse/core/util'
+import { Feature, featureSpanPx, measureText } from '@jbrowse/core/util'
 
 import {
   fillRect,
@@ -74,11 +74,12 @@ export function makeImageData({
       }
 
       const t = rowHeight * row
+      const t2 = offset + t
 
       // gaps
       ctx.beginPath()
       ctx.fillStyle = 'black'
-      for (let i = 0, o = 0; i < alignment.length; i++) {
+      for (let i = 0, o = 0, l = alignment.length; i < l; i++) {
         if (seq[i] !== '-') {
           if (alignment[i] === '-') {
             const l = leftPx + scale * o
@@ -93,12 +94,12 @@ export function makeImageData({
       if (!showAllLetters) {
         // matches
         ctx.fillStyle = 'lightgrey'
-        for (let i = 0, o = 0; i < alignment.length; i++) {
+        for (let i = 0, o = 0, l = alignment.length; i < l; i++) {
           if (seq[i] !== '-') {
             const c = alignment[i]
             const l = leftPx + scale * o
-            if (seq[i] === c && c !== '-') {
-              fillRect(ctx, l, offset + t, scale + f, h, canvasWidth)
+            if (seq[i] === c && c !== '-' && c !== ' ') {
+              fillRect(ctx, l, t2, scale + f, h, canvasWidth)
             }
             o++
           }
@@ -106,7 +107,7 @@ export function makeImageData({
       }
 
       // mismatches
-      for (let i = 0, o = 0; i < alignment.length; i++) {
+      for (let i = 0, o = 0, l = alignment.length; i < l; i++) {
         const c = alignment[i]
         if (seq[i] !== '-') {
           if (c !== '-') {
@@ -115,7 +116,7 @@ export function makeImageData({
               fillRect(
                 ctx,
                 l,
-                offset + t,
+                t2,
                 scale + f,
                 h,
                 canvasWidth,
@@ -128,7 +129,7 @@ export function makeImageData({
               fillRect(
                 ctx,
                 l,
-                offset + t,
+                t2,
                 scale + f,
                 h,
                 canvasWidth,
@@ -146,7 +147,7 @@ export function makeImageData({
       // font
       const charSizeW = 10
       if (scale >= charSizeW) {
-        for (let i = 0, o = 0; i < alignment.length; i++) {
+        for (let i = 0, o = 0, l = alignment.length; i < l; i++) {
           if (seq[i] !== '-') {
             const l = leftPx + scale * o
             const offset = (scale - charSizeW) / 2 + 1
@@ -182,10 +183,8 @@ export function makeImageData({
       }
 
       const t = rowHeight * row
-
-      ctx.beginPath()
-      ctx.fillStyle = 'purple'
-      for (let i = 0, o = 0; i < alignment.length; i++) {
+      const t2 = offset + t
+      for (let i = 0, o = 0, l = alignment.length; i < l; i++) {
         let ins = ''
         while (seq[i] === '-') {
           if (alignment[i] !== '-' && alignment[i] !== ' ') {
@@ -196,15 +195,46 @@ export function makeImageData({
         if (ins.length > 0) {
           const l = leftPx + scale * o - 1
 
-          ctx.rect(l, offset + t, 1, h)
-          if (bpPerPx < 1) {
-            ctx.rect(l - 2, offset + t, 5, 1)
-            ctx.rect(l - 2, offset + t + h - 1, 5, 1)
+          if (ins.length > 10) {
+            const txt = `${ins.length}`
+            if (bpPerPx > 10) {
+              fillRect(ctx, l - 1, t2, 2, h, canvasWidth, 'purple')
+            } else if (h > charHeight) {
+              const rwidth = measureText(txt, 10)
+              const padding = 2
+              fillRect(
+                ctx,
+                l - rwidth / 2 - padding,
+                t2,
+                rwidth + 2 * padding,
+                h,
+                canvasWidth,
+                'purple',
+              )
+              ctx.fillStyle = 'white'
+              ctx.fillText(txt, l - rwidth / 2, t + h)
+            } else {
+              const padding = 2
+              fillRect(
+                ctx,
+                l - padding,
+                t2,
+                2 * padding,
+                h,
+                canvasWidth,
+                'purple',
+              )
+            }
+          } else {
+            fillRect(ctx, l, t2, 1, h, canvasWidth, 'purple')
+            if (bpPerPx < 0.2 && rowHeight > 5) {
+              fillRect(ctx, l - 2, t2, 5, 1, canvasWidth)
+              fillRect(ctx, l - 2, t2 + h - 1, 5, 1, canvasWidth)
+            }
           }
         }
         o++
       }
-      ctx.fill()
     }
   }
 }

package/src/MafAddTrackWorkflow/AddTrackWorkflow.tsx

@@ -69,17 +69,15 @@ export default function MultiMAFWidget({ model }: { model: AddTrackModel }) {
               setFileTypeChoice(event.target.value as AdapterTypeOptions)
             }}
           >
-            {['BigMafAdapter', 'MafTabixAdapter', 'BgzipTaffyAdapter'].map(
-              r => (
-                <FormControlLabel
-                  key={r}
-                  value={r}
-                  control={<Radio />}
-                  checked={fileTypeChoice === r}
-                  label={r}
-                />
-              ),
-            )}
+            {['BigMafAdapter', 'MafTabixAdapter'].map(r => (
+              <FormControlLabel
+                key={r}
+                value={r}
+                control={<Radio />}
+                checked={fileTypeChoice === r}
+                label={r}
+              />
+            ))}
           </RadioGroup>
         </FormControl>
         {fileTypeChoice === 'BigMafAdapter' ? (

package/src/MafAddTrackWorkflow/index.ts

@@ -2,7 +2,6 @@ import PluginManager from '@jbrowse/core/PluginManager'
 import { AddTrackWorkflowType } from '@jbrowse/core/pluggableElementTypes'
 import { types } from 'mobx-state-tree'
 
-// locals
 import MultiMAFWidget from './AddTrackWorkflow'
 
 export default function MafAddTrackWorkflowF(pluginManager: PluginManager) {

package/src/MafTabixAdapter/MafTabixAdapter.ts

@@ -29,16 +29,16 @@ export default class MafTabixAdapter extends BaseFeatureDataAdapter {
   public setupP?: Promise<{ adapter: BaseFeatureDataAdapter }>
 
   async setupPre() {
-    const config = this.config
     if (!this.getSubAdapter) {
       throw new Error('no getSubAdapter available')
     }
-    const adapter = await this.getSubAdapter({
-      ...getSnapshot(config),
-      type: 'BedTabixAdapter',
-    })
     return {
-      adapter: adapter.dataAdapter as BaseFeatureDataAdapter,
+      adapter: (
+        await this.getSubAdapter({
+          ...getSnapshot(this.config),
+          type: 'BedTabixAdapter',
+        })
+      ).dataAdapter as BaseFeatureDataAdapter,
     }
   }
   async setupPre2() {
@@ -86,7 +86,8 @@ export default class MafTabixAdapter extends BaseFeatureDataAdapter {
           const alignments = {} as Record<string, OrganismRecord>
 
           // eslint-disable-next-line @typescript-eslint/prefer-for-of
-          for (let j = 0; j < data.length; j++) {
+          const len = data.length
+          for (let j = 0; j < len; j++) {
             const elt = data[j]!
             const seq = elt.split(':')[5]!
             const ad = elt.split(':')
@@ -106,6 +107,7 @@ export default class MafTabixAdapter extends BaseFeatureDataAdapter {
             }
             if (assemblyName) {
               firstAssemblyNameFound = firstAssemblyNameFound || assemblyName
+
               alignments[assemblyName] = {
                 chr: last,
                 start: +ad[1]!,

package/src/MafTabixAdapter/configSchema.ts

@@ -63,7 +63,35 @@ const configSchema = ConfigurationSchema(
       },
     },
   },
-  { explicitlyTyped: true },
+  {
+    explicitlyTyped: true,
+    preProcessSnapshot: snap => {
+      // populate from just snap.uri
+      return snap.uri
+        ? {
+            ...snap,
+            ...(snap.nhUri
+              ? {
+                  nhLocation: {
+                    uri: snap.nhUri,
+                    baseUri: snap.baseUri,
+                  },
+                }
+              : {}),
+            bedGzLocation: {
+              uri: snap.uri,
+              baseUri: snap.baseUri,
+            },
+            index: {
+              location: {
+                uri: `${snap.uri}.tbi`,
+                baseUri: snap.baseUri,
+              },
+            },
+          }
+        : snap
+    },
+  },
 )
 
 export default configSchema

package/src/util.ts

@@ -3,9 +3,13 @@ function isStrs(array: unknown[]): array is string[] {
 }
 
 export function normalize(
-  r: string[] | { id: string; label: string; color?: string }[],
+  r: string[] | { id: string; label?: string; color?: string }[],
 ) {
   return isStrs(r)
-    ? r.map(elt => ({ id: elt, label: elt, color: undefined }))
+    ? r.map(elt => ({
+        id: elt,
+        label: elt,
+        color: undefined,
+      }))
     : r
 }

package/dist/LinearMafDisplay/components/ReactComponent.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ReactComponent.js","sourceRoot":"","sources":["../../../src/LinearMafDisplay/components/ReactComponent.tsx"],"names":[],"mappings":"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"}

package/dist/LinearMafDisplay/components/SetRowHeight.js

@@ -1,36 +0,0 @@
-import React, { useState } from 'react';
-import { Dialog } from '@jbrowse/core/ui';
-import { Button, DialogActions, DialogContent, TextField, Typography, } from '@mui/material';
-import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-const useStyles = makeStyles()({
-    root: {
-        width: 500,
-    },
-});
-const SetRowHeightDialog = observer(function (props) {
-    const { model, handleClose } = props;
-    const { classes } = useStyles();
-    const [rowHeight, setRowHeight] = useState(`${model.rowHeight}`);
-    const [rowProportion, setRowProportion] = useState(`${model.rowProportion}`);
-    return (React.createElement(Dialog, { open: true, onClose: handleClose, title: "Set row height" },
-        React.createElement(DialogContent, { className: classes.root },
-            React.createElement(Typography, null, "Set row height and the proportion of the row height to use for drawing each row"),
-            React.createElement(TextField, { value: rowHeight, helperText: "Enter row height", onChange: event => {
-                    setRowHeight(event.target.value);
-                } }),
-            React.createElement(TextField, { value: rowProportion, helperText: "Enter row proportion", onChange: event => {
-                    setRowProportion(event.target.value);
-                } }),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { variant: "contained", color: "primary", type: "submit", autoFocus: true, onClick: () => {
-                        model.setRowProportion(+rowProportion);
-                        model.setRowHeight(+rowHeight);
-                        handleClose();
-                    } }, "Submit"),
-                React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => {
-                        handleClose();
-                    } }, "Cancel")))));
-});
-export default SetRowHeightDialog;
-//# sourceMappingURL=SetRowHeight.js.map

package/dist/LinearMafDisplay/components/SetRowHeight.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SetRowHeight.js","sourceRoot":"","sources":["../../../src/LinearMafDisplay/components/SetRowHeight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EACL,MAAM,EACN,aAAa,EACb,aAAa,EACb,SAAS,EACT,UAAU,GACX,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,MAAM,SAAS,GAAG,UAAU,EAAE,CAAC;IAC7B,IAAI,EAAE;QACJ,KAAK,EAAE,GAAG;KACX;CACF,CAAC,CAAA;AAEF,MAAM,kBAAkB,GAAG,QAAQ,CAAC,UAAU,KAQ7C;IACC,MAAM,EAAE,KAAK,EAAE,WAAW,EAAE,GAAG,KAAK,CAAA;IACpC,MAAM,EAAE,OAAO,EAAE,GAAG,SAAS,EAAE,CAAA;IAC/B,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC,CAAA;IAChE,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,GAAG,KAAK,CAAC,aAAa,EAAE,CAAC,CAAA;IAE5E,OAAO,CACL,oBAAC,MAAM,IAAC,IAAI,QAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAC,gBAAgB;QACvD,oBAAC,aAAa,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI;YACpC,oBAAC,UAAU,0FAGE;YACb,oBAAC,SAAS,IACR,KAAK,EAAE,SAAS,EAChB,UAAU,EAAC,kBAAkB,EAC7B,QAAQ,EAAE,KAAK,CAAC,EAAE;oBAChB,YAAY,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;gBAClC,CAAC,GACD;YACF,oBAAC,SAAS,IACR,KAAK,EAAE,aAAa,EACpB,UAAU,EAAC,sBAAsB,EACjC,QAAQ,EAAE,KAAK,CAAC,EAAE;oBAChB,gBAAgB,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;gBACtC,CAAC,GACD;YACF,oBAAC,aAAa;gBACZ,oBAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,QAAQ,EACb,SAAS,QACT,OAAO,EAAE,GAAG,EAAE;wBACZ,KAAK,CAAC,gBAAgB,CAAC,CAAC,aAAa,CAAC,CAAA;wBACtC,KAAK,CAAC,YAAY,CAAC,CAAC,SAAS,CAAC,CAAA;wBAC9B,WAAW,EAAE,CAAA;oBACf,CAAC,aAGM;gBACT,oBAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,WAAW,EACjB,OAAO,EAAE,GAAG,EAAE;wBACZ,WAAW,EAAE,CAAA;oBACf,CAAC,aAGM,CACK,CACF,CACT,CACV,CAAA;AACH,CAAC,CAAC,CAAA;AACF,eAAe,kBAAkB,CAAA"}

package/src/LinearMafDisplay/components/SetRowHeight.tsx

@@ -1,83 +0,0 @@
-import React, { useState } from 'react'
-
-import { Dialog } from '@jbrowse/core/ui'
-import {
-  Button,
-  DialogActions,
-  DialogContent,
-  TextField,
-  Typography,
-} from '@mui/material'
-import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
-
-const useStyles = makeStyles()({
-  root: {
-    width: 500,
-  },
-})
-
-const SetRowHeightDialog = observer(function (props: {
-  model: {
-    rowHeight?: number
-    rowProportion?: number
-    setRowHeight: (arg: number) => void
-    setRowProportion: (arg: number) => void
-  }
-  handleClose: () => void
-}) {
-  const { model, handleClose } = props
-  const { classes } = useStyles()
-  const [rowHeight, setRowHeight] = useState(`${model.rowHeight}`)
-  const [rowProportion, setRowProportion] = useState(`${model.rowProportion}`)
-
-  return (
-    <Dialog open onClose={handleClose} title="Set row height">
-      <DialogContent className={classes.root}>
-        <Typography>
-          Set row height and the proportion of the row height to use for drawing
-          each row
-        </Typography>
-        <TextField
-          value={rowHeight}
-          helperText="Enter row height"
-          onChange={event => {
-            setRowHeight(event.target.value)
-          }}
-        />
-        <TextField
-          value={rowProportion}
-          helperText="Enter row proportion"
-          onChange={event => {
-            setRowProportion(event.target.value)
-          }}
-        />
-        <DialogActions>
-          <Button
-            variant="contained"
-            color="primary"
-            type="submit"
-            autoFocus
-            onClick={() => {
-              model.setRowProportion(+rowProportion)
-              model.setRowHeight(+rowHeight)
-              handleClose()
-            }}
-          >
-            Submit
-          </Button>
-          <Button
-            variant="contained"
-            color="secondary"
-            onClick={() => {
-              handleClose()
-            }}
-          >
-            Cancel
-          </Button>
-        </DialogActions>
-      </DialogContent>
-    </Dialog>
-  )
-})
-export default SetRowHeightDialog