JS + R == Amazing Applications

.title_content[
.slide-1-title[
<h1 style="font-family:Courier New;color:white;padding-top:100px;font-size:45px;margin-bottom:0;"> JS + R == Amazing Applications</h1>

<h3 style="color:#86CAC6;margin-top:0;">Understanding HTMLWidgets</h3>
<span>Maya Gans</span>
]
]

---

.littlebox[
<p style="margin-top:30px;">WHAT ARE THEY?</p>
]
.littlebox[
<p style="margin-top:16px;">WHY SHOULD I CARE?</p>
]

]

---

.title_content[
<h1 style="color:white;padding-top:50px;font-size:80px;margin-bottom:0;width:30%;">Shiny: An Interlude</h1>
]

---

<select name="paramcd" id="paramcd" style="padding: 5px 10px; font-family: 'Maven Pro';">
  <option value="img/sodium.PNG">Sodium</option>
  <option value="img/calcium.PNG">Calcium</option>
</select>

]

---

```r
ui <- fluidPage(
*   selectInput("measurement", NULL, choices = c("Sodium", "Calcium")),
    plotOutput("plot")
)

server <- function(input, output, session) {
    
    data <- reactive({
        mydata %>%
            filter(measurement == input$measurement)
    })
    
    output$plot <- renderPlot({
        ggplot(data(), 
               aes(x = xAxis, y = yAxis, 
                   group = IDs, color = IDs)
               )
    })
}

shinyApp(ui, server)
```
]

<img src="img/zoom.png" style="position: absolute;
    bottom: -300px;
    left: 385px;
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);"></img>
    
---

.content[
.cardbox[
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
    <h2>HTML</h2>
    </div>
    <div class="flip-card-back">
      <h3>Hypertext Markup Language</h3> 
    </div>
  </div>
</div>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
    <h2>CSS</h2>
    </div>
    <div class="flip-card-back">
      <h3>Cascading <br> Style Sheets</h3> 
    </div>
  </div>
</div>

<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
    <h2>JavaScript</h2>
    </div>
    <div class="flip-card-back">
      <h3>The <br> Language <br> of the <br> Internet!</h3> 
    </div>
  </div>
</div>
]
]

---

```html
<div class="form-group shiny-input-container">
  <label class="control-label" id="measurement-label" for="measurement">
* Y-Axis
  </label>
  
  <div>
*   <select id="measurement">
*   <option value="Sodium" selected>Sodium</option>
*   <option value="Calcium">Calcium</option>
*   </select>
    <script type="application/json" data-for="measurement" data-nonempty="">
  {"plugins":["selectize-plugin-a11y"]}
</script>
  </div>
</div>
```

]

---

```css
.selectize-input {
    border: 1px solid #cccccc;
    padding: 6px 12px;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
```

---

```js
...
          success: function(res) {
            $.each(res, function(index, elem) {
              let optgroupId = elem[settings.optgroupField || "optgroup"];
              let optgroup = {};
              optgroup[settings.optgroupLabelField || "label"] = optgroupId;
              optgroup[settings.optgroupValueField || "value"] = optgroupId;
              selectize.addOptionGroup(optgroupId, optgroup);
            });
            callback(res);
            if (!loaded) {
*             if (data.hasOwnProperty('value')) {
*               selectize.setValue(data.value);
              } else if (settings.maxItems === 1) {
                selectize.setValue(res[0].value);
              }
            }
            loaded = true;
          }
...
```
]

---

.title_content[
<h1 style="color:white;padding-top:50px;font-size:80px;margin-bottom:0;width:30%;">What's an HTMLWidget</h1>
]

---

Why reinvent the wheel?

Enhance Shiny and Rmarkdown
]

<img src="img/handoff.png" style="
position: absolute;
    bottom: 0px;
    left: -30px;
    width: 85%;"></img>
    
<div id="hojs" class="handoff-text">JavaScript</div>
<div id="hor" class="handoff-text">R</div>
<div id="hoyaml" class="handoff-text">YAML</div>

---

.title_content[
<h1 style="color:white;padding-top:50px;font-size:80px;margin-bottom:0;width:40%;">Why should I care?</h1>
]

---

.content[
<div style="margin-left:10%;">
<div class="line_select html-widget spaghetti" height="504" id="anID" style="width:100%;height:504px;" width="100%"></div>
<script type="application/json" data-for="anID">{"x":{"data":{"member":["Subject 1","Subject 1","Subject 1","Subject 1","Subject 1","Subject 2","Subject 2","Subject 2","Subject 2","Subject 2","Subject 3","Subject 3","Subject 3","Subject 3","Subject 3","Subject 4","Subject 4","Subject 4","Subject 4","Subject 4","Subject 5","Subject 5","Subject 5","Subject 5","Subject 5"],"dateTime":[1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5,1,2,3,4,5],"forecast":[2.71666434628112,16.2872957974734,22.139946933006,9.13539002809076,8.65771153003297,3.9386101830297,24.2238274218147,10.7277869421456,14.4174325103982,18.8197669511374,9.80762961017778,18.1159257747117,27.2730259766273,17.7763202746882,1.9866264742413,1.76375870756443,25.1032053722916,31.7360336290687,0.351850010714399,5.82276129655179,13.0985538235807,3.83734588344552,11.7371646731117,19.247946589641,1.24339968784508]},"yLab":"Sodium Analysis Values","hexLight":"#1da5a9","hexDark":"#c9ffff"},"evals":[],"jsHooks":[]}</script>
</div>
]

<img src="img/mouse.png" style="
position: absolute;
    bottom: -10px;
    left: -70px;
    width: 30%;"></img>
    
<div style="position:absolute;
    left: 500px;
    color: #1da5a9;
    bottom: 150px;
    font-family: Arial;
    font-size: 18px;
    font-size: 20px;">Study Visit Week</div>

---

.content[
<div id="test" style="width:800px;height:504px;" class="gantt_select html-widget"></div>
<script type="application/json" data-for="test">{"x":{"data":{"task":["Storyboard","Slide Design","Practice","Present"],"type":["Prep","Dev","Dev","Conf"],"startTime":["2021-03-01","2021-03-15","2021-06-01","2021-07-13"],"endTime":["2021-03-15","2021-06-01","2021-07-13","2021-07-14"],"details":["Outline Talk","CSS and HTML","Review with the team","Present at Phuse!"]},"color":["#7AC7C2","#004751"]},"evals":[],"jsHooks":[]}</script>
]

---

.title_content[
<h1 style="color:white;padding-top:50px;font-size:80px;margin-bottom:0;width:30%;">How do I make one?</h1>
]

---

```r
usethis::create_package("atoruswidgets")
```

```r
htmlwidgets::scaffoldWidget("line_select")
```
]
]

<img style="position:absolute;
    width: 9%;
    top: 285px;
    left: 430px;" src="img/midcurl.png"></img>
    
<img style="position:absolute;
    width: 9%;
    top: 285px;
    right: 450px;" src="img/rightcurl.png"></img>
    
    
<div id="scaffr" class="scaffold-text">line_select.R</div>
<div id="scaffjs" class="scaffold-text">line_select.js</div>
<div id="scaffyml" class="scaffold-text">line_select.yaml</div>

---

```r
#' <Add Title>
#' <Add Description>
#' @import htmlwidgets
#' @export
line_select <- function(message, width = NULL, height = NULL, elementId = NULL) {

# forward options using x
* x = list(
*   message = message
* )

# create widget
  htmlwidgets::createWidget(
    name = 'line_select',
*   x,
    width = width,
    height = height,
    package = 'atoruswidgets',
    elementId = elementId
  )
}
```
]

<div id="rarg" class="r-text">User supplied string</div>
<div id="rlist" class="r-text">Wrap into a list</div>
<div id="routput" class="r-text">Put string in inside HTML element</div>

---

```yaml
# (uncomment to add a dependency)
# dependencies:
#  - name:
#    version:
#    src:
#    script:
#    stylesheet:
```
]

---

```js
HTMLWidgets.widget({
  name: 'line_select',
  type: 'output',
  factory: function(el, width, height) {
    // TODO: define shared variables for this instance
    return {
      renderValue: function(x) {
        // TODO: code to render the widget, e.g.
*       el.innerText = x.message;
      },

resize: function(width, height) {
        // TODO: code to re-render the widget with a new size
      }

};
  }
});
```
]

<div id="jsmessage" class="message-text">kind of like x$message</div>

---

```r
line_plot("This is a line plot.")
```

<div style="background-color:white;color:black;font-family:'Times New Roman';height:200px;">
This is a line plot.
<div>
]

---

```html
<div id="htmlwidget_container">
  <div 
    id="htmlwidget-c21cca0e76e520b46fc7" 
    style="width:960px;height:500px;" 
    class="line_select html-widget">
*   This is a line plot.
  </div>
</div>
<script 
  type="application/json" 
  data-for="htmlwidget-c21cca0e76e520b46fc7">
  {"x":{"message":"This is a line plot."},"evals":[],"jsHooks":[]}
</script>
```
]

---

]

<img src="img/bridge.png" style="position:absolute;
position: absolute;
    top: -150px;
    left: -212px;"></img>
---