Merge pull request #63 from blockr-org/61-hide-inputs

Hiding Inputs

NAMESPACE

@@ -29,9 +29,9 @@ S3method(server_output,block)
 S3method(server_output,ggiraph_block)
 S3method(server_output,plot_block)
 S3method(uiCode,block)
-S3method(uiOutput,block)
-S3method(uiOutput,ggiraph_block)
-S3method(uiOutput,plot_block)
+S3method(uiOutputBlock,block)
+S3method(uiOutputBlock,ggiraph_block)
+S3method(uiOutputBlock,plot_block)
 S3method(ui_input,hidden_field)
 S3method(ui_input,list_field)
 S3method(ui_input,numeric_field)
@@ -127,7 +127,7 @@ export(string_field)
 export(summarize_block)
 export(switch_field)
 export(uiCode)
-export(uiOutput)
+export(uiOutputBlock)
 export(ui_input)
 export(ui_update)
 export(update_field)

R/field.R

@@ -355,7 +355,7 @@ validate_field.list_field <- function(x) {
   sub <- value(x, "sub_fields")
 
   if (!is.list(val) || length(val) != length(sub) ||
-        !setequal(names(val), names(sub))) {
+    !setequal(names(val), names(sub))) {
     value(x) <- lst_xtr(sub, "value")
   }
 

R/server.R

@@ -53,6 +53,14 @@ generate_server.data_block <- function(x, id, ...) {
       output$res <- server_output(x, out_dat, output)
       output$code <- server_code(x, blk, output)
 
+      output$nrow <- renderText({
+        prettyNum(nrow(out_dat()), big.mark = ",")
+      })
+
+      output$ncol <- renderText({
+        prettyNum(ncol(out_dat()), big.mark = ",")
+      })
+
       # Cleanup module inputs (UI and server side)
       # and observer
       observeEvent(input$remove,
@@ -117,6 +125,14 @@ generate_server.transform_block <- function(x, in_dat, id, ...) {
       output$res <- server_output(x, out_dat, output)
       output$code <- server_code(x, blk, output)
 
+      output$nrow <- renderText({
+        prettyNum(nrow(out_dat()), big.mark = ",")
+      })
+
+      output$ncol <- renderText({
+        prettyNum(ncol(out_dat()), big.mark = ",")
+      })
+
       # Cleanup module inputs (UI and server side)
       # and observer
       observeEvent(input$remove, {
@@ -167,6 +183,14 @@ generate_server.plot_block <- function(x, in_dat, id, ...) {
       output$plot <- server_output(x, out_dat, output)
       output$code <- server_code(x, blk, output)
 
+      output$nrow <- renderText({
+        prettyNum(nrow(out_dat()), big.mark = ",")
+      })
+
+      output$ncol <- renderText({
+        prettyNum(ncol(out_dat()), big.mark = ",")
+      })
+
       # Cleanup module inputs (UI and server side)
       # and observer
       observeEvent(input$remove, {

R/ui.R

@@ -29,7 +29,7 @@ generate_ui.block <- function(x, id, ..., .hidden = TRUE) {
   code_id <- ns("codeCollapse")
   output_id <- ns("outputCollapse")
 
-  header <- block_title(x, code_id, output_id, ns)
+  header <- block_title(x, code_id, output_id, ns, .hidden)
 
   block_class <- "block"
   if (.hidden) {
@@ -51,9 +51,9 @@ generate_ui.block <- function(x, id, ..., .hidden = TRUE) {
       class = "card shadow-sm p-2 mb-2 border",
       shiny::div(
         class = "card-body p-1",
+        header,
         div(
           class = sprintf("block-inputs %s", inputs_hidden),
-          header,
           layout(fields)
         ),
         div(
@@ -62,9 +62,9 @@ generate_ui.block <- function(x, id, ..., .hidden = TRUE) {
           uiCode(x, ns)
         ),
         div(
-          class = "collapse block-output",
+          class = sprintf("%s block-output", inputs_hidden),
           id = output_id,
-          uiOutput(x, ns)
+          uiOutputBlock(x, ns)
         )
       )
     )
@@ -136,21 +136,38 @@ generate_ui.stack <- function(x, id = NULL, ...) {
 }
 
 #' @importFrom shiny tags div
-block_title <- function(block, code_id, output_id, ns) {
+block_title <- function(block, code_id, output_id, ns, .hidden) {
+  hidden_class <- ""
+  if (.hidden) {
+    hidden_class <- "d-none"
+  }
+
   title <- class(block)[1] |>
     (\(.) gsub("_.*$", "", .))() |>
     tools::toTitleCase()
 
   div(
-    class = "card-title",
+    class = sprintf("m-0 card-title block-title %s", hidden_class),
     div(
       class = "d-flex",
-      if (not_null(title)) {
-        div(
-          class = "flex-grow-1",
-          shiny::p(title, class = "fw-bold")
+      div(
+        class = "flex-grow-1",
+        shiny::p(
+          title,
+          class = "fw-bold"
         )
-      },
+      ),
+      div(
+        class = "flex-grow-1",
+        span(
+          class = "block-feedback text-muted",
+          span(textOutput(ns("nrow"), inline = TRUE), class = "fw-bold"),
+          "rows |",
+          class = "block-feedback text-muted",
+          span(textOutput(ns("ncol"), inline = TRUE), class = "fw-bold"),
+          "cols"
+        )
+      ),
       div(
         class = "flex-shrink-1",
         actionLink(
@@ -168,10 +185,7 @@ block_title <- function(block, code_id, output_id, ns) {
         ),
         tags$a(
           class = "text-decoration-none block-output-toggle",
-          `data-bs-toggle` = "collapse",
           href = sprintf("#%s", output_id),
-          `aria-expanded` = "false",
-          `aria-controls` = output_id,
           iconOutput()
         )
       )
@@ -452,25 +466,25 @@ custom_verbatim_output <- function(id) {
 #' @param ns Output namespace
 #' @rdname generate_ui
 #' @export
-uiOutput <- function(x, ns) {
-  UseMethod("uiOutput", x)
+uiOutputBlock <- function(x, ns) {
+  UseMethod("uiOutputBlock", x)
 }
 
 #' @rdname generate_ui
 #' @export
-uiOutput.block <- function(x, ns) {
+uiOutputBlock.block <- function(x, ns) {
   DT::dataTableOutput(ns("res"))
 }
 
 #' @rdname generate_ui
 #' @export
-uiOutput.plot_block <- function(x, ns) {
+uiOutputBlock.plot_block <- function(x, ns) {
   shiny::plotOutput(ns("plot"))
 }
 
 #' @rdname generate_ui
 #' @export
-uiOutput.ggiraph_block <- function(x, ns) {
+uiOutputBlock.ggiraph_block <- function(x, ns) {
   ggiraph::girafeOutput(ns("plot"))
 }
 

scss/_block.scss

@@ -37,6 +37,10 @@ html {
       }
     }
 
+    .block-feedback {
+      font-size: .8rem;
+    }
+
     .block-remove,
     .block-output-toggle,
     .block-edit-toggle,

srcjs/collapse.js

@@ -1,16 +1,54 @@
 export const collapse = (stack) => {
   editor(stack);
   showLastOutputs(stack);
+  toggleOutputInput(stack);
+};
+
+export const toggleOutputInput = (stack) => {
+  $(stack).find(".block-output-toggle").each((_index, btn) => {
+    // already has a listener
+    if ($(btn).hasClass("block-bound")) {
+      return;
+    }
+
+    $(btn).addClass("block-bound");
+
+    $(btn).on("click", (event) => {
+      const $block = $(event.target).closest(".block");
+
+      const outputVisible = $block.find(".block-output").is(":visible");
+      const inputVisible = $block.find(".block-input").is(":visible");
+
+      const toggle = outputVisible || inputVisible;
+
+      if (toggle) {
+        $block.find(".block-inputs").addClass("d-none");
+        $block.find(".block-output").addClass("d-none");
+      } else {
+        $block.find(".block-inputs").removeClass("d-none");
+        $block.find(".block-output").removeClass("d-none");
+      }
+
+      let ev = "shown";
+      if ($block.find(".block-output").hasClass("d-none")) {
+        ev = "hidden";
+      }
+
+      $block.find(".block-inputs").trigger(ev);
+      $block.find(".block-output").trigger(ev);
+    });
+  });
 };
 
 const editor = (stack) => {
   const editBtn = $(stack).find(".stack-edit-toggle");
 
   // already has a listener
-  if (editBtn[0].getAttribute("listener")) {
+  if ($(editBtn).hasClass("block-bound")) {
     return;
   }
 
+  $(editBtn).addClass("block-bound");
   $(editBtn).on("click", (event) => {
     const $stack = $(event.target).closest(".stack");
     const $blocks = $stack.find(".block");
@@ -23,8 +61,7 @@ const editor = (stack) => {
 
       if (editable) {
         $block.removeClass("d-none");
-        $block.find(".block-inputs").removeClass("d-none");
-        $block.find(".block-inputs").trigger("shown");
+        $block.find(".block-title").removeClass("d-none");
 
         if (index == ($blocks.length - 1)) {
           $block.find(".block-output").addClass("show");
@@ -34,9 +71,7 @@ const editor = (stack) => {
         return;
       }
 
-      $block.find(".block-inputs").addClass("d-none");
-      $block.find(".block-inputs").trigger("hidden");
-
+      $block.find(".block-title").addClass("d-none");
       if (index == ($blocks.length - 1)) {
         $block.removeClass("d-none");
 
@@ -55,10 +90,12 @@ export const showLastOutput = (el) => {
   const $block = $(el).find(".block").last();
 
   $block.removeClass("d-none");
-  const lastOutput = $block.find(".block-output");
+  const $lastOutput = $block.find(".block-output");
+  const $lastTitle = $block.find(".block-title");
 
-  bootstrap.Collapse.getOrCreateInstance(lastOutput, { toggle: false }).show();
-  $(lastOutput).trigger("shown");
+  $lastTitle.addClass("d-none");
+  $lastOutput.removeClass("d-none");
+  $lastOutput.trigger("shown");
 };
 
 const showLastOutputs = (stack) => {

srcjs/shiny.js

@@ -1,4 +1,4 @@
-import { collapse, showLastOutput } from "./collapse.js";
+import { collapse, toggleOutputInput } from "./collapse.js";
 import { remove } from "./remove-stack.js";
 import { copyCode } from "./copy.js";
 
@@ -16,7 +16,7 @@ Shiny.addCustomMessageHandler("blockr-add-block", (msg) => {
   // TODO remove this
   // be event based/async instead of timeout
   setTimeout(() => {
-    showLastOutput(stack);
     copyCode();
+    toggleOutputInput(stack);
   }, 500);
 });

test.R

@@ -4,7 +4,7 @@ library(shiny)
 
 stack <- new_stack(
   demo_data_block,
-  demo_join_block
+  select_block
 )
 
 ui <- fluidPage(