cc-backend/web/frontend/src/Zoom.svelte

<script>
  import { Icon, InputGroup, InputGroupText } from "@sveltestrap/sveltestrap";

  export let timeseriesPlots;

  let windowSize = 100; // Goes from 0 to 100
  let windowPosition = 50; // Goes from 0 to 100

  function updatePlots() {
    let ws = windowSize / (100 * 2),
      wp = windowPosition / 100;
    let from = wp - ws,
      to = wp + ws;
    Object.values(timeseriesPlots).forEach((plot) =>
      plot.setTimeRange(from, to),
    );
  }

  // Rendering a big job can take a long time, so we
  // throttle the rerenders to every 100ms here.
  let timeoutId = null;
  function requestUpdatePlots() {
    if (timeoutId != null) window.cancelAnimationFrame(timeoutId);

    timeoutId = window.requestAnimationFrame(() => {
      updatePlots();
      timeoutId = null;
    }, 100);
  }

  $: requestUpdatePlots(windowSize, windowPosition);
</script>

<div>
  <InputGroup>
    <InputGroupText>
      <Icon name="zoom-in" />
    </InputGroupText>
    <InputGroupText>
      Window Size:
      <input
        style="margin: 0em 0em 0em 1em"
        type="range"
        bind:value={windowSize}
        min="1"
        max="100"
        step="1"
      />
      <span style="width: 5em;">
        ({windowSize}%)
      </span>
    </InputGroupText>
    <InputGroupText>
      Window Position:
      <input
        style="margin: 0em 0em 0em 1em"
        type="range"
        bind:value={windowPosition}
        min="0"
        max="100"
        step="1"
      />
    </InputGroupText>
  </InputGroup>
</div>