feat: Study Contribution

packages/client/src/App.tsx

@@ -7,8 +7,8 @@ import { NewProject } from './pages/projects/NewProject';
 import { ProjectControl } from './pages/projects/ProjectControl';
 import { SuccessPage } from './pages/SuccessPage';
 import { NewStudy } from './pages/studies/NewStudy';
-import { ContributePage } from './pages/contribute/Contribute';
-import { TagView } from './components/TagView.component';
+import { ContributeLanding } from './pages/contribute/ContributeLanding';
+import { TaggingInterface } from './pages/contribute/TaggingInterface';
 import { StudyControl } from './pages/studies/StudyControl';
 import { ProjectAccess } from './pages/datasets/ProjectAccess';
 import { ProjectUserPermissions } from './pages/projects/ProjectUserPermissions';
@@ -131,8 +131,8 @@ const MyRoutes: FC = () => {
         <Route path={'/successpage'} element={<SuccessPage />} />
         <Route path={'/dataset/controls'} element={<DatasetControls />} />
         <Route path={'/dataset/projectaccess'} element={<ProjectAccess />} />
-        <Route path={'/study/contribute'} element={<ContributePage />} />
-        <Route path={'/tagging'} element={<TagView />} />
+        <Route path={'/contribute/landing'} element={<ContributeLanding />} />
+        <Route path={'/contribute/tagging'} element={<TaggingInterface />} />
         <Route path={'/logoutpage'} element={<LogoutPage />} />
       </Route>
     </Routes>

packages/client/src/components/EntryView.component.tsx

@@ -1,32 +1,38 @@
+import { Box } from '@mui/material';
 import { Entry } from '../graphql/graphql';
 import { useEffect, useRef } from 'react';
 
 export interface EntryViewProps {
   entry: Entry;
   width: number;
+  pauseFrame?: 'start' | 'end' | 'middle';
+  autoPlay?: boolean;
+  mouseOverControls?: boolean;
+  displayControls?: boolean;
 }
 
 export const EntryView: React.FC<EntryViewProps> = (props) => {
-  return getEntryView(props.entry);
+  return getEntryView(props);
 };
 
-const getEntryView = (entry: Entry) => {
-  if (entry.contentType.startsWith('video/')) {
-    return <VideoEntryView entry={entry} width={150} />;
+const getEntryView = (props: EntryViewProps) => {
+  if (props.entry.contentType.startsWith('video/')) {
+    return <VideoEntryView {...props} />;
   }
-  if (entry.contentType.startsWith('image/')) {
-    return <ImageEntryView entry={entry} width={150} />;
+  if (props.entry.contentType.startsWith('image/')) {
+    return <ImageEntryView {...props} />;
   }
   console.error('Unknown entry type');
   return <p>Placeholder</p>;
 };
 
+// TODO: Add in ability to control video play, pause, and middle frame selection
 const VideoEntryView: React.FC<EntryViewProps> = (props) => {
   const videoRef = useRef<HTMLVideoElement>(null);
 
   /** Start the video at the begining */
   const handleStart: React.MouseEventHandler = () => {
-    if (!videoRef.current) {
+    if (!videoRef.current || (props.mouseOverControls != undefined && !props.mouseOverControls)) {
       return;
     }
     videoRef.current.currentTime = 0;
@@ -35,20 +41,25 @@ const VideoEntryView: React.FC<EntryViewProps> = (props) => {
 
   /** Stop the video */
   const handleStop: React.MouseEventHandler = () => {
-    if (!videoRef.current) {
+    if (!videoRef.current || (props.mouseOverControls != undefined && !props.mouseOverControls)) {
       return;
     }
     videoRef.current.pause();
-    setMiddleFrame();
+    setPauseFrame();
   };
 
   /** Set the video to the middle frame */
-  const setMiddleFrame = async () => {
+  const setPauseFrame = async () => {
     if (!videoRef.current) {
       return;
     }
-    const duration = await getDuration();
-    videoRef.current.currentTime = duration / 2;
+
+    if (!props.pauseFrame || props.pauseFrame === 'middle') {
+      const duration = await getDuration();
+      videoRef.current.currentTime = duration / 2;
+    } else if (props.pauseFrame === 'start') {
+      videoRef.current.currentTime = 0;
+    }
   };
 
   /** Get the duration, there is a known issue on Chrome with some audio/video durations */
@@ -81,16 +92,29 @@ const VideoEntryView: React.FC<EntryViewProps> = (props) => {
 
   // Set the video to the middle frame when the video is loaded
   useEffect(() => {
-    setMiddleFrame();
+    setPauseFrame();
   }, [videoRef.current]);
 
   return (
-    <video width={props.width} onMouseEnter={handleStart} onMouseLeave={handleStop} ref={videoRef}>
-      <source src={props.entry.signedUrl} />
-    </video>
+    <Box sx={{ maxWidth: props.width }}>
+      <video
+        width={props.width}
+        onMouseEnter={handleStart}
+        onMouseLeave={handleStop}
+        ref={videoRef}
+        autoPlay={props.autoPlay}
+        controls={props.displayControls}
+      >
+        <source src={props.entry.signedUrl} />
+      </video>
+    </Box>
   );
 };
 
 const ImageEntryView: React.FC<EntryViewProps> = (props) => {
-  return <img src={props.entry.signedUrl} width={props.width} />;
+  return (
+    <Box sx={{ maxWidth: props.width }}>
+      <img src={props.entry.signedUrl} width="100%" />
+    </Box>
+  );
 };

packages/client/src/components/SideBar.component.tsx

@@ -50,7 +50,7 @@ export const SideBar: FC<SideBarProps> = ({ open, drawerWidth }) => {
       name: 'Contribute',
       action: () => {},
       icon: <GroupWork />,
-      subItems: [{ name: 'Tag in Study', action: () => navigate('/study/contribute') }]
+      subItems: [{ name: 'Tag in Study', action: () => navigate('/contribute/landing') }]
     },
     {
       name: 'Logout',

packages/client/src/components/contribute/NoTagNotification.component.tsx

@@ -0,0 +1,14 @@
+import { Stack, Typography } from '@mui/material';
+
+export interface NoTagNotificationProps {
+  studyName: string;
+}
+
+export const NoTagNotification: React.FC<NoTagNotificationProps> = ({ studyName }) => {
+  return (
+    <Stack direction="column" sx={{ margin: 'auto', maxWidth: 750, alignItems: 'center' }} spacing={2}>
+      <Typography variant="h2">No tags Remaining</Typography>
+      <Typography variant="body1">No tags left for "{studyName}", please check back later</Typography>
+    </Stack>
+  );
+};

packages/client/src/components/contribute/TagForm.component.tsx

@@ -0,0 +1,64 @@
+import { JsonForms } from '@jsonforms/react';
+import { Study } from '../../graphql/graphql';
+import { materialRenderers } from '@jsonforms/material-renderers';
+import { SetStateAction, useState, Dispatch } from 'react';
+import { Box, Stack, Button } from '@mui/material';
+import { ErrorObject } from 'ajv';
+
+export interface TagFormProps {
+  study: Study;
+  setTagData: Dispatch<SetStateAction<any>>;
+}
+
+export const TagForm: React.FC<TagFormProps> = (props) => {
+  const [data, setData] = useState<any>({});
+  const [dataValid, setDataValid] = useState<boolean>(false);
+
+  const handleFormChange = (data: any, errors: ErrorObject[] | undefined) => {
+    setData(data);
+
+    // No errors, data could be submitted
+    if (!errors || errors.length === 0) {
+      setDataValid(true);
+    } else {
+      setDataValid(false);
+    }
+  };
+
+  const handleSubmit = () => {
+    // Ideally should not get here
+    if (!dataValid) {
+      return;
+    }
+    props.setTagData(data);
+
+    // Get ready for the next tag
+    handleClear();
+  };
+
+  const handleClear = () => {
+    setData({});
+  };
+
+  return (
+    <Box sx={{ maxWidth: 500 }}>
+      <Stack direction="column" spacing={2}>
+        <JsonForms
+          schema={props.study.tagSchema.dataSchema}
+          uischema={props.study.tagSchema.uiSchema}
+          data={data}
+          onChange={({ data, errors }) => handleFormChange(data, errors)}
+          renderers={materialRenderers}
+        />
+        <Stack direction="row">
+          <Button variant="outlined" onClick={handleSubmit} disabled={!dataValid}>
+            Submit
+          </Button>
+          <Button variant="outlined" onClick={handleClear}>
+            Clear
+          </Button>
+        </Stack>
+      </Stack>
+    </Box>
+  );
+};

packages/client/src/graphql/entry.ts

@@ -10,7 +10,7 @@ export type EntryForDatasetQueryVariables = Types.Exact<{
 }>;
 
 
-export type EntryForDatasetQuery = { __typename?: 'Query', entryForDataset: Array<{ __typename?: 'Entry', _id: string, organization: string, entryID: string, contentType: string, dataset: string, creator?: string | null, dateCreated: any, meta: any, signedUrl: string, signedUrlExpiration: number }> };
+export type EntryForDatasetQuery = { __typename?: 'Query', entryForDataset: Array<{ __typename?: 'Entry', _id: string, organization: string, entryID: string, contentType: string, dataset: string, creator: string, dateCreated: any, meta: any, signedUrl: string, signedUrlExpiration: number }> };
 
 
 export const EntryForDatasetDocument = gql`

packages/client/src/graphql/graphql.ts

@@ -69,7 +69,7 @@ export type Entry = {
   __typename?: 'Entry';
   _id: Scalars['String']['output'];
   contentType: Scalars['String']['output'];
-  creator?: Maybe<Scalars['ID']['output']>;
+  creator: Scalars['ID']['output'];
   dataset: Scalars['ID']['output'];
   dateCreated: Scalars['DateTime']['output'];
   entryID: Scalars['String']['output'];

packages/client/src/graphql/tag/tag.graphql

@@ -0,0 +1,27 @@
+mutation createTags($study: ID!, $entries: [ID!]!) {
+  createTags(study: $study, entries: $entries) {
+    _id
+  }
+}
+
+mutation assignTag($study: ID!) {
+  assignTag(study: $study) {
+    _id,
+    entry {
+      _id,
+      organization,
+      entryID,
+      contentType,
+      dataset,
+      creator,
+      dateCreated,
+      meta,
+      signedUrl,
+      signedUrlExpiration
+    }
+  }
+}
+
+mutation completeTag($tag: ID!, $data: JSON!) {
+  completeTag(tag: $tag, data: $data)
+}