Add navigation to parent/child features in feature details widget (#483)

* feature details navigation

* fix

* Fix feature filter default

* A few stylistic updates

* Lint fix

---------

Co-authored-by: Garrett Stevens <stevens.garrett.j@gmail.com>

Author: shashankbrgowda

packages/jbrowse-plugin-apollo/src/FeatureDetailsWidget/ApolloFeatureDetailsWidget.tsx

@@ -8,6 +8,7 @@ import { Attributes } from './Attributes'
 import { BasicInformation } from './BasicInformation'
 import { ApolloFeatureDetailsWidget as ApolloFeatureDetails } from './model'
 import { Sequence } from './Sequence'
+import { FeatureDetailsNavigation } from './FeatureDetailsNavigation'
 
 const useStyles = makeStyles()((theme) => ({
   root: {
@@ -59,6 +60,8 @@ export const ApolloFeatureDetailsWidget = observer(
           assembly={currentAssembly._id}
           refName={refName}
         />
+        <hr />
+        <FeatureDetailsNavigation model={model} feature={feature} />
       </div>
     )
   },

packages/jbrowse-plugin-apollo/src/FeatureDetailsWidget/FeatureDetailsNavigation.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+
+import { Button, Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import { AnnotationFeature } from '@apollo-annotation/mst'
+import { ApolloFeatureDetailsWidget as ApolloFeatureDetails } from './model'
+
+export const FeatureDetailsNavigation = observer(
+  function FeatureDetailsNavigation(props: {
+    model: ApolloFeatureDetails
+    feature: AnnotationFeature
+  }) {
+    const { feature, model } = props
+    const { children, parent } = feature
+    const childFeatures = []
+    if (children) {
+      for (const [, child] of children) {
+        childFeatures.push(child)
+      }
+    }
+
+    if (!(parent ?? childFeatures.length > 0)) {
+      return null
+    }
+
+    return (
+      <div>
+        <Typography variant="h5">Go to related feature</Typography>
+        {parent && (
+          <div>
+            <Typography variant="h6">Parent:</Typography>
+            <Button
+              variant="contained"
+              onClick={() => {
+                model.setFeature(parent)
+              }}
+            >
+              {parent.type} ({parent.min}..{parent.max})
+            </Button>
+          </div>
+        )}
+        {childFeatures.length > 0 && (
+          <div>
+            <Typography variant="h6">
+              {childFeatures.length === 1 ? 'Child' : 'Children'}:
+            </Typography>
+            {childFeatures.map((child) => (
+              <div key={child._id} style={{ marginBottom: 5 }}>
+                <Button
+                  variant="contained"
+                  onClick={() => {
+                    model.setFeature(child)
+                  }}
+                >
+                  {child.type} ({child.min}..{child.max})
+                </Button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    )
+  },
+)

packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/base.ts

@@ -43,7 +43,7 @@ export function baseModelFactory(
           (n) => n >= minDisplayHeight,
         ),
       ),
-      filteredFeatureTypes: types.optional(types.array(types.string), ['gene']),
+      filteredFeatureTypes: types.array(types.string),
     })
     .views((self) => {
       const { configuration, renderProps: superRenderProps } = self

packages/jbrowse-plugin-apollo/src/LinearApolloDisplay/stateModel/layouts.ts

@@ -38,7 +38,7 @@ export function layoutsModelFactory(
               refName !== assembly?.getCanonicalRefName(feature.refSeq) ||
               !doesIntersect2(start, end, feature.min, feature.max) ||
               feature.length > self.featuresMinMaxLimit ||
-              (self.filteredFeatureTypes &&
+              (self.filteredFeatureTypes.length > 0 &&
                 !self.filteredFeatureTypes.includes(feature.type))
             ) {
               continue
@@ -135,7 +135,7 @@ export function layoutsModelFactory(
             if (
               refName !== assembly?.getCanonicalRefName(feature.refSeq) ||
               !doesIntersect2(start, end, feature.min, feature.max) ||
-              (self.filteredFeatureTypes &&
+              (self.filteredFeatureTypes.length > 0 &&
                 !self.filteredFeatureTypes.includes(feature.type))
             ) {
               continue