in client/client/app/components/ngbPathways/ngbCytoscapePathway/ngbCytoscapePathway.controller.js [206:349]
reloadCytoscape(active) {
this.annotationMarkService.hideTooltip();
this.nodeService.clearAnnotations();
if (active) {
if (this.viewer) {
this.viewer.destroy();
this.viewer = null;
}
this.$timeout(() => {
let cytoscapeStyle;
if (this.isCollage()) {
this.scale = 1;
this.defaultNodeStyle = {
...defaultCollageNodeStyle
};
cytoscapeStyle = [
{
selector: 'node',
style: this.settings.style.node
},
{
selector: 'edge',
style: this.settings.style.collageEdge
},
{
selector: ':selected',
style: this.settings.style.collageSelected
}
];
} else {
this.scale = 0.3;
this.defaultNodeStyle = {
...defaultSBGNNodeStyle
};
cytoscapeStyle = this.applyDomStylesToSbgn(
sbgnStylesheet(Cytoscape),
this.settings.style.node
);
}
const savedState = JSON.parse(localStorage.getItem(this.storageName) || '{}');
const savedLayout = savedState.layout ? savedState.layout[this.elements.id] : undefined;
let elements;
this.elements.nodes = this.saveDefaultPositions(this.elements.nodes, this.isCollage());
if (savedLayout) {
elements = {
nodes: this.wrapNodes(
this.getPlainNodes(savedLayout.nodes),
this.tag,
this.elements.attrs,
this.isCollage()
),
edges: savedLayout.edges
};
} else {
elements = {
nodes: this.wrapNodes(
this.getPlainNodes(this.positionedNodes(this.elements.nodes)),
this.tag,
this.elements.attrs,
this.isCollage()
),
edges: this.elements.edges
};
}
this.viewer = Cytoscape({
container: this.cytoscapeContainer,
style: cytoscapeStyle,
layout: {name: 'preset'},
elements: elements,
...this.settings.options
});
this.viewer.domNode();
const layout = this.viewer.layout(this.settings.loadedLayout);
layout.on('layoutready', () => {
this.$compile(this.cytoscapeContainer)(this.$scope);
this.viewer.on('dragfree', this.saveLayout.bind(this));
this.resizeCytoscape();
if (this.searchParams.annotations && this.searchParams.annotations.length) {
this.annotateTree(this.searchParams.annotations);
}
});
this.viewer.nodes().on('click', e => {
const nodeData = e.target.data();
if (!nodeData.dom) {
this.onElementClick(null);
}
});
this.viewer.edges().on('click', e => {
const edgeData = e.target.data();
const {
label,
tooltip
} = edgeData || {};
if (label || tooltip) {
this.onElementClick({
data: {
id: edgeData.id,
tooltip: edgeData.tooltip,
title: edgeData.fullLabel
}
});
} else {
this.onElementClick(null);
}
});
layout.run();
const viewerContext = this;
this.actionsManager = {
ZOOM_STEP: viewerContext.settings.externalOptions.zoomStep,
duration: 250,
zoom: () => viewerContext.viewer.zoom(),
zoomIn() {
const zoom = this.zoom() + this.ZOOM_STEP;
viewerContext.viewer.zoom(zoom);
viewerContext.centerCytoscape();
this.canZoomIn = zoom < viewerContext.viewer.maxZoom();
this.canZoomOut = zoom > viewerContext.viewer.minZoom();
},
zoomOut() {
const zoom = this.zoom() - this.ZOOM_STEP;
viewerContext.viewer.zoom(zoom);
viewerContext.centerCytoscape();
this.canZoomIn = zoom < viewerContext.viewer.maxZoom();
this.canZoomOut = zoom > viewerContext.viewer.minZoom();
},
restoreDefault: () => {
this.viewer.batch(() => {
this.viewer.remove(this.viewer.nodes());
this.viewer.remove(this.viewer.edges());
this.viewer.add(this.positionedNodes(this.elements.nodes));
this.viewer.add(this.elements.edges);
viewerContext.viewer.layout(this.settings.loadedLayout).run();
});
viewerContext.saveLayout();
this.actionsManager.canZoomIn = this.actionsManager.zoom() < viewerContext.viewer.maxZoom();
this.actionsManager.canZoomOut = this.actionsManager.zoom() > viewerContext.viewer.minZoom();
},
canZoomIn: true,
canZoomOut: true,
ready: true
};
});
}
}