jbrowse-plugin-graphgenomeviewer 4.0.19 → 4.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jbrowse-plugin-graphgenomeviewer",
-  "version": "4.0.19",
+  "version": "4.0.21",
   "description": "JBrowse 2 graph genome (pangenome) view: rGFA reference-anchored layouts, the Bandage force-directed engine, and haplotype lanes read from a gbz-base database",
   "license": "GPL-3.0-or-later",
   "repository": {
@@ -76,7 +76,7 @@
     "typescript-eslint": "^8.70.1",
     "typescript7": "npm:typescript@^7.0.2",
     "vitest": "^5.0.2",
-    "@jbrowse/bandage-core": "0.1.14"
+    "@jbrowse/bandage-core": "0.1.16"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/src/GbzBaseSyntenyAdapter/GbzBaseSyntenyAdapter.ts

@@ -381,7 +381,7 @@ export default class GbzBaseSyntenyAdapter extends ComparativeAdapterBase<GbzBas
     const keep = this.keepPredicate(opts.haplotypes)
     return cutWindowGFA(db, query, start, end, {
       context: this.getConf('context'),
-      snarls: this.getConf('subgraphSnarls'),
+      snarls: opts.snarls ?? this.getConf('subgraphSnarls'),
       limit: this.getConf('nodeLimit'),
       signal: opts.signal,
       ...(keep === undefined ? {} : { keep }),

package/src/GetSubgraph.ts

@@ -20,6 +20,9 @@ export interface SubgraphCutOptions {
   hops?: number
   haplotypes?: string[]
   tier?: SubgraphTier
+  // which snarls a GBZ cut follows past the window, over the track's
+  // `subgraphSnarls`; 'overlapping' when the layout measures whole walks
+  snarls?: 'none' | 'contained' | 'overlapping'
 }
 
 // What an adapter's cut is handed: the payload, plus the call's own signal so

package/src/GraphGenomeView/components/BubbleHalos.tsx

@@ -28,7 +28,7 @@ const BubbleHalos = observer(function BubbleHalos({
 }: {
   model: GraphPaneModel
 }) {
-  const { bubbleHalos, walkHighlight, hoveredBubble } = model
+  const { bubbleHalos, walkLift, hoveredBubble } = model
   if (bubbleHalos.length === 0) {
     return null
   }
@@ -41,10 +41,9 @@ const BubbleHalos = observer(function BubbleHalos({
     canvasHeight,
   } = model
   const halo = model.contigThickness * HALO_FACTOR
-  // a lifted walk dims the bubbles it never enters
+  // lifted walks dim the bubbles none of them enters
   const dimmedBubble = (h: BubbleHalo) =>
-    walkHighlight !== undefined &&
-    !h.nodeIds.some(id => walkHighlight.nodeIds.has(id))
+    walkLift !== undefined && !h.nodeIds.some(id => walkLift.nodeIds.has(id))
 
   return (
     <svg

package/src/GraphGenomeView/components/GraphCanvas.tsx

@@ -7,6 +7,11 @@ import {
   findHoveredNode,
 } from '@jbrowse/bandage-core/util/hitDetection'
 import { wheelZoomFactor } from '@jbrowse/bandage-core/util/wheelZoom'
+import {
+  WALK_FIELDS,
+  encodingSwatchCss,
+  fieldLegend,
+} from '@jbrowse/bandage-core/walkEncoding'
 import { ErrorBanner, LoadingOverlay, Menu } from '@jbrowse/core/ui'
 import { isAlive } from '@jbrowse/mobx-state-tree'
 import { useRenderingBackend } from '@jbrowse/render-core/useRenderingBackend'
@@ -176,30 +181,61 @@ const PathLegend = observer(function PathLegend({
   ) : null
 })
 
-// What the lifted walk carries through the window, against the reference walk
-// where the graph has one: the number the array's loops are drawn for.
+const walkSwatchStyle = { width: 26, height: 8, borderRadius: 2, flex: 'none' }
+
+// What each lifted walk carries through the window, against the reference
+// walk where the graph has one, beside the scale its lane is coloured by, and
+// what each field in use means
+function fieldName(field: string) {
+  return WALK_FIELDS.find(f => f.value === field)!.label.toLowerCase()
+}
+
 const WalkReadout = observer(function WalkReadout({
   model,
 }: {
   model: GraphPaneModel
 }) {
-  const h = model.walkHighlight
-  if (!h) {
+  const lift = model.walkLift
+  if (!lift) {
     return null
   }
-  const label = model.walkChoices.find(c => c.name === h.name)?.label ?? h.name
-  const delta =
-    h.referenceBp === undefined
-      ? ''
-      : h.bp === h.referenceBp
-        ? ', the reference length'
-        : `, ${h.bp > h.referenceBp ? '+' : '−'}${Math.abs(h.bp - h.referenceBp).toLocaleString()} bp against the reference`
+  const labelOf = (name: string) =>
+    model.walkChoices.find(c => c.name === name)?.label ?? name
   return (
     <div style={legendBoxStyle} data-testid="graph-walk-readout">
-      <strong>{label}</strong>: {h.steps.toLocaleString()} steps,{' '}
-      {h.bp.toLocaleString()} bp{delta}
-      <br />
-      paler: what {label} does not carry
+      {lift.walks.map(w => {
+        const delta =
+          w.referenceBp === undefined
+            ? ''
+            : w.bp === w.referenceBp
+              ? ', the reference length'
+              : `, ${w.bp > w.referenceBp ? '+' : '−'}${Math.abs(w.bp - w.referenceBp).toLocaleString()} bp against the reference`
+        return (
+          <div key={w.name} style={pathLegendRowStyle}>
+            <div
+              style={{
+                ...walkSwatchStyle,
+                background: encodingSwatchCss(w.encoding),
+              }}
+            />
+            <span>
+              <strong>{labelOf(w.name)}</strong>: {w.bp.toLocaleString()} bp
+              {delta} · {fieldName(w.encoding.field)}
+            </span>
+          </div>
+        )
+      })}
+      {WALK_FIELDS.filter(f =>
+        lift.walks.some(w => w.encoding.field === f.value),
+      ).map(f => (
+        <div key={f.value}>
+          {fieldName(f.value)}: {fieldLegend(f.value)}
+        </div>
+      ))}
+      <div>
+        paler nodes: on none of{' '}
+        {lift.walks.length > 1 ? 'these walks' : 'this walk'}
+      </div>
     </div>
   )
 })

package/src/GraphGenomeView/components/LabelLayer.tsx

@@ -34,14 +34,13 @@ const LabelLayer = observer(function LabelLayer({
   if (bubbles.length + genes.length + routes.length === 0) {
     return null
   }
-  const { walkHighlight, scaleY, translateY, contigThickness } = model
-  // a lifted walk dims the bubbles it never enters and the routes it does not
-  // take
+  const { walkLift, scaleY, translateY, contigThickness } = model
+  // lifted walks dim the bubbles none of them enters and the routes none of
+  // them takes
   const dimmedBubble = (h: BubbleHalo) =>
-    walkHighlight !== undefined &&
-    !h.nodeIds.some(id => walkHighlight.nodeIds.has(id))
+    walkLift !== undefined && !h.nodeIds.some(id => walkLift.nodeIds.has(id))
   const dimmedRoute = (r: RouteLabel) =>
-    walkHighlight !== undefined && !r.route.walks.includes(walkHighlight.name)
+    walkLift !== undefined && !r.route.walks.some(w => walkLift.names.has(w))
 
   return (
     <svg

package/src/GraphGenomeView/components/WalkSelect.tsx

@@ -1,4 +1,11 @@
-import { FormControl, InputLabel, MenuItem, Select } from '@mui/material'
+import {
+  Checkbox,
+  FormControl,
+  InputLabel,
+  ListItemText,
+  MenuItem,
+  Select,
+} from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
@@ -7,12 +14,13 @@ import type { GraphPaneModel } from '../model'
 const useStyles = makeStyles()({
   formControl: {
     minWidth: 130,
-    maxWidth: 220,
+    maxWidth: 260,
   },
 })
 
-// Which walk to lift out of the drawing: Bandage's path highlight, with the
-// haplotypes a GBZ cut carries. Absent from a graph with no walks.
+// Which walks to lift out of the drawing: Bandage's path highlight, for as many
+// of the haplotypes a GBZ cut carries as the reader picks. Absent from a graph
+// with no walks.
 const WalkSelect = observer(function WalkSelect({
   model,
 }: {
@@ -24,23 +32,28 @@ const WalkSelect = observer(function WalkSelect({
     return null
   }
   const names = new Set(walkChoices.map(c => c.name))
+  const labels = new Map(walkChoices.map(c => [c.name, c.label]))
+  const picked = model.walkLayers
+    .map(layer => layer.walk)
+    .filter(name => names.has(name))
   return (
     <FormControl size="small" className={classes.formControl}>
-      <InputLabel>Walk</InputLabel>
+      <InputLabel>Walks</InputLabel>
       <Select
-        value={names.has(model.highlightedPath) ? model.highlightedPath : ''}
-        label="Walk"
+        multiple
+        value={picked}
+        label="Walks"
         data-testid="graph-walk-select"
+        renderValue={selected => selected.map(n => labels.get(n)).join(', ')}
         onChange={e => {
-          model.setHighlightedPath(e.target.value)
+          const { value } = e.target
+          model.liftWalks(typeof value === 'string' ? value.split(',') : value)
         }}
       >
-        <MenuItem value="">
-          <em>None</em>
-        </MenuItem>
         {walkChoices.map(({ name, label }) => (
-          <MenuItem key={name} value={name}>
-            {label}
+          <MenuItem key={name} value={name} dense>
+            <Checkbox size="small" checked={picked.includes(name)} />
+            <ListItemText primary={label} />
           </MenuItem>
         ))}
       </Select>

package/src/GraphGenomeView/model.test.ts

@@ -2484,6 +2484,54 @@ describe('walk rows', () => {
     model.setWalkRowSamples(['B'])
     expect(model.walkRowBars!.rows.map(r => r.label)).toEqual(['B#1'])
   })
+
+  test('walks lift together, each keeping the colour it was given', async () => {
+    rpcRespond()
+    const model = stateModelFactory().create({
+      type: 'GraphGenomeView',
+      layoutMode: 'auto',
+      colorScheme: 'grey',
+    })
+    await model.loadGFA(WALKS_GFA, 'walks')
+    model.liftWalks(['B#1#ctg', 'GRCh38#0#chr1'])
+    model.setWalkColor('B#1#ctg', { field: 'strand' })
+    model.setWalkColor('B#1#ctg', { scheme: 'greens' })
+    model.toggleWalk('A#1#ctg')
+    expect(model.walkLift!.walks.map(w => [w.name, w.encoding])).toEqual([
+      ['GRCh38#0#chr1', { field: 'reference', scheme: 'rainbow' }],
+      ['B#1#ctg', { field: 'strand', scheme: 'greens' }],
+      ['A#1#ctg', { field: 'progress', scheme: 'reds' }],
+    ])
+    // the reference is coloured by position whatever the node colour scheme
+    const ref = model.walkLift!.walks[0]!
+    expect(new Set(ref.colors.values()).size).toBe(2)
+    interface Item {
+      label?: string
+      checked?: boolean
+      subMenu?: Item[]
+    }
+    const walkMenu = (model.graphMenuItems() as Item[]).find(
+      item => item.label === 'Walk',
+    )!
+    const colour = walkMenu.subMenu!.find(item => item.label === 'Colour B#1')!
+    expect(
+      colour.subMenu.filter(item => item.checked).map(item => item.label),
+    ).toEqual(['Strand against the reference', 'Greens'])
+    model.liftWalks(['B#1#ctg'])
+    expect(model.walkLayers).toEqual([
+      { walk: 'B#1#ctg', color: { field: 'strand', scheme: 'greens' } },
+    ])
+    model.toggleWalk('B#1#ctg')
+    expect(model.walkLift).toBeUndefined()
+  })
+
+  test('a session naming the one walk the old field lifted opens with none', () => {
+    const model = stateModelFactory().create({
+      type: 'GraphGenomeView',
+      highlightedPath: 'A#1#ctg',
+    } as never)
+    expect(model.walkLayers).toEqual([])
+  })
 })
 
 describe('annotation reads beside a cut', () => {

package/src/GraphGenomeView/model.ts

@@ -97,7 +97,8 @@ import {
   viewportOf,
   zoomAbout,
 } from '@jbrowse/bandage-core/viewport'
-import { walkHighlight } from '@jbrowse/bandage-core/walkHighlight'
+import { WALK_FIELDS, WALK_SCHEMES } from '@jbrowse/bandage-core/walkEncoding'
+import { walkLift } from '@jbrowse/bandage-core/walkHighlight'
 import { readConfObject } from '@jbrowse/core/configuration'
 import { pushLaunchViewMenuItem } from '@jbrowse/core/ui'
 import {
@@ -179,6 +180,10 @@ import type {
 } from '@jbrowse/bandage-core/types'
 import type { AxisScale } from '@jbrowse/bandage-core/util/geometry'
 import type { NodeInk } from '@jbrowse/bandage-core/util/hitDetection'
+import type {
+  WalkEncoding,
+  WalkLayer,
+} from '@jbrowse/bandage-core/walkEncoding'
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration'
 import type { MenuItem } from '@jbrowse/core/ui'
 import type { Feature } from '@jbrowse/core/util'
@@ -440,9 +445,10 @@ export function GraphPaneMixin() {
         // Samples whose walks the walk rows show, by the name before the
         // haplotype number; undefined shows every walk the cut holds.
         walkRowSamples: types.maybe(types.frozen<string[]>()),
-        // One walk, by its path name, lifted out of the drawing: its nodes and
-        // links keep their ink and the rest fades. Empty lifts none.
-        highlightedPath: types.optional(types.string, ''),
+        // Walks lifted out of the drawing, each a layer with a lane of its own
+        // and the rest fading, coloured by the encoding it states or by the
+        // default one. See walkEncoding.ts. Empty lifts none.
+        walkLayers: types.optional(types.frozen<WalkLayer[]>(), []),
         // Which of a general GFA's paths the anchored layouts put on x. A path
         // GFA's names are arbitrary and none of them is marked as the
         // reference, so this is a choice; empty means "infer", which is the
@@ -723,13 +729,6 @@ export function GraphPaneMixin() {
         const paths = self.graph?.paths
         return paths?.length ? pathLegend(paths) : []
       },
-      // The lifted walk, or undefined when none is named or the graph on
-      // screen does not carry the one that was.
-      get walkHighlight() {
-        return self.graph && self.highlightedPath
-          ? walkHighlight(self.graph, self.highlightedPath)
-          : undefined
-      },
       // Whether the drawing is actually painted per path, which is not the same
       // question as whether the user asked for it: past MAX_PATH_COLORS the
       // colours say nothing and cost a stroke per path per edge. A bare getter
@@ -754,6 +753,19 @@ export function GraphPaneMixin() {
       get rampDomain() {
         return self.colorDomain ?? self.graphRegion
       },
+      // The lifted walks the graph on screen carries, or undefined when none
+      // is named or it carries none of those that were. A walk coloured by
+      // reference position reads the ramp whatever the node colour scheme.
+      get walkLift() {
+        const { graph } = self
+        return graph && self.walkLayers.length > 0
+          ? walkLift(
+              graph,
+              self.walkLayers,
+              computeReferenceRamp(graph, this.rampDomain),
+            )
+          : undefined
+      },
       // The scheme the renderer actually paints with, which is the raw prop
       // unless it is 'auto'. A bare getter returns a resolved value (root
       // CLAUDE.md): every consumer of a colour reads this one, and the two
@@ -1419,7 +1431,7 @@ export function GraphPaneMixin() {
           ? referenceStripBlocks(graph, {
               colorScheme: self.effectiveColorScheme,
               referenceRamp: self.referenceRamp,
-              walkNodes: self.walkHighlight?.nodeIds,
+              walkNodes: self.walkLift?.nodeIds,
             })
           : []
       },
@@ -1765,8 +1777,25 @@ export function GraphPaneMixin() {
       setRepeatKey(key: string) {
         self.repeatKey = key
       },
-      setHighlightedPath(name: string) {
-        self.highlightedPath = name
+      setWalkLayers(layers: WalkLayer[]) {
+        self.walkLayers = layers
+      },
+      // Lift the walks named, in that order, keeping the colour any of them
+      // already had
+      liftWalks(names: string[]) {
+        const had = new Map(self.walkLayers.map(l => [l.walk, l]))
+        self.walkLayers = names.map(walk => had.get(walk) ?? { walk })
+      },
+      toggleWalk(walk: string) {
+        const layers = self.walkLayers
+        self.walkLayers = layers.some(l => l.walk === walk)
+          ? layers.filter(l => l.walk !== walk)
+          : [...layers, { walk }]
+      },
+      setWalkColor(walk: string, color: Partial<WalkEncoding>) {
+        self.walkLayers = self.walkLayers.map(l =>
+          l.walk === walk ? { ...l, color: { ...l.color, ...color } } : l,
+        )
       },
       // Undefined restores the built-in ceiling. Nothing recomputes: the pane
       // reads canvasHeight and the drawing is placed by zoomToFit, which the
@@ -2816,7 +2845,7 @@ export function GraphPaneMixin() {
                 connectorThickness: self.connectorThickness,
                 drawPaths: self.effectiveDrawPaths,
                 nodeWidth: self.nodeWidth,
-                highlight: self.walkHighlight,
+                highlight: self.walkLift,
                 // Untracked, so a zoom does not eagerly rebuild geometry — the
                 // debounced viewportDirty bump drives the scale-dependent
                 // rebuild (flatness, arrow visibility, viewport culling), same
@@ -3002,21 +3031,46 @@ export function GraphPaneMixin() {
                   label: 'Walk',
                   subMenu: [
                     {
-                      type: 'radio' as const,
                       label: 'None',
-                      checked: self.highlightedPath === '',
                       onClick: () => {
-                        self.setHighlightedPath('')
+                        self.setWalkLayers([])
                       },
                     },
                     ...walks.map(walk => ({
-                      type: 'radio' as const,
+                      type: 'checkbox' as const,
                       label: walk.label,
-                      checked: self.highlightedPath === walk.name,
+                      checked: self.walkLayers.some(l => l.walk === walk.name),
                       onClick: () => {
-                        self.setHighlightedPath(walk.name)
+                        self.toggleWalk(walk.name)
                       },
                     })),
+                    ...(self.walkLift?.walks ?? []).map(lifted => ({
+                      label: `Colour ${walks.find(w => w.name === lifted.name)?.label ?? lifted.name}`,
+                      subMenu: [
+                        { type: 'subHeader' as const, label: 'Colour by' },
+                        ...WALK_FIELDS.map(field => ({
+                          type: 'radio' as const,
+                          label: field.label,
+                          checked: lifted.encoding.field === field.value,
+                          onClick: () => {
+                            self.setWalkColor(lifted.name, {
+                              field: field.value,
+                            })
+                          },
+                        })),
+                        { type: 'subHeader' as const, label: 'Palette' },
+                        ...WALK_SCHEMES.map(scheme => ({
+                          type: 'radio' as const,
+                          label: scheme.label,
+                          checked: lifted.encoding.scheme === scheme.value,
+                          onClick: () => {
+                            self.setWalkColor(lifted.name, {
+                              scheme: scheme.value,
+                            })
+                          },
+                        })),
+                      ],
+                    })),
                   ],
                 },
               ]

package/src/GraphGenomeView/viewModel.ts

@@ -1,3 +1,4 @@
+import { layoutModeByValue } from '@jbrowse/bandage-core/layoutModes'
 import { readConfObject } from '@jbrowse/core/configuration'
 import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes/models'
 import { getSession } from '@jbrowse/core/util'
@@ -10,6 +11,7 @@ import {
 } from '../graphTrackConfig'
 
 import type { SubgraphRegion } from '../GetSubgraph'
+import type { LayoutModeValue } from '@jbrowse/bandage-core/layoutModes'
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration'
 import type { FileLocation } from '@jbrowse/core/util/types'
 import type { Instance } from '@jbrowse/mobx-state-tree'
@@ -109,6 +111,9 @@ export default function stateModelFactory() {
             return self.cutSubgraph(readConfObject(track, 'adapter'), region, {
               hops: self.subgraphContext,
               haplotypes: self.subgraphHaplotypes,
+              ...(layoutModeByValue(self.chosenLayoutMode).wholeWalks
+                ? { snarls: 'overlapping' as const }
+                : {}),
             })
           }
           return undefined
@@ -119,6 +124,16 @@ export default function stateModelFactory() {
       retryLoad() {
         void self.load()
       },
+      // walk rows measures whole walks, which a GBZ cut only follows when
+      // asked, so entering or leaving it cuts the track again
+      switchLayout(mode: LayoutModeValue) {
+        const from = layoutModeByValue(self.chosenLayoutMode)
+        self.setLayoutMode(mode)
+        return self.loadedTrackId &&
+          layoutModeByValue(mode).wholeWalks !== from.wholeWalks
+          ? self.load()
+          : self.recomputeLayout()
+      },
       // Here rather than when the rendering backend starts: the canvas only
       // mounts once there is a graph, so a view whose graph must be fetched
       // would never fetch it.

package/src/LinearGraphDisplay/LinearGraphDisplay.test.ts

@@ -81,6 +81,7 @@ function syntheticGraph(
 interface Cut {
   tier: SubgraphTier
   region: SubgraphRegion
+  snarls?: string
 }
 
 const FORCE_LAYOUT = {
@@ -234,7 +235,7 @@ function createEnvironment({ tiered = true, paths = false } = {}) {
       method: string,
       args: {
         region: SubgraphRegion
-        opts?: { tier?: SubgraphTier }
+        opts?: { tier?: SubgraphTier; snarls?: string }
         signal?: AbortSignal
       },
     ) => {
@@ -247,7 +248,11 @@ function createEnvironment({ tiered = true, paths = false } = {}) {
       if (method !== 'GetSubgraph') {
         return Promise.reject(new Error(`Unexpected RPC: ${method}`))
       }
-      const cut = { tier: args.opts?.tier ?? 'fine', region: args.region }
+      const cut = {
+        tier: args.opts?.tier ?? 'fine',
+        region: args.region,
+        snarls: args.opts?.snarls,
+      }
       cuts.push(cut)
       if (args.signal) {
         signals.push(args.signal)
@@ -604,6 +609,22 @@ test('walk rows fit their own bars in the track, since a walk can be longer than
   expect(pane.viewportOwner).toBe('fit')
 })
 
+test('walk rows cut every snarl a walk takes past the window, so a walk comes whole', async () => {
+  const { pane, cuts } = await shownGraph({ paths: true })
+  await pane.switchLayout('force')
+  await wait(SETTLE_MS)
+  const before = cuts.length
+  expect(cuts.at(-1)!.snarls).toBeUndefined()
+  await pane.switchLayout('walkrows')
+  await wait(SETTLE_MS)
+  expect(cuts).toHaveLength(before + 1)
+  expect(cuts.at(-1)!.snarls).toBe('overlapping')
+  await pane.switchLayout('force')
+  await wait(SETTLE_MS)
+  expect(cuts).toHaveLength(before + 2)
+  expect(cuts.at(-1)!.snarls).toBeUndefined()
+})
+
 test('a launch in the force layout cuts the window alone', async () => {
   const { view, cuts } = createEnvironment()
   view.zoomTo(60_000 / WIDTH_PX)

package/src/LinearGraphDisplay/model.ts

@@ -220,6 +220,9 @@ export function stateModelFactory(configSchema: LinearGraphDisplayConfigModel) {
             hops: coarse ? 0 : self.subgraphContext,
             haplotypes: self.chosenHaplotypes,
             tier: coarse ? 'coarse' : undefined,
+            ...(layoutModeByValue(self.chosenLayoutMode).wholeWalks
+              ? { snarls: 'overlapping' as const }
+              : {}),
           })
         },
       }))
@@ -257,13 +260,15 @@ export function stateModelFactory(configSchema: LinearGraphDisplayConfigModel) {
           return true
         },
         switchLayout(mode: LayoutModeValue) {
-          const margins = layoutModeByValue(self.chosenLayoutMode).cutMargins
+          const from = layoutModeByValue(self.chosenLayoutMode)
           self.setLayoutMode(mode)
+          const to = layoutModeByValue(mode)
           const seen = self.host ? hostWindow(self.host) : undefined
           if (
             seen &&
             !self.regionTooLarge &&
-            layoutModeByValue(mode).cutMargins !== margins
+            (to.cutMargins !== from.cutMargins ||
+              to.wholeWalks !== from.wholeWalks)
           ) {
             return self.recutAt(seen)
           }

package/src/version.ts

@@ -1 +1 @@
-export const version = '4.0.19'
+export const version = '4.0.21'