Neovis.js не полностью рендерится в веб-компоненте Salesforce Lightning - PullRequest
Новая
       15

Neovis.js не полностью рендерится в веб-компоненте Salesforce Lightning

0 голосов
/ 22 октября 2019

Я потратил на это около недели или около того, и в Интернете очень мало документации, поэтому я решил, что приду сюда, чтобы посмотреть, сможет ли кто-нибудь помочь. Таким образом, сводка верхнего уровня заключается в том, что я пытаюсь использовать внешнюю библиотеку (neovis.js) для визуализации графической базы данных neo4j в веб-компоненте Salesforce Lightning. Я уже исследовал d3.js (который совместим со службой блокировки Salesforces) и несколько других библиотек визуализации, но neovis.js был бы наиболее приемлемым вариантом для моего варианта использования. Я сделал несколько небольших изменений, показанных в приведенном ниже коде, чтобы избежать использования Document.getElementById в библиотеке neovis.js для выбора элемента и добавления холста на страницу.

Однако, как только холст отрисовывается на странице, ни один из элементов холста (узлов и ребер) не отображается на экране. Вот странная часть, хотя, я все еще могу навести курсор на то, где узлы должны быть на холсте, и на экране появится всплывающее окно, которое отображает конкретную информацию для каждого узла с правильной информацией для каждого узла. Я не очень хорошо знаком с тем, как работает элемент canvas, но мне кажется, что какое-то свойство css не применяется из-за службы блокировки Salesforce, которая приводит к невидимым элементам рендеринга.

прошел через большую часть библиотеки neovis.js (которая является просто библиотекой, построенной поверх vis.js), и я искал места, где, возможно, стили не применяются к элементу canvas;однако до сих пор мне не повезло.

Вот код, который я использовал до сих пор:

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();
    }

Вот именно то, чтоотображается на странице приложения Salesforce: 

<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>

Холст и всплывающая подсказка добавляются в DOM, а подсказка динамически обновляется при наведении указателя мыши на место отображения элементов холста. Однако ни один из узлов или ребер не виден на экране.

В общем, я не очень знаком с тем, как на самом деле функционирует элемент canvas, и надеюсь, что кто-то может дать мне несколько советов о том, как решить проблему. снимите этот выпуск и получите элементы на холсте для отображения.

Спасибо всем!

1 Ответ

0 голосов
/ 29 октября 2019

Я смог наконец понять это, если кто-то еще сталкивается с подобными проблемами. Я бы не сказал, что это предпочтительный ответ, но он работает (пока). По сути, я внедрил iframe в Salesforce, и внутри iframe я внедрил библиотеку neovis.js и сгенерировал график, теперь он отлично работает.

...