FaultTree.widget Test

Notebook for testing FaultTree.widget rendering fixes.

Example

The fault tree below is centered in-frame when viewed in RStudio, but is partially off-frame when viewed in a browser, and completely off-frame if the browser window is wide enough. This is true for both html_notebook and html_document.

library(FaultTree)
library(FaultTree.widget)

# nolint start
tree1 <- ftree.make(type = "priority", reversible_cond = TRUE, name = "Site power loss")
tree1 <- addLogic(tree1, at = 1, type = "or", name = "neither emergency", name2 = "generator operable")
tree1 <- addLogic(tree1, at = 2, type = "and", name = "Independent failure", name2 = "of generators")
tree1 <- addLatent(tree1, at = 3, mttf = 5, mttr = 12 / 8760, inspect = 1 / 26, name = "e-gen set fails")
tree1 <- addLatent(tree1, at = 3, mttf = 5, mttr = 12 / 8760, inspect = 1 / 26, name = "e-gen set fails")
tree1 <- addLogic(tree1, at = 2, type = "inhibit", name = "Common cause", name2 = "failure of generators")
tree1 <- addProbability(tree1, at = 6, prob = .05, name = "Common cause", name2 = "beta factor")
tree1 <- addLatent(tree1, at = 6, mttf = 5, mttr = 12 / 8760, inspect = 1 / 26, name = "e-gen set fails")
tree1 <- addDemand(tree1, at = 1, mttf = 1.0, name = "External power", name2 = "interruption")
# nolint end

tree1 <- ftree.calc(tree1)

ftree2widget(tree1, height = 500, width = 800)

Check rendering without height and width specified:

ftree2widget(tree1)

Solution

A partial fix is to change the line in inst/htmlwidgets/ftree_widget1.js and inst/htmlwidgets/ftree_widget2.js

from (which sets the position based on the width of the browser window):

var width_initial = $(window).width()/2-60;

to (which sets the position based on the width of the div containing the widget):

var width_initial = $("div").width()/2-60;

Then the fault tree will position itself within view, but not always centered. A complete fix would render the fault tree centered within the widget.

Other approaches tested:

// var width_initial = $('div:contains("htmlwidget")').width()/2-60;
// var width_initial = $("div").filter(function(){ return this.children.length === 0; }).width()/2-60;