@jbrowse/plugin-lollipop 2.6.1

package/src/LollipopRenderer/Layout.ts

@@ -0,0 +1,172 @@
+import { readConfObject } from '@jbrowse/core/configuration'
+import { doesIntersect2 } from '@jbrowse/core/util/range'
+import { AnyConfigurationModel } from '@jbrowse/core/configuration'
+
+interface LayoutItem {
+  uniqueId: string
+  anchorLocation: number
+  width: number
+  height: number
+  data: { score: number }
+}
+
+type LayoutEntry = LayoutItem & { x: number; y: number }
+
+type LayoutMap = Map<string, LayoutEntry>
+
+export class FloatingLayout {
+  width: number
+
+  totalHeight = 0
+
+  constructor({ width }: { width: number }) {
+    if (!width) {
+      throw new Error('width required to make a new FloatingLayout')
+    }
+    this.width = width
+  }
+
+  items: LayoutItem[] = []
+
+  layout: LayoutMap = new Map()
+
+  layoutDirty = false
+
+  add(
+    uniqueId: string,
+    anchorLocation: number,
+    width: number,
+    height: number,
+    data: { score: number },
+  ) {
+    this.items.push({ uniqueId, anchorLocation, width, height, data })
+    this.layoutDirty = true
+  }
+
+  /**
+   * @returns Map of `uniqueId => {x,y,anchorLocation,width,height,data}`
+   */
+  getLayout(configuration?: AnyConfigurationModel) {
+    if (!this.layoutDirty) {
+      return this.layout
+    }
+    if (!configuration) {
+      throw new Error('configuration object required')
+    }
+
+    const minY = readConfObject(configuration, 'minStickLength')
+
+    // sort them by score ascending, so higher scores will always end up
+    // stacked last (toward the bottom)
+    const sorted = this.items.sort((a, b) => a.data.score - b.data.score)
+
+    // bump them
+    let maxBottom = 0
+    const layoutEntries: [string, LayoutEntry][] = new Array(sorted.length)
+    for (let i = 0; i < sorted.length; i += 1) {
+      const currentItem = sorted[i]
+      const { anchorLocation, width, height } = currentItem
+      const start = anchorLocation - width / 2
+      const end = start + width
+      let top = minY
+      let bottom = top + height
+
+      // figure out how far down to put it
+      for (let j = 0; j < i; j += 1) {
+        const [, previouslyLaidOutItem] = layoutEntries[j]
+        const {
+          x: prevStart,
+          y: prevTop,
+          width: prevWidth,
+          height: prevHeight,
+        } = previouslyLaidOutItem
+        const prevEnd = prevStart + prevWidth
+        const prevBottom = prevTop + prevHeight
+        if (
+          doesIntersect2(prevStart, prevEnd, start, end) &&
+          doesIntersect2(prevTop, prevBottom, top, bottom)
+        ) {
+          // bump this one to the bottom of the previous one
+          top = prevBottom
+          bottom = top + height
+          j = -1 // we need to check all of them again after bumping
+        }
+      }
+
+      // record the entry and update the maxBottom
+      layoutEntries[i] = [
+        currentItem.uniqueId,
+        { ...currentItem, x: start, y: top },
+      ]
+      if (bottom > maxBottom) {
+        maxBottom = bottom
+      }
+    }
+
+    // try to tile them left to right all at the same level
+    // if they don't fit, try to alternate them on 2 levels, then 3
+    this.totalHeight = maxBottom
+    this.layout = new Map(layoutEntries)
+    this.layoutDirty = false
+    return this.layout
+  }
+
+  getTotalHeight() {
+    if (this.layoutDirty) {
+      throw new Error('getTotalHeight does not work when the layout is dirty.')
+    }
+    return this.totalHeight
+  }
+
+  serializeRegion() {
+    return this.toJSON()
+  }
+
+  toJSON() {
+    if (this.layoutDirty) {
+      throw new Error('toJSON does not work when the layout is dirty.')
+    }
+    return { pairs: [...this.getLayout()], totalHeight: this.getTotalHeight() }
+  }
+
+  static fromJSON() {
+    throw new Error('not supported')
+  }
+}
+
+export class PrecomputedFloatingLayout {
+  layout: LayoutMap
+
+  totalHeight: number
+
+  constructor({
+    pairs,
+    totalHeight,
+  }: {
+    pairs: [string, LayoutEntry][]
+    totalHeight: number
+  }) {
+    this.layout = new Map(pairs)
+    this.totalHeight = totalHeight
+  }
+
+  add(uniqueId: string) {
+    if (!this.layout.has(uniqueId)) {
+      throw new Error(`layout error, precomputed layout is missing ${uniqueId}`)
+    }
+  }
+
+  getLayout() {
+    return this.layout
+  }
+
+  getTotalHeight() {
+    return this.totalHeight
+  }
+
+  static fromJSON(
+    json: ConstructorParameters<typeof PrecomputedFloatingLayout>[0],
+  ) {
+    return new PrecomputedFloatingLayout(json)
+  }
+}

package/src/LollipopRenderer/LollipopRenderer.js

@@ -0,0 +1,29 @@
+import BoxRendererType, {
+  LayoutSession,
+} from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'
+import MultiLayout from '@jbrowse/core/util/layouts/MultiLayout'
+import { FloatingLayout, PrecomputedFloatingLayout } from './Layout'
+
+class FloatingLayoutSession extends LayoutSession {
+  makeLayout() {
+    'sequenceAdapter'
+
+    const { end, start } = this.regions[0]
+    const widthPx = (end - start) / this.bpPerPx
+    return new MultiLayout(FloatingLayout, { width: widthPx })
+  }
+
+  layoutIsValid(/* layout */) {
+    return false // layout.left layout.width === this.width
+  }
+}
+
+export default class extends BoxRendererType {
+  createSession(args) {
+    return new FloatingLayoutSession(args)
+  }
+
+  deserializeLayoutInClient(json) {
+    return new PrecomputedFloatingLayout(json)
+  }
+}

package/src/LollipopRenderer/components/Lollipop.tsx

@@ -0,0 +1,113 @@
+import React from 'react'
+import { readConfObject } from '@jbrowse/core/configuration'
+import { observer } from 'mobx-react'
+import ScoreText from './ScoreText'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default observer(function Lollipop(props: Record<string, any>) {
+  const { feature, config, layoutRecord, selectedFeatureId } = props
+  const {
+    anchorLocation,
+    y,
+    data: { radiusPx },
+  } = layoutRecord
+
+  const onFeatureMouseDown = (event: React.MouseEvent) => {
+    const { onFeatureMouseDown: handler, feature } = props
+    return handler?.(event, feature.id())
+  }
+
+  const onFeatureMouseEnter = (event: React.MouseEvent) => {
+    const { onFeatureMouseEnter: handler, feature } = props
+    return handler?.(event, feature.id())
+  }
+
+  const onFeatureMouseOut = (event: React.MouseEvent | React.FocusEvent) => {
+    const { onFeatureMouseOut: handler, feature } = props
+    return handler?.(event, feature.id())
+  }
+
+  const onFeatureMouseOver = (event: React.MouseEvent | React.FocusEvent) => {
+    const { onFeatureMouseOver: handler, feature } = props
+    return handler?.(event, feature.id())
+  }
+
+  const onFeatureMouseUp = (event: React.MouseEvent) => {
+    const { onFeatureMouseUp: handler, feature } = props
+    return handler?.(event, feature.id())
+  }
+
+  const onFeatureMouseLeave = (event: React.MouseEvent) => {
+    const { onFeatureMouseLeave: handler, feature } = props
+    return handler?.(event, feature.id())
+  }
+
+  const onFeatureMouseMove = (event: React.MouseEvent) => {
+    const { onFeatureMouseMove: handler, feature } = props
+    return handler?.(event, feature.id())
+  }
+
+  const onFeatureClick = (event: React.MouseEvent) => {
+    const { onFeatureClick: handler, feature } = props
+    event.stopPropagation()
+    return handler?.(event, feature.id())
+  }
+
+  const styleOuter = {
+    fill: readConfObject(config, 'strokeColor', { feature }),
+  }
+  if (String(selectedFeatureId) === String(feature.id())) {
+    styleOuter.fill = 'red'
+  }
+
+  const styleInner = {
+    fill: readConfObject(config, 'innerColor', { feature }),
+  }
+
+  const strokeWidth = readConfObject(config, 'strokeWidth', { feature })
+
+  return (
+    <g data-testid={feature.id()}>
+      <title>{readConfObject(config, 'caption', { feature })}</title>
+      <circle
+        cx={anchorLocation}
+        cy={y + radiusPx}
+        r={radiusPx}
+        style={styleOuter}
+        onMouseDown={onFeatureMouseDown}
+        onMouseEnter={onFeatureMouseEnter}
+        onMouseOut={onFeatureMouseOut}
+        onMouseOver={onFeatureMouseOver}
+        onMouseUp={onFeatureMouseUp}
+        onMouseLeave={onFeatureMouseLeave}
+        onMouseMove={onFeatureMouseMove}
+        onClick={onFeatureClick}
+        onFocus={onFeatureMouseOver}
+        onBlur={onFeatureMouseOut}
+      />
+      {radiusPx - strokeWidth <= 2 ? null : (
+        <circle
+          cx={anchorLocation}
+          cy={y + radiusPx}
+          r={radiusPx - strokeWidth}
+          style={styleInner}
+          onMouseDown={onFeatureMouseDown}
+          onMouseEnter={onFeatureMouseEnter}
+          onMouseOut={onFeatureMouseOut}
+          onMouseOver={onFeatureMouseOver}
+          onMouseUp={onFeatureMouseUp}
+          onMouseLeave={onFeatureMouseLeave}
+          onMouseMove={onFeatureMouseMove}
+          onClick={onFeatureClick}
+          onFocus={onFeatureMouseOver}
+          onBlur={onFeatureMouseOut}
+        />
+      )}
+      <ScoreText
+        feature={feature}
+        config={config}
+        layoutRecord={layoutRecord}
+      />
+    </g>
+  )
+})

package/src/LollipopRenderer/components/LollipopRendering.test.js

@@ -0,0 +1,45 @@
+import SimpleFeature from '@jbrowse/core/util/simpleFeature'
+import React from 'react'
+import { render } from '@testing-library/react'
+import ConfigSchema from '../configSchema'
+import { FloatingLayout, PrecomputedFloatingLayout } from '../Layout'
+import Rendering from './LollipopRendering'
+
+// these tests do very little, let's try to expand them at some point
+test('no features', () => {
+  const { container } = render(
+    <Rendering
+      width={500}
+      height={500}
+      regions={[{ refName: 'zonk', start: 0, end: 300 }]}
+      layout={new PrecomputedFloatingLayout({ pairs: [], totalHeight: 20 })}
+      config={{}}
+      bpPerPx={3}
+    />,
+  )
+
+  expect(container.firstChild).toMatchSnapshot()
+})
+
+test('one feature', () => {
+  const { container } = render(
+    <Rendering
+      width={500}
+      height={500}
+      regions={[{ refName: 'zonk', start: 0, end: 1000 }]}
+      layout={new FloatingLayout({ width: 100 })}
+      features={
+        new Map([
+          [
+            'one',
+            new SimpleFeature({ uniqueId: 'one', score: 10, start: 1, end: 3 }),
+          ],
+        ])
+      }
+      config={ConfigSchema.create({})}
+      bpPerPx={3}
+    />,
+  )
+
+  expect(container.firstChild).toMatchSnapshot()
+})

package/src/LollipopRenderer/components/LollipopRendering.tsx

@@ -0,0 +1,140 @@
+import React from 'react'
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+import { Feature, Region, bpToPx } from '@jbrowse/core/util'
+import { observer } from 'mobx-react'
+
+// locals
+import Lollipop from './Lollipop'
+import Stick from './Stick'
+
+function layoutFeat(args: {
+  feature: Feature
+  bpPerPx: number
+  region: Region
+  layout: { add: (...args: unknown[]) => void }
+  config: AnyConfigurationModel
+}) {
+  const { feature, bpPerPx, config, region, layout } = args
+
+  const centerBp = Math.abs(feature.get('end') + feature.get('start')) / 2
+  const centerPx = bpToPx(centerBp, region, bpPerPx)
+  const radiusPx = readConfObject(config, 'radius', { feature })
+
+  if (!radiusPx) {
+    console.error(
+      new Error(
+        `lollipop radius ${radiusPx} configured for feature ${feature.id()}`,
+      ),
+    )
+  }
+  layout.add(feature.id(), centerPx, radiusPx * 2, radiusPx * 2, {
+    featureId: feature.id(),
+    anchorX: centerPx,
+    radiusPx,
+    score: readConfObject(args.config, 'score', { feature }),
+  })
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default observer(function LollipopRendering(props: Record<string, any>) {
+  const onMouseDown = (event: React.MouseEvent) => {
+    const { onMouseDown: handler } = props
+    return handler?.(event)
+  }
+
+  const onMouseUp = (event: React.MouseEvent) => {
+    const { onMouseUp: handler } = props
+    return handler?.(event)
+  }
+
+  const onMouseEnter = (event: React.MouseEvent | React.FocusEvent) => {
+    const { onMouseEnter: handler } = props
+    return handler?.(event)
+  }
+
+  const onMouseLeave = (event: React.MouseEvent | React.FocusEvent) => {
+    const { onMouseLeave: handler } = props
+    return handler?.(event)
+  }
+
+  const onMouseOver = (event: React.MouseEvent) => {
+    const { onMouseOver: handler } = props
+    return handler?.(event)
+  }
+
+  const onMouseOut = (event: React.MouseEvent) => {
+    const { onMouseOut: handler } = props
+    return handler?.(event)
+  }
+
+  const onClick = (event: React.MouseEvent) => {
+    const { onClick: handler } = props
+    return handler?.(event)
+  }
+
+  const {
+    regions,
+    bpPerPx,
+    layout,
+    config,
+    features = new Map(),
+    displayModel = {},
+  } = props
+  const { selectedFeatureId } = displayModel
+  const [region] = regions
+  for (const feature of features.values()) {
+    layoutFeat({
+      feature,
+      bpPerPx,
+      region,
+      config,
+      layout,
+    })
+  }
+
+  const width = (region.end - region.start) / bpPerPx
+  const records = [...layout.getLayout(config).values()]
+  const height = layout.getTotalHeight()
+
+  return (
+    <svg
+      width={width}
+      height={height}
+      style={{ position: 'relative' }}
+      onMouseDown={onMouseDown}
+      onMouseUp={onMouseUp}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onMouseOver={onMouseOver}
+      onMouseOut={onMouseOut}
+      onFocus={onMouseEnter}
+      onBlur={onMouseLeave}
+      onClick={onClick}
+    >
+      {records.map(layoutRecord => {
+        const feature = features.get(layoutRecord.data.featureId)
+        return (
+          <React.Fragment key={feature.id()}>
+            <Stick
+              {...props}
+              config={config}
+              layoutRecord={layoutRecord}
+              feature={feature}
+              key={`stick-${feature.id()}`}
+            />
+            <Lollipop
+              {...props}
+              layoutRecord={layoutRecord}
+              feature={feature}
+              key={`body-${feature.id()}`}
+              selectedFeatureId={selectedFeatureId}
+            />
+          </React.Fragment>
+        )
+      })}
+    </svg>
+  )
+})

package/src/LollipopRenderer/components/ScoreText.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+import { contrastingTextColor } from '@jbrowse/core/util/color'
+import { Feature } from '@jbrowse/core/util'
+
+export default function ScoreText({
+  feature,
+  config,
+  layoutRecord: {
+    y,
+    data: { anchorX, radiusPx, score },
+  },
+}: {
+  feature: Feature
+  config: AnyConfigurationModel
+  layoutRecord: {
+    y: number
+    data: { anchorX: number; radiusPx: number; score: number }
+  }
+}) {
+  const innerColor = readConfObject(config, 'innerColor', { feature })
+
+  const scoreString = String(score)
+  const fontWidth = (radiusPx * 2) / scoreString.length
+  const fontHeight = fontWidth * 1.1
+  if (fontHeight < 12) {
+    return null
+  }
+  return (
+    <text
+      style={{ fontSize: fontHeight, fill: contrastingTextColor(innerColor) }}
+      x={anchorX}
+      y={y + radiusPx - fontHeight / 2.4}
+      textAnchor="middle"
+      dominantBaseline="hanging"
+    >
+      {scoreString}
+    </text>
+  )
+}

package/src/LollipopRenderer/components/Stick.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import {
+  AnyConfigurationModel,
+  readConfObject,
+} from '@jbrowse/core/configuration'
+import { observer } from 'mobx-react'
+import { Feature } from '@jbrowse/core/util'
+
+export default observer(function Stick({
+  feature,
+  config,
+  layoutRecord: {
+    anchorLocation,
+    y,
+    data: { radiusPx },
+  },
+}: {
+  feature: Feature
+  config: AnyConfigurationModel
+  layoutRecord: {
+    anchorLocation: number
+    y: number
+    data: { radiusPx: number }
+  }
+}) {
+  return (
+    <line
+      x1={anchorLocation}
+      y1={0}
+      x2={anchorLocation}
+      y2={y + 2 * radiusPx}
+      stroke={readConfObject(config, 'stickColor', { feature })}
+      strokeWidth={readConfObject(config, 'stickWidth', { feature })}
+    />
+  )
+})

package/src/LollipopRenderer/components/__snapshots__/LollipopRendering.test.js.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`no features 1`] = `
+<svg
+  height="20"
+  style="position: relative;"
+  width="100"
+/>
+`;
+
+exports[`one feature 1`] = `
+<svg
+  height="16.286652959662007"
+  style="position: relative;"
+  width="333.3333333333333"
+>
+  <line
+    stroke="black"
+    stroke-width="2"
+    x1="0.7"
+    x2="0.7"
+    y1="0"
+    y2="16.286652959662007"
+  />
+  <g
+    data-testid="one"
+  >
+    <title />
+    <circle
+      cx="0.7"
+      cy="10.643326479831003"
+      r="5.643326479831003"
+      style="fill: green;"
+    />
+  </g>
+</svg>
+`;

package/src/LollipopRenderer/configSchema.ts

@@ -0,0 +1,63 @@
+import { ConfigurationSchema } from '@jbrowse/core/configuration'
+
+export default ConfigurationSchema(
+  'LollipopRenderer',
+  {
+    strokeColor: {
+      type: 'color',
+      description: 'the outer color of each lollipop',
+      defaultValue: 'green',
+      contextVariable: ['feature'],
+    },
+    innerColor: {
+      type: 'color',
+      description: 'the inner color of each lollipop',
+      defaultValue: '#7fc75f',
+      contextVariable: ['feature'],
+    },
+    strokeWidth: {
+      type: 'number',
+      description: 'width of the stroked border',
+      defaultValue: 4,
+      contextVariable: ['feature'],
+    },
+    radius: {
+      type: 'number',
+      description: 'radius in pixels of each lollipop body',
+      defaultValue: `jexl:sqrt(max(3, (get(feature,'score')*10)/3.14))`,
+      contextVariable: ['feature'],
+    },
+    caption: {
+      type: 'string',
+      description:
+        'the tooltip caption displayed when the mouse hovers over a lollipop',
+      defaultValue: `jexl:get(feature,'name')`,
+      contextVariable: ['feature'],
+    },
+    minStickLength: {
+      type: 'number',
+      description: 'minimum lollipop "stick" length, in pixels',
+      defaultValue: 5,
+    },
+    stickColor: {
+      type: 'color',
+      description: 'color of the lollipop stick',
+      defaultValue: 'black',
+      contextVariable: ['feature'],
+    },
+    stickWidth: {
+      type: 'number',
+      description: 'width in pixels of the lollipop stick',
+      defaultValue: 2,
+      contextVariable: ['feature'],
+    },
+    score: {
+      type: 'number',
+      description:
+        'the "score" of each lollipop, displayed as a number in the center of the circle',
+      defaultValue: `jexl:get(feature,'score')`,
+      contextVariable: ['feature'],
+    },
+  },
+  { explicitlyTyped: true },
+)

package/src/LollipopRenderer/index.ts

@@ -0,0 +1,3 @@
+export { default as ReactComponent } from './components/LollipopRendering'
+export { default as configSchema } from './configSchema'
+export { default } from './LollipopRenderer'