@apollo-annotation/jbrowse-plugin-apollo 0.3.6 → 0.3.8

package/src/util/displayUtils.ts

@@ -0,0 +1,149 @@
+import { type CheckResultIdsType } from '@apollo-annotation/mst'
+import { makeStyles } from 'tss-react/mui'
+
+export { default as EditZoomThresholdDialog } from '../components/EditZoomThresholdDialog'
+
+export type Coord = [number, number]
+
+export const useStyles = makeStyles()((theme) => ({
+  canvasContainer: {
+    position: 'relative',
+    left: 0,
+  },
+  canvas: {
+    position: 'absolute',
+    left: 0,
+  },
+  center: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
+  ellipses: {
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+  },
+  avatar: {
+    position: 'static',
+    height: '100%',
+    width: '100%',
+    overflow: 'visible',
+    color: theme.palette.warning.light,
+    backgroundColor: theme.palette.warning.contrastText,
+  },
+  box: {
+    position: 'absolute',
+    overflow: 'visible',
+  },
+  badge: {
+    display: 'inline-block',
+  },
+  loading: {
+    position: 'absolute',
+    right: theme.spacing(3),
+    zIndex: 10,
+    pointerEvents: 'none',
+    textAlign: 'right',
+  },
+  locked: {
+    position: 'absolute',
+    right: theme.spacing(3),
+    top: theme.spacing(6),
+    zIndex: 1,
+    pointerEvents: 'none',
+    textAlign: 'right',
+  },
+}))
+
+export interface CheckResultCluster<T> {
+  _id: string
+  message: string
+  start: number
+  count: number
+  members: T[]
+  range: { min: number; max: number }
+  featureIds: CheckResultIdsType
+}
+
+export function clusterResultByMessage<
+  T extends {
+    _id: string
+    start: number
+    end: number
+    message: string
+    ids: CheckResultIdsType
+  },
+>(
+  items: readonly T[],
+  width: number,
+  touchesAsOverlap: boolean,
+): CheckResultCluster<T>[] {
+  const byMsg = new Map<string, T[]>()
+  for (const it of items) {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    ;(byMsg.get(it.message) ?? byMsg.set(it.message, []).get(it.message)!).push(
+      it,
+    )
+  }
+
+  const clusters: CheckResultCluster<T>[] = []
+  const overlaps = (aEnd: number, bStart: number) =>
+    touchesAsOverlap ? bStart <= aEnd : bStart < aEnd
+
+  for (const [message, arr] of byMsg.entries()) {
+    if (arr.length === 0) {
+      continue
+    }
+
+    arr.sort((a, b) => a.start - b.start)
+
+    let group: T[] = [arr[0]]
+    let curMin = arr[0].start
+    let curMax = arr[0].start + width
+
+    const pushResult = () => {
+      const starts = group.map((d) => d.start).sort((a, b) => a - b)
+      const mid = Math.floor(starts.length / 2)
+      const median: number =
+        starts.length % 2 ? starts[mid] : (starts[mid - 1] + starts[mid]) / 2
+      const clusterId = group[0]._id
+      const featureIds = group[0].ids
+
+      clusters.push({
+        _id: clusterId,
+        message,
+        start: median,
+        count: group.length,
+        members: [...group],
+        range: { min: curMin, max: curMax },
+        featureIds,
+      })
+    }
+
+    for (let i = 1; i < arr.length; i++) {
+      const it = arr[i]
+      const itStart = it.start
+      const itEnd = itStart + width
+
+      if (overlaps(curMax, itStart)) {
+        group.push(it)
+        if (itStart < curMin) {
+          curMin = itStart
+        }
+        if (itEnd > curMax) {
+          curMax = itEnd
+        }
+      } else {
+        pushResult()
+        group = [it]
+        curMin = itStart
+        curMax = itEnd
+      }
+    }
+    pushResult()
+  }
+
+  clusters.sort(
+    (a, b) => a.message.localeCompare(b.message) || a.start - b.start,
+  )
+  return clusters
+}

package/src/util/glyphUtils.ts

@@ -0,0 +1,201 @@
+import {
+  type AnnotationFeature,
+  type TranscriptPartCoding,
+} from '@apollo-annotation/mst'
+import { type MenuItem } from '@jbrowse/core/ui'
+import { type AbstractSessionModel } from '@jbrowse/core/util'
+import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+import { type LinearApolloDisplayMouseEvents } from '../LinearApolloDisplay/stateModel/mouseEvents'
+import { type LinearApolloSixFrameDisplayMouseEvents } from '../LinearApolloSixFrameDisplay/stateModel/mouseEvents'
+import { AddChildFeature, CopyFeature, DeleteFeature } from '../components'
+
+type NavLocation = Parameters<LinearGenomeViewModel['navTo']>[0]
+
+export function getMinAndMaxPx(
+  feature: AnnotationFeature | TranscriptPartCoding,
+  refName: string,
+  regionNumber: number,
+  lgv: LinearGenomeViewModel,
+): [number, number] | undefined {
+  const minPxInfo = lgv.bpToPx({
+    refName,
+    coord: feature.min,
+    regionNumber,
+  })
+  const maxPxInfo = lgv.bpToPx({
+    refName,
+    coord: feature.max,
+    regionNumber,
+  })
+  if (minPxInfo === undefined || maxPxInfo === undefined) {
+    return
+  }
+  const { offsetPx } = lgv
+  const minPx = minPxInfo.offsetPx - offsetPx
+  const maxPx = maxPxInfo.offsetPx - offsetPx
+  return [minPx, maxPx]
+}
+
+export function getOverlappingEdge(
+  feature: AnnotationFeature,
+  x: number,
+  minMax: [number, number],
+): { feature: AnnotationFeature; edge: 'min' | 'max' } | undefined {
+  const [minPx, maxPx] = minMax
+  // Feature is too small to tell if we're overlapping an edge
+  if (Math.abs(maxPx - minPx) < 8) {
+    return
+  }
+  if (Math.abs(minPx - x) < 4) {
+    return { feature, edge: 'min' }
+  }
+  if (Math.abs(maxPx - x) < 4) {
+    return { feature, edge: 'max' }
+  }
+  return
+}
+
+export function isSelectedFeature(
+  feature: AnnotationFeature,
+  selectedFeature: AnnotationFeature | undefined,
+) {
+  return Boolean(selectedFeature && feature._id === selectedFeature._id)
+}
+
+export function containsSelectedFeature(
+  feature: AnnotationFeature,
+  selectedFeature: AnnotationFeature | undefined,
+): boolean {
+  if (!selectedFeature) {
+    return false
+  }
+  if (feature._id === selectedFeature._id) {
+    return true
+  }
+  return feature.hasDescendant(selectedFeature._id)
+}
+
+function makeFeatureLabel(feature: AnnotationFeature) {
+  let name: string | undefined
+  if (feature.attributes.get('gff_name')) {
+    name = feature.attributes.get('gff_name')?.join(',')
+  } else if (feature.attributes.get('gff_id')) {
+    name = feature.attributes.get('gff_id')?.join(',')
+  } else {
+    name = feature._id
+  }
+  const coords = `(${(feature.min + 1).toLocaleString('en')}..${feature.max.toLocaleString('en')})`
+  const maxLen = 60
+  if (name && name.length + coords.length > maxLen + 5) {
+    const trim = maxLen - coords.length
+    name = trim > 0 ? name.slice(0, trim) : ''
+    name = `${name}[...]`
+  }
+  return `${name} ${coords}`
+}
+
+export function getContextMenuItemsForFeature(
+  display:
+    | LinearApolloSixFrameDisplayMouseEvents
+    | LinearApolloDisplayMouseEvents,
+  sourceFeature: AnnotationFeature,
+): MenuItem[] {
+  const {
+    apolloInternetAccount: internetAccount,
+    changeManager,
+    regions,
+    selectedFeature,
+    session,
+  } = display
+  const menuItems: MenuItem[] = []
+  const role = internetAccount ? internetAccount.role : 'admin'
+  const admin = role === 'admin'
+  const readOnly = !(role && ['admin', 'user'].includes(role))
+  const [region] = regions
+  const sourceAssemblyId = display.getAssemblyId(region.assemblyName)
+  const currentAssemblyId = display.getAssemblyId(region.assemblyName)
+  menuItems.push(
+    {
+      label: makeFeatureLabel(sourceFeature),
+      type: 'subHeader',
+    },
+    {
+      label: 'Add child feature',
+      disabled: readOnly,
+      onClick: () => {
+        ;(session as unknown as AbstractSessionModel).queueDialog(
+          (doneCallback) => [
+            AddChildFeature,
+            {
+              session,
+              handleClose: () => {
+                doneCallback()
+              },
+              changeManager,
+              sourceFeature,
+              sourceAssemblyId,
+              internetAccount,
+            },
+          ],
+        )
+      },
+    },
+    {
+      label: 'Copy features and annotations',
+      disabled: readOnly,
+      onClick: () => {
+        ;(session as unknown as AbstractSessionModel).queueDialog(
+          (doneCallback) => [
+            CopyFeature,
+            {
+              session,
+              handleClose: () => {
+                doneCallback()
+              },
+              changeManager,
+              sourceFeature,
+              sourceAssemblyId: currentAssemblyId,
+            },
+          ],
+        )
+      },
+    },
+    {
+      label: 'Delete feature',
+      disabled: !admin,
+      onClick: () => {
+        ;(session as unknown as AbstractSessionModel).queueDialog(
+          (doneCallback) => [
+            DeleteFeature,
+            {
+              session,
+              handleClose: () => {
+                doneCallback()
+              },
+              changeManager,
+              sourceFeature,
+              sourceAssemblyId: currentAssemblyId,
+              selectedFeature,
+              setSelectedFeature: (feature?: AnnotationFeature) => {
+                display.setSelectedFeature(feature)
+              },
+            },
+          ],
+        )
+      },
+    },
+  )
+  return menuItems
+}
+
+export function navToFeatureCenter(
+  feature: AnnotationFeature,
+  paddingPct: number,
+  refSeqLength: number,
+): NavLocation {
+  const paddingBp = (feature.max - feature.min) * paddingPct
+  const start = Math.max(feature.min - paddingBp, 1)
+  const end = Math.min(feature.max + paddingBp, refSeqLength)
+  return { refName: feature.refSeq, start, end }
+}

package/src/util/index.ts

@@ -30,3 +30,5 @@ export function getApolloInternetAccount(session: ApolloSessionModel) {
 
 export * from './loadAssemblyIntoClient'
 export * from './annotationFeatureUtils'
+export * from './glyphUtils'
+export * from './mouseEventsUtils'

package/src/util/mouseEventsUtils.ts

@@ -0,0 +1,145 @@
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+type MinEdge = 'min'
+type MaxEdge = 'max'
+export type Edge = MinEdge | MaxEdge
+
+interface LocationChange {
+  featureId: string
+  oldLocation: number
+  newLocation: number
+}
+
+function expandFeatures(
+  feature: AnnotationFeature,
+  newLocation: number,
+  edge: Edge,
+): LocationChange[] {
+  const featureId = feature._id
+  const oldLocation = feature[edge]
+  const changes: LocationChange[] = [{ featureId, oldLocation, newLocation }]
+  const { parent } = feature
+  if (
+    parent &&
+    ((edge === 'min' && parent[edge] > newLocation) ||
+      (edge === 'max' && parent[edge] < newLocation))
+  ) {
+    changes.push(...expandFeatures(parent, newLocation, edge))
+  }
+  return changes
+}
+
+function shrinkFeatures(
+  feature: AnnotationFeature,
+  newLocation: number,
+  edge: Edge,
+  shrinkParent: boolean,
+  childIdToSkip?: string,
+): LocationChange[] {
+  const featureId = feature._id
+  const oldLocation = feature[edge]
+  const changes: LocationChange[] = [{ featureId, oldLocation, newLocation }]
+  const { parent, children } = feature
+  if (children) {
+    for (const [, child] of children) {
+      if (child._id === childIdToSkip) {
+        continue
+      }
+      if (
+        (edge === 'min' && child[edge] < newLocation) ||
+        (edge === 'max' && child[edge] > newLocation)
+      ) {
+        changes.push(...shrinkFeatures(child, newLocation, edge, shrinkParent))
+      }
+    }
+  }
+  if (parent && shrinkParent) {
+    const siblings: AnnotationFeature[] = []
+    if (parent.children) {
+      for (const [, c] of parent.children) {
+        if (c._id === featureId) {
+          continue
+        }
+        siblings.push(c)
+      }
+    }
+    if (siblings.length === 0) {
+      changes.push(
+        ...shrinkFeatures(parent, newLocation, edge, shrinkParent, featureId),
+      )
+    } else {
+      const oldLocation = parent[edge]
+      const boundedLocation = Math[edge](
+        ...siblings.map((s) => s[edge]),
+        newLocation,
+      )
+      if (boundedLocation !== oldLocation) {
+        changes.push(
+          ...shrinkFeatures(
+            parent,
+            boundedLocation,
+            edge,
+            shrinkParent,
+            featureId,
+          ),
+        )
+      }
+    }
+  }
+  return changes
+}
+
+export function getPropagatedLocationChanges(
+  feature: AnnotationFeature,
+  newLocation: number,
+  edge: Edge,
+  shrinkParent = false,
+): LocationChange[] {
+  const oldLocation = feature[edge]
+  if (newLocation === oldLocation) {
+    throw new Error(`New and existing locations are the same: "${newLocation}"`)
+  }
+  if (edge === 'min') {
+    if (newLocation > oldLocation) {
+      // shrinking feature, may need to shrink children and/or parents
+      return shrinkFeatures(feature, newLocation, edge, shrinkParent)
+    }
+    return expandFeatures(feature, newLocation, edge)
+  }
+  if (newLocation < oldLocation) {
+    return shrinkFeatures(feature, newLocation, edge, shrinkParent)
+  }
+  return expandFeatures(feature, newLocation, edge)
+}
+
+/** extended information about the position of the mouse on the canvas, including the refName, bp, and displayedRegion number */
+export interface MousePosition {
+  x: number
+  y: number
+  refName: string
+  bp: number
+  regionNumber: number
+  feature?: AnnotationFeature
+}
+
+export type MousePositionWithFeature = Required<MousePosition>
+
+export function isMousePositionWithFeature(
+  mousePosition: MousePosition,
+): mousePosition is MousePositionWithFeature {
+  return 'feature' in mousePosition
+}
+
+export function getMousePosition(
+  event: React.MouseEvent,
+  lgv: LinearGenomeViewModel,
+): MousePosition {
+  const canvas = event.currentTarget
+  const { clientX, clientY } = event
+  const { left, top } = canvas.getBoundingClientRect()
+  const x = clientX - left
+  const y = clientY - top
+  const { coord: bp, index: regionNumber, refName } = lgv.pxToBp(x)
+  return { x, y, refName, bp, regionNumber }
+}