interactive-translation.qmd

---
knitr:
  opts_chunk:
    echo: false
    message: false
execute:
  echo: false
---

# Interactive Translation

```{r init}
source("init.R")
```

 

Translators are always making choices for their audiences. Normally, these choices are made invisible to facilitate a smoother reading experience, but this practice can give readers the false impression that what they are enjoying is an unmediated "true" expression of the original text. By allowing readers to make translation choices themselves, the complexity and playfulness of texts like _Le Roman de Silence_ may be more fully appreciated.

On this page, you decide.


<!-- ```{r} -->
<!-- kable(df_translations %>% select(Line, `Roche-Mahdi (2007) OF Edition`, `My Translation w/ notes`) %>% slice_head(n = 10),  -->
<!--       # caption = "Here's a caption",  -->
<!--       #escape = FALSE needed so explicit HTML in table will render as HTML -->
<!--       escape = FALSE) %>%  -->
<!--   kableExtra::column_spec(2, width = "6cm") -->

<!-- ``` -->





```{r pass_data}
#make data from R available to ojs
ojs_define(data = df_translations %>% 
             select(Line, 
                    Line_all, 
                    `Roche-Mahdi (2007) OF Edition`,
                    `My Translation w/ notes`, 
                    `Word Order Priority Translation w/ notes`,
                    `Sound Priority Translation w/ notes`) %>% 
             rename(`Meaning Priority Translation` = `My Translation w/ notes`, 
                    `Word Order Priority Translation` = `Word Order Priority Translation w/ notes`,
                    `Sound Priority Translation` = `Sound Priority Translation w/ notes`))
```

```{ojs filter_data}
//names of all properties
//Object.keys(data); 

//names of properties to select
mykeys = [
  "Line",
  "Roche-Mahdi (2007) OF Edition"
]; 

//create data object that contains only properties wanted
//https://stackoverflow.com/a/56592365/7694963
subset = Object.fromEntries(
  newkeys
  .filter(key => key in data) // line can be removed to make it inclusive
  .map(key => [key, data[key]])
);

//transpose data with selected columns
data_filtered = transpose(subset)


```


```{ojs button}
//options for radio button
opts = [
    {alias: "Meaning", colname: "Meaning Priority Translation"},
    {alias: "Syntax", colname: "Word Order Priority Translation"},
    {alias: "Sound", colname: "Sound Priority Translation"}
  ]

//create radio button
viewof translationselected = Inputs.radio(
  opts, 
  {
    label: "What do you want to prioritize in the translation?",
    format: x => x.alias,
    value: opts[0]
  }
)

//create new keys based on radio selection
newkeys = {
  var newkeys = []
  newkeys.push(...mykeys)
  newkeys.push(translationselected.colname)
  return newkeys
}


```


```{ojs test_table}
//TODO: figure out how to store this function in a separate file

// Function to render a table
html_table = options => html`<table>
  <thead>
    <tr>${Object.keys(options[0]).map((d, i) => {
      let label = d;
      return `<th>${label}</th>`;
    })}
  </tr>
  </thead>
  <tbody>
    ${options
      <!-- .filter((d, i) => i < 10) -->
      .map(row => {
        return html`<tr>${
        Object.values(row)
        .map(function(element, index, array){
                    if (index == 1){
                        return `<td style="width: 6cm;">${element}</td>`;
                    } else {
                        return `<td>${element}</td>`;
                    }
                })}</tr>`;
      })}
  </tbody>
  </table>
`

html_table(data_filtered)


```



<!-- ```{ojs print_table} -->
<!-- Inputs.table(data_filtered) -->
<!-- ``` -->



<!-- ```{r} -->
<!-- knitr::include_app("https://lindsayevanslee.shinyapps.io/silence-app/", -->
<!--   height = "600px") -->
<!-- ``` -->