webR in browser app with DDIwR

[borsna]

Do a in browser tool for DDIwR using webR:

https://webr.r-wasm.org
https://cran.r-project.org/web/packages/DDIwR/

This would be great for a no install needed in browser version of DDIwR and could be used inside tools like Nectar Publisher

[dusadrian]

Open a webr page:
https://webr.r-wasm.org/latest/

dependencies <- c("base64enc", "declared", "digest", "xml2", "haven", "readxl", "writexl")
install.packages(dependencies)

install.packages(
    c("admisc", "DDIwR"),
    repos = "https://dusadrian.github.io/R-wasm/repo"
)

Upload an SPSS file (well_being.sav, for instance) into /home/web_user

library(DDIwR)
convert("well_being.sav", to = "DDI")

This is a proof of concept that:

• R can work into a webpage
• packages can be built and installed in webassembly
• a dedicated repository of specific R packages can be set up and used

[dusadrian]

For more wizardry with direct connections between the web environment and the R environment:
https://gws.quarto.pub/magic-with-wasm-and-webr/#/title-slide

[borsna]

Made a simple test with vue to installDDIwR and get DDI from a .sav when the file input is changed.
Tested with smaller files 100-200KB and converting takes a few seconds.

Larger files like 02934-0001-Data.sav ~51MB from https://doi.org/10.3886/ICPSR02934.v4 works but takes a long time to process, seems to be slow when running it trough StatConverter seems to take a similar amount of time so this does not seem to be just because of running in wasm. I don´t think files of this size will be common so having some kind of spinner in Nectar Publisher is enough.

My test code to upload file and reading DDI back:

<script setup>
import { ref } from 'vue';
import { WebR } from 'webr';

const ddi = ref('');
const state = ref('none');

const webR = new WebR();
webR.init();

webR.installPackages(["DDIwR"], { 
  repos: [
    "https://repo.r-wasm.org", 
    "https://dusadrian.github.io/R-wasm/repo"
  ]
});

const handleFileChange = async (event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    const basename  = file.name.substr(0,file.name.lastIndexOf('.'));

    reader.onload = async (e) => {
      state.value = 'loading';
      const contents = e.target.result;
      await webR.FS.writeFile('/home/web_user/' + file.name, new Uint8Array(contents));
      console.log('File uploaded and written to /home/web_user/'+file.name);
      console.log('run convert with DDIwR...');
      let result = await webR.evalR(`
        library(DDIwR)
        convert("`+file.name+`", to="DDI", embed=FALSE)
      `);
      let output = await result;
      console.log('Files done, reading...');
      
      var readDdiResult = await webR.FS.readFile('/home/web_user/'+basename+'.xml');
      var ddiString = new TextDecoder().decode(readDdiResult);
      ddi.value = ddiString;

      console.log('DONE!');
      state.value = 'done';
    };

    await reader.readAsArrayBuffer(file);
  }
};
</script>

<template>
  <div class="card">
    <input type="file" accept=".sav" @change="handleFileChange">
  </div>
  <div v-if="state=='loading'" id="loading"></div>

  <div v-if="state=='done'" class="card">
    <h2>DDI-C</h2>
    <pre class="no-wrap">{{ ddi }}</pre>
  </div>
</template>

<style scoped>
.no-wrap {
  overflow-x: auto;
}

#loading {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid rgba(55,55,55,.3);
  border-radius: 50%;
  border-top-color: #222;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
</style>

[dusadrian]

Nice...!
Indeed, larger files take a lot of time but that is not just in DDIwR or StatConverter, also in commercial tools like StatTransfer they tend to get a while.
Things might be improved a little bit, but I don't expect significant increases in speed unless writing a custom C code reader / writer.
The part with:

let result = await webR.evalR(`
    library(DDIwR)
    convert("`+file.name+`", to="DDI", embed=FALSE)
`);

can be made a bit simpler with:

let result = await webR.evalR(`
    DDIwR::convert("`+file.name+`", to="DDI", embed=FALSE)
`);

with the same effect.