mgexplorer

v1.0.18

Published

2 months ago

Multidimensional Graph Explorer

Downloads

0High
0Medium
0Low

alinemenin

MGExplorer (Multidimensional Graph Explorer)

MGExplorer is a visualization tool that facilitates the incremental exploration of large, multidimensional datasets using a series of linked views. It offers multiple perspectives through various complementary techniques and tracks provenance information, enabling users to retrace their analytical steps and explore different paths while retaining access to previous analyses.

Availability

npm package

MGExplorer is available on npm. For more information, visit the npm package page here.

Online demo

An online demo is available here

License

Our project is available under the Apache 2.0 license. See the LICENSE file.

Developed Dependencies

| Name | Version | | -------- | --------- | | @stencil/store| 1.4.1| | @types/jest| 26.0.21| | jest| 26.6.3| | jest-cli| 26.6.3| | rollup-plugin-node-polyfills| 0.2.1|

Dependencies and libraries

| Name | Version | | -------- | --------- | | @stencil/core| 2.5.2| | autocompleter| 6.1.0| | circular-json| 0.5.9| | cookie-parser| 1.4.6| | cors| 2.8.5| | cvtojson| 2.0.10| | d3| 6.0.0| | d3-collection| 1.0.7| | d3-scale-chromatic| 3.0.0| | d3-simple-slider| 1.10.4| | detect-csv| 1.1.0| | ejs| 3.1.6| | express| 4.17.1| | file-saver| 2.0.5| | html-to-image| 1.7.0| | is-html| 2.0.0| | model-js| 0.2.5| | morgan| 1.10.0| | stream| 0.0.2| | sweetalert2| 11.0.18|

Usage

You can configure the dashboard in a way that better reflects your needs. For that, select the mge-component element and use the provided methods according to your goal, as described hereafter.

  const node = document.querySelector('mge-dashboard')

From a SPARQL query

To use MGExplorer to visualize the results of a SPARQL query, you can directly provide the query to the component as follows:

  let data = {
      query: '<sparql query>',
      endpoint: '<sparql endpoint>',
      stylesheet: '<sparql stylesheet>'
  }
  
  await node.setDataByQuery(data)
  node.disableInitialQueryPanel()

The query and stylesheet objects should follow the templates provided in SPARQL query template and Stylesheet.

From a list of SPARQL queries

You can provide a list of SPARQL queries to the dashboard, which the user can explore dynamically. For that, you must provide a list of SPARQL query objects, as follows:

  node.setQueries(queries)

Each query object in the array should follow the template presented in SPARQL Query Object.

If the provided query objects contain an id key, you can choose to use a cache. For that, you should set up a server that contains API routes for managing the cache, with actions such as delete, write, and get.

Enable the cache mechanism using the following method:

  node.cache(true)

From a dataset

Alternatively, you can provide a dataset containing the results (bindings) of a SPARQL query or a similarly formated datafile, as follows:

  node.setData(data, stylesheet)

The stylesheet is not mandatory. The data should follow the template presented in Input Dataset.

From a list of datasets

Similarly to using a list of SPARQL queries, you can provide a list of datasets. Each element in the list represents the path to a file containing the data you want to load into the system.

Obs.: To use this feature, you must set up a server of your own and provide the API routes necessary to retrieve the files.

  node.setFilenames(filenames)

API Routes

MGExplorer is equipped to handle specific API routes, such as managing cached files and retrieving local data files. You can set up these routes using the setAPIRoutes(data) method as follows:

  node.setAPIRoutes(data)

The method accepts a JSON object with the following structure:

{ 
  cache: { ... },
  sparql: { ... }, 
  dataset: { ... } 
}

Provide the data for the routes you wish to use, as described below.

Cache

The JSON object specifying the API routes for managing cached files must include the following three keys:

{ cache: { 
      delete: { 
        route: "<your-route>", 
        method: 'POST',  
        headers: {'Content-Type': 'application/json'}
      },
      write: { 
        route: "<your-route>", 
        method: 'POST',  
        headers: {'Content-Type': 'application/json'}
      },
      get: { 
        route: "<your-route>", 
        method: 'POST',  
        headers: {'Content-Type': 'application/json'}
        }, 
      },
      sparql: { ... } // optional,
      dataset: { ... } // optional
}

SPARQL Request

By default, MGExplorer retrieves data from the provided SPARQL endpoint on the client side using the fetch API. To handle SPARQL requests through a custom route in your application’s API, specify the API route as follows:

{ 
  sparql: { 
        route: "<your-route>", 
        method: 'POST',  
        headers: {'Content-Type': 'application/json'}
      },
  cache: { ... } // optional,
  dataset: { ... } // optional
}

Datafile Retrieval

The JSON object specifying the route for retrieving data files should be structured as follows:

{ 
  dataset: { 
      route: `<your-route>`, 
      method: 'GET' 
    },
  cache: { ... } // optional,
  sparql: { ... } // optional 
}

Disable Views

MGExplorer includes six visualization techniques for exploring input data, as well as a mge-annotation component for adding annotations to the exploration path. By default, all components are enabled. To disable any of them, use the disableView method as follows:

  node.disableView('<component-name>')

Data Model

SPARQL Query Template

MGExplorer uses a SELECT query to retrieve data from a given SPARQL endpoint. The resulting data should form a network, which you can defined through certain variables, described below.

?s and ?o define the nodes in the network. They can be any value from the knowlegde graph (KG), such as resource or a property.
?p defines the link between the values in ?s and ?o, which can contain any information from the KG, such as a resource or a property.
?label gives a name to the link, such as through skos:prefLabel or rdfs:label properties.
?type serves to classify the links according to a particular categorical information. It is analogous to rdfs:type property, but it can take any form. For instance, in a network where animals are linked together through their common habitat, the ?type variable can contain information about the habitat type (forest, savana, etc).
Obs.: This variable can take up to 4 values. If more values are provided, the system automatically chooses the 3 most frequent ones, and aggregate the remaining into a variable called Other.
?date serves to represent the distribution of links over time. This variable is used by the mge-barchart component. Obs.: Although this variable was intended to be used to represent temporal data, it can take any categorical value instead.
?url represents a link to ?p. It can be a resource URI or a custom webpage, where the user can further explore the data represented by this variable.

Variables connecting the query to the stylesheet.

?style1 serves to style nodes corresponding to ?s values. This variable can have as value a key in the stylesheet, which can contain a color and a custom label to support legend creation.
?style2 serves to style nodes corresponding to ?o values. This variable can have as value a key in the stylesheet, which can contain a color and a custom label to support legend creation.

Example of usage

SELECT ?s ?p ?o ?label ?type ?date ?url where {
  # Find in the graph the data that meet your criteria

  bind ("fst" as style1)
  bind ("snd" as style2)
}

Stylesheet

Below you find the default stylesheet, you can change it according to your needs.

    {"appli": {
        "name": "<your-app-name>",
        "debug": true
    },
    "node": {
        "default": {
            "color": "steelblue"
        },
        "mix": {
            "color": "yellow"
        },
        "member": {
            "color": "purple"
        },
        "other": {
            "color": "green"
        },
        "fst": {
            "color": "lightgreen",
            "priority": 1,
            "label": "Node1"
        },
        "snd": {
            "color": "orange",
            "priority": 2,
            "label": "Node2"
        },
        "rst": {
            "color": "purple",
            "priority": 3
        }
    },
    "edge": {
        "color": "green"
    },
    "services": [
        {
            "label": "<your-service-name>",
            "url": "<<your-service-url>?<your-query-param>=>"
        }
    ]
}

Further to coloring the nodes, you can define external services where the user can further explore the data from the nodes. For instance, if your ?s and ?o represent a scientific publication and you have a custom webpage that provide more information about it, just give the service name and URL as shown in the services key.

Input dataset

The input dataset is a JSON array containing the objects resulting from the SPARQL query. Typically it look like this:

[
    {
        "s": {
            "type": "literal",
            "xml:lang": "en",
            "value": "Robert Shaw (actor)"
        },
        "p": {
            "type": "uri",
            "value": "http://dbpedia.org/resource/The_Sting"
        },
        "o": {
            "type": "literal",
            "xml:lang": "en",
            "value": "Robert Redford"
        },
        "label": {
            "type": "literal",
            "xml:lang": "en",
            "value": "The Sting"
        },
        "date": {
            "type": "typed-literal",
            "datatype": "http://www.w3.org/2001/XMLSchema#integer",
            "value": "1973"
        },
        "type": {
            "type": "uri",
            "value": "http://dbpedia.org/resource/Ragtime"
        },
        "url": {
            "type": "uri",
            "value": "http://dbpedia.org/resource/The_Sting"
        }
    }, 
    ...
]

You can create your own data without using SPARQL queries, as long as the input dataset contains the structure above. Each variable object should contain at least the value key.

SPARQL Query Object

When providing a list of SPARQL query objects, each object should contain the following information:

[
    {
        "id": "<unique-id-for-cache>",
        "query": "<your query>",
        "endpoint": "<endpoint>",
        "stylesheet": "<stylesheet>"
    },
    ...
]

Obs.: This queries can be generated using the LDViz tool.

MGExplorer Components

Table of contents

Components
1.1. mge-dashboard
1.2. mge-query
1.3. mge-view
1.4. mge-panel
1.5. mge-history
Visualization techniques
2.1. mge-barchart
2.2. mge-clustervis
2.3. mge-glyph-matrix
2.4. mge-iris
2.5. mge-listing
2.6. mge-nodelink

As shown in the figure below, MGExplorer includes 6 main elements. These elements are composed by Web components, as described in the following.

MGExplorer application overview system

Dashboard component (mge-dashboard): This is where visual chart views (mge-view) are stored and managed. It manages the user actions that interact between the charts (ex. close views, show views, move the hidden connection...). And of course, the data will be stored and managed in this component. It is the intermediary that distributes the link between the windows and the connection that is hidden behind each window. In addition, the Dashboard is also a place to store the history of the user's data discovery process to update the history window (mge-history). Dashboard includes:
- A list of views (mge-view)
- 1 initial query window (mge-query, Data import)
- 1 history tree panel (mge-history)
View component (mge-view): This component represents a view window to show particular visualization technique (visTechniques). This component allows the user to move the view window, resize the view window, and create a new view from itself based on the user's mouse actions during the data discovery process. The position of the mge-view is inside the mge-dashboard and is managed by the dashboard. A view includes:
- A header with title of the view
- A content area contains the visualization chart
- A Settings panel (mge-panel) (this component is optional that depends on the type of the visualization technique)
Settings panel component (mge-panel): This component represents a panel allow users to adjust the parameter in particular visualization technique. The panel will select a pre-built template and render it as html inside the component based on the name of the visualization technique. With the panel, the user will change some properties of the visualization technique through the input data from the slider, input tag... The chart will update after the properties are changed. The location of the panel (mge-panel) is inside a view (mge-view)
Query Component (mge-query): This component helps the user through selecting the initial pre-defined query to invoke the query and visualize it through specific visualization techniques. The position of the mge-query will be inside the mge-view for the purpose of reusing the common functions of manipulating the window (moving, opening, closing, resizing, connecting to other windows via links and connections). There are 2 main inputs that need to be selected by the user: 1 endpoint and 1 query in the predefined query list of the selected endpoint. Depending on the intended use, it includes three types:
- initial query: data import and will be used at the time of creating a dashboard)
- follow-up query: Used to dynamically import data into the exploration process by running another pre-defined query on the current or a different SPARQL endpoint.
- clone query: A copy of a follow-up query that intends to ease the exploration by reusing the input values and settings of the query. The latter can be freely modified by the user.
Visualization techniques (visTechniques): They represent visualization methods with different types of graphs to help users better understand the relationships in the data set they are interested in and exploring. Currently MGExplorer has 6 defined visualization techniques and each visualization technique will have its own properties and methods. List of defined visualization techniques:
- History bar chart (mge-barchart)
- Clustervis chart (mge-clustervis)
- Glyph matrix chart (mge-glyph-matrix)
- Iris chart (mge-iris)
- List of papers(mge-listing)
- Node-edges chart (mge-nodelink)

1. Components

To make it easy for the reader to understand the documentation of components inside the MGExplorer application, we need a clear presentation structure. Therefore, the following is a summary of the structure that presents the components built in the project:

General: A short introduction to the component so that users understand its role, function, and working and connecting principle.
Properties: A list of properties inside each implemented component class
- Property column: The name of the property inside the component's class.
- Attribute column: The name of the attribute of the custom component html tag after being rendered from the component class
- Description column: The short description of the property in component class
- Type column: The type of the property in component class
- Default column: The default value of the property in component class
Methods: A list of methods defined inside each component class. It will include both public methods and private methods
- Public methods: The @Method() decorator is used to expose methods on the public API. Functions decorated with the @Method() decorator can be called directly from the element, ie. they are intended to be callable from the outside! Stencil's architecture is async at all levels which allows for many performance benefits and ease of use. By ensuring publicly exposed methods using the @Method decorator return a promise
  Example:
```
    import { Method } from '@stencil/core';

    export class TodoList {

      @Method()
      async showPrompt() {
        // show a prompt
      }
    }
```
- Private methods: With private methods, It can not be callable from the outside of component class. Non-public methods can still be used to organize the business logic of your component and they do NOT have to return a Promise.
  Example:
```
class Component {
  // Since `getData` is not a public method exposed with @Method
  // it does not need to be async
  getData() {
    return this.someData;
  }
  render() {
    return (
      <div>{this.getData()}</div>
    );
  }
}
```
Data model: This section is used to describe the data structure used for each visualization techniques. For each type of visualization technique, it will receive a different data format. Therefore, this section will help users better understand the data model being used.

1.1. Dashboard component (mge-dashboard)

General

Dashboard position

Dashboard stores and manages multiple views during the user exploratory proces. Historical data of the discovery process will be saved in this component. In addition, showing the relationship between the views together as well as the display/hide operations on the views will be performed on the dashboard component.

To create a dashboard element

<mge-dashboard init-component="mge-query" x="20" y="20" class="hydrated">
</mge-dashboard>

Properties

| Property | Attribute | Description | Type | Default | | ---------------- | ----------------- | ----------------------------------------------------------------------------- | -------- | ----------- | | _dashboardArea | _dashboard-area | Area of dashboard for interacting | any | d3-selection | | _dragConect | _drag-conect | Drag connection of views | any | undefined | | _historyChart | _history-chart | Stores the graph that contains history | any | <mge-view>(<mge-history>) | | _initView | _init-view | First view of the dashboard. It depends on the value of initComponent to define what visualization technique or initial query is the first view to be initialized with | any | <mge-view> | | _treeCharts | _tree-charts | Stores the tree of connections between views | any | {} | | datasetName | dataset-name | The dataset name being used | string | undefined | | initComponent | init-component | Type of the visualization techniques which is displayed in the beginning with history panel (it can be mge-query for initial query) | string | mge-query | | x | x | x-coordinate (The horizontal value in a pair of coordinates) of the dashboard | number | 0 | | y | y | y-coordinate (The vertical value in a pair of coordinates) of the dashboard | number | 0 |

Methods

Public Methods

async _addLink(viewParent: any, viewChild: any) => Promise<{ line: any; conect: any; visible: boolean; }>
Description
This method adds a link between the parent and child components. Representing the dependency relationship between those views. Connection is a small square hidden behind each view. It is the start or end point of a link between two views. Connecting can also help re-open a hidden view by clicking on itself.
Returns
Type: Promise<{ line: any; conect: any; visible: boolean; }>
addChart(idParent: any, objChart: any) => Promise<void>
Description
This method adds a new view to the dashboard and update the tree history with information regarding the new view.
Returns
Type: Promise<void>
closeView(view: any) => Promise<void>
Description
This method hides the given view from the dashboard (CSS - display:none) and update the status of this view in the history panel (mge-history).
Returns
Type: Promise<void>
showView(view: any) => Promise<void>
Description
This function allow to display the target view with CSS - display: block and update the status of this view in the history panel (mge-history). This function is used when click the connection in dashboard or in history panel with hidden view.
Returns
Type: Promise<void>
getChart(idChart: any) => Promise<any>
Description
The dashboard will store all views inside itself. For good management, it provides the getChart method with the purpose of getting the data of a particular view through the id of that view.
Returns
Type: Promise<any>
refreshSvg() => Promise<void>
Description
This function will update the scrolling size of the panel. When we move the view outside the original scope of the dashboard, this function will be called to update the new size based on the position of the moving view.
Returns
Type: Promise<void>
refreshLinks() => Promise<void>

**Description**

This function will refresh the status of the links and connection on the history component (`mge-history`). Updates of links and connections will be sent to the `mge-history` to display on the history window. This function goes after `refreshSvg()` function

**Returns**

Type: `Promise<void>`

**Description**

This function will refresh the size of the svg includes all of links and connection when we move views.

resetDashboard() => Promise<void>
Description
This function is to clear all of elements in dashboard.
Returns
Type: Promise<void>
setData(_: any) => Promise<void>
Description
This function allows to store new dataset which got from mge-query to a global variable. To manage all of datasets, we use @stencil/store library. It implements a simple key/value map that efficiently re-renders components when necessary. With @stencil/store, we can use saved data for all of defined components. (ref. https://stenciljs.com/docs/stencil-store#stencil-store)
Returns
Type: Promise<void>

setParams(globalParams: any, locals: any) => Promise<void>

Description

Get all of pre-defined query params from list pre-defined query to save in global variables. This params correspond to the parameters that go together with pre-defined queries.

Data schema for pre-defined query parameters:

{
  "type": "object",
  "required": [],
  "properties": {
    "laboratories": {
      "type": "array",
      "items": {
        "type": "object",
        "required": [],
        "properties": {
          "name": {
            "type": "string",
            "description": "Name of the laboratory"
          },
          "source": {
            "type": "string",
            "description": "Source name of the laboratory"

          }
        }
      }
    },
    "sparqlKeywords": {
      "type": "array",
      "items": {
        "type": "object",
        "required": [],
        "properties": {
          "name": {
            "type": "string",
            "description": "Text keywords of a deep knowledge of Wikidata’s identifiers for drug, cancer, the predicate treats, etc."
          },
          "value": {
            "type": "string",
            "description":"Code value of the keyword in Sparql"
          }
        }
      }
    },
    "countries": {
      "type": "array",
      "items": {
        "type": "object",
        "required": [],
        "properties": {
          "value": {
            "type": "string",
            "description":"Full name of the country"
          },
          "name": {
            "type": "string",
            "description":"Country code of a particular country"
          }
        }
      }
    },
    "query_types": {
      "type": "array",
      "items": {
        "type": "object",
        "required": [],
        "properties": {
          "name": {
            "type": "string",
            "description":"Name of pre-defined query type"
          },
          "value": {
            "type": "number",
            "description":"The order value of the type query"
          }
        }
      }
    },
    "endpoints": {
      "type": "array",
      "items": {
        "type": "object",
        "required": [],
        "properties": {
          "id": {
            "type": "string",
            "description": "Unique identifier of the endpoint"

          },
          "name": {
            "type": "string",
            "description": "Name of the endpoint"
          },
          "url": {
            "type": "string",
            "description": "URL link of the endpoint"
          }
        }
      }
    },
    "prefixes": {
      "type": "array",
      "items": {
        "type": "object",
        "required": [],
        "properties": {
          "id": {
            "type": "string",
            "description": "Unique identifier of the endpoint"
          },
          "name": {
            "type": "string",
            "description": "Name of the prefix"
          },
          "value": {
            "type": "string",
            "description": "Sparql prefix command"
          }
        }
      }
    }
  }
}

Returns

Type: Promise<void>

Private Methods

addDashboard(_svg) => <void>
Description
This function will init a history panel and first visualization technique component. The first visualization component is depended on your choice via attribute init-component .This function will be called after rendering all elements in <Host></Host> of render() function
Returns
Type: <void>

Data model

{
  "type": "object",
  "required": [],
  "properties": {
    "info": {
      "type": "object",
      "required": [],
      "properties": {
        "qtNodos": {
          "type": "number",
          "description": "Total number of nodes"
        },
        "qtArestas": {
          "type": "number",
          "description": "Number of links between nodes"
        }
      }
    },
    "nodes": {
      "type": "object",
      "required": [],
      "properties": {
        "labelTitle": {
          "type": "array",
          "items": {
            "type": "string",
            "description": "An element at position X will put a meaning on an element at
            the same position in dataNodes.labels explained below"
          }
        },
        "valueTitle": {
          "type": "array",
          "items": {
            "type": "string",
            "description": "An element at position X will put a meaning on an element at
            the same position in dataNodes.values explained below"
          }
        },
        "imageTitle": {
          "type": "string",
        "description": "."
        },
        "dataNodes": {
          "type": "array",
          "items": {
            "type": "object",
            "required": [],
            "properties": {
              "id": {
                "type": "string",
                "description": "Unique identifier of the node"
              },
              "idBD": {
                "type": "string",
                "description": "Unique identifier of the node (similar to id)"
              },
              "labels": {
                "type": "array",
                "items": {
                  "type": "string",
                  "description": "To know the meaning of an element at position x,
                  we must look at the value of the element at the same position in the labelTitle array explained above."
                }
              },
              "values": {
                "type": "array",
                "items": {
                  "type": "number",
                  "description": "To know the meaning of an element at position x,
                  you have to look at the value of the element at the same position in the valueTitle array explained above."
                }
              },
              "images": {
                "type": "string",
                "description": "."
              }
            }
          }
        }
      }
    },
    "edges": {
      "type": "object",
      "required": [],
      "properties": {
        "labelTitle": {
          "type": "string",
          "description": "An element at position X will put a meaning on an element at the same position in dataEdges.labels explained below"
        },
        "valueTitle": {
          "type": "array",
          "items": {
            "type": "string",
            "description": "An element at position X will put a meaning on an element at the same position in dataEdges.values explained below"
          }
        },
        "dataEdges": {
          "type": "array",
          "items": {
            "type": "object",
            "required": [],
            "properties": {
              "src": {
                "type": "string",
                "description": "Integer referring to a unique identifier of a node corresponding to the source of a link"
              },
              "tgt": {
                "type": "number",
                "description": "Integer referring to a unique identifier of a node corresponding to the destination of a link"
              },
              "labels": {
                "type": "string",
                "description": "To know the meaning of an element at position x,
                we must look at the value of the element at the same position in the labelTitle array explained above"
              },
              "values": {
                "type": "array",
                "items": {
                  "type": "number",
                  "description": "To know the meaning of an element at position x,
                  you have to look at the value of the element at the same position in the valueTitle array explained above"
                }
              },
              "documents": {
                "type": "array",
                "items": {
                  "type": "object",
                  "required": [],
                  "properties": {
                    "type": {
                      "type": "string",
                      "description": "Type of the published document"
                    },
                    "date": {
                      "type": "string",
                  "description": "Date the document was published"
                    },
                    "title": {
                      "type": "string",
                  "description": "Document title"
                    },
                    "authors": {
                      "type": "array",
                      "items": {
                        "type": "string",
                  "description": "An element refers to a unique identifier of a node"
                      }
                    },
                    "link": {
                      "type": "string",
                  "description": "Link to the online document."
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

1.2. mge-query

General

Follow-up query is a query created on-the-fly during the exploratory process to connect new datasets through visualization techniques. Follow-up queries are visual components connecting views. They feature an endpoint, predefined query, custom variables, the user choice for the outcome visualization technique. In MGExplorer, follow-up queries become part of the visual exploration process.

With mge-query, we have 3 types of this component:

First type is initial query: This type usually uses in the beginning when we create a dashboard with a initial component. This type doesn't need a visualization technique in display.

Second type is follow-up query:
Requirements for create a follow-up query:
- At least a visualization technique in display
- An input value selected from a visualization technique
- A predefined query (currently from LDViz)
This is an example to create a follow-up query element:
```
<mge-view x="20" y="20" dataset-name="data-0" type-vis="mge-query" 
title="Initial query" id-view="chart-0" class="DS-viewArea hydrated">
</mge-view>
```
Last type is cloned query: This type used to clone data of a submitted follow-up query. This component will copy all input data from previous follow-up query. The user can use again this data or change to the new query.

Properties

| Property | Attribute | Description | Type | Default | | -------------- | --------------- | ------------------------------------------------- | --------------------------------------------- | -------------------------------------- | | _dashboard | _dashboard | represents the current dashboard | <mge-dashboard> | undefined | | _view | _view | represents the view includes this follow-up query | any | undefined | | cloneStatus | clone-status | To store the status of clone follow-upquery element | { isClone: boolean; isFirstTime: boolean; } | {isClone: false, isFirstTime: false} | | data | data | represents the selected target data from previous visualization technique | any[] | [] | | form | form | represents the selection of the input form of a follow-up query component | any | d3-selection | | globalParams | global-params | Represents the panel associated with the graphic | any | null | | height | height | represents the height of the a Follow-up query component | number | 350 | | queriesList | queries-list | List of predifined queries | any | [] | | query | query | represents the current selected query | any | undefined | | width | width | represents the width of a Follow-up query component chart | number | 350 |

Methods

Public Methods

cloneQuery() => Promise<void>
Description
Clone function will be call to create a new clone component This function will be run after click clone button
Returns
Type: Promise<void>
setBox(box: any) => Promise<void>
Description
Set box size for the chart includes the content input is a object includes height and width
Returns
Type: Promise<void>
setClone() => Promise<void>
Description
Set type of follow-up query to clone follow-up query It will update value in cloneStatus of element
Returns
Type: Promise<void>
setCloneData(query: any) => Promise<void>
Description
With clone follow-up query, this function will be clone all of data from parent element variable isFirstTime of cloneStatus of this element will be changed to false after cloning data
Returns
Type: Promise<void>
setData(_: any, oldData: any) => Promise<any[]>
Description
This function is to set the data to the selected data from parent If no arguments, It will return the value of data
Returns
Type: Promise<any[]>
setInitial() => Promise<void>
Description
With initial query, this function will be set variable isInitial to true This way will help to distinguish the initial point or a follow-up query
Returns
Type: Promise<void>

Private Methods

Initial functions
- initEndpointsList() => <void>
  Description
  Import list input of endpoint field by Endpoints data from defined input params. This function will be called when create mge-query component and it is only called once
  Returns
  Type: <void>
- initLabList() => <void>
  Description
  Import list input of laboratory fields by laboratories data from defined input params. This function will be called when create mge-query component and it is only called once
  Returns
  Type: <void>
- initCountryList() => <void>
  Description
  Import list input of country field by countries data from defined input params. This function will be called when create mge-query component and it is only called once
  Returns
  Type: <void>
- initPeriodList() => <void>
  Description
  Import list input of period field. This function will be called when create mge-query component and it is only called once
  Returns
  Type: Promise<void>
Eventlistener function
- changeEndpoint(event: any, value: any) => <void>
  Description
  Event function when change the endpoint from the endpoints list input After change endpoint, the list of predefined query will be update follow the selected endpoint
  Returns
  Type: Promise<void>
- changeQuery(event: any, value: any) => <void>
  Description
  Event function when change the predefined query from the predefined query list input After changing query, the information regarding predefined query will be update on the form
  Returns
  Type: Promise<void>
- clearQueryCache(queryid: any) => <void>
  Description
  Clear cache that stored from server. This function can be called after choosing 1 pre-defined query and click button clear cache
  Returns
  Type: <void>
- disableButton() => <void>
  Description
  This function to disable 2 buttons - Run and Clone button - after get result from server
  Returns
  Type: <void>
- blockContent() => <void>
  Description
  This function to disable all of input fields after clicking run button
  Returns
  Type: <void>
- displayQuery(query: any) => <void>
  Description
  display the form with information regarding the selected query
  Returns
  Type: Promise<void>
- enableButton() => <void>
  Description
  This function to enable 2 buttons - Run and Clone button
  Returns
  Type: <void>
Query function
- getFormData(form: any) => <{ query: any; name: any; uri: any; params: { type: any; prefixes: any; }; }>
  Description
  Get data from the form after user chose option for endpoint, query and custom variable
  Returns
  Type: <{ query: any; name: any; uri: any; params: { type: any; prefixes: any; }; }>
- getQueryData(form: any) => <any>
  Description
  This funtion return the data from the selected query
  Returns
  Type: <any>
- getResult(text: any, values: any) => <void>
  Description
  Receives the result from the query and proceed to visualization
  Returns
  Type: <void>
- graphicDisplay(data: any, values: any, followupQuery: any) => <void>
  Description
  Display a new visualization technique after get result from requested query After convert format of recieved data, it will create a new component include chart to represent new data New dataset will be stored to global variable
  Returns
  Type: <void>
- processQuery(form: any) => <void>
  Description
  Process the request query with selected query. This function will validate the data of the form. The process includes complete SPARQL query path, send request to server and process result from server
  Returns
  Type: <void>
- tune(data: any) => <void>
  Description
  Replace variables in SPARQL query with custom data from HTML form such as year, lab, country
  Returns
  Type: <void>
- sendRequest(values: any, followupQuery?: any) => <void>
  Description
  This funtion will send the request to the server to get the result with SPARQL after tune custom variables.
  Returns
  Type: <void>

1.3. mge-panel

General

This is an example to create a settings panel element:

<mge-panel id="chart-1-p" type-vis="mge-nodelink" id-view="chart-1" 
class="hydrated" style="display: block;">
</mge-panel>

Properties

| Property | Attribute | Description | Type | Default | | --------------------- | ----------------------- | ---------------------------------------------------------------------------------------------------------------- | ----- | ----------- | | _chart | _chart | Represents the visualization technique which have same view with this Settings panel | any | undefined | | _filter | _filter | Represents the div includes cloned html from template | any | undefined | | _idPanel | _id-panel | ID of the panel that generated from id of view | any | undefined | | _searchAutocomplete | _search-autocomplete | Text search input (of mge-nodelinks) | any | d3-selection | | _selectOrder | _select-order | Represents the select input for order of Iris(mge-iris) Settings panel and histogram(mge-barchart) Settings panel | any | d3-selection | | _sliderCharge | _slider-charge | Slider to adjust linkDistance (of mge-nodelinks) | any | d3-selection | | _sliderGravity | _slider-gravity | Slider to adjust Gravity | any | d3-selection | | _sliderLinkDistance | _slider-link-distance | Slider to adjust linkDistance (of mge-nodelinks) | any | d3-selection | | _spanCharge | _span-charge | Display positive value of charge attribute (of mge-nodelinks) | any | null | | _spanEdges | _span-edges | Text span to show number of edges (of mge-nodelinks) | any | d3-selection | | _spanGravity | _span-gravity | Display the value of the attribute gravity (of mge-nodelinks) | any | d3-selection | | _spanLinkDistance | _span-link-distance | Displays the value of the linkDistance attribute (of mge-nodelinks) | any | d3-selection | | _spanNodes | _span-nodes | Text span to show number of nodes (of mge-nodelinks) | any | d3-selection | | filterTemplate | filter-template | Represents the selection of the pre-defined template based on class name of template | any | d3-selection | | idView | id-view | id of view includes the panel | any | #" + {this.idView} + "-f" | | typeVis | type-vis | type of visualization technique that is displayed in the same view as the settings panel | any | "" |

Methods

Public Methods

setChart(_: any) => Promise<void>
Description
This function will store the associated visualization technique selection to _chart property.
Returns
Type: Promise<void>

Private Methods

Iris panel and histogram panel

_addItemsSelectOrder() => <void>
Description
This function allows to set the chart by displaying visualization technique. With this function, users can call all public methods from added chart.
Returns
Type: <void>

Node-edges panel

_addSliderGravity(idDivPanel: any) => <void>
Description
This function will add a slider input to the panel. This slider is used to adjust the gravity value of node-edges chart.
Returns
Type: <void>
_addSliderCharge(idDivPanel: any) => <void>
Description
This function will add a slider input to the panel. This slider is used to adjust the charge value of node-edges chart.
Returns
Type: <void>
_addSliderLinkDistance(idDivPanel: any) => <void>
Description
This function will add a slider input to the panel. This slider is used to adjust the distance value of links in node-edges chart.
Returns
Type: <void>
_addAutocomplete(idDivPanel: any) => <void>
Description
This function will add a text input to the panel. This slider is used to search node data in node-edges chart.
Returns
Type: <void>
upStatistics() => <void>
Description
This function will update value for 2 <span> tags for displaying number of nodes and edges of mge-nodelinks.
Returns
Type: <void>
upSliderGravity() => <void>
Description
This function will update chart with value from gravity slider when it's updated.
Returns
Type: <void>
upSliderCharge() => <void>
Description
This function will update chart with value from charge slider when it's updated.
Returns
Type: <void>
upSliderLinkDistance() => <void>
Description
This function will update chart with value from link distance slider when it's updated.
Returns
Type: <void>
atualizaAutocomplete() => <void>
Description
This function will set auto complete text in search input.
Returns
Type: <void>
createFilter() => <void>
Description
This function will add all functions to Settings panel bases on the type of visualization technique.
Returns
Type: <void>

1.4. mge-view

General

Each view is a self-contained element, which includes a visualization technique and supports subsetting operations to allow further exploration of subsets of data through different views. The views can be dragged, allowing the user to rearrange the visualization space in meaningful ways to the ongoing analysis. They are connected via line segments, which reveal their dependencies and enable tracing back the exploration path, thus preserving provenance information.

This is an example to create a view element:

<mge-view x="50" y="50" data="data-1" type-vis="mge-nodelink" id-view="chart-1" class="DS-viewArea hydrated" 
title="Collaboration network of researchers within a particular institution (HAL)">
</mge-view>

Properties

| Property | ----------------- | _barTitleHeight | _center | _chart | _content | _dimView | _filter | _position | _top | datasetName | height | idDash | idView | title | typeVis | viewDiv | width | x | y | Attribute | Description | Type | Default | | ------------------- | ------------------------------------------------------------------------------- | ------------------------------------ | --------------------------- | | _bar-title-height | Title bar height | number | 15 | | -- | View center point | { cx: number; cy: number; } | { cx: 0, cy: 0 } | | _chart | Chart associated with view | any | undefined | | _content | Div that represents the content includes chart of a view | any | d3-selection | | -- | View dimensions | { width: number; height: number; } | { width: 10, height: 10 } | | _filter | Div that represents the Settings panel of a view | any | d3-selection | | -- | View current position | { x: number; y: number; } | { x: 0, y: 0} | | _top | Div that represents the header part of a view | any | undefined | | dataset-name | The dataset name being used | string | "[]" | | height | represents the height of the view displayed by the window | number | 400 | | id-dash | | string | undefined | | id-view | represents ID of the view | string | undefined | | title | The title of the view | string | "[]" | | type-vis | represents type of visualization technique displayed via content of the view | string | undefined | | view-div | Div that represents the view included | any | undefined | | width | represents the width of the view displayed by the window | number | 400 | | x | x-coordinate (The horizontal value in a pair of coordinates) of view's position | number | 0 | | y | y-coordinate (The vertical value in a pair of coordinates) of view's position | number | 0 |

Methods

Public methods

_refreshBarTitle() => Promise<void>
Description
Refresh bar title width when we resize the windown
Returns
Type: Promise<void>
_showChart(node: any, parentId: any, typeChart: any, isFromEdge?: boolean, secondNode?: any, isFromCluster?: boolean, isFromHC?: boolean, newQuery?: any) => Promise<any>
Description
This function allows to create a new view from current view. After create a new view , it will be added to the dashboard with a generated title
Returns
Type: Promise<any>
generateTitle(node: any, data: any, _typeChart: any, parentId: any, isFromEdge: boolean, secondNode: any, isFromCluster: boolean, isFromHC: boolean) => Promise<any>
Description
This funtion is to generate the title of the view window it depends on the type chart to generate
Returns
Type: Promise<any>
getCenter() => Promise<{ cx: number; cy: number; }>
Description
Get current center position of the view
Returns
Type: Promise<{ cx: number; cy: number; }>
getChart() => Promise<any>
Description
Get the selection of the visualization technique element which containing in this view
Returns
Type: Promise<any>
getPosition() => Promise<{ x: number; y: number; }>
Description
Get current position of the view
Returns
Type: Promise<{ x: number; y: number; }>
idChart() => Promise<string>
Description
Get ID of the view
Returns
Type: Promise<string>
refresh() => Promise<void>
Description
this function allows to Refresh position of the view. This function will use value of _position property to update.
Returns
Type: Promise<void>
setCenter(x: any, y: any) => Promise<void>
Description
Set new center point for the view Inputs are coordinates (x and y) of new center position
Returns
Type: Promise<void>
setPosition(x: any, y: any) => Promise<void>
Description
Set new position for the view Inputs are coordinates : x and y
Returns
Type: Promise<void>
setTitle(_: any) => Promise<void>
Description
This function allows to set new title for the view
Returns
Type: Promise<void>
setVisible(status: any) => Promise<void>
Description
Set visible for all contents in view if input status is true, the content wil be visible if input status is false, the content will be hidden
Returns
Type: Promise<void>

Private methods

Initial functions

setResizable() => <void>
Description
This function allows to set resizable to the view. The view can be resized vertically and horizontally with the mouse. It consists of defining 3 functions at three event times (initialization, execution and stopping).
Returns
Type: <void>
_initAction() => <void>
Description
This function will set _onContextMenu function and _dblClickAction function to event listener.
Returns
Type: <void>
buildChart(div:any) => Promise<void>
Description
This function allows to create all content in the view. In this function, it will call addTopContent, addChartContent, addSettingsContent functions to create a header content bar, a particular visualization tecnique and a Settings panel (mge-panel).
Returns
Type: Promise<void>
addTopContent() => Promise<void>
Description
This function allows to create a header bar.
Returns
Type: <void>
addSettingsContent(div:any) => Promise<void>
Description
This function allows to create a settings panel. It will create a mge-panel and add it to the view to manage it.
Returns
Type: <void>
addChartContent(div:any) => <void>
Description
This function allows to create a particular visualization technique. After that, it will be added to the view to manage.
Returns
Type: <void>

Eventlistener functions

_onContextMenu(event:event) => <void>
Description
This function allows to create a context menu. This function will be called when click right mouse. A list of visualization techniques will be shown after clicking. The content inside this list will depend on the element you right click on
Returns
Type: <void>
_dblClickAction(event:event) => <void>
Description
This function is call when user double click on some particular elements
Returns
Type: <void>
_onMouseOverContent(event:event, d:any) => <void>
Description
This function is call when user move mouse over some particular elements. The tooltip will appear.
Returns
Type: <void>
_onMouseOutContent(event:event, d:any) => <void>
Description
This function is call when user move mouse out some particular elements. The tooltip will disappear.
Returns
Type: <void>
_findParentDiv(clickedElem:any) => <selection>
Description
This function allow to find a parent element (mge-view) of clicked element.
Returns
Type: <selection>

3.5. mge-history

General

History panel displays the exploration path in a hierarchical format to indicate the dependencies between views and supports quick recovery of the multiple analytical paths that emerge from a particular view

To create a history panel element

<mge-history id="chart-history" class="hydrated" height="250" width="350">
</mge-history>

Properties

| Property | Attribute | Description | Type | Default | | ------------------ | -------------------- | --------------------------------------------------------- | -------- | --------------------------------------- | | _dashboard | _dashboard | The parent dashboard | any | <mge-dashboard> | | _grpHistory | _grp-history | Group representing history tree | any | d3-selection | | _grpNodes | _grp-nodes | Group representing nodes in the tree | any | d3-selection | | _leftText | _left-text | Distance from the text to the left coordinate of the node | number | 18 | | _nodeMargin | _node-margin | Margin css of the node | number | 1 | | _nodoHeight | _nodo-height | Space height for each node without the margins | number | 14 | | _rectHeight | _rect-height | The height symbol | number | this._nodoHeight - this._nodeMargin*2 | | _treeLayout | _tree-layout | The tree layout to stored tree data | any | tree().size([0, this._nodoHeight ]) | | _vNodes | -- | Vector with objects of all nodes | any[] | [] | | height | height | represents the height of the history panel | number | 250 | | historyTreePanel | history-tree-panel | Represents the panel associated with the graphic | any | null | | width | width | represents the width of the history panel | number | 350 |

Data model

{
  "type": "object",
  "required": [],
  "properties": {
    "id": {
      "type": "string",
      "description": "Unique destination of views in the dashboard"

    },
    "title": {
      "type": "string",
      "description": "Text title of views in the dashboard"
    },
    "hidden": {
      "type": "string",
      "description": "To show whether the visibility of the view is hidden or visible"

    },
    "x": {
      "type": "number",
      "description": "To show horizontal coordinate of position of the view"

    },
    "y": {
      "type": "number",
      "description": "To show vertical coordinate of position of the view"
    },
    "view": {
      "type": "object",
      "required": [],
      "description": "To store instance of the view component"
      }
    },
    "parentNode": {
      "type": "Node ",
      "description": "Node instance containing the current view"
    },
    "isLeaf": {
      "type": "string",
      "description": "return true if the view is leaf and return false if it's not a leaf"
    },
    "link": {
      "type": "string",
      "description": "To show all links and connections of this view to another views"

    },
    "children": {
      "type": "array",
      "items": {
        "type": "object",
        "required": [],
        "properties": {
          "id": {
              "type": "string",
              "description": "Unique destination of children view"

            },
            "title": {
              "type": "string",
              "description": "Text title of children view"
            },
            "hidden": {
              "type": "string",
              "description": "To show whether the visibility of the children view is hidden or visible"

            },
            "x": {
              "type": "number",
              "description": "To show horizontal coordinate of position of the children view"

            },
            "y": {
              "type": "number",
              "description": "To show vertical coordinate of position of the children view"
            },
            "view": {
              "type": "object",
              "required": [],
              "description": "To store instance of the children view component"
              }
            },
            "parentNode": {
              "type": "Node ",
              "description": "Node instance containing the children view"
            },
            "isLeaf": {
              "type": "string",
              "description": "ret

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

MGExplorer (Multidimensional Graph Explorer)

Table of Contents

Availability

npm package

Online demo

License

Usage

From a SPARQL query

From a list of SPARQL queries

From a dataset

From a list of datasets

API Routes

Cache

SPARQL Request

Datafile Retrieval

Disable Views

Data Model

SPARQL Query Template

Stylesheet

Input dataset

SPARQL Query Object

MGExplorer Components

1. Components

1.1. Dashboard component (mge-dashboard)

General

Properties

Methods

Public Methods

Private Methods

Data model

1.2. mge-query

General

Properties

Methods

Public Methods

Private Methods

1.3. mge-panel

General

Properties

Methods

Public Methods

Private Methods

1.4. mge-view

General

Properties

Methods

Public methods

Private methods

3.5. mge-history

General

Properties

Data model