Creating a Page

Custom pages are useful if you want to create a new tool separate from the rest of the Scifeon user interface.

In the fermentation app, an analysis tool is made to display the chemical changes happening through time.

The page function is defined in a decorator in the beginning of the script.

import { route } from '@scifeon/plugins';
@route({
    route: "ferm/page-chart/:id",
    title: "Fermentation - Online Chart"
})

Using the route decorator creates a new page at the specified route. There are other optional variables, such as chunking options, but route and title are the mandatory ones.

Aurelia

Scifeon uses Aurelia for their framework. Aurelia allows an HTML page (a "view") to interact with a TypeScript (a "view model"), calling methods and variables directly.

<select value.bind="selectedField" change.delegate="updateChartData()">
    <option repeat.for="field of fields" model.bind="field">${field}</option>
</select>

The above code calls the fields list from the view model and, iterating through it, creates a drop down menu of the available fields. The chosen one is then bound to the selectedField variable and the updateChartData method is called.

Getting Data from the Database

To access the fermentation data in the database, the dataset querying function is called. This function accesses the database , applies a search given the query parameters, and returns an object with the results. Documentation on exact use of the function can be found here.

const dataset = await this.server.datasetQuery([
    { eClass: 'ResultSet', alias: 'rs', filters: [{ field: 'ID', value: this.resultSetID }]},
    { eClass: 'ResultFermOnline', collection: 'online',
        filters: [{ field: 'ResultSetID', values: resultSets}],
        operations: [
            {
            field: 'Content',
            type: 'slice',
            columns: ['Age_h', this.selectedField],
            rowFilters: [{ field: 'Age_h', min: 1, max: 3 }]
            }
        ]
    }
]);

In this specific call, entities of the ResultSet class are accessed and those with an ID equal to this.resultSetID are returned.

In the same manner, entities of the ResultFermOnline class are accessed and those originating from a fermentation result set are returned.

The operations property performs a slice on the returned dataset, resulting in the returned data matrix only containing columns where the Age_h variable is between 1 and 3.

Displaying the Graph

Fermentation experiments generally create a large amount of data. To handle this, the datapoints are averaged out on ~300 points in the graph. This reduces load time of the graph without removing much information.

The datapoints are stored in the seriesGroup object which consists of two lists with X- and Y-values. This is passed to the chart element in the view.

<chart options.bind="chartOptions" type="xy" legends="none"series-group.bind="seriesGroup" ></chart>