@aics/simularium-viewer

An npm package to view simulations.

Usage no npm install needed!

<script type="module">
  import aicsSimulariumViewer from 'https://cdn.skypack.dev/@aics/simularium-viewer';
</script>

README

Simularium repositories

This repository is part of the Simularium project (simularium.allencell.org), which includes repositories:

  • simulariumIO - Python package that converts simulation outputs to the format consumed by the Simularium viewer website
  • simularium-engine - C++ backend application that interfaces with biological simulation engines and serves simulation data to the front end website
  • simularium-viewer - NPM package to view Simularium trajectories in 3D
  • simularium-website - Front end website for the Simularium project, includes the Simularium viewer

Node.js CI NPM Package Publish

Simularium Viewer

simularium-viewer is an NPM package to view simularium trajectories in 3D https://www.npmjs.com/package/@aics/simularium-viewer


Description

This viewer can visualize trajectories that are in Simularium format (see the file format documentation here). The viewer can operate in the following modes:

drag-and-drop
Drag a Simularium file into the window (WebGL) area of the viewer.

remote-streaming
Connect to a simularium-engine instance, and stream data through a web-socket connection.


Installation in your project

  1. npm i @aics/simularium-viewer
  2. In Viewer.jsx/tsx
import SimulariumViewer, { SimulariumController } from "@aics/simularium-viewer";
import "@aics/simularium-viewer/style/style.css";

const netConnectionSettings = {
    serverIp: "staging-node1-agentviz-backend.cellexplore.net",
    serverPort: 9002,
};

const simulariumController = new SimulariumController({
    trajectoryPlaybackFile: "ATPsynthase_9.h5",
    netConnectionSettings: netConnectionSettings,
});
class Viewer extends React.Component {

    public constructor(props) {
        super(props);
        this.viewerRef = React.createRef();

        this.state = {
               highlightId: -1,
                pauseOn: -1,
                particleTypeIds: [],
                currentFrame: 0,
                currentTime: 0,
                hideAllAgents: false,
                showPaths: true,
                timeStep: 1,
                totalDuration: 100,
                }
    }

    handleTimeChange = (timeData) => {
        console.log(timeData)
    }

    handleJsonMeshData = (jsonData) => {
        console.log(jsonData)
    }
    onTrajectoryFileInfoChanged = (trajData) => {
        console.log(trajData)
    }

    render () {

        return (<SimulariumViewer
                    ref={this.viewerRef}
                    height={500}
                    width={500}
                    onTimeChange={this.handleTimeChange}
                    simulariumController={simulariumController}
                    onJsonDataArrived={this.handleJsonMeshData}
                    onTrajectoryFileInfoChanged={this.handleTrajectoryInfo}
                    highlightedParticleType={this.state.highlightId}
                    loadInitialData={true}
                    hideAllAgents={this.state.hideAllAgents}
                    showPaths={this.state.showPaths}
                />)
    }

Run an example app locally

  1. Run npm install to install the dependencies.
  2. Run npm start
  3. Navigate to http://localhost:8080/public/ - the / at the end is required

This will run the example in /examples/Viewer.tsx, demonstrating the viewer's functionality.


Quick Start

script comments
build create CommonJS, ES module, and UMD builds
bundle run Webpack to create a UMD bundle
clean remove generated artifacts
format run prettier on src directory
generateTypes generate type declarations
lint run eslint on src directory
transpileCommonJs run babel on src directory; transpile import/export statements for a CommonJS compatible build
transpileES run babel on src directory; do not transpile import/export statements for an ES module compatible build (used by bundlers for tree-shaking)
test run mocha; searches for any files matching the pattern "src/*/.test.js"
typeCheck run tsc in type-check only mode
start runs an example app from examples for testing. Runs at localhost:8080/public/. Run ./gradlew build to see new changes from src

Development

See CONTRIBUTING.md for information related to developing the code.