I have a question about cytoscapeJS. I upgraded my application to use the latest version of cytoscapeJS: v3.2.5. In the past, in my code, the network graph was initialised and node/edge data and appearance attributes were set.
Initialisation code changed from (the page has an empty <div> with id='cy'):
$('#cy').cytoscape({
container: $('#cy'),
...
to:
var cy= cytoscape({ // in cytoscapeJS v3.2.5
container: document.getElementById('cy'),
...
Later on, users could select what layout to use and the code would get the graph object and run the selected layout on the visible elements as below:
var cy= $('#cy').cytoscape('get');
var coseLayout= { name: 'cose', handleDisconnected: true, avoidOverlap: true };
cy.$(':visible').layout(coseLayout);
But the above now throws this error: Uncaught TypeError: $(...).cytoscape is not a function (on the first line).
I have gone through the updated website docs (Core API, collection, etc.) and demos over the last week but have found no way to do the same in the new cytoscapeJS 3.2.5, i.e., to get the graph outside the initialisation code and perform some operations on it.
I also posted this query at https://github.com/cytoscape/cytoscape.js/issues/2015 but got no response. Any suggestions would be very helpful. Thanks.
Keep the reference and pass it where need be or keep a global reference.
Related
In my JointJs application, I want to discard particular commands so that they are not added in the Undo/Redo stack.
I followed the exact same code snippet from the JointJs documentation like below:
var commandManager = new joint.dia.CommandManager({
graph: graph,
cmdBeforeAdd: function(cmdName, cell, graph, options) {
options = options || {};
return !options.ignoreCommandManager;
}
});
// ...
// Note that the last argument to set() is an options object that gets passed to the cmdBeforeAdd() function.
element.set({ 'z': 1 }, { ignoreCommandManager: true });
But when I look into the options object in the debug mode, it doesn't contain any property with the name ignoreCommandManager.
I have also tried the below call to set the z value but it didn't work either.
element.set('z', 1 , { ignoreCommandManager: true });
Any idea why the options object is missing this property to ignore the command, please?
Initially, It was failing in Firefox when I posted the question here. The cache was also disabled.
I tried in another browser (Chrome) today without introducing any new changes and it was working without any issues.
I want to port this plugin to the new videojs version 5. I updated most of the plugin to fit into the new videojs.extend() requirements and updated the public functions declarations.
The part I'm stuck on is when you try to load the new components into videojs:
//Range Slider Time Bar
videojs.SeekBar.prototype.options_.children.RSTimeBar = {};
//Panel with the time of the range slider
videojs.ControlBar.prototype.options_.children.ControlTimePanel = {};
If I understand it correctly (I am having some doubts), it is extending specific parts of videojs in order to contain the plugin components.
The problem is that videojs.SeekBar and videojs.ControlBar are undefined and I don't know the right way to access them in v5 (or to create these empty objects if it isn't how you do it anymore). There is also no indication in the videojs wiki article "5.0 changes details"
The full code is available here.. The faulty lines are 421 and 422
EDIT
I can get rid of the error if I replace these lines with those:
videojs.getComponent("SeekBar").prototype.options_.children.RSTimeBar = {}; //Range Slider Time Bar
videojs.getComponent("ControlBar").prototype.options_.children.ControlTimePanel = {}; //Panel with the time of the range slider
but in the plugin constructor function, I can't find back the components:
//components of the plugin
var controlBar = player.controlBar;
var seekBar = controlBar.progressControl.seekBar;
this.components.RSTimeBar = seekBar.RSTimeBar; //is undefined
When I explore the videoJs object, in my debugger, I can indeed find player.controlBar.progressControl.seekBar but it has no sub-object called RSTimebar except in options_.children. It makes sense since it is where I defined it. However, I don't know why in the version 4 I can find it but not in the version 5.
EDIT 2
I notices that the RSTimebar in options_.children array was inserted as an object instead of a pair of index/string. So I changed my lines to this:
videojs.getComponent("SeekBar").prototype.options_.children.push("RSTimeBar"); //Range Slider Time Bar
videojs.getComponent("ControlBar").prototype.options_.children.push("ControlTimePanel"); //Panel with the time of the range slider
Result: the plugin is correctly loaded with one warning per component:
VIDEOJS: WARN: The RSTimeBar component was added to the videojs object
when it should be registered using videojs.registerComponent(name,
component)
I just need to figure out the proper and simplest way to correctly load the components now.
I finally managed to update the plugin thanks to a commit where most of the work was done.
I am using a Chart.js doughnut chart. The chart appears fine. However, it is missing tool tips (as have all other charts I have ever made using Chart.js). Why is this, and how do I turn them on? The online documentation claims that I can access global defaults (in which the tool tips can be set on/off, although the site claims that they default to be on) at Chart.defaults.global, which doesn't work for me because Chart.defaults doesn't even exist. I am trying to access these defaults so I can turn the tool tips on.
Thanks for any help you can provide.
var context = document.getElementById("scoreChart").getContext("2d");
var chartData = [
{
label: "Number correct",
value: $scope.numRight,
color: "rgb(134, 202,54)",
highlight: "rgb(100,100,100)"
//not sure what highlight does
},
{
label: "Number wrong",
value: $scope.myTest.testQuestions.length - $scope.numRight,
color: '#7c0b10',
highlight: 'rgb(10,10,10)'
}
];
var theChart = new Chart(context);
var theDough = theChart.Doughnut(chartData/*, chartOptions*/);
console.log("Here is the chart object:");
console.log(theChart);
console.log("Chart.Doughnut object:");
console.log(theChart.Doughnut);
console.log("Chart.Doughnut.defaults:");
console.log(theChart.Doughnut.defaults); // <-- This works
console.log("theChart.defaults:");
console.log(theChart.defaults); // <--This is undefined
console.log("Chart.defaults.global:");
console.log(Chart.defaults.global); // throws an error
// because Chart.defaults is undefined
UPDATE: Fixed it. The bower version of Chart.js is extremely old. see my answer below.
I downloaded Chart.js using Bower. The version of Chart.js listed on Bower is old. That is why the documentation was wrong. I had to cut and paste the newest Chart.js from Github into my project. And voila, tooltips and the object behaves as the documentation says it should.
Alternatively, and easier, as JAAulde pointed out, you can just set your bower dependecies to point to:
"chartjs": "master"
and that should automatically pull the right copy.
theChart and theDough should be set in one go, not as separate objects. For example:
var theChart = new Chart(ctx).Doughnut(data);
If this still does not get you tooltips, pass in and modify the following options:
var theChart = new Chart(ctx).Doughnut(data, {
// Boolean - Determines whether to draw tooltips on the canvas or not
showTooltips: true,
});
For further variety in your tooltips styling, check out the documentation for global chart options on this page: http://www.chartjs.org/docs/#getting-started-global-chart-configuration
I am using sigma.js along with angular js to build my visualization web app.
Problem statement: I have written code in such a way that when filter criteria changes, filter module will be triggered to filter out nodes based on user selection(see code below).But, Initially for the first time filter works fine without any issue, but later on it doesn't seem to be working. It looks like it is not executing the filter predicate at all.
I tried below possible ways, but couldn't resolve the issue.
1) Destroyed and recreated the filter object for every data change trigger.
2) Unregistered and registered filter predicate.
code snippet:
scope.$watch('filtersettingdata',function(){
s = new sigma({
graph: scope.data['mdata'],
container: element.elementid,
renderer: {
container: document.getElementById(element.elementid),
type: 'canvas'
},
settings: filtersettingdata
});
var filter = new sigma.plugins.filter(s);
filter.nodesBy(
function(n) {
//predicate with new filter values
},'filter_name').apply();
s.refresh();
}
any help/suggestions will be really appreciated.
Thanks in advance.
I'm the author of this plugin.
It is out-dated in the official sigma repository and I don't think it will work with Angular as it is.
It is now released under dual license GNU GPLv3 + commercial here: https://github.com/Linkurious/linkurious.js/tree/linkurious-version/plugins/sigma.plugins.filter
This version works with Angular and I've successfully used it in the projects of my company.
Disclaimer: I work at Linkurious SAS.
I have a class extending the old Ext.Panel class. I'm now trying to migrate my application with help of the migration guide provided by sencha. I'm using a modification of the ext3 "Portal"-Example.
When trying to load my application i get some "deprecated" and "breaking" errors with a good explaination. But there is one error, i can't fix. It says "portal.bwrap is undefined" as mentioned above, "portal" is a subclass of Ext.Panel. In ext3 there was a property "bwrap" in the new ext there is not. And it is not documented neither in the compatibility layer nor in the migration guide how to fix this in ext4.
Here are the two places where bwrap is used:
constructor : function(portal, cfg){
this.portal = portal;
Ext.dd.ScrollManager.register(portal.body);
Ext.ux.Portal.DropZone.superclass.constructor.call(this, portal.bwrap.dom, cfg);
portal.body.ddScrollConfig = this.ddScrollConfig;
},
[...]
getGrid : function(){
var box = this.portal.bwrap.getBox();
box.columnX = [];
this.portal.items.each(function(c){
box.columnX.push({x: c.el.getX(), w: c.el.getWidth()});
});
return box;
},
Any suggestions?
bwrap was a div that wrapped that panel body. It no longer exists. Without seeing the code I can't say what you should do, but chances are you should either refer to the main panel element or the body itself.
FYI the portal example is already ported to 4.