We Keep Coding

Nested set tree view data structure using with recursing and traversal techniques in MongoDB or JavaScript

Hey I'm trying to implement nested drag&drop within re-order sequencesin my MERN app. I working to find ideal approach for mongodb data model and implement to Lexicographic order or linked lists for infinite sub folders. I used Model Tree Structures in this link but every node have limitless children for that require recursion and recursive functions or currying. Documentations not clear enough for make do that.
I want show all tree once and not sohuld appear after than click to arrow icon.There is my doodles for front side generation that working with only one depth such like graph nodes. Maybe Modified Preorder Tree Traversal implementation examples you have for this scenario.
const tree = data => { // immutable array
let ascendants = data.filter(d=>d.parent==null)
let descandants = data.filter(d=>d.parent)
**strong text**
let form = []
ascendants.map(a=>{
let node1 = {...a}; /// copying
let node1Children = [];
descandants.map(b=>{
let node2 = {...b};
if(node1._id == b.parent){
node1Children.push(node2)
}
})
node1.children = node1Children;
form.push(node1);
})
return form;
}
I cant take result with using $graphLookup because list format is not what i want.Could you give me some mongodb playground or grouping aggregate solutions? Below json examples shown my expecting results. I can do before but hardcode is unapropriate and performless. Is comparing good way?
[
// mongo database
{_id:123, title:'Books', slug:'books', parent:null },
{_id:124, title:'Programming', slug:'programming', parent:null },
{_id:125, title:'JavaScript', slug:'javascript', parent:'programming' },
{_id:126, title:'C++',slug:'cpp', parent:'programming' },
{_id:127, title:'React', slug:'react', parent:'javascript' },
{_id:128, title:'Redux', slug:'redux', parent:'react' },
{_id:129, title:'Toolkit', parent:'redux' },
{_id:130, title:'Saga', parent:'redux' },
{_id:131, title:'Nodejs', parent:'programming' },
{_id:132, title:'Databases', slug:'databases' },
{_id:133, title:'MongoDB', parent:'databases' },
]
[
// what i want
{ title: "Books"},
{ title: "Programming", parent:"computer-science", children: [
{ title: "JavaScript", children: [
{ title: "React", children: [
{ title: "Redux", children: [
{ title: "Saga" },
{ title: "Thunk" },
{ title: "Mobx" },
{ title: "Observable" },
{ title: "Context" },
{ title: "GraphQL" },
{ title: "Toolkit", children:[
{ title: "typescript" },
{ title: "slices", children:[
{ title: "createAsyncThunk" },
{ title: "createSlice" },
] },
] },
] },
{ title: "Nextjs" },
]},
{ title: "Vue", },
{ title: "angular", },
]},
{ title: "C++", },
{ title: "NodeJS", },
] },
{ title: "MongoDB", parent: "databases"},
]

You could create a Map to key your objects by slug. The values per key will be the result objects for parent objects. Include an entry for null, which will collect the top-level elements.
Then iterate the data again to populate children arrays -- when that property does not exist yet, create it on the fly. Finally output the top-level elements.
function makeTree(data) {
let children = []; // Top-level elements
let map = new Map(data.map(({title, slug}) => [slug, { title }]))
.set(null, {children});
for (let {slug, parent, title} of data) {
(map.get(parent || null).children ??= [])
.push(slug ? map.get(slug) : {title});
}
return children;
}
// Your mongodb data:
const data = [{_id:123, title:'Books', slug:'books', parent:null },{_id:124, title:'Programming', slug:'programming', parent:null },{_id:125, title:'JavaScript', slug:'javascript', parent:'programming' },{_id:126, title:'C++',slug:'cpp', parent:'programming' },{_id:127, title:'React', slug:'react', parent:'javascript' },{_id:128, title:'Redux', slug:'redux', parent:'react' },{_id:129, title:'Toolkit', parent:'redux' },{_id:130, title:'Saga', parent:'redux' },{_id:131, title:'Nodejs', parent:'programming' },{_id:132, title:'Databases', slug:'databases' },{_id:133, title:'MongoDB', parent:'databases' }];
console.log(makeTree(data));

How to fiddle an easy OnDemandList (dgrid)?

I have tried to create a very simple jsfiddle to test an OnDemandList (sitepen/dgrid). But it does not render any rows. Does anybody have an idea what I have done wrong? Is it that a simple dstore/Memory does not offer methods like fetchRange? The jsFiddle can be found here: http://jsfiddle.net/rbeqqr2g/25/
require({
packages: [
{
name: 'dgrid',
location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
},
{
name: 'xstyle',
location: '//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
},
{
name: 'put-selector',
location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
},
{
name: 'dstore',
location: '//cdn.rawgit.com/SitePen/dstore/master'
}
]
}, [
'dgrid/OnDemandList',
'dstore/Memory',
'dojo/dom',
], function(OnDemandList, Memory, dom) {
var data = [
{ id: 1, name: 'Peter' },
{ id: 2, name: 'Paul' },
{ id: 3, name: 'Mary' }
];
var store = new Memory({
data: data
});
var list = new OnDemandList({
collection: store,
minRowsPerPage: 5,
noDataMessage: "Keine Daten vorhanden",
renderRow: function (object, options) {
console.log("Zeile wurde gerendert.")
var div = document.createElement('div');
div.appendChild(document.createTextNode(object.name));
return div;
}
}, dom.byId('list'));
list.startup();
});

You're using the most recent dstore, but an old dgrid. The < 1.x versions of dgrid did not support dstore, you can use a regular dojo/store/Memory instead. In dgrid < 1.x, you also needed a store property instead of collection.
require({
...
}, [
'dgrid/OnDemandList',
//'dstore/Memory',
'dojo/store/Memory', // < --- regular dojo/store
'dojo/dom',
], function(OnDemandList, Memory, dom) {
...
...
var list = new OnDemandList({
//collection: store,
store: store, // <--- store property
...
}, dom.byId('list'));
list.startup();
});
http://jsfiddle.net/rbeqqr2g/28/
Alternatively, unless you're stuck with dgrid 0.3.x, you can also simply use the modern dgrid:
{
name: 'dgrid',
location: '//cdn.rawgit.com/SitePen/dgrid/v1.1.0'
//location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
},

Loading updated data with GeoJsonDataSource in Cesium.js

I'm trying to integrate Cesium 1.11 with an existing backend sending GeoJSON. I'm able to load data onto the view successfully from the first message, however subsequent calls to load() do not update the display.
I've simplified the problem to the following, also available as a fiddle.
I expect the second load call to update the display to move the marker to New York, however it stays on London.
Feature window still shows the "foo" property as 123, I expect 456.
Code
var viewer = new Cesium.Viewer('cesiumContainer');
var source = new Cesium.GeoJsonDataSource("name123");
viewer.dataSources.add(source);
source.load({
type: "FeatureCollection",
crs: {
type: "name",
properties: {
name: "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
features: [{
type: "Feature",
properties: {
foo: 123,
},
geometry: {
type: "Point",
coordinates: [0.1275, 51.5072] // London
},
id: "123"
}]
});
// workaround, but has side effect of destroying feature window
// source.entities.removeAll();
// sometime later...
source.load({
type: "FeatureCollection",
crs: {
type: "name",
properties: {
name: "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
features: [{
type: "Feature",
properties: {
foo: 456,
},
geometry: {
type: "Point",
coordinates: [-75.1890, 42.3482] // New York
},
id: "123"
}]
});
What I've tried
"forced" an update by calling source.entities.removeAll() however this has the side effect of closing the feature window if it is open during the the update. I'm receiving messages every second so this is not desirable.
Yes, I'm aware of the proprietary CZML system, however I'd like to stick to GeoJSON for this relatively simple system.
Update: further debugging. The problem appears to be a design feature...
load() helper method in GeoJsonDataSource calls that._entityCollection.removeAll(). This is between a suspendEvents() and resumeEvents() so does not cause the feature window to close.
After the resumeEvents() "change" events are fired even though the entities have actually been recreated
The existing BillboardVisualizer created by Cesium.Viewer keeps a cached instances to the Entities it used the first time it rendered
BillboardVisualizer.update() keeps reading the first position from the 'stale' entity instances and therefore no update is seen.

This looks like a bug in Cesium I just submitted issue #2891 and will try and get a fix into the 1.12 release on August 3rd. In the meantime, you should be able to workaround the issue using your removeAll strategy combined with resetting the selected entity after the load (which should keep the InfoBox around, which is what I assume you mean by feature window.) Here's a complete example that you can based into Sandcastle to see it in action.
var viewer = new Cesium.Viewer('cesiumContainer');
var source = new Cesium.GeoJsonDataSource("name123");
viewer.dataSources.add(source);
Sandcastle.addToolbarButton('Load 1', function(){
source.entities.removeAll();
source.load({
type: "FeatureCollection",
crs: {
type: "name",
properties: {
name: "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
features: [{
type: "Feature",
properties: {
foo: 123
},
geometry: {
type: "Point",
coordinates: [0.1275, 51.5072] // London
},
id: "123"
}]
}).then(function(){
viewer.selectedEntity = source.entities.values[0];
});
});
Sandcastle.addToolbarButton('Load 2', function() {
source.entities.removeAll();
source.load({
type: "FeatureCollection",
crs: {
type: "name",
properties: {
name: "urn:ogc:def:crs:OGC:1.3:CRS84"
}
},
features: [{
type: "Feature",
properties: {
foo: 456
},
geometry: {
type: "Point",
coordinates: [-75.1890, 42.3482] // New York
},
id: "123"
}]
}).then(function(){
viewer.selectedEntity = source.entities.values[0];
});
});

An alternative solution is to just use the GeoJsonDataSource for the creation of entities from JSON, and add the adding/updating manually into the viewer global entities collection
var viewer = new Cesium.Viewer('cesiumContainer');
var source = new Cesium.GeoJsonDataSource("name123");
// don't add source to viewer
source.load(...);
// sometime later...
source.load(...);
// manually update
viewer.entities.suspendEvents();
source.entities.values.forEach(function(entity) {
var existing = viewer.entities.getById(entity.id);
if (existing === undefined) {
viewer.entities.add(entity);
} else {
entity.propertyNames.forEach(function(name) {
existing[name] = entity[name];
});
}
}, this);
viewer.entities.resumeEvents();

Celleditor for object value Extjs4

I'm looking for a best solution how to do this.
What I have:
// model
Ext.define("User", {
extend: "Ext.data.Model",
fields: [
{name: "id", type: "int"},
{name: "name"},
{name: "description", type: "string"}
]
});
// store with data
var oStore = new Ext.data.Store({
model: "User",
data: [
{id: 1, name: {name:"John"}, description: "Fapfapfap"},
{id: 2, name: {name:"Danny"}, description: "Boobooboo"},
{id: 3, name: {name: "Tom"}, description: "Tralala"},
{id: 4, name: {name:"Jane"}, description: "Ololo"},
]
});
// and finally I have a grid panel
Ext.create("Ext.grid.Panel", {
columns: [
{dataIndex: "id", header:"ID"},
{
dataIndex: "name",
header: "Name",
renderer: function(value){return value.name;},
editor: "textfield"},
{dataIndex: "description", header: "Description", flex: 1, editor: "htmleditor"}
],
plugins: [new Ext.grid.plugin.CellEditing({clicksToEdit: 2})],
store: store,
renderTo: document.body
});​
When I doublecick on a cell I see [object] Object in editor's field, and when I enter valid value than I see empty cell in the grid.
So, the question is – how could I setup celleditor to get data not from record.name but from record.name.name?

You can override get and set methods on model, so the will support multi-level field names. Below is sample implementation.
Ext.define("User", {
extend: "Ext.data.Model",
fields: [
{name: "id", type: "int"},
{name: "name"},
{name: "description", type: "string"}
],
get: function(key) {
if (Ext.isString(key) && key.indexOf('.') !== -1) {
var parts = key.split('.');
var result = this.callParent([ parts[0] ]);
return result[parts[1]];
}
return this.callParent(arguments);
},
set: function(key, value) {
if (Ext.isString(key) && key.indexOf('.') !== -1) {
var parts = key.split('.');
var result = this.get(parts[0]);
result[parts[1]] = value;
this.callParent([ parts[0], result ]);
return;
}
this.callParent(arguments);
}
});
I am not sure if store detects change made to name.name field. If no, you should also probably mark record as dirty.
Working sample: http://jsfiddle.net/lolo/dHhbR/2/

The editor accepts whatever value is provided in the "dataIndex" field of the column. Since "name" is an object, that's what you're getting. After entering a name in the editor, value is equal to a string (not an object) and your renderer is trying to get the name property of the string.
The easiest way to fix this is to make the "name" field of your store a string instead of an object. However, I'm assuming there's a reason you want to do it this way.
The CellEditing plugin has three events it can listen for: beforeedit, edit, and validateedit. You can implement a beforeedit listener to get the "name" object from the column, then get the "name" property of that object and fill the editor with that value. Then on validateedit, get the value from the editor and set the "name" property of the "name" object in the record with that value.
For quick reference, here's the event definition: CellEditing events

An easier way is to modify your User Model object to map the "name" property differently:
{name: "name", mapping:'name.name'}
then everything else stays the same.

How to fill an Ext.form.CheckboxGroup with checkboxes generated based on a JSON object returned from a server

I'm trying to dynamically fill an Ext.form.CheckboxGroup with Ext.form.Checkboxs derived from a JSON object pulled from a jsp page. My JSON object looks like this:
{
"sensors": [
{ "id": 200, "name": "name - B - A" },
{ "id": 201, "name": "name - B - B" },
{ "id": 202, "name": "name - C - A" },
{ "id": 203, "name": "name - C - B" }
]
}
I can load these objects into an Ext.data.JsonStore with code like this:
new Ext.data.JsonStore({
id: 'sensorStore',
autoLoad: true,
method: 'GET',
baseParams: {
jobType: 'sensor'
},
url: 'getstatus.jsp',
root: 'sensors',
sortInfo: { field: 'id', direction: 'ASC' },
fields: [ 'id', 'name' ]
}),
My understanding is that this will give me access to a set of Ext.data.Record objects, but I can't figure out how to go about iterating through those Records to create any Ext.form.Checkboxs, or if there's some other way of achieving the same result.
I'm not trying to set the values of the checkboxes, though I will need to be able to reference them when I submit the form.

Assuming the store is loaded (since you have autoLoad:true), you need to
iterate through the records to create an array of checkbox configs
create the checkboxgroup object (using the array created in #1 above as items config)
add this checkboxgroup to your form (or whatever container) and call this container's doLayout() if it is already rendered
Snippet to iterate and create checkbox configs-
var checkboxconfigs = []; //array of about to be checkboxes.
mystore.getRange().each(function(record){
checkboxconfigs.push({ //pushing into array
id:record.data.id,
boxLabel:record.data.name,
//any other checkbox properties, layout related or whatever
});
});
Snippet to create checkboxgroup-
var myCheckboxgroup = new Ext.form.CheckboxGroup({
id:'myGroup',
fieldLabel: 'Checkboxes in two columns',
columns:2,
items:checkboxconfigs //created in previous snippet.
//any other checkbox group configuration
});
Add to your container and redraw it-
mycontainer.add(myCheckboxgroup).doLayout();
EDIT - Your JsonStore config does not match to the data returned. (id needs to be an int)
new Ext.data.JsonStore({
id: 'sensorStore',
autoLoad: true,
method: 'GET',
baseParams: {
jobType: 'sensor'
},
url: 'getstatus.jsp',
root: 'sensors',
sortInfo: { field: 'id', direction: 'ASC' },
fields: [ {name:'id', type:int}, 'name' ]
}),