I'd like to use the discreteMapper of CytoscapeWeb 2.0 (that is, the jQuery-based CytoscapeWeb) but need some example code showing what exactly I have to do.
I already tried with some code taken from the Flash-based CytoscapeWeb and tried
var entityColorMapper = {
attrName: "etype",
entries: [ { attrValue: "protein", value: "#ff0000" },
{ attrValue: "compound", value: "#00ff00" },
{ attrValue: "group", value: "#0000ff" }
]
};
and then in the "style" structure I have
"node.E": {
fillColor: {
discreteMapper: entityColorMapper
}
}
but this does not seem to work.
It's different in Cytoscape Web 2:
https://github.com/cytoscape/cytoscapeweb/wiki/StyleObject
// example discrete mapper
fillColor: {
defaultValue: "grey",
discreteMapper: {
attr: "type", // field in ele.data() to map to
mapped: {
"foo": "red", // field value : visual property value
"bar": "blue"
}
}
}
You don't really need to use a discrete mapper, since you could be using selectors in your style:
"node[type='foo']": { fillColor: "red", borderColor: "pink" },
"node[type='bar']": { fillColor: "blue" }
It's better to use the second approach, since you can separate the style for [type='blah'] for several visual properties at once (e.g. borderColor), much like CSS.
Remember: Make sure to always work with the latest prerelease version while Cytoscape Web 2 until the first official release is made.
https://github.com/cytoscape/cytoscapeweb/downloads
Related
I'm trying to validate json files which have an element that has a property which contains a value that should exist in another part of the json. I'm using jsonschema Draft 07.
This is a simple little example that shows the scenario I'm trying to validate in my data.
{
"objects": {
"object1": {
"colorKey": "orange"
}
},
"colors": {
"orange": {
"red": "FF",
"green": "AF",
"blue": "00"
}
}
}
How can I validate that the 'value' of colorKey (in this case 'orange') actually exists as a property of the 'colors' object? The data isn't stored in arrays, just defined properties.
For official JSON Schema...
You cannot check that a key in the data is the same as a value of the data.
You cannot extract the value of data from your JSON instance to use in your JSON Schema.
That being said, ajv, the most popular validator, implements some unofficial extensions. One of which is $data.
Example taken from: https://github.com/epoberezkin/ajv#data-reference
var ajv = new Ajv({$data: true});
var schema = {
"properties": {
"smaller": {
"type": "number",
"maximum": { "$data": "1/larger" }
},
"larger": { "type": "number" }
}
};
var validData = {
smaller: 5,
larger: 7
};
ajv.validate(schema, validData); // true
This would not work for anyone else using your schemas.
I am trying to display data from table in sorted way. I want to display content ordered by creation date. I add sortInfo, but it does not work! I use angular ui-grid. Here is my code
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{ field: 'name'},
{ field: 'age'},
{ field: 'creationDate', cellFilter : "date:'yyyy-MM-dd'"}
],
sortInfo: {
fields: ['creationDate'],
directions:['desc']
}
};
Is it possible to set sort by default here? And how to do it?
I didn't found in ui-grid docs sortInfo option.
Your gridOptions is not set right. You need to add the sort property to your column definition like below, the priority is what makes it sort by default. Lower priority gets sorted first. Read more here http://ui-grid.info/docs/#/tutorial/102_sorting
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{
field: 'name',
sort: {
direction: uiGridConstants.DESC,
priority: 1
}
}
}
Is is possible to for the KendoUI Chart (Area) to have multiple data labels or even a concatenation of two? I need to display both a value and a percentage for each data point. Is this something that would need to be handled on the data source side or is it on the view?
Thanks for any help.
You can use templates to format both labels and tooltips; see labels.template and tooltip.template.
The key is to reference the Property you want using dataItem ex:
dataItem.TotalDollars
template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
The answer above wont really help unless you have a strong understanding of the Kendo UI framework. I was having a similar issue and before I found my answer I found this question. I circled back because the answer is simple and some simple example code is really simple. Lets save everyone some clicks.
DATA RESPONSE FROM REMOTE DATA (copy and past for local binding):
[
{
"ProgramName":"Amarr Garage Doors",
"PercentageShare":50.12,
"TotalDollars":5440.000000
},
{
"ProgramName":"Monarch Egress Thermal Hinge C",
"PercentageShare":4.64,
"TotalDollars":504.000000
},
{
"ProgramName":"Monarch Egress Window Wells",
"PercentageShare":15.73,
"TotalDollars":1707.000000
},
{
"ProgramName":"Monarch Premier V Egress Windo",
"PercentageShare":16.25,
"TotalDollars":1764.000000
},
{
"ProgramName":"Organized Living Shelftech Ven",
"PercentageShare":13.27,
"TotalDollars":1440.000000
}
]
**Chart Generation Code: **
function createChart() {
$("#SubmissionSummaryByProgramChart").kendoChart({
title: {
text: "Breakdown by Program"
},
legend: {
position: "right"
},
dataSource: {
transport: {
read: {
url: "GetFooData",
dataType: "json",
data: {
Year : 2014,
Quarter : 1,
}
}
}
},
series: [{
type: "pie",
field: "PercentageShare",
categoryField: "ProgramName"
}],
tooltip: {
visible: true,
template: "${ category } - #= kendo.format('{0:C}', dataItem.TotalDollars)#"
}
});
};
$(document).ready(createChart);
I'm new to the vegas plug-in. I think I've followed the directions correctly.
My script in the :
$.vegas('slideshow', {
delay:5000,
backgrounds:[
{ src:'img/dark1-500.jpg', fade:1500 },
{ src:'img/dark2-500.jpg', fade:1500 },
{ src:'img/dark3-500.jpg', fade:1500 },
{ src:'img/dark4-500.jpg', fade:1500 },
]
})('overlay', {
src:'img/01.png',
opacity:0.5
});
I also have this in CSS:
.vegas-overlay {
background:transparent url(img/01.png);
opacity:0.5;
z-index:-1;
}
Do both overlay declarations need to be there? Is one stepping on the other?
Thanks for any help.
J
I figured this out by deleting one and then the other declaration.
I am looking for an example where JSON constructed from the server side is used to represent objects that are then translated into customized widgets in dojo. The JSON would have to be very specific in its structure, so it would not be a very general solution. Could someone point me to an example of this. It would essentially be the reverse of this
http://docs.dojocampus.org/dojo/formToJson
First of all let me point out that JSON produced by dojo.formToJson() is not enough to recreate the original widgets:
{"field1": "value1", "field2": "value2"}
field1 can be literally anything: a checkbox, a radio button, a select, a text area, a text box, or anything else. You have to be more specific what widgets to use to represent fields. And I am not even touching the whole UI presentation layer: placement, styling, and so on.
But it is possible to a certain degree.
If we want to use Dojo widgets (Dijits), we can leverage the fact that they all are created uniformly:
var myDijit = new dijit.form.DijitName(props, node);
In this line:
dijit.form.DijitName is a dijit's class.
props is a dijit-specific properties.
node is an anchor node where to place this dijit. It is optional, and you don't need to specify it, but at some point you have to insert your dijit manually.
So let's encode this information as a JSON string taking this dijit snippet as an example:
var myDijit = new dijit.form.DropDownSelect({
options: [
{ label: 'foo', value: 'foo', selected: true },
{ label: 'bar', value: 'bar' }
]
}, "myNode");
The corresponding JSON can be something like that:
{
type: "DropDownSelect",
props: {
options: [
{ label: 'foo', value: 'foo', selected: true },
{ label: 'bar', value: 'bar' }
]
},
node: "myNode"
}
And the code to parse it:
function createDijit(json){
if(!json.type){
throw new Error("type is missing!");
}
var cls = dojo.getObject(json.type, false, dijit.form);
if(!cls){
// we couldn't find the type in dijit.form
// dojox widget? custom widget? let's try the global scope
cls = dojo.getObject(json.type, false);
}
if(!cls){
throw new Error("cannot find your widget type!");
}
var myDijit = new cls(json.props, json.node);
return myDijit;
}
That's it. This snippet correctly handles the dot notation in types, and it is smart enough to check the global scope too, so you can use JSON like that for your custom dijits:
{
type: "my.form.Box",
props: {
label: "The answer is:",
value: 42
},
node: "answer"
}
You can treat DOM elements the same way by wrapping dojo.create() function, which unifies the creation of DOM elements:
var myWidget = dojo.create("input", {
type: "text",
value: "42"
}, "myNode", "replace");
Obviously you can specify any placement option, or no placement at all.
Now let's repeat the familiar procedure and create our JSON sample:
{
tag: "input",
props: {
type: "text",
value: 42
},
node: "myNode",
pos: "replace"
}
And the code to parse it is straightforward:
function createNode(json){
if(!json.tag){
throw new Error("tag is missing!");
}
var myNode = dojo.create(json.tag, json.props, json.node, json.pos);
return myNode;
}
You can even categorize JSON items dynamically:
function create(json){
if("tag" in json){
// this is a node definition
return createNode(json);
}
// otherwise it is a dijit definition
return createDijit(json);
}
You can represent your form as an array of JSON snippets we defined earlier and go over it creating your widgets:
function createForm(array){
dojo.forEach(array, create);
}
All functions are trivial and essentially one-liners — just how I like it ;-)
I hope it'll give you something to build on your own custom solution.