Attachment 0-28

Ref.
Ares(2019)7872490 - 20/12/2019
COMP
Polymer Composites
SELECTOR
Business Decision Support System Project Reference: 721105
COMPOSELECTOR VISUAL INFORMATION

PROVIDER (COVIP)
Lead Beneficiaries LIST
Contributing Beneficiaries LIST
Document Nature WP5.3 Contract Deliverable
Dissemination LIST, then reviewers (see below), then official release
Creation Date 14/10/2019

Project Title Multi-scale Composite Material Selection Platform with a
Seamless Integration of Materials Models and
Multidisciplinary Design Framework
Project website www.composelector.net
Contact (Project Coordinator) Salim Belouettar salim.belouettar@list.lu
Call H2020-NMBP-23-2016
Topic Advancing the integration of Materials Modelling in Business
Processes to enhance effective industrial decision making and
increase competitiveness
EC Project Officer Anne F. de Baas
AUTHORS
Lead Author (Org) Fintan McGEE (LIST)

Contributing Authors (Org) Yoanne DIDRY (LIST)
Benoît OTJACQUES (LIST)
Thomas TAMISIER (LIST)
Reviewers (Org) Andrea BERTO (Granta),
Alessandro SEGATTO (Esteco)
Validation (Org) NA
Composelector Visual Analytics- D5.3 1

COMP
Polymer Composites
SELECTOR
ACRONYMS
- 3D: Three-dimensional
- DR: Dimensionality Reduction, any techniques by which a high dimensional data set is
reduced to a lower number of dimensions.
- PCA: Principal Component analysis, a popular Dimensionality Reduction technique that
maximise variable across output dimensions.
- SSL: Secure Sockets Layer, a standard technology of ensure encryption between server and
client


COMP
Polymer Composites
SELECTOR
TABLE OF CONTENT
Authors ......................................................................................................................................................... 1
Acronyms ..................................................................................................................................................... 2
Table of Content........................................................................................................................................... 3
List of figures ............................................................................................................................................... 4
List of tables ................................................................................................................................................. 4
Introduction .................................................................................................................................................. 5
Purpose of Covip ......................................................................................................................................... 5
Quickstart Prototype ................................................................................................................................... 5
Data Sources ................................................................................................................................................ 6
Architecture and Technologies .................................................................................................................. 6
Underlying Technologies ........................................................................................................................ 6
Architectural concepts ............................................................................................................................ 6
Configuring Covip .................................................................................................................................... 7
Loading Data............................................................................................................................................. 8
Security and Authenitcation ....................................................................................................................... 9
Keycloak integration ................................................................................................................................ 9
Covip Functionalities....................................................................................... Error! Bookmark not defined.
Introduction ............................................................................................................................................ 11
Navigation Bar: ....................................................................................................................................... 11
Overview Page ........................................................................................................................................ 11
Data Tags ................................................................................................................................................ 16
Summary Page ....................................................................................................................................... 16
Details Page ............................................................................................................................................ 17
Objective definition and highlighting ................................................................................................... 17
Matrix View ............................................................................................................................................. 19
Next Steps .................................................................................................................................................. 19
User Stories ............................................................................................................................................ 19
Advanced Covip ..................................................................................................................................... 20
Appendix A Apache webserver setup ..................................................................................................... 21
Apache File Config ................................................................................................................................. 21
Appendix B Application installation instructions ................................................................................... 22
Appendix C Servers ( INTERNAL to LIST ONLY) .................................................................................... 24
Development ........................................................................................................................................... 24
Production: ............................................................................................................................................. 24

COMP
Polymer Composites
SELECTOR
LIST OF FIGURES
Figure 1 Covip version 0 ..................................................................................................................................................... 5
Figure 2 architecture Overview .......................................................................................................................................... 7
Figure 3 settings on the keycloak admin console for the Composelector analytics application client . .......................... 10
Figure 4 navigation bar is visible on all views of the application. .................................................................................... 11
Figure 5 overview page featuring label selection buttons, a parallel coordinates display, and an analytics widget. ...... 12
Figure 6 axes sorted in ascending and descending order. ............................................................................................... 13
Figure 7 label section, with filtering options .................................................................................................................... 13
Figure 8 parallel coordinates configuration dialog. .......................................................................................................... 14
Figure 9 visualization for the results of dimensionality deduction .................................................................................. 15
Figure 10 result of Kmeans clustering , K=3 ..................................................................................................................... 15
Figure 11 tag selection dialog. .......................................................................................................................................... 16
Figure 12 boxplots of the summary view. ........................................................................................................................ 16
Figure 13 bar charts of the detail view ............................................................................................................................. 17
Figure 14 objective definition dialog box ......................................................................................................................... 18
Figure 15 visualization of objectives in the parallel coordinates. .................................................................................... 18
Figure 16 matrix or table view of data with objective highlighting. ................................................................................. 19
Figure 17 python3, node and the apache servers listening on their ports ...................................................................... 24

LIST OF TABLES
Table 1 Values for the server configuration JSON file. ......................................................... Error! Bookmark not defined.
Table 2 Column definitions for the schema definition file ................................................................................................. 9

COMP
Polymer Composites
SELECTOR
INTRODUCTION
The purpose of this document is to provide a detailed review of Covip, or Composelector Visual
Information Provider, the visualization app designed for the Composelector BDSS (Business Decision
Support System). This document explains all technical details needed to deploy the application, and
highlights future research and development directions for maturing the current status of the
software.
PURPOSE OF COVIP
Covip aims to provide an easy, customized, and updated access to the information managed and
generated through the Composelector BDSS to the end users according to their interests. Covip
provides visualization and analytics capabilities, allowing users to make the most of Composelector’s
outputs along a large number of simulation runs.
In close relation with Composelector management and all related work-packages, we have co-
designed Covip as a tailored user interface allows the user to inspect, sort and filter simulation run
data by the metrics associated with Key Performance Indicators, and visualize the objectives for
each metric. The application also supports analytics techniques such as the clustering of similar
items together, to help users identify commonalities in very large sets of data, as well as
dimensionality reduction allow the user to understand how attributes contribute to the variance of
the set of the selected data.
In its current state, Covip focuses on essential visual analysis for output data. Adaptation of the
application to handle the input of data will require specification of which systems to connect to, as
well as which data fields are available.

QUICKSTART PROTOTYPE
Initially, the application was designed using Angular 6, Keycloak, D3.js and was deployed on a
WildFly webserver production server. There was limited data available that displayed on a D3.js
parallel coordinates view, as seen below. It was also possible to compute the correlation matrix
between the four attributes. This module was integrated as a plugin in COMPOSELECTOR production
environment, as described in D5.2.

Figure 1: Covip version 0

COMP
Polymer Composites
SELECTOR
DATA SOURCES
The original dataset are generated by the simulation layer of the BDSS. Currently the data underlying
the visualisation app is stored in SQLite; in the future the apps will be connected via API to GRANTA
MI, the data storage platform used in Composelector. The data provided by this API, is accessible
through a MuPIF (Composelector interoperability platform) VPN access. The list of functionalities
provided is described in the deliverable D3.2. Covip should be further train on realistic scenarios by
using additional operational datasets.
ARCHITECTURE AND TECHNOLOGIES

In this section, we give an overview of the application technologies, describe how to configure the
application, and describe how to load data into the application.
Underlying Technologies
The base technologies used for the project are: Apache Web Server 2.4.18, Node.js (version
12.13.1), angularJS, SQLite 3.
The angularJS (version 1.2.32) application primarily uses D3.js (version 3.5.5) and vega-lite (version
3.3.0) for its visualization capabilities, and bootstrap (version 3.3.5) for visual styling (via CSS).
For specific version numbers see the package.json file associated with the server node.js application
and the libraries folder associated with the angularJS application
Architecture
The application is a web-based application, with a distinct software-processing component (a
python based server). The central component is a node JS server application, which serves an
AngularJS client to the user. It lies behind an apache server, which handles encryption, for security.
The node JS application server, also acts as middleware for all data processing calls (using the python
server) and data retrieval. It uses the Keycloak server to authenticate all calls (if the server is
enabled). Data is stored by the Node.js server in an SQLlite 3 database, writing to file on the server
machine. SQLite 3 does not require a separate database server. Each of the server applications can
be on a separate physical or virtual machine. In practice for the production environment, only the
Keycloak server resides on a different server.
If user authentication is enabled, the Node.js server contacts the Keycloak server to see if the user
is logged in, and if not they are redirected to the Keycloak server’s log in page. Once the user is
logged in, node JS serves the angularJS application to the user. From this stage forwarded every
message from the user’s machine is authenticated via the Keycloak server, whether it is to get
another view in the angular application, process data, or retrieve more data.


COMP
Polymer Composites
SELECTOR
SQLite3
HTTPS HTTP HTTP
User Apache Reverse Composelector analytics

SSL Proxy Composelector analytics Python Server
NodeJS (Data Processing)
application Server
Keycloak Authentication
Server

Figure 2: architecture overview
Configuring covip
The application is configured by a JSON file, and example of which can be seen below. The file is
only read on start-up and changes require a restart.
module.exports = {
port: 3000,
analyticsRoute: "python", // option are "OCPU" or "python"
dataFilePath : "/public/data/initialDataSet.csv", // location of the input data file , should be
specified from node application root folder
dataSchemaFilePath:"/public/data/initialDataSet.schema.csv", // location of the input data
schema file , should be specified from node application root folder
dbFolderPath : "/db",
DEBUG_MODE:true,
useKeycloakAuthentication:true,
keyCloakSecret:"e729e3e2-04f1-4688-a08a-2ad6b4935bf4"
};
The main parameters to run Covip are as follows.

Name Example Value Description
port 3000 The port on which the application will
receive inbound connections
analyticsRoute “python” The server to be used for analytics,
should only ever be python for

COMP
Polymer Composites
SELECTOR
Composelector
dataFilePath “/data/testDataSet.csv” The path of the server in which the sqlite
db should be stored
dataSchemaFilePath “/data/testDataSet.schema.csv” Input CSV file the file name (without the
path will be used as the table name in the
DB). Path Name must use forward slashes
and not backslashes
dbFolderPath “db” Path to the folder in which the SQLqlite 3
DB should be stored
DEBUG_MODE False If true much more data is output to
console
useKeycloakAuthentication false If true the server will attempt to
authenticate via a Keycloak server based
on the settings in the keycloak.json file
keyCloakSecret "e729e3e2-04f1-4688-a08a- Should match the value for the client on
2ad6b4935bf4" the Keycloak server ( if the access type is
confidential)
Table 1: values for the server configuration JSON file
Loading Data
The application uses an SQL lite database to store data.
At server start up, the application checks for the dataset with the same name as that specified in
the dataFilePath in the configuration file. If it does not exists it looks for the datafile and parses it
and loads it into the MySQL database. This datafile is a raw text file , in a CSV format ( “,” or “;”
separated) .
There should also be an associated schema CSV , which provides metadata about the original file ,
to support the application functionality.
We provide examples CSV file text (composelector Data), for a data file containing 7 columns (first
6 rows of data only):
RUN_ID;Material;Reinforcement_material;Reinforcement_level;Stiffness_kN_mm;Max_Princ_St
ress_MPa;Mass_Kg
Epoxy_1_Glass_1_vf_20;Epoxy_1;Glass_1;vf_20;2.756;314;2.377324102
Epoxy_1_Glass_2_vf_20;Epoxy_1;Glass_2;vf_20;2.787;313;2.374166965
Epoxy_1_Glass_3_vf_20;Epoxy_1;Glass_3;vf_20;3.121;315.1;2.367852691
Epoxy_1_Carbon_1_vf_20;Epoxy_1;Carbon_1;vf_20;7.265;396.9;2.191053023
Epoxy_1_Carbon_2_vf_20;Epoxy_1;Carbon_2;vf_20;7.047;394;2.165795928
Epoxy_1_Carbon_3_vf_20;Epoxy_1;Carbon_3;vf_20;7.438;424.8;2.162638791

The example corresponding schema file is as follows (full file text):
name;type;group;group_type;displayOnLoad
RUN_ID;character;Id;Id;FALSE
Material;factor;Material;Labels;FALSE
Reinforcement_material;factor;Material;Labels;FALSE
Reinforcement_level;factor;Material;Labels;FALSE

COMP
Polymer Composites
SELECTOR
Stiffness_kN_mm;numeric;Material Properties;Characteristics;TRUE
Max_Princ_Stress_MPa;numeric;Material Properties;Characteristics;TRUE
Mass_Kg; numeric;Material Properties;Characteristics;TRUE

The schema file has 6 columns and one row for each column of the main data CSV file. The schema
file name should be the same, as the data file name expect it should end with “.schema.csv” instead
of just “.csv”.

Name Example Value(s) Description
name My_important_variable The name of the variable (no spaces or
special characters allowed)
type character Character are stings of text, numeric are
numbers and factor are categorical
numeric
values
factor
group “Material Properties” A heading under which several variable
can be grouped
group_type Labels Indicated what a group of variable may
be used for. Labels are used for the input
Characteristics
controls, variables that are
Id characteristics can be used for PCA (if
they are numeric). Id indicates that the
fields is used as a unique ID for the row
displayOnLoad TRUE If true the corresponding column will be
automatically displayed when the user
FALSE
logs into the application. If false, it will be
hidden
Table 2: column definitions for the schema definition file
SECURITY AND AUTHENITCATION

The application is integrated into the Composelector Keycloak instance. Connections to the
application server are made via SSL, thanks to the use of the Apache 2 SSL reverse proxy. The
application connects by default using http, therefore to provide security, it lies behind an Apache 2
server acting as a reverse SSL proxy. When a user connects to the application website, the Apache
Reverse proxy SSL ensures that the user is connection over SSL by a simple redirect. If the user is
connecting over SSL the connection is decrypted and forwarded to port 3000 (or whichever port the
node server is listening on).
For more information, see section “Apache webserver ”.
Keycloak integration
The application requires the server configuration file to be configured correctly, as well as a
configuration file, generated by the Keycloak server instance that the application is connecting to .
COMP
Polymer Composites
SELECTOR
The keycloak file should have the file name keycloak.json and be stored in the server applications
root directory. Below is an example keycloak.json file:
{
"realm": "master",
"auth-server-url": "https://auth.composelector.eu/auth",
"ssl-required": "none",
"resource": "composelector-app",
"credentials": {
"secret": "XXXXXXXX-XXXX-XXXX-XXXXXX-XXXXXXXXXXX"
},
"confidential-port": 0
}
This file can be generated within the Keycloak administration console: navigate to the client created
for the application (“composelector -app” in the case of the production server) select the installation
tab, and select “Keycloak OIDC JSON” as the format. The secret contained in the JSON file should
be used as the keyCloakSecret attribute of the application configuration file.

Figure 3: settings of keycloak admin console
Secure ACCEss to Data

Separate instances of Covip can be run on a single server, with each instance on a different port,
COMP
Polymer Composites
SELECTOR
and configured to use a different path for Apache. Each path then requires proper Keycloak access
rights, thus restricting access for each dataset only to permitted users.
For registering a username and password on the Keycloak server, please contact the WP5.3 team.
COVIP FUNCTIONALITIES
Introduction
Once the user is logged in then they will be presented with a summary view of the data set in the
parallel coordinates accompanied by buttons to simplify filtering. The user can perform
dimensionality reduction on the data, as well as cluster the data and view individual values. They
can filter data and select data to see or distribution using a box plot under the summary view.
Individual values can be inspected in the detail view.

The navigation Bar:

The navigation bar allows users to select which application view they would like to see (overview
Summary or Detail). It includes a highlight text box. This allows individual records to be highlighted
by selecting their identifier, and assists in this by providing a drop down menu.
The blue data bar shows the number of record loaded as well as the number of records currently
selected, when the user interacts with the data set.
The theme button allows the user to change the colouring on-screen to better view the data
depending on ambient lighting conditions.
The logout button is used to log out of the application via the keycloak server. It is only displayed if
keycloak authentication is enabled.

Figure 4: navigation bar, visible on all views of Covip

Overview Page
The overview page is the primary view of the application. It contains a parallel coordinates display
for visualizing the numeric data, and a table of buttons to filter by categorical data. A widget on the
bottom left of the view allows user to analyse the data using clustering or dimensionality reduction.


COMP
Polymer Composites
SELECTOR

Figure 5: Overview page showing label selection buttons,
parallel coordinates display, 1 analytics widget

Additionally, the user can tag data items of interest, and colour the parallel coordinates based on
attribute values, as well as export the data.
THE PARALLEL COORDINATES VISUALIZATION
Parallel coordinates have been selected as the primary visualization approach, as it is a technique
that allows the display of a large number of records (many thousands or even 10s of thousands),
and provides the user the ability to explore a data set, and to rapidly filter the data down to specific
items of interest. By default, the view displays the numeric attributes of the data set, however the
categorical attributes can be added if so desired.
The parallel coordinates display contains a set of axes each representing an attribute in the input
dataset. The individual data items in the input dataset are represented by lines which intersect each
axis. The point at which a line intersects an axis, indicates the value of the axis’ attribute for that
data row. While visually the parallel coordinates may be visually similar to a line chart, it is very
different in functionality and level of interactivity. Each axis is independent and has its own range
(as each input attribute may have its own input range). The individual axes can also be reordered
clicking on the axis title and dragging it to the desired position. This allows for easier visual
comparison of two attributes by placing them side by side, making it easier to see correlations.
The data within the axes are all initially sorted in descending order, however double clicking the title
of the axis, the data is sorted in the opposite order. The ability to drag and reorder the axes is an
important feature as it allows a user to visually compare the values of attributes directly side by
side. The range of each axis is automatically determined based on the range of the underlying
attribute. However, if the user so desires, perhaps due to the underlying data have a related range,
they can share the same scale across multiple axes , using the Share scale in the parallel coordinates
COMP
Polymer Composites
SELECTOR
configuration widget .
It is possible to select a set of data rows using a technique called
brushing. The using clicks and drags vertically along an axis, drawing a
box which specify a range of selected value (an example can be seen in
figure). This results in the selected values being coloured black. Selected
items can be filtered out of the data set, or kept with every other item
being filtered out. Brushes can be applied to multiple axes to select rows
based on multiple ranges of attributes. The brush predicate indicates
how the row selections will work between axes. If the predicate is “AND”
only rows where each column contains a match are selected. If the brush
is “OR” rows where any columns contain a match are selected.
In the case where a point of interest on an axis is over drawn, the user
can distort the scale around this using an fisheye lens effect. To do this
the user brushes the area of interest on the axis and then double click.

Figure 1: axes sorted in ascending and descending order →

LABEL SELECTION
Much of the input data is categorical, such as the user
can specify which records are selected using the label
selection buttons (as seen in figure X). There are 3 colour
buttons. Dark blue means the label is present and the
dataset is visible in the parallel coordinates. Grey means
that not data items is the current data set. Row items
with matching labels can be selected by clicking on a dark
blue button. The button will become light blue, indicating
that this is a selected label and the corresponding data
rows will be selected. Data rows can be filtered using the
keep selected and removed selected buttons. The
predicate functionality works as for the parallel
coordinates brushes. The buttons are linked to the
parallel coordinates, when rows are filtered out in the
parallel coordinates widget, the buttons also are
affected.
Figure 2: label section

with filtering options
PARALLEL COORDINATE CONFIGURATION.

The parallel coordinates can be configured using the Parallel Coordinates Tab of the sliding dialog
at the bottom left of screen. Colour can be set based on a colour scale for values associate with

COMP
Polymer Composites
SELECTOR
specific columns. Palettes can be selected to map directly from values or to map from deciles of the
values (groups in 10 percent ranges), to give a clearer view of patterns and distributions. Categorical
values such as labels and clustering’s can be coloured by set based palettes to more clearly
distinguish groups perceptually. It is worth noting that if there are more than approximately 12
different categories, it is difficult to defined colours that a perceptually far apart (perceptually close
colours may cause users to consider a similarity between data items that does not exists). The
opacity of the rows being drawn can also be specified (useful when many rows are overdrawn).
The user can control the predicates for the brush used for the parallel coordinates, similar to the
labels. This dialog also allows the user to specify that a set of axes should share the same scales.

Figure 8: configuration dialog for parallel coordinates

DIMENSIONALITY REDUCTION (DR)
As there may be a large number of numeric values included in in an analysis it is important to
understand which ones provide the most useful information for the users. Data columns that have
a strong impact on the overall variance of the data set are more interesting than a data column that
has a limited range of values. The application currently offers Principal Component Analysis (PCA) a
form of Dimensionality Reduction (DR) that creates axes (or components) in the data space which
capture the most variance. The goal of DR functionality is to visualize the data points in a lower
number of dimension, in this particular case 2 dimensions. Usually these dimensions are displayed
in a scatterplot as its x and y axes, using these created components as a coordinate system.
PCA produces a set of dimensions or axes, (equivalent to the number of variables) and 2 of these
can be selected for the visualizations. Each dimension is characterized by the amount of variance it
captures, with the first capturing the most, the second capturing the next most etc. In figure X the
dimensions are visualized as horizontal bars above the scatter plots, indicating the variance
captured by the dimension. Clicking the bars changes the dimensions, which are displayed. The left
scatter plot shows a projection of the individual components. The right one, a projection of the
variable in the same space. The bar charts on the right show the contributions for each variable in
the current pair of selected dimensions. The contribution of a variable towards each component
may help a user determine which variables are interesting for display in the parallel coordinates.
Additionally, the scatterplots may provide another perspective on the data from the parallel
coordinates. This may help users see more clearly the relationships between the data items and
between the variables.

COMP
Polymer Composites
SELECTOR

Figure 9: visualization of the results from a dimensionality reduction

CLUSTERING
The application currently offers K-means Clustering. Clustering allows the user to see which sets of
data group together based on some similarity in attributes. The application allows the user to specify
the desired variables and number of clusters via a popup dialog box. Once the clustering is complete,
it is automatically added to the parallel coordinates view, and it is possible to recolour the rows
based on cluster as seen in Figure X. When there are a large number of rows, clustering can help
determine sets (or clusters) of data items which are similar, allowing large numbers of rows to be
quickly filtered out or focused on. Colour by cluster helps discern patterns in the data.

Figure 10: result of a K-means clustering with K=3

COMP
Polymer Composites
SELECTOR
Data Tags
Data can be tagged for reference later using the tag tab. Data tags are saved to the database so
persist between sessions. Rows can be selected based on tags, so this is a method by which analysis
can continue across multiple sessions.

Figure 11: tag selection dialog
Summary Page
This page provides an overview of the currently selected data. In the current version, Covip shows
a set of box plots that summarize the data. The choice of formats is to be extended in further
versions of Covip to address specifically operational needs of the end users.
The data is linked to the paralleled coordinates, so if data is brushed it only shows boxplots for that
data. Part of the purpose of this view is to demonstrate how vega-lite widgets (such as the boxplot)
can be integrated into the application. However, the mouse over the charts provides additional data
describing the limits of the quartiles etc., of the boxplot, as seen in figure

Figure 12: boxplots of the summary view


COMP
Polymer Composites
SELECTOR
Details Page
This page provides a detailed breakdown of the attributes for all currently selected data.
Currently this page simply shows the individual numeric values for each row in a bar chart (one chart
for each attribute). The charts are sortable by values and are also linked to the selection in the
parallel coordinates. In future, this view may be used to show details about specifically selected
inputs, but currently as we have only 3 values per line, there is not much to show here. One option
may be the use of multiple vega-lite bar charts to show the rank of a row item for each attribute.

Figure 3: bar charts of the detail view

Objective definition and highlighting

On both the matrix view and the parallel coordinates views it is possible to highlight when objectives
have been exceeded (green highlight), or in cases when it has completely failed (orange highlight).
Objectives can be defined in the objective specification dialog box, which can be accessed by clicking
on the “Define objectives” button, in either the matrix views or the parallel coordinates view.

COMP
Polymer Composites
SELECTOR
Figure 5: Objective definition dialog box
The “Default all” button creates default thresholds for exceeding and failing objectives. These
default values represent the top quartile of the data for “Objective Exceeded” and the bottom
quartile for “Objective Failed”. Objectives can also be manually specified by selecting a value from
the “variable drop down” down and adding the specified thresholds.
Once the user has clicked on “OK”, they can click on the “parallel coord” checkbox, besides the
objective definition button to show the objectives within the parallel coordinates visualization, as
seen in figure Figure .

Figure 6: Visualization of objectives in the parallel coordinates.

COMP
Polymer Composites
SELECTOR
Matrix View
The matrix view provides a text-based list of the data values. It is a simple grid. Like all other views
it respects the brushing and filtering of the parallel coordinates view. It allows the user to inspect
the data in a simple table format. The matrix view works best when used with objective highlighting,
as seen in Figure .

Figure 4: matrix or table view of data highlighting objectives
NEXT STEPS
Two sets of tasks will be beneficial in order to advance Covip towards a full-fledged tested user
interface. First, populating the test database and complementing it with user story scenarios for
using Composelector will be a base for the functional offer of the application. Second, flexible
software deployment will increase the user friendliness and the responsiveness of the
Composelector BDSS as a whole.
User Stories
Covip runs currently on a single relevant use case released by the consortium. In the framework of
the project, 2 more operational use cases could be considered, along with their rich datasets.
Considering concrete use case will allow developing specific workflows for answering user needs.
As for any advanced piece of visualisation software, we should engage in a fruitful interaction with
end users about their needs and expectations. A definition of multiple user stories would also be
very useful.
New user stories will serve to populate the list of objectives, metrics and KPIs, which will be a base
for refining and extending the analytics and visualisation functionalities of Covip.
Avdvanced Software releases

First, the integration with any all systems and databases related to Composelector is necessary to
offer to the end user a stable and coherent interface to the DMSS.

COMP
Polymer Composites
SELECTOR
Moreover, the design choice decided for the current application is to run Covip through a Web
browser. With a view to flawlessly operating Covip on any modern mobile device, such as Ipad,
Iphone or Android devices, we propose to reshape Covip using the Ionic Framework.
Indeed, the Ionic Framework allows building cross-platform application, and most of all offers the
official integration of Angular, on top of which we have implemented Covip. Thanks to this
architecture, the backend operations of Covip are ready for this migration towards mobile
technologies.


COMP
Polymer Composites
SELECTOR
APPENDIX A APACHE WEBSERVER SETUP

The Apache webserver handles inbound SSL connections as well as mapping an instance of the data
visualization application to a specific path on the server. To ensure security all connections to the
server host the applications are SSL encrypted.
This requires configuration of the apache server to have the necessary certificates and to redirect
inbound https traffic to the node http application. As part of the composelector project, Robocert1
is used to provide certificates.
If apache is not installed, it should be with
sudo apt install apache2-bin

The service can be restarted with
sudo service apache2 restart

The server needs to be set up to redirect SSL connections along the right path to the node
application
This is done by editing the virtual hosts config file with following command
sudo nano /etc/apache2/sites-available/000-default.conf

Additionally some extra modules will have to be enabled. Use the following commands to do so:
sudo a2enmod ssl
sudo a2enmod proxy
sudo a2enmod proxy_http

The virtual host needs to be configured as an SSL proxy, and should redirect all http connections on
port 80 to be HTTPS connections on port 443. An example virtual host configuration that does this
can be seen below.

Apache File Config

GNU nano 2.9.3
/etc/apache2/sites-available/000-default.conf
<VirtualHost *:80>
ServerName app.composelector.eu
Redirect / https://app.composelector.eu
</VirtualHost>
<VirtualHost *:443>
# The ServerName directive sets the request scheme, hostname and port that
# the server uses to identify itself. This is used when creating
# redirection URLs. In the context of virtual hosts, the ServerName
# specifies what hostname must appear in the request's Host: header to
# match this virtual host. For the default virtual host (this file) this
# value is not decisive as it is used as a last resort host regardless.
# However, you must set it for any further virtual host explicitly.
ServerName app.composelector.eu
1
https://certbot.eff.org/lets-encrypt/ubuntubionic-apache

COMP
Polymer Composites
SELECTOR
ServerAdmin fintan.mcgee@list.lu
#DocumentRoot /var/www/html
# Available loglevels: trace8, ..., trace1, debug, info, notice, warn,

# error, crit, alert, emerg.
# It is also possible to configure the loglevel for particular
# modules, e.g.
#LogLevel info ssl:warn
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined
# For most configuration files from conf-available/, which are

# enabled or disabled at a global level, it is possible to
# include a line for only one particular virtual host. For example the
# following line enables the CGI configuration for this host only
# after it has been globally disabled with "a2disconf".
#Include conf-available/serve-cgi-bin.conf
SSLProxyEngine on
RedirectMatch 308 "^/$" "https://app.composelector.eu/composelector-app/"

RedirectMatch 308 "^/composelector-app"
"https://app.composelector.eu/composelector-app/"
RedirectMatch 308 "^((?:(?!/composelector-app)).*)$"
"https://app.composelector.eu/composelector-app$1"
ProxyPreserveHost On
RequestHeader set X-Forwarded-Proto "https"
RequestHeader set X-Forwarded-Port "443"
ProxyPass "/composelector-app/" "http://localhost:3000/"
ProxyPassReverse "/composelector-app/" "http://localhost:3000/"
SSLCertificateFile /etc/letsencrypt/live/app.composelector.eu/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/app.composelector.eu/privkey.pem
Include /etc/letsencrypt/options-ssl-apache.conf
</VirtualHost>
# vim: syntax=apache ts=4 sw=4 sts=4 sr noet

APPENDIX B APPLICATION INSTALLATION INSTRUCTIONS

This section describes how to set up the application on a server. We assume an up to date Ubuntu
Linux installation:
This application uses Node version 11
To install this version (assuming no previous version is installed):
curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash -

sudo apt-get install -y nodejs

The application stores persistent data using sqlite.
To install sqlite:
sudo apt-get install sqlite

Both the server application and the python analytics server need to be cloned from the central git
repository, using the following commands in the home directory of the logged in user:
git clone git@git.list.lu:composelector-dev/composelector-python-server.git
git clone git@git.list.lu:composelector-dev/composelector-server-app.git

COMP
Polymer Composites
SELECTOR

This requires access rights to the LIST Gitlab instance and a correct SSH key associated with the
logged in user. If SSH keys are an issue zip files can be downloaded from the Gitlab server
(https://git.list.lu, login required)
Once the server app had been cloned, the public submodule (containing the application pages to be
served) must be initialised. This is in effect cloning the client application.
cd ~/composelector-server-app/public
git submodule init
git submodule update
git checkout master
If there are issues initializing the submodule the composelector-client-app project can be
downloaded manually and copied into the public folder.
Dependencies are managed using Node package manager that is installed along with Node.
For the client application:
cd ~/composelector-server-app/public
npm install

For the server application:
cd ~/composelector-server-app/
npm install

The start script may need to be made executable, if so use the following command
chmod +x ./start_node_server.sh

The required libraries need to be installed for the python server, this is done using PIP which may
also need to be installed:
cd ~/composelector-python-server
sudo apt install python3-pip
pip3 install flask
pip3 install pandas==0.24.2
pip3 install sklearn
pip3 install matplotlib

the start script may need to be made executable, if so use the following command
chmod +x ./start_python_server.sh

To start the python server:
cd ~/composelector-python-server

Both the node application and the python application output all console and error data to a log file
COMP
Polymer Composites
SELECTOR
To inspect it for the server( or even just see if the server is)
nano ~/composelector-server-app/server_console_output.log
For the python server:
nano ~/composelector-python-server/python_server.log

Finally, to ensure that each application is running and listening you can see if it is listening at its
specified port:
sudo lsof -i -P -n | grep LISTEN

Figure 17: The python3 server, node server and the apache server listening on ports 5000, 3000 , 443
APPENDIX C SERVERS ( INTERNAL TO LIST ONLY)
Development
https://composelector.list.lu/app/composelector-app/
composelector.list.lu
user = ubuntu
password = composelector2018

Production:
https://app.composelector.eu/composelector-app/
app.composelector.eu
Access via SSH, contact "Alessandro Segatto" segatto@esteco.com for him to set it up
My account is mcgee@app.composelector.eu. You will need to have your own key generated.


Attachment 0-28

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Attachment 0-28

Uploaded by

Copyright:

Available Formats

Ref.

COMPOSELECTOR VISUAL INFORMATION

Lead Author (Org) Fintan McGEE (LIST)

Composelector Visual Analytics- D5.3 1

Composelector Visual Analytics- D5.3 2

Composelector Visual Analytics- D5.3 3

Composelector Visual Analytics- D5.3 4

Composelector Visual Analytics- D5.3 5

ARCHITECTURE AND TECHNOLOGIES

Composelector Visual Analytics- D5.3 6

HTTPS HTTP HTTP

User Apache Reverse Composelector analytics

The main parameters to run Covip are as follows.

Composelector Visual Analytics- D5.3 7

Table 1: values for the server configuration JSON file

Composelector Visual Analytics- D5.3 8

Table 2: column definitions for the schema definition file

SECURITY AND AUTHENITCATION

Secure ACCEss to Data

The navigation Bar:

Composelector Visual Analytics- D5.3 11

Figure 2: label section

PARALLEL COORDINATE CONFIGURATION.

Composelector Visual Analytics- D5.3 13

Composelector Visual Analytics- D5.3 14

Composelector Visual Analytics- D5.3 15

Composelector Visual Analytics- D5.3 16

Objective definition and highlighting

Composelector Visual Analytics- D5.3 17

Figure 5: Objective definition dialog box

Composelector Visual Analytics- D5.3 18

Avdvanced Software releases

Composelector Visual Analytics- D5.3 19

Composelector Visual Analytics- D5.3 20

APPENDIX A APACHE WEBSERVER SETUP

Apache File Config

Composelector Visual Analytics- D5.3 21

# Available loglevels: trace8, ..., trace1, debug, info, notice, warn,

# For most configuration files from conf-available/, which are

RedirectMatch 308 "^/$" "https://app.composelector.eu/composelector-app/"

APPENDIX B APPLICATION INSTALLATION INSTRUCTIONS

curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash -

Composelector Visual Analytics- D5.3 22

For the python server:

APPENDIX C SERVERS ( INTERNAL TO LIST ONLY)

You might also like