Update/search results layouts details component #3495

thinknoack · 2025-06-17T18:20:53Z

Based on newest designs for Annotation feature. This will move the search results tools towards that approach before we make any updates RE: annotation

updates to search layouts

full width contianer
search teaser display to resemble pubmed
new search details panel/drawer component
adding fields README and Citation
moves dataset filter/tabs to above results
moves components from generic components dir to search/components

…new search details section on click

codecov · 2025-06-17T18:21:53Z

Codecov Report

Attention: Patch coverage is 20.84548% with 543 lines in your changes missing coverage. Please review.

Project coverage is 48.28%. Comparing base (9529cf0) to head (79de8a7).
Report is 32 commits behind head on master.

Files with missing lines	Patch %	Lines
.../scripts/search/components/SearchResultDetails.tsx	10.17%	150 Missing ⚠️
.../src/scripts/search/inputs/sliding-radio-group.tsx	16.53%	106 Missing ⚠️
...rc/scripts/search/components/DatasetsRadioTabs.tsx	8.73%	94 Missing ⚠️
...nneuro-app/src/scripts/search/search-container.tsx	12.22%	78 Missing and 1 partial ⚠️
...src/scripts/search/components/SearchResultItem.tsx	17.54%	47 Missing ⚠️
...rc/scripts/search/components/SearchResultsList.tsx	35.55%	29 Missing ⚠️
...src/scripts/search/components/MetaListItemList.tsx	38.70%	19 Missing ⚠️
...o-app/src/scripts/search/components/SearchPage.tsx	20.00%	12 Missing ⚠️
...ipts/components/activity-slider/ActivitySlider.tsx	0.00%	4 Missing ⚠️
...app/src/scripts/search/components/FiltersBlock.tsx	40.00%	3 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #3495      +/-   ##
==========================================
+ Coverage   45.30%   48.28%   +2.98%     
==========================================
  Files         585      588       +3     
  Lines       41658    41972     +314     
  Branches     1324     1377      +53     
==========================================
+ Hits        18872    20268    +1396     
+ Misses      22595    21534    -1061     
+ Partials      191      170      -21

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

…s, refactoring modalityhex icon into resuable component

…w component specific file

…omponent

…components

…onent

nellh

I'm still working on the code review. One functional issue:

We recently fixed this issue where this dataset cannot be clicked if it has a white space title. To keep the layout, we should probably just replace the title with the accession number if it is only white space.

thinknoack · 2025-06-25T17:44:11Z

I'm still working on the code review. One functional issue:

We recently fixed this issue where this dataset cannot be clicked if it has a white space title. To keep the layout, we should probably just replace the title with the accession number if it is only white space.

oh, looks like I wasn't checking for white space.

  const datasetId = node.id

  const heading = node.latestSnapshot.description?.Name
    ? node.latestSnapshot.description?.Name
    : datasetId

how about this - I updated to check for white space dataset names

const heading = node.latestSnapshot.description?.Name?.trim() || datasetId

nellh · 2025-06-27T17:38:15Z

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

  const subjectCountRangeIsNull =
    JSON.stringify(subjectCountRange) === JSON.stringify([null, null])

+  const labelText = modality_selected


There's a modalityShortMapping function that does this in a general way.

openneuro/packages/openneuro-app/src/scripts/components/formatting/modality-label.tsx

Lines 1 to 22 in 3fa161f

/**

* Provide a mapping from the schema names to an expected short name used for OpenNeuro display

*/

export function modalityShortMapping(modality) {

switch (modality) {

case "ieeg":

case "iEEG":

return "iEEG"

case "beh":

return "Behavioral"

case "motion":

return "Motion"

case "micro":

return "Microscopy"

case undefined:

return undefined

case null:

return null

default:

return modality.toUpperCase()

}

}

updated this lableText and two other places I was doing the same thing

nellh · 2025-06-27T17:59:02Z

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

+  const _list = (
+    type: JSX.Element,
+    items: (string | JSX.Element)[],
+  ): JSX.Element | null => {
+    if (items && items.length > 0) {
+      return (
+        <div className="result-summary-meta">
+          <label>{type}:</label>
+          <div>
+            {items.map((item, index) => (
+              <span className="list-item" key={index}>
+                {item}
+              </span>
+            ))}
+          </div>
+        </div>
+      )
+    } else {
+      return null
+    }
+  }


This sort of thing would probably make sense as a component rather than just a function in the render step. Functions that don't create a closure over any value should generally be defined outside of rendering.

new component added for list items in the SearchDetails

…yShortMapping function for formatting modalities in various places in search and dataset page header

thinknoack added 2 commits June 16, 2025 13:22

adding init updates for search results list/item/render to allow for …

213359d

…new search details section on click

adding new SearchResutlDetails.tsx

e426686

thinknoack marked this pull request as draft June 17, 2025 18:20

thinknoack added 12 commits June 17, 2025 13:39

removing dupe component _variables.scss for default app variables.scs…

7970662

…s, refactoring modalityhex icon into resuable component

refactor hex scss

d1b1a16

update to details layout and component, moving scss for details to ne…

728f7f8

…w component specific file

refactor scss

87af605

update to fix lowercase modality for search H1/H2

c9b4814

update text size

7325cd3

chore lint/test updates

7a0a5a9

adding tab focus for A11y, adjusting layouts and updates to details c…

0e15d4e

…omponent

moving and re-styling dataset filters for logged in users

bf9258f

moving search components from general components directory to search/…

90750fa

…components

update component name

3e576a0

adding tabbing to dataset radios

e12467f

thinknoack requested a review from nellh June 24, 2025 19:51

thinknoack marked this pull request as ready for review June 24, 2025 19:51

Merge branch 'master' into update/search-results-layouts-details-comp…

2d49629

…onent

thinknoack changed the title ~~WIP Update/search results layouts details component~~ Update/search results layouts details component Jun 24, 2025

thinknoack added 2 commits June 24, 2025 13:01

lint fix

a74b979

update comment

421b373

nellh requested changes Jun 25, 2025

View reviewed changes

thinknoack added 2 commits June 25, 2025 10:32

move var above condition and use in conditional

cc39639

check for whitespace in heading for search results

ef04418

thinknoack requested a review from nellh June 25, 2025 17:44

nellh requested changes Jun 27, 2025

View reviewed changes

new component for metadata lists in the search details, using modalit…

79de8a7

…yShortMapping function for formatting modalities in various places in search and dataset page header

thinknoack requested a review from nellh June 27, 2025 22:37

nellh approved these changes Jun 28, 2025

View reviewed changes

nellh merged commit f091fa9 into master Jun 28, 2025
14 of 15 checks passed

nellh deleted the update/search-results-layouts-details-component branch June 28, 2025 01:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update/search results layouts details component #3495

Update/search results layouts details component #3495

Uh oh!

thinknoack commented Jun 17, 2025 •

edited

Loading

Uh oh!

codecov bot commented Jun 17, 2025 •

edited

Loading

Uh oh!

nellh left a comment

Uh oh!

thinknoack commented Jun 25, 2025 •

edited

Loading

Uh oh!

nellh Jun 27, 2025

Uh oh!

thinknoack Jun 27, 2025

Uh oh!

nellh Jun 27, 2025

Uh oh!

thinknoack Jun 27, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	/**
	* Provide a mapping from the schema names to an expected short name used for OpenNeuro display
	*/
	export function modalityShortMapping(modality) {
	switch (modality) {
	case "ieeg":
	case "iEEG":
	return "iEEG"
	case "beh":
	return "Behavioral"
	case "motion":
	return "Motion"
	case "micro":
	return "Microscopy"
	case undefined:
	return undefined
	case null:
	return null
	default:
	return modality.toUpperCase()
	}
	}

Update/search results layouts details component #3495

Update/search results layouts details component #3495

Uh oh!

Conversation

thinknoack commented Jun 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jun 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

nellh left a comment

Choose a reason for hiding this comment

Uh oh!

thinknoack commented Jun 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nellh Jun 27, 2025

Choose a reason for hiding this comment

Uh oh!

thinknoack Jun 27, 2025

Choose a reason for hiding this comment

Uh oh!

nellh Jun 27, 2025

Choose a reason for hiding this comment

Uh oh!

thinknoack Jun 27, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

thinknoack commented Jun 17, 2025 •

edited

Loading

codecov bot commented Jun 17, 2025 •

edited

Loading

thinknoack commented Jun 25, 2025 •

edited

Loading