add set_panel_size

NAMESPACE

@@ -22,6 +22,7 @@ export(render_dock_view)
 export(restore_dock)
 export(save_dock)
 export(select_panel)
+export(set_panel_size)
 export(update_dock_view)
 import(htmlwidgets)
 importFrom(shiny,getDefaultReactiveDomain)

R/set_panel_size.R

@@ -0,0 +1,35 @@
+#' Change panel size dynamically
+#' @param dock_id Dock unique id. When using modules the namespace
+#' is automatically added.
+#' @param id Panel id.
+#' @param height New height of the panel.
+#' @param session shiny session object.
+#' See \url{https://dockview.dev/docs/core/panels/resizing}.
+#' @export
+#' @return This function is called for its side effect.
+#' It sends a message to JavaScript through the current websocket connection,
+#' leveraging the shiny session object.
+set_panel_size <- function(
+  dock_id,
+  id,
+  height,
+  session = getDefaultReactiveDomain()
+) {
+  id <- as.character(id)
+  panel_ids <- get_panels_ids(dock_id, session)
+  if (!(id %in% panel_ids)) {
+    stop(sprintf(
+      "<Panel (ID: %s)>: invalid value (%s) for `id`. Valid ids are: %s.",
+      id,
+      id,
+      paste(panel_ids, collapse = ", ")
+    ))
+  }
+  session$sendCustomMessage(
+    sprintf("%s_resize-panel", session$ns(dock_id)),
+    list(
+      id = id,
+      options = list(height = height)
+    )
+  )
+}

inst/examples/resize_panel/app.R

@@ -0,0 +1,100 @@
+library(shiny)
+library(bslib)
+library(visNetwork)
+library(dockViewR)
+
+nodes <- data.frame(id = 1:3)
+edges <- data.frame(from = c(1, 2), to = c(1, 3))
+
+ui <- page_fillable(
+  sliderInput(
+    "panel_height",
+    "Resize Panel Height:",
+    min = 100,
+    max = 800,
+    value = 400
+  ),
+  dockViewOutput("dock")
+)
+
+server <- function(input, output, session) {
+  exportTestValues(
+    panel_ids = get_panels_ids("dock"),
+    active_group = get_active_group("dock"),
+    grid = get_grid("dock")
+  )
+
+  observeEvent(input$panel_height, {
+    req(get_panels_ids("dock"))
+    set_panel_size("dock", 2, input$panel_height)
+  })
+
+  output$dock <- renderDockView({
+    dock_view(
+      panels = list(
+        panel(
+          id = "1",
+          title = "Panel 1",
+          content = tagList(
+            sliderInput(
+              "obs",
+              "Number of observations:",
+              min = 0,
+              max = 1000,
+              value = 500
+            ),
+            plotOutput("distPlot")
+          )
+        ),
+        panel(
+          id = "2",
+          title = "Panel 2",
+          content = tagList(
+            visNetworkOutput("network")
+          ),
+          position = list(
+            referencePanel = "1",
+            direction = "right"
+          ),
+          minimumWidth = 500
+        ),
+        panel(
+          id = "3",
+          title = "Panel 3",
+          content = tagList(
+            selectInput(
+              "variable",
+              "Variable:",
+              c("Cylinders" = "cyl", "Transmission" = "am", "Gears" = "gear")
+            ),
+            tableOutput("data")
+          ),
+          position = list(
+            referencePanel = "2",
+            direction = "below"
+          ),
+          minimumHeight = 50
+        )
+      ),
+      theme = "replit"
+    )
+  })
+
+  output$distPlot <- renderPlot({
+    req(input$obs)
+    hist(rnorm(input$obs))
+  })
+
+  output$network <- renderVisNetwork({
+    visNetwork(nodes, edges, width = "100%")
+  })
+
+  output$data <- renderTable(
+    {
+      mtcars[, c("mpg", input$variable), drop = FALSE]
+    },
+    rownames = TRUE
+  )
+}
+
+shinyApp(ui, server)

srcjs/modules/utils.js

@@ -60,7 +60,13 @@ const addPanel = (panel, api) => {
     }
   }
   let props = { ...panel, ...internals }
-  return (api.addPanel(props))
+  api.addPanel(props);
+  // Resize panel content on panel resize.
+  // This only works if the nested content
+  // can resize correctly.
+  api.getPanel(panel.id).api.onDidDimensionsChange((e) => {
+    window.dispatchEvent(new Event('resize'));
+  })
 }
 
 const movePanel = (m, api) => {

srcjs/widgets/dockview.js

@@ -123,6 +123,14 @@ HTMLWidgets.widget({
             }
             api.updateOptions(m);
           })
+
+          // Panel resize
+          Shiny.addCustomMessageHandler(el.id + '_resize-panel', (m) => {
+            let panel = api.getPanel(m.id);
+            if (panel) {
+              panel.api.setSize(m.options);
+            }
+          })
         }
 
       },

tests/testthat/_snaps/set_panel_size.md

@@ -0,0 +1,8 @@
+# set_panel_size works
+
+    Code
+      set_panel_size("dock", "blabla", height = 400, session = session)
+    Condition
+      Error in `set_panel_size()`:
+      ! <Panel (ID: blabla)>: invalid value (blabla) for `id`. Valid ids are: 2, 3, test.
+

tests/testthat/_snaps/set_panel_size/set_panel_size-001.json

@@ -0,0 +1,64 @@
+{
+  "input": {
+    "obs": 500,
+    "variable": "cyl"
+  },
+  "export": {
+    "active_group": "3",
+    "grid": {
+      "root": {
+        "type": "branch",
+        "data": [
+          {
+            "type": "leaf",
+            "data": {
+              "views": [
+                "1"
+              ],
+              "activeView": "1",
+              "id": "1"
+            },
+            "size": 95
+          },
+          {
+            "type": "branch",
+            "data": [
+              {
+                "type": "leaf",
+                "data": {
+                  "views": [
+                    "2"
+                  ],
+                  "activeView": "2",
+                  "id": "2"
+                },
+                "size": 95
+              },
+              {
+                "type": "leaf",
+                "data": {
+                  "views": [
+                    "3"
+                  ],
+                  "activeView": "3",
+                  "id": "3"
+                },
+                "size": 95
+              }
+            ],
+            "size": -5
+          }
+        ],
+        "size": 0
+      },
+      "width": 0,
+      "height": 0,
+      "orientation": "HORIZONTAL"
+    },
+    "panel_ids": [
+      "1",
+      "2",
+      "3"
+    ]
+  }
+}

tests/testthat/_snaps/set_panel_size/set_panel_size-002.json

@@ -0,0 +1,64 @@
+{
+  "input": {
+    "obs": 500,
+    "variable": "cyl"
+  },
+  "export": {
+    "active_group": "3",
+    "grid": {
+      "root": {
+        "type": "branch",
+        "data": [
+          {
+            "type": "leaf",
+            "data": {
+              "views": [
+                "1"
+              ],
+              "activeView": "1",
+              "id": "1"
+            },
+            "size": 638
+          },
+          {
+            "type": "branch",
+            "data": [
+              {
+                "type": "leaf",
+                "data": {
+                  "views": [
+                    "2"
+                  ],
+                  "activeView": "2",
+                  "id": "2"
+                },
+                "size": 95
+              },
+              {
+                "type": "leaf",
+                "data": {
+                  "views": [
+                    "3"
+                  ],
+                  "activeView": "3",
+                  "id": "3"
+                },
+                "size": 460
+              }
+            ],
+            "size": 495
+          }
+        ],
+        "size": 565
+      },
+      "width": 1143,
+      "height": 565,
+      "orientation": "HORIZONTAL"
+    },
+    "panel_ids": [
+      "1",
+      "2",
+      "3"
+    ]
+  }
+}