How to use pvw-visualizer - 10 common examples

componentWillUnmount() {
    // trash visualizer state here
    setImmediate(() => {
      ImageProviders.setImageProvider(null);
    });
    dispatch(Actions.resetVisualizerState());

    // Close ws without exiting server
    network.exit(-1);
  }

componentWillUnmount() {
    // trash visualizer state here
    setImmediate(() => {
      ImageProviders.setImageProvider(null);
    });
    dispatch(Actions.resetVisualizerState());

    // Close ws without exiting server
    network.exit(-1);
  }

export default connect((state) => {
  const pendingCount = selectors.network.getPendingCount(state);
  const remoteRendering = selectors.view.getRemoteRenderingState(state);
  const remoteFps = selectors.view.getRemoteFpsState(state);
  const viewId = selectors.active.getActiveView(state);
  const provideOnImageReady = selectors.ui.getVisiblePanel(state) === 3; // SavePanel visible
  const interactiveQuality = selectors.view.getRemoteInteractiveQualityState(
    state
  );
  const interactiveRatio = selectors.view.getRemoteInteractiveRatioState(state);
  const throttleTime = selectors.view.getThrottleTime(state);
  const maxFPS = selectors.view.getServerMaxFPS(state);
  const progress = selectors.network.getProgressUpdate(state);

  return {
    pendingCount,
    remoteRendering,
    remoteFps,

export default connect((state) => {
  const pendingCount = selectors.network.getPendingCount(state);
  const remoteRendering = selectors.view.getRemoteRenderingState(state);
  const remoteFps = selectors.view.getRemoteFpsState(state);
  const viewId = selectors.active.getActiveView(state);
  const provideOnImageReady = selectors.ui.getVisiblePanel(state) === 3; // SavePanel visible
  const interactiveQuality = selectors.view.getRemoteInteractiveQualityState(
    state
  );
  const interactiveRatio = selectors.view.getRemoteInteractiveRatioState(state);
  const throttleTime = selectors.view.getThrottleTime(state);
  const maxFPS = selectors.view.getServerMaxFPS(state);
  const progress = selectors.network.getProgressUpdate(state);

  return {
    pendingCount,
    remoteRendering,
    remoteFps,
    viewId,
    provideOnImageReady,
    interactiveRatio,
    interactiveQuality,
    throttleTime,
    maxFPS,
    progress,
    resetCamera: () => dispatch(Actions.view.resetCamera()),
    updateCamera: (vid, focalPoint, viewUp, position) =>
      dispatch(Actions.view.updateCamera(vid, focalPoint, viewUp, position)),
    updateActiveViewId: (vid) =>

export default connect((state) => {
  const pendingCount = selectors.network.getPendingCount(state);
  const remoteRendering = selectors.view.getRemoteRenderingState(state);
  const remoteFps = selectors.view.getRemoteFpsState(state);
  const viewId = selectors.active.getActiveView(state);
  const provideOnImageReady = selectors.ui.getVisiblePanel(state) === 3; // SavePanel visible
  const interactiveQuality = selectors.view.getRemoteInteractiveQualityState(
    state
  );
  const interactiveRatio = selectors.view.getRemoteInteractiveRatioState(state);
  const throttleTime = selectors.view.getThrottleTime(state);
  const maxFPS = selectors.view.getServerMaxFPS(state);
  const progress = selectors.network.getProgressUpdate(state);

  return {
    pendingCount,
    remoteRendering,
    remoteFps,
    viewId,

export default connect((state) => {
  const pendingCount = selectors.network.getPendingCount(state);
  const remoteRendering = selectors.view.getRemoteRenderingState(state);
  const remoteFps = selectors.view.getRemoteFpsState(state);
  const viewId = selectors.active.getActiveView(state);
  const provideOnImageReady = selectors.ui.getVisiblePanel(state) === 3; // SavePanel visible
  const interactiveQuality = selectors.view.getRemoteInteractiveQualityState(
    state
  );
  const interactiveRatio = selectors.view.getRemoteInteractiveRatioState(state);
  const throttleTime = selectors.view.getThrottleTime(state);
  const maxFPS = selectors.view.getServerMaxFPS(state);
  const progress = selectors.network.getProgressUpdate(state);

  return {
    pendingCount,
    remoteRendering,
    remoteFps,
    viewId,
    provideOnImageReady,
    interactiveRatio,
    interactiveQuality,
    throttleTime,
    maxFPS,
    progress,
    resetCamera: () => dispatch(Actions.view.resetCamera()),
    updateCamera: (vid, focalPoint, viewUp, position) =>

componentWillReceiveProps(nextProps) {
    if (nextProps.remoteRendering !== this.props.remoteRendering) {
      if (nextProps.remoteRendering) {
        // Changing back to remote rendering
        const params = this.renderer.getCameraParameters();
        this.props.updateCamera(
          this.props.viewId,
          params.focalPoint,
          params.viewUp,
          params.position
        );
      }
      ImageProviders.reset();
      this.needsSetImageProvider = true;
    }
  }

componentDidMount() {
    network.onReady(() => {
      this.client = network.getClient();
      this.connection = network.getConnection();
      this.session = this.connection.getSession();

      setImmediate(() => {
        setup(network.getClient().session);
        this.setImageProvider();
        this.forceUpdate();
      });
    });

    // props.simulation is not necessarily updated with latest metadata, so we fetch it.
    client
      .getSimulationStep(this.props.simulation._id, this.props.step)
      .then((resp) => {
        const hostname = this.props.location.hostname

export default connect((state) => {
  const pendingCount = selectors.network.getPendingCount(state);
  const remoteRendering = selectors.view.getRemoteRenderingState(state);
  const remoteFps = selectors.view.getRemoteFpsState(state);
  const viewId = selectors.active.getActiveView(state);
  const provideOnImageReady = selectors.ui.getVisiblePanel(state) === 3; // SavePanel visible
  const interactiveQuality = selectors.view.getRemoteInteractiveQualityState(
    state
  );
  const interactiveRatio = selectors.view.getRemoteInteractiveRatioState(state);
  const throttleTime = selectors.view.getThrottleTime(state);
  const maxFPS = selectors.view.getServerMaxFPS(state);
  const progress = selectors.network.getProgressUpdate(state);

  return {
    pendingCount,
    remoteRendering,
    remoteFps,
    viewId,
    provideOnImageReady,
    interactiveRatio,

export default connect((state) => {
  const pendingCount = selectors.network.getPendingCount(state);
  const remoteRendering = selectors.view.getRemoteRenderingState(state);
  const remoteFps = selectors.view.getRemoteFpsState(state);
  const viewId = selectors.active.getActiveView(state);
  const provideOnImageReady = selectors.ui.getVisiblePanel(state) === 3; // SavePanel visible
  const interactiveQuality = selectors.view.getRemoteInteractiveQualityState(
    state
  );
  const interactiveRatio = selectors.view.getRemoteInteractiveRatioState(state);
  const throttleTime = selectors.view.getThrottleTime(state);
  const maxFPS = selectors.view.getServerMaxFPS(state);
  const progress = selectors.network.getProgressUpdate(state);

  return {
    pendingCount,
    remoteRendering,
    remoteFps,
    viewId,
    provideOnImageReady,
    interactiveRatio,
    interactiveQuality,