ODIN component

The ODIN library uses Cubbles as base technology. Therefore, every ODIN component is a Cubbles component. ODIN components are designed to be used for ETL processes with data visualisation in mind. One key difference between a Cubble and an ODIN component is the specialisation on handling various forms of data. Processing data can be generalised, but to support a wide variety of use cases one needs to balance between simplicity and complexity. Thats the goal of this library and its components and utilities. The library itself introduces three component types: Connectors, Transformers and Views. Each component type has a number of restrictions and requirements that implementations must fulfill. This way, its easy to connect ODIN components together to archive what one wants to: processing data to get meaningful information and present them in a modern fashion.

Connectors

A connector is a component which provides data from a specific source. The source should be stable. Requests should be performed asynchronously and via a secured protocol like HTTPS. The internal request process must start when an input slot changes, but exceptions may be stated for first-time changes.

Input slots

Output slots

Process synchronization

List of components

dbpedialite-connector

A connector which requests simple data from DBpedia (http://www.dbpedialite.org/) in different output formats. The requested data must be specified by unique wikipedia page ids. The internal request process starts when an input slot changes, but all other input slots must be set with a valid value first. After the value is set, each change will trigger the process with the current changed value of an input slot and with all previously setted values of the other input slots.

Please note: This connector queries all data via a non-secured protocol (http).

Usage example

Methods

Process synchronization

Input slots

Output slots

Transformers

A transformer is a component which handles data and transforms them. That may include transformations like mapping, filtering, adding, splitting or even validating of data. The internal process must start when an input slot changes, but exceptions may be stated for first-time changes.

Input slots

Output slots

Process synchronization

List of components

array-element-mapper

A transformer which maps an array of data to a normalized data structure (all data structures). The internal process starts when an input slot changes, but all other input slots must be set with a valid value first. After the value is set, each change will trigger the process with the current changed value of an input slot and with all previously setted values of the other input slots.

Usage example

Methods

Process synchronization

Input slots

Output slots

Slot options

xml-to-json-converter

This component converts XML (as string) to JSON. Uses Fast XML Parser for the conversion. The internal process starts when an input slot changes, but all other input slots must be set with a valid value first. After the value is set, each change will trigger the process with the current changed value of an input slot and with all previously setted values of the other input slots.

Usage example

Methods

Process synchronization

Input slots

Output slots

Slot options

json-to-xml-converter

This component converts JSON object to a XML string. Uses Fast XML Parser for the conversion. The internal process starts when an input slot changes, but all other input slots must be set with a valid value first. After the value is set, each change will trigger the process with the current changed value of an input slot and with all previously setted values of the other input slots.

Usage example

Methods

Process synchronization

Input slots

Output slots

Slot options

nds-inverter

A transformer which maps an array of data to a normalized data structure (all data structures). The internal process starts when an input slot changes, but all other input slots must be set with a valid value first. After the value is set, each change will trigger the process with the current changed value of an input slot and with all previously set values of the other input slots. A demo example:

[ //    "a",       "b",       "c",       "d" <-- keys (columns)
    { "a": 1234, "b": 5432, "c":  235, "d": 6547 }, // 0 <-- indices (rows)
    { "a": 9876, "b": 5498, "c": 1234, "d": 6547 }, // 1
    { "a":  754, "b":  234, "c": 5498, "d": 1234 }  // 2
]

{
  "elementsAreObjects": true,
  "dataContainsTuples": true
}

[  //      0,         1,         2 <-- former indicies (columns)
     { "0": 1234, "1": 9876, "2":  754 }, // "a" <-- former keys (rows)
     { "0": 5432, "1": 5498, "2":  234 }, // "b"
     { "0":  235, "1": 1234, "2": 5498 }, // "c"
     { "0": 6547, "1": 6547, "2": 1234 }  // "d"
]

{ //        0,    1,    2 <-- indicies (columns)
    "a": [ 1234, 9876,  754 ], // "a" <-- keys (rows)
    "b": [ 5432, 5498,  234 ], // "b"
    "c": [  235, 1234, 5498 ], // "c"
    "d": [ 6547, 6547, 1234 ]  // "d"
}

{
  "elementsAreObjects": true,
  "dataContainsTuples": false
}

{  //      "a",  "b",  "c",  "d" <-- former keys (columns)
    "0": [ 1234, 5432,  235, 6547 ], // 0 <-- former indicies (rows)
    "1": [ 9876, 5498, 1234, 6547 ], // 1
    "2": [  754,  234, 5498, 1234 ]  // 2
}

[ //   0,    1,    2,    3 <-- inner array indices (columns)
    [ 1234, 5432,  235, 6547 ], // 0 <-- outer array indicies (rows)
    [ 9876, 5498, 1234, 6547 ], // 1
    [  754,  234, 5498, 1234 ]  // 2
]

{
  "elementsAreObjects": false,
  "dataContainsTuples": true
}

[  //   0,    1,    2 <-- former outer array indices (columns)
    [ 1234, 9876,  754 ], // 0 <-- former inner array indices (rows)
    [ 5432, 5498,  234 ], // 1
    [  235, 1234, 5498 ], // 2
    [ 6547, 6547, 1234 ]  // 3
]

[ //   0,    1,    2 <-- inner array indices (columns)
    [ 1234, 9876,  754 ], // 0 <-- outer array indices (rows)
    [ 5432, 5498,  234 ], // 1
    [  235, 1234, 5498 ], // 2
    [ 6547, 6547, 1234 ]  // 3
]

{
  "elementsAreObjects": false,
  "dataContainsTuples": false
}

[  //   0,    1,    2,    3 <-- former outer array indices (columns)
    [ 1234, 5432,  235, 6547 ], // 0 <-- former inner array indices (rows)
    [ 9876, 5498, 1234, 6547 ], // 1
    [  754,  234, 5498, 1234 ]  // 2
]

Usage example

Methods

Process synchronization

Input slots

Output slots

Slot options

Views

A view is a component which displays data in a meaningful way. That may include tables, chart, geographical maps or even just text. Views tend to be complex, therefore they should feature a configuration to reflect it, offering users choices to visualise the data in many ways. Views usually do not define any styling (css) themselves. Instead they feature configuration options to let the user place css classes for styling. The internal request process must start when an input slot changes, but exceptions may be stated for first-time changes.

Input slots

Output slots

Process synchronization

List of components

plaintext-view

A view which displays any given data in a <pre> element as it is (excluding HTML entities). The internal process starts when an input slot changes, but all other input slots must be set with a valid value first. After the value is set, each change will trigger the process with the current changed value of an input slot and with all previously setted values of the other input slots.

Usage example

Methods

Process synchronization

Input slots

Output slots

Slot options

table-view

A view which displays the given data as a table. The internal process starts when an input slot changes, but all other input slots must be set with a valid value first. After the value is set, each change will trigger the process with the current changed value of an input slot and with all previously setted values of the other input slots.

Usage example

Methods

Process synchronization

Input slots

Output slots

Slot options

chart-view

A view which displays the given data in a chart. Uses c3.js and d3 (as dependency). It supports various chart types including bar, line, area, donut and others. The internal process starts when an input slot changes, but all other input slots must be set with a valid value first. After the value is set, each change will trigger the process with the current changed value of an input slot and with all previously setted values of the other input slots.

Usage example

Methods

Process synchronization

Input slots

Output slots

Slot options

maplayer-view

A view which displays geographical maps and associated data. Uses leaflet and various leaflet plugins. It supports different map tile providers by name (see Leaflet-providers) or url, GeoJSON, markers, popups etc. The internal process starts when an input slot changes, but all other input slots must be set with a valid value first. After the value is set, each change will trigger the process with the current changed value of an input slot and with all previously setted values of the other input slots.

Usage example

Methods

Process synchronization

Input slots

Output slots

Slot options

{
    height: 300,
    width: '100%'
}

{
    lat: 15.1, lng: 103.54
}

[{
    lat: 15.1, lng: 103.54
}, {
    lat: 20.8, lng: 105.3
}]

{
    x: 10, y: 20
}

"content": "Just a plain simple string to display."

"content": {
    "dataPath": "/plaintextData",
    "component": {
        "view": "plaintext",
        "config": {...}
    }
}

"content": {
    "dataPath": "/tableData",
    "component": {
        "view": "table",
        "config": {...}
    }
}

"content": {
    "dataPath": "/chartData",
    "component": {
        "view": "chart",
        "config": {...}
    }
}

Utilities

All ODIN utilities contain basic features which provide helpful assistance for common tasks in dealing with features of the ODIN library, either as component author or user of the ODIN components in context of JavaScript code or templates.

Normalized data structures

Most data structures are special in terms of their structure. The ODIN library tries to leverage this by providing a normalized definition of data structures that most ODIN components support and some components produce for compatibility reasons.

The table below illustrates four supported data structures. Each structure is a combination of container-like data types (object or array) and concepts (data tuples or data series). Cell values can be of any type that suits a component needs.

[
    { "first": 1, "second": 4, "third": 7, "fourth": 10 },
    { "first": 2, "second": 5, "third": 8, "fourth": 11 },
    { "first": 3, "second": 6, "third": 9, "fourth": 12 }
]

[
    [ 1, 4, 7, 10 ],
    [ 2, 5, 8, 11 ],
    [ 3, 6, 9, 12 ]
]

{
    "first":   [  1,  2,  3 ],
    "second":  [  4,  5,  6 ],
    "third":   [  7,  8,  9 ],
    "fourth":  [ 10, 11, 12 ]
}

[
    [  1,  2,  3 ],
    [  4,  5,  6 ],
    [  7,  8,  9 ],
    [ 10, 11, 12 ]
]

Components that consumes normalized data structures must state which ones they are able to use and if more than one, then they must use configuration options (booleans) to differentiate the data structures:

• elementsAreObjects to distinguish between container-like data types (true for objects otherwise false for arrays) and
• dataContainsTuples to distinguish between concepts (true for data tuples otherwise false for data series).

Components that produces normalized data structures must state which ones they are able to create and if more than one, then they must use configuration options (booleans) to differentiate the data structures:

• mapToObjects to distinguish between container-like data types (true for objects otherwise false for arrays) and
• mapToTuples to distinguish between concepts (true for data tuples otherwise false for data series).

odin

A global object, that contains all ODIN library utilities.

Functions

var mySrcObj = { first: 'foo', second: null };
var copy = odin.copyObject(mySrcObj, function (key, value, src) {
    // omit 'empty' properties
    return value !== undefined && value !== null;
}, function (key, value, src) {
    // add something to every string
    return odin.check.isString(value) ? value + 'bar' : value;
});
console.log(copy); // prints: { first: 'foobar' }

var obj = { first: 'foo', second: null };
var array = odin.objectToArray(obj, function (key, value, src) {
    // 'first' should be at position 0, 'second' should be at position 2
    return key === 'first' ? 0 : (key === 'second' ? 2 : undefined);
});
console.log(array); // prints: [ 'foo', undefined, null ]

var array = [ 'foo', undefined, null ];
var obj = odin.objectToArray(array, function (elem, idx, src) {
    // position 0 should be 'first', position 2 should be 'second'
    return idx === 0 ? 'first' ? (idx === 2 ? 'second' : undefined);
});
console.log(obj); // prints: { first: 'foo', second: null }

var first = [ 'foo', 1 ];
var second = [ 'foo', 2 ];
var merged = odin.mergeArrays(first, second);
console.log(merged); // prints: [ 'foo', 1, 2 ]

var first = { foo: 'bar', bar: 2 };
var second = { foo: 'foo', foo: 1 };
var merged = odin.mergeObjects(first, second);
console.log(merged); // prints: { foo: 'bar', foo: 1, bar: 2 }

odin.check

A global object, that contains useful functions for type checking.

Functions

odin.parse

A global object, that contains useful functions for type parsing.

Functions

odin.path

A global object, that contains functions and properties for handling the ODIN path notation (Path tokens and Path object).

Functions

Properties

odin.validate

A global object, that contains useful functions and properties for validation tasks.

TODO in den components erwähnen dass json schema usw. genutzt wird

Functions

var data = [ 'not a valid "Array with object tuples" data structure' ];
var schema = odin.validate.schema.dataObjectTuples;
var errors = odin.validate.withSchema(schema, data);
if (errors) {
    console.error(errors);
    return;
}

odin.validate.schema

A property of odin.validate, which contains common Json Schemata. All schemata are based on Draft-06.

Properties

odin.validate.schemaPart

A property of odin.validate, which contains common Json Schemata Parts. Parts are validation rule definitions that can be used in a JavaScript context to replace common rules in a schema (meaning: less code).

Properties

Misc

This section features all common objects that are used throughout the ODIN library.

Error object

The definition of an error object generated by odin.createErrorObj.

Properties

Path tokens

TODO

Odin Path w/o parsing

Odin Path w/ parsing

Path object

TODO

View update object

The definition of an view update object generated by odin.triggerOnViewUpdate. This object should only be used, if a view component wants to signal an update.

Properties