feat: show navigation and zoom utilities in resources explorer #1070

[faisal7008]

Problem

The current implementation of the DependencyGraph component in the Komiser dashboard lacks a feature to show the current zoom level and temporarily disable node dragging.

fixes #1070

Solution

I have implemented a zoom input that allows users to either zoom in, zoom out, or manually enter a zoom value. Additionally, I have added functionality that enables or disables the dragging of nodes.

Changes Made

• Added a Number Input component to the Storybook, available in both small and large variants.
• Enhanced the functionality of the zoom utility using the NumberInput component.
• Optimized rendering performance by implementing debouncing for state updates.
• Added a feature to enable or disable node dragging.

How to Test

• Go to Resource explorer, check out the zoom utility and node dragging toggle button at the bottom right corner of the page

Screenshots

komiser.zoom.utility.1070.compressed.mp4

check out the video

Notes

[Any additional notes or information that you would like to share with the reviewers.]

Checklist

• Code follows the contributing guidelines
• Changes have been thoroughly tested
• Documentation has been updated, if necessary
• Any dependencies have been added to the project, if necessary

Reviewers

@AllieMendes

[Kolawole99]

LGTM