AngularJS


Well, there are a dozen or so code snippets on the web to deal with this. I found one that worked. It’s not ideal – it recompiles the template each iteration, rather than reusing the already compiled template and cloning it, but meh.

What I am really trying to do is to is to show the user a view of this data structure that makes sense to them

The trick is that each node is the head of a tree, which means an indented list. Each node has a history of updates, which in the general case forms two trees forward and back. But it is usually the case that the updates form a single line of history. You can see that in this image as pairs of red and blue arrows. The blue arrows are branches, the red arrows merges.

Each node also potentially appears in multiple contexts if you go up the tree. In the general case (not in this digram), these contexts may be in different spaces. A user may create a tree by grafting together parts of other trees.

So, I want a single-pane tree explorer. With this component, I need to be able to do three jobs.

First, show two panes next to one another and highlight the differences and common nodes. I want the user to be able to pull up a node, the previous node, and to be able to see the spots where the tree has changed. Here’s a demo of the kind of layout I am thinking about.

Second, edit a tree. I want to have a tree in draft mode on the left, the explorer on the right, and for the use to be able to drag-and-drop nodes onto their draft tree.

Thirdly, the apply changes tool. Pull up a tree that is a finalised edit, the tree into which these edits are to be put, and show what nodes are going to be replaced. Again, the general case of this can be quite complex.

Complications? We got ’em. In particular, access control. You can pull in other people’s trees, but that doesn’t mean you can update them. Another one is asynchronous updates. If you pull in part of someone else’s tree, and that person updates their tree, then your tree gets updated (this is a key part of the system). What happens on the client side when the underlying data changes?

But, all the tools are there, all the bits. It’s a matter of assembling them into something that works. We have a guy on the project who is very good at UI: colours, fonts, layout – that sort of thing. So I can make it work and then worry about the CSS later.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: