jbrowse-plugin-graphgenomeviewer 7.4.3 → 7.4.4

package/src/WalkFormsAdapter/formRows.ts

@@ -0,0 +1,231 @@
+import {
+  NO_CALL_STATE,
+  RARER_STATE,
+  REFERENCE_STATE,
+  formStateAt,
+  formTag,
+  markTag,
+} from '@jbrowse/graph-walks'
+
+import type { Mark, MarkKind, StructuralForms } from '@jbrowse/graph-walks'
+
+export const CONSEQUENCES = [
+  'loss',
+  'gain',
+  'shift',
+  'inversion',
+  'net',
+] as const
+
+export type Consequence = (typeof CONSEQUENCES)[number]
+
+// `svType` in core's vocabulary (UNIVERSAL_FIELD_PRESETS) and `type` as a
+// Sequence Ontology term, which VcfFeature gives `<DUP:TANDEM>` too
+const KINDS: Record<
+  MarkKind,
+  { svType: string; type: string; alt: string; consequence?: Consequence }
+> = {
+  deletion: { svType: 'DEL', type: 'deletion', alt: '<DEL>' },
+  insertion: { svType: 'INS', type: 'insertion', alt: '<INS>' },
+  duplication: {
+    svType: 'DUP',
+    type: 'tandem_duplication',
+    alt: '<DUP:TANDEM>',
+  },
+  replacement: { svType: 'CPX', type: 'complex_substitution', alt: '<CPX>' },
+  inversion: {
+    svType: 'INV',
+    type: 'inversion',
+    alt: '<INV>',
+    consequence: 'inversion',
+  },
+  shift: {
+    svType: 'CPX',
+    type: 'complex_structural_alteration',
+    alt: '<CPX>',
+    consequence: 'shift',
+  },
+  net: {
+    svType: 'CPX',
+    type: 'complex_structural_alteration',
+    alt: '<CPX>',
+    consequence: 'net',
+  },
+}
+
+// A lopsided replacement colours by the side graph-walks names, which its net
+// sign agrees with; any other change by its net sign
+const sideOf = (m: Mark) =>
+  m.lopsided ?? (m.delta < 0 ? 'deletion' : 'insertion')
+
+const consequenceOf = (m: Mark): Consequence =>
+  KINDS[m.kind].consequence ?? (sideOf(m) === 'deletion' ? 'loss' : 'gain')
+
+export const formName = (i: number) => `F${i + 1}`
+
+export const OTHER_FORMS = 'other'
+
+export const DEFAULT_MAX_FORMS = 8
+
+function percent(n: number, of: number) {
+  const p = (100 * n) / of
+  return p > 0 && p < 1 ? '<1%' : `${Math.round(p)}%`
+}
+
+// The forms drawn as rows of their own, largest first; one more than
+// `maxForms` gets its own row rather than an "other forms" row
+const shownCount = ({ forms }: StructuralForms, maxForms: number) =>
+  forms.length > maxForms + 1 ? Math.max(0, maxForms) : forms.length
+
+const sum = (forms: StructuralForms['forms']) =>
+  forms.reduce((n, f) => n + f.members.length, 0)
+
+/**
+ * One row per form, largest first, labelled "66% · del 18.4kb". Past
+ * `maxForms` the rest share one empty "other forms" row. A row's `forms`
+ * counts the forms it holds, so the rows sum to the window's forms.
+ */
+export function formSources(
+  result: StructuralForms,
+  maxForms = DEFAULT_MAX_FORMS,
+) {
+  const shown = shownCount(result, maxForms)
+  const rest = result.forms.slice(shown)
+  return [
+    ...result.forms.slice(0, shown).map((f, i) => ({
+      name: formName(i),
+      label: `${percent(f.members.length, result.placed)} · ${formTag(f, result)}`,
+      haplotypes: f.members.length,
+      forms: 1,
+    })),
+    ...(rest.length > 0
+      ? [
+          {
+            name: OTHER_FORMS,
+            label: `other forms · ${percent(sum(rest), result.placed)}`,
+            haplotypes: sum(rest),
+            forms: rest.length,
+          },
+        ]
+      : []),
+  ]
+}
+
+const LISTED_NAMES = 5
+
+function names(haplotypes: string[]) {
+  const listed = haplotypes.slice(0, LISTED_NAMES).join(', ')
+  const more = haplotypes.length - LISTED_NAMES
+  return more > 0 ? `${listed} and ${more} more` : listed
+}
+
+const haplotypeCount = (n: number) => `${n} haplotype${n === 1 ? '' : 's'}`
+
+export function formWarnings(
+  result: StructuralForms,
+  maxForms = DEFAULT_MAX_FORMS,
+) {
+  const { abridged, unplaced, forms } = result
+  const shown = shownCount(result, maxForms)
+  const rest = forms.slice(shown)
+  return [
+    ...(rest.length > 0
+      ? [
+          `${rest.length} smaller forms, ${haplotypeCount(sum(rest))}, share the empty "other forms" row; maxForms sets how many forms get a row of their own`,
+        ]
+      : []),
+    ...(abridged.length > 0
+      ? [
+          `${haplotypeCount(abridged.length)} kept an abridged walk past the forms cut's step budget, which shows as a net change over its span: ${names(abridged)}`,
+        ]
+      : []),
+    ...(unplaced.length > 0
+      ? [
+          `${haplotypeCount(unplaced.length)} ${unplaced.length === 1 ? 'has' : 'have'} no walk over the pinned window, so no form: ${names(unplaced)}`,
+        ]
+      : []),
+  ]
+}
+
+// Genotype `0` in every form with a row of its own
+export function referenceGenotypes(
+  result: StructuralForms,
+  maxForms = DEFAULT_MAX_FORMS,
+): Record<string, string> {
+  return Object.fromEntries(
+    result.forms
+      .slice(0, shownCount(result, maxForms))
+      .map((_, j) => [formName(j), '0']),
+  )
+}
+
+export interface FormVariant {
+  id: string
+  start: number
+  end: number
+  name: string
+  description: string
+  type: string
+  svType: string
+  consequence: Consequence
+  alt: string
+  mark: Mark
+  genotypes: Record<string, string>
+}
+
+// A duplication draws over the stretch it copies rather than its zero-width
+// junction, as a VCF `<DUP>` spans its copy
+function drawnSpan({ copied, refStart, refEnd }: Mark) {
+  const [start, end] = copied ?? [refStart, refEnd]
+  return { start, end: Math.max(end, start + 1) }
+}
+
+const genotypeOf = (formState: string | undefined, state: string) =>
+  formState === state
+    ? '1'
+    : formState === NO_CALL_STATE || formState === RARER_STATE
+      ? '.'
+      : '0'
+
+/**
+ * The marks of each changed state at a site that is not an edge, one variant
+ * each, with genotype `1` in the forms in that state, `0` in the others and
+ * `.` where a form has no call or only a rarer change. Only the forms with a
+ * row of their own get a genotype, so the "other forms" row draws empty, and
+ * a state none of them carries gives no variant.
+ */
+export function formVariants(
+  result: StructuralForms,
+  maxForms = DEFAULT_MAX_FORMS,
+): FormVariant[] {
+  const { sites, forms, placed } = result
+  const shown = shownCount(result, maxForms)
+  return sites.flatMap((site, s) =>
+    site.edge
+      ? []
+      : site.states.flatMap(state => {
+          if (state.key === REFERENCE_STATE) {
+            return []
+          }
+          const states = forms.map(f => formStateAt(result, f, s))
+          const genotypes = Object.fromEntries(
+            states
+              .slice(0, shown)
+              .map((f, j) => [formName(j), genotypeOf(f, state.key)]),
+          )
+          const carriers = sum(forms.filter((_, j) => states[j] === state.key))
+          return Object.values(genotypes).includes('1')
+            ? state.marks.map((mark, k) => ({
+                id: `${s}:${state.key}:${k}`,
+                ...drawnSpan(mark),
+                name: markTag(mark),
+                description: `${carriers} of ${haplotypeCount(placed)}`,
+                ...KINDS[mark.kind],
+                consequence: consequenceOf(mark),
+                mark,
+                genotypes,
+              }))
+            : []
+        }),
+  )
+}

package/src/WalkFormsAdapter/formsMenu.test.ts

@@ -0,0 +1,237 @@
+import { types } from '@jbrowse/mobx-state-tree'
+
+import { FLOORS, pinnedLabel, withFormsMenu } from './formsMenu.ts'
+
+import type { MenuItem } from '@jbrowse/core/ui'
+
+const LPA = { refName: 'chr6', start: 160_525_000, end: 160_655_000 }
+
+const FakeDisplay = types
+  .model('FakeDisplay', { adapter: types.frozen<Record<string, unknown>>() })
+  .volatile(() => ({
+    sourcesBase: undefined as Record<string, unknown>[] | undefined,
+  }))
+  .views(self => ({
+    get parentTrack() {
+      return { configuration: { adapter: self.adapter } }
+    },
+    trackMenuItems(): MenuItem[] {
+      return [{ label: 'Core item', onClick: () => {} }]
+    },
+  }))
+  .actions(self => ({
+    setRows(rows: Record<string, unknown>[]) {
+      self.sourcesBase = rows
+    },
+    setSources(rows: Record<string, unknown>[]) {
+      self.sourcesBase = rows
+    },
+  }))
+
+const block = (start: number, end: number) => ({
+  refName: 'chr6',
+  assemblyName: 'hg38',
+  start,
+  end,
+  offsetPx: 0,
+  displayedRegionIndex: 0,
+})
+
+const FakeView = types
+  .model('FakeView', {
+    display: withFormsMenu(FakeDisplay),
+    start: types.number,
+    end: types.number,
+  })
+  .volatile(() => ({
+    width: 1000,
+    bpPerPx: 1,
+    offsetPx: 0,
+    displayedRegions: [{ start: 0, end: 170_805_979 }],
+    coarseDynamicBlocks: [],
+  }))
+  .views(self => ({
+    get dynamicBlocks() {
+      return { contentBlocks: [block(self.start, self.end)] }
+    },
+    horizontalScroll: (d: number) => d,
+    zoomTo: (bpPerPx: number) => bpPerPx,
+  }))
+  .actions(self => ({
+    setWidth() {},
+    pan(start: number, end: number) {
+      self.start = start
+      self.end = end
+    },
+  }))
+
+const FakeSession = types
+  .model('FakeSession', { view: FakeView })
+  .volatile(() => ({
+    rpcManager: {},
+    configuration: {},
+    snackbarMessages: [] as { message: string }[],
+  }))
+  .actions(self => ({
+    notify(message: string) {
+      self.snackbarMessages.push({ message })
+    },
+    removeSnackbarMessage(message: string) {
+      self.snackbarMessages = self.snackbarMessages.filter(
+        m => m.message !== message,
+      )
+    },
+  }))
+
+function makeSession(adapter: Record<string, unknown>) {
+  return FakeSession.create({
+    view: { display: { adapter }, start: 160_600_000.4, end: 160_700_000.6 },
+  })
+}
+
+const makeView = (adapter: Record<string, unknown>) => makeSession(adapter).view
+
+const formsAdapter = {
+  type: 'WalkFormsAdapter',
+  walksLocation: { uri: 'x.walks.bed.gz', locationType: 'UriLocation' },
+  pinned: LPA,
+}
+
+interface Item {
+  label?: unknown
+  onClick: () => void
+  disabled?: boolean
+  checked?: boolean
+  subMenu?: Item[]
+}
+
+const labels = (items: MenuItem[]) =>
+  (items as unknown as Item[]).map(i => i.label)
+
+function item(items: MenuItem[], label: string) {
+  const found = (items as unknown as Item[]).find(i => i.label === label)
+  if (!found) {
+    throw new Error(`no menu item ${label}`)
+  }
+  return found
+}
+
+test('another adapter gets no forms items, and its config unchanged', () => {
+  const { display } = makeView({ type: 'VcfTabixAdapter' })
+  expect(labels(display.trackMenuItems())).toEqual(['Core item'])
+  expect(display.adapterConfig).toEqual({ type: 'VcfTabixAdapter' })
+})
+
+test('a WalkFormsAdapter track gets the pin, re-pin and floor items', () => {
+  const { display } = makeView(formsAdapter)
+  expect(labels(display.trackMenuItems())).toEqual([
+    'Core item',
+    'Pinned to chr6:160,525,001-160,655,000',
+    'Re-pin to visible region',
+    'Hide changes under',
+  ])
+  expect(
+    labels(
+      item(display.trackMenuItems(), 'Hide changes under')
+        .subMenu as unknown as MenuItem[],
+    ),
+  ).toEqual(['Auto', '50 bp', '1 kb', '10 kb'])
+})
+
+test('the pinned label counts the forms the rows hold', () => {
+  const { display } = makeView(formsAdapter)
+  display.setRows([
+    ...Array.from({ length: 8 }, (_, i) => ({ name: `F${i + 1}`, forms: 1 })),
+    { name: 'other', forms: 18 },
+  ])
+  const [label] = display.formsMenuItems()
+  expect(label).toMatchObject({
+    label: 'Pinned to chr6:160,525,001-160,655,000 · 26 forms',
+    disabled: true,
+  })
+  expect(pinnedLabel(LPA, 1)).toBe(
+    'Pinned to chr6:160,525,001-160,655,000 · 1 form',
+  )
+  expect(pinnedLabel(undefined)).toBe('Not pinned')
+})
+
+test('re-pin sets the window to the visible region, in whole bases', () => {
+  const view = makeView(formsAdapter)
+  const { display } = view
+  item(display.trackMenuItems(), 'Re-pin to visible region').onClick()
+  expect(display.formsPinned).toEqual({
+    refName: 'chr6',
+    start: 160_600_000,
+    end: 160_700_001,
+  })
+  expect(display.adapterConfig.pinned).toEqual(display.formsPinned)
+  expect(display.adapterConfig.walksLocation).toEqual(
+    formsAdapter.walksLocation,
+  )
+  expect(
+    item(display.trackMenuItems(), 'Re-pin to visible region').disabled,
+  ).toBe(true)
+
+  view.pan(160_800_000, 160_900_000)
+  expect(display.adapterConfig.pinned).toEqual({
+    refName: 'chr6',
+    start: 160_600_000,
+    end: 160_700_001,
+  })
+  expect(
+    item(display.trackMenuItems(), 'Re-pin to visible region').disabled,
+  ).toBe(false)
+})
+
+test('the floor items set floorBp and check the one in force', () => {
+  const { display } = makeView({ ...formsAdapter, floorBp: 1000 })
+  const checked = () =>
+    item(display.trackMenuItems(), 'Hide changes under')
+      .subMenu!.filter(i => i.checked)
+      .map(i => i.label)
+  expect(checked()).toEqual(['1 kb'])
+  item(display.trackMenuItems(), 'Hide changes under')
+    .subMenu!.find(i => i.label === '10 kb')!
+    .onClick()
+  expect(display.formsFloorBp).toBe(10_000)
+  expect(display.adapterConfig.floorBp).toBe(10_000)
+  expect(display.adapterConfig.pinned).toEqual(LPA)
+  expect(checked()).toEqual(['10 kb'])
+  expect(FLOORS.map(f => f.value)).toEqual(['auto', 50, 1000, 10_000])
+})
+
+test('the floor defaults to auto when the config leaves it unset', () => {
+  const { display } = makeView(formsAdapter)
+  expect(display.formsFloor).toBe('auto')
+  expect(display.adapterConfig).toEqual(formsAdapter)
+})
+
+test("a floor change or new rows take down the old window's warnings", () => {
+  const session = makeSession(formsAdapter)
+  const { display } = session.view
+  const lpa = 'Forms of chr6:160,525,001-160,655,000: 3 smaller forms'
+  session.notify(lpa)
+  session.notify('Another track: a warning of its own')
+  item(display.trackMenuItems(), 'Hide changes under')
+    .subMenu!.find(i => i.label === '10 kb')!
+    .onClick()
+  expect(session.snackbarMessages.map(m => m.message)).toEqual([
+    'Another track: a warning of its own',
+  ])
+
+  session.notify(lpa)
+  display.setSources([{ name: 'F1' }])
+  expect(display.sourcesBase).toEqual([{ name: 'F1' }])
+  expect(session.snackbarMessages).toHaveLength(1)
+})
+
+test("a re-pin takes down the old window's warnings", () => {
+  const session = makeSession(formsAdapter)
+  const { display } = session.view
+  display.setSources([{ name: 'F1' }])
+  session.notify('Forms of chr6:160,525,001-160,655,000: 3 smaller forms')
+  item(display.trackMenuItems(), 'Re-pin to visible region').onClick()
+  session.notify('Forms of chr6:160,600,001-160,700,001: 2 smaller forms')
+  display.setSources([{ name: 'F1' }, { name: 'F2' }])
+  expect(session.snackbarMessages).toEqual([])
+})

package/src/WalkFormsAdapter/formsMenu.ts

@@ -0,0 +1,202 @@
+import { readConfObject } from '@jbrowse/core/configuration'
+import { DisplayType } from '@jbrowse/core/pluggableElementTypes'
+import { getContainingView, getSession } from '@jbrowse/core/util'
+import { types } from '@jbrowse/mobx-state-tree'
+
+import { floorOf, pinnedLocus, pinnedOf, warningPrefix } from './pinned.ts'
+import { hostWindow, isLinearHost } from '../GraphGenomeView/host.ts'
+
+import type { FloorBp, Pinned } from './pinned.ts'
+import type PluginManager from '@jbrowse/core/PluginManager'
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration'
+import type { MenuItem } from '@jbrowse/core/ui'
+import type { IAnyModelType, IAnyStateTreeNode } from '@jbrowse/mobx-state-tree'
+
+export const FORMS_DISPLAYS = ['LinearMultiSampleVariantDisplay']
+
+export const FLOORS: { label: string; value: FloorBp }[] = [
+  { label: 'Auto', value: 'auto' },
+  { label: '50 bp', value: 50 },
+  { label: '1 kb', value: 1000 },
+  { label: '10 kb', value: 10_000 },
+]
+
+export function pinnedLabel(pinned: Pinned | undefined, forms?: number) {
+  return pinned
+    ? `Pinned to ${pinnedLocus(pinned)}${forms === undefined ? '' : ` · ${forms} form${forms === 1 ? '' : 's'}`}`
+    : 'Not pinned'
+}
+
+interface FormsHost {
+  parentTrack: { configuration: AnyConfigurationModel }
+  sourcesBase?: Record<string, unknown>[]
+  trackMenuItems: () => MenuItem[]
+  setSources?: (sources: unknown, adapterConfig?: unknown) => void
+}
+
+interface Snackbar {
+  snackbarMessages?: { message: string }[]
+  removeSnackbarMessage?: (message: string) => void
+}
+
+function clearWarnings(
+  node: IAnyStateTreeNode,
+  windows: (Pinned | undefined)[],
+) {
+  const session = getSession(node) as unknown as Snackbar
+  const prefixes = windows.flatMap(w => (w ? [warningPrefix(w)] : []))
+  for (const { message } of [...(session.snackbarMessages ?? [])]) {
+    if (prefixes.some(p => message.startsWith(p))) {
+      session.removeSnackbarMessage?.(message)
+    }
+  }
+}
+
+/**
+ * Gives a WalkFormsAdapter track's display a pinned window and floor of its
+ * own, which the display stores in the session and sends in the adapter config
+ * with each request. A config edit would change the track's RPC session id
+ * and move the requests to a worker without the cut; display state leaves it.
+ */
+export function withFormsMenu(model: IAnyModelType) {
+  return model
+    .props({
+      formsPinned: types.maybe(types.frozen<Pinned>()),
+      formsFloorBp: types.maybe(types.frozen<FloorBp>()),
+    })
+    .views(self => ({
+      get configuredAdapter(): Record<string, unknown> {
+        return readConfObject(
+          (self as unknown as FormsHost).parentTrack.configuration,
+          'adapter',
+        ) as Record<string, unknown>
+      },
+      get walkForms() {
+        return this.configuredAdapter.type === 'WalkFormsAdapter'
+      },
+    }))
+    .views(self => ({
+      get adapterConfig(): Record<string, unknown> {
+        const conf = self.configuredAdapter
+        return self.walkForms
+          ? {
+              ...conf,
+              ...(self.formsPinned ? { pinned: self.formsPinned } : {}),
+              ...(self.formsFloorBp === undefined
+                ? {}
+                : { floorBp: self.formsFloorBp }),
+            }
+          : conf
+      },
+      get formsWindow() {
+        return pinnedOf(this.adapterConfig.pinned)
+      },
+      get formsFloor() {
+        return floorOf(this.adapterConfig.floorBp)
+      },
+      get formsCount() {
+        return (self as unknown as FormsHost).sourcesBase?.reduce(
+          (n, row) => n + (Number(row.forms) || 1),
+          0,
+        )
+      },
+      get visibleWindow(): Pinned | undefined {
+        const view: unknown = getContainingView(self)
+        const window = isLinearHost(view) ? hostWindow(view) : undefined
+        return window && window.end > window.start
+          ? {
+              refName: window.refName,
+              start: Math.max(0, Math.floor(window.start)),
+              end: Math.ceil(window.end),
+            }
+          : undefined
+      },
+    }))
+    .volatile(() => ({
+      warnedWindow: undefined as Pinned | undefined,
+    }))
+    .actions(self => {
+      const { setSources: superSetSources } = self as unknown as FormsHost
+      const clearFormsWarnings = () => {
+        clearWarnings(self, [self.warnedWindow, self.formsWindow])
+      }
+      return {
+        setFormsPinned(pinned: Pinned) {
+          clearFormsWarnings()
+          self.formsPinned = pinned
+        },
+        setFormsFloorBp(floorBp: FloorBp) {
+          clearFormsWarnings()
+          self.formsFloorBp = floorBp
+        },
+        // Core posts the new forms' warnings right after this, so the old
+        // ones come down first
+        setSources(sources: unknown, adapterConfig?: unknown) {
+          if (self.walkForms) {
+            clearFormsWarnings()
+            self.warnedWindow = self.formsWindow
+          }
+          superSetSources?.(sources, adapterConfig)
+        },
+      }
+    })
+    .views(self => {
+      const { trackMenuItems: superTrackMenuItems } =
+        self as unknown as FormsHost
+      return {
+        formsMenuItems(): MenuItem[] {
+          const pinned = self.formsWindow
+          const visible = self.visibleWindow
+          return [
+            {
+              label: pinnedLabel(pinned, self.formsCount),
+              disabled: true,
+              onClick: () => {},
+            },
+            {
+              label: 'Re-pin to visible region',
+              helpText:
+                'Cut the forms from the region the view shows. Panning and zooming leave the forms alone',
+              disabled:
+                !visible ||
+                (pinned !== undefined &&
+                  pinnedLocus(visible) === pinnedLocus(pinned)),
+              onClick: () => {
+                if (visible) {
+                  self.setFormsPinned(visible)
+                }
+              },
+            },
+            {
+              label: 'Hide changes under',
+              subMenu: FLOORS.map(({ label, value }) => ({
+                label,
+                type: 'radio' as const,
+                checked: self.formsFloor === value,
+                onClick: () => {
+                  self.setFormsFloorBp(value)
+                },
+              })),
+            },
+          ]
+        },
+        trackMenuItems(): MenuItem[] {
+          return self.walkForms
+            ? [...superTrackMenuItems(), ...this.formsMenuItems()]
+            : superTrackMenuItems()
+        },
+      }
+    })
+}
+
+export default function WalkFormsMenuF(pluginManager: PluginManager) {
+  pluginManager.addToExtensionPoint('Core-extendPluggableElement', element => {
+    if (
+      element instanceof DisplayType &&
+      FORMS_DISPLAYS.includes(element.name)
+    ) {
+      element.extendStateModel(withFormsMenu)
+    }
+    return element
+  })
+}

package/src/WalkFormsAdapter/index.ts

@@ -0,0 +1,21 @@
+import AdapterType from '@jbrowse/core/pluggableElementTypes/AdapterType'
+
+import configSchema from './configSchema.ts'
+
+import type PluginManager from '@jbrowse/core/PluginManager'
+
+export default function WalkFormsAdapterF(pluginManager: PluginManager) {
+  pluginManager.addAdapterType(
+    () =>
+      new AdapterType({
+        name: 'WalkFormsAdapter',
+        displayName: 'Walk-file structural forms adapter',
+        configSchema,
+        adapterMetadata: {
+          category: 'Variant adapters',
+        },
+        getAdapterClass: () =>
+          import('./WalkFormsAdapter.ts').then(r => r.default),
+      }),
+  )
+}