I am using cola layout to render a Cytoscape graph inside a bootstrap card element. However, the graph mostly tries to span vertically and in spite of having plenty of spaces in the horizontal direction, it does not span there. See the following screenshot.
To reproduce the issue please use the following Electron fiddle gist:
https://gist.github.com/wasimaftab/33ab4ef9134b8c2b4c7afed4392b6520
I'm using cytoscape#3.16.1 and cytoscape-cola#2.4.0
Even after removing the nodes added with fixed x and y coordinates graph still looks the same (see screenshot below).
Related
I've been working on a node project with puppeteer.js for the last few months, but I have just started to use transparency in PDF files and have come across a real head scratcher...
What am I trying to achieve?
3 horizontally adjoined, semi transparent divs, rendered as part of a pdf via puppeteer.
What's the problem?
In html they display as expected. But in PDF a faint line appears between elements which I believe is to do with "stitching". I'm aware that this wont show in print, but I want to get rid of on screen. This is a mock up of some simple content which shows the behaviour I'm experiencing:
What have I tried?
Experimenting with Puppeteer params (antialiasing, flattening, color
flags like -webkit-print-color-adjust) - [Result: no change]
SVG elements with transparent background. [Result: lines still
appear]
A single div using a linear gradient with 3 block colors. [Result: Works when viewed in Acrobat, but has the weird effect in chrome where elements shift slightly to the right (pictured: top row - single div with linear gradient. Bottom row - black boxes used here as a guide for assessing alignment)].
SVG elements using a linear gradient. [Result: Same as above]
Flattening the pdf [Result: This does solve the problem, but degrades
the quality of the rest of the image, therefore not suitable]
I'm finding it difficult to find a solution as I'm not really sure where the behaviour is emanating from (the PDF, puppeteer, browser?). If anybody has any ideas, I'd be very grateful!
Thanks
I'm working on simple side project and small part of it is rendering a terrain. I'm rendering the terrain using height map information. But here is my problem:
I would like to render just a silhouette/outline of the terrain/horizon. Here is screenshot from my app rendering height map:
And here is screenshot similar to desired result from peakfinder.org:
I would like to draw just lines representing silhouette of terrain with the rest transparent or solid colour. How can I solve it? Calculate local maximum somehow?
I created sample project here, in case you want to help me.
Thanks!
So I've been giving Cytoscape a try recently. My project's goal is basically a collaborative graph that people will be able to add/remove nodes to/from, making it grow in the process. The graph will include many compound nodes.
Most of the examples I've seen use container div that takes 100% of the screen space. This is fine for "controlled" graphs but won't work in my case because its size is intended to be dynamic.
Here's a JSFiddle using the circle layout within a fixed 3000px/3000px container:
https://jsfiddle.net/Jeto143/zj8ed82a/5/
Is there any way to have the container size be dynamic as opposed to stating it explicitly? Or do I have to compute the new optimal container size each time somehow, and then call cy.resize()?
edit: actually, using 100%/100% into cy.fit() might just work no matter how large the network is gonna be, so please ignore this question is this is the case.
Is there a recommended layout for displaying large/unknown amounts of data in a non-hierarchical way that would "smartly" place nodes (including compound ones) in the most efficient way possible, all the while avoiding any overlap? (I guess that's a lot to ask...)
Why doesn't cy.fit() seem to be working in my example? I'm using it both at graph initialization and when CTRL+clicking nodes (to show closed neighborhood), but it doesn't seem to like the 3000x3000px container (seems better with 100%x100%).
edit: also ignore this question if you ignored 1., as again it seems fine with 100%/100%.
Any help/suggestions would be greatly appreciated.
Thank you very much in advance.
TLDR: It's (1).
Cytoscape has a pannable viewport, like a map. You can define the dimensions of the viewport (div) in CSS. What's displayed in the viewport is a function of the positions of the nodes, the zoom level, and the pan level -- just like what is visible in a map's viewport is a function of zoom, pan, and positions of points of interest.
So either you have to
(a) rethink your UI in terms of zoom and pan and use those in-built facilities in Cytoscape, or
(b) disable zoom and pan in Cytoscape (probably stay at (0, 0) at zoom 1) and let the user scroll the page as you add content to the graph and resize its container div to accommodate the new content.
I've got a working cytoscape.js instance that looks like this:
I have been trying unsuccessfully to configure the graph so that the node labels don't overlap. The graph uses arbor for layout. Playing with the repulsion levels doesn't have much effect on the problem. Gravity (or lack thereof) doesn't either. Is this a layout issue or a cytoscape.js config issue and how do I fix it?
Secondarily, node shape is supposed to be a 40x40 ellipse, which it generally is. But when a node is grabbed, it displays as a rounded rectangle. Why?
I've created a gist with my javascript and some data. It's dependent on jQuery (~2.1), cytoscape.js (>=2.3.9) and arbor.js as provided in the cytoscape.js lib directory. And it needs <div id="cy"></div> for a target.
(1) Overlap is a function of layout. If changing layout parameters is unsuccessful for your usecase, a different layout is probably the solution.
(2) That's the overlay -- not the node's body.
I'm having problems with google maps, drawing icons was working fine few weeks ago in my project. At some time the icons are very frequently drawing in partly and I don't know what is causing it. It is both happening on my development machine and production server and on all machines.
I'm only using two different icons so I know the bitmap images are not corrupt.
Here below are two sample images.
You'll get more help if you post your outputted JSON. Your gmaps JSON must not have quotes around width or height, like so: "picture":"/assets/dayhome.png","width":32,"height":37,"lat":53.5402,"lng":-113.628
Another fix is to include optimized:false which disables the html5 canvas (the squares that are cutting off the markers).
My much more detailed analysis here: Canvas Tiles Cut Off Custom Markers
Set optimized:false in your Marker options.
If optimized is true (the default), then your marker images are incorporated into the tiles. Unfortunately where markers cross tile boundaries, they are not also used on the adjacent tile, so appear to be truncated at the edge of the tile. Using optimized:false forces the icons to be placed on the map as separate DOM objects.