This page describes the codebase for the request creation user interface (UI). If you would like to see it in action, visit the user guide.

Lifecycle

The lifecycle is a term from the Aurelia framework employed by Scifeon. It refers to the phases a web page goes through and can be used to activate certain parts of a script at certain time points.

For the request UI, just one lifecycle function is used:

activate() is called just before the view model is displayed. Here, it is used for loading data from localStorage:

const lastSavedRequest: any = JSON.parse(localStorage.getItem(this.LAST_SAVED_KEY) || '{}');

This allows the user to reuse data from previous requests as inboxID and request type is saved.

attached() is called when the component is attached to the DOM. For the request UI, it is used to load methods from the database:

const dataset = await this.server.datasetQuery([
    { eClass: 'Method', collection: 'methods' }
]);

Scifeon View

Below is an image of the UI. Red Numbers match the numbering of the next sections.

1. Sidebar

The sidebar contains metadata about the sender, receiver, and type of the request. The view model is defined in a sidebar div element, with the dropdowns being a custom HTML element:

<entity-form e-class="request" valid.bind="isValid" object.bind="request" fields="customerID, type, description, inboxID" horizontal.bind="false"></entity-form>

e-class defines the entity class, while fields contains the customizable elements to be shown.

The sidebar also contains a dropzone for files. The HTML element is shown below:

<dropzone dropfiles.delegate="attachFiles($event.detail.files)" title="Drop files to attach"></dropzone>

When a file is dropped in the zone, the attachFiles() function is called. $event.detail.files contains the dropped file object.

async attachFiles(files) {
    const dataUploadInfo = await this.fileProcessor.preprocessFiles(files);
    this.files.push(...dataUploadInfo.fileInfos);
}

The above TypeScript contains the attachFiles() function. This function processes the dropped files and pushes them to a list of uploaded files. The files can then be viewed in the sidebar.

2. Notes

The main page elements are built into panels. Each panel consist of a header and a body. The first panel allows for custom notes to be attached to a request. The note is very customizable and can contain text, tables, and images.

The note object is initialized as a class property:

note = {
    eClass: 'Note',
    subjectClass: 'Request',
    subjectID: '#idRequest',
    content: '',
    type: WFMConstants.TYPE_REQUEST_NOTES
};

The content field can then be filled by the user using the HTML element in the UI:

<rich-text-editor value.bind="note.content" class="no-border"></rich-text-editor>

Whatever is written in the text field is saved to the content field of the note entity. When the request is saved, the note entity is also sent to the database. It is linked to the request through the subjectID property.

3. Samples

The second panel allows the user to create samples for his/her experiment. The samples are described by a name, an ID, and a short description. When the request is saved, the samples are saved as sample entities in the Scifeon database.

The sample UI is made with the custom HTML element entity-list-editor which creates a customizable Handson table.

<entity-list-editor fields.bind="sampleFields" entities.bind="samples" e-class="Sample"></entity-list-editor>

The fields attribute selects which columns are available in the table while the entities attribute selects which variable the input is bound to.

4. Methods

The Methods panel uses a custom HTML element to fetch available methods from the database and display a samples-method-map.

The map allows the user to select/deselect specific methods for each sample by clicking a checkbox.

<sample-methods selected-methods.bind="selectedMethods" samples.bind="samples"></sample-methods>

The methods in the selected-methods list are mapped to the sample entities. This allows the user to pass several samples requiring different methods at once.