@aics/simularium-viewer
v3.9.1
Published
An npm package to view simulations.
Downloads
441
Keywords
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
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
npm i @aics/simularium-viewer
- 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,
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
- Run
npm run install-examples
to install the dependencies. - Run
npm start
- Navigate to
http://localhost:8080/public/
- the/
at the end is required
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/public/
. 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.