Noe4j Visualization Library in Vaadin Hilla

Hilla
1

I have been able to use d3.js and the vis network with Vaadin to visualize Neo4j data. But NVL (Neo4j Visualization Library) is very powerful and specialized for Neo4j database. I want to change my apps and use NVL. I tried to use the NVL React wrapper component with Vaadin 24.8 and no success . Receive an error of loading some js. files. Does anybody have success using NVL visualization library in Vaadin?

2

I haven’t used that library but there’s a greater chance that someone could help with ideas on how to fix the problem if you could share the error message that you get.

3

No problem:

  • 1st step: I ran the npm install @neo4j-nvl/react to install the library.
  • 2nd step: a small test:
  • import React, {useContext, useEffect, useState} from ‘react’;
    import {ViewConfig} from “@vaadin/hilla-file-router/types.js”;
    import {Button, Icon} from ‘@vaadin/react-components’;
    import {SubMenuContext} from “Frontend/views/@layout”;
    import { BasicNvlWrapper} from ‘@neo4j-nvl/react’;
    import { Node } from ‘@neo4j-nvl/base’;

export const config: ViewConfig = { menu: { order: 3, icon: ‘line-awesome/svg/galactic-republic.svg’ },
title: ‘Visualización BUP’,
loginRequired: false, };

export default function BupVisualization() {
const subMenuContext = useContext(SubMenuContext);
const [nodes, setNodes] = useState<Node>([{ id: ‘0’ }, { id: ‘1’ }])

useEffect(() => {
    subMenuContext.items = undefined;
    subMenuContext.refresh();
}, []);

const addElements = () => {
    const newNodes: Node[] = [...nodes,  {id: nodes.length.toString() }]

    console.log(">>>>> New nodes", newNodes);
    setNodes(newNodes)
}

return (
    <div>
        Hola
        <BasicNvlWrapper
            nodes={nodes}
            rels={[{ id: '10', from: '0', to: '1' }]}
            nvlOptions={{ initialZoom: 2,  }}
            layout='hierarchical'
            nvlCallbacks={{ onLayoutDone: () => console.log('>>>>layout done') }}

        />
        <Button theme='primary' style={{maxWidth:'250px', }}
                onClick={addElements}>
            Add a new node
        </Button>
    </div>
);

}

4

I am still investigation but maybe something that can help: I think the problem is with vite since it seem that NVL dynamically utilizes two worker.js files: HierarchicalLayout.worker.js and CoseBillentLayour.worker and the default for Vaadin´s vite is different. I ran the app as 100% React with no Vaadin and it works ok. I did not found any NVL vite issues but still looking. Any help is welcome

5

After many hours because copilot gave me false solutions. The error in the console still exist Failed to fetch worker script. But if I put the component BasicNviWrapper inside a divand this div do some sizing …it works, so the component was created ok but with nozising (I suppose) ¿?. Still the solution is at half but at least I can work a little with this incredible React component to visualize Neo4j graphs.

6

I guess the problem here is that static resources from npm packages are not automatically available to be loaded over HTTP(S).

The straightforward approach to just test this is that you copy the necessary files from inside node_modules into src/main/resources/META-INF/resources/ which is the standard location for static resources served over HTTP(S).

If that works, then a more maintainable approach could be to abuse the theme asset support for copying resources from npm packages. This is documented in the Flow section but the same mechanism is also used by Hilla: Using advanced npm packages in Vaadin styling

7

Thanks for you advice. More less I did what you recommend:

  • I copy the file in directory node_modules/@neo4j-nvl/layout-workers/lib/cosebilkent-layout/workerFactory.mjs for directory src/main/resources/META-INF/resources/frontend.build but renaming the file to CoseBilkentLayout.worker.js`.

  • Same thing for the file node_modules/@neo4j-nvl/layout-workers/lib/hierarchical-layout/workerFactory.mjs for directory for directorysrc/main/resources/META-INF/resources/frontend.build but renaming the file to HierarchicalLayout.worker.js.

Note: maybe this could be done automatically modifying the vite.config.ts to something like this:

import { UserConfigFn } from ‘vite’;
import { overrideVaadinConfig } from ‘./vite.generated’;
import { viteStaticCopy } from ‘vite-plugin-static-copy’;

const customConfig: UserConfigFn = (env) => ({
plugins: [
viteStaticCopy({
targets: [
{
src: ‘node_modules/@neo4j-nvl/layout-workers/lib/hierarchical-layout/workerFactory.mjs’,
dest: ‘’,
rename: ‘HierarchicalLayout.worker.js’
},
{
src: ‘node_modules/@neo4j-nvl/layout-workers/lib/cosebilkent-layout/workerFactory.mjs’,
dest: ‘’,
rename: ‘CoseBilkentLayout.worker.js’
},
]
})
});

export default overrideVaadinConfig(customConfig);

But I preferred to do it manually.

Result: no more errors and seems It is working. I did not like the solution because I do not understand the NVL in detail. Meanwhile I expected this workaround will help somebody that wants to use NVL excellent library inside Vaadin Hilla.