How to use the paraview-lite/src/proxyHelper.generateComponentWithServerBinding function in paraview-lite

defaultValue: 80,
    variable: 'interactiveQuality',
  },
};

// function purgeLocalStorage() {
//   Object.values(KEYS).forEach(({ name }) => {
//     localStorage.removeItem(`paraview.lite.config.${name}`);
//   });
// }

// ----------------------------------------------------------------------------
// Component API
// ----------------------------------------------------------------------------

export default generateComponentWithServerBinding(
  null, // We don't aim to create proxy
  'View',
  {
    bg: { name: 'Background', noAutoApply: true },
    bg2: { name: 'Background2', noAutoApply: true },
    gradient: { name: 'UseGradientBackground', noAutoApply: true },
  },
  {
    name: 'GlobalSettings',
    components: {
      PalettePicker,
    },
    data() {
      return {
        palette: [
          '#000000',

import PalettePicker from 'paraview-lite/src/components/widgets/PalettePicker';
import vtkMath from 'vtk.js/Sources/Common/Core/Math';

import { Actions, Mutations } from 'paraview-lite/src/stores/types';

import {
  generateComponentWithServerBinding,
  bool2int,
  toBoolean,
} from 'paraview-lite/src/proxyHelper';

// ----------------------------------------------------------------------------
// Component API
// ----------------------------------------------------------------------------

export default generateComponentWithServerBinding(
  null, // We don't aim to create proxy
  'View',
  {
    bg: { name: 'Background', noAutoApply: true },
    bg2: { name: 'Background2', noAutoApply: true },
    gradient: { name: 'UseGradientBackground', noAutoApply: true },
    axis: {
      name: 'OrientationAxesVisibility',
      clientToServer: bool2int,
      serverToClient: toBoolean,
      autoApply: true,
    },
  },
  {
    name: 'GlobalSettings',
    components: {

import {
  generateComponentWithServerBinding,
  bool2int,
  toBoolean,
} from 'paraview-lite/src/proxyHelper';

import module from './module';

const SEPARATOR = ':|:';
const DEFAULT_RANGE = { min: 0, max: 1 };

export default generateComponentWithServerBinding(
  'Threshold',
  'Source',
  {
    thresholdBy: {
      name: 'SelectInputScalars',
      label: 'Scalars',
      clientToServer: ({ value }) => value.split(SEPARATOR),
      serverToClient: (v) => ({ text: v[1], value: v.join(SEPARATOR) }),
      autoApply: false,
      default: ['POINTS', ''],
    },
    thresholdRange: {
      name: 'ThresholdBetween',
      label: 'ThresholdRange',
      autoApply: false,
      default: [0, 1],

{ text: 'Forward', value: 0 },
    { text: 'Backward', value: 1 },
    { text: 'Both', value: 2 },
  ],
  integratorType: [
    { text: 'Runge-Kutta 2', value: 0 },
    { text: 'Runge-Kutta 4', value: 1 },
    { text: 'Runge-Kutta 4-5', value: 2 },
  ],
  integrationStepUnit: [
    { text: 'Length', value: 1 },
    { text: 'Cell Length', value: 2 },
  ],
};

export default generateComponentWithServerBinding(
  'StreamTracer',
  'Source',
  {
    inputVector: {
      name: 'SelectInputVectors',
      label: 'Vectors',
      clientToServer: ({ value }) => value.split(SEPARATOR),
      serverToClient: (v) => ({ text: v[1], value: v.join(SEPARATOR) }),
      autoApply: false,
      default: ['POINTS', ''],
    },
    interpolatorType: {
      name: 'InterpolatorType',
      clientToServer: ({ value }) => Number(value),
      serverToClient: (v) => ITEMS.interpolatorType[v],
      autoApply: false,

import {
  generateComponentWithServerBinding,
  bool2int,
  toBoolean,
} from 'paraview-lite/src/proxyHelper';

import module from './module';

export default generateComponentWithServerBinding(
  'Clip',
  'Source',
  {
    crinkleclip: {
      name: 'PreserveInputCells',
      label: 'Crinkleclip',
      clientToServer: bool2int,
      serverToClient: toBoolean,
      autoApply: false,
      default: 0,
    },
    invert: {
      name: 'Invert',
      clientToServer: bool2int,
      serverToClient: toBoolean,
      autoApply: false,

import { generateComponentWithServerBinding } from 'paraview-lite/src/proxyHelper';

import module from './module';

export default generateComponentWithServerBinding(
  'Cone',
  'Source',
  {
    radius: {
      name: 'Radius',
      autoApply: true,
      default: 0.5,
      clientToServer: Number,
    },
    resolution: {
      name: 'Resolution',
      autoApply: true,
      default: 6,
      clientToServer: Number,
    },
    height: {

import vtkMath from 'vtk.js/Sources/Common/Core/Math';

import { generateComponentWithServerBinding } from 'paraview-lite/src/proxyHelper';
import { Getters, Actions } from 'paraview-lite/src/stores/types';

import CollapsableItem from 'paraview-lite/src/components/widgets/CollapsableItem';
import LookupTableToolbar from 'paraview-lite/src/components/widgets/LookupTableToolbar';
import PalettePicker from 'paraview-lite/src/components/widgets/PalettePicker';

const SEPARATOR = ':|:';
const SOLID_COLOR_ITEM = {
  text: 'Solid Color',
  value: `SOLID${SEPARATOR}${SEPARATOR}`,
};

export default generateComponentWithServerBinding(
  null,
  'Representation',
  {
    representation: {
      name: 'Representation',
      autoApply: true,
      default: 'Surface',
    },
    opacity: {
      name: 'Opacity',
      autoApply: true,
      default: 1,
    },
    pointSize: {
      name: 'PointSize',
      clientToServer: Number,

import {
  generateComponentWithServerBinding,
  bool2int,
  toBoolean,
} from 'paraview-lite/src/proxyHelper';

import module from './module';

export default generateComponentWithServerBinding(
  'Contour',
  'Source',
  {
    computeNormals: {
      name: 'ComputeNormals',
      clientToServer: bool2int,
      serverToClient: toBoolean,
      autoApply: false,
      default: 1,
    },
    computeGradients: {
      name: 'ComputeGradients',
      clientToServer: bool2int,
      serverToClient: toBoolean,
      autoApply: false,
      default: 0,

import { generateComponentWithServerBinding } from 'paraview-lite/src/proxyHelper';

import module from './module';

export default generateComponentWithServerBinding(
  'Sphere',
  'Source',
  {
    startPhi: {
      name: 'StartPhi',
      autoApply: false,
      default: 0,
    },
    endPhi: {
      name: 'EndPhi',
      autoApply: false,
      default: 180,
    },
    phiResolution: {
      name: 'PhiResolution',
      autoApply: false,

import {
  generateComponentWithServerBinding,
  bool2int,
  toBoolean,
} from 'paraview-lite/src/proxyHelper';

import module from './module';

export default generateComponentWithServerBinding(
  'Slice',
  'Source',
  {
    crinkleslice: {
      name: 'PreserveInputCells',
      label: 'Crinkleslice',
      clientToServer: bool2int,
      serverToClient: toBoolean,
      autoApply: false,
      default: 0,
    },
    origin: {
      name: 'Origin',
      autoApply: false,
      default: [0, 0, 0],
      subProxy: 'SliceType',