Skip to content

UI

Jump to bottom
Henning Gärtner edited this page Jun 7, 2024 · 2 revisions

Structure of Django project.

The UI is built with the web framework Django. The folder /ui encapsulates all the frontend related code.

A Django project is structured in such way that the root folder (in this case /ui) contains application folders. In PROTzilla there are two applications main and runs. The primary functionality of PROTzilla is in the runs application.

In Django, web pages and other content are delivered by views. Each view is represented by a Python function, which is usually found in the views.py file. A view function takes a HTTP request and returns a HTTP response, for example this can be a HTML page or a HTTP error. Also, Django allows to create HTML pages dynamically with templates. A template contains the static parts of the desired HTML output as well as some special syntax describing how dynamic content will be inserted. Templates are usually located at the templates folder inside the app folder. For further information on Django see their documentation.

PROTzilla's frontend has two main pages: the home page, where runs can be created and continued and the run page, where the user can upload, process, analyse and plot proteomics data according to the selected workflow or add and delete any steps in the current workflow.

PROTzilla UI Documentation

The User Interface (UI) of PROTzilla is primarily built using Django, a high-level Python Web framework. The UI is responsible for rendering the web pages, handling user inputs, and displaying the results of the PROTzilla application.

Key Components

The UI part of PROTzilla is mainly composed of the following components:

  1. Forms: Forms are used to capture user inputs in the web interface. They are defined in the forms directory. Each form corresponds to a specific operation or method in PROTzilla. For example, DimensionReductionTSNEForm is used to capture the parameters for the t-SNE dimension reduction method.

  2. Views: Views are responsible for handling HTTP requests and returning HTTP responses. They are defined in views.py. Views use the data captured by forms to perform operations and generate results. For example, the detail view is used to render the details page of a specific run.

  3. URLs: URLs map to views. They are defined in urls.py. For example, the URL detail/<str:run_name> maps to the detail view, which displays the details of a run with the given name.

  4. Templates: Templates define how the web pages look. They are written in HTML and can include Django template language elements.

Workflow

Here is a simplified workflow of how the UI part works:

  1. The user interacts with the web interface, for example by filling out a form to specify the parameters for a method.

  2. When the user submits the form, a HTTP POST request is sent to the server. The URL of the request determines which view will handle the request.

  3. The view uses the data from the form (available in request.POST) to perform the corresponding operation. This might involve calling functions from the PROTzilla core, which performs computations and generates results.

  4. The view then creates a HTTP response, which can be a rendered web page that includes the results, a redirect to another view, or a file download. The response is sent back to the user's browser.

  5. The user's browser displays the response. If the response is a web page, the user can continue to interact with it, for example by clicking on links or buttons, which starts another cycle of request and response.

Key Files

Here are some key files in the UI part of PROTzilla:

  • forms/base.py: Defines the base classes for forms.

  • forms/data_analysis.py: Defines forms for data analysis methods.

  • forms/data_integration.py: Defines forms for data integration methods.

  • forms/data_preprocessing.py: Defines forms for data preprocessing methods.

  • views.py: Defines the views.

  • urls.py: Defines the URLs.

  • form_mapping.py: Contains functions for mapping between forms and methods.

  • views_helper.py: Contains helper functions for views.

  • fields.py: Contains functions for creating form fields.

Please refer to the code in these files for more details.

Clone this wiki locally