@jbrowse/plugin-linear-genome-view 2.5.0 → 2.6.1

package/esm/index.js

@@ -44,7 +44,7 @@ export default class LinearGenomeViewPlugin extends Plugin {
     }
 }
 export { configSchemaFactory as linearBareDisplayConfigSchemaFactory } from './LinearBareDisplay';
-export { BlockMsg, baseLinearDisplayConfigSchema, BaseLinearDisplayComponent, BaseLinearDisplay, } from './BaseLinearDisplay';
+export { baseLinearDisplayConfigSchema, BaseLinearDisplay, BlockMsg, BaseLinearDisplayComponent, TrackHeightMixin, FeatureDensityMixin, TooLargeMessage, } from './BaseLinearDisplay';
 export { RefNameAutocomplete, SearchBox, } from './LinearGenomeView';
 export { renderToSvg, SVGTracks, totalHeight, SVGRuler, } from './LinearGenomeView/svgcomponents/SVGLinearGenomeView';
 export { configSchema as linearBasicDisplayConfigSchemaFactory, modelFactory as linearBasicDisplayModelFactory, } from './LinearBasicDisplay';

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,OAAO,EAAwB,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAEhF,QAAQ;AACR,OAAO,aAAa,MAAM,+BAA+B,CAAA;AAEzD,SAAS;AACT,OAAO,EACL,iBAAiB,EACjB,0BAA0B,EAC1B,6BAA6B,GAC9B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,kBAAkB,MAAM,qBAAqB,CAAA;AACpD,OAAO,iBAAiB,EAAE,EACxB,SAAS,EACT,YAAY,EACZ,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAE3B,OAAO,mBAAmB,MAAM,sBAAsB,CAAA;AAEtD,OAAO,aAAa,MAAM,gBAAgB,CAAA;AAC1C,OAAO,WAAW,MAAM,cAAc,CAAA;AACtC,OAAO,uBAAuB,MAAM,0BAA0B,CAAA;AAE9D,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,MAAM;IAA1D;;QACE,SAAI,GAAG,wBAAwB,CAAA;QAE/B,YAAO,GAAG;YACR,0BAA0B;YAC1B,iBAAiB;YACjB,6BAA6B;YAC7B,SAAS;YACT,YAAY;YACZ,gBAAgB;SACjB,CAAA;IAsBH,CAAC;IApBC,OAAO,CAAC,aAA4B;QAClC,aAAa,CAAC,aAAa,CAAC,CAAA;QAC5B,WAAW,CAAC,aAAa,CAAC,CAAA;QAC1B,mBAAmB,CAAC,aAAa,CAAC,CAAA;QAClC,iBAAiB,CAAC,aAAa,CAAC,CAAA;QAChC,kBAAkB,CAAC,aAAa,CAAC,CAAA;QACjC,uBAAuB,CAAC,aAAa,CAAC,CAAA;IACxC,CAAC;IAED,SAAS,CAAC,aAA4B;QACpC,IAAI,qBAAqB,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE;YAClD,aAAa,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,EAAE;gBAC/C,KAAK,EAAE,oBAAoB;gBAC3B,IAAI,EAAE,aAAa;gBACnB,OAAO,EAAE,CAAC,OAA6B,EAAE,EAAE;oBACzC,OAAO,CAAC,OAAO,CAAC,kBAAkB,EAAE,EAAE,CAAC,CAAA;gBACzC,CAAC;aACF,CAAC,CAAA;SACH;IACH,CAAC;CACF;AAID,OAAO,EAAE,mBAAmB,IAAI,oCAAoC,EAAE,MAAM,qBAAqB,CAAA;AACjG,OAAO,EACL,QAAQ,EACR,6BAA6B,EAC7B,0BAA0B,EAC1B,iBAAiB,GAClB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAEL,mBAAmB,EAEnB,SAAS,GACV,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,QAAQ,GACT,MAAM,sDAAsD,CAAA;AAC7D,OAAO,EACL,YAAY,IAAI,qCAAqC,EACrD,YAAY,IAAI,8BAA8B,GAC/C,MAAM,sBAAsB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,sBAAsB,CAAA;AAEzC,OAAO,EAAwB,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAEhF,QAAQ;AACR,OAAO,aAAa,MAAM,+BAA+B,CAAA;AAEzD,SAAS;AACT,OAAO,EACL,iBAAiB,EACjB,0BAA0B,EAC1B,6BAA6B,GAC9B,MAAM,qBAAqB,CAAA;AAC5B,OAAO,kBAAkB,MAAM,qBAAqB,CAAA;AACpD,OAAO,iBAAiB,EAAE,EACxB,SAAS,EACT,YAAY,EACZ,gBAAgB,GACjB,MAAM,oBAAoB,CAAA;AAE3B,OAAO,mBAAmB,MAAM,sBAAsB,CAAA;AACtD,OAAO,aAAa,MAAM,gBAAgB,CAAA;AAC1C,OAAO,WAAW,MAAM,cAAc,CAAA;AACtC,OAAO,uBAAuB,MAAM,0BAA0B,CAAA;AAE9D,MAAM,CAAC,OAAO,OAAO,sBAAuB,SAAQ,MAAM;IAA1D;;QACE,SAAI,GAAG,wBAAwB,CAAA;QAE/B,YAAO,GAAG;YACR,0BAA0B;YAC1B,iBAAiB;YACjB,6BAA6B;YAC7B,SAAS;YACT,YAAY;YACZ,gBAAgB;SACjB,CAAA;IAsBH,CAAC;IApBC,OAAO,CAAC,aAA4B;QAClC,aAAa,CAAC,aAAa,CAAC,CAAA;QAC5B,WAAW,CAAC,aAAa,CAAC,CAAA;QAC1B,mBAAmB,CAAC,aAAa,CAAC,CAAA;QAClC,iBAAiB,CAAC,aAAa,CAAC,CAAA;QAChC,kBAAkB,CAAC,aAAa,CAAC,CAAA;QACjC,uBAAuB,CAAC,aAAa,CAAC,CAAA;IACxC,CAAC;IAED,SAAS,CAAC,aAA4B;QACpC,IAAI,qBAAqB,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE;YAClD,aAAa,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC,KAAK,CAAC,EAAE;gBAC/C,KAAK,EAAE,oBAAoB;gBAC3B,IAAI,EAAE,aAAa;gBACnB,OAAO,EAAE,CAAC,OAA6B,EAAE,EAAE;oBACzC,OAAO,CAAC,OAAO,CAAC,kBAAkB,EAAE,EAAE,CAAC,CAAA;gBACzC,CAAC;aACF,CAAC,CAAA;SACH;IACH,CAAC;CACF;AAQD,OAAO,EAAE,mBAAmB,IAAI,oCAAoC,EAAE,MAAM,qBAAqB,CAAA;AACjG,OAAO,EACL,6BAA6B,EAC7B,iBAAiB,EACjB,QAAQ,EACR,0BAA0B,EAC1B,gBAAgB,EAChB,mBAAmB,EACnB,eAAe,GAChB,MAAM,qBAAqB,CAAA;AAC5B,OAAO,EAGL,mBAAmB,EACnB,SAAS,GACV,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EACL,WAAW,EACX,SAAS,EACT,WAAW,EACX,QAAQ,GACT,MAAM,sDAAsD,CAAA;AAC7D,OAAO,EACL,YAAY,IAAI,qCAAqC,EACrD,YAAY,IAAI,8BAA8B,GAC/C,MAAM,sBAAsB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-linear-genome-view",
-  "version": "2.5.0",
+  "version": "2.6.1",
   "description": "JBrowse 2 linear genome view",
   "keywords": [
     "jbrowse",
@@ -66,5 +66,5 @@
     "access": "public"
   },
   "module": "esm/index.js",
-  "gitHead": "d1ca073996d008f0fe9a52f7c1a47ae649dcfdaf"
+  "gitHead": "1cbe7ba097fb2d2763c776e5e429e4670cdd583c"
 }

package/src/BaseLinearDisplay/index.ts

@@ -1,7 +1,8 @@
 export { default as baseLinearDisplayConfigSchema } from './models/configSchema'
-export { BaseLinearDisplay } from './models/BaseLinearDisplayModel'
 export type { BlockModel } from './models/serverSideRenderedBlock'
+export { BaseLinearDisplay } from './models/BaseLinearDisplayModel'
 export type {
+  ExportSvgDisplayOptions,
   BaseLinearDisplayModel,
   BaseLinearDisplayStateModel,
 } from './models/BaseLinearDisplayModel'
@@ -10,3 +11,6 @@ export {
   Tooltip,
   BlockMsg,
 } from './components/BaseLinearDisplay'
+export { default as TrackHeightMixin } from './models/TrackHeightMixin'
+export { default as FeatureDensityMixin } from './models/FeatureDensityMixin'
+export { default as TooLargeMessage } from './components/TooLargeMessage'

package/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -2,23 +2,18 @@
 import React from 'react'
 import { ThemeOptions } from '@mui/material'
 import { BaseDisplay } from '@jbrowse/core/pluggableElementTypes/models'
-import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
+import { ConfigurationReference } from '@jbrowse/core/configuration'
 import { MenuItem } from '@jbrowse/core/ui'
 import {
-  isAbortException,
   getContainingView,
   getContainingTrack,
   getSession,
-  getViewParams,
   isSelectionContainer,
   isSessionModelWithWidgets,
   isFeature,
   Feature,
-  ReactRendering,
 } from '@jbrowse/core/util'
-import { FeatureDensityStats } from '@jbrowse/core/data_adapters/BaseAdapter'
 import { BaseBlock } from '@jbrowse/core/util/blockTypes'
-import { Region } from '@jbrowse/core/util/types'
 import CompositeMap from '@jbrowse/core/util/compositeMap'
 import { getParentRenderProps } from '@jbrowse/core/util/tracks'
 import { autorun } from 'mobx'
@@ -30,10 +25,11 @@ import MenuOpenIcon from '@mui/icons-material/MenuOpen'
 // locals
 import { LinearGenomeViewModel, ExportSvgOptions } from '../../LinearGenomeView'
 import { Tooltip } from '../components/BaseLinearDisplay'
-import TooLargeMessage from '../components/TooLargeMessage'
-import BlockState, { renderBlockData } from './serverSideRenderedBlock'
-import { getId, getDisplayStr, getFeatureDensityStatsPre } from './util'
+import BlockState from './serverSideRenderedBlock'
 import configSchema from './configSchema'
+import renderBaseLinearDisplaySvg from './renderSvg'
+import TrackHeightMixin from './TrackHeightMixin'
+import FeatureDensityMixin from './FeatureDensityMixin'
 
 type LGV = LinearGenomeViewModel
 
@@ -47,10 +43,14 @@ export interface Layout {
 
 type LayoutRecord = [number, number, number, number]
 
-const minDisplayHeight = 20
+export interface ExportSvgDisplayOptions extends ExportSvgOptions {
+  overrideHeight: number
+  theme: ThemeOptions
+}
 
 /**
  * #stateModel BaseLinearDisplay
+ * #category display
  * extends `BaseDisplay`
  */
 function stateModelFactory() {
@@ -58,30 +58,14 @@ function stateModelFactory() {
     .compose(
       'BaseLinearDisplay',
       BaseDisplay,
+      TrackHeightMixin(),
+      FeatureDensityMixin(),
       types.model({
-        /**
-         * #property
-         */
-        heightPreConfig: types.maybe(
-          types.refinement(
-            'displayHeight',
-            types.number,
-            n => n >= minDisplayHeight,
-          ),
-        ),
         /**
          * #property
          * updated via autorun
          */
         blockState: types.map(BlockState),
-        /**
-         * #property
-         */
-        userBpPerPxLimit: types.maybe(types.number),
-        /**
-         * #property
-         */
-        userByteSizeLimit: types.maybe(types.number),
         /**
          * #property
          */
@@ -89,20 +73,10 @@ function stateModelFactory() {
       }),
     )
     .volatile(() => ({
-      currBpPerPx: 0,
-      scrollTop: 0,
-      message: '',
       featureIdUnderMouse: undefined as undefined | string,
       contextMenuFeature: undefined as undefined | Feature,
-      featureDensityStatsP: undefined as
-        | undefined
-        | Promise<FeatureDensityStats>,
-      featureDensityStats: undefined as undefined | FeatureDensityStats,
     }))
     .views(self => ({
-      get height() {
-        return self.heightPreConfig ?? (getConf(self, 'height') as number)
-      },
       /**
        * #getter
        */
@@ -113,12 +87,11 @@ function stateModelFactory() {
        * #getter
        */
       get blockDefinitions() {
-        const { blockType } = this
         const view = getContainingView(self) as LGV
         if (!view.initialized) {
           throw new Error('view not initialized yet')
         }
-        return view[blockType]
+        return view[this.blockType]
       },
     }))
     .views(self => ({
@@ -217,152 +190,9 @@ function stateModelFactory() {
         })
         return ret
       },
-
-      /**
-       * #getter
-       */
-      get currentBytesRequested() {
-        return self.featureDensityStats?.bytes || 0
-      },
-
-      /**
-       * #getter
-       */
-      get currentFeatureScreenDensity() {
-        const view = getContainingView(self) as LGV
-        return (self.featureDensityStats?.featureDensity || 0) * view.bpPerPx
-      },
-
-      /**
-       * #getter
-       */
-      get maxFeatureScreenDensity() {
-        return getConf(self, 'maxFeatureScreenDensity')
-      },
-      /**
-       * #getter
-       */
-      get featureDensityStatsReady() {
-        return !!self.featureDensityStats || !!self.userBpPerPxLimit
-      },
-
-      /**
-       * #getter
-       */
-      get maxAllowableBytes() {
-        return (
-          self.userByteSizeLimit ||
-          self.featureDensityStats?.fetchSizeLimit ||
-          (getConf(self, 'fetchSizeLimit') as number)
-        )
-      },
     }))
-    .actions(self => ({
-      /**
-       * #action
-       */
-      setMessage(message: string) {
-        self.message = message
-      },
-    }))
-    .actions(self => ({
-      afterAttach() {
-        // watch the parent's blocks to update our block state when they change,
-        // then we recreate the blocks on our own model (creating and deleting to
-        // match the parent blocks)
-        addDisposer(
-          self,
-          autorun(() => {
-            const blocksPresent: { [key: string]: boolean } = {}
-            const view = getContainingView(self) as LGV
-            if (view.initialized) {
-              self.blockDefinitions.contentBlocks.forEach(block => {
-                blocksPresent[block.key] = true
-                if (!self.blockState.has(block.key)) {
-                  this.addBlock(block.key, block)
-                }
-              })
-              self.blockState.forEach((_, key) => {
-                if (!blocksPresent[key]) {
-                  this.deleteBlock(key)
-                }
-              })
-            }
-          }),
-        )
-      },
-
-      /**
-       * #action
-       */
-      async getFeatureDensityStats() {
-        if (!self.featureDensityStatsP) {
-          self.featureDensityStatsP = getFeatureDensityStatsPre(self).catch(
-            e => {
-              this.setFeatureDensityStatsP(undefined)
-              throw e
-            },
-          )
-        }
-        return self.featureDensityStatsP
-      },
-
-      /**
-       * #action
-       */
-      setFeatureDensityStatsP(arg: any) {
-        self.featureDensityStatsP = arg
-      },
-
-      /**
-       * #action
-       */
-      setFeatureDensityStats(featureDensityStats?: FeatureDensityStats) {
-        self.featureDensityStats = featureDensityStats
-      },
-      /**
-       * #action
-       */
-      clearFeatureDensityStats() {
-        self.featureDensityStatsP = undefined
-        self.featureDensityStats = undefined
-      },
-      /**
-       * #action
-       */
-      setHeight(displayHeight: number) {
-        self.heightPreConfig =
-          displayHeight > minDisplayHeight ? displayHeight : minDisplayHeight
-        return self.height
-      },
-      /**
-       * #action
-       */
-      resizeHeight(distance: number) {
-        const oldHeight = self.height
-        const newHeight = this.setHeight(self.height + distance)
-        return newHeight - oldHeight
-      },
-
-      /**
-       * #action
-       */
-      setScrollTop(scrollTop: number) {
-        self.scrollTop = scrollTop
-      },
-
-      /**
-       * #action
-       */
-      setFeatureDensityStatsLimit(stats?: FeatureDensityStats) {
-        const view = getContainingView(self) as LGV
-        if (stats?.bytes) {
-          self.userByteSizeLimit = stats.bytes
-        } else {
-          self.userBpPerPxLimit = view.bpPerPx
-        }
-      },
 
+    .actions(self => ({
       /**
        * #action
        */
@@ -375,12 +205,7 @@ function stateModelFactory() {
           }),
         )
       },
-      /**
-       * #action
-       */
-      setCurrBpPerPx(n: number) {
-        self.currBpPerPx = n
-      },
+
       /**
        * #action
        */
@@ -421,12 +246,7 @@ function stateModelFactory() {
       setFeatureIdUnderMouse(feature?: string) {
         self.featureIdUnderMouse = feature
       },
-      /**
-       * #action
-       */
-      reload() {
-        ;[...self.blockState.values()].map(val => val.doReload())
-      },
+
       /**
        * #action
        */
@@ -434,45 +254,7 @@ function stateModelFactory() {
         self.contextMenuFeature = feature
       },
     }))
-    .views(self => ({
-      /**
-       * #getter
-       * region is too large if:
-       * - stats are ready
-       * - region is greater than 20kb (don't warn when zoomed in less than that)
-       * - and bytes is greater than max allowed bytes or density greater than max
-       *   density
-       */
-      get regionTooLarge() {
-        const view = getContainingView(self) as LGV
-        if (
-          !self.featureDensityStatsReady ||
-          view.dynamicBlocks.totalBp < 20_000
-        ) {
-          return false
-        }
-        return (
-          self.currentBytesRequested > self.maxAllowableBytes ||
-          (self.userBpPerPxLimit
-            ? view.bpPerPx > self.userBpPerPxLimit
-            : self.currentFeatureScreenDensity > self.maxFeatureScreenDensity)
-        )
-      },
-
-      /**
-       * #getter
-       * only shows a message of bytes requested is defined, the feature density
-       * based stats don't produce any helpful message besides to zoom in
-       */
-      get regionTooLargeReason() {
-        const req = self.currentBytesRequested
-        const max = self.maxAllowableBytes
 
-        return req && req > max
-          ? `Requested too much data (${getDisplayStr(req)})`
-          : ''
-      },
-    }))
     .actions(self => {
       const { reload: superReload } = self
 
@@ -482,99 +264,15 @@ function stateModelFactory() {
          */
         async reload() {
           self.setError()
-          const view = getContainingView(self) as LGV
-
-          // extra check for contentBlocks.length
-          // https://github.com/GMOD/jbrowse-components/issues/2694
-          if (!view.initialized || !view.staticBlocks.contentBlocks.length) {
-            return
-          }
-
-          try {
-            const featureDensityStats = await self.getFeatureDensityStats()
-
-            if (isAlive(self)) {
-              self.setFeatureDensityStats(featureDensityStats)
-              superReload()
-            }
-          } catch (e) {
-            console.error(e)
-            self.setError(e)
-          }
+          self.setCurrStatsBpPerPx(0)
+          self.clearFeatureDensityStats()
+          ;[...self.blockState.values()].map(val => val.doReload())
+          superReload()
         },
       }
     })
-    .actions(self => ({
-      afterAttach() {
-        // this autorun performs stats estimation
-        //
-        // the chain of events calls getFeatureDensityStats against the data
-        // adapter which by default uses featureDensity, but can also respond
-        // with a byte size estimate and fetch size limit (data adapter can
-        // define what is too much data)
-        addDisposer(
-          self,
-          autorun(async () => {
-            try {
-              const view = getContainingView(self) as LGV
-
-              // extra check for contentBlocks.length
-              // https://github.com/GMOD/jbrowse-components/issues/2694
-              if (
-                !view.initialized ||
-                !view.staticBlocks.contentBlocks.length
-              ) {
-                return
-              }
-
-              // don't re-estimate featureDensity even if zoom level changes,
-              // jbrowse1-style assume it's sort of representative
-              if (self.featureDensityStats?.featureDensity !== undefined) {
-                self.setCurrBpPerPx(view.bpPerPx)
-                return
-              }
-
-              // we estimate stats once at a given zoom level
-              if (view.bpPerPx === self.currBpPerPx) {
-                return
-              }
 
-              self.clearFeatureDensityStats()
-              self.setCurrBpPerPx(view.bpPerPx)
-              const featureDensityStats = await self.getFeatureDensityStats()
-              if (isAlive(self)) {
-                self.setFeatureDensityStats(featureDensityStats)
-              }
-            } catch (e) {
-              if (!isAbortException(e) && isAlive(self)) {
-                console.error(e)
-                self.setError(e)
-              }
-            }
-          }),
-        )
-      },
-    }))
     .views(self => ({
-      /**
-       * #method
-       */
-      regionCannotBeRenderedText(_region: Region) {
-        return self.regionTooLarge ? 'Force load to see features' : ''
-      },
-
-      /**
-       * #method
-       * @param region -
-       * @returns falsy if the region is fine to try rendering. Otherwise,
-       *  return a react node + string of text.
-       *  string of text describes why it cannot be rendered
-       *  react node allows user to force load at current setting
-       */
-      regionCannotBeRendered(_region: Region) {
-        return self.regionTooLarge ? <TooLargeMessage model={self} /> : null
-      },
-
       /**
        * #method
        */
@@ -606,11 +304,9 @@ function stateModelFactory() {
        * #method
        */
       renderProps() {
-        const view = getContainingView(self) as LGV
         return {
           ...getParentRenderProps(self),
-          notReady:
-            self.currBpPerPx !== view.bpPerPx || !self.featureDensityStatsReady,
+          notReady: !self.featureDensityStatsReady,
           rpcDriverName: self.rpcDriverName,
           displayModel: self,
           onFeatureClick(_: unknown, featureId?: string) {
@@ -657,91 +353,34 @@ function stateModelFactory() {
       /**
        * #method
        */
-      async renderSvg(
-        opts: ExportSvgOptions & {
-          overrideHeight: number
-          theme: ThemeOptions
-        },
-      ) {
-        const { height, id } = self
-        const { overrideHeight } = opts
-        const view = getContainingView(self) as LGV
-        const { offsetPx: viewOffsetPx, roundedDynamicBlocks, width } = view
-
-        const renderings = await Promise.all(
-          roundedDynamicBlocks.map(async block => {
-            const blockState = BlockState.create({
-              key: block.key,
-              region: block,
-            })
-
-            // regionCannotBeRendered can return jsx so look for plaintext
-            // version, or just get the default if none available
-            const cannotBeRenderedReason =
-              self.regionCannotBeRenderedText(block) ||
-              self.regionCannotBeRendered(block)
-
-            if (cannotBeRenderedReason) {
-              return [
-                block,
-                {
-                  reactElement: (
-                    <>
-                      <rect x={0} y={0} width={width} height={20} fill="#aaa" />
-                      <text x={0} y={15}>
-                        {cannotBeRenderedReason}
-                      </text>
-                    </>
-                  ),
-                },
-              ] as const
+      async renderSvg(opts: ExportSvgDisplayOptions) {
+        return renderBaseLinearDisplaySvg(self as BaseLinearDisplayModel, opts)
+      },
+      afterAttach() {
+        // watch the parent's blocks to update our block state when they change,
+        // then we recreate the blocks on our own model (creating and deleting to
+        // match the parent blocks)
+        addDisposer(
+          self,
+          autorun(() => {
+            const blocksPresent: { [key: string]: boolean } = {}
+            const view = getContainingView(self) as LGV
+            if (!view.initialized) {
+              return
             }
-
-            const { rpcManager, renderArgs, renderProps, rendererType } =
-              renderBlockData(blockState, self)
-
-            return [
-              block,
-              await rendererType.renderInClient(rpcManager, {
-                ...renderArgs,
-                ...renderProps,
-                viewParams: getViewParams(self, true),
-                exportSVG: opts,
-                theme: opts.theme || renderProps.theme,
-              }),
-            ] as const
+            self.blockDefinitions.contentBlocks.forEach(block => {
+              blocksPresent[block.key] = true
+              if (!self.blockState.has(block.key)) {
+                self.addBlock(block.key, block)
+              }
+            })
+            self.blockState.forEach((_, key) => {
+              if (!blocksPresent[key]) {
+                self.deleteBlock(key)
+              }
+            })
           }),
         )
-
-        return (
-          <>
-            {renderings.map(([block, rendering], index) => {
-              const { offsetPx, widthPx } = block
-              const offset = offsetPx - viewOffsetPx
-              const clipid = getId(id, index)
-
-              return (
-                <React.Fragment key={`frag-${index}`}>
-                  <defs>
-                    <clipPath id={clipid}>
-                      <rect
-                        x={0}
-                        y={0}
-                        width={widthPx}
-                        height={overrideHeight || height}
-                      />
-                    </clipPath>
-                  </defs>
-                  <g transform={`translate(${offset} 0)`}>
-                    <g clipPath={`url(#${clipid})`}>
-                      <ReactRendering rendering={rendering} />
-                    </g>
-                  </g>
-                </React.Fragment>
-              )
-            })}
-          </>
-        )
       },
     }))
     .preProcessSnapshot(snap => {