Data output in the form of a graph on the site

The component is based on the Javascript Infovis Toolkit and is part of the Table component (as a display mode).

Example of a component working on a demo stand -https://demo.web-automation.ru/list/watch/vizualizaciya-dannykh-v-vide-grafa---62

How to configure graph output

In SELECT 1 of the table, we register the nodes of the graph

    -- 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 - node ID (to be used in SELECT 4)
• name - the name that is displayed on the graph
• color - label color
• type - figure (circle, triangle, square)
• dim - figure size
• tip - if specified, it will be displayed in the hint when hovering over the node (if the hint processing callback is not specified)

In SELECT 3 we prescribe viewType, graphOptions 

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

In Graph Options, you can pass the JS settings of the $jet.Force Directed component (with the exception of functions).

By default, there are such settings: https://pastebin.com/zdM8U6qn (if any node is replaced (Navigation,Mode, Edge, Label), then you need to register all its settings - your settings completely override the default settings).

В 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 - from where and where does the edge of the graph go (id from SELECT 1)
• color - link color

Note:

1. We don't use paging (i.e. we output all the data at once). Consider the amount of data - do not output too many nodes (limit the selection to SELECT 1), otherwise it will lead to lengthy data processing on the browser.

2. Documentation on JS component settings - https://philogb.github.io/jit/static/v20/Docs/files/Core/Core-js.html

3. A variant of the output of the database structure - https://pastebin.com/0uKZ30Mt

4. Limitation. The component is unstable in the dialog box (dragging nodes and hints does not work after scrolling the window)

Processing a click on a graph node

To do this, you need to create a JS callback of the form as.crud2callbacks[tableCode + "_clickGraphNode"], for example: https://pastebin.com/cJgQejhF

If there is no callback, the system searches for a div with id =as-visgraphnodepanel and inserts the name of the element and its connections into it.

Output of a hint on hover

If there is a callback of the form as.crud2callbacks[table Code + "_showgraphtip"], then it works. If it is not there, then a hint is displayed with the name of the element and the tip field at the node (if there is one). 

Callback example:https://pastebin.com/Dsgw8MM6