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'