Publish a Vitessce notebook on Posit Connect

Hi Vitessce team,

Thanks for the very powerful framework.

I am looking at publishing a vitessce based visualization on a Posit Connect server. To do so, I have a jupyter notebook that works fine on my laptop with voila. The notebook downloads a public adata object, converts it to zarr, then runs the app. However when I publish it on the posit Connect server, the content of the widgets are empty which I believe because the Posit Connect would work as the data server, the zarr files are on the Posit Connect server, but the app is not able to fetch the files from Connect (it is looking to fetch the files from local host). I see there is a note about running Vitessce with a remote server by setting the proxy. I appreciate if you can point me to how set the proxy with Posit Connect?

Thanks,
George.

Hi,
Mark can elaborate more on the particulars of hosting data for Vitesse, but this seems like a Posit Connect question. We at CCB have been hosting Vitesse widgets for our projects on posit connect and the key for us has been hosting the data on a remote bucket such as AWS S3, saving the config on S3, then publishing just a notebook that pulls the config from the s3 URL and displays the widget. Alternatively there are ways to publish just the plot from push-button publishing in RStudio which works only if the view config already works with remote data sources.

In short, I would not rely on Posit Connect as the data server and your notebook should not run data processing pipeline AND the widget display code. You should host or mount data elsewhere then publish the visualizations to Posit Connect. Vitesse.io might also be another option.

Thanks @lee-t for the suggestion.

In my use case, I would like to only give authorized access to users who can see the vitessce application. Is there a way to provide a Bearer token in the request headers?

I don't think vitessce has the means to manage tokens for auth, you would need a different library on whatever you're hosting vitessce on unless (as you mentioned in the parent issue) you're on posit connect in which you shouldn't be bothering because the platform should do that management for you.
Posit Connect can integrate with a number of 3rd party products and authentication providers for user authentication. Depending on the provider or the integration standard used to integrate with the provider, varying levels of functionality will be supported for external groups of users. Read the admin or user docs for more info.

Thanks @lee-t.
Yes, I am able to use Posit Connect's authentication module to generate an auth token for the user. I know that's a bit different than the original subject of this issue, does vitessce has the capability to include that auth token in the header of the Get request vitessce uses to fetch files using https?

Maybe something like what is shown here?

Hi @georgezakinih ,
I am not very familiar with Posit Connect so I will defer to @lee-t who has more expertise about that. Regarding definition of additional headers, this can be done with the requestInit property within each file definition. The values of requestInit correspond to the second parameter of the JS fetch function https://developer.mozilla.org/en-US/docs/Web/API/fetch

If using the Vitessce Python API, a dict can be passed to the request_init parameter in the constructor of the AnnDataWrapper class:

vitessce-python/vitessce/wrappers.py

Line 531 in 8934187

    
                   :param dict request_init: options to be passed along with every fetch request from the browser, like `{ "header": { "Authorization": "Bearer dsfjalsdfa1431" } }`

Regarding the proxy support, the proxy=True argument can be passed to several of the functions including the VitessceConfig.widget function (ctrl+F for "proxy" on this page https://vitessce.github.io/vitessce-python/api_config.html for additional documentation). This assumes jupyter_server_proxy https://jupyter-server-proxy.readthedocs.io/en/latest/install.html is installed. It has only been tested with Jupyter Notebooks and Jupyter Lab, so I am not sure whether it would work with Voila or Posit Connect. You could try with both the proxy and host_name parameters of VitessceConfig.display like VitessceConfig.display(proxy=True, host_name="http://posit_connect.com/something") which may be more robust to different notebook platforms.

Thanks @keller-mark and @lee-t .

Yes the display method looks like what I should try. I appreciate your thoughts what should be the base_url and port and I test with this example: https://vitessce.github.io/vitessce-python/notebooks/widget_pbmc.html

Thanks for the point to request_init. I see its get added to the "requestInit" attribute in the config file. I will test this out.

@keller-mark, in my use case, I will need add every file separately in a dataset.
Current the add_file function does not take the requestInit attribute.

Do you suggest a workaround?

Hi @keller-mark , I have added the option in the add_file function to read the "requestInit" from the json configuration file.
Now my configuration looks like:

      "fileType": "obsEmbedding.csv",
      "url": "https://my-authenticated-endpoint",
      "coordinationValues": {
        "obsType": "cell",
        "embeddingType": "t-SNE"
      },  
      "requestInit": {
        "method": "GET",
        "headers": {"Authorization": "Bearer xyz"}
      },

Is that what vitessce expects? For some reason, testing with the configuration above shows that the request is sent (in chrome developer view), but it does not return successfully (not showing any return code)

P.S., in this documentation, I believe the attribute is "headers" with 's'.

Looking further, I see the error is related to CORS. This happens when I add the "Authorization" attribute to the headers in the config file. If I remove the "Authorization" attribute, the request goes through and returns "unauthorized" with 401 error.

@keller-mark and @lee-t , is there anything I am missing in this process?

@keller-mark @lee-t , it turned out to be a server problem of not allowing CORS. Disabling cores in the browser solved the problem. Thanks again for your help.