Add configuration of transcriptTypes and containerTypes to the svg feature rendering

plugins/svg/src/SvgFeatureRenderer/components/Subfeatures.tsx

@@ -67,10 +67,11 @@ Subfeatures.layOut = ({
   if (displayMode !== 'reducedRepresentation') {
     let topOffset = 0
     feature.get('subfeatures')?.forEach(subfeature => {
-      const SubfeatureGlyphComponent = chooseGlyphComponent(
-        subfeature,
+      const SubfeatureGlyphComponent = chooseGlyphComponent({
+        feature: subfeature,
         extraGlyphs,
-      )
+        config,
+      })
       const subfeatureHeight = readConfObject(config, 'height', {
         feature: subfeature,
       }) as number

plugins/svg/src/SvgFeatureRenderer/components/SvgFeatureRendering.tsx

@@ -65,7 +65,7 @@ function RenderedFeatureGlyph(props: {
   const labelAllowed = displayMode !== 'collapsed'
 
   const rootLayout = new SceneGraph('root', 0, 0, 0, 0)
-  const GlyphComponent = chooseGlyphComponent(feature, extraGlyphs)
+  const GlyphComponent = chooseGlyphComponent({ config, feature, extraGlyphs })
   const featureLayout = (GlyphComponent.layOut || layOut)({
     layout: rootLayout,
     feature,

plugins/svg/src/SvgFeatureRenderer/components/util.ts

@@ -46,21 +46,29 @@ export interface ExtraGlyphValidator {
   validator: (feature: Feature) => boolean
 }
 
-const set = new Set(['mRNA', 'transcript', 'primary_transcript'])
-
-export function chooseGlyphComponent(
-  feature: Feature,
-  extraGlyphs?: ExtraGlyphValidator[],
-): Glyph {
+export function chooseGlyphComponent({
+  feature,
+  extraGlyphs,
+  config,
+}: {
+  feature: Feature
+  config: AnyConfigurationModel
+  extraGlyphs?: ExtraGlyphValidator[]
+}): Glyph {
   const type = feature.get('type')
   const subfeatures = feature.get('subfeatures')
+  const transcriptTypes = readConfObject(config, 'transcriptTypes')
+  const containerTypes = readConfObject(config, 'containerTypes')
 
   if (subfeatures?.length && type !== 'CDS') {
     const hasSubSub = subfeatures.some(f => f.get('subfeatures')?.length)
     const hasCDS = subfeatures.some(f => f.get('type') === 'CDS')
-    if (set.has(type) && hasCDS) {
+    if (transcriptTypes.includes(type) && hasCDS) {
       return ProcessedTranscript
-    } else if (!feature.parent() && hasSubSub) {
+    } else if (
+      (!feature.parent() && hasSubSub) ||
+      containerTypes.includes(type)
+    ) {
       return Subfeatures
     } else {
       return Segments
@@ -123,7 +131,11 @@ export function layOutFeature(args: FeatureLayOutArgs) {
   const GlyphComponent =
     displayMode === 'reducedRepresentation'
       ? Box
-      : chooseGlyphComponent(feature, extraGlyphs)
+      : chooseGlyphComponent({
+          feature,
+          extraGlyphs,
+          config,
+        })
   const parentFeature = feature.parent()
   let x = 0
   if (parentFeature) {
@@ -149,7 +161,7 @@ export function layOutFeature(args: FeatureLayOutArgs) {
 export function layOutSubfeatures(args: SubfeatureLayOutArgs) {
   const { layout, subfeatures, bpPerPx, reversed, config, extraGlyphs } = args
   subfeatures.forEach(feature => {
-    ;(chooseGlyphComponent(feature, extraGlyphs).layOut || layOut)({
+    ;(chooseGlyphComponent({ feature, extraGlyphs, config }).layOut || layOut)({
       layout,
       feature,
       bpPerPx,

plugins/svg/src/SvgFeatureRenderer/configSchema.ts

@@ -175,6 +175,20 @@ const SvgFeatureRenderer = ConfigurationSchema(
       description: 'imply UTR from the exon and CDS differences',
       defaultValue: false,
     },
+    /**
+     * #slot
+     */
+    transcriptTypes: {
+      type: 'stringArray',
+      defaultValue: ['mRNA', 'transcript', 'primary_transcript'],
+    },
+    /**
+     * #slot
+     */
+    containerTypes: {
+      type: 'stringArray',
+      defaultValue: ['proteoform_orf'],
+    },
   },
   { explicitlyTyped: true },
 )