A JSON based tree structure with drag and drop functionally to re-arrange the tree. Show-cases some useful tree operations for deeply nested JSON data and webpack configuration for reducing bundle sizes.
You can try the app at http://organigram.surge.sh. A sample JSON data for testing the functionality can be found here.
There are couple of ways to run the project. One is to run the production code server, and another one is to run the webpack-dev-server for developing. Either way, we need to install the libraries first. 🤓
To install the libraries, please run the following command:
npm install
Now, we need to build our project using the following command:
npm run build
There will be some useful information from webpack library like bundle and vendor sizes.
To run the project with distribution code, we need to perform the following command:
npm run serve
This command will run the server on localhost with a random port number using the library http-server. The host and port number can be found in the generated output of this command.
To run the development server with live-reload support, we need perform the following command:
npm run serve:dev
There is a set of unit test provided with the application. To run the tests, please perform the following command:
npm run test
That's it! You're now running Organigram! 🍻 👍 👏🏿 🤞🏾 🤙🏼 🎉
There are some useful techniques used in the application to increase the performance and fast loading for user.
The react-router configuration utilizes code splitting mechanism for only loading necessery JavaScript code for certain views.
{
path: 'organigram_view',
getComponent(location, cb) {
// async call for loading the view
System.import('./Views/Organigram').then(
module => cb(null, module.default)
)
}
},As you might notice the System.import call for the required component, which notifies webpack to split the code for this view and make an async call when this view loads in the browser. Webpack genrates different files for related code and only loads required JavaScript file when the view/route is displayed.
As the JSON tree is structured with deeply nested employee objects, its costly to perform any move/drag-drop operations in a tree. It generally requires O(n) or O(n-square) complexity. I have performed a normalization operation when the JSON is uploaded and then saved it to redux-store. As an example, let's consider the following JSON structure:
{
"Professor Albus Dumbledore": {
"position": "CEO",
"employees": [
{
"Professor McGonagall": {
"position": "VP Engineering",
"employees": [
{
"Harry Potter": {
"position": "Frontend Engineer",
"employees": []
}
},
{
"Ginny Weasley": {
"position": "Backend Engineer",
"employees": []
}
}
]
}
}
]
}
}The normalization operation will convert the structure into the following structure:
{
"Professor Albus Dumbledore": {
"name": "Professor Albus Dumbledore",
"position": "CEO",
"employees": {
"Professor McGonagall": true
}
},
"Professor McGonagall": {
"name": "Professor McGonagall",
"position": "VP Engineering",
"employees": {
"Harry Potter": true,
"Ginny Weasley": true,
}
},
"Harry Potter": {
"name": "Harry Potter",
"position": "Frontend Engineer",
"employees": {}
},
"Ginny Weasley": {
"name": "Ginny Weasley",
"position": "Backend Engineer",
"employees": {}
}
}This makes move/drag-drop operations more performant with O(1) complexity.
// remove the employee from its current supervisor
delete newEmployeeList[sourceSupervisorId].employees[sourceId]
// add the employee to its new supervisor
newEmployeeList[destinationId].employees[sourceId] = trueIf user wants to export the JSON structure for futher usage or we need to perform an API call at some point, I've also added the logic for de-normalizing the structure.
MIT. Anything you would like to do.