Support multiple files resulting from a single recording activity

HumanBrainProject · Jul 26, 2024 · 4977a27 · 4977a27
1 parent 6d9881b
commit 4977a27
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 7 deletions.
diff --git a/apps/nar-v3/src/components/DataFileCard.jsx b/apps/nar-v3/src/components/DataFileCard.jsx
@@ -25,7 +25,7 @@ import KeyValueTable from "./KeyValueTable";
 import styles from "../styles";
 
 function DataFileCard(props) {
-  const fileObj = props.fileObj;
+  const fileObj = props.fileObjects[props.index];
 
   if (fileObj) {
     const data = {
@@ -46,11 +46,27 @@ function DataFileCard(props) {
     return (
       <>
         <Connection />
-        <Box sx={styles.entity} component={Paper} variant="outlined">
-          <h2>File {fileObj.name}</h2>
+        <Stack direction="row" spacing={1}>
+          <Stack sx={{ width: "60px" }} justifyContent="center">
+            {props.index > 0 ? (
+              <NavigatePrevious onClick={() => props.setIndex(props.index - 1)} />
+            ) : (
+              ""
+            )}
+          </Stack>
+          <Box sx={styles.entity} component={Paper} variant="outlined">
+            <h2>File {fileObj.name}</h2>
 
-          <KeyValueTable boldKeys data={data} />
-        </Box>
+            <KeyValueTable boldKeys data={data} />
+          </Box>
+          <Stack sx={{ width: "60px" }} justifyContent="center">
+            {props.index < props.fileObjects.length - 1 ? (
+              <NavigateNext onClick={() => props.setIndex(props.index + 1)} />
+            ) : (
+              ""
+            )}
+          </Stack>
+        </Stack>
       </>
     );
   } else {

diff --git a/apps/nar-v3/src/components/DatasetCard.jsx b/apps/nar-v3/src/components/DatasetCard.jsx
@@ -37,6 +37,7 @@ function DatasetCard(props) {
 
   const [subjectIndex, _setSubjectIndex] = useState(0);
   const [sliceIndex, _setSliceIndex] = useState(0);
+  const [fileIndex, _setFileIndex] = useState(0);
 
   const setSubjectIndex = (index) => {
     if (index >= 0 && index < subjects.length) {
@@ -114,12 +115,22 @@ function DatasetCard(props) {
   const getDataFiles = (subjectIndex, sliceIndex) => {
     const recordingActivity = getRecordingActivity(subjectIndex, sliceIndex);
     if (recordingActivity) {
-      return recordingActivity.output[0];
+      return recordingActivity.output;
     } else {
       return null;
     }
   };
 
+  const setFileIndex = (index) => {
+    const dataFiles = getDataFiles(subjectIndex, sliceIndex);
+    if (
+      index >= 0 &&
+      index < dataFiles.length
+    ) {
+      _setFileIndex(index);
+    }
+  };
+
   const formatAuthors = (dataset) => {
     const authors = dataset.author.length > 0 ? dataset.author : dataset.isVersionOf.author;
     return authors.map((person) => `${person.givenName} ${person.familyName}`).join(", ");
@@ -186,7 +197,7 @@ function DatasetCard(props) {
             stimulation={getStimulationActivity(subjectIndex, sliceIndex)}
           />
 
-          <DataFileCard fileObj={getDataFiles(subjectIndex, sliceIndex)} />
+          <DataFileCard fileObjects={getDataFiles(subjectIndex, sliceIndex)} index={fileIndex} setIndex={setFileIndex} />
         </Stack>
       ) : (
         ""