Merge pull request #63 from vitessce/keller-mark/upgrade-vitessce

Upgrade vitessce, do not minify bundle, check for list in CoordinationScope$set_value

.github/workflows/deploy.yml

@@ -2,20 +2,25 @@ name: R
 
 on: [push, pull_request]
 
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
 jobs:
   build:
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-22.04
     env:
-      cache-version: 4
+      cache-version: 8
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Set up libraries for Ubuntu
         run: |
           sudo apt-get update
           sudo apt-get install -y libsodium-dev libharfbuzz-dev libfribidi-dev libcurl4-openssl-dev texlive-latex-base texlive-fonts-extra pandoc libmagick++-dev libhdf5-dev
 
       - name: Set up R 4.0
-        uses: r-lib/actions/setup-r@master
+        uses: r-lib/actions/setup-r@v2
         with:
           r-version: 4.0
       - name: Get R and OS version
@@ -65,13 +70,26 @@ jobs:
         run: |
           covr::package_coverage()
         shell: Rscript {0}
+      - name: Downgrade pkgdown
+        run: |
+          remotes::install_version("pkgdown", "2.0.3")
+        shell: Rscript {0}
       - name: Build docs
         run: |
           Rscript -e 'pkgdown::build_site(new_process = FALSE)'
           touch docs/.nojekyll
-      - name: Deploy docs to gh-pages branch
+      - uses: actions/upload-pages-artifact@v1
         if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }}
-        uses: alex-page/blazing-fast-gh-pages-deploy@v1.1.0
         with:
-          repo-token: ${{ secrets.GH_TOKEN }}
-          site-directory: docs
+          path: ./docs
+  deploy:
+    runs-on: ubuntu-22.04
+    needs: build
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        if: ${{ github.event_name == 'push' && github.ref == 'refs/heads/main' }}
+        id: deployment
+        uses: actions/deploy-pages@v1

DESCRIPTION

@@ -28,7 +28,7 @@ LazyData: false
 Language: en-US
 StagedInstall: no
 Roxygen: list(markdown = TRUE)
-RoxygenNote: 7.1.2
+RoxygenNote: 7.2.3
 VignetteBuilder: knitr
 Imports:
     Matrix,

R/basilisk.R

@@ -10,17 +10,17 @@ py_env <- basilisk::BasiliskEnvironment(
   envname="vitessce_basilisk_env",
   pkgname="vitessceR",
   packages=c(
-    "numpy==1.20.2",
-    "pandas==1.2.4",
-    "anndata==0.7.6",
-    "h5py==3.2.1",
-    "hdf5==1.10.6",
-    "natsort==7.1.1",
-    "packaging==20.9",
-    "scipy==1.6.3",
-    "sqlite==3.35.5",
-    "zarr==2.5.0",
-    "numcodecs==0.7.2"
+    "numpy==1.*",
+    "pandas==1.*",
+    "anndata==0.7.*",
+    "h5py==3.*",
+    "hdf5==1.*",
+    "natsort==7.*",
+    "packaging==20.*",
+    "scipy==1.*",
+    "sqlite==3.*",
+    "zarr==2.*",
+    "numcodecs==0.*"
   ),
   pip=c(
     "ome-zarr==0.2.1"

R/config.R

@@ -360,7 +360,7 @@ VitessceConfig <- R6::R6Class("VitessceConfig",
     #' @return A new `VitessceConfig` object.
     initialize = function(name = NA, description = NA) {
       self$config <- list(
-        version = "1.0.0",
+        version = "1.0.9",
         name = ifelse(is_na(name), "", name),
         description = ifelse(is_na(description), "", description),
         datasets = list(),
@@ -529,6 +529,10 @@ VitessceConfig <- R6::R6Class("VitessceConfig",
     #' @param c_types The coordination types on which to coordinate the views.
     #' @param c_values Initial values corresponding to each coordination type.
     #' Should have the same length as the c_types array. Optional.
+    #' @param raw Should the coordination values be set using
+    #' VitessceConfigCoordinationScope$set_value() or
+    #' VitessceConfigCoordinationScope$set_value_raw()? Use
+    #' when setting lists or similar more complex values.
     #' @return Self, to allow chaining.
     #' @examples
     #' vc <- VitessceConfig$new("My config")
@@ -541,7 +545,7 @@ VitessceConfig <- R6::R6Class("VitessceConfig",
     #'   c(CoordinationType$EMBEDDING_TARGET_X, CoordinationType$EMBEDDING_TARGET_Y),
     #'   c_values = c(0, 0)
     #' )
-    link_views = function(views, c_types, c_values = NA) {
+    link_views = function(views, c_types, c_values = NA, raw = FALSE) {
       c_scopes <- self$add_coordination(c_types)
       for(view in views) {
         for(c_scope in c_scopes) {
@@ -551,7 +555,11 @@ VitessceConfig <- R6::R6Class("VitessceConfig",
       if(!is_na(c_values) && length(c_types) == length(c_values)) {
         for(i in seq_len(length(c_scopes))) {
           c_scope <- c_scopes[[i]]
-          c_scope$set_value(c_values[[i]])
+          if(raw) {
+            c_scope$set_value_raw(c_values[[i]])
+          } else {
+            c_scope$set_value(c_values[[i]])
+          }
         }
       }
       invisible(self)

R/data_to_zarr.R

@@ -108,9 +108,6 @@ sce_to_anndata_zarr <- function(sce_obj, out_path) {
 #' @return TRUE if the conversion succeeds.
 #'
 #' @export
-#' @examples
-#' obj <- get_spe_obj()
-#' spe_to_anndata_zarr(obj, out_path = "data/spe.zarr")
 #' @importFrom SummarizedExperiment colData
 #' @importFrom SingleCellExperiment int_colData
 #' @importFrom SpatialExperiment colData<-
@@ -120,7 +117,8 @@ spe_to_anndata_zarr <- function(spe_obj, out_path) {
   colData(spe_obj) <- cbind(
     colData(spe_obj),
     internal_col_data$spatialCoords,
-    internal_col_data$spatialData,
+    # spatialData deprecated in 1.5.2
+    # internal_col_data$spatialData,
     internal_col_data$reducedDims
   )
 

R/widget.R

@@ -67,7 +67,12 @@ vitessce_widget <- function(config, theme = "dark", width = NULL, height = NULL,
     width = width,
     height = height,
     package = 'vitessceR',
-    elementId = element_id
+    elementId = element_id,
+    sizingPolicy = htmlwidgets::sizingPolicy(
+      viewer.padding = 0,
+      browser.padding = 0,
+      browser.fill = TRUE
+    )
   )
 }
 

inst/htmlwidgets/lib/index.js

@@ -1,16 +1 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Vitessce } from 'vitessce';
-import 'vitessce/dist/es/production/static/css/index.css';
-import './index.css';
-
-export function render_vitessce(el, config, width, height, theme) {
-    ReactDOM.render(
-        <Vitessce
-            config={config}
-            height={height}
-            theme={theme}
-        />,
-        el
-    );
-}
+// This is empty

inst/htmlwidgets/vitessceR.js

@@ -1,12 +1,69 @@
+function asEsModule(component) {
+  return {
+    __esModule: true,
+    default: component,
+  };
+}
+
 HTMLWidgets.widget({
   name: 'vitessceR',
   type: 'output',
   factory: function(el, width, height) {
     // TODO: define shared variables for this instance
 
     return {
-      renderValue: function(x) {
-        render_vitessce(el, x.config, width, height, x.theme);
+      renderValue: async function(x) {
+        const React = await import('https://unpkg.com/es-react@16.13.1/react.js');
+        const ReactDOM = await import('https://unpkg.com/es-react@16.13.1/react-dom.js');
+        const d3 = await import("https://esm.sh/d3-require@1.3.0");
+
+        const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+        const e = React.createElement;
+        let customRequire = d3.require;
+
+        const jsPackageVersion = "2.0.2"; // TODO
+
+        const customJsUrl = x.custom_js_url;
+        if(customJsUrl && customJsUrl.length > 0) {
+            customRequire = d3.requireFrom(async () => {
+                return customJsUrl;
+            });
+        }
+        const aliasedRequire = customRequire.alias({
+            "react": React,
+            "react-dom": ReactDOM
+        });
+        const Vitessce = React.lazy(() => aliasedRequire(`vitessce@${jsPackageVersion}`).then(vitessce => asEsModule(vitessce.Vitessce)));
+
+        // console.log(d3);
+        // console.log(e);
+        // console.log(x);
+
+        function VitessceWidget(props) {
+            const { config, theme } = props;
+
+            const divRef = React.useRef();
+
+            const onConfigChange = React.useCallback((newConfig) => {
+                if(window && window.Shiny && window.Shiny.setInputValue) {
+                  Shiny.setInputValue("on_config_change", newConfig);
+                }
+            }, [window.Shiny]);
+
+            const vitessceProps = { height, theme, config, onConfigChange };
+            return e('div', { ref: divRef, style: { height: height + 'px' } },
+                e('style', {}, `
+                /* To undo the bootstrap font-sizing from Shiny. TODO: remove in v2.0.3 of Vitessce */
+                html { font-size: initial; }
+                `),
+                e(React.Suspense, { fallback: e('div', {}, 'Loading...') },
+                    e(Vitessce, vitessceProps)
+                )
+            );
+        }
+
+        ReactDOM.render(e(VitessceWidget, x), el);
       },
       resize: function(width, height) {
         // TODO: code to re-render the widget with a new size

inst/htmlwidgets/vitessceR.yaml

@@ -1,8 +1,6 @@
 dependencies:
   - name: vitessceR
     version: 0.99.1
-    src: htmlwidgets/dist
+    src: htmlwidgets/lib
     script:
       - index.js
-    stylesheet:
-      - index.css