Welcome to the MIA's

MIA or marine info affordances is a plugable webwidget that will convert links into hoverable items that will give the end-user a wikipedia like experience powered by linked open data.

Getting Started

Installation

To install the MIA's, you can include the following script in the head of your HTML file:

                                        
<head>
<script 
        src="https://open-science.vliz.be/MIA/latest/mia.bundle.js" 
        id="mia_script"
        data-deref-config="https://open-science.vliz.be/MIA/deref_config.json"
        data-self-reference
></script>
</head>

This script is a plugin that includes additional parameters such as data-deref-config and data-self-reference. The data-deref-config parameter points to a configuration file, while the data-self-reference attribute is used to enable self-referencing capabilities within the script.

Usage

Once the MIA's script is included in your HTML file, you can start using the plugin to enhance your content. The MIA's will automatically convert links to hoverable items that provide additional information when clicked. The plugin is designed to work seamlessly with linked open data sources, offering a rich browsing experience for users.

Demo

URL

deref-config.json

The deref-config.json file is a configuration file that specifies the dereferencing settings for the MIA's.

An example of a deref-config.json file is shown below:


[
{
        "RDF_TYPE": "http://marineregions.org/ns/ontology#MRGeoObject",
        "PREFIXES": [
                {
                "prefix": "mr",
                "uri": "http://marineregions.org/ns/ontology#"
                },
                {
                "prefix": "skos",
                "uri": "http://www.w3.org/2004/02/skos/core#"
                },
                {
                "prefix": "dcterms",
                "uri": "http://purl.org/dc/terms/"
                },
                {
                "prefix": "gsp",
                "uri": "http://www.opengis.net/ont/geosparql#"
                }
        ],
        "ASSERTION_PATHS": [
                "mr:hasGeometry/gsp:asWKT",
                "",
                "skos:prefLabel"
        ],
        "TEMPLATE": "map",
        "MAPPING": {
                "name": {
                "query": "skos:prefLabel",
                "type": "single"
                },
                "mapwkt": {
                "query": "mr:hasGeometry/gsp:asWKT",
                "type": "single"
                },
                "centroid": {
                "query": "",
                "type": "single"
                },
                "type_place": {
                "query": "rdf:type",
                "type": "list"
                }
        }
        },
        {
        "RDF_TYPE": "https://schema.org/Person",
        "PREFIXES": [
                {
                "prefix": "schema",
                "uri": "https://schema.org/"
                },
                {
                "prefix": "org",
                "uri": "http://www.w3.org/ns/org#"
                },
                {
                "prefix": "skos",
                "uri": "http://www.w3.org/2004/02/skos/core#"
                }
        ],
        "ASSERTION_PATHS": [
                "schema:givenName",
                "schema:familyName",
                "schema:image",
                "schema:identifier",
                "org:hasMembership/org:organization/schema:name",
                "org:hasMembership/org:role/skos:prefLabel"
        ],
        "TEMPLATE": "person",
        "MAPPING": {
                "name": {
                "query": "schema:givenName",
                "type": "single"
                },
                "family": {
                "query": "schema:familyName",
                "type": "single"
                },
                "image": {
                "query": "schema:image",
                "type": "single"
                },
                "orcid": {
                "query": "schema:identifier",
                "type": "single"
                },
                "organization": {
                "query": "org:hasMembership/org:organization ?a. \n ?a a org:Organization .\n ?a schema:name",
                "type": "single"
                },
                "job_position": {
                "query": "org:hasMembership/org:role/skos:prefLabel",
                "type": "single"
                }
        }
        }
]

In the example above, the deref-config.json file contains two dereferencing configurations for different RDF types: http://marineregions.org/ns/ontology#MRGeoObject and https://schema.org/Person. Each configuration specifies the RDF type, prefixes, assertion paths, template, and mapping for the dereferencing process. The TEMPLATE field indicates the template to be used for rendering the dereferenced data, while the MAPPING field defines the mapping of data properties to the template. Each MAPPING object contains a query and type field, which specify the SPARQL query and data type for the property, respectively. The types can be either single or list, depending on the data structure.

Different templates yield different visual representations of the dereferenced data. The map template, for example, displays geographic data in a map format, while the person template shows information about a person. A list of available templates can be found in the table below:

Template	Description	Examples
map	Displays geographic data in a map format	No loading geom point Also grey Also grey
person	Shows information about a person	Linked data man Jan Mees L.T Rando person with weird format picture
organization	Displays details about an organization	institute vliz
publication	Shows information about a publication	publication with authors publication some multimedia
event	Displays details about an event	event event
project	Shows information about a project	project other project
collection	Displays details about a collection	collection eurobis collection
dataset	Shows information about a dataset	dataset with urls dataset
taxonomy	Shows information about a taxonomy	tasty fish other organism

MIA Properties

The MIA's plugin provides a set of properties that can be used to customize the behavior and appearance of the plugin. These properties can be set in the <script> tag that includes the MIA's script. The available properties are listed below:

These properties affect 4 aspects of the MIA's

Option	Description/effect
card	When set to true, the MIA's will display the hoverable items in a card format. The card format includes a title, image, and description for each item. When set to false, the MIA's will display the hoverable items in a simple format without a card.
decorator	When set to true, the MIA's will display a decorator icon next to the hoverable items. The decorator icon indicates that the item is clickable and provides additional information. When set to false, the MIA's will not display a decorator icon.
update	When set to true, the MIA's will automatically update the hoverable items when the content of the page changes. This ensures that the hoverable items remain up-to-date with the latest content. When set to false, the MIA's will not automatically update the hoverable items.
ellipse	When set to true, the MIA's will display the hoverable items in an ellipse format. The ellipse format includes a title, image, and description for each item. When set to false, the MIA's will display the hoverable items in a simple format without an ellipse.

All options with example html and example appearance can be found in the table below

Option	Description	functions enabled	Example HTML	Example MIA
change	Enables change detection for hoverable items	card: `true` decorator: `true` update: `true` ellipse: `true`	`<head> <script src="https://open-science.vliz.be/MIA/latest/mia.bundle.js" id="mia_script" data-deref-config="https://open-science.vliz.be/MIA/deref_config.json" data-extra-properties="change" data-self-reference ></script> </head>`	Hoverable items will update on change
nochange	Disables change detection for hoverable items	card: `false` decorator: `false` update: `false` ellipse: `false`	`<script src="https://open-science.vliz.be/MIA/latest/mia.bundle.js" id="mia_script" data-deref-config="https://open-science.vliz.be/MIA/deref_config.json" data-extra-properties="nochange" data-self-reference ></script>`	No update to link and also no card
update	Automatically updates hoverable items when page content changes	update: `true`	`<script src="https://open-science.vliz.be/MIA/latest/mia.bundle.js" id="mia_script" data-deref-config="https://open-science.vliz.be/MIA/deref_config.json" data-extra-properties="update" data-self-reference ></script>`	Hoverable items will automatically update
noupdate	Disables automatic updates for hoverable items	update: `false`	`<script src="https://open-science.vliz.be/MIA/latest/mia.bundle.js" id="mia_script" data-deref-config="https://open-science.vliz.be/MIA/deref_config.json" data-extra-properties="noupdate" data-self-reference ></script>`	Hoverable items will not automatically update
no-decorator	Disables decorator icon for hoverable items	decorator: `false` update: `false`	`<script src="https://open-science.vliz.be/MIA/latest/mia.bundle.js" id="mia_script" data-deref-config="https://open-science.vliz.be/MIA/deref_config.json" data-extra-properties="no-decorator" data-self-reference ></script>`	No decorator icon will be displayed
decorator	Enables decorator icon for hoverable items	decorator: `true`	`<script src="https://open-science.vliz.be/MIA/latest/mia.bundle.js" id="mia_script" data-deref-config="https://open-science.vliz.be/MIA/deref_config.json" data-extra-properties="decorator" data-self-reference ></script>`	Decorator icon will be displayed
ellipse	Displays hoverable items in an ellipse format	ellipse: `true`	`<script src="https://open-science.vliz.be/MIA/latest/mia.bundle.js" id="mia_script" data-deref-config="https://open-science.vliz.be/MIA/deref_config.json" data-extra-properties="ellipse" data-self-reference ></script>`	Hoverable items will be displayed in an ellipse format
no-ellipse	Disables ellipse format for hoverable items	ellipse: `false`	`<script src="https://open-science.vliz.be/MIA/latest/mia.bundle.js" id="mia_script" data-deref-config="https://open-science.vliz.be/MIA/deref_config.json" data-extra-properties="no-ellipse" data-self-reference ></script>`	mpo

Known Issues

These are the links that have issues related to them