In the first part of this post, we talked about a PAL algorithm that works with some relations represented in graphs. This is the Link Prediction algorithm. Now, we’re going to visualize the results. This visualization is presented through a Web interface, combining the SAP UI5 library and D3js in order to use a more “advanced” representation.
You may want to read the first part if you want to have the SQLScript procedure, and the result set that is going to be represented: first part.
The creation of the project
In the SAP HANA Development perspective, with the contextual menu, we need to create a new SAP UI5 project.
You can read more information about how to use SAP UI5 in the SAP HANA Studio in this link.
Then, we need to share it in the server, so we can visualize it in the SAP HANA XS server. Once you deployed that files to the server, this won't be an application till you put some files.
These are the required files that you need to put in the same directory structure (the .xsapp file is an empty file):
.xsaccess
{
"exposed" : true,
"authentication" : [ { "method" : "Basic" } ]
}
.xsapp
In this case, this is my directory structur. I can see the web page in http://<host>:80<instance>/mexbalia/buyers/WebContent/index.html
It may change on your own project.
The customization and visualization
In the index.html file, we need to add some sap-ui-libs:
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons, sap.ui.ux3"
data-sap-ui-theme="sap_bluecrystal">
</script>
The sap-ui.core.js is usually located in <host>:80<instance>/sap/ui5/1/resources/sap-ui-core.js, do the math.
To complete the preparation, put a copy of D3 in your server and add a script tag to reference it in the index.html file.
<script type="text/javascript" src='js/d3.min.js'></script>
If you want to put a header in the webpage, we can use the next code:
<script type="text/javascript">
var oAppHeader = new sap.ui.commons.ApplicationHeader("appHeader");
oAppHeader.setLogoSrc("http://global.sap.com/global/images/SAPLogo.gif");
oAppHeader.setLogoText("SAP - Link Prediction PoC");
oAppHeader.setDisplayWelcome(true);
oAppHeader.setUserName("Carlos Mendez");
oAppHeader.setDisplayLogoff(true);
oAppHeader.placeAt("header");
</script>
And, of course, you need a DIV where to put that component with ID "header", inside the BODY tag.
It starts looking like this:
For the representation of the original data, i.e., the relations between all the buyers and sellers, we will use a dependency wheel. There is a library builded in D3, and you can read about it in this link. The dependency wheel will be located in a SAP UI5 HTML panel, inside index.html.
You can expose some tables or views using the generation of WebServices with OData; and you can find a lot of related information in the SAP HANA documentation.
This is the file services/buyers.xsodata
service namespace "mexbalia.hana.services"{
"CARLOS"."BUYERS" as "BUYERS" keys generate local "Id";
}
And, this is the BUYERS view
select
id_from "BUYER",
id_to "SELLER",
month_in_year "MONTH",
count(*) as TOT
from "CARLOS"."LOG_TRANS"
where "TYPE" = 'B' and MONTH_IN_YEAR = 9
group by id_from, id_to, MONTH_IN_YEAR
Genrating that webservice, the Dependency Wheel of the september transactions looks like the next figure:
That dependency wheel allows you to put the pointer in one vertex, and just its relations are going to be marked. For an example, you can see the next figure:
In a traditional graph, the same original data would look like this:
I don't personally think that this is a good way to represent suh a big graph. Maybe one with just a few relations, but this is not the case.
Actually, we do have a small graph to be represented. This is the Link Prediction results' graph. If we make a new view from the PAL_LP_RESULT_TBL table (running the algorithm for september also), and we select only those predictions that has more than 40% probability to occur, we will have a very small graph.
PREDICTION view
select
NODE1 "BUYER",
NODE2 "SELLER",
count(*) as TOT
from
PAL_LP_RESULT_TBL
where
SCORE >= 0.4
group by
NODE1, NODE2
It's just necessary to expose the new view with a web service, just like we did before.
With that exposure, this is the visualization of the Link Prediction algorithm results:
So, like you can see, we have presented a complete cycle of a HANA PAL algorithm application. We prepared the data, the algorithm, and finally saw the results. This is just an example. I would like to read more about your own applications.
You can download all the necessary code, and files, from the github repository.
- SAP Managed Tags:
