WIP

Author: Sebastian Benjamin

jbrowse/src/client/JBrowse/Browser/plugins/ExtendedVariantPlugin/ExtendedVariantDisplay/model.tsx

@@ -8,7 +8,11 @@ import { getEnv, IAnyStateTreeNode, types } from '@jbrowse/mobx-state-tree';
 import PaletteIcon from '@mui/icons-material/Palette';
 import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view';
 import { navigateToSearch, navigateToTable } from '../../../../utils';
-import { GlyphType } from '@jbrowse/core/pluggableElementTypes'
+import SerializableFilterChain from '@jbrowse/core/pluggableElementTypes/renderers/util/serializableFilterChain';
+
+function escapeForSingleQuotedJexl(value: string) {
+   return value.replace(/\\/g, '\\\\').replace(/'/g, "\\'")
+}
 
 function getContainingTrackWithConfig(node: IAnyStateTreeNode): IAnyStateTreeNode & { configuration: AnyConfigurationModel } {
    return getContainingTrack(node) as any;
@@ -128,8 +132,40 @@ export default jbrowse => {
                return {
                   ...superRenderProps(),
                   config: config,
-                  rendererConfig: config
+                  rendererConfig: config,
+                  filters: new SerializableFilterChain({
+                     filters: this.activeFilters(),
+                  }),
+               }
+            },
+
+            activeFilters() {
+               const staticJexlFilters = (getConf(self, 'jexlFilters') || []).map((f: string) =>
+                  f?.startsWith('jexl:') ? f : `jexl:${f}`,
+               )
+
+               const infoFilters = getConf(self, 'infoFilters') || []
+               const activeSamples = getConf(self, 'activeSamples') || ''
+               const sampleFilters = activeSamples
+                  ? activeSamples
+                       .split(',')
+                       .map((s: string) => s.trim())
+                       .filter((s: string) => !!s)
+                  : []
+
+               const dynamicFilters: string[] = []
+
+               if (infoFilters.length) {
+                  const serialized = escapeForSingleQuotedJexl(JSON.stringify(infoFilters))
+                  dynamicFilters.push(`jexl:passesInfoFilters(feature,'${serialized}')`)
                }
+
+               if (sampleFilters.length) {
+                  const serialized = escapeForSingleQuotedJexl(JSON.stringify(sampleFilters))
+                  dynamicFilters.push(`jexl:passesSampleFilters(feature,'${serialized}')`)
+               }
+
+               return [...staticJexlFilters, ...dynamicFilters]
             },
 
             get rendererTypeName() {

jbrowse/src/client/JBrowse/Browser/plugins/ExtendedVariantPlugin/index.ts

@@ -14,6 +14,18 @@ import InfoFilterWidget from './InfoFilterWidget';
 import ColorWidget from './ColorWidget';
 import SampleFilterWidget from './SampleFilterWidget';
 import GlyphType from '@jbrowse/core/pluggableElementTypes/GlyphType';
+import { readConfObject } from '@jbrowse/core/configuration';
+import { emphasize } from '@jbrowse/core/util/color';
+import { deserializeFilters } from './InfoFilterWidget/filterUtil';
+import { passesInfoFilters, passesSampleFilters } from '../../../utils';
+
+const utrHeightFraction = 0.65
+
+function isUTR(feature: any) {
+    return /(\bUTR|_UTR|untranslated[_\s]region)\b/.test(
+        feature?.get?.('type') || '',
+    )
+}
 
 export default class ExtendedVariantPlugin extends Plugin {
     name = 'ExtendedVariantPlugin'
@@ -64,17 +76,39 @@ export default class ExtendedVariantPlugin extends Plugin {
               new GlyphType({
                 name: 'SNVGlyph',
                 displayName: 'SNV Diamond',
-                draw: ctx => {
-                  const { ctx: context, featureLayout } = ctx
-                  const { x, y, width, height } = featureLayout
+                draw: (ctx: any) => {
+                  const { ctx: context, featureLayout, feature, config } = ctx
+                  const selected = !!ctx?.selected
+                  const rendererConfig: any = config
+                  const { x, y, width } = featureLayout
+
+                  let top = y
+                  let height = featureLayout.height
+                  if (isUTR(feature)) {
+                    top += ((1 - utrHeightFraction) / 2) * height
+                    height *= utrHeightFraction
+                  }
 
                   const centerX = x + width / 2
-                  const centerY = y + height / 2
-                  const halfWidth = Math.max(width / 2, 4)
+                  const centerY = top + height / 2
+                  const halfWidth = height / 2
                   const halfHeight = height / 2
 
-                  // Purple diamond fill
-                  context.fillStyle = '#800080'
+                  const color = (readConfObject as any)(
+                      rendererConfig,
+                      isUTR(feature) ? 'color3' : 'color1',
+                      { feature },
+                  ) || '#800080'
+                  const color2 = (readConfObject as any)(rendererConfig, 'color2', { feature }) || '#4B0082'
+
+                  let emphasizedColor
+                  try {
+                    emphasizedColor = emphasize(color, 0.3)
+                  } catch (error) {
+                    emphasizedColor = color
+                  }
+
+                  context.fillStyle = selected ? emphasizedColor : color
                   context.beginPath()
                   context.moveTo(centerX, centerY - halfHeight) // top
                   context.lineTo(centerX + halfWidth, centerY) // right
@@ -83,10 +117,11 @@ export default class ExtendedVariantPlugin extends Plugin {
                   context.closePath()
                   context.fill()
 
-                  // Indigo stroke
-                  context.strokeStyle = '#4B0082'
-                  context.lineWidth = 1
-                  context.stroke()
+                  if (selected) {
+                    context.strokeStyle = color2
+                    context.lineWidth = 1
+                    context.stroke()
+                  }
                 },
                 match: feature => feature.get('type') === 'SNV',
               })
@@ -163,6 +198,31 @@ export default class ExtendedVariantPlugin extends Plugin {
         pluginManager.jexl.addFunction('formatWithCommas', (val) => {
             return val ? Number(val).toLocaleString() : val
         })
+
+        pluginManager.jexl.addFunction('passesInfoFilters', (feature, serializedFilters) => {
+            try {
+                const filters = typeof serializedFilters === 'string'
+                    ? JSON.parse(serializedFilters)
+                    : serializedFilters
+                const expandedFilters = deserializeFilters(filters)
+                return passesInfoFilters(feature, expandedFilters)
+            } catch (e) {
+                console.error(e)
+                return true
+            }
+        })
+
+        pluginManager.jexl.addFunction('passesSampleFilters', (feature, serializedSampleFilters) => {
+            try {
+                const sampleFilters = typeof serializedSampleFilters === 'string'
+                    ? JSON.parse(serializedSampleFilters)
+                    : serializedSampleFilters
+                return passesSampleFilters(feature, sampleFilters)
+            } catch (e) {
+                console.error(e)
+                return true
+            }
+        })
     }
 
     configure(pluginManager: PluginManager) {

jbrowse/src/client/JBrowse/VariantTable/components/VariantTableWidget.tsx

@@ -118,7 +118,7 @@ const VariantTableWidget = observer(props => {
     filteredFeatures.forEach(variant => {
       if (!variant.get('INFO')['variableSamples']) {
         variant.get('INFO')['variableSamples'] = []
-        const genotypes = variant.get('GENOTYPES')()
+        const genotypes = variant.get('genotypes')
         Object.keys(genotypes).forEach(function(sampleId) {
           const gt = genotypes[sampleId] ? genotypes[sampleId] : null
           if (isVariant(gt)) {

jbrowse/src/client/JBrowse/utils.ts

@@ -44,7 +44,7 @@ export function passesInfoFilters(feature, filters) {
     return true
 }
 
-export function passesSampleFilters(variant : VcfFeature, sampleIDs){
+export function passesSampleFilters(variant: VcfFeature, sampleIDs){
     if (!sampleIDs || sampleIDs.length === 0) {
         return true
     }
@@ -60,8 +60,7 @@ export function passesSampleFilters(variant : VcfFeature, sampleIDs){
         return false
     }
 
-
-    const genotypes = variant.get('GENOTYPES')()
+    const genotypes = variant.get('genotypes')
     if (!genotypes || isEmptyObject(genotypes)) {
         return false
     }