bupaverse / processanimateR

Token replay animation for process maps created with processmapR by using SVG animations (SMIL) and the htmlwidget package.
https://bupaverse.github.io/processanimateR/
Other
66 stars 11 forks source link

Cannot integrate process animation into flexdashboard and combine with process_map #16

Closed frkbr closed 5 years ago

frkbr commented 5 years ago

This is similar to this issue: https://github.com/fmannhardt/processanimateR/issues/5

I cannot integrate a process animation into a flexdashboard and combine it with a process map. When knitting the following code, I get this error message under the Process map tab:

"TypeError: Cannot call a class as a function"

In the Animation tab the slider is shown moving, but the animation is not visible:

---
title: "Title"
output:
  flexdashboard::flex_dashboard
---

```{r setup, include=FALSE}
library(tidyverse)
library(bupaR)
library(flexdashboard)
library(processanimateR)
```

**Process map**
===============
```{r}
patients %>% process_map()
```

**Animation**
===========
```{r}
patients %>% animate_process()
```

When I reverse the order of the two tabs, the animation is shown and the same error message appears under the Process map tab.

When just using either the process_map or the animation alone, everything works.

I'm using the latest package versions from CRAN and the Chrome browser.

fmannhardt commented 5 years ago

I will have a look at this next week. This sounds like a problem with the Viz.js library that renders the graph.

frkbr commented 5 years ago

Just a follow-up, since I'm working on some flexdashboards, that would benefit from integrated process animation: do you have any insights so far? Or should I open an issue in a repo that deals with the Viz.js library?

fmannhardt commented 5 years ago

A quick status update. I have not forgotten about this. Simply not much time to spare. This is more tricky than I thought as there is also a problem when having a animation not visible on the first tab.

Not sure what is the cause for the error when using process_map, but there is also a problem when only having the animation in a tab that is not visible by default. Actually, this is related to this ariutta/svg-pan-zoom#279 in the svgPanZoom library that I am using.

fmannhardt commented 5 years ago

I fixed the issues with the visibility and found the cause for the second one.

DiagrammeR, the library used to render the process map in processmapR is using an older version of the viz.js library that creates the SVG of the process map via GraphViz. Unfortunately, the new API is incompatible with the old one and the global name clashes when both are loaded. I already asked the author to upgrade here rich-iannone/DiagrammeR#314 but far far no reply.

You can work around this issue by simply using processanimateR with animation mode off for all rendering of process maps.

fmannhardt commented 5 years ago

Could you please check with the current development version. The issue should be fixed now. I renamed some of the global functions added by processanimateR to avoid clashes. So, the old version of viz.js and the new one should live happily together.

I still see an issue when adding a Leaflet map to the Flexdashboard but this has to be fixed another time.

frkbr commented 5 years ago

Thanks for fixing! This seems to work now with the development version.

fmannhardt commented 5 years ago

Thanks for re-testing. I will release a new version on CRAN.

kifirifis commented 4 years ago

I did it with ggirafe package.