Edge target arrows not working in Cytoscape.js >=2.7.0 - cytoscape.js

I noticed that edge source or target arrows are missing when using the current unstable branch (2.7.0-unstable). The standard cy demo show below. Is this a known issue or has something changed?

The default stylesheet was updated in 2.7 to have greater performance by default. This means that haystack edges are used by default, and haystacks support only mid arrows.
If you set your edges in your stylesheet to beziers, then you can use source and target arrows, e.g.
edge {
curve-style: bezier;
target-arrow-shape: triangle;
}

Use like this.
cy.edges('edge').style({
"curve-style": "bezier",
"target-arrow-shape": "triangle"
})

Related

Why does the greater than sign of the arrow function turn red when Vue TS is used

Vscode enables "editor.bracketpaircolorization When "enabled" and Vue TS is used, the greater than sign of the arrow function will turn red. It will not be like this if lang = "ts" is removed. It looks very uncomfortable
Seems like a VSCode issue: https://github.com/microsoft/vscode/issues/157322
As mentioned in this comment, a temporal solution meanwhile the issue is fixed is to exclude the < > pair from the colorizedBracketPairs.
Add the following to your settings.json:
"editor.language.colorizedBracketPairs": [
["{", "}"],
["[", "]"],
["(", ")"]
],

PyVis Graph shows some nodes colour as green and some as yellow even though the nodes are assigned with colour green

I have generated a PyVis graph but the graph output has just one problem and seems i can't find the reason and lost to no ideas anymore, i am not sure if it is a bug in PyVis drawing or I have made an error in generating the graph. Please advise, i am keen to know the cause here.
The PyVis graph I have generated contains 196 nodes and 367 edges exactly.
Of those 196 nodes, certain group of nodes are assigned with specific colours. About 42 nodes are assigned with colour "green" (using hex colour code #00ff00) and their shape has been changed to be a Square here for easy visual in an attempt to show my problem.
Of those 42 nodes, 13 of them are not showing green but instead show yellow as their colour, even though the source code still have those nodes colour as green (in hex code), however the visual shows yellow.
Below one line code is me trying to point to the source code line of one node and its color is set to #00ff00.
{"color": "#00ff00", "font": {"color": "white", "face": "Verdana", "size": 90}, "group": "gp_b", "id": "node__120", "label": "node__120", "level": 3, "shape": "square", "size": 500} ,
The graph's full html code example is provided here linked to jsfiddle, please see if you can help me locate the problem and a fix. Thanks in advance.
https://jsfiddle.net/shashi12345/2pf781ba/1/
Additional info:-
Basically, the graph is first created using Python. I used NetworkX version 2.8.5, added nodes and edges and their attributes, and then imported that into PyVis all within Python. PyVis version i am using is 0.2.1. And the graph is generated/saved as html file from PyVis.
The vis.js vis-network library requires groups to be defined in the options as descibred in the documentation here. All square nodes are added to a group named gp_b however this isn't present in the vis-network options. It is odd that this results in the behaviour being seen, but it could be resolved in a number of ways described below.
As per the PyVis documentation here the options passed to vis.js can be configured which as is needed for some options below.
Adding Group to Options
Adding the group gp_b to the options without any styling defined fixes the issue, for example:
var options = {
groups:{
useDefaultGroups: true,
gp_b:{ }
},
// Other options
}
Adding Group to Options With Styles
Alternatively the styling could be removed from the nodes and instead placed on the group, for example:
var options = {
groups:{
useDefaultGroups: true,
gp_b:{
color: '#00ff00'
}
},
// Other options
}
Removing Group from Nodes
The group could also be removed from the nodes, this way they are not expecing style information from the group and will just the color they have defined.

Qt3D Billboards: how to make plane always face to camera

I try to use camera's viewVector to make plane face to camera, but it will turn Clockwise or Counterclockwise when Camera rotate to left or right.
Can I make the plane always face to camera without turning Clockwise or Counterclockwise?
I think camera->upVector() can help me maybe, but I don't how to use.
My code :
class planeTransformClass : public Qt3DCore::QTransform {
public:
planeTransformClass( Qt3DCore::QNode *entity = nullptr ) :Qt3DCore::QTransform(entity) {}
signals:
void faceTo( QVector3D v ) {
setRotation(QQuaternion::rotationTo(QVector3D(0,1,0), -v));
} ;
};
// Background
Qt3DCore::QEntity *planeEntity = new Qt3DCore::QEntity(rootEntity);
Qt3DExtras::QPlaneMesh *planeMesh = new Qt3DExtras::QPlaneMesh(planeEntity);
planeMesh->setHeight(2);
planeMesh->setWidth(2);
Qt3DExtras::QTextureMaterial planeMaterial = new Qt3DExtras::QTextureMaterial(planeEntity);
Qt3DRender::QTexture2D *planeTexture = new Qt3DRender::QTexture2D(planeMaterial);
FlippedTextureImage *planeTextureImage = new FlippedTextureImage(planeTexture);
planeTextureImage->setSize(QSize(3000, 3000));
planeTexture->addTextureImage(planeTextureImage);
planeMaterial->setTexture(planeTexture);
planeMaterial->setAlphaBlendingEnabled(true);
// Transform
planeTransformClass planeTransform = new planeTransformClass(planeEntity);
planeTransform->setRotationX(90);
planeTransform->setTranslation(QVector3D(2, 0, 0));
planeEntity->addComponent(planeMesh);
planeEntity->addComponent(planeMaterial);
planeEntity->addComponent(planeTransform);
// connect camera's viewVectorChanged
camera->connect( camera, &Qt3DRender::QCamera::viewVectorChanged,
planeTransform, &planeTransformClass::faceTo);
Solution using geometry shader
There is already a C++ translation this QML code that I tried to translate (using geometry shader):
https://github.com/ismailsunni/qt3d-custom-shader
My own translation can be found here. It works now after solving the issues mentioned in this question.
Solution without geometry shader
I got a different version running based on this bug report. You can find my implementation on GitHub. The billboards don't change their size when the camera moves, i.e. become smaller and larger on screen like every other object, but I hope you can work with that.
On the master branch the images also move for some reason as can be seen in this image:
The no_instanced_rendering branch doesn't use instanced rendering and displays everything correctly.
Edit
I'm sorry I'm not using your example but I don't have time anymore to adjust it. Check out the patch related to the bug report I mentioned. The person implemented a material with this effect, you should be able to extract it and make it run.

Keen IO Chart Labels

I'm trying to figure out how to adjust the labels on an Area Chart visualization of my Keen IO data. I've looked through the available configuration options, but I'm not seeing what option would do this. Currently my chart just lists "null" on the legend on the right side of the chart, and on the hover tooltips when you hover over a particular peak. Just looking to switch it to list "Hits" instead of "null."
Does anyone know how/where I would configure those labels?
You can use labelMappingfor that. Something like:
client.draw(funnel, document.getElementById("chart"), {
library: "google",
chartType: "columnchart",
labelMapping: {
null: "Hits"
}
});

Can we have nested targets in Dojo?

I have two divs nested under a parent div and I want all these to be source as well as targets for dojo.dnd.
I want to be able to add nodes to the div over which the content was dropped and also allow the user to move this in between the 3 divs.
Something like this -
http://www.upscale.utoronto.ca/test/dojo/tests/dnd/test_nested_drop_targets.html
This is I gues implemented in older version of Dojo and doesn' seem to work with 1.4
Is the support for nested targets removed? Is there any way to achieve this?
Nested sources/targets are not supported currently. In most cases you can work around this restriction by using independent sources/targets, yet positioning them as you wish with CSS.
I used a workaround for this case. I create another DIV element which positioned at the same place of the nested target with same width and height but with higher z-Index value. Then the new DIV element covers the nested target. When user is trying to drop on the nested target, he actually drops to the above new DIV element. As long as the new DIV element is not nested in the parent drop target, Dojo's dnd operation works well. I usually put the new DIV element as a child of the body element.
What you need to do is to create the new DIV in onDndStart and destroy it in onDndCancel, then everything should work well.
Dojo version 1.10 still does not support nested Dnd.
CSS positioning and overlay div's didn't work for me. But I noticed that dragging an element out of a dndContainer into a parent dndContainer doesn't trigger onMouseOverEvent for the parent.
In case someone is still using dojo and has the same problem, here is my approach to solve this:
Declare your own dndSource e.g. nestedDndSource.js
define([
"dojo/_base/declare",
"dojo/dnd/Source",
"dojo/dnd/Manager"
], function(declare,dndSource, Manager){
var Source = declare("dojo.dnd.Source", dndSource, {
parentSource: null,
onOutEvent: function(){
if(this.parentSource != undefined)
Manager.manager().overSource(this.parentSource)
Source.superclass.onOutEvent.call(this);
}
});
return Source;
})
Use that nestedDndSource for the children instead of dojos and make sure to provide the dndSource of the parent as parentSource-Parameter:
var parentDndSource = new dojoDndSource(parentNode, {..});
var childDnDSource = new nestedDndSource(childNode,{
parentSource: parentDndSource,
onDropExternal: ...
});
Working example: https://jsfiddle.net/teano87/s4pe2jjz/1/