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

importSimulariumViewer,{SimulariumController}from"@aics/simularium-viewer";import"@aics/simularium-viewer/style/style.css";constnetConnectionSettings={serverIp: "staging-node1-agentviz-backend.cellexplore.net",serverPort: 9002,};constsimulariumController=newSimulariumController({trajectoryPlaybackFile: "ATPsynthase_9.h5",netConnectionSettings: netConnectionSettings,});classViewerextendsReact.Component{publicconstructor(props){super(props);this.viewerRef=React.createRef();this.state={highlightId: -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(<SimulariumViewerref={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 run install-examples to install the dependencies.
2. Run npm start
3. Navigate to http://localhost:8080

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

---

Quick Start

script	comments
build	create ES module build
clean	remove generated artifacts
generateTypes	generate type declarations
lint	run eslint on src directory
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 vitest; 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. Use --localserver to run backend locally. With no flags, this script will default to using the staging octopus server as backend

---

Development

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