Annotation Database Website

The annotation database Website runs on a Django (Python) backend with a Vue 3 (JavaScript, CSS, HTML) frontend.

Django

The backend runs on Django with some small modifications to the structure.

Configuration

Rather than a single settings file (the default), the server uses one of four configuration files stored in the settings folder, each of which inherits from a base file called base.py, which provides configurations common to all other configurations. The four configurations are:

• prod.py -- The production database configuration.
• stage.py -- The staging site configuration.
• dev.py -- A configuration for use on development machines.
• test.py -- A configuration for use by the unit testing framework.

The base file contains two custom functions:

• load_config -- loads database configuration files, as described on the Annotation Database page: each site uses a different database with unique credentials. Each of the four Django settings files loads the corresponding configuration file.
• init_dirs -- creates directories necessary to the operation of the server and logs any failures. The function creates directories added to the database configuration files using the [name]:[value] structure. Currently the only added directory is upload_dir.

TODO: More.

Vue 3

The Website frontend is built using the Vue.js framework for creating reactive interfaces.

Model Framework

The Model framework is a JavaScript library that provides persistable client-side representations of Django models. The framework manages the object graph so that when an instance is loaded or updated from the server, it is looked up in the graph by its ID. If it exists, the existing instance is updated and duplication is avoided.

The Model class has three main configuration features available to subclasses:

• path generation -- a function or variable that provides one or more ReST paths for managing object state. A model might be accessible via a top-level path, or as a child of some other entity or entity tree. The function allows the path to by dynamically constructed using a list of parent instances passed into the function. The function also allows the configuration of request parameters.
• property declaration -- an Object that provides property names and default values.
• class map -- an Object that provides a mapping between property names and class names of properties that inherit from Model.

An example of a basic Model subclass follows. In this example, Net.API is a constant containing the current ReST endpoint root path. This is defined by default.

‎

    class Propeller extends Model {
    
        static modelPath = function(params) {
    
            // Get the first parameter of the models list, if there is one.
            const inst = params.models.pop();
    
            if(inst && inst instanceof Airplane) {
                // If the parameter is an instance of Airplane, only 
                // consider its propellers.
                return `${Net.API}/airplanes/${inst.id}/propellers`;
            } else {
                // If no parameter is given, consider all propellers.
                return `${Net.API}/propellers`;
            }
        };
    
        static defaultProps = {
            id: 0,                // An ID is always required.
            pitch: null,
            diameter: null,
            type: null            // Is an instance of the class PropellerType 
                                  // as declared below.
        };
    
        static classMap = {
            type: 'PropellerType' // This is a string because 
                                  // the class may not have been defined yet.
        };    
    };