Пример пользовательской топологии
Визуализация взаимосвязей между родительскими и дочерними устройствами на карте топологии
Этот пример объясняет, как использовать пользовательский
провайдер для визуализации взаимосвязей между устройствами в виде графа с помощью простой модели, содержащей данные об узлах и связях. Каждое устройство, которое мы включаем в наш граф, будет считаться узлом, а различные соединения между ними - связями.
Использование выражений для пользовательской топологии
Корневыми выражениями для пользовательской топологии являются выражение узлов и выражение связей. Таблицы данных, возвращаемые этими выражениями, содержат все данные для топологии. Таблицы данных, возвращаемые выражениями узлов (Node Expression) и связей (Link Expression), будут использоваться всеми остальными выражениями.
Для простоты в этом примере в качестве источника всех данных о топологии используются две таблицы данных. Если вы хотите применить этот пример к сценариям, замените выражения Node Expression и Link Expression выражениями, которые возвращают соответствующие данные в аналогичном формате.
Таблица данных, возвращаемая выражением связей, является источником информации о связях. Поскольку пользовательская топология является гибкой, вам предстоит определить, каким образом данные будут храниться и извлекаться из этой таблицы данных другими выражениями для связей. Чтобы создать граф, необходимо определить выражение идентификатора связи, выражение источника и выражение цели. Если вы определите эти три свойства, топология будет построена только на основе этих данных. SberMobile получит данные об узлах из выражения источника (Source Expression) и выражения цели (Target Expression) и построит связи между этими узлами. Все выражения, использующие таблицу данных, возвращаемую выражением связей (Link Expression): Выражение идентификатора связи, Выражение типа связи и все поля на вкладке Стиль связи (ребра графа).
Таблица данных, возвращаемая выражением узлов (Node Expression), является источником информации об узлах. Аналогично, вы сами определяете, сколько данных об узлах вы хотите хранить и отображать. Все выражения, использующие таблицу данных, возвращаемую выражением узлов (Node Expression): Выражение идентификаторов узлов, X, Y и все поля на вкладке Стиль узла.
Пример сценария
Мы отображаем высокоуровневые взаимосвязи устройств для распределения углеводородов. Нефтеперерабатывающий завод производит бензин и природный газ, которые перекачиваются в хранилища. Наш пример выглядит примерно так:
Чтобы воспроизвести этот пример, сначала создайте модель с двумя переменными, Links
и Nodes
. Затем настройте каждую из переменных как таблицу данных с нижеуказанными полями. Модель в этом примере называется topology
. Подробные сведения о том, как создать модель и заполнить ее данными, см. в учебном пособии "Реализация моделей данных ".
Переменная Links
Поле | Имя | Тип | Описание |
Идентификатор связи | linkId | Строка | Идентификатор связи. В примере ниже используются целые числа, отформатированные как строки, но можно использовать любую строку. |
Исходный узел | sourceNode | String | Идентификатор исходного узла для этой связи. |
Целевой узел | targetNode | Строка | Идентификатор целевого узла для этой связи. |
Цвет связи | linkColor | Строка | Цвет связи. |
Направление связи | isDirected | Булево | Флаг направления. Если значение равно true, то связь имеет направление от исходного узла к целевому узлу. |
Ширина связи | linkWidth | Integer | Ширина связи. |
Описание связи | linkDescription | Строка | Описание связи. |
Переменная Nodes
Поле | Имя | Тип | Описание |
Имя узла | nodeName | Строка | Идентификатор узла. |
Цвет узла | nodeColor | Строка | Цвет узла. |
Описание узла | nodeDescription | Строка | Описание узла. |
Идентификатор узла | nodeId | Строка | Идентификатор для указания конкретного узла. В примере ниже используются целые числа, отформатированные как строки, но можно использовать любую строку. |
Пример данных
Чтобы создать простой график, создайте модель с переменными Links и Nodes с указанными значениями.
Узлы
Имя узла | Цвет узла | Описание узла | Идентификатор узла |
Pump | Red | Главный насос | 0 |
Refinery | Red | Нефтеперерабатывающий завод | 1 |
Tank1 | Grey | Хранилище бензина A | 2 |
Tank2 | Grey | Хранилище бензина B | 3 |
Tank3 | Grey | Хранилище бензина C | 4 |
Storage | Blue | Подземное хранилище газа | 5 |
Связи
Идентификатор связи | Исходный узел | Целевой узел | Цвет связи | Направление связи | Ширина связи | Описание связи |
0 | 1 | 0 | Red | true | 3 | Бензин |
1 | 0 | 2 | Red | true | 1 | Бензин |
2 | 0 | 3 | Red | true | 1 | Бензин |
3 | 0 | 4 | Red | true | 1 | Бензин |
4 | 1 | 5 | Blue | true | 1 | Газ |
Настройка свойств графика
Таблиц Nodes и Links в нашей модели достаточно для создания пользовательской топологии. Теперь мы настроим свойства компонента графа для получения данных из модели.
Группа топологии
Выражение узлов. Это выражение должно приводить к таблице данных, описанной выше. Например, вы можете выполнить запрос, который вернет все данные для вашей топологии. В этом примере используется ссылка на переменную, в которой хранится таблица данных узла: {users.admin.models.topology:nodes}
. Эта таблица данных становится таблицей данных по умолчанию для всех остальных выражений, связанных с узлами.
Выражение связей. Это выражение должно приводить к таблице данных, описанной выше. В этом примере используется ссылка на переменную, в которой хранится таблица данных связей: {users.admin.models.topology:links}
. Эта таблица данных становится таблицей данных по умолчанию для всех остальных выражений, связанных со связями.
Выражение идентификаторов связей. Результатом этого выражения должен быть идентификатор связи. Каждый идентификатор связи соответствует одной связи между двумя узлами. В этом примере используется поле linkId таблицы данных по связям: {linkId}
.
Выражение идентификаторов узлов. Это выражение должно приводить к идентификатору узла, каждый идентификатор узла соответствует одному узлу. В данном примере используется поле nodeId таблицы данных узлов: {nodeId}
.
Выражение источника. У каждой связи должен быть узел-источник, из которого она исходит. Это выражение задает, как определяется этот исходный узел. В этом примере используется поле sourceNode таблицы данных по связям, в которой хранятся идентификаторы узлов: {sourceNode}
.
Выражение цели. Это выражение определяет, как определить целевой узел для связи. В этом примере используется поле targetNode таблицы данных по связям, содержащей идентификаторы узлов: {targetNode}
.
Группа стилей узла
Выражение описания узла. Это свойство определяет описание, прикрепленное к узлам, и итерируется по таблице данных, созданной выражением узлов (Node Expression). В этом примере в качестве описания узла используется поле nodeDescription: {nodeDescription}
.
Выражение цвета. Это выражение определяет цвет отображаемого узла. В этом примере используется поле nodeColor: {nodeColor}
. Цвет должен быть строкой, содержащей либо HEX-представление цвета, либо название цвета HTML.
Группа стилей связей (ребер графа)
Выражение описания связи. Это свойство определяет описание, прикрепленное к связям, и итерируется по таблице данных, созданной выражением связей (Link Expression). В этом примере в качестве описания связи используется поле linkDescription: {linkDescription}
.
Выражение цвета. Определяет цвет связи. В данном примере используется поле linkColor: {linkColor}
. Цвет должен быть строкой, содержащей либо HEX-представление цвета, либо название цвета HTML.
Выражение ширины. Это выражение определяет ширину (толщину) отображаемой связи. В данном примере для этого используется поле linkWidth: {linkWidth}
.
Выражение направленности. Это выражение определяет, должна ли связь отображаться как направленная. В этом примере используется поле isDirected: {isDirected}