Incorporate PR feedback

packages/lib-classifier/src/components/Classifier/components/SubjectViewer/SubjectViewer.js

@@ -12,7 +12,7 @@ function storeMapper(classifierStore) {
   const {
     subjects: { active: subject, loadingState: subjectQueueState },
     subjectViewer: { onSubjectReady, onError, loadingState: subjectReadyState },
-    projects: { isVolumetricViewer }
+    projects: { active: project }
   } = classifierStore
 
   const drawingTasks = classifierStore?.workflowSteps.findTasksByType('drawing')
@@ -21,7 +21,7 @@ function storeMapper(classifierStore) {
 
   return {
     enableInteractionLayer,
-    isVolumetricViewer,
+    isVolumetricViewer: project?.isVolumetricViewer ?? false,
     onError,
     onSubjectReady,
     subject,

packages/lib-classifier/src/store/Project/Project.js

@@ -24,6 +24,10 @@ const Project = types
     get display_name() {
       return self.strings.get('display_name')
     },
+
+    get isVolumetricViewer() {
+      return self.experimental_tools.includes('volumetricViewer')
+    },
   }))
 
 export default types.compose('ProjectResource', Resource, Project)

packages/lib-classifier/src/store/ProjectStore.js

@@ -1,4 +1,4 @@
-import { isValidReference, types } from 'mobx-state-tree'
+import { types } from 'mobx-state-tree'
 import Project from './Project'
 import ResourceStore from './ResourceStore'
 
@@ -8,12 +8,5 @@ const ProjectStore = types
     resources: types.map(Project),
     type: types.optional(types.string, 'projects')
   })
-  .views(self => ({
-    get isVolumetricViewer() {
-      return (isValidReference(() => self.active))
-        ? self.active.experimental_tools.includes('volumetricViewer')
-        : false
-    }
-  }))
 
 export default types.compose('ProjectResourceStore', ResourceStore, ProjectStore)

packages/lib-subject-viewers/src/VolumetricViewer/VolumetricViewer.js

@@ -1,10 +1,10 @@
 import { func, object, string } from 'prop-types'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import { ComponentViewer } from './components/ComponentViewer.js'
 import { ModelViewer } from './models/ModelViewer.js'
 import { ModelAnnotations } from './models/ModelAnnotations.js'
 import { ModelTool } from './models/ModelTool.js'
-import { useSubjectJSON } from './../hooks/useSubjectJSON.js'
+import { useVolumetricSubject } from './../hooks/useVolumetricSubject.js'
 import asyncStates from '@zooniverse/async-states'
 
 const DEFAULT_HANDLER = () => {}
@@ -15,42 +15,31 @@ export default function VolumetricViewer ({
   onReady = DEFAULT_HANDLER,
   subject
 }) {
-  const [subjectData, setSubjectData] = useState({ error: null, data: null })
+  const { data, loading, error } = useVolumetricSubject({ onError, onReady, subject })
+
   const [modelState] = useState({
     annotations: ModelAnnotations(),
     tool: ModelTool(),
     viewer: ModelViewer()
   })
+
+  const isLoading = loadingState === asyncStates.initialized
+    || loadingState === asyncStates.loading
+    || loading;
+  const isError = loadingState === asyncStates.error
+    || error
+    || data === null;
 
-  useEffect(() => {
-    useSubjectJSON({ setSubjectData, subject })
-  }, [subject])
-
-  useEffect(() => {
-    if (subjectData.error) onError(subjectData.error)
-    if (subjectData.data) onReady()
-  }, [subjectData])
-
-  if (loadingState === asyncStates.initialized) {
-    return <p>Async Initialized...</p>
-  } else if (loadingState === asyncStates.loading) {
-    return <p>Async Loading...</p>
-  } else if (loadingState === asyncStates.error) {
-    return <p>Async Error</p>
-  } else if (subjectData.error) {
-    return <p>SubjectData Error</p>
-  } else if (subjectData.data === null) {
-    return <p>No subject data</p>
-  } else {
-    return (
-      <ComponentViewer
+  return (isLoading)
+    ? <p>Loading...</p>
+    : (isError)
+      ? <p>Error</p>
+      : <ComponentViewer
         data-testid="subject-viewer-volumetric"
         config={{}}
-        data={subjectData.data}
+        data={data}
         models={modelState}
       />
-    )
-  }
 }
 
 export const VolumetricViewerData = ({ subjectData = '', subjectUrl = '' }) => {

packages/lib-subject-viewers/src/hooks/useVolumetricSubject.js

@@ -0,0 +1,40 @@
+// Inspired by useSubjectJSON.js in the lib-classifier package
+import { useEffect, useState } from 'react';
+
+export const useVolumetricSubject = ({ onError, onReady, subject }) => {
+  const [error, setError] = useState()
+  const [data, setData] = useState()
+
+  useEffect(() => {
+    setData(null)
+    setError(null)
+
+    if (!subject) return setError('No subject found')
+    // subjectJSON is used for testing to avoid network requests
+    if (subject?.subjectJSON) return setData(subject.subjectJSON)
+
+    const jsonLocation =
+      subject.locations.find(
+        (l) => l.type === 'application' || l.type === 'text'
+      ) || {};
+
+    if (!jsonLocation.url) return setError('No JSON url found for this subject')
+
+    fetch(jsonLocation.url)
+      .then((res) => res.json())
+      .then((data) => {
+        setData(data)
+        onReady();
+      })
+      .catch((err) => {
+        console.log('useVolumetricSubject() error', err)
+        onError(err)
+      });
+  }, [subject]);
+
+  return {
+    data: data,
+    loading: !data && !error,
+    error
+  };
+};