При наведении более подробно об объекте ПВИЗ

Question

Я использую genentech / pviz github для отображения белков и пептидов.У меня недостаточно представителя для создания нового тега, но я думаю, что было бы неплохо создать тег pviz, связанный с этим github: https://github.com/Genentech/pviz. Я часто использую этот github, но не могу найти много информациина нем переполнение стека, потому что нет тега.Я получил хорошую графику и использовал функцию наведения в части CSS, чтобы изменить цвет прямоугольника при наведении курсора.Тем не менее, я хочу показать дополнительную информацию о пептиде и / или белке при наведении на него курсора.

g.feature.psms.normal:hover rect.feature {
    fill: black;

}

  seqEntry.addFeatures(fts.map(function(ft) {
                return {
                    //we could also use te categoryType property, for height purpose, but not grouping purpose
                    category : 'psms',
                    type : ft[2], //This would be "normal" in most cases
                    start : ft[0],
                    end : ft[1],
                    text : '',
                }
            }));

Я не уверен, как отобразить информацию, потому что я не могу найти хорошую документацию.Как бы я мог отображать текст при наведении курсора на пептидные прямоугольники?

Answer 1

Функции, которые я использовал, были прямоугольниками SVG, и, немного поиграв, я нашел решение с помощью JS. Сначала создайте MouseoverCallback для определенных типов объектов, которые вы хотите:

<code>pviz.FeatureDisplayer.addMouseoverCallback(['normal', 'oxidize'], function(ft) {
                mouseOveredFT = ft;
                var el = $('#output-mouse-over');
                el.empty();
                el.html('<pre>' + "This peptide starts at: " + JSON.stringify(ft['start']) + ", ends at: " +
                JSON.stringify(ft['end']) + ", and has the sequence: " + JSON.stringify(ft['text']) + '

') }). addMouseoutCallback (['normal', 'oxide'], function (ft) { mouseOveredFT = не определено; });

Часть el.html - это то, что вы хотите отобразить. После того, как вы создадите прямоугольник SVG, обязательно добавьте:

 xChangeCallback : function(pStart, pEnd) {
                var str = 'cursor at ' + pStart.toFixed(1) + ' - ' + pEnd.toFixed(1);
                if (mouseOveredFT !== undefined) {
                    str += '<strong> -> on FT'
                }

                $('#output-x-change').html(str);
            }

Тогда в вашем html документе напишите:

<div class="row">
            <div class="span2" >
                <strong>Information about peptide</strong>
            </div><div class="span10" id="output-mouse-over"></div>
        </div>
<!--        <div class="row">-->
<!--            <div class="span2" >-->
<!--                <strong>xchange</strong>-->
<!--            </div><div class="span10" id="output-x-change"></div>-->
<!--        </div>-->

Я закомментировал вторую часть, потому что она мне не нужна, но вторая часть позволяет вам отображать местоположение вашего курсора. Между тем первая часть отображает то, что вы положили в часть el.html. Я надеюсь, что это имеет смысл, но я сомневаюсь, что многим людям понадобится помощь в этом. Я ничего не нашел в Интернете об этом. (