DRAFT: POC of VV Classification in FEM

.github/workflows/ci-build.yml

@@ -21,6 +21,7 @@ jobs:
 
       - run: yarn install --production=false --frozen-lockfile --ignore-scripts
       - run: yarn workspace @zooniverse/react-components build:es6
+      - run: yarn workspace @zooniverse/subject-viewers build:es6
       - run: yarn workspace @zooniverse/classifier build:es6
       - run: yarn workspace @zooniverse/fe-project build
 
@@ -63,9 +64,9 @@ jobs:
 
       - run: yarn install --production=false --frozen-lockfile --ignore-scripts
       - run: yarn workspace @zooniverse/react-components build:es6
+      - run: yarn workspace @zooniverse/subject-viewers build:es6
       - run: yarn workspace @zooniverse/content build:es6
       - run: yarn workspace @zooniverse/user build:es6
-      - run: yarn workspace @zooniverse/subject-viewers build:es6
       - run: yarn workspace @zooniverse/classifier build:es6
       - run: yarn workspace @zooniverse/fe-root build
 
@@ -82,8 +83,8 @@ jobs:
 
       - run: yarn install --production=false --frozen-lockfile --ignore-scripts
       - run: yarn workspace @zooniverse/react-components build:es6
+      - run: yarn workspace @zooniverse/subject-viewers build:es6
       - run: yarn workspace @zooniverse/content build:es6
       - run: yarn workspace @zooniverse/user build:es6
-      - run: yarn workspace @zooniverse/subject-viewers build:es6
       - run: yarn workspace @zooniverse/classifier build:es6
       - run: yarn deploy-storybook --dry-run

packages/app-project/package.json

@@ -60,6 +60,9 @@
     "swr": "~2.2.0",
     "validator": "~13.11.0"
   },
+	"peerDependencies": {
+    "@zooniverse/subject-viewers": "0.1.0"
+	},
   "devDependencies": {
     "@babel/register": "~7.23.7",
     "@storybook/addon-a11y": "~7.6.11",

packages/lib-classifier/package.json

@@ -38,7 +38,6 @@
     "@visx/shape": "~3.5.0",
     "@visx/zoom": "~3.3.0",
     "@zooniverse/async-states": "~0.0.1",
-    "@zooniverse/subject-viewers": "0.1.0",
     "cuid": "~3.0.0",
     "d3": "~6.7.0",
     "graphql": "~16.9.0",
@@ -56,6 +55,7 @@
     "@zooniverse/grommet-theme": "3.x.x",
     "@zooniverse/panoptes-js": "~0.5.0",
     "@zooniverse/react-components": "~1.x.x",
+    "@zooniverse/subject-viewers": "0.1.0",
     "grommet": "~2.x.x",
     "grommet-icons": "~4.x.x",
     "react": ">= 16.14",

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

@@ -7,6 +7,11 @@ import getViewer from './helpers/getViewer'
 
 function storeMapper(classifierStore) {
   const {
+    projects: {
+      active: {
+        experimental_tools
+      }
+    },
     subjects: {
       active: subject,
       loadingState: subjectQueueState
@@ -21,21 +26,28 @@ function storeMapper(classifierStore) {
   const drawingTasks = classifierStore?.workflowSteps.findTasksByType('drawing')
   const transcriptionTasks = classifierStore?.workflowSteps.findTasksByType('transcription')
   const enableInteractionLayer = (drawingTasks.length > 0 || transcriptionTasks.length > 0)
+  const projectViewer = (experimental_tools.includes('volumetricViewer'))
+    ? 'volumetric'
+    : null
 
   return {
+    classifierStore,
     enableInteractionLayer,
     onError,
     onSubjectReady,
+    projectViewer,
     subject,
     subjectQueueState,
     subjectReadyState
   }
 }
 
 function SubjectViewer({
+  classifierStore,
   enableInteractionLayer,
   onError,
   onSubjectReady,
+  projectViewer,
   subject,
   subjectQueueState = asyncStates.initialized,
   subjectReadyState
@@ -53,20 +65,31 @@ function SubjectViewer({
       return null
     }
     case asyncStates.success: {
-      const Viewer = getViewer(subject?.viewer)
+      const Viewer = getViewer(projectViewer ?? subject?.viewer)
 
       if (Viewer) {
-        return (
-          <Viewer
-            enableInteractionLayer={enableInteractionLayer}
-            key={subject.id}
-            subject={subject}
-            loadingState={subjectReadyState}
-            onError={onError}
-            onReady={onSubjectReady}
-            viewerConfiguration={subject?.viewerConfiguration}
-          />
-        )
+        if (!projectViewer) {
+          return (
+            <Viewer
+              enableInteractionLayer={enableInteractionLayer}
+              key={subject.id}
+              subject={subject}
+              loadingState={subjectReadyState}
+              onError={onError}
+              onReady={onSubjectReady}
+              viewerConfiguration={subject?.viewerConfiguration}
+            />
+          )
+        } else {
+          const subjectUrl = Object.values(subject.locations[0])[2];
+          const view = Viewer({ subjectUrl });
+          classifierStore.subjects.addViewerModels({ models: view.data.models });
+          const Component = view.component;
+
+          return (
+            <Component {...view.data} />
+          )
+        }
       }
 
       return null

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

@@ -7,6 +7,7 @@ import SingleImageViewer from '../../components/SingleImageViewer'
 import SingleTextViewer from '../../components/SingleTextViewer'
 import SingleVideoViewer from '../../components/SingleVideoViewer'
 import SubjectGroupViewer from '../../components/SubjectGroupViewer'
+import { VolumetricViewerData } from '@zooniverse/subject-viewers'
 
 const viewers = {
   dataImage: DataImageViewer,
@@ -20,7 +21,8 @@ const viewers = {
   singleText: SingleTextViewer,
   singleVideo: SingleVideoViewer,
   subjectGroup: SubjectGroupViewer,
-  variableStar: JSONDataViewer
+  variableStar: JSONDataViewer,
+  volumetric: VolumetricViewerData
 }
 
 function getViewer (viewer) {

packages/lib-classifier/src/components/Classifier/components/TaskArea/components/Tasks/Tasks.js

@@ -6,6 +6,8 @@ import { useTranslation } from '@translations/i18n'
 import Task from './components/Task'
 import TaskHelp from './components/TaskHelp'
 import TaskNavButtons from './components/TaskNavButtons'
+import { useStores } from '@hooks'
+import { withFeatureFlag } from '@helpers'
 
 /**
 The classifier tasks area. It displays tasks for the active step, along with task help (if any) and navigation buttons to go to the next/previous step, or submit the classification.
@@ -21,6 +23,10 @@ export default function Tasks({
   subjectReadyState,
   step
 }) {
+  const classifierStore = useStores()
+	const cp = classifierStore.projects.toJSON();
+	const isVolumetric = cp.resources[cp.active].experimental_tools.includes('volumetricViewer');
+
   const { t } = useTranslation('components')
 
   switch (loadingState) {
@@ -36,7 +42,8 @@ export default function Tasks({
     }
     case asyncStates.success: {
       const ready = subjectReadyState === asyncStates.success
-      if (classification && step) {
+
+			if (classification && step) {
         // setting the wrapping box of the task component to a basis of 246px feels hacky,
         // but gets the area to be the same 453px height (or very close) as the subject area
         // and keeps the task nav buttons at the the bottom area
@@ -67,7 +74,20 @@ export default function Tasks({
               </Paragraph>}
           </Box>
         )
-      }
+      } else if (classification && isVolumetric) {
+				// TRAVDO: VolumetricViewer | copy from above to make work
+				return (
+          <Box
+            key={classification.id}
+            as='form'
+            gap='small'
+            justify='between'
+            fill
+          >
+            <TaskNavButtons />
+          </Box>
+        )
+			}
 
       return null
     }

packages/lib-classifier/src/components/Classifier/components/TaskArea/components/Tasks/components/TaskNavButtons/components/DoneButton/DoneButtonConnector.js

@@ -21,7 +21,7 @@ function storeMapper(store) {
 
     function onClick(event) {
       event.preventDefault()
-      step.completeAndValidate(annotations)
+      step?.completeAndValidate(annotations)	// TRAVDO: step? = the "?" was added
       finish()
       return completeClassification()
     }

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

@@ -155,6 +155,29 @@ const ClassificationStore = types
           return Promise.resolve(true)
         }
 
+        // TRAVDO: Handle VolumetricViewer differently
+        const cs = getRoot(self);
+        const cp = cs.projects.toJSON();
+        const isVolumetric = cp.resources[cp.active].experimental_tools.includes('volumetricViewer');
+        if (isVolumetric) {
+          const annotations = cs.subjects.viewerModels.annotations.export();
+          classificationToSubmit.annotations = annotations.map(annotation => {
+            return {
+              task: 'T0',
+              taskType: 'drawing',
+              value: [
+                {
+                  frame: 0,
+                  toolIndex: 0,
+                  toolType: 'volumetricPoint',
+                  ...annotation
+                }
+              ]
+            }
+          })
+        }
+        // TRAVEND
+
         return self.submitClassification(classificationToSubmit)
       } else {
         if (process.browser) {

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

@@ -75,11 +75,16 @@ const SubjectStore = types
 
   .volatile(self => {
     return {
+      viewerModels: {},
       onReset: () => null
     }
   })
 
   .actions(self => {
+    function addViewerModels({ models }) {
+      self.viewerModels = models;
+    }
+
     function _addMiddleware(call, next, abort) {
       if (call.name === 'advance') {
         _onSubjectAdvance(call, next, abort)
@@ -390,6 +395,7 @@ const SubjectStore = types
     }
 
     return {
+      addViewerModels,
       advance,
       afterAttach,
       append,

packages/lib-subject-viewers/package.json

@@ -31,9 +31,14 @@
     "storybook": "storybook dev -p 6008",
     "build-storybook": "storybook build",
     "test": "mocha --config ./test/.mocharc.json ./.storybook/specConfig.js \"./src/**/*.spec.js\"",
-    "test:ci": "mocha --config ./test/.mocharc.json ./.storybook/specConfig.js --reporter=min \"./src/**/*.spec.js\""
+    "test:ci": "mocha --config ./test/.mocharc.json ./.storybook/specConfig.js --reporter=min \"./src/**/*.spec.js\"",
+    "watch": "watch 'yarn build' ./src"
+  },
+  "dependencies": {
+    "buffer": "^6.0.3",
+    "three": "^0.162.0",
+    "watch": "^1.0.2"
   },
-  "dependencies": {},
   "peerDependencies": {
     "@zooniverse/grommet-theme": "3.x.x",
     "grommet": "2.x.x",

packages/lib-subject-viewers/src/components/ProtoViewer/ProtoViewer.js

@@ -1,4 +1,4 @@
-export default function Home () {
+export default function ProtoViewer () {
   return (
     <div>
       <h2>ProtoViewer</h2>

packages/lib-subject-viewers/src/components/ProtoViewer/ProtoViewer.spec.js

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react'
 import { composeStory } from '@storybook/react'
 import Meta, { Default } from './ProtoViewer.stories.js'
 
-describe('Component > AboutHeader', function () {
+describe('Component > ProtoViewer', function () {
   const DefaultStory = composeStory(Default, Meta)
 
   before(function () {

packages/lib-subject-viewers/src/components/VolumetricViewer/README.md

@@ -0,0 +1,3 @@
+# VolumetricViewer
+
+Test component that ensures the package is setup correctly and importable into other peer packages.

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

@@ -0,0 +1,56 @@
+import { useEffect, useState } from 'react'
+import { Buffer } from 'buffer'
+import { ComponentViewer } from "./components/ComponentViewer.js";
+import { ModelViewer } from "./components/ModelViewer.js";
+import { ModelAnnotations } from "./components/ModelAnnotations.js";
+import { ModelTool } from "./components/ModelTool.js";
+
+export default function VolumetricViewerComponent ({
+  config,
+  subjectUrl = 'https://panoptes-uploads-staging.zooniverse.org/subject_location/1101682c-5ffc-41ad-9c9d-8dd80682fa76.json',
+  models
+}) {
+  const [ data, setData ] = useState(null);
+  if (!models) {
+    const [ data ] = useState({
+      annotations: ModelAnnotations(),
+      tool: ModelTool(),
+      viewer: ModelViewer(),
+    });
+    models = data;
+  }
+
+  useEffect(() => {
+    fetch(subjectUrl)
+      .then((res) => res.json())
+      .then((data) => {
+        // data is base64. Convert to Uint8 array
+        setData(Buffer.from(data, "base64"));
+      });
+  }, []);
+
+  if (!data || !models) return <div>Loading...</div>;
+
+  return (
+    <ComponentViewer
+      config={config}
+      data={data}
+      models={models}
+    />
+  )
+}
+
+export const VolumetricViewerData = (params) => {
+  return {
+    data: {
+      config: {},
+      subjectUrl: params?.subjectUrl ?? 'https://panoptes-uploads-staging.zooniverse.org/subject_location/1101682c-5ffc-41ad-9c9d-8dd80682fa76.json',
+      models: {
+        annotations: ModelAnnotations(),
+        tool: ModelTool(),
+        viewer: ModelViewer(),
+      }
+    },
+    component: VolumetricViewerComponent
+  };
+};

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

@@ -0,0 +1,17 @@
+import { render } from '@testing-library/react'
+import { composeStory } from '@storybook/react'
+import Meta, { Default } from './VolumetricViewer.stories.js'
+
+describe('Component > VolumetricViewer', function () {
+  const VolumetricViewer = composeStory(Default, Meta)
+
+  before(function () {
+    render(
+      <VolumetricViewer />
+    )
+  })
+
+  it('should load without errors', function () {
+    expect(document).to.be.ok()
+  })
+})

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

@@ -0,0 +1,10 @@
+import VolumetricViewer from './VolumetricViewer'
+
+export default {
+  title: 'Components / VolumetricViewer',
+  component: VolumetricViewer
+}
+
+export const Default = () => {
+  return <VolumetricViewer />
+}