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

---

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 jest; 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/.

---

Development

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