Develop Reference

Deleting a key in JSON while making ajax call from javascript

I am new to java script and ajax. I have a JSON and I want to remove outputs cell in this JSON:
{
"cells": [{
"metadata": {
"trusted": true,
"collapsed": false
},
"cell_type": "code",
"source": "print(\"hi\")",
"execution_count": 1,
"outputs": [{
"output_type": "stream",
"text": "hi\n",
"name": "stdout"
}]
},
{
"metadata": {
"trusted": true,
"collapsed": true
},
"cell_type": "code",
"source": "",
"execution_count": null,
"outputs": []
}
],
"metadata": {
"kernelspec": {
"name": "Python [Root]",
"display_name": "Python [Root]",
"language": "python"
},
"anaconda-cloud": {},
"language_info": {
"pygments_lexer": "ipython3",
"version": "3.5.0",
"codemirror_mode": {
"version": 3,
"name": "ipython"
},
"mimetype": "text/x-python",
"file_extension": ".py",
"name": "python",
"nbconvert_exporter": "python"
},
"gist": {
"id": "",
"data": {
"description": "Untitled5.ipynb",
"public": true
}
}
},
"nbformat": 4,
"nbformat_minor": 0
}
and this is my attempt on removing the outputs cell. This piece of code posts the data to above mentioned JSON:
"use strict";
function _objectWithoutProperties(obj, keys) {
var target = {};
for (var i in obj) {
if (keys.indexOf(i) >= 0) continue;
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
target[i] = obj[i];
}
return target;
}
var outputs = data.cells;
var data_dup = _objectWithoutProperties(data, ["outputs"]);
var id_input = $('#gist_id');
var id = params.gist_it_personal_access_token !== '' ? id_input.val() : '';
var method = id ? 'PATCH' : 'POST';
// Create/edit the Gist
$.ajax({
url: 'https://api.github.com/gists' + (id ? '/' + id : ''),
type: method,
dataType: 'json',
data: JSON.stringify(data_dup),
beforeSend: add_auth_token,
success: gist_success,
error: gist_error,
complete: complete_callback
});
};
But this code doesnt work. Can some one please guide how can we directly strip a key(outputs in this case) from ajax call and post it to JSON.
This is a gist extension of jupyter notebook and I am trying to strip output while posting it to gist on github

function _objectWithoutProperties(obj, key="outputs") { obj.cells.forEach(cell=>delete(cell[key])); }

If you use ES6, you can use this syntax to remove outputs:
{
...data,
cells: data.cells.map(({ outputs, ...otherProps }) => otherProps),
}
Note: data is your complete object.

Store Result of Renamed JS.Tree Node

I have an editable tree structure. A user can create, rename and delete individual nodes. Right now, when I choose a node to rename, I store the original value in a variable using this code.
function rename() {
var data = null;
data = $(plBox2).jstree().get_selected(true)[0].text;
console.log(data);
}
This function is called when when "Rename" is selected in the context menu. What I want to do is store the new value of that node after it is renamed but I cannot figure it out. My ultimate goal is to send both the old value and the new value to a MySQL table.
Here is my tree and context menu:
$('#plBox2').jstree({
"checkbox": {
"keep_selected_style": false
},
"core" : {
"themes": {
"name": "default",
"dots": true,
"icons": true,
},
"check_callback": true,
},
"plugins" : [
"massload", "wholerow", "contextmenu", "changed", "sort", "dnd",
],
"contextmenu":{
"items": function($node) {
var tree = $("#plBox2").jstree(true);
return {
"Info": {
"separator_before": false,
"separator_after": false,
"label": "Info",
"action": function (obj) { document.getElementById('finInfo').style.display='block';
}
},
"Create": {
"separator_before": false,
"separator_after": false,
"label": "Create",
"action": function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
inst.create_node(obj, {}, "last", function (new_node) {
new_node.data = {file: true};
setTimeout(function () { inst.edit(new_node); },0);
});
}
},
"Rename": {
"separator_before": false,
"separator_after": false,
"label": "Rename",
"action": function (obj) {
tree.edit($node);
rename();
}
},
"Remove": {
"separator_before": false,
"separator_after": false,
"label": "Remove",
"action": function (obj) {
tree.delete_node($node);
}
}
};
}
},
HTML:
<div class="2colWrap">
<div class="col1">
<div id="plBox2"></div>
</div>
<div class="col2">
<div id="finishBox"></div>
</div>
</div>
Thanks!

You can use this statement below!
"Rename": {
"separator_before": false,
"separator_after": false,
"label": "Rename",
"action": function (obj) {
console.log("waht?");
currentNode = $node;
//tree.edit($node);
tree.edit('j1_1', null, function (node, status) {
debugger;
console.log("old name: " + node.original.text);
console.log("new: " + node.text);
console.log(arguments);
});
}
},

custom messages displayed in amchart pdf downloaded file

I am using amchart version 3.16.I need custom messages to be displayed in amchart downloaded pdf image instead of showing 'Saved from:url'.
How can I have custom messages in downloaded file ?
The code is something like this.
"menu": [ {
"label": "Download",
"menu": [
{ "label": "PNG",
click: function() {
this.capture({},function() {
this.toPNG( {}, function( data ) {
this.download( data, "image/png", fileName+'.png');
});
});}},
{ "label": "JPG",
click: function() {
this.capture({},function() {
this.toJPG( {}, function( data ) {
this.download( data, "image/jpg", fileName+'.jpg');
});
});}},
{ "label": "SVG",
click: function() {
this.capture({},function() {
this.toSVG( {}, function( data ) {
this.download( data, "text/xml", fileName+'.svg');
});
});}},
{ "label": "PDF",
click: function() {
this.capture({},function() {
this.toPDF( {}, function( data ) {
this.download( data, "application/pdf", fileName+'.pdf');
});
});}}]
},
{
"label": "Save as..",
"menu": [ { "label": "CSV"},
{ "label": "XLSX"}
]
},
{
"label": "Print",
"format":"PRINT"
},
{ "label": "Annotate",
"action": "draw",
"drawing":
{
"fontSize": 30
}
}]

In export.js, you can change the following code...
["Saved from:", window.location.href, {image: "reference", fit: [523.28, 769.89]}]
with this one:
[{image: "reference", fit: [523.28, 769.89]}]

In export.js, you can comment/change as per your need the following code...
if ( cfg.pageOrigin ) {
pageContent.push( _this.i18l( "label.saved.from" ) );
pageContent.push( window.location.href );
pageDimensions[ 1 ] -= ( 14.064 * 2 );
}
========================================================================

D3.js node color based on type

Given the below json structure:
{
"nodes": [
{
"type": "school",
"country": "US",
"name": "saint peter's",
"id": 1006
},
{
"type": "univeristy",
"country": "Brazil",
"name": "saint joseph's",
"id": 1007
}
...
],
"links": [
{
"source": 1006,
"target": 1007,
"value": 20
},
],
"types": [
{
"type": "school",
"image": "image01"
},
{
"type": "univeristy",
"image": "image02"
},
{
"type": "company",
"image": "image03"
},
]
}
I get the list of the type of nodes from types.type and append it to a html tag; assigning a color to each list item. When I change the color in the color picker container, in any of the list items, it only changes the color for .school , because it is hardcoded in here MyNode = d3.select("#node").selectAll(".school").select("circle");
how can I change it to match the type in the list item with the node type found in the nodes.type?
$(document).ready(function () {
$.getJSON("data.json", function (obj) {
$('#filterColor').data('types', obj.types.map(function (o) {
// console.log(o.type);
return o.type;
})).append(obj.types.map(function (o) {
return '<li>' + o.type + '<input class="color-picker" type="text"/></li>';
}).join(''));
$("#filterColor .color-picker").each(function(){
$(this).spectrum({
color: (function (m, s, c) {
return (c ? arguments.callee(m, s, c - 1) : '#') +
s[m.floor(m.random() * s.length)]
})(Math, '0123456789ABCDEF', 5),
preferredFormat: "rgb",
showInput: true,
showPalette: true,
showAlpha: true,
palette: [["red", "rgba(0, 255, 0, .5)", "rgb(0, 0, 255)"]],
change: function(color) {
MyNode = d3.select("#node").selectAll(".school").select("circle");
MyNode.style("fill", function(d) { return d3.rgb(color.toHexString()) });
ColorSchool = d3.rgb(color.toHexString());
}
});
});
});
});
which passes into this function:
function ColorType(d)
{
if (d.type == "school") { return ColorSchool;}
if (d.type == "univeristy"){ return Coloruniveristy;}
if (d.type == "company"){ return Colorcompany;}
}

You could store the type reference in the actual element, in a custom attribute. Since it's only one string you need, this might be enough to fix your problem.
When creating the <li> element, you add an attribute, e.g.: data-fortype, with the o.type string.
In the each that initializes the spectrum thingy, you extract it using this.getAttribute or the jQuery equivalent.
An example, in vanilla js: (I don't really know the jQuery API, sorry about that)
var data = {
"types": [{
"type": "school",
"image": "image01"
}, {
"type": "univeristy",
"image": "image02"
}, {
"type": "company",
"image": "image03"
}]
};
// Make UI from code:
makeUI();
function makeLi(type) {
return "<li>" +
type.type +
// (1) Here, the selector is stored in attr.
"<input class='test' data-forType='" +
type.type +
"' type='text' /></li>"
};
function onChange(e) {
// (2) Here, we retreive the attribute
console.log("Selector: " + e.target.getAttribute("data-forType"));
};
function makeUI() {
data.types.forEach(function(type) {
document.querySelector("ul").innerHTML += makeLi(type);
});
Array.from(document.querySelectorAll("li"))
.forEach(function(el) {
el.addEventListener("change", onChange);
});
};
<ul>
</ul>

jstree select_node.jstree not firing

I am using jstree and select_node.jstree wont fire, here is the code
$(document).ready(function () {
//$("#MySplitter").splitter();
setupSplitter();
$("#divJsTreeDemo").jstree({
"themes": {
"theme": "default",
"dots": false,
"icons": false
},
"plugins": [
"core", "themes", "json_data", "ui", "types"
],
"types": {
// I set both options to -2, as I do not need depth and children count checking
// Those two checks may slow jstree a lot, so use only when needed
"max_depth": -2,
"max_children": -2,
// I want only `drive` nodes to be root nodes
// This will prevent moving or creating any other type as a root node
"valid_children": ["drive"],
"types": {
// The default type
"default": {
// I want this type to have no children (so only leaf nodes)
// In my case - those are files
"valid_children": "none",
// If we specify an icon for the default type it WILL OVERRIDE the theme icons
"icon": {
"image": "../../Repository/Images/file.png"
}
},
// The `folder` type
"folder": {
// can have files and other folders inside of it, but NOT `drive` nodes
"valid_children": ["default", "folder"],
"icon": {
"image": "../../Repository/Images/folder.png"
}
}
}
},
"json_data": {
"ajax": {
"type": "POST",
"url": "GetTreeNodes",
"data": function (n) {
var myJSONText = JSON.stringify({ id: n.attr ? n.attr("id").replace("node", "") : 0 }, replacer);
return { id: n.attr ? n.attr("id").replace("node", "") : 0 };
},
"success": function (data) {
$(".folder-file-container").remove();
RenderFileFolder(data);
}
}
// "data": {
// // `data` can also be an object
// "data": {
// "title": "The node title",
// // omit when not needed
// "attr": {},
// // if `icon` contains a slash / it is treated as a file, used for background
// // otherwise - it is added as a class to the <ins> node
// "icon": "../../Repository/Images/pdf.png"
// },
// // the `metadata` property will be saved using the jQuery `data` function on the `li` node
// }
}
}).bind("select_node.jstree", function (e, data) {
alert(data.rslt.obj.data("id"));
});
});

Try this instead:
.bind("select_node.jstree", function (e, data) {
var a = $.jstree._focused().get_selected();
alert(a);
}
(taken from jstree select node).