[Feature Request] add panzoom and qtip

[kyleweise]

Should be decently straightforward to add these two. See here for extensions:

panzoom
qtip

Should just be as simple as added the relevant .js and .css files to inst/htmlwidgets/lib, and then making use of them in inst/htmlwidgets/cytoscape/js.

Have a look at the "official" HTMLWidget which already has them in use. Might give this a go when I have some free time later.

Cheers,

Kyle

[kyleweise]

Looks like they recommend against cytoscape-qtip and instead using cytoscape-popper with tippy.js, so I'll have a go at that and panzoom.

[mrjoh3]

sounds good Kyle,

you can use the cola_layout function as a template for the implimentation. Basically just pass the default object as a list in the same way. Place the code in a new panzoom.R file as this will make the pull request easy.

Usage could look like:

cytoscape() %>% panzoom()

For the package dependencies I would suggest using htmltools::htmlDependency(). As we increase the number of optional dependencies we don't want to load them all unless necessary. I will try and implement in the cola_layout function as an example. Dependancy files go in inst/htmlwidgets/lib as you noted but they are loaded via htmltools::htmlDependency() instead of cytoscape.yaml.

[kyleweise]

I'll have to see your example because I'm a little confused by what you mean. On my local branch I've written the panzoom.R file in the same style as the cola_layout function you linked, and have added the the cytoscape-panzoom to inst/htmlwidgets/lib/. I understand the purpose behind using htmltools::htmlDependency(), but not so much how to literally use it.

[kyleweise]

Almost got it working...check out this. I'm probably doing something wrong with the package structuring (which is why the font-awesome icons aren't showing up), and absolutely positive I've including too much from my installation of jquery in inst/htmlwidgets/lib/jquery/, where only a couple files are probably needed. If you just add %>% panzoom() to the shiny example where you draw the network, you'll see the panzoom UI appear but no icons.

[mrjoh3]

Hi Kyle,

have a look at last commit. In particular cola.R, use this method the load the pan zoom dependencies. In this way all R code will be in a single place. At the top of cola.R there are two functions which load the dependencies and at the bottom of cola_layout() (row 132) they are inserted into the widget.

For jquery and fontawesome I suggest you use rmarkdown::html_dependency_font_awesome() and rmarkdown::html_dependency_jquery(). Load them in the same way as above. This way you don't have to worry about any of the lib files, they are all loaded from rmarkdown.

Also notice that I have deleted dependencies from the cytoscape.yaml page.

Your js and panzoom.R both look good, so it is almost there.