Improve the add_straight_line module

[gogonzo]

Currently the module for arbitrary lines takes to much space and is not user friendly.

My proposition is to reduce the space of the module and to have it more robust. Requirements of the implementation:

• The single arbitrary line attributes should be as small as possible to not take to much space.
• One should be able to add, modify and remove arbitrary lines one by one
• Each line added is shown in the encoding panel as a small bullet

proposition 1 - popup window

To add the new line user clicks (+) button which triggers small window to pop, with inputs for value, color and label. After submitting small bullet describing the line stays in the encoding panel and new straight line is drawn on the plot. One can also remove (+) and modify (~) the line by clicking relevant buttons.

proposition 2 - collapsible div

To add the new line user clicks (+) which adds collapsible-div with inputs for value, color and label. In contrast to the option-1 these inputs does not disappear but they can be hidden by folding the div to the minimal size. Modifying the lines would require just unfolding div and clicking the inputs as usual. User can remove single line inputs by clicking (x)

Design file
https://app.diagrams.net/#G12KVOtFwNMMgFsrjpRAgLtHpOr5wSd4JN

[gogonzo]

@npaszty opinion from the email conversation

Howdy.
struggling to visualize what's in the drawing.
not sure where the numeric range would come from since that's some arbitrary number related to a specific attribute of assay to display.
for example normal range. normal range could be different for age groups or gender for some assays. also there might be a very specific number that user wants to display and that is hard to do using slider or range picker.

[gogonzo]

also there might be a very specific number that user wants to display and that is hard to do using slider or range picker.

@npaszty NumericInput does not limit us, user can pick any value, and it needs to be a numeric value. TextInput (current implementation) does not have any restriction, user can add "50, pi, text, 60,2" and this have a high potential to fail the app, this is why improvement is needed.

library(shiny)
library(ggplot2)
library(teal.devel)

ui_add_lines <- function(id) {
  ns <- NS(id)
  div(
    panel_group(id = ns("panel")),
    actionButton(ns("add_line"), "add line")
  )
}

srv_add_lines <- function(id) {
  moduleServer(id, function(input, output, session) {
    queue <- teal:::ReactiveQueue$new()
    observeEvent(input$add_line, {
      new_name <- tail(make.unique(c("line", names(queue$get()), "line"), sep = "-"), 1)
      queue$push(
        setNames(list(srv_add_line(id = new_name)), new_name)
      )
    })
    queue
  })
}

srv_add_line <- function(id) {
  moduleServer(id, function(input, output, session) {
    values <- reactiveVal()
    insertUI(
      selector = "#lines-panel", 
      ui = panel_item(
        id = session$ns("line"),
        title = id,
        radioButtons(session$ns("orientation"), "Line orientation", choices = c("horizontal", "vertical", "column")),
        numericInput(session$ns("value"), "Line value", value = 5),
        textInput(session$ns("label"), "Label", value = "Horizontal line"),
        shinyWidgets::colorPickr(session$ns("color"), label = "Color")
      )
    )
    orientation <- eventReactive(input$orientation, input$orientation)
    value <- eventReactive(input$value, input$value)
    label <- eventReactive(input$label, input$label)
    color <- eventReactive(input$color, input$color)
    
    list(orientation = orientation, value = value, label = label, color = color)
  })
}

ui <- bootstrapPage(
  column(width = 4, ui_add_lines("lines")),
  column(8, plotOutput("plot"))
)
server <- function(input, output, session) {
  plot <- reactive(
    ggplot(iris, aes(x = Sepal.Length, y = Petal.Length)) + geom_point()
  )
  queue <- srv_add_lines(id = "lines")
  line_params <- reactive({
    sapply(
      queue$get(), 
      function(x) {
        line <- sapply(
          x, 
          function(xx) xx(), 
          simplify = FALSE
        )
        if (line$orientation == "horizontal") {
          geom_hline(yintercept = line$value, color = line$color)
        } else {
          geom_vline(xintercept = line$value, color = line$color)
        }
      }
    )
  })
  output$plot <- renderPlot(plot() + line_params())
}

shinyApp(ui, server)

that's some arbitrary number related to a specific attribute of assay to display. for example normal range. normal range could be different for age groups or gender for some assays.

How would you like these values to be drawn? Currently in teal.goshawk, arbitrary straight lines don't depend on anything, one can set the line which bases on the variable, but this value is constant in for all data points (no grouping by gender or anything).

Please see the app how single line input can look like. Imagine that this set of inputs can be added and removed using (+) and (x) buttons. We also need some solution to minimalize space which these input takes

[npaszty]

@gogonzo
need to write a validate statement that the entry is comma separated value of numbers. if user enters something else then validate triggered with message on requirement.
pretty tough to completely protect users from themselves but this should be good enough.

like the idea of improving the UI and use of real estate. when discussing with stakeholder they were fine with the three fields. still if you have slicker way to do this then all in on that. maybe a demo for me since I'm struggling with the images.

[gogonzo]

Another reason why to improve

[Polkas]

The idea for this improvement comes from a core team developer not from the user.
Thus we did not get a proper User Story.
There are many factors important for this design which are not provided like:

• How many lines on average will be added, as it will influence the acceptable complexity.
• how general should be this module. If should have a general design then we should transfer the development to the teal.widgets package. So the module could be reused in other modules.
• Why not support any straight line in this general module, like base R ?graphics::abline/ggplot2::geom_abline is supporting.
• Should we limit the value input to be in the range of ggplot current x/y axes, or it could be outside the data range.
  

My recommendation is to postpone it and rethink what we want to achieve here.
I see potential in this item, nevertheless we should work on it later.

BTW Modal idea will hide the screen so the user will lose the view of the main plot when what to adjust the line. So I feel this option is not so well suited.

[gogonzo]

Moving to backlog - need more precise design and user input