Вывод данных в виде графа на сайте

Компонент основан на базе Javascript Infovit Toolkit и входит в состав компонента Таблица (как режим отображения).

Пример работы компонента на демостенде - https://demo.web-automation.ru/list/watch/vizualizaciya-dannykh-v-vide-grafa---62

Как настроить вывод графа

В SELECT 1 таблицы прописываем узлы графа 

    -- SELECT 1
    select 'node1' id, 'node1' name,
	union
    select 'node2' id, 'node2' name, '#f00' color, 'circle' type, 3 dim
	union
    select 'node3' id, 'node3' name, '#f00' color, 'circle' type, 3 dim
	union
    select 'node4' id, 'node4' name, '#f00' color, 'circle' type, 3 dim
	union
    select 'node5' id, 'node5' name, '#f00' color, 'circle' type, 3 dim

• id - идентификатор узла (будет использоваться в SELECT 4)
• name - наименование, которое выводится на графе
• color - цвет надписи
• type - фигура (circle, triangle, square)
• dim - размер фигуры
• tip - если указан, то будет выведено в подсказке при наведении на узел (если не задан коллбек обработки подсказки)

В SELECT 3 прописываем viewType, graphOptions 

-- SELECT 3
select 'graph' viewType,
    	'{
           "contHeight": "1000px"
        }' graphOptions

В GraphOptions можно передать JS настройки компонента $jit.ForceDirected (за исключением функций). 

По умолчанию там такие настройки: https://pastebin.com/zdM8U6qn (если заменяется какой-либо узел (Navigation, Node, Edge, Label), то надо прописать все его настройки - ваши настройки полностью перезатирают настройки по умолчанию). 

В SELECT 4 прописываем связи между узлами: 

    select 'node1' nodeFrom, 'node2' nodeTo, '#00f' color
    union
    select 'node2' nodeFrom, 'node3' nodeTo, '#0ff' color
    union
    select 'node3' nodeFrom, 'node2' nodeTo, '#0f0' color

• nodeFrom, nodeTo - откуда и куда идет ребро графа (id из SELECT 1) 
• color - цвет связи

Примечание: 

1. Не используем paging (т.е. выводим все данные сразу). Учитывайте объем данных - не выводится слишком много узлов (ограничивайте выборку в SELECT 1), иначе это приведет к длительной обработке данных на браузере. 

2. Документация по настройкам JS компонента - https://philogb.github.io/jit/static/v20/Docs/files/Core/Core-js.html

3. Вариант вывода структуры БД - https://pastebin.com/0uKZ30Mt

4. Ограничение. Компонент нестабильно работает в диалоговом окне (после скроллинга окна не работает перетаскивание узлов и подсказки)

Обработка клика на узле графа

Для этого необходимо создать JS коллбек вида as.crud2callbacks[tableCode + "_clickGraphNode"], например: https://pastebin.com/cJgQejhF

Если коллбека нет, то система ищет div с id = as-visGraphNodePanel и вставляет в него название элемента и его связи. 

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

Если есть коллбек вида as.crud2callbacks[tableCode + "_showGraphTip"], то работает он. Если его нет, то выводится подсказка с названием элемента и полем tip у узла (если он есть).