Graph processing and visualization in Cuba?

horia.bradau · May 21, 2018, 3:53pm

We need to visualize graphs extracted from our Cuba application.
Is there any support for integrating graph visualization libraries (such as KeyLines, D3 etc)?
What is the best approach to do this?

Thank you!

mario · May 21, 2018, 4:48pm

Hi,

There you go:

Bye
Mario

horia.bradau · May 21, 2018, 4:59pm

I am aware of Cuba’s Chart and Maps add-on.
My question is in regards to graph components, as in vertices and edges, graph traversals etc…
D3 and KeyLines are good examples.

I need to interface my Cuba application with graph processing libraries.

Pinyazhin · June 19, 2018, 12:02pm

Hi!

You can add any JS library and wrap it by Vaadin component. See documentation how to do that.
I’ve created a simple project that uses D3.js. It sends JSON with data to the client side and builds a small diagram about the progress of tasks.

You should add all JS scripts that you need and CSS styles like in code below:

@JavaScript({"d3component-connector.js", "vaadin://d3.min.js"})
@StyleSheet("vaadin://diagram.css")
public class D3Component extends AbstractJavaScriptComponent {

Then in our JS connector we can use D3.js:

com_company_simpled3_web_toolkit_ui_d3component_D3Component = function() {
    var connector = this;
    var element = connector.getElement();
    var dataJson = [];

    connector.onStateChange = function(){
        dataJson = JSON.parse(connector.getState().dataJson);
        drawDiagram(element);
    };

    function drawDiagram(element) {
        if (dataJson.length === 0) {
            return;
        }

        d3.select(element).selectAll('div.item').data(dataJson).enter()
            .append('div').attr('class', 'item')
            .append('div').attr('class', 'data').append('span');

        d3.select(element).selectAll('div.item').data(dataJson)
            .select('div').style('width', function (d) { return (d.progress * 3) + 'px';})
            .select('span').text(function(d){return d.progress;});

        d3.select(element).selectAll('div.item').data(dataJson)
            .append('div').attr('class', 'name')
                          .text(function (d) {return d.name;});

        d3.select(element).selectAll('div.item').data(dataJson).exit().remove();
    }
};

And finally we add our component to the layout. Task class is a POJO.

@Inject
private VBoxLayout vbox;

@Override
public void init(Map<String, Object> params) {
    List<Task> tasks = Arrays.asList(
            new Task("Task1", 14),
            new Task("Task2", 26),
            new Task("Task3", 82),
            new Task("Task4", 57));

    D3Component d3Component = new D3Component();
    d3Component.setDataJson(new Gson().toJson(tasks));

    Layout layout = vbox.unwrap(Layout.class);
    layout.addComponent(d3Component);
}

And we get the following result:

Attached project: simple-d3.zip (158.0 KB)

sanchit.bhavsar · March 25, 2019, 10:58am

Hi Pinyazhin,

I am trying to add a simple example with google table query js library similar to the process as mentioned in your comment.

I edited JS connector and added the JS script to the component class but I don’t see any results as expected. Do I have to make changes in the other files as well?
JS Connector:

com_company_simpled3_web_toolkit_ui_d3component_D3Component = function() {
    var connector = this;
    var element = connector.getElement();
    var dataJson = [];
    var dataSourceUrl = 'https://spreadsheets.google.com/tq?key=rh_6pF1K_XsruwVr_doofvw&pub=1';
    var query, options, container;

    connector.onStateChange = function(){
        //dataJson = JSON.parse(connector.getState().dataJson);
        //drawDiagram(element);
        init();
    };

    function init() {
            query = new google.visualization.Query(dataSourceUrl);
            container = document.getElementById("table");
            options = {'pageSize': 5};
            sendAndDraw();
      }

    function sendAndDraw() {
            query.abort();
            var tableQueryWrapper = new TableQueryWrapper(query, container, options);
            tableQueryWrapper.sendAndDraw();

    }};

Regards,
Sanchit

Pinyazhin · March 25, 2019, 2:54pm

HI!

Do you see exceptions in DevTools of your browser or in Tomcat logs? Make sure that you use all necessary js files.

sanchit.bhavsar · March 25, 2019, 3:53pm

I do see an exception:

SEVERE: Error sending state change eventscom.google.gwt.event.shared.UmbrellaException: Exception caught: (ReferenceError) : google is not defined

What do I have to add and where?

Thanks.

Regards,
Sanchit

Pinyazhin · March 26, 2019, 5:23am

It seems that the Google library is not imported. DId you add js files to the vaddin folder in web module? If it is possible could you attach a sample project where the problem is reproduced?

sanchit.bhavsar · March 26, 2019, 2:25pm

@Pinyazhin I did add the js files to the ui toolkit web module but do I have to add dependencies in the build.gradle web module?

sample.tar.gz (396.1 KB)

Pinyazhin · March 27, 2019, 7:30am

No, you shouldn’t add any dependencies to the build.gradle. Following the example in google docs you need to add loader.js to your OrgChartComponent:

@JavaScript({
        "vaadin://tablequerywrapper.js",
        "https://www.gstatic.com/charts/loader.js",
        "analytics-connector.js"
})

And you can load it from connector.onStateChange:

connector.onStateChange = function(){
    google.charts.load('current', {'packages' : ['table']});
    google.charts.setOnLoadCallback(init);
};

I reworked your sample project with above code: orgchart.zip (42.9 KB)

sanchit.bhavsar · March 28, 2019, 8:16am

@Pinyazhin Thanks I will give it a try!

sanchit.bhavsar · March 29, 2019, 10:16am

@Pinyazhin It worked! Thank you.

I was just wondering If I can do the same by overriding a component action. for example, the chart should appear on a button click action.
It would be a great help if you could provide me an example.

Sanchit.

Pinyazhin · March 29, 2019, 11:39am

You can just add your component to the layout by click on a button:

<button id="showChartBtn" caption="Show chart" invoke="showChart"/>

@Inject
private ComponentsFactory factory;

public void showChart() {
    MyComponent component = (MyComponent) factory.createComponent(MyComponent.class);
    add(component);
}

Or for framework v7:

<button id="showBtn" caption="Show"/>

@Inject
private UiComponents uiComponents;

@Subscribe("showBtn")
private void onShowBtnClick(Button.ClickEvent event) {
    MyComponent component = uiComponents.create(MyComponent.class);
    getWindow().add(component);
}

sanchit.bhavsar · March 29, 2019, 2:42pm

@Pinyazhin I have a really annoying error when I just define a variable in the JS connector from Google API.

var formatter = new google.visualization.NumberFormat({prefix: ‘$’, negativeColor: ‘red’, negativeParens: true});

Exception Trace:

com.vaadin.client.communication.MessageHandler
SEVERE: Error sending state change eventscom.google.gwt.event.shared.UmbrellaException: Exception caught: (TypeError) : Cannot read property 'NumberFormat' of undefined
	at Unknown.Ig(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.Mg(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.Sg(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.ry(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.new uy(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.Rx(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.VOb(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.hPb(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.AUc(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.uUc(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.JUc(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.IGc(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown._Hc(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.cIc(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.$Mc(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.mNc(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.eval(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.qi(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.ti(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.eval(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
Caused by: com.google.gwt.core.client.JavaScriptException: (TypeError) : Cannot read property 'NumberFormat' of undefined
	at Unknown.Zqb(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.$x(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.Rx(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.VOb(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.hPb(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.AUc(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.uUc(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.JUc(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.IGc(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown._Hc(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.cIc(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.$Mc(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.mNc(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.eval(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.qi(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.ti(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)
	at Unknown.eval(com.haulmont.cuba.web.toolkit.ui.WidgetSet-0.js)

Could you please check what is causing this issue.

Pinyazhin · April 1, 2019, 6:17am

This is concerning the library you use. You can check Google documentation in order to know which dependency you need to add for:

google.visualization.NumberFormat

vimleshjaipur · June 30, 2020, 2:51pm

Hi,
i am trying to use the simple-d3 project provided here. I am using cuba platform version 7.2.5. As the program do not run in this platform and as AbstractWindow is shown deprecated. I have made few changes as follows;

Screen is extended using Screen in place of AbstractWindow
In controller, instead of using function public void init(Map<String, Object> params) have used regular public void onInit(InitEvent event) function.

I am getting an error that “no init function is defined and define one of following giving four options” though com_company_trial3d1_web_toolkit_ui_d3component_D3Component is already defined in js file. Though rest of the code and files are same as provided in your project.
Please guide. Thanks

Pinyazhin · July 2, 2020, 6:16am

Hi,
possibly the previous version of your js connector is cached in the browser. You can try to open your app in private / incognito mode to check. Also, the connector function name:

com_company_trial3d1_web_toolkit_ui_d3component_D3Component

should be the same as FQN of D3Component class:

com.company.trial3d1.web.toolkit.ui.d3component.D3Component

vimleshjaipur · July 3, 2020, 2:10am

Thanks Roman for your reply,
I have tried as suggested by you but the error persists. I am attaching the project. Please have a look & guide.
Thanks
trial3d1.zip (604.1 KB)

Pinyazhin · July 3, 2020, 6:04am

Take a look at D3Component class. In @JavaScript you have:

d3component-connector.js

but it should be:

D3Component-connector.js

Also, in D3Component-connector.js replace: getJson with dataJson. It should be like this:

dataJson = JSON.parse(connector.getState().dataJson);

Because component state does not have getJson field. If task names are misaligned, try to replace position: fixed; with position: absolute; in “.name” selector.

vimleshjaipur · July 3, 2020, 2:36pm

Thanks Roman,
@Javascript connector Name has solved the problem.
Thanks again.