Expand info on matching dataset cards (#377): Add DataLad and aggrega…

…te dataset indicators
neurobagel · Dec 27, 2024 · 39b8907 · 39b8907
1 parent 117f9df
commit 39b8907
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/src/components/ResultCard.tsx b/src/components/ResultCard.tsx
@@ -5,7 +5,7 @@ import CardContent from '@mui/material/CardContent';
 import Checkbox from '@mui/material/Checkbox';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Typography from '@mui/material/Typography';
-import { Tooltip, Divider } from '@mui/material';
+import { Tooltip } from '@mui/material';
 import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
 import { modalities } from '../utils/constants';
 
@@ -21,6 +21,8 @@ const ResultCard = memo(
     pipelines,
     checked,
     onCheckboxChange,
+    isDataLad,
+    isAggregate,
   }: {
     nodeName: string;
     datasetName: string;
@@ -29,11 +31,11 @@ const ResultCard = memo(
     datasetTotalSubjects: number;
     numMatchingSubjects: number;
     imageModals: string[];
-    pipelines: {
-      [key: string]: string[];
-    };
+    pipelines: { [key: string]: string[] };
     checked: boolean;
     onCheckboxChange: (id: string) => void;
+    isDataLad: boolean;
+    isAggregate: boolean;
   }) => (
     <Card data-cy={`card-${datasetUUID}`}>
       <CardContent>
@@ -71,6 +73,11 @@ const ResultCard = memo(
               <Typography variant="subtitle2">
                 {numMatchingSubjects} subjects match / {datasetTotalSubjects} total subjects
               </Typography>
+
+              <Typography variant="body2" color="textSecondary">
+                {isDataLad ? 'DataLad dataset' : 'Not a DataLad dataset'} |{' '}
+                {isAggregate ? 'Aggregate dataset' : 'Not an aggregate dataset'}
+              </Typography>
             </div>
           </div>
           <div className="justify-self-center">
@@ -88,15 +95,19 @@ const ResultCard = memo(
               <Tooltip
                 data-cy={`card-${datasetUUID}-available-pipelines-tooltip`}
                 title={
-                  <Typography variant="body1">
+                  <div>
                     {Object.entries(pipelines)
                       .flatMap(([name, versions]) =>
-                        versions.map((version) => `${name.split('/').slice(-1)[0]} ${version}`)
+                        versions.map(
+                          (version) => `${name.split('/').slice(-1)[0]} ${version}`
+                        )
                       )
-                      .map((pipeline) => (
-                        <Divider>{pipeline}</Divider>
+                      .map((pipeline, index) => (
+                        <Typography key={index} variant="body2" sx={{ display: 'block' }}>
+                          {pipeline}
+                        </Typography>
                       ))}
-                  </Typography>
+                  </div>
                 }
                 placement="top"
               >
@@ -139,3 +150,4 @@ const ResultCard = memo(
 );
 
 export default ResultCard;
+
diff --git a/src/components/ResultContainer.tsx b/src/components/ResultContainer.tsx
@@ -15,6 +15,7 @@ function ResultContainer({
   response: QueryResponse | null;
 }) {
   const [download, setDownload] = useState<string[]>([]);
+
   const selectAll: boolean = response
     ? response.responses.length === download.length &&
       response.responses.every((r) => download.includes(r.dataset_uuid))
@@ -325,6 +326,8 @@ function ResultContainer({
               pipelines={item.available_pipelines}
               checked={download.includes(item.dataset_uuid)}
               onCheckboxChange={updateDownload}
+              isDataLad={item.is_data_lad} // Pass the isDataLad prop
+              isAggregate={item.is_aggregate} // Pass the isAggregate prop
             />
           ))}
         </div>