feat(client): renders and laysout the module

[EdwardIrby]

This PR just handles formatting module data, and laying out dom nodes for the module visualization from the wireframes.

It mostly create a new data type Item[] that's used to render the modules for properly spaced for the module page.

interface Call {
  module: string
  name: string
}

interface VerbItem {
  name?: string
  'data-id': string
  calls: Call[]
}

interface Item {
  'data-id': string
  name: string
  style: { marginLeft: number }
  verbs: VerbItem[]
}

It also sorts them based on depth. It take the first found ancestor and places a dependent module under it. It should handle cycles and recursion correctly.

In the next PR I submit I'll be drawing directional lines from the ancestors to dependents and also from from low depth nodes high depth modules and from high depth modules to any low depth modules (verbs) they call. That's outside of the scope of this PR. However what it should do is show for example as seen in the attached video a line being drawn from recommendation to "productcatalog" and from checkout to "productcatalog" even though shipping is indented under checkout.

This PR mostly tackled the initial styles of the modules in the viz and the sorting algorithm to lay them out correctly. I still think that could use some work but It's generating the structure correctly with our test data right now.

Note in the types in this comment I'm including data-id those are going to be used to target the correct node to draw a line with. I'll be using at transparent no pointer event canvas to reduce node count and allow interactions.

[wesbillman]

@EdwardIrby please add screenshots when you have a second so we can review UI as well

[wesbillman]

I like the idea of this layout. I'm guessing this is intended to display the dependency graph similar to our Graph page.

This graph helps me view the dependencies (even though our layout algorithm isn't great :)) I see with this graph that productCatalog depends on recommendation too. Maybe recommendation should be under productCatalog.

Given that multiple modules can depend on the same module (maybe that's not the case with our boutique demo but it's possible) we might end up with duplicate module nodes here. An example that comes to mind is, what if cart also used recommendation? Then would we have a recommendation node below cart and one below productCatalog?

[EdwardIrby]

Updated description on this PR please see that should address questions

[EdwardIrby]

Screen.Recording.2023-09-16.at.9.58.01.AM.mov