How to use the paraviewweb/src/Common/Misc/AnnotationBuilder.annotation function in paraviewweb

let partitionAnnotation = null;
    if (def.annotation && !model.provider.shouldCreateNewAnnotation()) {
      // don't send a new selection unless it's changed.
      const saveGen = partitionSelection.generation;
      partitionSelection.generation = def.annotation.selection.generation;
      const changeSet = { score: def.regions };
      if (!deepEquals(partitionSelection, def.annotation.selection)) {
        partitionSelection.generation = saveGen;
        changeSet.selection = partitionSelection;
      }
      partitionAnnotation = AnnotationBuilder.update(def.annotation, {
        selection: partitionSelection,
        score: def.regions,
      });
    } else {
      partitionAnnotation = AnnotationBuilder.annotation(
        partitionSelection,
        def.regions,
        1,
        ''
      );
    }
    AnnotationBuilder.updateReadOnlyFlag(
      partitionAnnotation,
      model.readOnlyFields
    );
    return partitionAnnotation;
  }

.indexOf(lastAnnotationPushed.selection.partition.variable);
            if (axisIdxToClear !== -1) {
              model.axes.getAxis(axisIdxToClear).clearSelection();
              model.axes.selection = null;
            }
          }

          const selection = model.axes.getSelection();
          if (selection.type === 'empty') {
            lastAnnotationPushed = AnnotationBuilder.EMPTY_ANNOTATION;
          } else if (
            !lastAnnotationPushed ||
            model.provider.shouldCreateNewAnnotation() ||
            lastAnnotationPushed.selection.type !== 'range'
          ) {
            lastAnnotationPushed = AnnotationBuilder.annotation(
              selection,
              [model.defaultScore],
              model.defaultWeight
            );
            if (lastAnnotationPushed.name === '') {
              // set default range annotation name
              AnnotationBuilder.setDefaultName(lastAnnotationPushed);
              if (model.provider.isA('AnnotationStoreProvider')) {
                lastAnnotationPushed.name = model.provider.getNextStoredAnnotationName(
                  lastAnnotationPushed.name
                );
              }
            }
          } else {
            lastAnnotationPushed = AnnotationBuilder.update(
              lastAnnotationPushed,

});

const partitionSelection = SelectionBuilder.partition('pressure', [
  { value: 90, uncertainty: 0 },
  { value: 101.3, uncertainty: 10 },
  { value: 200, uncertainty: 40, closeToLeft: true },
]);

const ranges = {
  pressure: [0, 600],
  temperature: [-270, 1000],
};

const annotations = [
  AnnotationBuilder.annotation(rangeSelection, [0]),
  AnnotationBuilder.annotation(partitionSelection, [1, 0, 1, 2]),
  AnnotationBuilder.annotation(
    SelectionBuilder.convertToRuleSelection(rangeSelection),
    [1]
  ),
];
const legendService = LegendProvider.newInstance({
  legendEntries: ['pressure', 'temperature'],
});

// Get react component
document.body.style.padding = '10px';

function render() {
  ReactDOM.render(
    <div>
      {annotations.map((annotation, idx) =&gt; (</div>

if (rangeList.length > 0) {
          proceed = true;
          vars[pName] = rangeList;
        }
      });

      if (proceed) {
        const selection = SelectionBuilder.range(vars);
        if (model.useAnnotation) {
          lastAnnotationPushed = model.provider.getAnnotation();
          if (
            !lastAnnotationPushed ||
            model.provider.shouldCreateNewAnnotation() ||
            lastAnnotationPushed.selection.type !== 'range'
          ) {
            lastAnnotationPushed = AnnotationBuilder.annotation(
              selection,
              [model.defaultScore],
              model.defaultWeight
            );
            if (lastAnnotationPushed.name === '') {
              // set default range annotation name
              AnnotationBuilder.setDefaultName(lastAnnotationPushed);
              if (model.provider.isA('AnnotationStoreProvider')) {
                lastAnnotationPushed.name = model.provider.getNextStoredAnnotationName(
                  lastAnnotationPushed.name
                );
              }
            }
          } else {
            lastAnnotationPushed = AnnotationBuilder.update(
              lastAnnotationPushed,

],
});

const partitionSelection = SelectionBuilder.partition('pressure', [
  { value: 90, uncertainty: 0 },
  { value: 101.3, uncertainty: 10 },
  { value: 200, uncertainty: 40, closeToLeft: true },
]);

const ranges = {
  pressure: [0, 600],
  temperature: [-270, 1000],
};

const annotations = [
  AnnotationBuilder.annotation(rangeSelection, [0]),
  AnnotationBuilder.annotation(partitionSelection, [1, 0, 1, 2]),
  AnnotationBuilder.annotation(
    SelectionBuilder.convertToRuleSelection(rangeSelection),
    [1]
  ),
];
const legendService = LegendProvider.newInstance({
  legendEntries: ['pressure', 'temperature'],
});

// Get react component
document.body.style.padding = '10px';

function render() {
  ReactDOM.render(
    <div></div>