Fix height of Hi-C track, and add adjust-to-height

plugins/hic/src/HicRenderer/HicRenderer.tsx

@@ -1,4 +1,3 @@
-import { readConfObject } from '@jbrowse/core/configuration'
 import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache'
 import ServerSideRendererType from '@jbrowse/core/pluggableElementTypes/renderers/ServerSideRendererType'
 import { renderToAbstractCanvas } from '@jbrowse/core/util/offscreenCanvasUtils'
@@ -37,6 +36,7 @@ export interface RenderArgsDeserialized
   highResolutionScaling: number
   resolution: number
   adapterConfig: AnyConfigurationModel
+  displayHeight?: number
 }
 
 export interface RenderArgsDeserializedWithFeatures
@@ -53,16 +53,18 @@ export default class HicRenderer extends ServerSideRendererType {
   supportsSVG = true
 
   async render(renderProps: RenderArgsDeserialized) {
-    const { config, regions, bpPerPx } = renderProps
+    const { displayHeight, regions, bpPerPx } = renderProps
     const region = regions[0]!
     const width = (region.end - region.start) / bpPerPx
-    const height = readConfObject(config, 'maxHeight')
+    const hyp = width / 2
+    const height = displayHeight ?? hyp
     const features = await this.getFeatures(renderProps)
 
     const { makeImageData } = await import('./makeImageData')
     const res = await renderToAbstractCanvas(width, height, renderProps, ctx =>
       makeImageData(ctx, {
         ...renderProps,
+        yScalar: height / Math.max(height, hyp),
         features,
         pluginManager: this.pluginManager,
       }),

plugins/hic/src/HicRenderer/makeImageData.ts

@@ -26,7 +26,10 @@ export interface RenderArgs extends ServerSideRenderArgs {
 
 export async function makeImageData(
   ctx: CanvasRenderingContext2D,
-  props: RenderArgsDeserializedWithFeatures & { pluginManager: PluginManager },
+  props: RenderArgsDeserializedWithFeatures & {
+    yScalar: number
+    pluginManager: PluginManager
+  },
 ) {
   const {
     features,
@@ -40,6 +43,7 @@ export async function makeImageData(
     colorScheme,
     regions,
     pluginManager,
+    yScalar,
   } = props
 
   const { statusCallback = () => {} } = props
@@ -93,6 +97,9 @@ export async function makeImageData(
     const scale = useLogScale
       ? scaleSequentialLog(x1).domain([1, m])
       : scaleSequential(x1).domain([0, m])
+    if (yScalar) {
+      ctx.scale(1, yScalar)
+    }
     ctx.save()
 
     if (region.reversed === true) {

plugins/hic/src/LinearHicDisplay/model.ts

@@ -45,6 +45,10 @@ export default function stateModelFactory(
          * #property
          */
         activeNormalization: 'KR',
+        /**
+         * #property
+         */
+        mode: 'triangular',
       }),
     )
     .volatile(() => ({
@@ -87,6 +91,7 @@ export default function stateModelFactory(
           return {
             ...superRenderProps(),
             config,
+            displayHeight: self.mode === 'adjust' ? self.height : undefined,
             normalization: self.activeNormalization,
             rpcDriverName: self.rpcDriverName,
             displayModel: self,
@@ -128,12 +133,18 @@ export default function stateModelFactory(
       setAvailableNormalizations(f: string[]) {
         self.availableNormalizations = f
       },
+      /**
+       * #action
+       */
+      setMode(arg: string) {
+        self.mode = arg
+      },
     }))
     .views(self => {
       const { trackMenuItems: superTrackMenuItems } = self
       return {
         /**
-         * #getter
+         * #method
          */
         trackMenuItems() {
           return [
@@ -146,36 +157,67 @@ export default function stateModelFactory(
                 self.setUseLogScale(!self.useLogScale)
               },
             },
+            {
+              label: 'Rendering mode',
+              type: 'subMenu',
+              subMenu: [
+                {
+                  label: 'Triangular',
+                  type: 'radio',
+                  checked: self.mode === 'triangular',
+                  onClick: () => {
+                    self.setMode('triangular')
+                  },
+                },
+                {
+                  label: 'Adjust to height of display',
+                  type: 'radio',
+                  checked: self.mode === 'adjust',
+                  onClick: () => {
+                    self.setMode('adjust')
+                  },
+                },
+              ],
+            },
             {
               label: 'Color scheme',
               type: 'subMenu',
               subMenu: [
                 {
                   label: 'Fall',
+                  type: 'radio',
+                  checked: self.colorScheme === 'fall',
                   onClick: () => {
                     self.setColorScheme('fall')
                   },
                 },
                 {
                   label: 'Viridis',
+                  type: 'radio',
+                  checked: self.colorScheme === 'viridis',
                   onClick: () => {
                     self.setColorScheme('viridis')
                   },
                 },
                 {
                   label: 'Juicebox',
+                  type: 'radio',
+                  checked: self.colorScheme === 'juicebox',
                   onClick: () => {
                     self.setColorScheme('juicebox')
                   },
                 },
                 {
-                  label: 'Clear',
+                  label: 'Default',
+                  type: 'radio',
+                  checked: self.colorScheme === undefined,
                   onClick: () => {
                     self.setColorScheme(undefined)
                   },
                 },
               ],
             },
+
             {
               label: 'Resolution',
               subMenu: [
@@ -199,7 +241,7 @@ export default function stateModelFactory(
                     label: 'Normalization scheme',
                     subMenu: self.availableNormalizations.map(norm => ({
                       label: norm,
-                      type: 'checkbox',
+                      type: 'radio',
                       checked: norm === self.activeNormalization,
                       onClick: () => {
                         self.setActiveNormalization(norm)