ParaViewWebClient

import ParaViewWebClient from 'paraviewweb/src/IO/WebSocket/ParaViewWebClient';
ParaViewWebClient.createClient(...)

or 

import { createClient } from 'paraviewweb/src/IO/WebSocket/ParaViewWebClient';
createClient(...)

createClient(connection, protocols=[], customProtocols={}) : client

The provided connection is the one we get from the AutobahnConnection callback
while the protocols is the list of protocol names that we want to enable and the customProtocols would be custom addon that we want to use within our created client.

Available protocols list:

** ColorManager
** FileListing
** KeyValuePairStore,
** MouseHandler
** ProxyManager
** SaveData
** TimeHandler
** ViewPort
** ViewPortGeometryDelivery
** ViewPortImageDelivery
** VtkGeometryDelivery

A custom protocol will be the following form:

var customProtocols = {
    ListFileService: function createMethods(session) {
        return {
            listServerDirectory: (path='.') => {
                return session.call('file.server.directory.list', [ path ]);
            },
        };
    },
    OtherService: function(session) {
        return {
            method1: ...
            method2: ...
        }
    }
}

Source

ColorManager.js

/* eslint-disable arrow-body-style */
export default function createMethods(session) {
  return {
    getScalarBarVisibilities: (proxyIdList) => {
      return session.call('pv.color.manager.scalarbar.visibility.get', [
        proxyIdList,
      ]);
    },
    setScalarBarVisibilities: (proxyIdMap) => {
      return session.call('pv.color.manager.scalarbar.visibility.set', [
        proxyIdMap,
      ]);
    },
    rescaleTransferFunction: (options) => {
      return session.call('pv.color.manager.rescale.transfer.function', [
        options,
      ]);
    },
    getCurrentScalarRange: (proxyId) => {
      return session.call('pv.color.manager.scalar.range.get', [proxyId]);
    },
    colorBy: (
      representation,
      colorMode,
      arrayLocation = 'POINTS',
      arrayName = '',
      vectorMode = 'Magnitude',
      vectorComponent = 0,
      rescale = false
    ) => {
      return session.call('pv.color.manager.color.by', [
        representation,
        colorMode,
        arrayLocation,
        arrayName,
        vectorMode,
        vectorComponent,
        rescale,
      ]);
    },
    setOpacityFunctionPoints: (
      arrayName,
      pointArray,
      enableSurfaceOpacity = false
    ) => {
      return session.call('pv.color.manager.opacity.points.set', [
        arrayName,
        pointArray,
        enableSurfaceOpacity,
      ]);
    },
    getOpacityFunctionPoints: (arrayName) => {
      return session.call('pv.color.manager.opacity.points.get', [arrayName]);
    },
    getRgbPoints: (arrayName) => {
      return session.call('pv.color.manager.rgb.points.get', [arrayName]);
    },
    setRgbPoints: (arrayName, rgbInfo) => {
      return session.call('pv.color.manager.rgb.points.set', [
        arrayName,
        rgbInfo,
      ]);
    },
    getLutImage: (representation, numSamples, customRange = null) => {
      return session.call('pv.color.manager.lut.image.get', [
        representation,
        numSamples,
        customRange,
      ]);
    },
    setSurfaceOpacity: (representation, enabled) => {
      return session.call('pv.color.manager.surface.opacity.set', [
        representation,
        enabled,
      ]);
    },
    getSurfaceOpacity: (representation) => {
      return session.call('pv.color.manager.surface.opacity.get', [
        representation,
      ]);
    },
    setSurfaceOpacityByArray: (arrayName, enabled) => {
      return session.call('pv.color.manager.surface.opacity.by.array.set', [
        arrayName,
        enabled,
      ]);
    },
    getSurfaceOpacityByArray: (arrayName) => {
      return session.call('pv.color.manager.surface.opacity.by.array.get', [
        arrayName,
      ]);
    },
    selectColorMap: (representation, paletteName) => {
      return session.call('pv.color.manager.select.preset', [
        representation,
        paletteName,
      ]);
    },
    listColorMapNames: () => {
      return session.call('pv.color.manager.list.preset', []);
    },
    listColorMapImages: (numSamples = 256) => {
      return session.call('pv.color.manager.lut.image.all', [numSamples]);
    },
  };
}

FileListing.js

/* eslint-disable arrow-body-style */
export default function createMethods(session) {
  return {
    listServerDirectory: (path = '.') => {
      return session.call('file.server.directory.list', [path]);
    },
  };
}

KeyValuePairStore.js

/* eslint-disable arrow-body-style */
export default function createMethods(session) {
  return {
    storeKeyPair: (key, value) => {
      return session.call('pv.keyvaluepair.store', [key, value]);
    },
    retrieveKeyPair: (key) => {
      return session.call('pv.keyvaluepair.retrieve', [key]);
    },
  };
}

MouseHandler.js

/* eslint-disable arrow-body-style */
export default function createMethods(session) {
  return {
    interaction: (event) => {
      return session.call('viewport.mouse.interaction', [event]);
    },
  };
}

ProgressUpdate.js

/* eslint-disable arrow-body-style */
export default function createMethods(session) {
  return {
    onProgressUpdate: (callback) =>
      session.subscribe('paraview.progress', callback),
  };
}

ProxyManager.js

/* eslint-disable arrow-body-style */
export default function createMethods(session) {
  return {
    create: (
      functionName,
      parentId = '0',
      initialValues = {},
      skipDomain = false,
      subProxyValues = {}
    ) => {
      return session.call('pv.proxy.manager.create', [
        functionName,
        parentId,
        initialValues,
        skipDomain,
        subProxyValues,
      ]);
    },
    open: (relativePath) => {
      return session.call('pv.proxy.manager.create.reader', [relativePath]);
    },
    get: (proxyId, ui = true) => {
      return session.call('pv.proxy.manager.get', [proxyId, ui]);
    },
    findProxyId: (groupName, proxyName) => {
      return session.call('pv.proxy.manager.find.id', [groupName, proxyName]);
    },
    update: (propsList) => {
      return session.call('pv.proxy.manager.update', [propsList]);
    },
    delete: (proxyId) => {
      return session.call('pv.proxy.manager.delete', [proxyId]);
    },
    list: (viewId = -1) => {
      return session.call('pv.proxy.manager.list', [viewId]);
    },
    available: (type = 'sources') => {
      return session.call('pv.proxy.manager.available', [type]);
    },
    availableSources: () => {
      return session.call('pv.proxy.manager.available', ['sources']);
    },
    availableFilters: () => {
      return session.call('pv.proxy.manager.available', ['filters']);
    },
  };
}

SaveData.js

/* eslint-disable arrow-body-style */
export default function createMethods(session) {
  return {
    saveData: (filePath, options = {}) => {
      return session.call('pv.data.save', [filePath, options]);
    },
  };
}

TimeHandler.js

/* eslint-disable arrow-body-style */
export default function createMethods(session) {
  return {
    updateTime: (action) => {
      return session.call('pv.vcr.action', [action]);
    },
    next: () => {
      return session.call('pv.vcr.action', ['next']);
    },
    previous: () => {
      return session.call('pv.vcr.action', ['prev']);
    },
    first: () => {
      return session.call('pv.vcr.action', ['first']);
    },
    last: () => {
      return session.call('pv.vcr.action', ['last']);
    },

    setTimeStep: (idx) => {
      return session.call('pv.time.index.set', [idx]);
    },

    getTimeStep: () => {
      return session.call('pv.time.index.get', []);
    },

    setTimeValue: (t) => {
      return session.call('pv.time.value.set', [t]);
    },

    getTimeValue: () => {
      return session.call('pv.time.value.get', []);
    },

    getTimeValues: () => {
      return session.call('pv.time.values', []);
    },

    play: (deltaT = 0.1) => {
      return session.call('pv.time.play', [deltaT]);
    },

    stop: () => {
      return session.call('pv.time.stop', []);
    },
  };
}

ViewPort.js

/* eslint-disable arrow-body-style */
/* eslint-disable camelcase */
export default function createMethods(session) {
  return {
    resetCamera: (view = -1) => {
      return session.call('viewport.camera.reset', [view]);
    },
    updateOrientationAxesVisibility: (view = -1, showAxis = true) => {
      return session.call('viewport.axes.orientation.visibility.update', [
        view,
        showAxis,
      ]);
    },
    updateCenterAxesVisibility: (view = -1, showAxis = true) => {
      return session.call('viewport.axes.center.visibility.update', [
        view,
        showAxis,
      ]);
    },
    updateCamera: (
      view_id = -1,
      focal_point = [0, 0, 0],
      view_up = [0, 1, 0],
      position = [0, 0, 1]
    ) => {
      return session.call('viewport.camera.update', [
        view_id,
        focal_point,
        view_up,
        position,
      ]);
    },
    getCamera: (view_id = -1) => {
      return session.call('viewport.camera.get', [view_id]);
    },
    updateSize: (view_id = -1, width = 500, height = 500) => {
      return session.call('viewport.size.update', [view_id, width, height]);
    },
  };
}

ViewPortGeometryDelivery.js

/* eslint-disable arrow-body-style */
/* eslint-disable camelcase */
export default function createMethods(session) {
  return {
    getSceneMetaData: (view = -1) => {
      return session.call('viewport.webgl.metadata', [view]);
    },
    getWebGLData: (view_id = -1, object_id, part = 0) => {
      return session.call('viewport.webgl.data', [view_id, object_id, part]);
    },
    getCachedWebGLData: (sha) => {
      return session.call('viewport.webgl.cached.data', [sha]);
    },
    getSceneMetaDataAllTimesteps: (view = -1) => {
      return session.call('viewport.webgl.metadata.alltimesteps', [view]);
    },
  };
}

ViewPortImageDelivery.js

/* eslint-disable arrow-body-style */
export default function createMethods(session) {
  return {
    stillRender: (options = { size: [400, 400], view: -1 }) => {
      return session.call('viewport.image.render', [options]);
    },
  };
}

VtkGeometryDelivery.js

let binaryDelivery = true;

export default function createMethods(session) {
  return {
    getArray: (hash, binary = binaryDelivery) =>
      session.call('viewport.geometry.array.get', [hash, binary]),
    onViewChange: (callback) =>
      session.subscribe('viewport.geometry.view.subscription', callback),
    offViewChange: (subscription) => session.unsubscribe(subscription),
    addViewObserver: (viewId) =>
      session.call('viewport.geometry.view.observer.add', [viewId]),
    removeViewObserver: (viewId) =>
      session.call('viewport.geometry.view.observer.remove', [viewId]),
  };
}

export function useBase64Delivery() {
  binaryDelivery = false;
}

export function useBinaryDelivery() {
  binaryDelivery = true;
}

VtkImageDelivery.js

/* eslint-disable arrow-body-style */
export default function createMethods(session) {
  return {
    stillRender: (options = { size: [400, 400], view: -1 }) =>
      session.call('viewport.image.push', [options]),
    onRenderChange: (callback) =>
      session.subscribe('viewport.image.push.subscription', callback),
    offRenderChange: (subscription) => session.unsubscribe(subscription),
    addRenderObserver: (viewId) =>
      session.call('viewport.image.push.observer.add', [viewId]),
    removeRenderObserver: (viewId) =>
      session.call('viewport.image.push.observer.remove', [viewId]),
    enableView: (viewId, enabled) =>
      session.call('viewport.image.push.enabled', [viewId, enabled]),
    viewQuality: (viewId, quality, ratio = 1) =>
      session.call('viewport.image.push.quality', [viewId, quality, ratio]),
    viewSize: (viewId, width = 400, height = 400) =>
      session.call('viewport.image.push.original.size', [
        viewId,
        width,
        height,
      ]),
    invalidateCache: (viewId) =>
      session.call('viewport.image.push.invalidate.cache', [viewId]),
    setMaxFrameRate: (fps = 30) =>
      session.call('viewport.image.animation.fps.max', [fps]),
    getCurrentFrameRate: () =>
      session.call('viewport.image.animation.fps.get', []),
    startViewAnimation: (viewId = -1) =>
      session.call('viewport.image.animation.start', [viewId]),
    stopViewAnimation: (viewId = -1) =>
      session.call('viewport.image.animation.stop', [viewId]),
  };
}

index.js

import ColorManager from './ColorManager';
import FileListing from './FileListing';
import KeyValuePairStore from './KeyValuePairStore';
import MouseHandler from './MouseHandler';
import ProgressUpdate from './ProgressUpdate';
import ProxyManager from './ProxyManager';
import SaveData from './SaveData';
import TimeHandler from './TimeHandler';
import ViewPort from './ViewPort';
import ViewPortGeometryDelivery from './ViewPortGeometryDelivery';
import ViewPortImageDelivery from './ViewPortImageDelivery';
import VtkGeometryDelivery from './VtkGeometryDelivery';
import VtkImageDelivery from './VtkImageDelivery';

const protocolsMap = {
  ColorManager,
  FileListing,
  KeyValuePairStore,
  MouseHandler,
  ProgressUpdate,
  ProxyManager,
  SaveData,
  TimeHandler,
  ViewPort,
  ViewPortGeometryDelivery,
  ViewPortImageDelivery,
  VtkGeometryDelivery,
  VtkImageDelivery,
};

export function createClient(connection, protocols = [], customProtocols = {}) {
  const session = connection.getSession();
  const result = {
    connection,
    session,
  };
  let count = protocols.length;

  while (count) {
    count -= 1;
    const name = protocols[count];
    result[name] = protocolsMap[name](session);
  }

  Object.keys(customProtocols).forEach((key) => {
    result[key] = customProtocols[key](session);
  });

  return result;
}

export default {
  createClient,
};