How to use the paraviewweb/src/Common/State/PipelineState function in paraviewweb

export default function build({ viewer, dataType }) {
  // Can we handle the data
  if (!contains(dataType, 'sorted-composite')) {
    return false;
  }

  if (contains(dataType, 'multi-color-by')) {
    viewer.pipelineModel = new PipelineModel(
      viewer.queryDataModel.originalData,
      true
    );
    viewer.imageBuilder = new MultiColorBySortedImageBuilder(
      viewer.queryDataModel,
      viewer.config.lookupTableManager,
      viewer.pipelineModel
    );
    viewer.imageBuilder.update();
  } else {
    viewer.imageBuilder = new SortedCompositeImageBuilder(
      viewer.queryDataModel,
      viewer.config.lookupTableManager
    );
    viewer.imageBuilder.update();
  }

export default function build({ viewer, dataType }) {
  // Can we handle the data
  if (!contains(dataType, 'composite-pipeline')) {
    return false;
  }

  viewer.pipelineModel = new PipelineModel(viewer.queryDataModel.originalData);
  viewer.imageBuilder = new CompositeImageBuilder(
    viewer.queryDataModel,
    viewer.pipelineModel
  );
  viewer.imageBuilder.update();

  return true;
}

export default function build({ viewer, dataType }) {
  // Can we handle the data
  if (
    !contains(dataType, 'webgl-composite') &&
    !contains(dataType, 'depth-composite')
  ) {
    return false;
  }

  viewer.pipelineModel = new PipelineModel(viewer.queryDataModel.originalData);
  viewer.imageBuilder = new DepthCompositeImageBuilder(
    viewer.queryDataModel,
    viewer.pipelineModel,
    viewer.config.lookupTableManager
  );
  viewer.imageBuilder.update();

  return true;
}

export default function build({ viewer, dataType }) {
  // Can we handle the data
  if (!contains(dataType, 'composite-pipeline-image')) {
    return false;
  }

  viewer.pipelineModel = new PipelineModel(viewer.queryDataModel.originalData);
  viewer.imageBuilder = new QueryDataModelImageBuilder(viewer.queryDataModel);

  viewer.pipelineModel.onChange((pipeline) => {
    viewer.queryDataModel.setValue('pipeline', pipeline);
    viewer.imageBuilder.update();
  });
  viewer.queryDataModel.setValue(
    'pipeline',
    viewer.pipelineModel.getPipelineQuery()
  );

  viewer.menuAddOn = [
    
      
    ,
  ];

import 'normalize.css';

import React from 'react';
import ReactDOM from 'react-dom';

import CompositePipelineWidget from 'paraviewweb/src/React/Widgets/CompositePipelineWidget';
import PipelineState from 'paraviewweb/src/Common/State/PipelineState';

import jsonData from 'paraviewweb/src/React/Widgets/CompositePipelineWidget/example/info';

document.body.style.padding = '10px';

const model = new PipelineState(jsonData);

const component = ReactDOM.render( // eslint-disable-line
  React.createElement(CompositePipelineWidget, {
    pipeline: jsonData.CompositePipeline,
    model,
  }),
  document.querySelector('.content')
);

model.onChange((data, envelope) => {
  component.forceUpdate();
});

export default function build({ basepath, viewer, dataType }) {
  // Can we handle the data
  if (!contains(dataType, 'geometry')) {
    return false;
  }

  const pipelineModel = new CompositePipelineModel(
    viewer.queryDataModel.originalData
  );
  const geometryDataModel = new GeometryDataModel(basepath);
  const lutMgr = viewer.config.lookupTableManager;

  viewer.ui = 'GeometryViewer';
  viewer.allowMagicLens = false;
  viewer.geometryBuilder = new GeometryBuilder(
    lutMgr,
    geometryDataModel,
    pipelineModel,
    viewer.queryDataModel
  );
  viewer.menuAddOn = [

export default function build({ basepath, viewer, dataType }) {
  // Can we handle the data
  if (!contains(dataType, 'vtk-geometry')) {
    return false;
  }

  const pipelineModel = new CompositePipelineModel(
    viewer.queryDataModel.originalData
  );
  const geometryDataModel = new GeometryDataModel(basepath);
  const lutMgr = viewer.config.lookupTableManager;

  geometryDataModel.setDataManager(viewer.queryDataModel.getDataManager());

  viewer.ui = 'GeometryViewer';
  viewer.allowMagicLens = false;
  viewer.geometryBuilder = new GeometryBuilder(
    lutMgr,
    geometryDataModel,
    pipelineModel,
    viewer.queryDataModel
  );
  viewer.menuAddOn = [