@openneuro/app 4.37.0-alpha.3 → 4.38.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openneuro/app",
-  "version": "4.37.0-alpha.3",
+  "version": "4.38.0-alpha.0",
   "description": "React JS web frontend for the OpenNeuro platform.",
   "license": "MIT",
   "main": "public/client.js",
@@ -77,5 +77,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5afc54c65396936f2629ca4d4772eef18fc3b2fa"
+  "gitHead": "96bbcd19e83fab719a0976be7747eeabc5036ff3"
 }

package/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
+}

package/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

package/src/scripts/components/json-tree/RecursiveProperty.tsx

@@ -9,53 +9,73 @@ interface IterableObject {
   [s: number]: number | string | boolean | IterableObject
 }
 
-interface Props {
-  property: number | string | boolean | IterableObject
+interface RecursivePropertyProps {
+  property: number | string | boolean | IterableObject | null
   propertyName: string
   emptyPropertyLabel?: string
   rootProperty?: boolean
   propertyNameProcessor?: (name: string) => string
 }
 
-export const RecursiveProperty: React.FC<Props> = (props) => {
+export const RecursiveProperty = ({
+  property,
+  propertyName,
+  emptyPropertyLabel,
+  rootProperty,
+  propertyNameProcessor,
+}: RecursivePropertyProps) => {
+  // Determine if the property is "falsy - empty" but should be visible
+  const isEmptyValue = property === null ||
+    property === 0 ||
+    property === 0.0 ||
+    property === false ||
+    property === ""
+
   return (
     <div className="json-container">
-      {props.property
+      {property !== undefined && (property || isEmptyValue)
         ? (
-          typeof props.property === "number" ||
-            typeof props.property === "string" ||
-            typeof props.property === "boolean"
+          typeof property === "number" ||
+            typeof property === "string" ||
+            typeof property === "boolean"
             ? (
               <>
                 <span className="prop-name">
-                  {props.propertyNameProcessor!(props.propertyName)}:{" "}
+                  {propertyNameProcessor!(propertyName)}:{" "}
                 </span>
-                {props.property.toString()}
+                {property === null ? "null" : property.toString()}
               </>
             )
             : (
               <ExpandableProperty
-                title={props.propertyNameProcessor!(props.propertyName)}
-                expanded={!!props.rootProperty}
+                title={propertyNameProcessor!(propertyName)}
+                expanded={!!rootProperty}
               >
-                {Object.values(props.property).map(
-                  /* eslint-disable-next-line */
-                  (property, index, { length }) => (
-                    <RecursiveProperty
-                      key={index}
-                      property={property}
-                      propertyName={Object.getOwnPropertyNames(
-                        props.property,
-                      )[index]}
-                      propertyNameProcessor={props.propertyNameProcessor}
-                    />
-                  ),
-                )}
+                {Object.getOwnPropertyNames(property).length > 0
+                  ? (
+                    Object.values(property).map(
+                      (propValue, index) => (
+                        <RecursiveProperty
+                          key={index}
+                          property={propValue as
+                            | number
+                            | string
+                            | boolean
+                            | IterableObject}
+                          propertyName={Object.getOwnPropertyNames(
+                            property,
+                          )[index]}
+                          propertyNameProcessor={propertyNameProcessor}
+                        />
+                      ),
+                    )
+                  )
+                  : <span className="empty-object-label">No properties</span>}
               </ExpandableProperty>
             )
         )
         : (
-          props.emptyPropertyLabel
+          property === undefined ? emptyPropertyLabel : null
         )}
     </div>
   )

package/src/scripts/components/modality-cube/ModalityHexagon.tsx

@@ -4,6 +4,7 @@ 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
@@ -11,6 +12,7 @@ interface ModalityHexagonProps {
 
 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>

package/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%);
+        }
       }
     }
   }
-}
+}

package/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>

package/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},

package/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}},

package/src/scripts/errors/errorRoute.tsx

@@ -15,6 +15,7 @@ function ErrorRoute() {
         <Routes>
           <Route path="github" element={<FourOThreePage />} />
           <Route path="orcid" element={<OrcidGeneral />} />
+          <Route path="orcid/unknown" element={<OrcidGeneral />} />
           <Route path="email-warning" element={<OrcidEmailWarning />} />
           <Route path="*" element={<FourOFourPage />} />
         </Routes>

package/src/scripts/errors/orcid/general.jsx

@@ -3,6 +3,18 @@ import React from "react"
 const OrcidError = () => (
   <div className="panel-heading">
     <h2>There was an issue authenticating with your ORCID account.</h2>
+    <p>
+      This may be a temporary issue, please try again later. Ensure that your
+      ORCID profile has one email address available to OpenNeuro following{" "}
+      <a href="https://docs.openneuro.org/orcid.html#enabling-trusted-access-to-emails">
+        our documentation
+      </a>{" "}
+      and try again.
+    </p>
+    <p>
+      If this issue persists, please contact support and include the ORCID
+      account you're attempting to login with.
+    </p>
   </div>
 )
 

package/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 {

package/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>
 

package/src/scripts/search/search-container.tsx

@@ -139,6 +139,7 @@ const SearchContainer: FC<SearchContainerProps> = ({ portalContent }) => {
   ])
 
   const { loading, data, fetchMore, variables } = useSearchResults()
+
   const loadMore = () => {
     fetchMore({
       variables: {

package/src/scripts/search/use-search-results.tsx

@@ -404,7 +404,7 @@ export const useSearchResults = () => {
     // fetchPolicy is workaround for stuck loading bug (https://github.com/apollographql/react-apollo/issues/3270#issuecomment-579614837)
     // TODO: find better solution
     fetchPolicy: "cache-and-network",
-    nextFetchPolicy: "cache-first",
+    nextFetchPolicy: "cache-and-network",
     notifyOnNetworkStatusChange: true,
   })
 }

package/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?: {

package/src/scripts/users/__tests__/dataset-card.spec.tsx

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

package/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>

package/src/scripts/users/scss/datasetcard.module.scss

@@ -1,194 +1,203 @@
 .userDsWrap {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-between;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.userDsCard {
+  background: #fff;
+  border: 1px solid #ddd;
+  width: calc(50% - 10px);
+  padding: 10px;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+
+  h4 {
+    margin: 0 0 15px;
+    font-size: 19px;
   }
-  
-  .userDsCard {
-    background: #fff;
-    border: 1px solid #ddd;
-    width: calc(50% - 10px);
-    padding: 10px;
-    margin-bottom: 20px;
+}
+  .userDsBody {
+    margin-bottom: 15px;
+    cite {
+      color: var(--text-citation);
+      
+    }
+  }
+  .userDsFooter {
     display: flex;
     justify-content: space-between;
-    flex-direction: column;
-  
-    h4 {
-      margin: 0 0 30px;
-      font-size: 19px;
-    }
-  
-    .userDsFooter {
+
+    .userMetawrap {
+      width: 90%;
       display: flex;
-      justify-content: space-between;
-  
-      .userMetawrap {
-        width: 90%;
-        display: flex;
-        flex-direction: column;
-  
-        span {
-          color: #777;
-  
+      flex-direction: column;
+
+      span {
+        color: #777;
+
+        b {
+          color: #000;
+        }
+
+        &:first-child {
+          font-size: 13px;
+          margin-bottom: 10px;
+        }
+
+        &:last-child {
+          text-transform: uppercase;
+          font-weight: bold;
+
           b {
-            color: #000;
-          }
-  
-          &:first-child {
-            font-size: 13px;
-            margin-bottom: 10px;
-          }
-  
-          &:last-child {
-            text-transform: uppercase;
-            font-weight: bold;
-  
-            b {
-              text-transform: none;
-            }
+            text-transform: none;
           }
         }
       }
-  
-      .userIconwrap {
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-      }
+    }
+
+    .userIconwrap {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
     }
   }
 
-  .resultsSummary{
-    width: 100%;
-    font-size: 13px;
-    margin: 10px 0 0;
+
+.resultsSummary {
+  width: 100%;
+  font-size: 13px;
+  margin: 10px 0 0;
+}
+
+.userDSfilters {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  margin: 20px 0;
+  padding-bottom: 20px;
+  align-items: center;
+  z-index: 10000;
+  position: relative;
+  border-bottom: 2px solid #eee;
+
+  .searchLink {
+    margin-right: auto;
   }
-  
-  .userDSfilters {
+  .filterDiv,
+  .sortDiv {
+    cursor: pointer;
     display: flex;
-    justify-content: flex-end;
-    flex-wrap: wrap;
-    margin: 20px 0;
-    padding-bottom:20px;
     align-items: center;
-    z-index: 10000;
     position: relative;
-    border-bottom: 2px solid #eee;
-   
-    .searchLink{
-    margin-right: auto;
+    margin-bottom: 5px;
   }
-    .filterDiv,
-    .sortDiv {
-      cursor: pointer;
+
+  /* Caret icon */
+  .filterDiv span::after,
+  .sortDiv span::after {
+    content: '';
+    width: 0;
+    height: 0;
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid #333;
+    margin-left: 10px;
+    transition: transform 0.3s ease;
+    display: inline-block;
+    margin-bottom: 3px;
+  }
+
+  .filterDiv.open span::after,
+  .sortDiv.open span::after {
+    transform: rotate(180deg); /* Rotate the caret when open */
+  }
+
+  .filterDropdown,
+  .sortDropdown {
+    position: relative;
+
+    ul {
+      position: absolute;
+      list-style-type: none;
       display: flex;
-      align-items: center;
-      position: relative;
-      margin-bottom: 5px;
-    }
-  
-    /* Caret icon */
-    .filterDiv span::after,
-    .sortDiv span::after {
-      content: "";
-      width: 0;
-      height: 0;
-      border-left: 5px solid transparent;
-      border-right: 5px solid transparent;
-      border-top: 5px solid #333;
-      margin-left: 10px;
-      transition: transform 0.3s ease;
-      display: inline-block;
-      margin-bottom: 3px;
-    }
-  
-    .filterDiv.open span::after,
-    .sortDiv.open span::after {
-      transform: rotate(180deg); /* Rotate the caret when open */
-    }
-  
-    .filterDropdown,
-    .sortDropdown {
-      position: relative;
-  
-      ul {
-        position: absolute;
-        list-style-type: none;
-        display: flex;
-        flex-direction: column;
-        margin: 0;
-        padding: 20px;
-        background-color: white;
-        border: 1px solid #ddd;
-        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-        right: 0;
-        top: 20px;
-        min-width: 200px;
-        li {
-          padding: 8px;
-          cursor: pointer;
-  
-          &:hover {
-            background-color: #f4f4f4;
-          }
-  
-          &.active {
-            font-weight: bold;
-            color: var(--on-dark-aqua);
-          }
+      flex-direction: column;
+      margin: 0;
+      padding: 20px;
+      background-color: white;
+      border: 1px solid #ddd;
+      box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+      right: 0;
+      top: 20px;
+      min-width: 200px;
+      li {
+        padding: 8px;
+        cursor: pointer;
+
+        &:hover {
+          background-color: #f4f4f4;
+        }
+
+        &.active {
+          font-weight: bold;
+          color: var(--on-dark-aqua);
         }
       }
     }
-  
-    .filterDropdown {  
-      ul {min-width: 120px;}
-    }
-    .sortDiv {
-      margin-left: 20px;
-    }
   }
 
-  .userDatasetsWrapper{
-    margin-bottom: 50px;
+  .filterDropdown {
+    ul {
+      min-width: 120px;
+    }
   }
-  .searchInputContainer {
+  .sortDiv {
+    margin-left: 20px;
+  }
+}
+
+.userDatasetsWrapper {
+  margin-bottom: 50px;
+}
+.searchInputContainer {
+  position: relative;
+  display: flex;
+
+  .searchInputWrap {
     position: relative;
-    display: flex;
-  
-    .searchInputWrap{
-      position: relative;
     width: 100%;
-  .searchInput {
-    flex-grow: 1;
-    padding-right: 30px;
-    margin-right: auto;
-    width: 100%;
-  }
- 
-
-  .clearSearchButton {
-    position: absolute;
-    top: 50%;
-    right: 5px; /* Adjust position as needed */
-    transform: translateY(-50%);
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 0.8em;
-    color: #888;
-    padding: 0;
-    width: 20px;
-    height: 20px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  
-    &:hover {
-      color: #333;
+    .searchInput {
+      flex-grow: 1;
+      padding-right: 30px;
+      margin-right: auto;
+      width: 100%;
     }
-  }}
-    .searchSubmitButton {
+
+    .clearSearchButton {
+      position: absolute;
+      top: 50%;
+      right: 5px; /* Adjust position as needed */
+      transform: translateY(-50%);
+      background: none;
+      border: none;
+      cursor: pointer;
+      font-size: 0.8em;
+      color: #888;
+      padding: 0;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        color: #333;
+      }
+    }
+  }
+  .searchSubmitButton {
     background-color: var(--current-theme-secondary);
     color: #fff;
     border-radius: var(--border-radius-default);
@@ -201,6 +210,4 @@
       background-color: var(--current-theme-primary);
     }
   }
-
-
-}
+}