Network icons are not are not well mapped

bernardsilenou commented 2 years ago

Bug Description

The font awesome icons of the network diagram are not correctly mapped on demo servers.

Steps to Reproduce

Connect to https://infra-sormas-stats.sormas.netzlink.com/sormas-stats-shinyapp/
Visualize network diagram

Expected Behavior

Screenshots

Current

Expected

System Details

SORMAS version: 1.70.4
Android version/Browser:
Server URL: https://infra-sormas-stats.sormas.netzlink.com/sormas-stats-shinyapp/

Additional Information

This is the function that plots the diagram https://github.com/hzi-braunschweig/SORMAS-Stats-next-gen/blob/development/sormas-stats-shinyapp/sormas-stats-app/utils_source_code/plotNet.R

jwijffels commented 2 years ago

Looks like this is caused by addFontAwesome If I do locally

library(visNetwork)
nodes <- data.frame(id = 1:3, group = c("B", "A", "B"))
edges <- data.frame(from = c(1,2), to = c(2,3))

visNetwork(nodes, edges) %>%
    visGroups(groupname = "A", shape = "icon", icon = list(code = "f0c0", size = 75)) %>%
    visGroups(groupname = "B", shape = "icon", icon = list(code = "f007", color = "red"))

visNetwork(nodes, edges) %>%
    visGroups(groupname = "A", shape = "icon", icon = list(code = "f0c0", size = 75)) %>%
    visGroups(groupname = "B", shape = "icon", icon = list(code = "f007", color = "red")) %>%
    addFontAwesome()

If I look to the relevant parts, I see

visNetwork 2.1.0 https://github.com/hzi-braunschweig/SORMAS-Stats-next-gen/blob/development/sormas-stats-shinyapp/sormas-stats-app/renv.lock#L2874
visNetwork 2.0.9 https://github.com/hzi-braunschweig/SORMAS-Stats-next-gen/blob/development/sormas-stats-shinyapp/sormas-stats-app/requirements.R#L20
There is a change in visNetwork in 2.1.0 https://cran.r-project.org/web/packages/visNetwork/NEWS it says add fontawesome 5.13.0 support by the default which is used in our code is still to use version 4.7.0
I inspected https://infra-sormas-stats.sormas.netzlink.com/sormas-stats-shinyapp/ and it has R packages:
- visNetwork version 2.1.0
- shiny version 1.7.1
- fontawesome version 0.2.2
The shiny version 1.7.0 version mentions in the NEWS: icon(lib="fontawesome") is now powered by the {fontawesome} package, which will make it easier to use the latest FA icons in the future (by updating the {fontawesome} package). (#3302)

R package fontawesome provides

> list.files(system.file(package = "fontawesome", "fontawesome"), recursive = T)
[1] "css/all.css"                  "css/all.min.css"
[3] "css/v4-shims.css"             "css/v4-shims.min.css"
[5] "webfonts/fa-brands-400.ttf"   "webfonts/fa-brands-400.woff"
[7] "webfonts/fa-regular-400.ttf"  "webfonts/fa-regular-400.woff"
[9] "webfonts/fa-solid-900.ttf"    "webfonts/fa-solid-900.woff"

The code is using visNetwork::addFontAwesome https://github.com/hzi-braunschweig/SORMAS-Stats-next-gen/blob/development/sormas-stats-shinyapp/sormas-stats-app/utils_source_code/plotNet.R#L26
- addFontAwesome adds https://github.com/datastorm-open/visNetwork/blob/9504606a39f1641bf1ecf3ab05c4558356f8b78d/R/dependencies.R#L61:L85 its own fontawesome javascript at https://github.com/datastorm-open/visNetwork/tree/9504606a39f1641bf1ecf3ab05c4558356f8b78d/inst/htmlwidgets/lib/fontawesome_4.7.0
Maybe these 2 versions of the css are conflicting

If I run the following on locally, shiny uses fontawesome 5.15.3

> str(shiny::icon(name = "play"))
List of 3
 $ name    : chr "i"
 $ attribs :List of 3
  ..$ class     : chr "fa fa-play"
  ..$ role      : chr "presentation"
  ..$ aria-label: chr "play icon"
 $ children: list()
 - attr(*, "class")= chr "shiny.tag"
 - attr(*, "html_dependencies")=List of 1
  ..$ :List of 10
  .. ..$ name      : chr "font-awesome"
  .. ..$ version   : chr "5.15.3"
  .. ..$ src       :List of 1
  .. .. ..$ file: chr "fontawesome"
  .. ..$ meta      : NULL
  .. ..$ script    : NULL
  .. ..$ stylesheet: chr [1:2] "css/all.min.css" "css/v4-shims.min.css"
  .. ..$ head      : NULL
  .. ..$ attachment: NULL
  .. ..$ package   : chr "fontawesome"
  .. ..$ all_files : logi TRUE
  .. ..- attr(*, "class")= chr "html_dependency"
 - attr(*, "browsable_html")= logi TRUE

jwijffels commented 2 years ago

I tried to change calls to addFontAwesome to addFontAwesome(version = "5.13.0") on https://infra-sormas-stats.sormas.netzlink.com but that did not work

jwijffels commented 2 years ago

Ok, found the solution, as addFontAwesome had argument name with as default name = 'font-awesome' and this put the fontawesome of visNetwork as htmldependency, that conflicted with shiny which uses the same name to register font-awesome. We just need to change the calls to addFontAwesome by providing another name e.g.: addFontAwesome(name = "sormas-fontawesome") Tested this on https://infra-sormas-stats.sormas.netzlink.com/sormas-stats-shinyapp/

bernardsilenou commented 2 years ago

@jwijffels Thanks, I would incorporate the change

hzi-braunschweig / SORMAS-Stats-next-gen