diff --git a/.github/workflows/ci-build.yml b/.github/workflows/ci-build.yml
index a3768f4ad2..34b1560f78 100644
--- a/.github/workflows/ci-build.yml
+++ b/.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
diff --git a/packages/lib-classifier/.babelrc b/packages/lib-classifier/.babelrc
index 8e15ce0bbd..3c4735c135 100644
--- a/packages/lib-classifier/.babelrc
+++ b/packages/lib-classifier/.babelrc
@@ -9,6 +9,9 @@
},
"@zooniverse/react-components": {
"transform": "@zooniverse/react-components/${member}"
+ },
+ "@zooniverse/subject-viewers": {
+ "transform": "@zooniverse/subject-viewers/${member}"
}
}],
["module-resolver", {
@@ -27,7 +30,7 @@
}]
],
"presets": [
- ["@babel/preset-react", {
+ ["@babel/preset-react", {
"runtime": "automatic"
}],
["@babel/preset-env", {
@@ -40,7 +43,7 @@
"env": {
"es6": {
"presets": [
- ["@babel/preset-react", {
+ ["@babel/preset-react", {
"runtime": "automatic"
}],
["@babel/preset-env", {
@@ -54,7 +57,7 @@
"test": {
"presets": [
"@babel/preset-env",
- ["@babel/preset-react", {
+ ["@babel/preset-react", {
"runtime": "automatic"
}]
]
diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.js
index ecd49e2843..d347b52f90 100644
--- a/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.js
+++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.js
@@ -14,27 +14,31 @@ export const ContainerGrid = styled(Grid)`
position: relative;
grid-gap: 1.875rem;
grid-template-areas: 'viewer task';
- grid-template-columns: minmax(auto, 100rem) ${props => (props.hasSurveyTask ? '33.75rem' : '25rem')};
+ grid-template-columns: minmax(auto, 100rem) ${props =>
+ props.hasSurveyTask ? '33.75rem' : '25rem'};
margin: auto;
- ${props => props.hasSurveyTask ? css`
- @media screen and (min-width: 769px) and (max-width: 70rem) {
- grid-gap: 1.25rem;
- grid-template-areas:
- 'viewer'
- 'task';
- grid-template-columns: 100%;
- grid-template-rows: auto auto;
- margin: 0;
- }
- ` : css`
- // proportional 9:5 subject/task sizing up to a maximum subject/task width of 45rem/25rem
- @media screen and (min-width: 769px) and (max-width: 70rem) {
- grid-gap: 1.25rem;
- grid-template-areas: 'viewer task';
- grid-template-columns: 9fr 5fr;
- }
- `}
+ ${props =>
+ props.hasSurveyTask
+ ? css`
+ @media screen and (min-width: 769px) and (max-width: 70rem) {
+ grid-gap: 1.25rem;
+ grid-template-areas:
+ 'viewer'
+ 'task';
+ grid-template-columns: 100%;
+ grid-template-rows: auto auto;
+ margin: 0;
+ }
+ `
+ : css`
+ // proportional 9:5 subject/task sizing up to a maximum subject/task width of 45rem/25rem
+ @media screen and (min-width: 769px) and (max-width: 70rem) {
+ grid-gap: 1.25rem;
+ grid-template-areas: 'viewer task';
+ grid-template-columns: 9fr 5fr;
+ }
+ `}
@media screen and (max-width: 768px) {
grid-gap: 1.25rem;
@@ -48,17 +52,20 @@ export const ContainerGrid = styled(Grid)`
`
export const ViewerGrid = styled(Grid)`
- ${props => props.hasSurveyTask ? css`
- @media screen and (min-width: 70rem) {
- position: sticky;
- top: 10px;
- }
- ` : css`
- @media screen and (min-width: 769px) {
- position: sticky;
- top: 10px;
- }
- `}
+ ${props =>
+ props.hasSurveyTask
+ ? css`
+ @media screen and (min-width: 70rem) {
+ position: sticky;
+ top: 10px;
+ }
+ `
+ : css`
+ @media screen and (min-width: 769px) {
+ position: sticky;
+ top: 10px;
+ }
+ `}
height: fit-content;
grid-area: viewer;
@@ -72,17 +79,20 @@ const StyledTaskAreaContainer = styled.div`
`
const StyledTaskArea = styled(Box)`
- ${props => props.hasSurveyTask ? css`
- @media screen and (min-width: 70rem) {
- position: sticky;
- top: 10px;
- }
- ` : css`
- @media screen and (min-width: 769px) {
- position: sticky;
- top: 10px;
- }
- `}
+ ${props =>
+ props.hasSurveyTask
+ ? css`
+ @media screen and (min-width: 70rem) {
+ position: sticky;
+ top: 10px;
+ }
+ `
+ : css`
+ @media screen and (min-width: 769px) {
+ position: sticky;
+ top: 10px;
+ }
+ `}
`
const StyledImageToolbarContainer = styled.div`
@@ -100,10 +110,7 @@ export default function MaxWidth({
hasSurveyTask = false
}) {
return (
-
+
{separateFramesView ? (
@@ -111,10 +118,7 @@ export default function MaxWidth({
) : (
-
+
diff --git a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/SubjectViewer.js b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/SubjectViewer.js
index 9fdd5ad10b..5128b8fbb4 100644
--- a/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/SubjectViewer.js
+++ b/packages/lib-classifier/src/components/Classifier/components/SubjectViewer/SubjectViewer.js
@@ -1,26 +1,24 @@
import asyncStates from '@zooniverse/async-states'
import PropTypes from 'prop-types'
import { useTranslation } from '@translations/i18n'
+import { lazy, Suspense } from 'react'
+// import VolumetricViewer from '@zooniverse/subject-viewers/VolumetricViewer'
import { withStores } from '@helpers'
import getViewer from './helpers/getViewer'
+const VolumetricViewer = lazy(() => import('@zooniverse/subject-viewers/VolumetricViewer'))
+const ProtoViewer = lazy(() => import('@zooniverse/subject-viewers/ProtoViewer'))
+
function storeMapper(classifierStore) {
const {
- subjects: {
- active: subject,
- loadingState: subjectQueueState
- },
- subjectViewer: {
- onSubjectReady,
- onError,
- loadingState: subjectReadyState
- }
+ subjects: { active: subject, loadingState: subjectQueueState },
+ subjectViewer: { onSubjectReady, onError, loadingState: subjectReadyState }
} = classifierStore
const drawingTasks = classifierStore?.workflowSteps.findTasksByType('drawing')
const transcriptionTasks = classifierStore?.workflowSteps.findTasksByType('transcription')
- const enableInteractionLayer = (drawingTasks.length > 0 || transcriptionTasks.length > 0)
+ const enableInteractionLayer = drawingTasks.length > 0 || transcriptionTasks.length > 0
return {
enableInteractionLayer,
@@ -41,31 +39,39 @@ function SubjectViewer({
subjectReadyState
}) {
const { t } = useTranslation('components')
+
switch (subjectQueueState) {
case asyncStates.initialized: {
return null
}
case asyncStates.loading: {
- return ({t('SubjectViewer.loading')}
)
+ return {t('SubjectViewer.loading')}
}
case asyncStates.error: {
console.error('There was an error loading the subjects')
return null
}
case asyncStates.success: {
- const Viewer = getViewer(subject?.viewer)
-
+ let Viewer
+ if (subject?.viewer === 'volumetric') {
+ Viewer = ProtoViewer
+ } else {
+ Viewer = getViewer(subject?.viewer)
+ }
+
if (Viewer) {
return (
-
+ Suspense boundary
}>
+
+
)
}
diff --git a/packages/lib-subject-viewers/src/ProtoViewer/ProtoViewer.js b/packages/lib-subject-viewers/src/ProtoViewer/ProtoViewer.js
new file mode 100644
index 0000000000..fafd6ac63d
--- /dev/null
+++ b/packages/lib-subject-viewers/src/ProtoViewer/ProtoViewer.js
@@ -0,0 +1,66 @@
+import asyncStates from '@zooniverse/async-states'
+import { useEffect } from 'react'
+
+const DEFAULT_HANDLER = () => {}
+
+const defaultSubject = {
+ id: '',
+ locations: []
+}
+
+const defaultTarget = {
+ clientHeight: 0,
+ clientWidth: 0,
+ naturalHeight: 0,
+ naturalWidth: 0
+}
+
+export default function ProtoViewer({
+ /*
+ loadingState is defined in SubjectViewerStore.js. onReady and onError affect it
+ and then it's used below to choose rendering options
+ */
+ loadingState = asyncStates.initialized,
+ /*
+ onError is defined in lib-classifier's SubjectViewerStore.js. When called, it sets
+ SubjectViewerStore's loadingState to error.
+ */
+ onError = DEFAULT_HANDLER,
+ /*
+ onReady is defined in lib-classifier's SubjectViewerStore.js as onSubjectReady().
+ It sets the loadingState on the SubjectViewerStore to success. That success triggers
+ an update of subjectReadyState in SubjectViewer.js which is passed as loadingState to
+ the Viewer *and* the TaskArea, preventing users from making classifications when a subject
+ viewer is not ready.
+ */
+ onReady = DEFAULT_HANDLER,
+ subject = defaultSubject
+}) {
+ /*
+ Here's where unique handling of subject data happens every time the subject changes.
+ Examples are useSubjectImage() or useSubjectJSON() hooks in lib-classifier.
+ */
+ useEffect(
+ function onSubjectChange() {
+ function handleSubject() {} // etc, fetch more subject data if needed
+ onReady(defaultTarget)
+ },
+ [subject]
+ )
+
+ /*
+ These are the render options. First catch an error if needed,
+ then render subject viewer as long as the loadingState says it's okay.
+ */
+ if (loadingState === asyncStates.error) {
+ return Something went wrong.
+ }
+
+ if (loadingState !== asyncStates.initialized) {
+ return (
+ This is the ProtoViewer. Here's the subject ID: {subject.id}
+ )
+ }
+
+ return null
+}
diff --git a/packages/lib-subject-viewers/src/ProtoViewer/index.js b/packages/lib-subject-viewers/src/ProtoViewer/index.js
new file mode 100644
index 0000000000..13a9d8cff1
--- /dev/null
+++ b/packages/lib-subject-viewers/src/ProtoViewer/index.js
@@ -0,0 +1 @@
+export { default } from './ProtoViewer.js'
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/README.md b/packages/lib-subject-viewers/src/VolumetricViewer/README.md
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/README.md
rename to packages/lib-subject-viewers/src/VolumetricViewer/README.md
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/VolumetricViewer.js b/packages/lib-subject-viewers/src/VolumetricViewer/VolumetricViewer.js
similarity index 92%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/VolumetricViewer.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/VolumetricViewer.js
index e0f7716aea..71b604911c 100644
--- a/packages/lib-subject-viewers/src/components/VolumetricViewer/VolumetricViewer.js
+++ b/packages/lib-subject-viewers/src/VolumetricViewer/VolumetricViewer.js
@@ -6,7 +6,7 @@ import { ModelViewer } from './models/ModelViewer.js'
import { ModelAnnotations } from './models/ModelAnnotations.js'
import { ModelTool } from './models/ModelTool.js'
-export default function VolumetricViewerComponent ({
+export default function VolumetricViewer ({
config = {},
subjectData = '',
subjectUrl = '',
@@ -61,11 +61,11 @@ export const VolumetricViewerData = ({ subjectData = '', subjectUrl = '' }) => {
viewer: ModelViewer()
}
},
- component: VolumetricViewerComponent
+ component: VolumetricViewer
}
}
-VolumetricViewerComponent.propTypes = {
+VolumetricViewer.propTypes = {
config: object,
subjectData: string,
subjectUrl: string,
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/components/AnnotationView.js b/packages/lib-subject-viewers/src/VolumetricViewer/components/AnnotationView.js
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/components/AnnotationView.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/components/AnnotationView.js
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/components/ComponentViewer.js b/packages/lib-subject-viewers/src/VolumetricViewer/components/ComponentViewer.js
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/components/ComponentViewer.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/components/ComponentViewer.js
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/components/Config.js b/packages/lib-subject-viewers/src/VolumetricViewer/components/Config.js
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/components/Config.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/components/Config.js
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/components/Cube.js b/packages/lib-subject-viewers/src/VolumetricViewer/components/Cube.js
similarity index 99%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/components/Cube.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/components/Cube.js
index 28f2d50307..63ed209ae0 100644
--- a/packages/lib-subject-viewers/src/components/VolumetricViewer/components/Cube.js
+++ b/packages/lib-subject-viewers/src/VolumetricViewer/components/Cube.js
@@ -25,9 +25,9 @@ import { SortedSetUnion } from './../helpers/SortedSet.js'
// Shim for test:ci in GH needs this to work
let OrbitControls = null;
-import("three/addons/controls/OrbitControls.js").then((module) => {
- OrbitControls = module.OrbitControls;
-})
+// import("three/addons/controls/OrbitControls.js").then((module) => {
+// OrbitControls = module.OrbitControls;
+// })
// Shim for node.js testing
let glContext = null
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/components/Histogram.js b/packages/lib-subject-viewers/src/VolumetricViewer/components/Histogram.js
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/components/Histogram.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/components/Histogram.js
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/components/InputRange.js b/packages/lib-subject-viewers/src/VolumetricViewer/components/InputRange.js
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/components/InputRange.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/components/InputRange.js
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/components/InputRangeDual.js b/packages/lib-subject-viewers/src/VolumetricViewer/components/InputRangeDual.js
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/components/InputRangeDual.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/components/InputRangeDual.js
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/components/Plane.js b/packages/lib-subject-viewers/src/VolumetricViewer/components/Plane.js
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/components/Plane.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/components/Plane.js
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/css/globals.css b/packages/lib-subject-viewers/src/VolumetricViewer/css/globals.css
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/css/globals.css
rename to packages/lib-subject-viewers/src/VolumetricViewer/css/globals.css
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/data/4x4x4.json b/packages/lib-subject-viewers/src/VolumetricViewer/data/4x4x4.json
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/data/4x4x4.json
rename to packages/lib-subject-viewers/src/VolumetricViewer/data/4x4x4.json
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/helpers/AlgorithmAStar.js b/packages/lib-subject-viewers/src/VolumetricViewer/helpers/AlgorithmAStar.js
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/helpers/AlgorithmAStar.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/helpers/AlgorithmAStar.js
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/helpers/SortedSet.js b/packages/lib-subject-viewers/src/VolumetricViewer/helpers/SortedSet.js
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/helpers/SortedSet.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/helpers/SortedSet.js
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/helpers/pointColor.js b/packages/lib-subject-viewers/src/VolumetricViewer/helpers/pointColor.js
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/helpers/pointColor.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/helpers/pointColor.js
diff --git a/packages/lib-subject-viewers/src/VolumetricViewer/index.js b/packages/lib-subject-viewers/src/VolumetricViewer/index.js
new file mode 100644
index 0000000000..b610574138
--- /dev/null
+++ b/packages/lib-subject-viewers/src/VolumetricViewer/index.js
@@ -0,0 +1 @@
+export { default } from './VolumetricViewer.js'
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/models/ModelAnnotations.js b/packages/lib-subject-viewers/src/VolumetricViewer/models/ModelAnnotations.js
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/models/ModelAnnotations.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/models/ModelAnnotations.js
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/models/ModelTool.js b/packages/lib-subject-viewers/src/VolumetricViewer/models/ModelTool.js
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/models/ModelTool.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/models/ModelTool.js
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/models/ModelViewer.js b/packages/lib-subject-viewers/src/VolumetricViewer/models/ModelViewer.js
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/models/ModelViewer.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/models/ModelViewer.js
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/tests/AlgorithmAStar.spec.js b/packages/lib-subject-viewers/src/VolumetricViewer/tests/AlgorithmAStar.spec.js
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/tests/AlgorithmAStar.spec.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/tests/AlgorithmAStar.spec.js
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/tests/ModelAnnotations.spec.js b/packages/lib-subject-viewers/src/VolumetricViewer/tests/ModelAnnotations.spec.js
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/tests/ModelAnnotations.spec.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/tests/ModelAnnotations.spec.js
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/tests/ModelTool.spec.js b/packages/lib-subject-viewers/src/VolumetricViewer/tests/ModelTool.spec.js
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/tests/ModelTool.spec.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/tests/ModelTool.spec.js
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/tests/ModelViewer.spec.js b/packages/lib-subject-viewers/src/VolumetricViewer/tests/ModelViewer.spec.js
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/tests/ModelViewer.spec.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/tests/ModelViewer.spec.js
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/tests/SortedSet.spec.js b/packages/lib-subject-viewers/src/VolumetricViewer/tests/SortedSet.spec.js
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/tests/SortedSet.spec.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/tests/SortedSet.spec.js
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/tests/VolumetricViewer.spec.js b/packages/lib-subject-viewers/src/VolumetricViewer/tests/VolumetricViewer.spec.js
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/tests/VolumetricViewer.spec.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/tests/VolumetricViewer.spec.js
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/tests/VolumetricViewer.stories.js b/packages/lib-subject-viewers/src/VolumetricViewer/tests/VolumetricViewer.stories.js
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/tests/VolumetricViewer.stories.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/tests/VolumetricViewer.stories.js
diff --git a/packages/lib-subject-viewers/src/components/VolumetricViewer/tests/pointColor.spec.js b/packages/lib-subject-viewers/src/VolumetricViewer/tests/pointColor.spec.js
similarity index 100%
rename from packages/lib-subject-viewers/src/components/VolumetricViewer/tests/pointColor.spec.js
rename to packages/lib-subject-viewers/src/VolumetricViewer/tests/pointColor.spec.js
diff --git a/packages/lib-subject-viewers/src/index.js b/packages/lib-subject-viewers/src/index.js
index c2b83417a5..3dfe5d0b9f 100644
--- a/packages/lib-subject-viewers/src/index.js
+++ b/packages/lib-subject-viewers/src/index.js
@@ -1,2 +1,4 @@
-export { default as VolumetricViewer } from './components/VolumetricViewer/VolumetricViewer.js'
-export { VolumetricViewerData } from './components/VolumetricViewer/VolumetricViewer.js'
+export { default as VolumetricViewer } from './VolumetricViewer/VolumetricViewer.js'
+export { default as ProtoViewer } from './ProtoViewer'
+
+export { VolumetricViewerData } from './VolumetricViewer/VolumetricViewer.js'