Topology map component

[Hyperkid123]

Description

Goal is to create new topology graph component. New component will not have any internal logic such as searching or filtering. This should be done in parent component.

Instead of SVG it uses canvas for rendering. This should increase performance for graphs with big amount of nodes.

Please ignore changes to eslint and package.json, before final commit i will revert it back to original state. I only wanted to make my life easier.

PR Checklist

• use canvas for rendering
• zooming
• dragging
  • dragging nodes while zooming resets position to 0, 0. Have to solve that.
• select node(s)
• select edge(s)
• minimap
• Specify correct data format
• Handle different nodes styling
  • node font icon
  • node image icon
  • node custom opacity, fill, border and icon color
  • links dashed line option
  • utlization indication
  • node tooltip on hover
• Code styling

Data format

Component has these parameters: nodes, edges, select-node, multi-select-nodes, select-edge, multi-select-edges, tooltip-style, show-node-labels, show-edge-labels

• Nodes is an array of nodes to render.
• Edges is array of links between nodes.
• Select-node is a function which will return clicked node as a parameter if passed function.
• Multi-select-nodes is a function which will return array of selected nodes. Multiple nodes can be selected by shift/ctrl + clicking.
• Select-edge is a function which returns clicked edge.
• Multi-select-edges is a function which returns array of selected edges. Multiple edges can be selected by shift/ctrl + clicking.
• Tooltip-style is a object with styling properties of node titles
• Show-node-label is a boolean. If true, all node titles will be shown without hovering over nodes.
• Show-edge-labels is a boolean. If true, all edge titles will be shown without hovering over nodes.

Nodes data format

Array of objects. Only id is mandatory parameter

nodes = [
  //node with all attributes
  {
    id: 'nodeId1',
    title: 'nodeTitle',
    size: 17, //node radius,
    fileicon: this attribute specifies path to image file. eg: '/some/path/to/image/image.png'. File icon has higher priority than fonticon.
    fonticon: css class of node icon eg: 'fa fa-info'
    fill: '#FFFFFF', //color of node background
    borderColor: '#000000', //color of node border
    iconColor: '#FFFFFF', //color of fontIcon
    opacity: 〈0,1〉, //node opacity
    utilization: 〈0,100〉, //border chart around the node
  },
  {
    id: 'nodeId2',
  }, //example of node without any attributes
]

Edges data format

Array of objects. Each edge have two mandatory attributes source and target.

edges = [
  {
    source: 'nodeId1', //id of source node in nodes array
    target: 'nodeId2', //id of target node in nodes array
    lineStyle: ['dashed'], //style of line
    title: 'edge title', //edge tool tip
  }
]

Select node(s)

User can select one or more nodes. Single node is selected by clicking.

selectNode = function(node){
   console.log('selected node from graph: ', node);
 };

Multiple nodes are selected by click + ctrl/shift key

multiSelect = function(array) {
  console.log('selected nodes from graph: ', array);
}

Select edge(s)

User can select one or more nodes. Single node is selected by clicking.

selectEdge = function(edge){
   console.log('selected edge from graph: ', edge);
 };

Multiple edges are selected by click + ctrl/shift key

multiSelectEdge = function(array) {
  console.log('selected edges from graph: ', array);
}

Tooltip style

Object with styling properties for tooltips. Tooltip style is not mandatory attribute. None of the styling properties is mandatory. If some property is not specified, default value will be used.
Tooltips will only be shown for nodes with title property.

tooltip-style = {
 size: 12,
 font: 'Arial',
 textColor: 'white',
 background: 'rgba(0, 0, 0, .5)',
 borderColor: 'red',
 borderWidth: 10
}

Zooming

Component also supports semantic zooming. Only distance between nodes is growing/shrinking, but node size remains the same. Canvas will zoom towards the position of the mouse cursor.

[Hyperkid123]

@skateman bump

[skateman]

YAGNI 😉

[skateman]

@Hyperkid123 the zooming is just wrong, it should zoom the distance among the nodes, but not the nodes itself. Check out my PR...

[Hyperkid123]

@skateman Yep i know, i'am having some issues zooming in combination with dragging (v3 / v4 inconsistencies). I know how it is supposed to be, but until i have to make i cooperate first 😆

[Hyperkid123]

@skateman ping

[Hyperkid123]

@skateman can you take a look at this please?

[skateman]

Can't you just use fonticon or fileicon directly? The priority should be fileicon first...as in trees.

[dtaylor113]

The html file should be located at charts/topology-map/topology-map.html

[dtaylor113]

Hi @Hyperkid123, I find it strange that there is no hover or selection css/treatment.

[dtaylor113]

Are there any plans for multi-select? Ctrl+Right-Click? or selection by rectangle?

[skateman]

@Hyperkid123 I found a solution for the IE11 fonticon issue. The fonticonService hack we have in ui-components should be enough, you just have to convert the XXXX hex code to YYYY decimal and pass it further as &#YYYY;. Haven't tried it as I'm on my phone now, but it looks promising 😉

[Hyperkid123]

@skateman thanks. I will check it as soon as i can

[Hyperkid123]

@dtaylor113 can you review this please?

[dtaylor113]

Hi, LGTM. small nit, pls include a blurb in the description about how zooming works and that it zooms to where ever the mouse is hovering in the chart.
Also, you will need to change your commit msg to adhere to https://github.com/patternfly/angular-patternfly#feature-release.
Since this is a new feature I would recommend a Minor release: "feat(pfTopologyMap): Initial Implementation"

[Hyperkid123]

ping @dtaylor113

[dtaylor113]

LGTM, thanks!

[Hyperkid123]

ping @dtaylor113 can you merge this please? (Just rebased to remove conflict)