first

Dockerfile

@@ -13,6 +13,23 @@ RUN set -eux; \
                 git \
                 sudo \
                 sqlite3 \
+                make \
+                libcurl4-openssl-dev \
+                libssl-dev \
+                libxml2-dev \
+                zlib1g-dev \
+                libfontconfig1-dev \
+                libfreetype6-dev \
+                libpng-dev \
+                libtiff5-dev \
+                libjpeg-dev \
+                libharfbuzz-dev \
+                libfribidi-dev \
+                libpq-dev \
+                libgit2-dev \
+                gdal-bin libgdal-dev \
+                libudunits2-dev \
+                pandoc \
                 ca-certificates \
                 gcc \
                 libc6-dev \
@@ -37,7 +54,7 @@ RUN set -eux; \
         rm -rf /var/lib/apt/lists/*;
         
 # Install R packages
-RUN install2.r --error -s --deps TRUE htmltools tibble dplyr purrr rlang glue this.path DBI pool RSQLite remotes promises assertthat log here zeallot dbplyr stringr tidyverse
+RUN install2.r --error -s --deps TRUE htmltools tibble dplyr purrr rlang glue this.path DBI pool RSQLite remotes promises assertthat log here zeallot dbplyr stringr tidyverse rmarkdown plotly
 RUN Rscript -e "install.packages('b64', repos = c('https://extendr.r-universe.dev', getOption('repos')))" 
 RUN Rscript -e "install.packages('uwu', repos = c('https://josiahparry.r-universe.dev', getOption('repos')))" 
 RUN --mount=type=secret,id=GITHUB_PAT GITHUB_PAT=$(cat /run/secrets/GITHUB_PAT) \

README.md

@@ -16,27 +16,28 @@ experimental](https://img.shields.io/badge/lifecycle-experimental-orange.svg)](h
 
 **THIS IS A WORK IN PROGRESS, DO NOT USE**
 
-
-## Deployment options
-
-
-### Hugging Face Spaces
-
-When you pushing a repository to a Hugging Face Spaces with the option to deploy Dockerfile and include a Dockerfile, Hugging Face will start building and running your app in the Space.
-
-Try the demo here: 
+See the demo here: 
 
 * Direct URL to the deployed app: https://jrosell-ambhtmx-plotly.hf.space/
 * Space URL: https://huggingface.co/spaces/jrosell/ambhtmx.plotly
 
+Or test it locally:
 
-If you have a repo with git enabled with a github hf remote configured, you can run:
+```
+git clone git@github.com:jrosell/ambhtmx.plotly.git
+bash docker_run.sh
+```
 
+If you want, you can remove docker containers and images:
 ```
-bash deploy_hf.sh
+bash docker_rm.sh
 ```
 
-For example, you can adapt this for your gh and hf repos:
+## How to use Github and Hugging Face Spaces for my project
+
+When you pushing a repository to a Hugging Face Spaces with the option to deploy Dockerfile and include a Dockerfile, Hugging Face will start building and running your app in the Space.
+
+Customize this example, to enable Hugging Face Spaces as additional remote:
 
 ```
 git init
@@ -46,36 +47,20 @@ git commit -m "My changes"
 git remote add origin git@github.com:jrosell/ambhtmx.plotly.git
 git remote add gh git@github.com:jrosell/ambhtmx.plotly.git
 git remote add hf git@hf.co:spaces/jrosell/ambhtmx.plotly
-git push --set-upstream gh main
-git push --set-upstream hf main
+git remote -v
 ```
 
-
-### Runing the example in Docker
-
-All in one command:
+Then, to depoly to Hugging Face Spaces run:
 
 ```
-bash deploy_docker.sh
-```
-
-It will run:
-
-```
-(docker container rm -f ambhtmx-plotly-container || true)\
-		&& (docker rmi $(docker images --format '{{.Repository}}:{{.ID}}'| egrep 'ambhtmx-plotly' | cut -d':' -f2 | uniq) --force || true) \
-		&& docker build -f Dockerfile -t ambhtmx-plotly-image . \
-		&& docker run --env-file=.Renviron -p 7860:7860 --name ambhtmx-plotly-container --rm ambhtmx-plotly-image
+bash deploy_hf.sh
 ```
 
-
 ## Troubleshooting
 
-If you want to see the logs:
+Kown issues:
 
-```
-docker build -f Dockerfile  --no-cache --progress=plain -t ambhtmx-plotly-image . 2>&1 | tee build.log
-```
+* Only updates when refreshing the whole page. WIP should rerender on innerHTML replace.
 
 Check the [known issues](https://github.com/jrosell/ambhtmx/issues), and if you have another issue? Please, [let me know](https://github.com/jrosell/ambhtmx/issues).
 

app.R

@@ -1,31 +1,70 @@
 # remotes::install_github("jrosell/ambhtmx", force = TRUE)
 library(ambhtmx)
-# devtools::load_all()
+library(ggplot2)
+library(plotly)
 
-card_3d_demo <- \() {  
-  card <- "card"
+page_title <- "WIP: ambhtmx slider example"
+
+head_tags <- htmltools::tagList()
+
+#' Generate a plot from rexp_data
+generate_htmlwidget <- \(){
+  print("generate_htmlwidget")
+  rexp_df <- tibble(x = 1:length(rexp_data), y = rexp_data)
+  p_plot <- ggplot(rexp_df, aes(x, y)) + geom_line()
+  plotly::ggplotly(p_plot, width = 200, height = 100)  
+}
+
+counter <- 1
+rexp_data <- c(rexp(1), rexp(1))
+
+#' Starting the app
+c(app, context, operations) %<-% ambhtmx(host = "0.0.0.0", port = "7860")
+
+
+#' Main page of the app
+app$get("/", \(req, res){
+  html <- ""
   tryCatch({
-      # Original python code credit: https://fastht.ml/
-      # Design credit: https://codepen.io/markmiro/pen/wbqMPa
-      bgurl <- "https://ucarecdn.com/35a0e8a7-fcc5-48af-8a3f-70bb96ff5c48/-/preview/750x1000/"
-      card_styles <- "font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif; perspective: 1500px;"
-      card_3d <- \(text, bgurl, amt, left_align) {
-        align <- ifelse(left_align, 'left', 'right')
-        scr <- script_from_js_tpl('card3d.js', amt = amt)	      
-        sty <- style_from_css_tpl(
-          'card3d.css', bgurl = glue('url({bgurl})'), align = align
-        )   
-        div(text, div(), scr, sty, align = align)
-      }
-      card <- card_3d("Mouseover me", bgurl, amt = 1.5, left_align = T)
-    },
+      rexp_widget <- generate_htmlwidget()
+      rexp_tags <- amb_htmlwidget(rexp_widget, id = "rexp_widget")
+      html <- div(
+          style = "margin: 20px",
+          h1(page_title),
+          div(
+            id = "counter",
+            p(glue("Counter is set to {counter}")),
+            rexp_tags
+          ),
+          button(
+            "+1",
+            hx_get="/increment",
+            hx_target="#counter",
+            # hx_target="#rexp_widget [data-for]",
+            # hx_target="#debug",
+            hx_swap="outerHTML"
+          ),
+          div(id = "debug")
+        ) |> 
+        send_page(res)
+  },
     error = \(e) print(e)
   )
-  div(card, style = card_styles)
-}
+})
+
+#' Call to return the plot
+app$get("/increment", \(req, res){
+  counter <<- counter + 1
+  rexp_data <<- c(rexp_data, rexp(1))
+  rexp_widget <- generate_htmlwidget()
+  rexp_tags <- amb_htmlwidget(rexp_widget, id = "rexp_widget")
+  div(
+      id = "counter",
+      p(glue("Counter is set to {counter}")),
+      rexp_tags
+    ) |> 
+    send_tags(res)
+})
 
-ambhtmx(host = "0.0.0.0", port = "7860", protocol ="http")$app$
-  get("/", \(req, res) {
-    card_3d_demo() |> send_page(res)
-  })$
-  start()
+#' Start the app with all the previous defined routes
+app$start(open = FALSE)

deploy_docker.sh → docker_rm.sh

@@ -1,4 +1,2 @@
-(docker container rm -f ambhtmx-plotly-container || true)\
-		&& (docker rmi $(docker images --format '{{.Repository}}:{{.ID}}'| egrep 'ambhtmx-plotly-image' | cut -d':' -f2 | uniq) --force || true) \
-		&& docker build -f Dockerfile -t ambhtmx-plotly-image . \
-		&& docker run --env-file=.Renviron -p 7860:7860 --name ambhtmx-plotly-container --rm ambhtmx-plotly-image
+(docker container rm -f ambhtmx-plotly-container || true) \
+		&& (docker rmi $(docker images --format '{{.Repository}}:{{.ID}}'| egrep 'ambhtmx-plotly-image' | cut -d':' -f2 | uniq) --force || true)

docker_run.sh

@@ -0,0 +1,2 @@
+(docker build -f Dockerfile -t ambhtmx-plotly-image . || true) \
+		&& docker run --env-file=.Renviron -p 7860:7860 --name ambhtmx-plotly-container --rm ambhtmx-plotly-image