Adds option to auto-adjust the track height to show all features

packages/core/pluggableElementTypes/renderers/BoxRendererType.ts

@@ -15,7 +15,7 @@ import FeatureRendererType, {
   ResultsSerialized as FeatureResultsSerialized,
   ResultsDeserialized as FeatureResultsDeserialized,
 } from './FeatureRendererType'
-import { getLayoutId, Region, Feature } from '../../util'
+import { getLayoutId, Region, Feature, max } from '../../util'
 import { readConfObject, AnyConfigurationModel } from '../../configuration'
 import SerializableFilterChain from './util/serializableFilterChain'
 import RpcManager from '../../rpc/RpcManager'
@@ -102,6 +102,7 @@ export interface RenderArgsDeserialized extends FeatureRenderArgsDeserialized {
 
 export interface RenderResults extends FeatureRenderResults {
   layout: BaseLayout<Feature>
+  blockHeight: number
 }
 
 export interface ResultsSerialized extends FeatureResultsSerialized {
@@ -205,6 +206,15 @@ export default class BoxRendererType extends FeatureRendererType {
       (props.layout as undefined | BaseLayout<unknown>) ||
       this.createLayoutInWorker(props)
     const result = await super.render({ ...props, layout })
-    return { ...result, layout }
+
+    const rects = layout.getRectangles()
+    const blockHeight = max(
+      [...rects]
+        .filter(([key]) => [...result.features.keys()].includes(key))
+        .flatMap(rect => rect[1][3]), // only interested in the 'bottom' value
+      0,
+    )
+
+    return { ...result, layout, blockHeight }
   }
 }

plugins/alignments/src/LinearAlignmentsDisplay/models/model.tsx

@@ -230,6 +230,7 @@ function stateModelFactory(
        * #action
        */
       resizeHeight(distance: number) {
+        self.PileupDisplay.resizeHeight(distance)
         const oldHeight = self.height
         const newHeight = this.setHeight(self.height + distance)
         return newHeight - oldHeight
@@ -278,15 +279,6 @@ function stateModelFactory(
             self.setSNPCoverageHeight(self.SNPCoverageDisplay.height)
           }),
         )
-
-        addDisposer(
-          self,
-          autorun(() => {
-            self.PileupDisplay.setHeight(
-              self.height - self.SNPCoverageDisplay.height,
-            )
-          }),
-        )
       },
       /**
        * #action
@@ -359,6 +351,29 @@ function stateModelFactory(
       const { height, ...rest } = snap
       return { heightPreConfig: height, ...rest }
     })
+    .actions(self => ({
+      afterAttach() {
+        addDisposer(
+          self,
+          autorun(() => {
+            // Sets the heightPreConfig conditional to whether the user has the layout height setting on (impacts the PileupDisplay)
+            const { PileupDisplay, SNPCoverageDisplay } = self
+
+            const setting = PileupDisplay.adjustTrackLayoutHeightSetting
+
+            if (setting === 'dynamic' || setting === 'bound') {
+              self.setHeight(PileupDisplay.height + SNPCoverageDisplay.height)
+            }
+
+            if (setting === 'static') {
+              self.PileupDisplay.setHeight(
+                self.height - SNPCoverageDisplay.height,
+              )
+            }
+          }),
+        )
+      },
+    }))
 }
 
 export default stateModelFactory

plugins/alignments/src/LinearPileupDisplay/SharedLinearPileupDisplayMixin.ts

@@ -530,14 +530,35 @@ export function SharedLinearPileupDisplayMixin(
               ],
             },
             {
-              label: 'Set max height...',
+              label: 'Set max height',
               onClick: () => {
                 getSession(self).queueDialog(doneCallback => [
                   SetMaxHeightDialog,
                   { model: self, handleClose: doneCallback },
                 ])
               },
             },
+            {
+              label: 'Track height adjustment',
+              subMenu: [
+                {
+                  label: 'Static (resized, or configured height)',
+                  type: 'radio',
+                  checked: self.adjustTrackLayoutHeightSetting === 'static',
+                  onClick: () =>
+                    // @ts-expect-error
+                    self.setAdjustTrackLayoutHeightSetting('static'),
+                },
+                {
+                  label: 'Dynamic (auto-adjust to show all features)',
+                  type: 'radio',
+                  checked: self.adjustTrackLayoutHeightSetting === 'dynamic',
+                  onClick: () =>
+                    // @ts-expect-error
+                    self.setAdjustTrackLayoutHeightSetting('dynamic'),
+                },
+              ],
+            },
           ]
         },
       }

plugins/alignments/src/LinearPileupDisplay/model.ts

@@ -60,7 +60,11 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
          * #property
          */
         mismatchAlpha: types.maybe(types.boolean),
-
+        /**
+         * #property
+         * setting to auto-adjust the layout height of tracks
+         */
+        adjustTrackLayoutHeight: types.optional(types.string, 'static'),
         /**
          * #property
          */
@@ -164,6 +168,12 @@ function stateModelFactory(configSchema: AnyConfigurationSchemaType) {
         self.sortReady = false
         self.featureHeight = n
       },
+      /**
+       * #action
+       */
+      setAdjustTrackLayoutHeightSetting(setting: 'static' | 'dynamic') {
+        self.adjustTrackLayoutHeight = setting
+      },
     }))
     .actions(self => {
       // resets the sort object and refresh whole display on reload

plugins/linear-genome-view/src/BaseLinearDisplay/models/BaseLinearDisplayModel.tsx

@@ -101,6 +101,27 @@ function stateModelFactory() {
       },
     }))
     .views(self => ({
+      /**
+       * #getter
+       * array of the current block heights rendered
+       */
+      get currentLayoutBlockHeights() {
+        const view = getContainingView(self) as LinearGenomeViewModel
+        return view.initialized
+          ? self.blockDefinitions.contentBlocks.map(
+              block => self.blockState.get(block.key)?.blockHeight,
+            )
+          : []
+      },
+
+      /**
+       * #getter
+       * returns true if all blocks are defined
+       */
+      get allLayoutBlocksRendered() {
+        return this.currentLayoutBlockHeights.every(b => b !== undefined)
+      },
+
       /**
        * #getter
        * how many milliseconds to wait for the display to

plugins/linear-genome-view/src/BaseLinearDisplay/models/TrackHeightMixin.tsx

@@ -1,5 +1,7 @@
+import { addDisposer, types } from 'mobx-state-tree'
 import { getConf } from '@jbrowse/core/configuration'
-import { types } from 'mobx-state-tree'
+import { getSession, max } from '@jbrowse/core/util'
+import { autorun } from 'mobx'
 
 const minDisplayHeight = 20
 
@@ -13,27 +15,52 @@
       /**
        * #property
        */
-      heightPreConfig: types.maybe(
-        types.refinement(
-          'displayHeight',
-          types.number,
-          n => n >= minDisplayHeight,
-        ),
-      ),
+      heightPreConfig: types.number,
     })
     .volatile(() => ({
       /**
-       * #property
+       * #volatile
        */
       scrollTop: 0,
     }))
     .views(self => ({
+      /**
+       * #getter
+       * returns the value of the track height setting from the view model
+       */
+      get adjustTrackLayoutHeightSetting() {
+        // @ts-ignore
+        const { adjustTrackLayoutHeight } = self
+
+        return adjustTrackLayoutHeight
+      },
+      /**
+       * #getter
+       * the max height between the rendered blocks and the configured height
+       */
+      get maxLayoutBlockHeight() {
+        // @ts-expect-error
+        const confHeight = getConf(self, 'height') as number
+        // @ts-expect-error
+        return max(self.currentLayoutBlockHeights, confHeight)
+      },
+      /**
+       * #getter
+       * returns the height of the track as a combination of the config and the
+       * settings
+       */
       get height() {
         // @ts-expect-error
         return self.heightPreConfig ?? (getConf(self, 'height') as number)
       },
     }))
     .actions(self => ({
+      notifyStaticSettingChange() {
+        getSession(self).notify(
+          'LGV track height setting has changed to Static to use your manually set height.',
+          'info',
+        )
+      },
       /**
        * #action
        */
@@ -51,9 +78,35 @@
        * #action
        */
       resizeHeight(distance: number) {
+        // if the user resizes their height, we want the setting to turn off
+        // and maintain their set height
+        if (self.adjustTrackLayoutHeightSetting !== 'static') {
+          // @ts-ignore
+          self.setAdjustTrackLayoutHeightSetting('static')
+          this.notifyStaticSettingChange()
+        }
         const oldHeight = self.height
         const newHeight = this.setHeight(self.height + distance)
         return newHeight - oldHeight
       },
     }))
+    .actions(self => ({
+      afterAttach() {
+        addDisposer(
+          self,
+          autorun(() => {
+            // @ts-expect-error
+            if (self.allLayoutBlocksRendered) {
+              switch (self.adjustTrackLayoutHeightSetting) {
+                case 'dynamic':
+                  self.setHeight(self.maxLayoutBlockHeight)
+                  break
+                default:
+                  break
+              }
+            }
+          }),
+        )
+      },
+    }))
 }

plugins/linear-genome-view/src/BaseLinearDisplay/models/serverSideRenderedBlock.ts

@@ -47,6 +47,7 @@ const blockState = types
     reactElement: undefined as React.ReactElement | undefined,
     features: undefined as Map<string, Feature> | undefined,
     layout: undefined as any,
+    blockHeight: undefined as number | undefined,
     status: '',
     error: undefined as unknown,
     message: undefined as string | undefined,
@@ -97,6 +98,7 @@ const blockState = types
         self.reactElement = undefined
         self.features = undefined
         self.layout = undefined
+        self.blockHeight = undefined
         self.error = undefined
         self.maxHeightReached = false
         self.renderProps = undefined
@@ -111,6 +113,7 @@ const blockState = types
         self.reactElement = undefined
         self.features = undefined
         self.layout = undefined
+        self.blockHeight = undefined
         self.error = undefined
         self.maxHeightReached = false
         self.renderProps = undefined
@@ -122,6 +125,7 @@ const blockState = types
               reactElement: React.ReactElement
               features: Map<string, Feature>
               layout: any
+              blockHeight: number
               maxHeightReached: boolean
               renderProps: any
             }
@@ -134,6 +138,7 @@ const blockState = types
           reactElement,
           features,
           layout,
+          blockHeight,
           maxHeightReached,
           renderProps,
         } = props
@@ -142,6 +147,7 @@ const blockState = types
         self.reactElement = reactElement
         self.features = features
         self.layout = layout
+        self.blockHeight = blockHeight
         self.error = undefined
         self.maxHeightReached = maxHeightReached
         self.renderProps = renderProps
@@ -158,6 +164,7 @@ const blockState = types
         self.reactElement = undefined
         self.features = undefined
         self.layout = undefined
+        self.blockHeight = undefined
         self.maxHeightReached = false
         self.error = error
         self.renderProps = undefined
@@ -172,6 +179,7 @@ const blockState = types
         self.reactElement = undefined
         self.features = undefined
         self.layout = undefined
+        self.blockHeight = undefined
         self.error = undefined
         self.message = undefined
         self.maxHeightReached = false
@@ -302,7 +310,7 @@ async function renderBlockEffect(
     return undefined
   }
 
-  const { reactElement, features, layout, maxHeightReached } =
+  const { reactElement, features, layout, blockHeight, maxHeightReached } =
     await rendererType.renderInClient(rpcManager, {
       ...renderArgs,
       ...renderProps,
@@ -313,6 +321,7 @@ async function renderBlockEffect(
     reactElement,
     features,
     layout,
+    blockHeight,
     maxHeightReached,
     renderProps,
   }