3.3.1. Creating the Feature Page

1️⃣ What page has to be created?

To start, you can create a page with the following:

1. Create a copy of the template file, rename it to the page name (for naming conventions, refer to the folder / file name conventions, and make sure that the file is under the pages folder.

2. For reference, the necessary imports you would need are the following:

   import dash_bootstrap_components as dbc 
   from dash import html, dcc 
   from callbacks.constants import Constants 
   

3. In the template provided, make sure to replace the layout variable's id label so that it would be unique and would not pose a problem when calling the page. For consistency, define the label in the Constants.py and use that to replace the layout variable's id label.

   layout = html.Div(
       id={
           'type': 'analysis-layout',
           'label': Constants.LABEL_TEMPLATE # Replace the Constants.LABEL_TEMPLATE with the constant variable you have defined in the Constants.py for consistency
        },
        hidden=True,
        children=[
            # Place here the necessary UI
        ]
   )
   

4. Define the children of the layout variable. The general flow of a page consists of the following:

   1. A short introduction of the page

      For consistency, define the short introduction in the Constants.py and in the page, use that in the short introduction portion div

      html.Div([
          html.P(
              [Constants.INTRO_TEMPLATE, # Replace the Constants.INTRO_TEMPLATE with the constant variable you have defined in the Constants.py for consistency
               ' Click ',
               dcc.Link(
                   ['here ', html.I(
                       id='demo-link',
                       className='fa-solid fa-up-right-from-square fa-2xs'
                   )],
                   href='https://github.com/bioinfodlsu/rice-pilaf/wiki/3.5.2-Creating-an-analysis-page', # Change the link to the specific analysis page in the github wiki
                   target='_blank',
                   className='top-navbar-item'
               ),
               ' for the user guide.'
              ]
          )
        ], className='analysis-intro p-3'),
      

   2. Display of the submitted genomic interval

      In this section, we display the submitted genomic interval so that the user will be reminded of it. You would need to create a container for it and to actually display the submitted input, you would need to declare them in the callbacks. You can refer to Writing the Callback Function Documentation Section.

      html.Div([
          html.I(
              className='bi bi-chevron-bar-right me-2 non-clickable'
          ),
          html.Span(id='template-genomic-intervals-input'),
      ], className='analysis-intro p-3')
      

   3. Required user inputs for the analysis and a submit button

      In the template provided, some common inputs (i.e. textbox, radio buttons, checkboxes, and sliders) are placed inside the children of the layout variable. You can play around with them and use whatever you need for the page. You can also refer to the Dash documentation for other inputs that you would want to use. You might notice that the examples provided uses dbc (Dash Bootstrap Components) rather than dcc (Dash Core Components). This is because dbc incorporates Bootstrap already in contrast to dcc. You can, however, also use dcc.

      • Sample textbox declaration

        dbc.Textarea(id='template-textbox')
        

      • Sample radio buttons declaration

        dbc.RadioItems(
            id='template-radio-buttons',
            options=['Option 1', 'Option 2'],
            value='Option 1',
            inline=True,
            className='ms-3 mt-1'
        )
        

      • Sample checkboxes declaration

        dbc.Checklist(
            id='template-checkbox-buttons',
            options=['Checkbox 1', 'Checkbox 2'],
            value=['Checkbox 1', 'Checkbox 2'],
            inline=True,
            className='ms-3'
        )
        

      • Sample slider declaration

        dcc.Slider(
            id='template-parameter-slider', 
            step=None,
            marks={0: '1 (Loose Modules)', 30: '2', 60: '3',
                   90: '4 (Dense Modules)'},
            value=30
        )
        

   4. Results

      Make sure to encase your results inside a div so that it would be easier to hide or display the results should the user clicks on the submit button. This would be discussed further in the Writing the Callback Function Documentation Section.

      html.Div(
          id='template-results-container',
          style={'display': 'none'},
          children=[
              html.Hr(className='mt-3 mb-4'),
              
              # Place results here
          ]
      )
      

      In this section, you can display the submitted input values for the specific page, short summary text, tables, graphs, and many more. You can define the necessary UI such as html.Div(), dash_table.DataTable(), and many more here in this page. For the functionality, this would be discussed further in the Writing the Callback Function Documentation Section.

2️⃣ What files have to modified? Why?

1. To display the page in the homepage, navigate to analysis_layout.py. The logic for displaying the page with a click of the page option in the sidebar has already been implemented. You would just need to include your page option and the page layout in the list by doing the following:

   1. Include your page option in the sidebar in the homepage

      1. Define your page option in the return statement's OrderedDict() of get_analysis_layout_dictionary()
         • Make sure to use the analysis label constant variable that you have defined earlier in the step #3 as the key and the name of the page option as the value.

   2. Include your layout in the list of layouts

      1. Import your page
      2. Include your page layout inside the children of the layout variable's html.Div()

2. loading.css

3. constants.py

3️⃣ What are the styling conventions?