feature details navigation

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,9 @@ export const ApolloFeatureDetailsWidget = observer(
           assembly={currentAssembly._id}
           refName={refName}
         />
+        <hr />
+        <FeatureDetailsNavigation model={model} feature={feature} />
+        <hr />
       </div>
     )
   },

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

@@ -0,0 +1,58 @@
+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 childrenSnapshot = []
+    if (children) {
+      for (const [, child] of children) {
+        childrenSnapshot.push(child)
+      }
+    }
+
+    return (
+      <div>
+        {parent && (
+          <div>
+            <Typography variant="h5">Parent: </Typography>
+            <Button
+              variant="contained"
+              onClick={() => {
+                model.setFeature(parent)
+              }}
+            >
+              {parent.type} ({parent.min}..{parent.max})
+            </Button>
+          </div>
+        )}
+        {childrenSnapshot.length > 0 && (
+          <div>
+            <Typography variant="h5">Children: </Typography>
+            {childrenSnapshot.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>
+    )
+  },
+)