Improved child terms UI with better visual design

[tmushayahama]

Problem

The original child terms section had several UX issues:

• Basic gray background looked washed out and unprofessional
• Poor visual differentiation between parent terms and child terms
• No educational context about GO term hierarchy for users unfamiliar with ontologies
• Simple "Child Terms" header didn't convey the nested/flattened nature
• No easy way to collapse expanded section

Solution

Enhanced the visual design and user experience:

Visual Differentiation

• Parent terms: circular badges, white background
• Child terms: square badges, subtle colored background, lighter bars
• Each category uses its parent's color theme for easy identification

Better Header

• Changed to "Child & Descendant Terms (N)" with count
• Added hierarchy icon
• Added close button (X) for easy collapse
• Header uses parent term's color

Educational Tooltip

• Explains GO term hierarchy and flattened list structure
• Helps users unfamiliar with ontologies understand the data

Professional Design

• Card-style layout with shadows and proper spacing
• Cohesive color theming per category
• Clear visual hierarchy through shape, color, and indentation

[thomaspd]

Looks good. Please change the text from "Child & Descendant terms" to "Directly annotated terms in this category".
Please change the tooltip to "Listed below are all GO terms in this category that are annotated to a human gene. The annotated term can be the same, but is usually more specific, than the category term. The numbers below count the genes annotated directly to a given term, whereas the counts above for the category include genes annotated either directly to that term or to one of its more specific descendant terms in GO."

[tmushayahama]

@thomaspd Updated — ready for testing on the dev server.