adds modalityHEX and Dataset Citation to the my datasets - dataset cards

packages/openneuro-app/src/scripts/components/citation/authors-citation-list.ts

@@ -0,0 +1,23 @@
+export function authorsCitationList(authors: string[], limit?: number): string {
+  let formattedAuthors = "NO AUTHORS FOUND"
+  if (authors && authors.length > 0) {
+    if (!limit || authors.length <= limit) {
+      // Pre-Limit
+      // Join with commas, with "and" before the last author
+      if (authors.length === 1) {
+        formattedAuthors = authors[0]
+      } else if (authors.length === 2) {
+        formattedAuthors = `${authors[0]} and ${authors[1]}`
+      } else {
+        const lastAuthor = authors[authors.length - 1]
+        const remainingAuthors = authors.slice(0, authors.length - 1)
+        formattedAuthors = `${remainingAuthors.join(", ")}, and ${lastAuthor}`
+      }
+    } else {
+      // Limit to `limit` authors and add "et al."
+      const limitedAuthors = authors.slice(0, limit)
+      formattedAuthors = `${limitedAuthors.join(", ")}, et al.`
+    }
+  }
+  return formattedAuthors
+}

packages/openneuro-app/src/scripts/components/citation/search-results-citation.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import { parseISO } from "date-fns"
+import getYear from "date-fns/getYear"
+import type { Dataset } from "../../types/user-types"
+import { authorsCitationList } from "./authors-citation-list"
+
+interface SearchResultsCitationProps {
+  dataset: Dataset
+}
+
+export const SearchResultsCitation: React.FC<SearchResultsCitationProps> = ({
+  dataset,
+}) => {
+  const rawAuthors = dataset.latestSnapshot?.description?.Authors
+  const year = dataset.created ? getYear(parseISO(dataset.created)) : "N/A"
+  const datasetName = dataset.latestSnapshot?.description?.Name ||
+    "NO DATASET NAME FOUND"
+  const datasetDOI = dataset.latestSnapshot?.description?.DatasetDOI
+
+  const datasetCite = `${
+    authorsCitationList(rawAuthors, 4)
+  } (${year}). ${datasetName}. OpenNeuro. [Dataset] doi: ${
+    datasetDOI ? `${datasetDOI}` : "N/A"
+  }`
+
+  return (
+    <cite>
+      {datasetCite}
+    </cite>
+  )
+}
+
+export default SearchResultsCitation

packages/openneuro-app/src/scripts/components/modality-cube/ModalityHexagon.tsx

@@ -4,13 +4,15 @@ import { modalityShortMapping } from "../../components/formatting/modality-label
 import "./modality-hexagon.scss"
 interface ModalityHexagonProps {
   primaryModality: string | null | undefined
+  size?: string
 }
 
 //ModalityHexagon component displays a colored hexagon and label
 // based on the provided primaryModality.
 
 export const ModalityHexagon: FC<ModalityHexagonProps> = ({
   primaryModality,
+  size,
 }) => {
   const hexagonClass = primaryModality
     ? primaryModality.toLowerCase()
@@ -20,8 +22,10 @@ export const ModalityHexagon: FC<ModalityHexagonProps> = ({
     ? modalityShortMapping(primaryModality)
     : <i className="fa fa-circle-o-notch fa-spin"></i>
 
+  const effectiveSizeClass = size || ""
+
   return (
-    <div className="hexagon-wrapper">
+    <div className={`hexagon-wrapper ${effectiveSizeClass}`}>
       <div className={`hexagon ${hexagonClass}`}></div>
       <div className="label">{labelText}</div>
     </div>

packages/openneuro-app/src/scripts/components/modality-cube/modality-hexagon.scss

@@ -49,45 +49,96 @@
       transform: rotateZ(-60deg);
     }
 
-    &.mri { background-color: $mri-theme; }
-    &.eeg { background-color: $on-light-green; } // EEG uses on-light-green
-    &.pet { background-color: $pet-theme; }
-    &.ieeg { background-color: $ieeg-theme; }
-    &.meg { background-color: $meg-theme; }
-    &.nirs { background-color: $nirs-theme; }
+    &.mri {
+      background-color: $mri-theme;
+    }
+    &.eeg {
+      background-color: $on-light-green;
+    } // EEG uses on-light-green
+    &.pet {
+      background-color: $pet-theme;
+    }
+    &.ieeg {
+      background-color: $ieeg-theme;
+    }
+    &.meg {
+      background-color: $meg-theme;
+    }
+    &.nirs {
+      background-color: $nirs-theme;
+    }
+  }
+  &.small {
+    margin-left: 10px;
+    width: 28px;
+    height: 28px;
+    div.label {
+      font-size: 10px;
+      font-weight: normal;
+    }
   }
 }
 
+
+
 a {
   .hexagon-wrapper {
-    margin: 20px auto; 
+    margin: 20px auto;
 
     div.label {
-      color: unset; 
+      color: unset;
     }
 
     .hexagon {
-      transition: color 0.3s; 
-      background-color: #fff; 
+      transition: color 0.3s;
+      background-color: #fff;
 
       // Modality specific colors (when inside 'a')
-      &.mri { background-color: #fff; color: $mri-theme; }
-      &.eeg { background-color: #fff; color: $eeg-theme; }
-      &.pet { background-color: #fff; color: $pet-theme; }
-      &.ieeg { background-color: #fff; color: $ieeg-theme; }
-      &.meg { background-color: #fff; color: $meg-theme; }
-      &.nirs { background-color: #fff; color: $nirs-theme; } 
+      &.mri {
+        background-color: #fff;
+        color: $mri-theme;
+      }
+      &.eeg {
+        background-color: #fff;
+        color: $eeg-theme;
+      }
+      &.pet {
+        background-color: #fff;
+        color: $pet-theme;
+      }
+      &.ieeg {
+        background-color: #fff;
+        color: $ieeg-theme;
+      }
+      &.meg {
+        background-color: #fff;
+        color: $meg-theme;
+      }
+      &.nirs {
+        background-color: #fff;
+        color: $nirs-theme;
+      }
     }
 
     &:hover {
       .hexagon {
-        color: lighten($on-dark-aqua, 15%); 
-        &.mri { color: lighten($mri-theme, 10%); }
-        &.eeg { color: lighten($eeg-theme, 10%); }
-        &.pet { color: lighten($pet-theme, 10%); }
-        &.ieeg { color: lighten($ieeg-theme, 10%); }
-        &.meg { color: lighten($meg-theme, 10%); }
+        color: lighten($on-dark-aqua, 15%);
+        &.mri {
+          color: lighten($mri-theme, 10%);
+        }
+        &.eeg {
+          color: lighten($eeg-theme, 10%);
+        }
+        &.pet {
+          color: lighten($pet-theme, 10%);
+        }
+        &.ieeg {
+          color: lighten($ieeg-theme, 10%);
+        }
+        &.meg {
+          color: lighten($meg-theme, 10%);
+        }
       }
     }
   }
-}
+}

packages/openneuro-app/src/scripts/dataset/__tests__/__snapshots__/snapshot-container.spec.tsx.snap

@@ -49,7 +49,7 @@ exports[`SnapshotContainer component > renders successfully 1`] = `
                 href="/search/modality/MRI"
               >
                 <div
-                  class="hexagon-wrapper"
+                  class="hexagon-wrapper "
                 >
                   <div
                     class="hexagon mri"
@@ -1042,7 +1042,7 @@ OCI-1131441 (R. Poldrack, PI) in any publications.
               <h5
                 class="cite-content-block"
               >
-                J. Doe and J. Doe and J. Doe (2021). DS003-downsampled (only T1). OpenNeuro. [Dataset] doi: null
+                J. Doe, J. Doe, and J. Doe (2021). DS003-downsampled (only T1). OpenNeuro. [Dataset] doi: null
               </h5>
             </div>
             <h5>

packages/openneuro-app/src/scripts/dataset/fragments/__tests__/dataset-citation.spec.jsx

@@ -18,7 +18,7 @@ describe("formatCitation", () => {
   })
   it('should work with "BibTeX" input', () => {
     expect(formatCitation(snapshot, "BibTeX")).toEqual(`@dataset{ds999999:1.0.2,
-  author = {Jane Doe and Doe, John},
+  author = {Jane Doe AND Doe, John},
   title = {"A Test Dataset"},
   year = {2020},
   doi = {doinumbersgohere},

packages/openneuro-app/src/scripts/dataset/fragments/dataset-citation.jsx

@@ -5,17 +5,18 @@ import parseISO from "date-fns/parseISO"
 import { CopyToClipboard } from "react-copy-to-clipboard"
 import { Button } from "../../components/button/Button"
 import { Tooltip } from "../../components/tooltip/Tooltip"
+import { authorsCitationList } from "../../components/citation/authors-citation-list"
 
 export const formatCitation = (snapshot, style) => {
   const year = getYear(parseISO(snapshot.created))
   const authors = snapshot.description.Authors
-    ? snapshot.description.Authors.join(" and ")
-    : "NO AUTHORS FOUND"
+    ? authorsCitationList(snapshot.description.Authors)
+    : ""
   if (style === "Text") {
     return `${authors} (${year}). ${snapshot.description.Name}. OpenNeuro. [Dataset] doi: ${snapshot.description.DatasetDOI}`
   } else if (style === "BibTeX") {
     return `@dataset{${snapshot.id},
-  author = {${authors}},
+  author = {${snapshot.description.Authors.join(" AND ")}},
   title = {"${snapshot.description.Name}"},
   year = {${year}},
   doi = {${snapshot.description.DatasetDOI}},

packages/openneuro-app/src/scripts/queries/user.ts

@@ -117,6 +117,7 @@ export const ADVANCED_SEARCH_DATASETS_QUERY = gql`
                 TracerName
                 TracerRadionuclide
               }
+              primaryModality
             }
             issues {
               severity
@@ -128,6 +129,7 @@ export const ADVANCED_SEARCH_DATASETS_QUERY = gql`
             description {
               Name
               Authors
+              DatasetDOI
             }
           }
           analytics {

packages/openneuro-app/src/scripts/search/components/SearchResultItem.tsx

@@ -1,6 +1,4 @@
 import React from "react"
-import getYear from "date-fns/getYear"
-import parseISO from "date-fns/parseISO"
 import { Link } from "react-router-dom"
 import { Tooltip } from "../../components/tooltip/Tooltip"
 import { Icon } from "../../components/icon/Icon"
@@ -11,6 +9,7 @@ import "../scss/search-result.scss"
 import activityPulseIcon from "../../../assets/activity-icon.png"
 import { hasEditPermissions } from "../../authentication/profile"
 import { ModalityHexagon } from "../../components/modality-cube/ModalityHexagon"
+import { SearchResultsCitation } from "../../components/citation/search-results-citation"
 
 export const formatDate = (dateObject) =>
   new Date(dateObject).toISOString().split("T")[0]
@@ -19,6 +18,7 @@ export interface SearchResultItemProps {
   node: {
     id: string
     created: string
+    name: string
     uploader: {
       id: string
       name: string
@@ -243,12 +243,6 @@ export const SearchResultItem = ({
     </div>
   )
 
-  const year = getYear(parseISO(node.created))
-  const authors = node.latestSnapshot.description?.Authors
-    ? node.latestSnapshot.description.Authors.join(" and ")
-    : "NO AUTHORS FOUND"
-  const datasetCite =
-    `${authors} (${year}). ${node.latestSnapshot.description.Name}. OpenNeuro. [Dataset] doi: ${node.latestSnapshot.description.DatasetDOI}`
   const trimlength = 450
 
   return (
@@ -270,7 +264,7 @@ export const SearchResultItem = ({
                   : node.latestSnapshot.readme)
                 : ""}
             </p>
-            <cite>{datasetCite}</cite>
+            <SearchResultsCitation dataset={node} />
           </div>
         </div>
 

packages/openneuro-app/src/scripts/types/user-types.ts

@@ -48,6 +48,11 @@ export interface Dataset {
     created?: string
     description?: {
       Authors: string[]
+      DatasetDOI?: string | null
+      Name: string
+    }
+    summary?: {
+      primaryModality?: string
     }
   }
   draft?: {

packages/openneuro-app/src/scripts/users/__tests__/dataset-card.spec.tsx

@@ -40,6 +40,7 @@ const mockDataset = {
       totalFiles: 10,
       dataProcessed: true,
       pet: null,
+      primaryModality: "MRI",
     },
     validation: {
       errors: [],

packages/openneuro-app/src/scripts/users/dataset-card.tsx

@@ -5,6 +5,8 @@ import { Tooltip } from "../components/tooltip/Tooltip"
 import { Icon } from "../components/icon/Icon"
 import styles from "./scss/datasetcard.module.scss"
 import type { DatasetCardProps } from "../types/user-types"
+import { ModalityHexagon } from "../components/modality-cube/ModalityHexagon"
+import { SearchResultsCitation } from "../components/citation/search-results-citation"
 
 export const DatasetCard: React.FC<DatasetCardProps> = (
   { dataset, hasEdit },
@@ -87,6 +89,7 @@ export const DatasetCard: React.FC<DatasetCardProps> = (
       datasetSize = `${sizeInBytes} bytes`
     }
   }
+
   return (
     <div
       className={styles.userDsCard}
@@ -98,6 +101,9 @@ export const DatasetCard: React.FC<DatasetCardProps> = (
           {dataset.name ? dataset.name : dataset.id}
         </a>
       </h4>
+      <div className={styles.userDsBody}>
+        <SearchResultsCitation dataset={dataset} />
+      </div>
       <div className={styles.userDsFooter}>
         <div className={styles.userMetawrap}>
           <span>
@@ -113,6 +119,10 @@ export const DatasetCard: React.FC<DatasetCardProps> = (
         <div className={styles.userIconwrap}>
           {activityIcon}
           {publicIcon && <div className="owner-icon-wrap">{publicIcon}</div>}
+          <ModalityHexagon
+            size={"small"}
+            primaryModality={dataset.latestSnapshot.summary?.primaryModality}
+          />
         </div>
       </div>
     </div>