Display message if sequence ontology is unavailable (#453)

packages/jbrowse-plugin-apollo/src/makeDisplayComponent.tsx

@@ -14,6 +14,9 @@ import { TrackLines } from './SixFrameFeatureDisplay/components'
 import { SixFrameFeatureDisplay } from './SixFrameFeatureDisplay/stateModel'
 import { TabularEditorPane } from './TabularEditor'
 
+import { getSession } from '@jbrowse/core/util'
+import { ApolloSessionModel } from './session'
+
 const accordionControlHeight = 12
 
 const useStyles = makeStyles()((theme) => ({
@@ -155,6 +158,11 @@ export const DisplayComponent = observer(function DisplayComponent({
 }: {
   model: LinearApolloDisplayI
 }) {
+  const session = getSession(model) as unknown as ApolloSessionModel
+  const { ontologyManager } = session.apolloDataStore
+  const { featureTypeOntology } = ontologyManager
+  const ontologyStore = featureTypeOntology?.dataStore
+
   const { classes } = useStyles()
 
   const {
@@ -177,6 +185,30 @@ export const DisplayComponent = observer(function DisplayComponent({
   useEffect(() => {
     scrollSelectedFeatureIntoView(model, canvasScrollContainerRef)
   }, [model, selectedFeature])
+
+  if (!ontologyStore) {
+    return (
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '25%',
+        }}
+      >
+        <p
+          style={{
+            color: 'DimGray',
+            fontSize: '100%',
+            backgroundColor: 'white',
+          }}
+        >
+          {'Sequence ontology not found. Please load one before continuing'}
+        </p>
+      </div>
+    )
+  }
+
   return (
     <div className={classes.details} style={{ height: overallHeight }}>
       <AccordionControl