I updated to cytoscape.js 2.7.1 and running into some issues using cytoscape.js-navigator
The bird's eye view flickers a lot (e.g. whenever a node is selected) and it does not redraw the complete graph when zooming in on the main view. Attached are the two screens one with less zoom and other with higher zoom. This used to work fine with cytoscape.js 2.6.x
Given here is the style corresponding to the graph.
{
selector: 'node',
style: {
'label': 'data(label)',
'background-color': '#786545',
'text-background-color': '#786545',
'text-background-shape': 'rectangle',
'text-background-opacity': 1.0,
'font-family': 'Roboto',
'color': '#ffffff',
'shape': 'ellipse',
'min-zoomed-font-size': 6,
'text-valign': 'center',
'text-halign': 'right',
'text-events': 'yes',
'text-opacity': 1,
'text-margin-x': -5
}
},
{
selector: 'node:selected',
style: {
'background-color': '#ffffff',
'background-width': '90%',
'background-height': '90%',
'border-color': '#786545',
'border-width': 1,
'text-background-shape': 'rectangle',
'text-background-color': '#ffffff',
'text-background-opacity': 1.0,
'text-border-color': '#786545',
'text-border-width': 1,
'text-border-opacity': 1,
'color': '#524A3D',
'text-events': 'yes'
}
},
{
selector: 'node[hover = 1]',
style: {
'padding-top': 5,
'padding-left': 5,
'padding-bottom': 5,
'padding-right': 5,
'font-weight': 'bold',
'font-size': 16,
'text-events': 'yes'
}
},
{
selector: 'edge',
style: {
'line-color': '#cab07f',
width: 2,
'text-events': 'yes',
'curve-style': 'haystack',
'haystack-radius': 0,
'source-label': 'data(srcTp)',
'target-label': 'data(destTp)',
'source-text-offset': 30,
'target-text-offset': 30,
'min-zoomed-font-size': 10,
'color': '#000000',
'text-background-color': '#cab07f',
'text-background-opacity': 1,
'text-background-shape': 'roundrectangle'
}
},
I updated to cytoscape.js 2.7.1 and running into some issues using cytoscape.js-navigator The bird's eye view flickers a lot (e.g. whenever a node is selected) and it does not redraw the complete graph when zooming in on the main view. Attached are the two screens one with less zoom and other with higher zoom. This used to work fine with cytoscape.js 2.6.x Given here is the style corresponding to the graph. { selector: 'node', style: { 'label': 'data(label)', 'background-color': '#786545', 'text-background-color': '#786545', 'text-background-shape': 'rectangle', 'text-background-opacity': 1.0, 'font-family': 'Roboto', 'color': '#ffffff', 'shape': 'ellipse', 'min-zoomed-font-size': 6, 'text-valign': 'center', 'text-halign': 'right', 'text-events': 'yes', 'text-opacity': 1, 'text-margin-x': -5 } }, { selector: 'node:selected', style: { 'background-color': '#ffffff', 'background-width': '90%', 'background-height': '90%', 'border-color': '#786545', 'border-width': 1, 'text-background-shape': 'rectangle', 'text-background-color': '#ffffff', 'text-background-opacity': 1.0, 'text-border-color': '#786545', 'text-border-width': 1, 'text-border-opacity': 1, 'color': '#524A3D', 'text-events': 'yes' } }, { selector: 'node[hover = 1]', style: { 'padding-top': 5, 'padding-left': 5, 'padding-bottom': 5, 'padding-right': 5, 'font-weight': 'bold', 'font-size': 16, 'text-events': 'yes' } }, { selector: 'edge', style: { 'line-color': '#cab07f', width: 2, 'text-events': 'yes', 'curve-style': 'haystack', 'haystack-radius': 0, 'source-label': 'data(srcTp)', 'target-label': 'data(destTp)', 'source-text-offset': 30, 'target-text-offset': 30, 'min-zoomed-font-size': 10, 'color': '#000000', 'text-background-color': '#cab07f', 'text-background-opacity': 1, 'text-background-shape': 'roundrectangle' } },