3.8.4 • Published 11 months ago

@aics/simularium-viewer v3.8.4

Weekly downloads
11
License
MIT
Repository
github
Last release
11 months ago

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 run install-examples 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/src/, demonstrating the viewer's functionality.


Quick Start

scriptcomments
buildcreate ES module build
cleanremove generated artifacts
generateTypesgenerate type declarations
lintrun eslint on src directory
transpileESrun babel on src directory; do not transpile import/export statements for an ES module compatible build (used by bundlers for tree-shaking)
testrun jest; searches for any files matching the pattern "src/*/.test.js"
typeCheckrun tsc in type-check only mode
startruns 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.

3.7.4

1 year ago

3.8.0

1 year ago

3.8.4

11 months ago

3.8.3

1 year ago

3.8.2

1 year ago

3.8.1

1 year ago

3.7.3

1 year ago

3.7.2

1 year ago

3.7.1

1 year ago

3.7.0

1 year ago

3.6.4

2 years ago

3.6.2

2 years ago

3.6.3

2 years ago

3.6.1

2 years ago

3.6.0

2 years ago

3.5.1

2 years ago

3.5.0

3 years ago

3.4.0

3 years ago

3.3.3

3 years ago

3.3.2

3 years ago

3.2.2

4 years ago

3.2.1

4 years ago

3.3.1

3 years ago

3.2.0

4 years ago

3.1.0

4 years ago

3.0.4

4 years ago

3.0.3

4 years ago

3.0.2

4 years ago

3.0.1

4 years ago

3.0.0

4 years ago

2.9.8

4 years ago

2.9.6

4 years ago

2.9.7

4 years ago

2.9.5

4 years ago

2.9.4

4 years ago

2.9.3

4 years ago

2.9.2

4 years ago

2.9.1

4 years ago

2.9.0

4 years ago

2.8.1

4 years ago

2.8.0

4 years ago

2.7.4

4 years ago

2.7.3

4 years ago

2.7.2

4 years ago

2.7.1

4 years ago

2.7.0

4 years ago

2.6.2

4 years ago

2.6.1

4 years ago

2.6.0

4 years ago

2.5.3

5 years ago

2.5.2

5 years ago

2.5.1

5 years ago

2.5.0

5 years ago

2.4.9

5 years ago

2.4.8

5 years ago

2.4.7

5 years ago

2.4.6

5 years ago

2.4.5

5 years ago

2.4.4

5 years ago

2.4.3

5 years ago

2.4.2

5 years ago

2.4.1

5 years ago

2.4.0

5 years ago

2.3.3

5 years ago

2.3.2

5 years ago

2.3.1

5 years ago

2.2.0

5 years ago

2.1.3

5 years ago

2.1.2

5 years ago

2.1.1

5 years ago

2.1.0

5 years ago

2.0.1

5 years ago

2.0.0

5 years ago

1.2.13

5 years ago

1.2.14

5 years ago

1.2.9

5 years ago

1.2.8

5 years ago

1.2.7

5 years ago

1.2.5

5 years ago

1.2.4

5 years ago