Компонент инструментальной панели граф

Компонент Граф отображает и динамически обновляет граф на основе любых данных в виде последовательности узлов (или вершин) и связей (или ребер) между узлами. На изображении ниже топология сети представлена в виде графа, где серверы изображены узлами, а физические сетевые соединения - связями.

Свойства графа

Топология

Преимущество компонента Граф заключается в том, что, показывая связи между узлами, он помогает пользователю с одного взгляда понять строение сложной системы. Вкладка Топология компонента Граф содержит параметры, необходимые для определения связей между узлами графа.

Свойства узлов и связей

Каждый узел и каждую связь графа можно динамически оформить несколькими способами, включая добавление изображений, текста или изменение шрифта. Вкладки Node Style and Link Style содержат параметры для определения, как эти элементы графа будут отображаться пользователю.

Пример: На нашей карте топологии сети надписи к узлам описывают IP-адрес и тип каждого устройства, а цвет указывает на статус сервера.

Действия графа

Контекстное меню узла и связи

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

При открытии свойства Контекстное меню узла отображается таблица данных со списком действий, которые будут включены в контекстное меню. В примере ниже, в контекстном меню узла будут отображаться две опции, а при выборе пункта меню запустится соответствующее выражение.

Изменение масштаба и перемещение графа

Переместить граф можно, щелкнув по нему мышью и удерживая ее.

Увеличить или уменьшить масштаб графа в месте текущего расположения курсора мыши можно удерживая ctrl и прокручивая, с помощью колесика мыши, либо жестом на сенсорной панели.

Перемещение узлов

Когда граф находится в режиме Tрансформация, нажмите на узел и перетащите его, чтобы изменить расположение элементов графа.

Чтобы выбрать и переместить сразу несколько узлов, выберите их, удерживая клавишу shift, и переместите всю группу.

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

Создание связей или узлов

Создание узлов и связей возможно, когда граф находится в режиме Редактирование. Чтобы создать новую связь, кликните на исходный узел, а затем на целевой узел. Связь будет сразу создана. Для создания нового узла кликните на свободное пространство в области графа.

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

Удаление связей или узлов

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

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

Основные свойства

Общие свойства

Граф имеет следующие основные свойства и группы свойств, общие для всех инструментальных панелей:

Имя, Дополнительные свойства, Свойства контейнера, Стили, Прелоадер, Пользовательские классы, Привязки компонента.

Период обновления

Период обновления графа. Периодичность, с которой происходит повторное чтение информации о топологии с сервера и обновление графа.

Имя свойства:

updatePeriod

Записи:

1

Права доступа:

Доступно для чтения на уровне с правами доступа для Наблюдателя, доступно для записи на уровне с правами доступа для Менеджера.

Формат записи:

Имя поля

Тип поля

Описание

updatePeriod

Long

Отображается в пользовательском интерфейсе как единица времени.

Компоновка

Показывает, какой алгоритм должен использоваться для пространственного расположения узлов в области графа.

Имя свойства:

layout

Записи:

1

Права доступа:

Доступно для чтения на уровне с правами доступа для Наблюдателя, доступно для записи на уровне с правами доступа для Менеджера.

Формат записи:

Имя поля

Тип поля

Описание

layout

String

Возможные варианты:

  • Произвольная

  • Круговая

  • Радиальная

  • Фрухтерман

  • Заданная

  • Дерево

Режим

Режимы графа: Просмотр, Трансформация или Редактирование. В режиме Просмотр, вы можете изменять масштаб графа, перемещать его, поворачивать и обрезать. В режиме Трансформация можно двигать отдельные узлы графа. В режиме Редактирование можно добавлять и удалять узлы, а также связи между ними.

Режим графа можно изменить при помощи привязки. Например, вы можете добавить на инструментальную панель выпадающий список для выбора режима.

Имя свойства:

graphMode

Записи:

1

Права доступа:

Доступно для чтения на уровне с правами доступа для Наблюдателя, доступно для записи на уровне с правами доступа для Менеджера.

Формат записи:

Имя поля

Тип поля

Описание

graphMode

Integer

Выбор режима редактирования при просмотре графа.

Выражение подсказки узла

Строка всплывающей подсказки при наведении мыши на узел. В теле подсказки будет отображаться HTML.

Контекст по умолчанию

Контекст слоя (для типа Геозона), контекст устройства (для типа Контекст), отсутствует (для типа Выражение таблица узла).

Таблица данных по умолчанию

Результирующая таблица Выражения таблица узла (для типа Выражение таблица узла), отсутствует для других типов.

Ряд по умолчанию

Указывает на обрабатываемый в настоящий момент ряд таблицы данных по умолчанию. Для типа Контекст отсутствует.

Среда вычисления

Только стандартные переменные.

Имя свойства:

nodeTooltipExpression

Записи:

1

Права доступа:

Доступно для чтения на уровне с правами доступа для Наблюдателя, доступно для записи на уровне с правами доступа для Менеджера.

Формат записи:

Имя поля

Тип поля

Описание

nodeTooltipExpression

String

Поле подсказки отобразит HTML

Выражение подсказки связи

Строка всплывающей подсказки при наведении мыши на связь. В теле подсказки будет отображаться HTML.

Контекст по умолчанию

Отсутствует

Таблица данных по умолчанию

Ряд в результирующей таблице Выражение таблицы связи

Ряд по умолчанию

Указывает на обрабатываемый в настоящий момент ряд таблицы данных по умолчанию. Для типа Контекст отсутствует.

Среда вычисления

Только стандартные переменные.

Имя свойства:

linkTooltipExpression

Записи:

1

Права доступа:

Доступно для чтения на уровне с правами доступа для Наблюдателя, доступно для записи на уровне с правами доступа для Менеджера.

Формат записи:

Имя поля

Тип поля

Описание

linkTooltipExpression

String

Поле подсказки отобразит HTML

Контекстное меню графа

Таблица опций для отображения при открытии контекстного меню для области графа.

Имя свойства:

canvasContextMenu

Записи:

0…не ограничено

Права доступа:

Доступно для чтения на уровне с правами доступа для Наблюдателя, доступно для записи на уровне с правами доступа для Менеджера.

Формат записи:

Имя поля

Тип поля

Описание

Имя

String

Имя переменной настройки

Описание

String

Описание настройки, которое будет отображаться в контекстном меню.

Выражение допустимости

String

Выражения для вычисления при выборе пункта контекстного меню.

Среда вычисления значения выражения:

Контекст по умолчанию

Контекст инструментальной панели

Таблица данных по умолчанию

Нет.

Ряд по умолчанию

0

Переменные среды

Только стандартные переменные

Контекстное меню узла

Tаблица опций для отображения при открытии контекстного меню для любого узла графа.

Имя свойства:

nodeContextMenu

Записи:

0…не ограничено

Права доступа:

Доступно для чтения на уровне с правами доступа для Наблюдателя, доступно для записи на уровне с правами доступа для Менеджера.

Формат записи:

Имя поля

Тип поля

Описание

Имя

String

Имя переменной настройки

Описание

String

Описание настройки, которое будет отображаться в контекстном меню.

Выражение допустимости

String

Выражения для вычисления при выборе пункта контекстного меню.

Среда вычисления значения выражения:

Контекст по умолчанию

Контекст инструментальной панели

Таблица данных по умолчанию

Нет.

Ряд по умолчанию

0

Переменные среды

Только стандартные переменные

Контекстное меню связи

Tаблица опций для отображения при открытии контекстного меню для любой связи графа.

Имя свойства:

linkContextMenu

Записи:

0…не ограничено

Права доступа:

Доступно для чтения на уровне с правами доступа для Наблюдателя, доступно для записи на уровне с правами доступа для Менеджера.

Формат записи:

Имя поля

Тип поля

Описание

Имя

String

Имя переменной настройки

Описание

String

Описание настройки, которое будет отображаться в контекстном меню.

Выражение допустимости

String

Выражения для вычисления при выборе пункта контекстного меню.

Среда вычисления значения выражения:

Контекст по умолчанию

Контекст инструментальной панели

Таблица данных по умолчанию

Нет.

Ряд по умолчанию

0

Переменные среды

Только стандартные переменные

Расположение узлов

Таблица данных с пользовательскими координатами для каждого узла, которая будет использоваться при выборе опции Компоновки графа Заданная(Preset).

Имя свойства:

nodeLayout

Записи:

0…не ограничено

Права доступа:

Доступно для чтения на уровне с правами доступа для Наблюдателя, доступно для записи на уровне с правами доступа для Менеджера.

Формат записи:

Имя поля

Тип поля

Описание

id

String

ID узла, к которому будут применены координаты

x

Integer

X-координата узла с указанным ID

y

Integer

Y-координата узла с указанным ID

Показывать несвязанные узлы

Когда true, все узлы будут отображаться. Кода false, узлы без каких-либо связей будут скрыты на графе.

Имя свойства:

displayUnlinkedNodes

Записи:

1

Права доступа:

Доступно для чтения на уровне с правами доступа для Наблюдателя, доступно для записи на уровне с правами доступа для Менеджера

Формат записи:

Имя поля

Тип поля

Описание

displayUnlinkedNodes

Boolean

  • True - отображать все узлы.

  • False - отображать узлы хотя бы с одной связью

Топология

Свойства вкладки Топология определяют исходные данные для узлов и связей.

Стиль узлов и ребер

Свойства на вкладках Стиль узла и Стиль ребра определяют стили, применяемые к узлам и связям.

Настройка расположения

Содержит переменные для конфигурации параметров алгоритма компоновки. Каждый алгоритм компоновки имеет ряд параметров, которые можно настроить для идеальной компоновки.

Настройка радиального расположения

Имя свойства:

radialLayoutConfig

Записи:

6

Права доступа:

Доступно для чтения на уровне с правами доступа для Наблюдателя, доступно для записи на уровне с правами доступа для Менеджер

Формат записи:

Имя поля

Тип поля

Описание

unitRadius

Integer

Количество, на которое увеличивается радиус при каждой итерации

linkDistance

Integer

Расстояние между связанными узлами

nodeSpacing

Integer

Расстояние между несвязанными узлами

preventOverlap

Boolean

Запретить пересечение связей

strictRadial

Boolean

Строго применять радиальную компоновку

focusNode

String

ID узла, который будет центром компоновки

Настройка кругового расположения

Имя свойства:

circularLayoutConfig

Записи:

7

Права доступа:

Доступно для чтения на уровне с правами доступа для Наблюдателя, доступно для записи на уровне с правами доступа для Менеджер

Формат записи:

Имя поля

Тип поля

Описание

radius

Integer

Радиус круга. Если радиус указан, startRadius и endRadius не действуют

startRadius

Integer

Начальный радиус спиральной компоновки

endRadius

Integer

Конечный радиус спиральной компоновки

clockwise

Boolean

Указывает, что узлы будут разворачиваться по ходу часовой стрелке.

divisions

Integer

Количество делений узлов на круге. Действует, если endRadius минус startRadius не равно 0.

angleRatio

Integer

Количество 2*PI между первым и последним узлом

workerEnabled

Boolean

Включает веб-работника, если вычисление компоновки занимает слишком много времени и мешает работе страницы

⚠️ Важно: когда workerEnabled true, никакие параметры типа функции не поддерживаются.

Настройка случайного расположения

Имя свойства:

randomLayoutConfig

Записи:

3

Права доступа:

Доступно для чтения на уровне с правами доступа для Наблюдателя, доступно для записи на уровне с правами доступа для Менеджер

Формат записи:

Имя поля

Тип поля

Описание

radius

Integer

Максимальный размер круга для размещения узлов

width

Integer

Максимальная ширина области для размещения узлов

workerEnabled

Boolean

Включает веб-работника, если вычисление компоновки занимает слишком много времени и мешает работе страницы

⚠️ Важно: когда workerEnabled true, никакие параметры типа функции не поддерживаются.

Настройка расположения Фрухтермана

Имя свойства:

fruchtermanLayoutConfig

Записи:

7

Права доступа:

Доступно для чтения на уровне с правами доступа для Наблюдателя, доступно для записи на уровне с правами доступа для Менеджер

Формат записи:

Имя поля

Тип поля

Описание

maxIteration

Integer

Максимальное количество итераций

gravity

Integer

Гравитация, которая повлияет на компактность компоновки

speed

Integer

Скорость перемещения каждой итерации. Большое значение скорости может привести к резким колебаниям

clustering

Boolean

Располагать ли кластерами

clusterGravity

Integer

Гравитация каждого кластера, которая повлияет на компактность каждого кластера. Действует, если clustering установлено на true

gpuEnabled

Boolean

Включает параллельные GPU вычисления, поддерживаемые G6 4.0. Если машина или браузер не поддерживают GPU вычисления, возврат к CPU вычислениям произойдет автоматически

workerEnabled

Boolean

Включает веб-работника, если вычисление компоновки занимает слишком много времени и мешает работе страницы

⚠️ Важно: когда workerEnabled true, никакие параметры типа функции не поддерживаются.

Настройка древовидного расположения

Имя свойства:

dendrogramLayoutConfig

Записи:

4

Права доступа:

Доступно для чтения на уровне с правами доступа для Наблюдателя, доступно для записи на уровне с правами доступа для Менеджер

Формат записи:

Имя поля

Тип поля

Описание

direction

String

Показывает ориентацию узлов относительно корневого узла.

  • TB: Корень наверху, компоновка сверху вниз.

  • BT: Корень внизу, компоновка снизу вверх.

  • LR: Корень слева, компоновка слева направо.

  • RL: Корень справа, компоновка справа налево.

  • H: Корень посередине, компоновка в горизонтальной симметрии.

  • V: Корень посередине, компоновка в вертикальной симметрии.

radial

Boolean

Располагает граф в радиальном стиле. Если true, рекомендуется установить направление на LR или RL

nodeSep

Integer

Разделение узлов

rankSep

Integer

Разделение уровней

Пользовательские функции

Сохранить компоновку графа

Сохраняет текущую компоновку узлов как компоновку по умолчанию для этого графа.

Имя функции: saveGraphLayout

Эта функция не имеет входных параметров.

Сохранить изображение

Сохраняет текущую компоновку узлов как компоновку по умолчанию для этого графа.

Имя функции: saveImage

Имя поля

Тип поля

Описание

saveExpression

String

Строка в поле saveExpression вычисляется как выражение. Если поле download равно true, пользовательский интерфейс инициирует загрузку результата вычисления выражения. В противном случае выражение в saveExpression должно сохранить изображение во время его вычисления. В выражении на изображение можно сослаться с помощью {image}, стандартной ссылки на поле таблицы по умолчанию, содержащее блок данных с PNG-изображением текущего вида графика.

Среда вычисления значения функции saveExpression:

Контекст по умолчанию

Таблица с одним полем изображения, блок данных, содержащий PNG-изображение текущего вида графика.

Таблица данных по умолчанию

Нет.

Ряд по умолчанию

Первый ряд

Переменные среды

Только стандартные переменные

download

Boolean

  • Если значение равно true, пользовательский интерфейс инициирует загрузку результата saveExpression.

  • Если значение false, в пользовательском интерфейсе не будет предложено никаких действий, предполагая, что изображение сохранено с помощью saveExpression.

Обновить набор данных

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

Если пользователь редактировал граф, перемещая узлы, вызов функции с аргументом saveNodeLayout равным True вызовет событие Сохранить Компоновку Узла (Save Node Layout) и обеспечит перерисовку графа с пользовательской компоновкой. В противном случае узлы перерисованного графа будут размещены в соответствии с алгоритмом, указанным в свойстве Компоновка.

Имя функции: updateDataset

Имя поля

Тип поля

Описание

saveNodeLayout

Boolean

Если значение True, то перед перерисовкой графа будет вызвано событие Сохранить Компоновку Узла (Save Node Layout), что обеспечит сохранение пользовательской компоновки.

При значении False текущая компоновка узлов не будет сохранена, и узлы на перерисованном графе будут размещены в соответствии с выбранной компоновкой.

Пользовательские события

Компонент Граф предоставляет следующие события:

Клик на узел

Возникает при клике на узел графа.

Имя события: nodeClick

Поля события:

Поле

Имя

Тип

Описание

ID

nodeId

String

ID соответствующего узла

Клик по контекстному меню узла

Возникает, когда пользователь выбирает пункт в контекстном меню узла.

Имя события: nodeContextMenuClick

Поля события:

Поле

Имя

Тип

Описание

ID

nodeId

String

ID узла, на котором вызывается контекстное меню

Item Id

itemId

String

Имя выбранного пользователем пункта контекстного меню

Возникает при наведении курсора мыши на узел.

Имя события: nodeHover

Поля события:

Поле

Имя

Тип

Описание

ID

nodeId

String

ID соответствующего узла

Вывод курсора с узла

Возникает при отведении курсора мыши от узла.

Имя события: nodeUnhover

Поля события:

Поле

Имя

Тип

Описание

ID

nodeId

String

ID соответствующего узла

Создание узла

Возникает при создании узла

Имя события: nodeCreate

Поля события:

Поле

Имя

Тип

Описание

ID

nodeId

String

ID созданного узла

X

x

Integer

X-координата созданного узла

Y

y

Integer

Y-координата созданного узла

Удаление узла

Возникает при удалении узла

Имя события: nodeDelete

Поля события:

Поле

Имя

Тип

Описание

ID

nodeId

String

ID удаленного узла

Клик по связи

Возникает при клике по связи между узлами

Имя события: edgeClick

Поля события:

Поле

Имя

Тип

Описание

Source

source

String

ID исходного узла

Destination

target

String

ID целевого узла

Link ID

linkId

String

ID ребра (связи)

Клик по контекстному меню связи

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

Имя события: edgeContextMenuClick

Поля события:

Поле

Имя

Тип

Описание

Source

source

String

ID исходного узла

Destination

target

String

ID целевого узла

Item ID

itemId

String

Имя выбранного пользователем пункта контекстного меню

Link ID

linkId

String

ID ребра (связи)

Возникает при наведении курсора мыши на связь.

Имя события: edgeHover

Поля события:

Поле

Имя

Тип

Описание

Source

source

String

ID исходного узла

Destination

target

String

ID целевого узла

Link ID

linkId

String

ID ребра (связи)

Вывод курсора со связи между узлами

Возникает при отведении курсора мыши от связи.

Имя события: edgeClick

Поля события:

Поле

Имя

Тип

Описание

Source

source

String

ID исходного узла

Destination

target

String

ID целевого узла

Link ID

linkId

String

ID ребра (связи)

Создание связи

Возникает при создании связи между узлами

Имя события: edgeCreate

Поля события:

Поле

Имя

Тип

Описание

Source

source

String

ID исходного узла

Destination

target

String

ID целевого узла

Удаление связи

Возникает при удалении связи между узлами

Имя события: edgeDelete

Поля события:

Поле

Имя

Тип

Описание

Source

source

String

ID исходного узла

Destination

target

String

ID целевого узла

Клик по контекстному меню области графа

Возникает, когда пользователь выбирает пункт в контекстном меню области графа.

Имя события: canvasContextMenuClick

Поля события:

Поле

Имя

Тип

Описание

Item Id

itemId

String

Имя выбранного пользователем пункта контекстного меню

Сохранить компоновку узлов

Возникает при вызове функции saveNodeLayout()

Имя события: saveNodeLayout

Поля события: Данное событие не возвращает значений