Thanks and some suggestions

[Mehmet YALÇINKAYA]

Hi,

First I want to appreciate to the developer(s) for the effort of Popoto.js, it is quite amazing.

I am using Popoto to visualize some datasets for my company. During my experience, I needed couple of implementations which I thought it would improve the usability of Popoto during development.

I would like to give some suggestions for further releases of Popoto.

1) A search box would be really nice and increase the usability during the searching and querying of specific information, especially if there are hundreds/thousands of nodes. I am aware about the development of a search box would be quite challenging. However, although the variety of development platform (Ruby-based), there is an example published in here by using VisualSearch.js. So it may be a start point for the further improvements.

2) During my visualization, I tried to use some pictures and icons to represent nodes. Some of the nodes have many sub-nodes, and during the visualization, some of nodes overcoming on each other. Sorry for my lack of computing knowledge but I couldn't find how to change the node size for visualization (may be there is in the JS files). May be a small CSS variable can be defined to arrange the node size for the ease of use.

My implementation is still going on and it is a really good experience so far. I hope the new releases will be more and more usable for visualization purposes.

Thanks and best regards,

Mehmet

[Popotojs alpha]

Hi Mehmet,

Thanks a lot for your feedback, it is very valuable to me to get feedback from users.

1) The search box is a feature I plan to add in future releases, a lot of user asked me to add this feature in Popoto.js and Neo4j already has all the required API to implement this.

VisualSearch.js is a good example on the possible interaction but I'm still looking on how to integrate it nicely in the query viewer or Cypher query editor.

2) I'm sorry, the documentation on the web site is not yet complete.

I think I answered your question on stackoverflow.

The size of nodes can be customized independently for each node types, two function can be used to customize it in the node provider configuration:

"getImageWidth": function (node) {
    return 50;
},

"getImageHeight": function (node) {
    return 50;
},

Let me know if you need any help or more info for your implementation and do not esitate to send me your feedback or feature request on Popoto.js.

Thanks,

Frederic

[Mehmet YALÇINKAYA]

Hi Frederic,

First, thank you very much again for the reply of my previous question. I use Popoto for a few months. It has been quite good and met our expectations. I appreciate for this valuable development.

If possible, I would like to learn what will be the new features of the further releases; and is there any estimated time for natural language-based search box? I am sure it will promote this development a lot.

I have a question about the query based on the predefined constraints. In this example, I think the constraints are only defined for "Person" node. It is specified in the sample html file like the following:

"Person": {

            "returnAttributes": ["name", "born"],

            "constraintAttribute": "name",

            // Return a predefined constraint that can be edited in the page.

            "getPredefinedConstraints": function (node) {

                return personPredefinedConstraints;

            },

            ....

 

In my graph I would like to apply that query function for more than one node. For example I have 2 nodes: Contact (has "name" attribute) and Delivery (has "address" attribute)

I succeeded it by defining two functions for each nodes. However, I also had to put two search box forms with different input id (like constraint1 and constraint2). And I had to make the queries in the associated search boxes.

Is there a way to make queries which are defined for multiple nodes in one search box? For example searching Contact-name and/or Delivery-adress in the same search box?

Thanks and Best Regards,

Mehmet

[Popotojs alpha]

Hi Mehmet,

I'm currently working on the 1.0 official release which I plan for early October. It won't contain any new feature compared to current version except some clean up and enhancements.

I think the natural language-based search box will be the next feature I'll work on and could be ready for mid or end October.

For your question on the predefined constrains I tried to answer it on stackoverflow with examples:

http://stackoverflow.com/questions/32225678/neo4jpopotojs-filter-graph-based-on-predefined-constraints

Let me know if it's not clear or if you need more info.

Frederic

[Mehmet YALÇINKAYA]

Hi again Frederic,

While I am using Popoto js, I face new challenges and experience new solutions.. I am also using Popoto for my phd research project in my university. For my research, I will prepare an integrated visualization platform. Here is my problem definition with my questions:

I am using a 3D model server. This server can render the 3D model of a building and store the associated building data (building elements, structure, etc.) in a sql-type database.

I already imported and saved the data in Neo4j and created a visualization with Popoto. I showed the result in couple of presentations and feedbacks are quite positive.

And now, the task is showing Popoto visualization into the server's UI and map the elements in 3D model with the elements in Neo4j (hence in Popoto vis.). Popoto vis. and 3D model will be side by side in the same UI.

When I click one of the element in 3D model, it keeps a unique identification number (uid) of the selected element as a global variable (var uid;) in the server's JavaScript code. 

The uid of each element is also stored in Neo4j, and as "returnAttributes" in Popoto So uid is the token for mapping between 3D model and Popoto.

In app-template.js, I already defined uid as a "returnAttributes" for each node like following:

popoto.provider.nodeProviders = {
    "EMAIL": {
        "returnAttributes": ["email","name", "uid"],

popoto.provider.nodeProviders = {
    "WINDOW": {
        "returnAttributes": ["dimension","name", "uid"],

...........

.............

In the use case, when the user clicks (select) one building element in the 3D model, he/she should see the selected element's node in Popoto vis. as a queried graph. 

And vice-versa, when the user click one node in Popoto vis., he/she should see the selected node's element in 3D model.

This can be done by passing the global variables generated via listeners (click action) (var uid; in my case) between different JavaScript files. I stored the uid variable in server's JS files. Now the questions are:

1) Where should I pass the global variable (coming from server JS) in the popoto.min.js and/or app-template.js and perform the query (and maybe for the search box functionality in further releases)?

2) How can I define the global "var uid" in Popoto after I click the node (not the root node, but final node ex. Window_abc) with a listener/trigger? Which JS file should be used for this purpose? So I can pass this global variable to the server's JS and show the selected element in 3D model.

I built the code for server's JS so the element is ready to be selected and visualized in the 3D model when the "var uid" comes from Popoto JS file(s). And as you guess, I need to create this variable in Popoto.

I hope the scenario and questions are clear. I thank you so much for your help up to now and for your effort. 

Looking forward to hear from you.

Regards

Mehmet.

[Popotojs alpha]

Hi Mehmet,

 

Sorry for the late reply I was in vacation for the past two weeks.

I’m really happy if Popoto can be useful for your project.

 

I think Popoto still lacks some event customization on graph manipulation but maybe this feature can be useful for your use case:

I added an example using movie dataset where you can select an instance object (Person or movie) which reset the graph and uses it as root value:

http://www.popotojs.com/live/node-images/selection.html

You can look directly in the source code of the page to see the full code with comments.

In this example I added a global variable (instanceData) which can contain an instance object (for example a movie or a person)

I added a few instances objects in the UI next to the graph displayed as clickable images (in your use case it could be instances coming from your 3D model)

<img height="100" width="68" src="../node-images-filter/persons/Tom%20Hanks.jpg" onclick="selectInstance('Person', {name:'Tom Hanks'})">

When the image is clicked the function selectInstance is called with its data.

This function saves the data in the “instanceData” variable and resets the graph.

Then for this variable to be used I customized the popoto.graph.Events.NODE_ROOT_ADD event fired when root node is added to the graph to set an initial value.

popoto.graph.on(popoto.graph.Events.NODE_ROOT_ADD, rootNodeListener);

The "rootNodeListener" actually just set the instance node value in the graph if the variable is set

var rootNodeListener = function (rootNode) {

    // Only change root node data if instanceData is defined
    if (instanceData) {

        // Change root node type and label with instanceData
        rootNode.value = {
            type: popoto.graph.node.NodeTypes.VALUE,
            label: instanceData.label
        };

       rootNode.value.attributes = instanceData.attributes;

       // Set node as immutable, in this state the value cannot be deselected.
       rootNode.immutable = true;
    }
};

For your second question, Popoto still dont have event listeners on node selection, I think I'll add them in future.

Maybe you can use the popoto.result.onResultReceived event customization to update your 3D model

In the example I customized it to display the selection in a div just below the cypher query when the results contains only one element:

popoto.result.onResultReceived(
        function (resultObjects) {

            // Only display selected data if results contains only one element
            if (resultObjects.length == 1) {
                var html = "";
                for (var property in resultObjects[0].attributes) {
                    if (resultObjects[0].attributes.hasOwnProperty(property)) {
                        html = html + property + ":'" +

                        resultObjects[0].attributes[property] + "'<br>";
                    }
                }
                // Display and set div content with selection.
                d3.select("#selection").style("display", "block").html(html);
            } else {
                d3.select("#selection").style("display", "none").html("");
            }
        }
);

Let me know if you need more info or if it doesn't fit your use case.

[ylcnkym...@gmail.com]

Hi Frederic,

Thanks for the reply. For couple of days, I have been trying to implement your suggestion to my development. For some parts it didn't work since the other system requires some specific parameters. But no worries. I think It is in a well shape. Thanks for your helps again. And looking forward to the new releases of Popoto with new features.

Regards,

Mehmet