Cytoscape: отображать атрибуты узла / края в таблице при нажатии на нее - PullRequest
Новая
       53

Cytoscape: отображать атрибуты узла / края в таблице при нажатии на нее

0 голосов
/ 09 мая 2020

Я новичок в cytoscape. js, так как я просто визуализирую мелкие сети в приложении flask.

В настоящее время я могу отображать атрибуты узлов и ребер при наведении курсора, но информация появляется в не понятном для пользователя словаре. Что я хотел бы сделать, так это показать информацию об узлах / ребрах (скажем, пока только ребра) в таблице после щелчка по узлу / ребру.

Прямо сейчас функция, создающая элемент popper при наведении, следующая: 

function makePopper(ele) {
    let ref = ele.popperRef(); // used only for positioning
    ele.tippy = tippy(ref, {
      // tippy options:
      content: () => {
        let content = document.createElement("div");
        content.innerHTML = '<p>' + JSON.stringify(ele.data(), undefined, 2) + '</p>';
        return content;
      },
      trigger: "manual" // probably want manual mode
    });
  }

Как вы можете видеть, внутренний HTML заполнен ele.data (атрибуты узла или края) . Я хотел бы отобразить это в таблице.

Я немного искал, но похоже ни у кого не было такой потребности.

заранее спасибо

1 Ответ

3 голосов
/ 10 мая 2020

Вы не ограничены Popper или Cytoscape. js когда дело доходит до того, какие данные должны быть включены в вашу всплывающую подсказку и как они должны выглядеть, это строго HTML.

Рабочий пример с именами столбцов слева - https://codepen.io/Raven0us/pen/ExVLEwj

/**
 *
 * @param target node or edge
 */
static bindPopper(target) {
    let tooltipId = `popper-target-${target.id()}`;

    // check if existing tooltip and remove if necessary
    let existingTarget = document.getElementById(tooltipId);
    if (existingTarget && existingTarget.length !== 0) {
        existingTarget.remove();
    }

    let popper = target.popper({
        content: () => {
            // create div container
            let tooltip = document.createElement('div');

            // adding id for easier JavaScript control
            tooltip.id = tooltipId;

            // adding class for easier CSS control
            tooltip.classList.add('target-popper');

            // create actual table
            let table = document.createElement('table');

            // append table to div container
            tooltip.append(table);
            let targetData = target.data();

            // loop through target data
            for (let prop in targetData) {
                if (!targetData.hasOwnProperty(prop)) continue;

                let targetValue = targetData[prop];
                // no recursive or reduce support
                if (typeof targetValue === "object") continue;

                let tr = table.insertRow();

                let tdTitle = tr.insertCell();
                let tdValue = tr.insertCell();

                tdTitle.innerText = prop;
                tdValue.innerText = targetValue;
            }

            document.body.appendChild(tooltip);

            return tooltip;
        }
    });

    target.on('position', () => {
        popper.scheduleUpdate();
    });

    target.cy().on('pan zoom resize', () => {
        popper.scheduleUpdate();
    });

    target.on('mouseover', () => {
        if (document.getElementById(tooltipId)) {
            document.getElementById(tooltipId).classList.add('active');
        }
    }).on('mouseout', () => {
        if (document.getElementById(tooltipId)) {
            document.getElementById(tooltipId).classList.remove('active');
        }
    })
}

Если вам нужна традиционная таблица, вы можете получить ключи data и создать с ними строку. 

let rowWithTitles = table.insertRow();
Object.keys(targetData).forEach(i => {
    rowWithTitles.insertCell().innerText = i;
})
...