strazto/mandrake

Templating, responsive rendering & more

Closed this issue · 1 comments

*Migrated from #26 *

kable & kableExtra were convenient for quickly rendering the column docs, but I'm not that huge of a fan of their lack of responsiveness.

Presently, the entire sidebar is rendered using a glue statement,

https://github.com/matthewstrasiotto/mandrake/blob/12c117694199f57fa92f805e2035ebd6d264bd8b/R/decorate_graph.R#L200-L213

The column specs are rendered to html just using kable:

https://github.com/matthewstrasiotto/mandrake/blob/12c117694199f57fa92f805e2035ebd6d264bd8b/R/decorate_graph.R#L114-L131

Since the kable styling already relies on bootstrap, I think I should commit & template my own, properly responsive column spec list.

I'll probably use mustache since I'll have the luxury of being able to use the template on either frontend or in R via https://github.com/edwindj/whisker .

If I choose frontend templating, I'll have to convert the description column to json & back in order to pass it to vis-network.

Side note about frontend rendering benefits

The good news about (potentially) templating on the frontend, is that having this data available to the frontend should allow me to implement some kind of search by-column indexing functionality without hacking up the backend.

That said, it looks like visnetwork already provides a mechanism to give nodes multiple columns that may be used to select but for our dataset that would result in a very huge dropdown, I'd rather a fuzzy search.

Side notes about styling of the various elements

I'd like to also use a responsive style for rendering my network graph.

Without directly modifying packages, my best option is probably to attach a handler to visnetwork's afterDrawing event that fires up a bunch of jquery manipulation, sets things to nice bootstrap classes & more.

After this is done, it would probably nice to make it detach itself from handling the event, so it only fires on the inital draw.

Doing this would remove the reliance on the legend element, & allow a lot of flexibility in terms of how I set up the page, without much reliance on how visNetwork configures its' DOM (Which may not be stable).

Resolved by #38