We Keep Coding

Showing/Hiding child nodes and links in Highcharts Networkgraph

I've built a network graph with Highcharts and I'm struggling to find a way to easily "expand" or "show" a node's children. The problem I've got is that the way the data is declared is very linear. It doesn't really have much of a hierarchy.
Here's a pen of what I have so far https://codepen.io/anon/pen/xvGMwa. The issue I have is that the "links" aren't associated with the nodes. So I can't easily find a group of nodes and their links and hide/show them.
What I'd like is for it to start off with just the first 4 nodes and then be able to click an action on the node to show/hide its children. I'd ideally do this with CSS.
The nearest I've found is this example but it's not really what I want:
point: {
events: {
click: function() {
this.remove();
}
}
}
Weirdly, the example from Highcharts here https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/series-networkgraph/data-options/ has ids on the links. But my example doesn't. I don't know why that is? I think if I had ids on my links then it'd be easier to find them and hide/show them.

By clicking on the node you can find its links in point.linksTo and point.linksFrom arrays.
To show and hide them just use Highcharts.SVGElement.hide() and Highcharts.SVGElement.show() methods. Check demo and code posted below.
Code:
series: [{
...
point: {
events: {
click: function() {
var point = this;
if (!point.linksHidden) {
point.linksHidden = true;
point.linksTo.forEach(function(link) {
link.graphic.hide();
link.fromNode.graphic.hide();
link.fromNode.dataLabel.hide();
})
} else {
point.linksHidden = false;
point.linksTo.forEach(function(link) {
link.graphic.show();
link.fromNode.graphic.show();
link.fromNode.dataLabel.show();
})
}
}
}
}
...
}]
Demo:
https://jsfiddle.net/BlackLabel/9drzxj2L/
API reference:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#hide
https://api.highcharts.com/class-reference/Highcharts.SVGElement#show

Froala Wysiwyg - adding custom and toolbar buttons in a custom dropdown

I'm trying to create a more custom dropdown for adding all the toolbar buttons under it when toolbarXS is activated (all the missing icons in the XS should be under the more dropdown.
unfortunately the docs aren't that clear and outputting only text options which does nothing besides showing.
i was wondering if anybody could help in how to do it.
i.e
// define annotation button for imagePopup
$.FroalaEditor.DefineIcon('annotationIcon', { NAME: 'pencil'}); // the icon
$.FroalaEditor.RegisterCommand('annotation', { // the button
title: 'Annotation',
icon: 'annotationIcon',
undo: true, // Save the button action into undo stack.
focus: true, // Focus inside the editor before the callback.
showOnMobile: true, // Show the button on mobile or not.
refreshAfterCallback: true, // Refresh the buttons state after the callback.
// Called when the button is hit.
callback: function () {
annotateImage(this);
}
})
// Define `more` dropdown button.
$.FroalaEditor.RegisterCommand('moreDropdown', {
title: 'More',
icon: 'More',
undo: true,
focus: true,
type: 'dropdown',
options: {
"annotation": 'annotation'
},
});
Thanks in advance
EDIT:
the only way i could figure out now is to use
html: function() {
return 'HTML_CODE'
}
and just write all the ul by myself which is disgusting and doesn't seem like the proper way of doing it.
Any help will be appreciated.

After talking with froala guys!
Custom popup
is a solution for implementing a popup with toolbar buttons as a dropdown.
Thanks

Highchart drillup issue

I am trying to drill up using my own button but having difficulties.
JSfiddle with multi drilldown
$( "#backbtn" ).click(function(e) {
setChartC(name, categories, data, '', 1);
alert(chartC.xAxis[0]);
});
I have levels, how can I access the drilldown.level?
exporting: {
enabled: true,
buttons: {
customButton: {
text: 'Go Back',
onclick: function () {
var drilldown = chartC.drilldown;
alert(chartC.level);
}
}
}
Cant seem to access the level as i got drill down. is there any way I can access the level

You can use the native Highcharts back button. You can see an example here (link author here).
However, if you want to add a custom button, I don't believe that Highcharts have an easy way for that. If you find that I'm wrong, please correct me.
So, to add a custom back button, you need to track what is the current chart that you are showing. Knowing what is the current, you could look into a dictionary to find which level it is. To get the current chart, you can track the click events:
plotOptions: {
column: {
point: {
events: {
click: function () {
console.log("I'm at: " + this.drilldown.name)
}
}
}
}
}
Regarding the custom back button, look this JSFiddle.
Add this HTML:
<input type="button" id="backbtn" value="Back">
And this JS:
$("#backbtn").click(function(e) {
setChart(name, categories, data);
});
Since the variables name, categories and data were defined with the values of the top-level chart, clicking in this button will restore to the top-level.
If you create a tree object with all charts and their name/categories/data info, and if you know the current chart, you can set the Chart with its parent data to implement the custom back button.

ToolTip in bryntum scheduler

I am new to Extjs. I am using the Bryntum scheduler in my application.
In that I want to show tooltip over scheduled item. I checked the Bryntum API and found that I can use **tooltipTpl** to show tooltip and **tipCfg** to configure it. I added eventmouseenter listener and in respective function I tried to add tooltipTpl
My listener is
eventmouseenter: this.eventMouse
and eventMouse function is
function(e) {
e.apply(e.tipCfg,
{
trackMouse: false
});
var tooltipTpl = "My Tool Tip";
e.apply(e,
{
tooltipTpl: tooltipTpl
});
}
but the code doesn't seems to work. Please help me out for using tootipTpl.

You don't need a listener, just use the tooltipTpl configuration on your Scheduler:
tooltipTpl: new Ext.XTemplate('<span>My Tool Tip</span>'),
...
It can be a String as well:
http://www.bryntum.com/docs/scheduling/3.x/?#!/api/Sch.panel.SchedulerGrid-cfg-tooltipTpl
Edit: See the code of this example using tooltips: http://www.bryntum.com/examples/scheduler-latest/examples/performance/performance.html

ExtJs grid.Panel store: keep scrollbar position after load/reload

I'm using grid.Panel in Sencha ExtJs 4.0.2a and I reload a Json Store every 60 seconds.
I was wondering if there is a way to preserve the position of the scrollbar after a data load.
So that the user can continue to look at the records he was looking before the load..
I reload the data in the grid using a Task:
var task = {
run: function(){
Ext.getCmp(panelGridId).getStore().load({
//Callback function after loaded records
callback: function(records) {
//Hide grid if empty records
if (Ext.isEmpty(records)) {
Ext.getCmp(panelGridId).setVisible(false);
}
else {
if (Ext.getCmp(panelGridId).isHidden()) {
Ext.getCmp(panelGridId).setVisible(true);
Ext.getCmp(panelGridId).doComponentLayout();
}
}
}
});
},
interval: 60000 //60 seconds
};
Ext.TaskManager.start(task);
After the data load the scrollbar position is reset to the top..
Q: Is there a way to maintain the scrollbar position after the data load?
Thanks in advance!

Try this bad boy to preserve scroll position on refresh:
http://docs-devel.sencha.com/extjs/4.2.1/#!/api/Ext.grid.View-cfg-preserveScrollOnRefresh
This works for me on my tree view.
viewConfig: {
preserveScrollOnRefresh: true
}

Here's how you would use preserveScrollOnRefresh in your Grid :
Ext.define('js.grid.MyGrid', {
extend: 'Ext.grid.Panel',
viewConfig: {
preserveScrollOnRefresh: true
}
Here's a JSFiddle which demonstrates this :
http://jsfiddle.net/cdbm6r0o/7/
However when you select a row it doesn't seem to work quite right. I am not sure if this is a bug.
The 'refresh' event is triggered from this code :
grid.store.loadData(dataToLoad);
I'm unaware of any other events which trigger a 'refresh'
Additional Notes :
I had the Ext.toolbar.Paging as a require. Even though I didn't use it, it screwed up the scroll preserve when I had one or more rows selected, so make sure you remove the Paging from your requires.
The scroll preserve does not appear to work if I use the bufferedrenderer plugin on the table at the same time.
tablePanel.getView().focusRow(recrow) is also interesting to look at, but also does not work with bufferedrenderer.

You can use the preserveScrollOnReload view config property:
viewConfig: {
preserveScrollOnReload: true
},