EDAM select

A control to select EDAM terms

Follow @inkuzmin Star Fork

Initialisation

The initialisation looks as follows:

let edamSelect = new EdamSelect('#edam-select-1', {
    name: 'ref-1',          // optional
    type: 'operation',
    initDepth: 1,           // default
    inline: false,          // default
    closeOnSelect: true,    // conditional default
    maxHeight: 300,         // optional
    multiselect: false,     // default
    checkboxes: false,      // default
    search: {               // default
        threshold: 0.1,
        label: true,
        synonyms: true,
        definitions: true,
    },
    preselected: false      // default
});

The result:

Parameters

The first argument is the selector for the DOM node, that will be used to mount control to. It can be just an empty div element.

The second argument is the configuration object. Let's go through its properties one by one.

name

An arbitrary string used to distinguish the edam:change event emitters.
type
String
required
no
default
edam-${number}

type

EDAM sub-ontology or branch of concepts.
type
Enum[ data | operation | topic | format ]
required
yes

initDepth

It sets the default level of the terms' hierarchy that is disclosed (opened). If 0, then the hierarchy is fully-disclosed (it might affect the rendering time and responsiveness).
type
Integer
required
no
default
1
special case
0 treated as +Infinity

inline

If true the selection element will appear as an overlay. Else the selection menu will push elements when opened.
type
Boolean
required
no
default
false
example: inline: true

closeOnSelect

If the selection menu should be closed automatically on select.
type
Boolean
required
no
default
multiselect ? false : true

maxHeight

If the selection menu should be closed automatically on select.
type
Integer
required
no
default
inferred from the content height

multiselect

If multiple terms can be selected.
type
Boolean
required
no
default
false
example: multiselect: true

checkboxes

Change interface to have radio buttons (if multiselect is false) or checkboxes (if multiselect is true) next to terms. Also changes some interactions, see the comparison table below.
type
Boolean
required
no
default
false
comparison table
checkboxes false true
selection click on the term click on the radio button / checkbox next to the term or double-click on the term
toggle info click on the icon button click on the term
example: checkboxes: true

search

Parameters used to initialise fuse.js. Threshold is from 0.0 (perfect match) to 1.0 (match anything). label, synonyms and definitions could restrict the search to be performed only across the certain fields.
type
Object
required
no
default
{
    threshold: 0.1,
    label: true,
    synonyms: true,
    definitions: true
}

preselected

The list of EDAM terms to be preselected by their EDAM URIs or (deprecated) by internal IDs.
type
Array[Strings] or (deprecated) Array[Integers]
required
no
default
no
example: preselected: ["http://edamontology.org/topic_0091"]

Access

There are to ways to access the selected terms: by listening to the edam:change event that is fired when the list of selected terms is changed (when user selects or unselects the terms):

document.addEventListener('edam:change', (event) => {
    console.log(event.detail);
});
{
    "name": "edam-1",
    "id": 1,
    "type": "data",
    "selected": [{
        "0": 477,         // Internal ID
        "1": "1916",      // EDAM ID
        "2": "Alignment", // Label
        "3": [], // Syonyms
        "4": ["An alignment of molecular sequences..."], // Definitions
        "5": [1287],      // Relation IDs
        "subroot": [...]  // Information about the subroots (the first-level term IDs to which the selected terms belong),
        "uri": "http://edamontology.org/topic_0091" // EDAM URI
    }]
}
or by calling the getSelected() method:

edamSelect.getSelected();

Convenience Utils

The EdamSelect.getTermByUri(edamUri) static method returns the information about the term by EDAM URI of the format "http://edamontology.org/{ data | format | operation | topic }_{ id }":

[
    internalId,        // 0 : Integer
    EDAM ID,           // 1 : String
    Label,             // 2 : String
    Synonyms,          // 3 : Array[String]
    Definitions,       // 4 : Array[String]
    Relation IDs       // 5 : Array[Integer]
]
Deprecated

The EdamSelect.getTermById(type, internalId) static method returns the information about the term by internal ID:

[
    internalId,        // 0 : Integer
    EDAM ID,           // 1 : String
    Label,             // 2 : String
    Synonyms,          // 3 : Array[String]
    Definitions,       // 4 : Array[String]
    Relation IDs       // 5 : Array[Integer]
]