Specification document - MGExplorer 2021
Table of contents
-
3.1. mge-dashboard
3.2. mge-query
3.3. mge-view
3.4. mge-panel
3.5. mge-history
-
4.1. mge-barchart
4.2. mge-clustervis
4.3. mge-glyph-matrix
4.4. mge-iris
4.5. mge-listing
4.6. mge-nodelink
1. Introduction
Visualization techniques are useful to explore data by enabling the discovery of meaningful patterns and causal relationships. The discovery process is often exploratory and requires multiple views to support analyzing different or complementary perspectives to the data. In this context, analytic provenance shows great potential to understand users' reasoning process through the study of their interactions on multiple view systems.
In this project, we present an approach based on the concept of chained views to support the incremental exploration of large, multidimensional datasets. Our goal is to provide visual representation of provenance information to enable users to retrace their analytical actions and to discover alternative exploratory paths without loosing information on previous analyses.
Our implementation of the approach, MGExplorer (Multidimensional Graph Explorer), allows users to explore different perspectives to a dataset by modifying the input graph topology, choosing visualization techniques, arranging the visualization space in meaningful ways to the ongoing analysis and retracing their analytical actions. MGExplorer combines multiple visualization techniques and visual querying while rep- resenting provenance information as segments connecting views, which each supports selection operations that help define subsets of the current dataset to be explored by a different view
In new version MGExplore, it includes 6 main elements to construct this application. They are interrelated and work closely together to help the application work stably. Below will be a small summary for the 6 main ingredients mentioned in the photo above:
-
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 themge-view
is inside themge-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 themge-query
will be inside themge-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
)
- History bar chart (
2. Setup
Developed Dependencies
Name | Version |
---|---|
@stencil/store | 1.4.1 |
@types/jest | 26.0.21 |
@types/puppeteer | 5.4.3 |
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 |
@types/sweetalert | 2.0.4 |
autocompleter | 6.1.0 |
babel-plugin-transform-remove-strict-mode | 0.0.2 |
cors | 2.8.5 |
d3 | 6.0.0 |
d3-simple-slider | 1.10.4 |
ejs | 3.1.6 |
express | 4.17.1 |
express-fileupload | 1.2.1 |
jquery | 3.6.0 |
jquery-ui | 1.12.1 |
lodash | 4.17.21 |
model-js | 0.2.5 |
morgan | 1.10.0 |
nodemon | 2.0.12 |
patch-package | 6.4.7 |
puppeteer | 8.0.0 |
requirejs | 2.3.6 |
sweetalert2 | 11.0.18 |
tippy.js | 6.3.1 |
xmlhttprequest | 1.8.0 |
To start building a new web component using Stencil, clone this repository to a new directory:
git clone via ssh
git clone git@github.com:Wimmics/covid-19-linkedviz.git
Or
git clone via htmls
git clone https://github.com/Wimmics/covid-19-linkedviz.git
Go to the project
cd covid-19-linkedviz
Change branch
git checkout mge-refactoring
and run:
# Install dependencies and libraries
npm install
# Build application before run server side
npm run build
# Run application via Server side
npm run start:ssr
And go to http://localhost:8081/general
to access to the application
3. 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 promiseExample:
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.
3.1. Dashboard component (mge-dashboard)
General
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>
ofrender()
functionReturns
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."
}
}
}
}
}
}
}
}
}
}
}
3.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 |
Data model
To create a mge-query
, we need to provide a data model to this component. This data model will use to provide data of list pre-diefine query, available values of custom variables, available values of endpoint.
{
"type": "object",
"required": [],
"properties": {
"query": {
"type": "string"
},
"name": {
"type": "string"
},
"uri": {
"type": "string"
},
"params": {
"type": "object",
"required": [],
"properties": {
"type": {
"type": "string"
},
"prefixes": {
"type": "array",
"items": {
"type": "string"
}
},
"period": {
"type": "array",
"items": {
"type": "number"
}
},
"lab": {
"type": "array",
"items": {
"type": "string"
}
},
"country": {
"type": "string"
}
}
},
"isLocked": {
"type": "boolean"
},
"id": {
"type": "number"
},
"dataset": {
"type": "string"
}
}
}
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>
-
3.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 ofmge-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>
3.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 | Attribute | Description | Type | Default |
---|---|---|---|---|
_barTitleHeight |
_bar-title-height |
Title bar height | number |
15 |
_center |
-- | View center point | { cx: number; cy: number; } |
{ cx: 0, cy: 0 } |
_chart |
_chart |
Chart associated with view | any |
undefined |
_content |
_content |
Div that represents the content includes chart of a view | any |
d3-selection |
_dimView |
-- | View dimensions | { width: number; height: number; } |
{ width: 10, height: 10 } |
_filter |
_filter |
Div that represents the Settings panel of a view | any |
d3-selection |
_position |
-- | View current position | { x: number; y: number; } |
{ x: 0, y: 0} |
_top |
_top |
Div that represents the header part of a view | any |
undefined |
datasetName |
dataset-name |
The dataset name being used | string |
"[]" |
height |
height |
represents the height of the view displayed by the window | number |
400 |
idDash |
id-dash |
string |
undefined |
|
idView |
id-view |
represents ID of the view | string |
undefined |
title |
title |
The title of the view | string |
"[]" |
typeVis |
type-vis |
represents type of visualization technique displayed via content of the view | string |
undefined |
viewDiv |
view-div |
Div that represents the view included | any |
undefined |
width |
width |
represents the width of the view displayed by the window | number |
400 |
x |
x |
x-coordinate (The horizontal value in a pair of coordinates) of view's position | number |
0 |
y |
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": "return true if the children view is leaf and return false if it's not a leaf"
},
"link": {
"type": "object",
"required": [],
"properties": {
"line": {
"type": "object",
"required": [],
},
"conect": {
"type": "object",
"required": [],
},
"visible": {
"type": "boolean",
"description": "return true if the view is visible and return false if it's hidden"
}
}
}
}
}
}
Methods
Public methods
-
addHistoryTreeChart(idDiv: any, divTag: any) => Promise<void>
Description
The initial function to create all of elements in the history treechart In this function, it will set Geometric attributes of the graph create actions on graph and manage all of the interaction on the graph
Returns
Type:
Promise<void>
-
setBox(_: any) => Promise<any>
Description
Set box size for the chart includes the content input is a object includes height and width
Returns
Type:
Promise<any>
-
setData(_: any) => Promise<any>
Description
This function set the data to the chart. The data model will be display bellow section
Returns
Type:
Promise<any>
-
setTree(newTree: any) => Promise<void>
Description
This function is to set the data to the tree history data
Returns
Type:
Promise<void>
Private methods
-
_appendNodos() => <void>
Description
This function will add record line elements inside history table based on history tree data. Each line will include a symbol and a title of the view that the user used during discovery.
Returns
Type:
<void>
4. Visualization techniques
General
Visualization techniques are useful to explore data by enabling the discovery of meaningful patterns and causal relationships. The discovery process is often exploratory and requires multiple views to support analyzing different or complementary perspectives to the data.
In MGExplore, we have 6 pre-defined visualization technique to explore data:
- Histogram 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`)
Every visualization technique components will have a set of common methods. This is a list of common methods:
Common methods
-
setBox(_: any) => Promise<any>
Description
Set box size for the chart includes the content input is a object includes height and width
Returns
Type:
Promise<any>
-
setData(_: any) => Promise<any>
Description
This function is to set the data to the chart The data model will be display bellow section
Returns
Type:
Promise<any>
-
setPanel(_: any) => Promise<any>
Description
This function is required in all techniques It is called internally to add connection between chart and settings panel
Returns
Type:
Promise<any>
4.1. mge-barchart
General
The Bar Chart technique shows the distribution of data attributes’ value for an item or set of items. In our case study, the x-axis encodes temporal information, while the y-axis encodes the counting of co-publications. The data is displayed as a single bar per time period or multiple colored bars to represent categorical information of attributes
To create a histogram bar chart element
<mge-barchart dataset-name="data-1" id="chart-3" class="hydrated">
</mge-barchart>
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
_cfgIndexAttr |
_cfg-index-attr |
Contains the indexes of the attributes that can be configured in the graph | any |
undefined |
_colorsBars |
_colors-bars |
colors for the different attributes | any |
undefined |
_documentTypes |
_document-types |
keeps data on the different types of documents (attributes) | any |
undefined |
_grpHistogram |
_grp-histogram |
Group representing Histogram | any |
undefined |
_histogramData |
_histogram-data |
keeps the count of documents per year and type | any |
undefined |
_innerRadius |
_inner-radius |
(calculated) radius of the circle where the centroid is inserted | any |
undefined |
_barPanel |
_bar-panel |
represents the panel associated with the graph | any |
undefined |
_maxHeightBar |
_max-height-bar |
(calculated) distance occupied by the bars | any |
undefined |
_nbOfTypesDoc |
_nb-of-types-doc |
Number of types of documents in the base | any |
undefined |
_outerRadius |
_outer-radius |
(calculated) Outernal circle radius where the graph is drawn | any |
undefined |
_vOrder |
_v-order |
Indirect ordering vector | any |
undefined |
datasetName |
dataset-name |
The dataset name being used | string |
"[]" |
height |
height |
represents the height of the Histogram chart | number |
350 |
width |
width |
represents the width of the Histogram chart | number |
350 |
Data model
{
"type": "object",
"required": [],
"properties": {
"root": {
"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 data.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 data.values explained below"
}
},
"imageTitle": {
"type": "string",
"description": "."
},
"data": {
"type": "object",
"required": [],
"properties": {
"id": {
"type": "number",
"description": "Unique identifier of the node"
},
"idOrig": {
"type": "number",
"description": "Unique original 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": "."
},
"documents": {
"type": "array",
"items": {
"type": "object",
"required": [],
"properties": {
"type": {
"type": "object",
"required": [],
"properties": {
"label": {
"type": "string",
"description": "Type of the published document"
},
"index": {
"type": "string",
"description": "The order of type of the published document in list"
}
}
},
"title": {
"type": "string",
"description": "Document title"
},
"link": {
"type": "string",
"description": "Link to the online document."
},
"date": {
"type": "string",
"description": "Date the document was published"
},
"authors": {
"type": "array",
"items": {
"type": "number",
"description": "An element refers to a unique identifier of a node"
}
}
}
}
}
}
}
}
},
"children": {
"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 data.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 data.values explained below"
}
},
"imageTitle": {
"type": "string",
"description": "."
},
"cluster": {
"type": "string",
"description": "Show the cluster relationship between children nodes"
},
"data": {
"type": "array",
"items": {
"type": "object",
"required": [],
"properties": {
"id": {
"type": "number",
"description": "Unique identifier of the node"
},
"idOrig": {
"type": "number",
"description": "Unique original 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": "."
}
}
}
},
"others": {
"type": "array",
"items": {
"type": "string",
"description": "."
}
}
}
}
}
}
Methods
Public Methods
-
acSortExecAttribute() => Promise<void>
Description
Returns
Type: Promise<void>
-
acSortExecText() => Promise<void>
Description
Returns
Type: Promise<void>
-
dataVisToNode(index: any) => Promise<any>
Description
This function will return the children data from children list in data model. The iput is index of children data.
Returns
Type:
Promise<any>
-
getSourceObject() => Promise<any>
Description
This function will return the root object data
Returns
Type:
Promise<any>
-
setIndexAttrBar(_: any) => Promise<any>
Description This function will set value of index of the attribute that will be plotted in the toolbar
Returns
Type:
Promise<any>
-
setpMaxHeightBar(_: any) => Promise<any>
Description
This function will set maximum value for height of bars
Returns
Type:
Promise<any>
Private methods
-
addHistogramChart(idDiv: any, divTag: any) => <void>
Description
The initial function to create all of elements in the histogram chart In this function, it will set Geometric attributes of the graph create actions on graph and manage all of the interaction on the graph
Returns
Type:
<void>
-
_closeToolTip() => <void>
Description
This function will display the help tooltip when move mouse over the help icon.
Returns
Type: <void>
-
_openToolTip() => <void>
Description
This function will hide the help tooltip when move mouse out the help icon.
Returns
Type: <void>
4.2. mge-clustervis
General
The ClusterVis technique depicts clusters according to some relationship among data items. It has a multi-ring layout, where the innermost ring is formed by the data items (represented by circles), and the remaining rings display the data
To create a clusterVis chart element
<mge-clustervis dataset-name="data-1" id="chart-4" class="hydrated" height="350" width="350">
</mge-clustervis>
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
_clusterVisPanel |
_cluster-vis-panel |
Represents the panel associated with the graphic | any |
<mge-panel> |
_drawLine |
_draw-line |
Generator of splines that makes up the edges | any |
undefined |
_grpBars |
_grp-bars |
Selection that contains all groups that store the bars | any |
null |
_grpCluster |
_grp-cluster |
Group representing ClusterVis | any |
null |
_grpLinks |
_grp-links |
Selection that contains all groups that store the links | any |
null |
_grpRings |
_grp-rings |
Selection that contains all groups that store the rings | any |
null |
_innerRadius |
_inner-radius |
(calculated) Internal circle radius where the graph is drawn | number |
0 |
_links |
_links |
Selection that contains the links | any |
null |
_outerRadius |
_outer-radius |
(calculated) Outernal circle radius where the graph is drawn | number |
0 |
_sameScale |
_same-scale |
Indicates that the same scale should be used for all bars | boolean |
false |
_xClusterCenter |
_x-cluster-center |
Coordinate x of the center of the cluster | number |
0 |
_yClusterCenter |
_y-cluster-center |
Coordinate y of the center of the cluster | number |
0 |
datasetName |
dataset-name |
The dataset name being used | string |
"[]" |
height |
height |
represents the height of the Cluster chart | number |
350 |
width |
width |
represents the width of the Cluster chart | number |
350 |
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"
}
}
}
}
}
}
}
}
}
Methods
Public methods
-
acAlteraAnel(indexAnel: any, indexAttr: any) => Promise<void>
Description
Returns
Type:
Promise<void>
-
acSameScale(checked: any) => Promise<void>
Description
Returns
Type:
Promise<void>
-
acSortExec(_: any) => Promise<void>
Description
Returns
Type:
Promise<void>
-
addAttribute(_indexAttr: any, _typeAttr: any) => Promise<void>
Description
Returns
Type:
Promise<void>
-
setIndexAttrSort(_: any) => Promise<number>
Description
Returns
Type:
Promise<void>
-
setpInnerRadius(_: any) => Promise<any>
Description
Set value of Percentage relative to graph width for
_innerRadius
calculation If no arguments, It will return the value of pInnerRadiusReturns
Type:
Promise<any>
-
setpOuterRadius(_: any) => Promise<any>
Description
Set value of Percentage relative to graph width for
_OuterRadius
calculation If no arguments, It will return the value of pOuterRadiusReturns
Type:
Promise<any>
Private methods
-
_angleToWidth(angle: any, radius: any) => Promise<number>
Description
Calculates the sector width from the angle and a radius E: width, radius S: angle in degrees
Returns
Type:
Promise<number>
-
_calcCoordinates(dataNodes: any) => Promise<void>
Description
Calculates the coordinates of the leaf nodes
Returns
Type:
Promise<void>
-
_calcGeometry(data: any) => Promise<void>
Description
Calculates all geometric parameters for ClusterVis display
Returns
Type:
Promise<void>
-
_getEdges(dados: any, nodes: any) => Promise<any[]>
Description
Generates a vector with the list of edges in the format: [ {source:Object, target: Object},...]
Returns
Type:
Promise<any[]>
-
_getTree(heightTree: any, dados: any, degree: any, vOrder: any) => Promise<any>
Description
Generates a tree in the format { id:..., chidren[] }
Returns
Type:
Promise<any>
-
_updateMaxRings() => Promise<void>
Description
Returns
Type:
Promise<void>
-
_widthToAngle(width: any, radius: any) => Promise<number>
Description
Calculates the angle of the occupied sector by a width E: width, radius S: angle in degrees
Returns
Type:
Promise<number>
-
addClusterChart(idDiv: any, divTag: any) => Promise<void>
Description
The initial function to create all of elements in the cluster chart In this function, it will set Geometric attributes of the graph create actions on graph and manage all of the interaction on the graph
Returns
Type:
Promise<void>
-
alteraAttribute(_indexAnel: any, _indexAttr: any, _typeAttr: any) => Promise<void>
Description
Returns
Type:
Promise<void>
-
obtemRings() => Promise<any[]>
Description
Returns
Type:
Promise<void>
-
removeAnelExterno() => Promise<void>
Description
Returns
Type:
Promise<void>
4.3. mge-glyph-matrix
General
This visualization technique is presented as a double entry table. The input dataare the authors present in the cluster of the selected node. Each row and column areidentified by an author. At the intersection of a row and a column, the visualizationtechnique allows you to know if the two authors have publications in common. Ifso, an icon appears in the box corresponding to the intersection of their names.When hovering over an icon, a tooltip appears and displays a radar chartshowing the number of publications according to their type.
The control panel allows you to sort the position of the elements on the rowsand columns and to change the text displayed there. In addition, it is possible tomodify the number of row and column displayed simultaneously.
To create a Glyph matrix chart element
<mge-glyph-matrix dataset-name="data-1" id="chart-5" class="hydrated" height="350" width="350">
</mge-glyph-matrix>
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
_cellCoordScale |
_cell-coord-scale |
Scale is used to determine the coordinates of cells and legend elements | any |
scaleBand() |
_cellGlyph |
_cell-glyph |
keeps data on the different types of documents (attributes) | any |
NumericGlyph(0) |
_dragListenerL |
_drag-listener-l |
Listener of legends | any |
null |
_dragListenerM |
_drag-listener-m |
Listener of Matrix | any |
null |
_grpBarsLL |
_grp-bars-l-l |
Select with all groups from left side legend bar | any |
null |
_grpBarsTL |
_grp-bars-t-l |
Select with all groups from top side legend bar | any |
null |
_grpLeftLegend |
_grp-left-legend |
Select with left side legend bar | any |
null |
_grpLines |
_grp-lines |
Contains lines with cells in each line | any |
null |
_grpMatrix |
_grp-matrix |
Select with matrix chart | any |
null |
_grpMatrixGlyph |
_grp-matrix-glyph |
keeps data on the different types of documents (attributes) | any |
null |
_grpOverview |
_grp-overview |
The group represents the matrix overview | any |
null |
_grpTopLegend |
_grp-top-legend |
Select with top side legend bar | any |
null |
_idClipLeft |
_id-clip-left |
Left legend clipping area id | any |
undefined |
_idClipMatrix |
_id-clip-matrix |
Matrix clipping area id | any |
undefined |
_idClipTop |
_id-clip-top |
Top legend clipping area id | any |
undefined |
_indexAttrLegend |
_index-attr-legend |
The index of the attribute will be printed in the legend (node) | number |
0 |
_indexAttrSort |
_index-attr-sort |
Attribute index used for sorting | number |
0 |
_matrixGlyphPanel |
_matrix-glyph-panel |
Group represents the entire chart | any |
null |
_matrixHeight |
_matrix-height |
Matrix area height (calculated) | number |
0 |
_matrixWidth |
_matrix-width |
Matrix area width (calculated) | number |
0 |
_overviewScale |
_overview-scale |
Scale is used to set the coordinates of the overview cursor | any |
scaleLinear() |
_vOrder |
_v-order |
Indirect ordering vector | any |
null |
datasetName |
dataset-name |
The dataset name being used | string |
"[]" |
height |
height |
represents the height of the matrix chart | number |
350 |
width |
width |
represents the width of the matrix chart | number |
350 |
Data model
{
"type": "object",
"required": [],
"properties": {
"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"
}
},
"dataNodes": {
"type": "array",
"items": {
"type": "object",
"required": [],
"properties": {
"id": {
"type": "string",
"description": "Unique identifier of the node"
},
"idOrig": {
"type": "string",
"description": "Unique original 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": "array",
"items": {
"type": "string",
"description": ""
}
},
"matrix": {
"type": "array",
"items": {
"type": "array",
"items": {
"type": "object",
"required": [],
"properties": {
"x": {
"type": "number",
"description": "."
},
"y": {
"type": "string",
"description": "."
},
"exist": {
"type": "boolean",
"description": "."
},
"labels": {
"type": "string",
"description": "."
},
"values": {
"type": "array",
"items": {
"type": "number",
"description": "."
}
}
}
}
}
}
}
}
Methods
Public methods
-
acChangeAttrLegend(_: any) => Promise<void>
Description
Returns
Type:
Promise<void>
-
acChangeVisibleLines(qtLines: any) => Promise<void>
Description
Returns
Type:
Promise<void>
-
acSortExec(_: any) => Promise<void>
Description
Returns
Type:
Promise<void>
Private methods
-
_adjustLengthText(stText: any, limit: any) => Promise<any>
Description
Adjusts the size of the text that will be printed in the centroid title
Returns
Type:
Promise<any>
-
_calcHeightCell() => Promise<any>
Description
Calculate cell height/width. So is the comment bar
Returns
Type:
Promise<any>
-
_calcVisibleLines() => Promise<void>
Description
Determines limits for visible lines
Returns
Type:
Promise<void>
-
_limCoord(coord: any) => Promise<any>
Description
Limit the coordinate value
Returns
Type:
Promise<any>
-
_onMouseEnterNode(event: any, d: any) => Promise<void>
Description Event listener when mouse enter to node in chart.
Eeturns
Type:
Promise<void>
-
_onMouseLeaveNode(event: any, d: any) => Promise<void>
Description
eturns
Type:
Promise<void>
-
addMatrixGlyph(idDiv: any, divTag: any) => Promise<void>
Description The initial function to create all of elements in the Matrix Glyph chart In this function, it will set Geometric attributes of the graph create actions on graph and manage all of the interaction on the graph
Returns
Type:
Promise<void>
-
cellColorsMap(colors: any) => Promise<void>
Description
Returns
Type:
Promise<void>
-
debug() => Promise<void>
Description
Returns
Type:
Promise<void>
-
getMaxVisibleLines() => Promise<number>
Description
Returns
Type:
Promise<number>
-
getMinVisibleLines() => Promise<number>
Description
Returns
Type:
Promise<number>
-
getVisibleLines() => Promise<number>
Description
Returns
Type:
Promise<number>
-
glyph(_: any) => Promise<any>
Description
Returns
Type:
Promise<any>
-
indexAttrCellColor(_: any) => Promise<number>
Description
Returns
Type:
Promise<number>
-
indexAttrLegend(_: any) => Promise<number>
Description
Returns
Type:
Promise<number>
-
indexAttrSort(_: any) => Promise<number>
Description
Returns
Type:
Promise<number>
-
pFontHeight(_: any) => Promise<any>
Description
Returns
Type:
Promise<any>
-
pLegendWidth(_: any) => Promise<any>
Description
Returns
Type:
Promise<any>
-
setTTMatrixCell(_: any) => Promise<void>
Description
Returns
Type:
Promise<void>
4.4. mge-iris
General
This visualization technique aims to display an author with all his co-authors and know for each the number of publications that they have in common. In the center is the name of the selected node, and around are distributed the names of the nodes which have a connection with it. The colored bars represent the publications that one author has in common with another author.
This technique is built with the idea of "simulating" the behavior of an eye. In the field of vision (gray area), elements are normal size while the elements on the periphery are getting smaller and smaller.
After clicking on a bar or a name, the selected element is moved to the center of the field of view after a rotation animation. Hovering over a bar or the name of a connection opens a tooltip displaying the exact number of articles published.
By double-clicking on the name of a connection, that connection is assigned as the new center of the iris and its own connections will be displayed around the eye. This solution is a quick alternative to navigate from node to node compared to the usual context menu method.
To create a Iris chart element
<mge-iris dataset-name="data-1" id="chart-2" class="hydrated" height="350" width="350">
</mge-iris>
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
_cfgIndexAttr |
_cfg-index-attr |
Contains the indexes of the attributes that can be configured in the graph | any |
undefined |
_colorsBars |
_colors-bars |
colors for the different types | any |
undefined |
_dataVis |
_data-vis |
Vector of visible data. Points to the elements of model.data | any |
undefined |
_fishEyeArea |
_fish-eye-area |
Contains the attribute of the fish eye area | any |
undefined |
_focusArea |
_focus-area |
Contains the attribute of the focused area | any |
undefined |
_grpBars |
_grp-bars |
Selection that contains all groups of bars | any |
undefined |
_grpIris |
_grp-iris |
Group representing IRIS | any |
undefined |
_hiddenArea |
_hidden-area |
Contains the attribute of the hidden area | any |
undefined |
_indexFirstData |
_index-first-data |
Index in the "dataVis" vector where the first element of the data vector is located | any |
undefined |
_innerRadius |
_inner-radius |
(calculated) radius of the circle where the centroid is inserted | any |
undefined |
_irisPanel |
_iris-panel |
The dataset name being used | any |
undefined |
_maxHeightBar |
_max-height-bar |
(calculated) distance occupied by the bars | any |
undefined |
_minArea |
_min-area |
Contains the attribute of the minimum area | any |
undefined |
_nbOfTypesDoc |
_nb-of-types-doc |
number of types of documents in the base | any |
undefined |
_numMaxBars |
_num-max-bars |
Maximum number of the bars | any |
undefined |
_numTotalBars |
_num-total-bars |
Total number of the bars | any |
undefined |
_orders |
_orders |
The orders of typesDocs | any |
undefined |
_outerRadius |
_outer-radius |
(calculated) Outernal circle radius where the graph is drawn | any |
undefined |
_pDesloc |
_p-desloc |
Percentage of center displacement | any |
undefined |
_vOrder |
_v-order |
Indirect ordering vector | any |
undefined |
datasetName |
dataset-name |
The dataset name being used | string |
"[]" |
height |
height |
represents the height of the Iris chart | number |
350 |
width |
width |
represents the width of the Iris chart | number |
350 |
Data model
{
"type": "object",
"required": [],
"properties": {
"root": {
"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 data.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 data.values explained below"
}
},
"imageTitle": {
"type": "string",
"description": "."
},
"data": {
"type": "object",
"required": [],
"properties": {
"id": {
"type": "number",
"description": "Unique identifier of the node"
},
"idOrig": {
"type": "number",
"description": "Unique original 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": "."
}
}
}
}
},
"children": {
"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 data.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 data.values explained below"
}
},
"imageTitle": {
"type": "string",
"description": "."
},
"data": {
"type": "array",
"items": {
"type": "object",
"required": [],
"properties": {
"id": {
"type": "number"
},
"idOrig": {
"type": "number"
},
"labels": {
"type": "array",
"items": {
"type": "string"
}
},
"values": {
"type": "array",
"items": {
"type": "number"
}
},
"images": {
"type": "string"
},
"edge": {
"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"
}
}
}
}
}
}
}
}
},
"edges": {
"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 data.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 data.values explained below"
}
},
"data": {
"type": "array",
"items": {
"type": "string",
"description": "."
}
}
}
}
}
}
Methods
Public methods
-
_getTheRightOrder(i: any) => Promise<any>
Description
Returns the order in which we need to display the types of documents
Returns
Type:
Promise<any>
-
acSortExecAttribute() => Promise<void>
Description
Returns
Type:
Promise<void>
-
acSortExecText() => Promise<void>
Description
Returns
Type:
Promise<void>
-
addIrisChart(idDiv: any, divTag: any) => Promise<void>
Description
Returns
Type:
Promise<void>
-
dataVisToNode(index: any) => Promise<any>
Description
This function will return the children data from children list in data model. The iput is index of children data.
Returns
Type:
Promise<any>
-
getBox() => Promise<any>
Description
Get box size value Output is a object includes height and width
Returns
Type:
Promise<any>
-
getSourceObject() => Promise<any>
Description
Returns
Type:
Promise<any>
-
getVOrder() => Promise<any>
Description
This function will return the indirect ordering vector
Returns
Type:
Promise<any>
-
putBarsOnIris() => Promise<void>
Description
Returns
Type:
Promise<void>
-
setConfigCentroid(titulo: any, tituloGrau: any, textoBarra: any) => Promise<void>
Description
Configure the data that will be printed in the centroid and the text of the bar (Label only)
Returns
Type:
Promise<void>
-
setIndexAttrBar(_: any) => Promise<any>
Description
Returns
Type:
Promise<any>
-
setpInnerRadius(_: any) => Promise<any>
Description
Set value of Percentage relative to graph width for
_innerRadius
calculation If no arguments, It will return the value of pInnerRadiusReturns
Type:
Promise<any>
-
setpMaxHeightBar(_: any) => Promise<any>
Description
Returns
Type:
Promise<any>
-
setpOuterRadius(_: any) => Promise<any>
Description
Set value of Percentage relative to graph width for
_OuterRadius
calculation If no arguments, It will return the value of pOuterRadiusReturns
Type:
Promise<any>
-
updateTextSize() => Promise<void>
Description
Returns
Type:
Promise<void>
4.5. mge-listing
General
The list of papers technique allows listing all the information related to the selected data. Listing all related items will help users have all the necessary information in the data discovery process
To create a listing papers chart element
<mge-listing dataset-name="data-1" id="chart-6" class="hydrated" height="400" width="350">
</mge-listing>
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
_colorsRect |
-- | Colors for the different types | string[] |
["#1f77b4", "#2ca02c", "#d62728", "#ff7d0e"] |
_data |
_data |
List of items in the data | any |
null |
_grpPapers |
_grp-papers |
Selection that contains all groups of bars | any |
null |
_grpPapersList |
_grp-papers-list |
Group representing IRIS | any |
null |
_maxLenghtTitleIndex |
_max-lenght-title-index |
Maximum length of title | number |
7.8 |
_maxNamesLenght |
_max-names-lenght |
Maximum length of names | number |
87 |
_names |
_names |
Selection that contains the names of the members of a cluster | any |
null |
_papersListPanel |
_papers-list-panel |
represents the panel associated with the graph | any |
null |
datasetName |
dataset-name |
The dataset name being used | string |
"[]" |
height |
height |
represents the height of the paper's list chart | number |
400 |
width |
width |
represents the width of the paper's list chart | number |
350 |
Methods
Public methods
addPaperListChart(idDiv: any, divTag: any) => Promise<void>
Returns
Type: Promise<void>
-
dataVisToNode(index: any) => Promise<any>
Description
This function will return the children data from children list in data model. The iput is index of children data.
Returns
Type:
Promise<any>
Private method
-
_findAuthorById(id: any) => Promise<any>
Description
Returns the author depending on ID
Returns
Type:
Promise<any>
-
_getTheIndex(type: any) => Promise<1 | 0 | 2 | 3>
Description
Returns the index for the color
Returns
Type:
Promise<1 | 0 | 2 | 3>
4.6. mge-nodelink
General
This visualization technique is based on graphs. As the name suggests, data is modeled using nodes and links. A node (circle) represents an author, and a link between two nodes represents a collaboration between the two authors.
Various cognitive elements provide useful information at first glance. In particular, the more links a node has with other nodes, the larger its diameter will be. Differentiation by color is possible to group certain nodes according to parameters chosen by the user (laboratory, type of disease, keyword, etc.).
For user interaction, it is possible to hover over a node or edge to view more detailed information. In doing so, the interface opens a tooltip containing the name of the node, the number of connections with other nodes as well as various information such as the number of posts.
A panel can be accessed by clicking on the button at the top left of the window (v). It allows you to change the display of the visualization or perform a search to find a node more easily
To create a node-links chart element
<mge-nodelink dataset-name="data-1" id="chart-1" class="hydrated" height="350" width="350">
</mge-nodelink>
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
_grpNodeEdge |
_grp-node-edge |
The group represents the entire graphic | any |
null |
_nodeEdgeLegend |
_node-edge-legend |
Represents the legend associated with the graphic | any |
null |
_nodeEdgePanel |
_node-edge-panel |
Represents the panel associated with the graphic | any |
null |
datasetName |
dataset-name |
The dataset name being used | string |
"[]" |
height |
height |
represents the height of the nodelinks chart | number |
350 |
width |
width |
represents the width of the nodelinks chart | number |
350 |
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."
}
}
}
}
}
}
}
}
}
}
}
Methods
-
acChangeAttrSize(atributo: any) => Promise<void>
Description
Returns
Type:
Promise<void>
-
acChangeCharge(value: any) => Promise<void>
Description
This function will change the value of charge on force layout. This function will be called when adjust Charge slider in filter panel
Returns
Type:
Promise<void>
-
acChangeGravity(value: any) => Promise<void>
Description
This function will change the value of gravity on force layout. This function will be called when adjust Gravity slider in filter panel
Returns
Type:
Promise<void>
-
acChangeLinkDistance(value: any) => Promise<void>
Description
This function will change the value of links distance on force layout. This function will be called when adjust LinkDistance slider in filter panel
Returns
Type:
Promise<void>
-
acSelectByName(nome: any) => Promise<void>
Description
This function will hightlight node and all related links by name of selected node. This function will be called when used text search in filter panel
Returns
Type:
Promise<void>
-
acSelectByNameCluster(nomeCluster: any) => Promise<void>
Description
This function will hightlight all nodes in a cluster. This function will be called when used text search in filter panel
Returns
Type:
Promise<void>
-
addNodeLinkChart(idDiv: any, divTag: any) => Promise<void>
Description
Returns
Type:
Promise<void>
-
getCharge() => Promise<any>
Description
This function will get the
charge
attribute of force layout in node-links chartReturns
Type:
Promise<any>
-
getColorBreaks() => Promise<any>
Description
Returns
Type:
Promise<any>
-
getColorScale() => Promise<any>
Description
Returns
Type:
Promise<any>
-
getGravity() => Promise<any>
Description
This function will get the
gravity
attribute of force layout in node-links chartReturns
Type:
Promise<any>
-
getLinkDistance() => Promise<any>
Description
This function will get the
distance
attribute of links in force layout in node-links chartReturns
Type:
Promise<any>
-
getQtEdges() => Promise<any>
Description
This function will get the total number of edges
Returns
Type:
Promise<any>
-
getQtNodes() => Promise<any>
Description
This function will get the total number of nodes
Returns
Type:
Promise<any>
-
indexAttrSize(_: any) => Promise<number>
Description
Changes the attribute that will be used to map the size
Returns
Type:
Promise<number>
-
resetHighSearch() => Promise<void>
Description
This function will remove hightlight effect on all of nodes and links. This function will be called when clear text inside text search
Returns
Type:
Promise<void>
-
setItemsContextMenu(items: any) => Promise<void>
Description
Returns
Type:
Promise<void>