Task dependency graph

Hi!
I recently started using coda and I immediately fell in love with it.
So I thought, what better way to learn how to use it than creating something unnecessarily complex?

That’s why I present to you a coda-only dependency graph!

This is actually more proof-of-concept than an actually finished project.
And there are of course some limitations:

  • Each task can only have one child, but it can have many dependencies.
  • There has to be at least as much entries in the “dependency” table as there are in the original table. That means whenever you add a new entry, you need to add it also to the “dependency” table (which can be easily automated, but again, this is just a proof-of-concept).
  • Because images don’t fill the whole table cell, arrows are created using multiple diacritics (a.k.a. zalgo text), so they don’t look to pretty.

Since this is the first time I created anything in coda, I’m sure there are many things I could done better. Don’t hesitate to tell me about them!
While I probably won’t update this project, that knowledge may be very valuable in my future projects.

4 Likes

Very, very impressive.

Real-world use case I think the best approach to this would be to have the data defined in Coda, but then use a visualization framework that uses the Code API to create the graph, and have that be embedded within the document.

2 Likes

Yeah, I came to the same conclusion after finishing this project…

And I actually already started working on it, but instead of using Coda API, I’m passing data through alienable url.

I’m going to post here the finished version as a template when it’s ready.

2 Likes

Alienable url, did you maybe mean embeddable?

Do you mind already sharing the setup you have of how you call the framework, because I’m looking at some other visualization problems and it would help to know how you’ve set things up before I go spinning up a server to do the computation for me.

By “alienable url” I mean that all the information about how the graph should be build is in the url itself.

And sure, here you go:

This version of the dependency graph is outdated and no longer available for display.

Just note that I’m using a private glitch server for the computing, which means that at some point before I finish making this dependency graph, I may change how that part works, which would change how the url has to look like in order to work properly.

1 Like

Hmm, it would be interesting if we can get this to run client-side somehow.
The not-user-friendly approach being one where you use something like GreaseMonkey to inject D3 (or some other visualization script) and then rewrite the output of a formula.

Maybe it’s do-able through the Embed function somehow?

1 Like

I honestly doubt it.

This would require embedding JavaScript directly into the project. And, if that was possible, it would be a massive security breach.

After a little bit of work, I completely recreated the graph using an actual graphing engine this time.

  • Tasks can have multiple children and dependencies
  • Significantly prettier
  • Improved performance
  • Way more reliable

And you can use it as a template if you want!

7 Likes

Because the graph rendering is using an outside engine, and I’m currently working on another (and significantly bigger) coda template, I have accidentally update this project!

This new version uses the wonders of svg, and allows for entering “task focus” after hovering over it!
And maybe few other things I implemented for the sake of the other template.

5 Likes

Hey @Filmos this looks awesome and seems really similar to what I’m looking to do - trying to create a skills tree where some skills are dependent on others.

The glitch.me doesn’t seem to be loading in your example anymore - do you have a github repo for that project or another way to share the code? Would love to extend it!