Create Pannable/Zoomable View for Chromosome View

[VinLau]

See #128 , this ticket describes the major requirements for visualizing the chromosomes in the chromosome view.

Story: A user should be able to easily pan and zoom through a (variable number) of chromosomes for a given species (i.e. different species have a different number of chromosomes). These chromosomes are sized correctly to their DNA (base-pair) size. If provided, centromeres should also be drawn. If the user desires, she can easily interact with these drawn chromosomes (tooltips, future feature). This view should be always be available regardless if a gene is selected or loaded.

To reproduce/see on ePlant2:

1. Go to https://bar.utoronto.ca/eplant
2. Go to chromosome viewer
3. Pan and zoom through the view

Desired Outcome:
When a user hovers over the chromosome, the cursor should switch to "pointer" to suggest that the chromosome can be clicked for tooltips. The chromosomes should also list the size and the chromosome number (see above) along with any centromeres. The chromosomes should be spaced correctly based on the number of chromosomes (i.e. horizontal spacing, imagine if we had poplar which has 19 chromosomes).

Technical notes:
Use a SVG or canvas drawing library. Ensure if you are using a library, it has pan/zoom/tooltip/close-tooltip features much like ePlant2.

Webservices (may change to refactor):
https://bar.utoronto.ca/eplant/cgi-bin/chromosomeinfo.cgi?species=Arabidopsis_thaliana for chromosome information

Date ticket created: Jun 14 2024