copo/copo-new-web repository overview

⁠Collaborative OPen Omics (COPO) Project

The Collaborative OPen Omics (COPO) project is an open-source web-based platform that enables scientists to describe their research objects (e.g. raw or processed data, assemblies, reads, samples and images) using community-sanctioned metadata sets and vocabularies.

As a metadata broker, COPO encourages scientists to submit metadata that complies with the Findable, Accessible, Interoperable and Reusable (FAIR) principles. These research objects are then shared with the wider scientific community via public repositories. The COPO project is based at the Earlham Institute in Norwich, England, United Kingdom.

This repository builds on the work of the COPO⁠ GitHub repository (now archived), which laid the foundation for the current implementation.

⁠Tech stack overview

⁠Frontend styling

The frontend uses multiple UI frameworks (Bootstrap 3, Semantic UI, Ace, DataTables, Select2, etc.). A single override stylesheet unifies their appearance.

⁠static/copo/css/copo_modern_scheme.css

This is a drop-in cosmetic override loaded as the last stylesheet in <head>. It does not add structural or layout styles — it re-themes every UI framework to produce one consistent look. Removing it should leave the app functional but unstyled.

What belongs here:

• Colour, typography, and spacing overrides for third-party frameworks
• CSS custom properties (design tokens) in :root
• Dark theme variants under [data-theme="dark"]
• Per-profile-type accent colours and tinted card headings

What does NOT belong here:

• Layout or structural styles for new components (use style.css or a component-specific stylesheet)
• Styles that the app depends on to function (e.g. visibility toggling, grid layout)

Dark theme: The [data-theme="dark"] block redefines CSS variables and adds targeted overrides for elements that use hardcoded colours. When adding a new themed rule, prefer using existing --co-* variables so the dark theme inherits it automatically. Only add a [data-theme="dark"] override when a variable alone isn't sufficient.

⁠Component icons and buttons

Component buttons (Samples, Reads, Assembly, etc.) are configured in the database via the Component model and populated by the setup_profile_types management command.

⁠Icon fields on Component

⁠How icons are resolved

The frontend (generic_handlers.js → setComponentIcon() / createComponentAnchor()) checks materialIcon first. If set, it renders a Material Symbol. Otherwise, it falls back to the Semantic UI icon (semanticIcon).

⁠Adding or changing a component icon

1. Edit src/apps/copo_core/management/commands/setup_profile_types.py
2. Update the create_component() call with the new material_icon, widget_icon_class, or button_label
3. Run python manage.py setup_profile_types on the target instance

⁠Migration note

The material_icon field was added in migration 0027_add_material_icon_to_component. Instances that have not yet run setup_profile_types will have material_icon = NULL, which is safe — the frontend falls back to the Semantic UI icon. Once the command is run, Material Icons take effect.

⁠Other stylesheets

⁠Related repositories

• COPO-production⁠ – This repository (included for reference)
• COPO-schemas⁠
• COPO-documentation⁠
• COPO-sample-audit⁠
• SingleCellSchemas⁠

⁠Additional resources

• General documentation about the COPO project⁠

• Steps to setting up the COPO project locally⁠

• Deployment guidelines⁠

• Guidelines for configuring profile types⁠

• 

• COPO's FAIRsharing resource⁠

• Single-cell website⁠

• To report issues⁠