Replace D3 rendering with custom SVG solution

[danielabar]

Continue to use the D3 force layout to assign node positions (i.e. x and y values), but replace the rendering with custom SVG elements.

It doesn't have to be simple circles and lines, could be any custom design to represent source nodes. For example, different types like Class, Value etc. could be drawn differently. Although to start, might be simpler to just do circles and lines at first.

This will probably end up splitting into multiple issues as more complexity is discovered. Have to support drag and drop, keeping the edges connected as nodes move around, animations/transitions etc.

Consider an approach where each Node and Edge is implemented as an Aurelia custom element. Each node can accept properties via data binding such as its display text, position, etc. Then the node viewModel can expose display properties that are a function of the inputs (for example, each type can be a different color, size of node can be function of lines of text etc.).

Then the parent component or view can loop over the nodes to place them in the DOM.

[matanox]

Yep. Consider circles to begin with though (or indeed), because cognition research tell us that people are attracted to round shapes, whereas spiky shapes signify danger or discomfort (there's little in nature that is spiky that is not harmful).

[matanox]

I'd split this to a first item/aim of "merely" rendering everything as a circle, feeding from the d3 force layout computation engine. Let me know if you'd like me to carve out where that "engine" part sits in any particular branch. The sooner we do this overall item, the cleaner we go forward....

And I said "merely" above, because it's not that naive putting it together for the first time, plus it's a first dive into raw SVG that requires wearing the SVG hat. But it's easy if you "view source" on the nodes rendered by d3 - that shows you what the SVG element should be like when in doubt :)

[matanox]

Last but not least - to avoid duplicate work - need a research task to consider whether GreenSock makes sense for the drawing or how to work GreenSock compatible. Overall all fun tasks requiring some investigation and a lot of pixel patience :)

[danielabar]

re: gsap - my understanding is its for animation, but doesn't help with drawing or svg, so that would be a separate issue.

[danielabar]

Fix the custom node element with a nested svg tag, as explained here

[danielabar]

Also follow steps in force layout from d3 docs to compute static layout

[danielabar]

TODO's

Some of these might move to be separate issues

• [x] remove css link from node and edge templates, causes it to be included multiple times for each node and edge, put it in index.html instead
• [ ] sometimes nodes are rendered outside the graph container bounds, therefore partially hidden
• [ ] the more the force layout is calculated, the closer the nodes get "squished" together (legacy code may have had some logic to lengthen the edges and adjust node x/y positions acocrdingly, maybe this could help) and/or try to adjust the charge
• [ ] bouding box calculation for node radius to contain text
• [x] delta handling for edges, to not re-render all of them whenever new ones come in
• [x] maintain selected status (eg: via Ctrl or Cmd + click),
• [x] node border should visually indicate when node(s) are selected
• [ ] animate in border on selection
• [ ] support radius expand and contract (contracted state does not show text)
• [ ] animate node from neighbour that brought it in to its final position (one time initial render only)
• [ ] node arc
• [x] removal of nodes and edges
• [ ] animate nodes and edges that are removed from view (eg: fade out, shrink, etc) - note I tried to use detached() lifecycle callback but it does not work because element has already been removed from DOM at that point. Also tried to use pubsub from graph to node, but maybe timing issue, wasn't working either
• [ ] ability to drag node and "stick" it in new location
• [ ] when search or menu interaction identifies nodes that are already in display, subtly flash or bounce them lightly, so user gets some visual indication that they were already there
• [ ] when a batch of nodes come in, stagger the animation so its not so jarring that they all pop in at once
• [ ] on mouseover a node, highlight all edges attached to it and their nodes (i.e. its neighbourhood with a degree of 1)