I am very new to the Angular and PrimeNG components. I want to build a tree view with children nodes, and PrimeNG offered the solution out of the box with the component. However, all the examples have hard-coded data sources. In my case, the data source is from the database, and I don't know if I have to shape my data to match what the P-Tree expected (see below). If yes, what is the technique for doing it?
Here is an example of the data source for P-Tree.
{
"label": "Pictures",
"data": "Pictures Folder",
"expandedIcon": "pi pi-folder-open",
"collapsedIcon": "pi pi-folder",
"children": [
{"label": "barcelona.jpg", "icon": "pi pi-image", "data": "Barcelona Photo"},
{"label": "logo.jpg", "icon": "pi pi-file", "data": "PrimeFaces Logo"},
{"label": "primeui.png", "icon": "pi pi-image", "data": "PrimeUI Logo"}]
}
Yes you would since the data has to match the TreeNode interface.
export interface TreeNode {
data?: any;
children?: TreeNode[];
leaf?: boolean;
expanded?: boolean;
label?: string;
expandedIcon?: string:
collapsedIcon?: string;
}
If you have an API, you can do something like this.
#Injectable()
export class NodeService {
constructor(private http: Http) {}
getFilesystem() {
return this.http.get('showcase/resources/data/filesystem.json')
.toPromise()
.then(res => <TreeNode[]> res.json().data);
}
}
The p-treeSelect and p-treeTable docs has a few good examples:
https://www.primefaces.org/primeng/showcase/#/treeselect https://www.primefaces.org/primeng/showcase/#/treetable.
My question is resolved. A recursive method was used to build a tree hierarchy with the parent ID as root and the children belong the parent. A data table is passed into the method as the parameter. The method iterates through the entire data table.
foreach (DataRow dr in dtData.Select("ParentID = '" + ID+ "'"))
{
// recursive
folder.children.Add(
new ChildFolder()
{
label = dr["Name"].ToString(),
children = GetChildren(Convert.ToInt32(dr["ID"]), dtData),
data = Convert.ToString(dr["ID"])
});
}
return folder;
Related
Background
I am building a single-page-application in React whose data will be retrieved from a relational database. Consider the following two tables:
menu
menu_items
A menu has many menu items. Menu items can be related to other menu items (represented in the database as an adjacency list). On the client, I'm representing it as a tree, i.e.:
{
"id": "menu",
"items": [
{
"id": "item-1",
"name": "Breakfast",
"children": []
},
{
"id": "item-2",
"name": "Lunch",
"children": [{ "id": "item-2-1", "children": [] }]
}
]
}
UI
A tree can get four levels deep and is typically much wider than it is tall. It is currently rendered recursively in the following way:
type Properties = {
items: {
id: string;
name: string;
children: Properties["items"];
}[];
};
const Items = ({ items }: Properties) => (
<ul>
{items.map((item) => (
<li key={item.id}>
{item.name}
<Items items={item.children} />
</li>
))}
</ul>
);
Problem
I have reached the stage where I want to update specific nodes in the tree. This operation seems complex, because it involves searching and replacing entire subtrees. Additionally, it will happen often, i.e. onChange, as a user updates item.name.
Although I don't use Redux, the following article explains it could be better to normalise nested client-side data to make operations like this easier: https://redux.js.org/usage/structuring-reducers/normalizing-state-shape.
Example
const menu = {
"id": "menu",
"itemMap": {
"item-1": { "parentId": null },
"item-2": { "parentId": null },
"item-2-1": { "parentId": "item-2" }
}
}
Question
Would I not have to denormalise/turn it back into a tree to render the UI? If yes, is there any point in my normalising the data?
I don't have a lot of experience with this and am struggling to find the right resources to answer the questions I have.
As with most engineering problems, there isn't a "correct" answer — rather it is a tradeoff: it depends on the expected use.
Your current approach optimizes for the maximum render performance at the cost of mutation performance. By using a tree structure, no transformation is needed at render time (just iteration) — however, arbitrary node lookups within the tree can't be done in constant time.
Another approach is to store the data as an associative array of nodes (Node ID ➡️ Node — e.g. Object/Map), which will optimize for arbitrary node lookup — and you can simply build the tree on every render by including each node's child IDs as part of its structure.
Here's an example of such a structure using the data that you provided:
TS Playground
<script src="https://cdn.jsdelivr.net/npm/#babel/standalone#7.20.15/babel.min.js"></script><script>Babel.registerPreset("tsx", {presets: [[Babel.availablePresets["typescript"], {allExtensions: true, isTSX: true}]]});</script>
<script type="text/babel" data-type="module" data-presets="tsx">
/** Any application-specific data type must satisfy this */
type ValidNode = {
/** Unique */
id: string;
/** Not allowed because of conflict */
children?: never;
};
// Your application-specific data type:
type Item = {
id: string;
name: string;
// etc.
};
type ListNode<T extends ValidNode> = T & {
/** List of child IDs */
children?: string[] | undefined;
};
// An object consisting of ID keys and ListNode values:
type ListNodeMap<T extends ValidNode> = Partial<Record<string, ListNode<T>>>;
const nodeMap: ListNodeMap<Item> = {
"menu": {
id: "menu",
name: "Menu",
children: ["item-1", "item-2"],
},
"item-1": {
id: "item-1",
name: "Breakfast",
},
"item-2": {
id: "item-2",
name: "Lunch",
children: ["item-2-1"],
},
"item-2-1": {
id: "item-2-1",
name: "Irresistibly healthy",
},
};
// A type-safe getter function which throws on bad IDs:
function getNode (
nodeMap: ListNodeMap<Item>,
id: string,
): ListNode<Item> {
const node = nodeMap[id];
if (!node) throw new Error(`Node ID ${JSON.stringify(id)} not found`);
return node;
}
/** The "linked" version of a ListNode */
type TreeNode<T extends ValidNode> = T & {
children?: T[] | undefined;
};
// Note: This uses recursion because it's for tree structures.
// Calling with list nodes having cyclic reference IDs will create an infinite loop.
function createTree (
nodeMap: ListNodeMap<Item>,
id: string,
): TreeNode<Item> {
const node = getNode(nodeMap, id);
return {
...node,
children: node.children?.map(id => createTree(nodeMap, id)),
};
}
console.log("node map:", nodeMap);
console.log("tree:", createTree(nodeMap, "menu"));
</script>
You didn't show how you receive the data, but if your API returns nodes with parent IDs instead of child IDs, then you can simply lookup each parent when acquiring new children and insert the child IDs at the time of acquisition — using an intermediate mapping structure if needed... that's tangential to the asked question.
You also didn't show how you plan to update node names, so I've excluded that part in the linked playground below, but here's an otherwise complete example of the code above with state and a reducer for updating an arbitrary node: Full example with state and reducer in TS Playground
I am building a react frontend client using typescript. I would like to make a request to an api endpoint that will return a list of events. When I get the response from this event I want to map it to an internal type, that will also have extra properties not returned from the API, specifically, I want to associate an icon to an internal type for when it is rendered. The icon is not part of the API and I do not want it to be so it does not couple the front end to the API. API response:
[
{
"identifier": "1",
"name": "Gig"
},
{
"identifier": "2",
"name": "Concert"
},
{
"identifier": "3",
"name": "Some event type here"
}
{
"identifier": "4",
"name": "other"
}
]
So I can request this fine, but I want to map that response back to an internal type of the following definition:
type Event = {
identifier: string;
name: string;
icon: string;
}
Somewhere I want to map the returned labels from the API to an internal list that holds the corresponding icons. I am not sure of the best way to do this, for that mapping to take place I will need an internal list of potential types that will be returned and the icons, or how to do that mapping?
I believe you can use interfaces that can inherit from another interface in this case. You can have 2 interfaces that can be used as your type.
interface Event{
identifier: string;
name: string;
}
interface EventICON extends Event {
icon: string;
}
The Event interface can be used to map your API response and EventICON can be used after you inject your icon list inside the response you get.
I write a really simple schema using graphql, but some how all the IDs in the edges are the same.
{
"data": {
"imageList": {
"id": "SW1hZ2VMaXN0Og==",
"images": {
"edges": [
{
"node": {
"id": "SW1hZ2U6",
"url": "1.jpg"
}
},
{
"node": {
"id": "SW1hZ2U6",
"url": "2.jpg"
}
},
{
"node": {
"id": "SW1hZ2U6",
"url": "3.jpg"
}
}
]
}
}
}
}
I posted the specific detail on github here's the link.
So, globalIdField expects your object to have a field named 'id'. It then takes the string you pass to globalIdField and adds a ':' and your object's id to create its globally unique id.
If you object doesn't have a field called exactly 'id', then it wont append it, and all your globalIdField will just be the string you pass in and ':'. So they wont be unique, they will all be the same.
There is a second parameter you can pass to globalIdField which is a function that gets your object and returns an id for globalIdField to use. So lets say your object's id field is actually called '_id' (thanks Mongo!). You would call globalIdField like so:
id: globalIdField('Image', image => image._id)
There you go. Unique IDs for Relay to enjoy.
Here is the link to the relevant source-code in graphql-relay-js: https://github.com/graphql/graphql-relay-js/blob/master/src/node/node.js#L110
paste the following code in browser console
atob('SW1hZ2U6')
you will find that the value of id is "Image:".
it means all id property of records fetched by (new MyImages()).getAll()
is null.
return union ids or I suggest you define images as GraphQLList
var ImageListType = new GraphQL.GraphQLObjectType({
name: 'ImageList',
description: 'A list of images',
fields: () => ({
id: Relay.globalIdField('ImageList'),
images: {
type: new GraphQLList(ImageType),
description: 'A collection of images',
args: Relay.connectionArgs,
resolve: (_, args) => Relay.connectionFromPromisedArray(
(new MyImages()).getAll(),
args
),
},
}),
interfaces: [nodeDefinition.nodeInterface],
});
I actually have to add some custom fields to every line item within the commercetools platform.
Line Item Docs => http://dev.sphere.io/http-api-projects-carts.html#line-item
There I found this: => http://dev.sphere.io/http-api-projects-custom-fields.html#custom-fields
But apparently the docs for custom-fields are way too less in terms of showing "how to use them". Does somebody has any experience with that? A json example would be wonderful, with a bit more explanation. Thanks in advance.
you can create a custom type for line items using the resource type ID "line-item" or "custom-line-item" (http://dev.sphere.io/http-api-projects-custom-fields.html#customizable-resource ) - example:
{
"key": "myLineItemType",
"name": { "en": "my line item type" },
"resourceTypeIds": ["line-item"],
"fieldDefinitions": [
{
"type":{
"name":"LocalizedString"
},
"name":"myField",
"label":{
"en":"my field",
"de":"mein feld"
},
"required":false,
"inputHint":"SingleLine"
}
]
}
Then there are 2 ways of using the new custom type and the new field.
You can set the custom type and a value at the time you create a line item using the "addLineItem" Update action on the cart resource - see this JSON example for instance:
{
"version": 19,
"actions": [{
"action": "addLineItem",
"productId": "9f19f37d-ec10-4ccf-9ff8-e5a295de0c3e",
"variantId": 1,
"quantity": 1
}],
"custom": {
"typeKey": "myLineItemType",
"fields": {
"myField": {
"en":"whats up",
"de":"was ist los"
}
}
}
}
You can set the custom type of the line item with the "setLineItemCustomType" update action on the cart to make the field available. This can work with existing line items.
http://dev.sphere.io/http-api-projects-carts.html#set-line-item-custom-type
I am using OpenLayers 3 to animate the paths of migrating animals tagged by scientists. I load the geoJSON file like so
var whaleSource = new ol.source.Vector({
url: 'data/BW2205005.json',
format: new ol.format.GeoJSON()
});
Instead of loading this directly into a layer, I would like to use and reuse the data in the geoJSON file for different purposes throughout my program. For example, I want to pull the lat & lon coordinates into an array to manipulate them to create interpolated animated tracks. Later I will want to query the geoJSON properties to restyle the tracks of males and females.
How might I load the geoJSON data into various arrays at different stages of my program instead of directly into a layer?
Thanks much
When using the url property of ol.source.Vector the class loads the given url via XHR/AJAX for you:
Setting this option instructs the source to use an XHR loader (see ol.featureloader.xhr) and an ol.loadingstrategy.all for a one-off download of all features from that URL.
You could load the file yourself using XHR/AJAX using XMLHttpRequest or a library like jquery which has XHR/AJAX functionality. When you've retreived the GeoJSON collection you can loop over the features array it holds and split it up into what every you need and put those features into new separate GeoJSON collections. Here's a very crude example to give you and idea of the concept:
Assume the following GeoJSON collection:
{
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [0, 0]
},
"properties": {
"name": "Free Willy"
}
}, {
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [1, 1]
},
"properties": {
"name": "Moby Dick"
}
}, {
// Etc.
}]
}
Here's how to load it (using jQuery's $.getJSON XHR function) and to split it up in to separate collections:
// Object to store separated collections
var whales = {};
// Load url and execute handler function
$.getJSON('collection.json', function (data) {
// Iterate the features of the collection
data.features.forEach(function (feature) {
// Check there is a whale already with that name
if (!whales.hasOwnProperty(feature.properties.name)) {
// No there isn't create empty collection
whales[feature.properties.name] = {
"type": "FeatureCollection",
"features": []
};
}
// Add the feature to the collection
whales[feature.properties.name].features.push(feature);
});
});
Now you can use the separate collections stored in the whale object to create layers. Note this differs some from using the url property:
new ol.layer.Vector({
source: new ol.source.Vector({
features: (new ol.format.GeoJSON()).readFeatures(whales['Free Willy'], {
featureProjection: 'EPSG:3857'
})
})
});
Here's a working example of the concept: http://plnkr.co/edit/rGwhI9vpu8ZYfAWvBZZr?p=preview
Edit after comment:
If you want all the coordinates for Willy:
// Empty array to store coordinates
var willysCoordinates = [];
// Iterate over Willy's features
whales['Free Willy'].features.forEach(function (feature) {
willysCoordinates.push(feature.geometry.coordinates);
});
Now willysCoordinates holds a nested array of coordinates: [[0, 0],[2, 2]]