JSFiddle - React, Tailwind, and code Playground

HTML

<!--Provide URL to visualize.js-->
<script src="https://infra-platforms-phase2-18418-anshinde.pfa.jaspersoft.com/jasperserver-pro/client/visualize.js"></script>

<div id="overlay">
  Loading
</div>

<div class="navigator">
  <p>
    X Axis
  </p>
  <div>
    <button id="left">&lt;&lt;</button>
    <button class="print">Current Data</button>
    <button id="right">&gt;&gt;</button>
  </div>

  <div>
    <input type="text" id="pageSizeX" value="50" />
    <button id="sizeX">Set Page Size</button>
  </div>
</div>

<div class="navigator">
  <p>
    Y Axis
  </p>
  <div>
    <button id="top">&lt;&lt;</button>
    <button class="print">Current Data</button>
    <button id="bottom">&gt;&gt;</button>
  </div>

  <div>
    <input type="text" id="pageSizeY" value="50" />
    <button id="sizeY">Set Page Size</button>
  </div>
</div>
<!--Provide container to render your visualization-->
<div id="container">


</div>

CSS

.navigator {
  width: 300px;
  text-align: center;
  float: left;
}

#container {
  padding: 25px;
  clear:left;
}

#overlay {
  background-color: gray;
  color: white;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

JavaScript

visualize({
  auth: {
    name: "joeuser",
    password: "joeuser",
    organization: "organization_1"
  }
}, function(v) {
  var adv = v.adhocView({
    //	container: "#container",
    resource: "/public/viz/Adhoc/Table1",
    error: function() {
      console.log(arguments);
    },
    success: function() {
    	outputValues()
      setInProgress(false);
    }
  });

  var inProgress = true,
    offset = [0, 0],
    pageSize = [400, 400];


  $("#right").click(function() {
    offset[0] += 2;

    doUpdate();
  });

  $("#left").click(function() {
    offset[0] -= 2;

    if (offset[0] < 0) {
      offset[0] = 0;
    }

    doUpdate();
  });

  $("#bottom").click(function() {
    offset[1] += 2;

    doUpdate();
  });

  $("#top").click(function() {
    offset[1] -= 2;

    if (offset[1] < 0) {
      offset[1] = 0;
    }

    doUpdate();

  });

  $("#sizeX").click(function() {
    pageSize[0] = +$("#pageSizeX").val();
    outputValues();
  })

  $("#sizeY").click(function() {
    pageSize[1] = +$("#pageSizeY").val();
    outputValues();
  })

  $(".print").click(function() {
    console.log(adv.data());
  });

  function setInProgress(inP) {
    inProgress = inP;

    if (inProgress) {
      $("#overlay").show();
    } else {
      $("#overlay").hide();
    }
  }

  function outputValues() {
    $("#container").text("Current values: offset: [" + offset.join() + "] & pageSize: [" + pageSize.join() + "]")
  }

  function doUpdate() {
    if (!inProgress) {
      setInProgress(true);
      adv._updateComponent_internal_("_dataset_internal_", {
        params: {
          offset,
          pageSize
        }
      }).always(function(data) {
      	outputValues();
        setInProgress(false);
        console.log(data);
      })
    }
  }
});