Create system for visualizing linkage disequilibrium from VCF and PLINK output files (#5420)

Author: cmdcolin

.ignore

@@ -25,3 +25,4 @@ plugins/variants/src/d3-hierarchy2
 benchmarks
 products/jbrowse-web/src/tests/__file_snapshots__/save_track_data.sam
 products/jbrowse-web/src/tests/__file_snapshots__/save_track_data.cram.sam
+plugins/variants/src/VariantRPC/getLDMatrix.ts

_typos.toml

@@ -3,3 +3,4 @@ vview = "vview"
 Wnt = "Wnt"
 ome = "ome"
 Shs = "Shs"
+hom = "hom"

packages/sv-core/package.json

@@ -31,7 +31,7 @@
     "prepack": "pnpm build"
   },
   "dependencies": {
-    "@gmod/vcf": "^6.1.1",
+    "@gmod/vcf": "^7.0.0",
     "@jbrowse/core": "workspace:^",
     "@jbrowse/mobx-state-tree": "^5.5.0",
     "@jbrowse/plugin-linear-genome-view": "workspace:^",

plugins/arc/package.json

@@ -29,7 +29,7 @@
     "clean": "rimraf esm *.tsbuildinfo"
   },
   "dependencies": {
-    "@gmod/vcf": "^6.1.1",
+    "@gmod/vcf": "^7.0.0",
     "@jbrowse/core": "workspace:^",
     "@jbrowse/mobx-state-tree": "^5.5.0",
     "@jbrowse/plugin-linear-genome-view": "workspace:^",

plugins/breakpoint-split-view/package.json

@@ -29,7 +29,7 @@
     "clean": "rimraf esm *.tsbuildinfo"
   },
   "dependencies": {
-    "@gmod/vcf": "^6.1.1",
+    "@gmod/vcf": "^7.0.0",
     "@jbrowse/core": "workspace:^",
     "@jbrowse/mobx-state-tree": "^5.5.0",
     "@jbrowse/plugin-linear-genome-view": "workspace:^",

plugins/data-management/src/AddTrackWidget/components/ConfirmTrack.tsx

@@ -53,10 +53,11 @@ const ConfirmTrack = observer(function ConfirmTrack({
     warningMessage,
     adapterHint,
     textIndexTrack,
+    adapterHintNotConfigurable,
   } = model
 
   useEffect(() => {
-    if (adapterHint === '' && trackAdapter) {
+    if (adapterHint === '' && trackAdapter && trackAdapter.type !== UNKNOWN) {
       model.setAdapterHint(trackAdapter.type)
     }
   }, [adapterHint, trackAdapter, model])
@@ -65,6 +66,14 @@ const ConfirmTrack = observer(function ConfirmTrack({
     return <Unsupported />
   } else if (trackAdapter?.type === UNKNOWN) {
     return <UnknownAdapterPrompt model={model} />
+  } else if (adapterHintNotConfigurable) {
+    return (
+      <Typography color="error">
+        The &quot;{adapterHint}&quot; adapter cannot be configured for the
+        provided file. This adapter may require a specific file extension or
+        format. Please check the file or select a different adapter.
+      </Typography>
+    )
   } else if (!trackAdapter?.type) {
     return <Typography>Could not recognize this data type.</Typography>
   } else {

plugins/data-management/src/AddTrackWidget/components/TrackAdapterSelector.tsx

@@ -11,16 +11,28 @@ const TrackAdapterSelector = observer(function ({
 }: {
   model: AddTrackModel
 }) {
-  const { trackAdapter } = model
+  const { trackAdapter, adapterHintNotConfigurable } = model
+  const { adapterHint } = model
   const { pluginManager } = getEnv(model)
 
+  // Show the adapterHint if set (even if config couldn't be built),
+  // otherwise show the resolved adapter type
+  const displayValue =
+    adapterHint || (trackAdapter?.type !== 'UNKNOWN' ? trackAdapter?.type : '')
+
   return (
     <TextField
-      value={trackAdapter?.type !== 'UNKNOWN' ? trackAdapter?.type : ''}
+      value={displayValue}
       label="Adapter type"
       variant="outlined"
       select
       fullWidth
+      error={adapterHintNotConfigurable}
+      helperText={
+        adapterHintNotConfigurable
+          ? `The "${adapterHint}" adapter cannot be configured for the provided file. This adapter may require a specific file extension or additional setup.`
+          : undefined
+      }
       onChange={event => {
         model.setAdapterHint(event.target.value)
       }}

plugins/data-management/src/AddTrackWidget/model.ts

@@ -220,6 +220,22 @@ export default function f(pluginManager: PluginManager) {
         return this.trackAdapter?.type === UNSUPPORTED
       },
 
+      /**
+       * #getter
+       * Returns true if the user selected an adapter from the dropdown
+       * but the extension point couldn't build a config for it
+       */
+      get adapterHintNotConfigurable() {
+        const { adapterHint } = self
+        const adapterType = this.trackAdapter?.type
+        return !!(
+          adapterHint &&
+          (!adapterType ||
+            adapterType === 'UNKNOWN' ||
+            adapterType !== adapterHint)
+        )
+      },
+
       /**
        * #getter
        */

plugins/hic/src/LinearHicDisplay/afterAttach.ts

@@ -99,6 +99,7 @@ export function doAfterAttach(self: LinearHicDisplayModel) {
       if (result.imageData) {
         self.setRenderingImageData(result.imageData)
         self.setLastDrawnOffsetPx(view.offsetPx)
+        self.setLastDrawnBpPerPx(view.bpPerPx)
       }
       // Store flatbush data for mouseover
       self.setFlatbushData(

plugins/linear-genome-view/src/BaseLinearDisplay/components/NonBlockCanvasDisplayComponent.tsx

@@ -24,6 +24,7 @@ export interface NonBlockCanvasDisplayModel {
   drawn: boolean
   loading: boolean
   lastDrawnOffsetPx?: number
+  lastDrawnBpPerPx?: number
   statusMessage?: string
   showLegend?: boolean
   legendItems?: () => LegendItem[]
@@ -86,15 +87,24 @@ const DataDisplay = observer(function DataDisplay({
   model: NonBlockCanvasDisplayModel
   children?: React.ReactNode
 }) {
-  const { drawn, loading, showLegend, legendItems } = model
+  const { drawn, loading, showLegend, legendItems, lastDrawnBpPerPx } = model
   const view = getContainingView(model) as LinearGenomeViewModel
   const items = legendItems?.() ?? []
 
+  // Check if the view has zoomed (bpPerPx changed) since the last render.
+  // When zoomed, we don't show the old shifted content because it's at
+  // the wrong scale.
+  const hasZoomed =
+    lastDrawnBpPerPx !== undefined && lastDrawnBpPerPx !== view.bpPerPx
+
   // Calculate how much to shift the rendered canvas to account for scrolling.
   // When the user scrolls, view.offsetPx changes but the canvas content
   // stays the same until a new render completes. This shift keeps the
   // content aligned during that time.
-  const calculatedLeft = (model.lastDrawnOffsetPx ?? 0) - view.offsetPx
+  // Only apply the shift if we haven't zoomed.
+  const calculatedLeft = hasZoomed
+    ? 0
+    : (model.lastDrawnOffsetPx ?? 0) - view.offsetPx
 
   return (
     // this data-testid is located here because changing props on the canvas
@@ -104,12 +114,16 @@ const DataDisplay = observer(function DataDisplay({
         style={{
           position: 'absolute',
           left: calculatedLeft,
+          // Hide content when zoomed until new render completes
+          visibility: hasZoomed ? 'hidden' : undefined,
         }}
       >
         {children}
       </div>
       {showLegend && items.length > 0 ? <FloatingLegend items={items} /> : null}
-      {calculatedLeft !== 0 || loading ? <LoadingBar model={model} /> : null}
+      {hasZoomed || calculatedLeft !== 0 || loading ? (
+        <LoadingBar model={model} />
+      ) : null}
     </div>
   )
 })