Component

Components [1] are individual elements or modules that make up the profile. These can include various functionalities or data points that contribute to the profile’s overall purpose.

Component Database Table Structure

Each component that make up a profile has specific settings and functionalities that contribute to the profile’s overall purpose.

The PostgreSQL table Component consists of the following fields:

id (Integer): The unique identifier for the component
name (String): The name of the component
title (String): The display title of the component
widget_icon (String): The icon associated with the component
widget_colour (String): The colour associated with the component, used for UI elements
widget_icon_class (String): The CSS class for the icon
table_id (String): The identifier for the associated table
reverse_url (String): The URL used for reversing the component
subtitle (String): The subtitle of the component, providing additional context

Hint

Click the collapsible-item-arrow button below to view the contents

Component database fields

 id |         name         |        title         | widget_icon  | widget_colour | widget_icon_class  |      table_id       |                    reverse_url                     |      subtitle
----+----------------------+----------------------+--------------+---------------+--------------------+---------------------+----------------------------------------------------+---------------------
| profile              | Work Profiles        |              |               |                    | copo_profiles_table |                                                    | #component_subtitle
| accessions           | Accessions           | sitemap      | pink          | fa fa-sitemap      | accessions_table    | copo_accession:copo_accessions                     |
| accessions_dashboard | Accessions           | pink         |               | fa fa-sitemap      | accessions_table    | copo_accession:copo_accessions                     |
| assembly             | Assembly             | puzzle piece | violet        | fa fa-puzzle-piece | assembly_table      | copo_assembly_submission:copo_assembly             |
| taggedseq            | Barcoding Manifests  | barcode      | red           | fa fa-barcode      | tagged_seq_table    | copo_barcoding_submission:copo_taggedseq           | #component_subtitle
| files                | Files                | file         | blue          | fa fa-file         | files_table         | copo_file:copo_files                               |
| sample               | Samples              | filter       | olive         | fa fa-filter       | sample_table        | copo_sample:copo_samples                           |
| read                 | Reads                | dna          | orange        | fa fa-dna          | read_table          | copo_read_submission:copo_reads                    | #component_subtitle
| seqannotation        | Sequence Annotations | tag          | yellow        | fa fa-tag          | seqannotation_table | copo_seq_annotation_submission:copo_seq_annotation |

Description of each Component record

profile: Work Profiles component

The first step to getting work done in COPO is to create a work profile. A profile is a collection of ‘research objects’ or components that form part of your research project or study.
accessions and accessions_dashboard:

Both relate to the accessions component. The accessions component provides a platform for retrieving and analysing biological samples that have biosample accession, SRA accession and submission accession associated with them as part of a project after the samples have been accepted.
assembly: Assembly component

The assembly component provides a platform for aligning and merging fragments of a Deoxyribonucleic acid (DNA) sequence to reconstruct the original structure of the DNA.
taggedseq: Barcoding Manifests component

This component provides a platform for submitting assembled and annotated sequences representing interesting features or gene regions.
files: Files component

With this component, files can be uploaded from a cluster or from one’s local (computer) system.
sample: Samples component

Biological samples, obtained as part of a project, are described and managed in this component.
read: Reads component

This component is associated with assembled and annotated sequences representing interesting features or gene regions.
seqannotation: Sequence Annotations component

Specific features, in this component, are marked in a Deoxyribonucleic acid (DNA), Ribonucleic acid (RNA) or protein sequence with descriptive information about structure or function. Sequence annotations are usually done after a genome is sequenced and assembled.

Creation of Component

Note

This section assumes that you have installed Django, Python and created a Django project.
The migrations folder is automatically created within your app directory when you create your app. It contains database migration files.

See also

Django application structure for an snapshot of Django application’s structure

To create a component in the project, a Django application has to be created for the component. Then, the component has to be associated with a profile type defined in the ProfileType structure section. This association will allow the component to be accessible and visible on the Work Profiles web page.

Explore the implementation details of each component of the Django application used in the COPO project through the links provided below:

Other Django applications created in the COPO project can be found in the src/apps folder of the COPO GitHub repository.

Navigate to the project directory

cd /path/to/project

Create a new Django application using the startapp command

python manage.py startapp myapp

Register app by adding it to the INSTALLED_APPS list in myproject/settings.py

 INSTALLED_APPS = [
     # ... other installed apps,
     'myapp',
 ]

Create a static folder inside the app directory to store static files like CSS, JavaScript and images:

 mkdir myapp/static

Create a css folder inside the static folder in the app directory to store CSS files

 mkdir myapp/static/myapp/css
 cd myapp/static/myapp/css
 touch myapp.css

Create a JavaScript (js) folder inside the static folder in the app directory to store JavaScript files

 mkdir myapp/static/myapp/js
 cd myapp/static/myapp/js
 touch myapp.js

Create a templates folder inside the app directory to store HTML templates

 mkdir -p myapp/templates/myapp

Set up the configuration of the app in the an apps.py file inside the app directory

from django.apps import AppConfig

class MyappConfig(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    name = 'myapp'

Define URL routes in the urls.py file inside the app directory

from django.urls import path
from . import views

urlpatterns = [
   path('', views.index, name='index')
]

Define view functions in the views.py file inside the app directory

from django.shortcuts import render
from .models import ProfileType, Component

def index(request):
    profile_type_models = ProfileType.objects.all()
    component_models = Component.objects.all()

    return render(request, 'myapp/index.html', {'profile_type_def': profile_type_models, 'component_def': component_models})

Create an component.html file inside myapp/templates/myapp:

Component example template

<!-- myapp/templates/myapp/component.html -->
{% load static %}
<!DOCTYPE html>
<meta charset="utf-8">
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=10">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>My App</title>

        <link rel="stylesheet" href="{% static 'myapp/css/myapp.css' %}">
        <script src="{% static 'myapp/js/myapp.js' %}"></script>

        <script>
            const component_def = {
              {% for component in component_def %}
                {{ component.name|lower }}:  {
                  component: '{{ component.name }}',
                  title: '{{ component.title }}',
                  {% if component.subtitle %}
                  subtitle: '{{ component.subtitle }}',
                  {% endif %}
                  iconClass: '{{ component.widget_icon_class }}',
                  semanticIcon: '{{ component.widget_icon }}',
                  buttons: [ {% for button in component.title_buttons.all %} '{{ button.name }}', {% endfor %} ],
                  sidebarPanels: ['copo-sidebar-info'],
                  colorClass: '{{ component.widget_colour_class }}',
                  color: '{{ component.widget_colour }}',
                  tableID: '{{ component.table_id }}',
                  recordActions: [ {% for button in component.recordaction_buttons.all %} '{{ button.name }}', {% endfor %} ],
                  url: "{% if component.reverse_url %}{% url component.reverse_url profile_id='999' %}{% endif %}",
                },
              {% endfor %}
            }

        const title_button_def = {
          {% autoescape off %}
              {% for button in title_button_def %}
                {{ button.name  }} : {
                  template: `{{ button.template }}`,
                  additional_attr: '{{ button.additional_attr }}',
                  },
              {% endfor  %}
          {% endautoescape %}
        }

        const profile_type_def = {
          {% for profile_type in profile_type_def %}
            {{ profile_type.type|lower }}:  {
              title: '{{ profile_type.type | upper }}',
              widget_colour: '{{ profile_type.widget_colour }}',
              components: [ {% for component in profile_type.components.all  %} '{{ component.name }}', {% endfor %} ]
            },
          {% endfor %}
        }
        function get_profile_components(profile_type) {
            return profile_type_def[profile_type.toLowerCase()].components.map(component => component_def[component]);
        }
        </script>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-sm-9 col-md-9 col-lg-9">
                    <div hidden id="hidden_attrs">
                       <!-- hidden attributes  -->
                       <input type="hidden" id="nav_component_name" value="component_name"/>
                    </div>
                    <div class="global-page-title">
                        {% block page_tile %}
                        {% endblock page_tile %}
                    </div>
                    {% block content %}
                        <!-- getting started section -->
                        <div class="row">
                            <div class="col-sm-5 col-md-5 col-lg-5 col-xs-offset-0 page-welcome-message"
                                 style="display: none;">
                                <div class="copo-webui-popover">
                                    <div class="webui-popover-inner">
                                        <h3 class="copo-webui-popover-title">Getting started</h3>
                                        <div class="copo-webui-popover-content">
                                            <div class="webpop-content-div">Welcome to the page
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- component_table -->
                        <div id="component_table_loader" class="col-sm-5 col-md-5 col-lg-5 col-xs-offset-5"
                             data-copo-tour-id="component_name_table">
                        </div> <!-- div used by the quick tour agent -->
                        <div class="table-parent-div">
                            <table id="component_name_table" class="ui celled table hover"
                                   cellspacing="0" width="100%">
                            </table>
                        </div>
                    {% endblock content %}
                </div>
                <div class="col-sm-3 col-md-3 col-lg-3">
                  {% block component_info %}
                        <div style="display:none; margin-top: 30px; " id="component_name_info" class="alert alert-info"  role="alert"></div>
                  {% endblock component_info %}
               </div>
            </div>
         </div>
    </body>
</html>

Create the following files in the application directory:

admin.py - to register models with the Django admin site. See the Registering Django models section for more information.
models.py - to define database models. See the Defining Django models section for more information.
tests.py - to write tests for the Django application.

Visualisation of Created Component

Tree of Life Profile: Components

The following components make up a ToL [2] profile:

Each profile will have a set of components that are associated with it. These components will be displayed on a profile on the Work Profiles web page.

Components will also appear to the top-right of web pages for easy navigation to them, depending on the component that is being viewed. For example,the Reads component leads to the Reads web page and the other components are displayed as indicated by the arrows in the image below:

Reads web page: Other components are displayed at the top-right of the screen and can be clicked for easy navigation

If the current web page is not the Reads web page, the Reads component, , will be displayed at the top-right corner of the web page.

Footnotes