Neovis.js not rendering completely in Salesforce Lightning Web Component

Question

I've spent about a week or so on this, and there's very little documentation online so I figured I'd come on here to see if anyone could potentially help out. So the top level summary is that I'm trying to use an external library (neovis.js) to visualize a neo4j graph database in a Salesforce Lightning web component. I've already explored d3.js (which is compatible with Salesforces locker service) and a few other visualization libraries, but neovis.js would be the most viable option for my use case. I've made some slight modifications shown in the code below to avoid using Document.getElementById in the neovis.js library to select the element and append the canvas to the page.

However, once the canvas is drawn to the page, none of the canvas elements (nodes and edges) are shown on the screen. Here's the weird part though, I can still hover over where the nodes should be on the canvas, and the popup which displays specific information for each node appears on screen with the correct information for each node. I am not super familiar with how the canvas element works, but it seems to me as if some css property is not being applied because of Salesforce's locker service, which causes to elements to be rendered invisibly.

I've gone through a good chunk of the neovis.js library (which is just a library built on top of vis.js), and I've looked for places where perhaps styles aren't being applied to the canvas element; however up to now I've had no luck.

Here's the code I've used so far:

index.html

<template>
    <lightning-card title="Neovis" icon-name="custom:custom19">
        <div class="slds-m-around_medium">
            <div id="neovisContainerViz" class="neoVizClass" lwc:dom="manual" style="height: 700px; width: 400px;">
            </div>
        </div>
    </lightning-card>
</template>

index.js

drawNeovis() {


        const config = {
            container_id: "",
            server_url: "bolt://neo4j.het.io:7687", //This is a publicly available neo4j database that I'm using for testing purposes. 
            server_user: "",
            server_password: "",
            labels: {

            },
            relationships: {

            },
            initial_cypher: "MATCH (node:Disease {name: 'lung cancer'}) RETURN node"
        }

        const parent = this.template.querySelector('div.neoVizClass');
        const container = document.createElement('DIV');
        container.className = 'neoViz';
        parent.appendChild(container);

        const viz = new NeoVis.default(config);
        viz._container = container; //This is a property inside of the NeoVis library. This property is normally set by using the document.getElementById method, however I've replaced it with my predefined container to get around the Salesforce Locker Service.
        viz.render();
    }

Here is exactly what is rendered onto the Salesforce App page:

<div class="slds-card__body">
    <slot>
        <div class="slds-m-around_medium">
            <div id="neovisContainerViz-67" class="neoVizClass" style="height: 700px; width: 400px;">
                <div class="neovis">
                    <div class="vis-network" tabindex="900" style="position: relative; overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;">
                        <canvas width="200" height="200" style="position: relative; touch-action: none; user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); width: 100%; height: 100%;">

                        </canvas>
                        <div class="vis-tooltip" style="left: 5px; top: 5px; visibility: hidden;">
                            <strong>
                                license:
                            </strong> 
                            CC BY 3.0
                            <br>
                            <strong>identifier:</strong> 
                            DOID:1324
                            <br>
                            <strong>name:</strong> 
                            lung cancer
                            <br>
                            <strong>source:</strong> 
                            Disease Ontology
                            <br>
                            <strong>url:</strong> 
                            http://purl.obolibrary.org/obo/DOID_1324
                            <br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </slot>
</div>

The canvas and the tooltip are appended to the DOM, AND the tooltip dynamically updates when I hover over where the canvas elements should be displayed. However none of the nodes or edges are visible on the screen.

All in all, I am not very familiar with how the canvas element actually functions, and am hoping that someone can give me some tips on how to trouble shoot this issue and get the elements on the canvas to display.

Thank you all!

Answer 1

I was able to finally figure this out incase anyone else is running into similar issues. I wouldn't say this is the preferred answer, but it works (for now). Basically I injected an iframe into Salesforce, and inside of the iframe I injected the neovis.js library and generated the graph, works perfectly now.