Add example of using hideSubfeatures on the bigbed example

packages/core/BaseFeatureWidget/BaseFeatureDetail/index.tsx

@@ -177,10 +177,8 @@ export function FeatureDetails(props: {
   formatter?: (val: unknown, key: string) => React.ReactNode
 }) {
   const { omit = [], model, feature, depth = 0 } = props
+  const { maxDepth } = model
   const { mate, name = '', id = '', type = '', subfeatures, uniqueId } = feature
-  // @ts-expect-error
-  // eslint-disable-next-line no-underscore-dangle
-  const { hideSubfeatures } = feature.__jbrowsefmt
   const pm = getEnv(model).pluginManager
   const session = getSession(model)
 
@@ -226,7 +224,7 @@ export function FeatureDetails(props: {
         </>
       ) : null}
 
-      {!hideSubfeatures && subfeatures?.length ? (
+      {depth < maxDepth && subfeatures?.length ? (
         <BaseCard title="Subfeatures" defaultExpanded={depth < 1}>
           {subfeatures.map((sub, idx) => (
             <FeatureDetails

packages/core/BaseFeatureWidget/index.ts

@@ -22,49 +22,103 @@ function formatSubfeatures(
   returnObj = {} as Record<string, unknown>,
 ) {
   if (depth <= currentDepth) {
-    return returnObj
+    return
   }
-  returnObj.subfeatures = obj.subfeatures?.map(sub => {
+  obj.subfeatures?.map(sub => {
     formatSubfeatures(sub, depth, parse, currentDepth + 1, returnObj)
-    return parse(sub)
+    parse(sub)
   })
-  return returnObj
 }
 
+/**
+ * #stateModel BaseFeatureWidget
+ * displays data about features, allowing configuration callbacks to modify the
+ * contents of what is displayed
+ *
+ * see: formatDetails-\>feature,formatDetails-\>subfeatures
+ */
 export default function stateModelFactory(pluginManager: PluginManager) {
   return types
     .model('BaseFeatureWidget', {
+      /**
+       * #property
+       */
       id: ElementId,
+      /**
+       * #property
+       */
       type: types.literal('BaseFeatureWidget'),
+      /**
+       * #property
+       */
       featureData: types.frozen(),
+      /**
+       * #property
+       */
       formattedFields: types.frozen(),
+      /**
+       * #property
+       */
       unformattedFeatureData: types.frozen(),
+      /**
+       * #property
+       */
       view: types.safeReference(
         pluginManager.pluggableMstType('view', 'stateModel'),
       ),
+      /**
+       * #property
+       */
       track: types.safeReference(
         pluginManager.pluggableMstType('track', 'stateModel'),
       ),
+      /**
+       * #property
+       */
       trackId: types.maybe(types.string),
+      /**
+       * #property
+       */
       trackType: types.maybe(types.string),
+      /**
+       * #property
+       */
+      maxDepth: types.maybe(types.number),
     })
     .volatile(() => ({
       error: undefined as unknown,
     }))
+
     .actions(self => ({
+      /**
+       * #action
+       */
       setFeatureData(featureData: Record<string, unknown>) {
         self.unformattedFeatureData = featureData
       },
+      /**
+       * #action
+       */
       clearFeatureData() {
         self.featureData = undefined
       },
+      /**
+       * #action
+       */
       setFormattedData(feat: Record<string, unknown>) {
         self.featureData = feat
       },
-      setExtra(type?: string, trackId?: string) {
+      /**
+       * #action
+       */
+      setExtra(type?: string, trackId?: string, maxDepth?: number) {
         self.trackId = trackId
         self.trackType = type
+        self.maxDepth = maxDepth
       },
+      /**
+       * #action
+       */
       setError(e: unknown) {
         self.error = e
       },
@@ -75,9 +129,15 @@ export default function stateModelFactory(pluginManager: PluginManager) {
           self,
           autorun(() => {
             try {
-              self.setExtra(self.track?.type, self.track?.configuration.trackId)
               const { unformattedFeatureData, track } = self
               const session = getSession(self)
+              if (track) {
+                self.setExtra(
+                  track.type,
+                  track.configuration.trackId,
+                  getConf(track, ['formatDetails', 'maxDepth']),
+                )
+              }
               if (unformattedFeatureData) {
                 const feature = clone(unformattedFeatureData)
 
@@ -92,11 +152,15 @@ export default function stateModelFactory(pluginManager: PluginManager) {
                 if (track) {
                   // eslint-disable-next-line no-underscore-dangle
                   feature.__jbrowsefmt = combine('feature', feature)
-                  const depth = getConf(track, ['formatDetails', 'depth'])
-                  formatSubfeatures(feature, depth, sub => {
-                    // eslint-disable-next-line no-underscore-dangle
-                    sub.__jbrowsefmt = combine('subfeatures', sub)
-                  })
+
+                  formatSubfeatures(
+                    feature,
+                    getConf(track, ['formatDetails', 'depth']),
+                    sub => {
+                      // eslint-disable-next-line no-underscore-dangle
+                      sub.__jbrowsefmt = combine('subfeatures', sub)
+                    },
+                  )
                 }
 
                 self.setFormattedData(feature)

packages/core/pluggableElementTypes/models/baseTrackConfig.ts

@@ -96,7 +96,6 @@ export function createBaseTrackConfig(pluginManager: PluginManager) {
           defaultValue: {},
           contextVariable: ['feature'],
         },
-
         /**
          * #slot formatDetails.subfeatures
          */
@@ -106,7 +105,6 @@ export function createBaseTrackConfig(pluginManager: PluginManager) {
           defaultValue: {},
           contextVariable: ['feature'],
         },
-
         /**
          * #slot formatDetails.depth
          */
@@ -116,6 +114,14 @@ export function createBaseTrackConfig(pluginManager: PluginManager) {
           description:
             'depth of subfeatures to iterate the formatter on formatDetails.subfeatures (e.g. you may not want to format the exon/cds subfeatures, so limited to 2',
         },
+        /**
+         * #slot formatDetails.maxDepth
+         */
+        maxDepth: {
+          type: 'number',
+          defaultValue: 99999,
+          description: 'Maximum depth to render subfeatures',
+        },
       }),
       formatAbout: ConfigurationSchema('FormatAbout', {
         /**

packages/product-core/src/RootModel/FormatDetails.ts

@@ -1,7 +1,8 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
 /**
  * #config FormatDetails
- * generally exists on the config.json or root config as configuration.formatDetails
+ * generally exists on the tracks in the config.json or as a 'session' config as
+ * configuration.formatDetails
  */
 export function FormatDetailsConfigSchemaFactory() {
   return ConfigurationSchema('FormatDetails', {
@@ -29,7 +30,16 @@ export function FormatDetailsConfigSchemaFactory() {
     depth: {
       type: 'number',
       defaultValue: 2,
-      description: 'depth to iterate on subfeatures',
+      description:
+        'depth to iterate the formatDetails->subfeatures callback on subfeatures (used for example to only apply the callback to the first layer of subfeatures)',
+    },
+    /**
+     * #slot configuration.formatDetails.maxDepth
+     */
+    maxDepth: {
+      type: 'number',
+      defaultValue: 10000,
+      description: 'hide subfeatures greater than a certain depth',
     },
   })
 }

products/jbrowse-web/src/__snapshots__/jbrowseModel.test.ts.snap

@@ -2361,6 +2361,9 @@ exports[`JBrowse model creates with non-empty snapshot 1`] = `
           "type": "LinearArcDisplay",
         },
       ],
+      "formatDetails": {
+        "maxDepth": 0,
+      },
       "name": "BigBed genes",
       "trackId": "bigbed_genes",
       "type": "FeatureTrack",

test_data/volvox/config.json

@@ -1187,6 +1187,9 @@
       "type": "FeatureTrack",
       "trackId": "bigbed_genes",
       "name": "BigBed genes",
+      "formatDetails": {
+        "maxDepth": 0
+      },
       "assemblyNames": ["volvox"],
       "category": ["Miscellaneous"],
       "adapter": {