• Visualization that can keep up with changing needs of your lab
• Standardized YAML build specification providing a Low-Code web application design experience
• Transport-optimization by leveraging client-side rendering with React
• Python+DataJoint interoperability to allow streamlined integration
• Clear separation between business logic from product features i.e. customization through configuration
• Backend-optimized page rendering built for big-data and scale
• Comprehensive permission and security design enabling flexible access control modes
• Securely manage sensitive information by configuring it separtely and referencing it in LC spec
• Pain-free deployments by supporting live-reload on changes to configuration
• Shared, immutable global variables available to all components

• markdown: Often it is necessary to document or describe views via Markdown
• page:
  • Unique tabbed pages to separate areas within your single-page application
  • Hidden pages accessible through linking from records in table components
• grid: Layout structure for organizing subcomponents (as seen in Grafana, AWS Console)
  • fixed: For when you know exactly how many components you'd like to render
  • dynamic: Component templating mode when you need to render realtime views that vary in number of components
• table: Sometimes there's nothing better than a table view
  • paging
  • sorting
  • filtering
• metadata: Great for showing context info for particular views
• plot: Let's face it, we are going to need to be able to plot stuff
  • plotly
• image: When you need to render an image file's data directly within the grid
  • *.apng
  • *.avif
  • *.gif
  • *.jpeg
  • *.png
  • *.svg
  • *.webp
• custom: Adding new, custom components is easy with our extensibility hook. See our currently supported components here which you can reference when creating your own.

The recommended environment to run the demo is included as a DevContainer.

Here are some options that provide a great demo experience:

• Cloud-based IDE: (recommended)
  • Launch using GitHub Codespaces using the option Create codespace on main in the codebase repository on your fork.
  • Build time for a 2-Core codespace is ~6m30s. This is done infrequently and cached for convenience.
  • Start time for a 2-Core codespace is ~3m. This will pull the built codespace from cache when you need it.
  • Tip: GitHub auto names the codespace but you can rename the codespace so that it is easier to identify later.
• Local IDE:
  • Ensure you have Git
  • Ensure you have Docker
  • Ensure you have VSCode
  • Install the Dev Containers extension
  • git clone the codebase repository and open it in VSCode
  • Use the Dev Containers extension to Reopen in Container (More info in the Getting started included with the extension)

You will know your environment has finished loading once you see a terminal open related to Running postStartCommand with a final message: Done.

• To access SciViz, use the VSCode PORTS tab (next to TERMINAL) to manage access to the forwarded ports. SciViz will be served on port 443.
• This interactive environment sets up a developer experience where on saves to sciviz_spec.yaml, SciViz will automatically reload the page to reflect your changes.
• Tip: Take care to save only when specifying valid configuration for SciViz. If you save aggressively, this could cause the underlying services to break since each save triggers a reload.