Skip to content

Add configurable min-width handling for ggsql widgets#10

Draft
cpsievert wants to merge 1 commit into
posit-dev:mainfrom
cpsievert:feat/widget-min-width
Draft

Add configurable min-width handling for ggsql widgets#10
cpsievert wants to merge 1 commit into
posit-dev:mainfrom
cpsievert:feat/widget-min-width

Conversation

@cpsievert
Copy link
Copy Markdown
Contributor

@cpsievert cpsievert commented May 1, 2026

Summary

This changes the ggsql htmlwidget so narrow-width scaling is an explicit widget option instead of a hard-coded frontend rule.

  • adds min_width to ggsql_widget() and makes ggsql_widget(writer, spec, ...) the public widget construction API
  • updates the widget binding to read min_width from the htmlwidget payload and apply scaled mode only when that option is present
  • keeps the frontend behavior intentionally simple by toggling a ggsql-scaled host class instead of publishing detailed sizing metadata
  • adjusts the scaled transform origin to left center

To try the behavior interactively in Shiny, run an app like this and drag the right pane narrower to compare default behavior vs min_width = 450:

library(ggsql)
library(shiny)

reader <- duckdb_reader()
ggsql_register(reader, mtcars, "cars")

spec <- ggsql_execute(
  reader,
  "SELECT * FROM cars VISUALISE mpg AS x DRAW histogram"
)

ui <- fluidPage(
  tags$head(
    tags$style(HTML(
      "
      .demo-grid {
        display: grid;
        gap: 1rem;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      }
      .demo-card {
        border: 1px solid #d9d9d9;
        border-radius: 10px;
        padding: 0.75rem;
        background: white;
      }
      .demo-pane {
        width: 280px;
        min-width: 180px;
        max-width: 100%;
        height: 360px;
        resize: horizontal;
        overflow: auto;
        border: 1px dashed #b8b8b8;
        padding: 0.5rem;
        background: #fafafa;
      }
      .demo-pane ggsql-vega {
        background: white;
      }
      "
    ))
  ),
  div(
    class = "demo-grid",
    div(
      class = "demo-card",
      h3("Default widget sizing"),
      div(class = "demo-pane", ggsqlOutput("plain", width = "100%", height = "100%"))
    ),
    div(
      class = "demo-card",
      h3("Widget with min_width = 450"),
      div(class = "demo-pane", ggsqlOutput("scaled", width = "100%", height = "100%"))
    )
  )
)

server <- function(input, output, session) {
  output$plain <- renderGgsql({ spec })
  output$scaled <- renderGgsql({
    ggsql_widget(vegalite_writer(), spec, min_width = 450)
  })
}

shinyApp(ui, server)

@cpsievert cpsievert force-pushed the feat/widget-min-width branch from 0fbae30 to 3f6bc76 Compare May 1, 2026 00:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant