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

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

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

Топология

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

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

Каждый узел и каждую связь графа можно динамически оформить несколькими способами, включая добавление изображений, текста или изменение шрифта. Вкладки 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

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

DPF_EXPORT_V5.8.8 / TIME_1716484521 / 2024-05-23 17:15:21 / STRLEN_76625 / STRLEN_HTML_79769

{VERSION}