Show multiple webapps using a global react grid layout - single app

[jrchudy]

We want to have a way to show multiple webapps on the same page in different configurations with user controls too. This might be a new webapp that has a general configuration language composed of configs from each of the webapp.

With the addition of vitessce app, we now use the global react grid layout for 2 different apps. Both of these apps share the same user control libraries and configuration language for both the react grid layout and the user controls. The vitessce app contains a component that handles rendering the actual vitessce component. The configuration language for this component can be reused. This is true about each plot config in the plots array for plot app too. The plot config is a configuration for the plotly component of the app that can be reused for the "plot component.

Sample config for new app:

{
  'config-name': {
    webapps: [{
        webapp_type: 'plot' | 'matrix' | 'vitessce' | 'treeview' | 'boolean-search',
        app_config: {
          /** 
           * config here might be:
           *   - a plot object from plot app
           *   - a vitessce object
           */
        }
    }, ...],
    user_controls: [{ ... }, ...],
    grid_layout_config: { ... }
  }
}

Other tasks involved for this "webapps" app:

• Some things that need to be done for other webapps to have a "component" configuration language:
  • boolean search - nothing more to do at the moment since the config isn't used
  • heatmap - all config properties are specific to the generated heatmap and could be treated as component config
  • matrix - similar to heatmap, properties are specific to the matrix that is displayed
    • unless we don't want title and other information about heatmap included
    • maybe that content is configuring instead?
• Refactoring needed for apps below. These apps were created with most of the functionality in src/pages which should be moved to a component for that app so the component can be reused in the new app:
  • boolean search
  • matrix
• Create a webapps wrapper, similar to AppWrapper from chaise, that includes the configuration language import and set up, initializing the user controls, and setting up the react grid layout component and the default layouts
  • update plot and vitessce apps to use this new webapps app wrapper