ldexplorer-component v0.0.1

Specification document - MGExplorer 2021

Table of contents

1. Introduction
2. Setup

3. Components

   3.1. mge-dashboard

   3.2. mge-query

   3.3. mge-view

   3.4. mge-panel

   3.5. mge-history

4. Visualization techniques

   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 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)

2. Setup

Developed Dependencies

Dependencies and libraries

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 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*:

  ```js
  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

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."
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

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

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

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>

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

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

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

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",