Add comment explaining magic numbers.

src/features/collections/data_products/Biolog.tsx

@@ -19,7 +19,7 @@ import { useAppDispatch, useBackoffPolling } from '../../../common/hooks';
 import { formatNumber } from '../../../common/utils/stringUtils';
 import { useAppParam } from '../../params/hooks';
 import classes from '../Collections.module.scss';
-import { /* useMatchId, */ useGenerateSelectionId } from '../collectionsSlice';
+import { useGenerateSelectionId } from '../collectionsSlice';
 import { HeatMap, HeatMapCallback, MAX_HEATMAP_PAGE } from './HeatMap';
 
 export const Biolog: FC<{

src/features/collections/data_products/HeatMap.tsx

@@ -416,6 +416,13 @@ export const PlotlyWrapper = ({
     .fill(0)
     .map((z, ix) => ix);
   const otherProps = { ...tooltipProps, visible: tooltipRole };
+  /* Since our coordinates are integers, the difference in the minimum and
+     maximum value is an integer. For the functions below this value is called
+     range. The numbers are magic and probably only look good on my screen, this
+     is meant as more of an example of how changing the plotly configuration on
+     each render will look. This approach may be useful for doing our own
+     sampling or aggregating the underlying data based on the plotly window.
+  */
   const tickfontSizeCol = (range: number) => {
     if (170 < range) return 5;
     if (160 < range && range <= 170) return 6;