function GraphControls()

in src/components/graph-controls.js [44:89]


function GraphControls({
  maxZoom = DEFAULT_MAX_ZOOM,
  minZoom = DEFAULT_MIN_ZOOM,
  zoomLevel,
  zoomToFit,
  modifyZoom,
}: IGraphControlProps) {
  // Modify current zoom of graph-view
  const zoom = useCallback(
    (e: any) => {
      const sliderVal = e.target.value;
      const zoomLevelNext = sliderToZoom(sliderVal, minZoom, maxZoom);
      const delta = zoomLevelNext - zoomLevel;

      if (zoomLevelNext <= (maxZoom || 0) && zoomLevelNext >= (minZoom || 0)) {
        modifyZoom(delta);
      }
    },
    [minZoom, maxZoom, zoomLevel, modifyZoom]
  );

  const min = useZoomLevelToSliderValue(minZoom, minZoom, maxZoom);
  const max = useZoomLevelToSliderValue(maxZoom, minZoom, maxZoom);
  const value = useZoomLevelToSliderValue(zoomLevel, minZoom, maxZoom);

  return (
    <div className="graph-controls">
      <div className="slider-wrapper">
        <span>-</span>
        <input
          type="range"
          className="slider"
          min={min}
          max={max}
          value={value}
          onChange={zoom}
          step="1"
        />
        <span>+</span>
      </div>
      <button type="button" className="slider-button" onMouseDown={zoomToFit}>
        <ExpandIcon />
      </button>
    </div>
  );
}