Can we create UI in javascript by taking data from Neo4j?

[vsmahajan096]

Can we create UI in javascript by taking data from Neo4j?

[abk]

Hello @vsmahajan096 !

This is an excellent, provocative question. Could you share a bit more about what you're thinking? Do you mean data-driven forms?

Welcome to Neo4j.

Cheers,
ABK

[vsmahajan096]

I have to create interactive organization chart by taking data from Neo4j.

[dana_canzano]

@vsmahajan096

still not entirely clear what is desired but GitHub - neo4j-contrib/neovis.js: Neo4j + vis.js = neovis.js. Graph visualizations in the browser wi... provides a javascript plugin to allow one to present data in graph form in your UI.

Is this what you are after? ???

[jggomez]

Hi, a good idea you have data-driven forms but I have created these forms and you can have several problems with maintenance and performance

Could you write more?

Thanks

[abk]

Hi @jggomez ,

Sure. I agree with you that it is challenging. Being schema-free is amazing for evolving a data model and capturing data as it exists, but is not fun for building a UI.

Normalizing property values (making every date either a number or an ISO string) is essential. That either happens in the DBMS as a migration, as a transformation in middleware, or at the surface in the UI.

The "card view" in Neo4j Bloom is a data driven form. The fields and field types are derived from the data. The Bloom "Perspective" establishes expected data types. Without that, it's hard to know what the user would expect with arbitrary data.

This is a great advantage of layering GraphQL on Neo4j. You get a data layer with predictable types, and Cypher at your disposal when you want to reach deeper. Which is another way of saying I would not recommend dynamic forms which directly access Neo4j. Use a middle layer, then build forms against that.

-ABK

[adam_cowley]

If you're interested in the schema of your schema-free (schema-optional...) database, you can use APOC commands to get the information needed to generate your forms:

• CALL apoc.meta.schema - Gives you a single map which contains nodes and relationships and their properties.
• CALL apoc.meta.data() - will give you the same information in rows
• RETURN apoc.meta.type(node.property) or apoc.meta.cypher.types(n) - Will give you the type of an existing property or properties for a node/relationship

The can see the full list here or by running CALL apoc.help(".meta.").

I use apoc.meta.schema in my useSchema hook for React for Charts which you're more than welcome to use this in your project or create a Graph App.