Neda Taghizade Serajeh

FE · OSS · 01 · Case study

Terminology mapping and entity widgets

Open-source React and TypeScript widgets that let research apps show ontology data, including cross-ontology mappings, without custom code.

Where
ZB MED
When
2025–
Type
Open source
  • GitHub · 33 merged PRs github.com: the list of my merged pull requests in the library (opens in a new tab)
  • Storybook The library’s public Storybook, where every widget can be tried live (opens in a new tab)
  • npm npmjs.com: the published package, about 11,000 downloads a year (opens in a new tab)

Context

The Terminology Service Suite (TS4NFDI) is an open-source library of interactive widgets. Research apps use it to search ontologies, show terms and their metadata, and link related terms, without writing that interface themselves.

I joined the team at ZB MED in December 2025 as a front-end developer. The package had about 11,400 npm downloads between October 2025 and October 2026.

Who did what

My part

  • Built the terminology-mapping widgets from the first version to the full feature set: both mapping directions, filters and detail views.
  • Built the EntityListWidget for browsing ontology classes, properties and individuals, with search and pagination.
  • Split existing widgets into separate data and presentation layers.
  • Fixed rendering, styling and type bugs, redesigned the Next.js demo and kept the Storybook docs current.
  • Extending the plain JavaScript package so every widget also works without React (in progress).

Team part

  • The library existed before I joined; its architecture, APIs and release process belong to the TS4NFDI team.
  • Maintainers reviewed every pull request and set the priorities through issues.

How one widget is layered after the split

  1. Data layerFetches from the terminology APIs and returns typed data
  2. PresentationPure UI component: props in, interface out
  3. Wrapped widgetAdds the providers it needs, for drop-in React use
  4. JS wrappercreateWidget(props, container) for apps without React

Decisions

Separate the data from the interface

Some apps already have the ontology data and only need the interface. Splitting each widget into a data layer and a presentation layer lets them reuse the UI without the built-in requests.

Done widget by widget, so each pull request stayed small enough to review.

Show mappings in both directions

A term can be mapped to other ontologies and others can be mapped to it. The mapping list shows either direction, or both, so researchers see the full picture in one place.

Filters and a detail view keep long mapping lists readable.

Make the library usable without React

Many research apps are not React apps. Plain JavaScript wrappers mount each widget into any page, which widens who can adopt the library.

Requested by the maintainers in an issue and reviewed by them, widget by widget.

Outcome

  • 33 pull requests merged into the main branch between April and October 2026.
  • The mapping and entity-list widgets are part of the published package and documented in its public Storybook.