How to use Neovis.js to display the data in a drop-down?

[pd_payal0312]

I am new and working on Neovis.js . I want to display data in the drop-down on the basis of the query that I will hit on Neo4j database.
Executing Query is :- "MATCH (n)-[r]-(m) RETURN distinct type(r)"
output is :- type(r) "WAS_MENTIONED_IN" "IS_PART_OF" "WAS_INVOLVED_IN" "IS_FRIEND_OF" "IS_MOTHER_OF" "IS_FATHER_OF" "HAPPENED_IN" "USED_BY" "USED_IN"

I want that the type(r) output will be in an array So, that I can provide it in drop-down option.
Is it feasible with neovis,js or not. If not then please provide any option for this.

I am using below function for displaying graph on web page.
`

function draw(str){
var viz;var config = {
        container_id: "display",
        server_url: "bolt://localhost:7687",
        labels: {
             "Person": {
                "caption": "name",
               /* "size": "pagerank",*/
               /* "community": "community", */                  
            },
             "Location": {
                "caption": "name",
                                 
            },
             "Weapon": {
                "caption": "name",
                                
            },
             "Organization": {
                "caption": "org_name",
                                 
            },
             "Incidence": {
                "caption": "incidence_name",
                                   
            } 
        },
        relationships: {
            /*"properties": {
                "thickness": "weight",
                "caption": "<type>",
                font:{"color":'red'}
            },*/
            "INTERACTS": {
                    "thickness": "weight",
                    "caption": false
                }
        }
       initial_cypher:"MATCH (n)-[r]-(m) RETURN distinct type(r)"
    };

    this.viz = new NeoVis.default(config);
     this.viz.render();

}`

[12kunal34]

hi @pd.payal0312

neovis.js is only used for neo4j data visualisation. but in your case you want some data that should be populated in dropdown that is returned from query.
so for this you can use simple java or javascript and connect your database with it.
after that you have to run query from it using bolt protocol and then you can perform any operation with this data. basically you need to collect data using statement result .

please let me know if you want to know further more

[pd_payal0312]

Hi Kunal,
I am also not able to shop the query "MATCH (n)-[r]-(m) RETURN distinct type(r)" output on screen.

[12kunal34]

do you have data in neo4j ?
and where are you running this query ?

[pd_payal0312]

Hi Kunal,

I have the data in Neo4j.
I unable to get the data from Neo4j as node and edge array is blank in my case.I dont know why this is happening.

r.default {_config: {…}, _encrypted: "ENCRYPTION_OFF", _trust: "TRUST_ALL_CERTIFICATES", _driver: e, _query: "MATCH (n:Person)<-[r:IS_FRIEND_OF]-(n1) WHERE n.name =~ "(?i)masood azhar" RETURN n,r,n1", …}
_config: {container_id: "display", server_url: "bolt://************:7687", labels: {…}, relationships: {…}, initial_cypher: "MATCH (n:Person)<-[r:IS_FRIEND_OF]-(n1) WHERE n.name =~ "(?i)masood azhar" RETURN n,r,n1"}
_container: div#display
_data: {nodes: i, edges: i}
_driver: e {_url: "************:7687", _userAgent: "neo4j-javascript/0.0.0-dev", _openSessions: {…}, _sessionIdGenerator: 1, _token: {…}, …}
_edges: {}
_encrypted: "ENCRYPTION_OFF"
_network: i {options: {…}, defaultOptions: {…}, body: {…}, _callbacks: {…}, images: e, …}
_nodes: {}
_query: "MATCH (n:Person)<-[r:IS_FRIEND_OF]-(n1) WHERE n.name =~ "(?i)masood azhar" RETURN n,r,n1"
_trust: "TRUST_ALL_CERTIFICATES"
__proto__:
buildEdgeVisObject: ƒ buildEdgeVisObject(e)
buildNodeVisObject: ƒ buildNodeVisObject(e)
clearNetwork: ƒ clearNetwork()
constructor: class
reinit: ƒ reinit(e)
reload: ƒ reload()
render: render(){let e=this,r=this._driver.session();r.run(this._query,{limit:30}).subscribe({onNext:function(r){console.log("CLASS NAME"),console.log(r.constructor.name),console.log(r),r.forEach(function(r,t,o){if(console.log("Constructor:"),console.log(r.constructor.name),"Node"===r.constructor.name){let t=e.buildNodeVisObject(r);try{e._addNode(t)}catch(e){console.log(e)}}else if("Relationship"===r.constructor.name){let t=e.buildEdgeVisObject(r);try{e._addEdge(t)}catch(e){console.log(e)}}else if("Path"===r.constructor.name){console.log("PATH"),console.log(r);let t=e.buildNodeVisObject(r.start),o=e.buildNodeVisObject(r.end);e._addNode(t),e._addNode(o),r.segments.forEach(r=> {…}
renderWithCypher: ƒ renderWithCypher(e)
stabilize: ƒ stabilize()
_addEdge: ƒ _addEdge(e)
_addNode: ƒ _addNode(e)
__proto__: Object

[12kunal34]

how you getting above values ??
try once in neo4j browser with the above query and let us know it's working there or not

[pd_payal0312]

hi Kunal,
It was working there

[12kunal34]

den please send your code snippet which causes this issue

[648991475]

Hi, this trouble's been bothering me a lot.
Have you found a solution to this "I unable to get the data from Neo4j as node and edge array is blank in my case.I dont know why this is happening."??
Please help.

[648991475]

Hi, this trouble's been bothering me a lot.
Have you found a solution to this "I unable to get the data from Neo4j as node and edge array is blank in my case.I dont know why this is happening."??
Please help.

[pd_payal0312]

Hi Kunal,

Main issue is with driver, I think. As i checked on my console. Sometimes _driver: Driver and sometimes _driver:e. I want to know about its driver working. Can you help me on this?
My code snippet:-

function draw(str1,str2){
    var viz;
    /*document.getElementById("display").style.width="900px";*/
    document.getElementById(str2).style.height="400px";
        var config = {
            container_id: str2,
            server_url: "bolt://************:7687",
            
            labels: {
                 "Person": {
                    "caption": "name",
                   /* "size": "pagerank",*/
                   /* "community": "community", */                  
                },
                 "Location": {
                    "caption": "place",
                                     
                },
                 "Weapon": {
                    "caption": "name",
                                    
                },
                 "Organization": {
                    "caption": "org_name",
                                     
                },
                 "Incidence": {
                    "caption": "incidence_name",
                                       
                },
                "Document": {
                    "caption": "docId",
                                       
                } 
            },
            relationships: {
                /*"properties": {
                    "thickness": "weight",
                    "caption": "<type>",
                    font:{"color":'red'}
                },*/
                "INTERACTS": {
                        "thickness": "weight",
                        "caption": false
                    }
            },      
           initial_cypher:str1,
           arrows: true
        }
        this.viz = new NeoVis.default(config);
        console.log("before",this.viz);
    
         this.viz.render();
         return this.viz;
}