website design - How should I represent a tree structure?

Context

I have data from a source that has categories and sub categories and in some cases, even sub-sub categories.

Requirements

The actions that can be performed on the tree elements are - addition of category/sub-category, renaming, ordering (asc/desc) and bucketing (putting different categories under one new category).

I'm stuck at trying to figure out the best way to represent such a structure. Should I represent it as a graphical tree? or should I let the user choose each element from dropdowns and provide a separate modal for editing the selected element?

Answer

I had recently come across the same problem. The solution that I came up with is an iterative categorization of information architecture.

In your case we have three levels

CATEGORIES > SUB CATEGORIES > SUB SUB CATEGORIES

In order to smoothly run this interaction we need to maintain a card of catergories within some source. Each category will have some counter against them showing how many sub categories they have. Category with no sub category will have a grey font color and the ones which have sub categories will have blue font color. You can also add category by clicking on the fab button and perform other actions using the menu icon.

After clicking on Category 01, same card will now show subcategories within category 01. Header will act as a breadcrumb now which will maintain your current state

And if you click subcategory 01, you will now be able to see sub-sub-categories and perform certain actions on them. You can always go back by clicking on the links in bread crumb.