How to use the paraviewweb/src/IO/Core/QueryDataModel function in paraviewweb

ui: 'GenericViewer',
    config,
    allowMagicLens: true,
  };

  // Initializer shared variables
  config.lookupTableManager = lookupTableManager;

  // Update background if available
  if (data && data.metadata && data.metadata.backgroundColor) {
    viewer.bgColor = data.metadata.backgroundColor;
  }

  // Update QueryDataModel if needed
  if (dataType.indexOf('tonic-query-data-model') !== -1) {
    viewer.queryDataModel = config.queryDataModel || new QueryDataModel(data, basepath);
  }

  // Find the right viewer and build it
  const args = { basepath, data, callback, viewer, dataType };
  while (viewerCount && !foundViewer) {
    viewerCount -= 1;
    foundViewer = dataViewers[viewerCount](args);
  }

  setImmediate(() => callback(viewer));
  return foundViewer;
}

import 'normalize.css';

import React from 'react';
import ReactDOM from 'react-dom';
import equals from 'mout/src/array/equals';

import jsonData from 'tonic-arctic-sample-data/data/probe/index.json';

import MultiLayoutRenderer from 'paraviewweb/src/React/Renderers/MultiLayoutRenderer';
import LookupTableManager from 'paraviewweb/src/Common/Core/LookupTableManager';
import QueryDataModel from 'paraviewweb/src/IO/Core/QueryDataModel';
import ImageBuilder from 'paraviewweb/src/Rendering/Image/DataProberImageBuilder';

const container = document.querySelector('.content');
const dataModel = new QueryDataModel(jsonData, `${__BASE_PATH__}/data/probe/`);
const lutManager = new LookupTableManager();
const imageBuilderA = new ImageBuilder(dataModel, lutManager);
const imageBuilderB = new ImageBuilder(dataModel, lutManager);
const imageBuilderC = new ImageBuilder(dataModel, lutManager);

// Configure Image builders
const field = imageBuilderA.getFields()[0];
imageBuilderA.setField(field);
imageBuilderB.setField(field);
imageBuilderC.setField(field);

imageBuilderA.setProbe(10, 10, 10);
imageBuilderB.setProbe(10, 10, 10);
imageBuilderC.setProbe(10, 10, 10);

imageBuilderA.renderMethod = 'XY';

import 'normalize.css';

import React from 'react';
import ReactDOM from 'react-dom';
import equals from 'mout/src/array/equals';

import jsonData from 'tonic-arctic-sample-data/data/probe/index.json';

import ImageBuilder from 'paraviewweb/src/Rendering/Image/DataProberImageBuilder';
import LineChartPainter from 'paraviewweb/src/Rendering/Painter/LineChartPainter';
import LookupTableManager from 'paraviewweb/src/Common/Core/LookupTableManager';
import MultiLayoutViewer from 'paraviewweb/src/React/Viewers/MultiLayoutViewer';
import QueryDataModel from 'paraviewweb/src/IO/Core/QueryDataModel';

const bodyElement = document.querySelector('.content');
const dataModel = new QueryDataModel(jsonData, `${__BASE_PATH__}/data/probe/`);
const lutManager = new LookupTableManager();
const imageBuilderA = new ImageBuilder(dataModel, lutManager);
const imageBuilderB = new ImageBuilder(dataModel, lutManager);
const imageBuilderC = new ImageBuilder(dataModel, lutManager);
const xChartPainter = new LineChartPainter('X: {x}');
const yChartPainter = new LineChartPainter('Y: {x}');
const zChartPainter = new LineChartPainter('Z: {x}');
const dimensions = dataModel.originalData.InSituDataProber.dimensions;

// Configure Image builders
imageBuilderA.setRenderMethod(imageBuilderA.getRenderMethods()[0]);
imageBuilderB.setRenderMethod(imageBuilderA.getRenderMethods()[1]);
imageBuilderC.setRenderMethod(imageBuilderA.getRenderMethods()[2]);

imageBuilderA.setRenderMethodImutable();
imageBuilderB.setRenderMethodImutable();

import 'normalize.css';

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

import jsonData from 'tonic-arctic-sample-data/data/probe/index.json';

import ImageBuilder from 'paraviewweb/src/Rendering/Image/DataProberImageBuilder';
import PixelOperatorImageBuilder from 'paraviewweb/src/Rendering/Image/PixelOperatorImageBuilder';
import LookupTableManager from 'paraviewweb/src/Common/Core/LookupTableManager';
import MultiLayoutViewer from 'paraviewweb/src/React/Viewers/MultiLayoutViewer';
import QueryDataModel from 'paraviewweb/src/IO/Core/QueryDataModel';

const bodyElement = document.querySelector('.content');
const dataModelA = new QueryDataModel(jsonData, `${__BASE_PATH__}/data/probe/`);
const dataModelB = new QueryDataModel(jsonData, `${__BASE_PATH__}/data/probe/`);
const dataModelC = new QueryDataModel(jsonData, `${__BASE_PATH__}/data/probe/`);
const lutManager = new LookupTableManager();
const imageBuilderA = new ImageBuilder(dataModelA, lutManager);
const imageBuilderB = new ImageBuilder(dataModelB, lutManager);
const imageBuilderC = new ImageBuilder(dataModelC, lutManager);
const diffImageBuilder = new PixelOperatorImageBuilder();

// Handling Diff computation
imageBuilderA.onImageReady((data, envelope) => {
  diffImageBuilder.updateData('a', data);
});
imageBuilderB.onImageReady((data, envelope) => {
  diffImageBuilder.updateData('b', data);
});
imageBuilderC.onImageReady((data, envelope) => {
  diffImageBuilder.updateData('c', data);

config,
    allowMagicLens: true,
  };

  // Initializer shared variables
  config.lookupTableManager = lookupTableManager;

  // Update background if available
  if (data && data.metadata && data.metadata.backgroundColor) {
    viewer.bgColor = data.metadata.backgroundColor;
  }

  // Update QueryDataModel if needed
  if (contains(dataType, 'tonic-query-data-model')) {
    viewer.queryDataModel =
      config.queryDataModel || new QueryDataModel(data, basepath);
  }

  // Find the right viewer and build it
  const args = { basepath, data, callback, viewer, dataType };
  while (viewerCount && !foundViewer) {
    viewerCount -= 1;
    foundViewer = dataViewers[viewerCount](args);
  }

  setImmediate(() => callback(viewer));
  return foundViewer;
}

import 'normalize.css';

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

import jsonData from 'paraviewweb/src/React/Widgets/QueryDataModelWidget/example/info';
import QueryDataModel from 'paraviewweb/src/IO/Core/QueryDataModel';
import QueryDataModelControl from 'paraviewweb/src/React/CollapsibleControls/QueryDataModelControl';

// Get react component
const dataModel = new QueryDataModel(jsonData, '/');

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

ReactDOM.render(
  React.createElement(QueryDataModelControl, {
    model: dataModel,
    handleExploration: true,
  }),
  document.querySelector('.content')
);

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

import jsonData from 'tonic-arctic-sample-data/data/probe/index.json';

import ImageBuilder from 'paraviewweb/src/Rendering/Image/DataProberImageBuilder';
import PixelOperatorImageBuilder from 'paraviewweb/src/Rendering/Image/PixelOperatorImageBuilder';
import LookupTableManager from 'paraviewweb/src/Common/Core/LookupTableManager';
import MultiLayoutViewer from 'paraviewweb/src/React/Viewers/MultiLayoutViewer';
import QueryDataModel from 'paraviewweb/src/IO/Core/QueryDataModel';

const bodyElement = document.querySelector('.content');
const dataModelA = new QueryDataModel(jsonData, `${__BASE_PATH__}/data/probe/`);
const dataModelB = new QueryDataModel(jsonData, `${__BASE_PATH__}/data/probe/`);
const dataModelC = new QueryDataModel(jsonData, `${__BASE_PATH__}/data/probe/`);
const lutManager = new LookupTableManager();
const imageBuilderA = new ImageBuilder(dataModelA, lutManager);
const imageBuilderB = new ImageBuilder(dataModelB, lutManager);
const imageBuilderC = new ImageBuilder(dataModelC, lutManager);
const diffImageBuilder = new PixelOperatorImageBuilder();

// Handling Diff computation
imageBuilderA.onImageReady((data, envelope) => {
  diffImageBuilder.updateData('a', data);
});
imageBuilderB.onImageReady((data, envelope) => {
  diffImageBuilder.updateData('b', data);
});
imageBuilderC.onImageReady((data, envelope) => {
  diffImageBuilder.updateData('c', data);
});

export function load(container) {
  const rootQueryDataModel = new QueryDataModel({
    type: [],
    arguments: {},
    data: [
      {
        name: '_',
        pattern: 'data/index.json',
        type: 'json',
      },
    ],
    arguments_order: [],
    metadata: {},
  }, '');

  rootQueryDataModel.onDataChange((json) => {
    viewerBuilder('data/', json._.data, {}, (viewer) => {
      if (!viewer) {