feat: adding tree view and allowing pinning hovercards

[max-marped]

Description

This adds the tree view for scientific metadata to the hover card. It also allows the user to pin the card for closer inspection.

Motivation

Using the tree view for the hover card allows for better structuring of the information. It also makes it recognisable from other parts of the application.

Having the ability to pin the card is useful for when the card contains a lot of information.

Changes:

• Tree view for metadata hover card
• A subtree can be displayed, for example using name: "scientificMetadata.my-group" in the config.
• Adding pin overlay to the description icon for the metadata column
• When a card is pinned, the hover-card gets a more prominent shadow to indicate the difference
• Adjusting the positioning to center the card relative to the icon

Tests included

• Included for each change/fix?
• Passing? (Merge will not be approved unless this is checked)

Documentation

• swagger documentation updated [required]
• official documentation updated [nice-to-have]

official documentation info

If you have updated the official documentation, please provide PR # and URL of the pages where the updates are included

Backend version

• Does it require a specific version of the backend
• which version of the backend is required:

Summary by Sourcery

Improve dynamic material table hover-card UX, especially for pinning and scientific metadata display.

New Features:

• Allow hover cards in the dynamic material table to be pinned via click on the metadata/description icon and stay open until explicitly closed.
• Show scientific metadata in hover cards using a tree view component when the column contains scientificMetadata, with a dedicated empty state when no metadata is available.

Enhancements:

• Make pinned hover cards visually distinct with stronger shadowing and pin indicators on the trigger icon and card header.
• Center hover cards relative to their trigger icons and constrain card sizing and scrolling for better readability on large metadata payloads.
• Prevent pinned hover cards from changing on hover and close them on outside click or backdrop interaction for more predictable behavior.

Tests:

• Add a (currently empty) spec file for the dynamic material table component as a starting point for test coverage.

Summary by Sourcery

Add pinning support and scientific metadata tree view to hover cards in the dynamic material table.

New Features:

• Enable hover cards in the dynamic material table to be pinned via icon click and remain open until explicitly closed.
• Display scientific metadata columns in hover cards using the existing tree view component, including support for rendering subtrees based on column configuration.

Enhancements:

• Center metadata hover cards relative to their trigger icon and adjust sizing, scrolling, and empty states for better readability with large metadata payloads.
• Visually distinguish pinned and non-pinned hover-card triggers and pinned cards with icon overlays and stronger shadows.
• Refine scientific metadata tree layout and spacing for use within compact hover-card contexts.

Build:

• Increase the Angular anyComponentStyle maximumError budget to accommodate the larger compiled styles for the updated components.

Tests:

• Introduce an initial (empty) spec file for the dynamic material table component to seed future test coverage.

[sourcery-ai]

Hey - I've left some high level feedback:

• In the metadata cell icon you bind [class.pinned]="isHoverCardPinned" without arguments, which will always be truthy (function reference) instead of reflecting the current cell’s state; this should likely be isHoverCardPinned(row, column) as in the other usages.
• The stronger box shadow for pinned cards is only applied via .metadata-hover-card.pinned-card, so non-scientific hover cards don’t get the more prominent shadow mentioned in the description; consider applying the pinned styling to all hover cards or clarifying the intended scope.
• The scientific metadata hover card markup is duplicated between the metadata column and the standard hover icon path; consider extracting this into a shared component or structural template to keep the logic and layout in one place.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- In the metadata cell icon you bind `[class.pinned]="isHoverCardPinned"` without arguments, which will always be truthy (function reference) instead of reflecting the current cell’s state; this should likely be `isHoverCardPinned(row, column)` as in the other usages.
- The stronger box shadow for pinned cards is only applied via `.metadata-hover-card.pinned-card`, so non-scientific hover cards don’t get the more prominent shadow mentioned in the description; consider applying the pinned styling to all hover cards or clarifying the intended scope.
- The scientific metadata hover card markup is duplicated between the metadata column and the standard hover icon path; consider extracting this into a shared component or structural template to keep the logic and layout in one place.

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[max-marped]

The first point of the sourcery comment has been addressed in the updated commit.

[sourcery-ai]

Hey - I've found 1 issue, and left some high level feedback:

• The @HostListener('document:click') onDocumentClick() handler currently closes any pinned hover card on every document click, including the same click that pins it, because stopPropagation does not prevent the document-level listener from firing; consider accepting the event (@HostListener('document:click', ['$event'])) and only closing when the click target is outside the overlay/trigger, or rely solely on the CDK backdrop for closing.
• For getScientificMetadata, using lodashGet for a single dotted-path access can be replaced with a small local helper or Angular-safe optional chaining to avoid pulling in lodash-es for this narrow use case and reduce bundle size impact.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The `@HostListener('document:click') onDocumentClick()` handler currently closes any pinned hover card on every document click, including the same click that pins it, because `stopPropagation` does not prevent the document-level listener from firing; consider accepting the event (`@HostListener('document:click', ['$event'])`) and only closing when the click target is outside the overlay/trigger, or rely solely on the CDK backdrop for closing.
- For `getScientificMetadata`, using `lodashGet` for a single dotted-path access can be replaced with a small local helper or Angular-safe optional chaining to avoid pulling in lodash-es for this narrow use case and reduce bundle size impact.

## Individual Comments

### Comment 1
<location path="src/app/shared/modules/dynamic-material-table/table/dynamic-mat-table.component.ts" line_range="489-494" />
<code_context>
+    return lodashGet(row, name);
+  }
+
+  hasScientificMetadata(row: Record<string, unknown>, column?: TableField<T>) {
+    const metadata = this.getScientificMetadata(row, column);
+    return (
+      !!metadata &&
+      typeof metadata === "object" &&
+      Object.keys(metadata).length > 0
+    );
+  }
</code_context>
<issue_to_address>
**issue (bug_risk):** Primitive scientificMetadata values are treated as empty and never displayed.

Because `hasScientificMetadata` only returns true for non-empty objects, any primitive value (e.g. `scientificMetadata.temperature` as a string/number/boolean) will be treated as empty and show the `emptyScientificMetadata` template, even though data exists.

If you only want the tree UI for object-like values, you could:
- Keep the tree behind an `isObjectLike(metadata)` check, and
- Render the primitive directly when `metadata` is not an object, instead of using `emptyScientificMetadata`.

This would avoid misleading "No content" messages when primitives are present.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}