diff --git a/src/components/HeatMap/HeatMap.js b/src/components/HeatMap/HeatMap.js
index a2c1976a..e30a2a0c 100644
--- a/src/components/HeatMap/HeatMap.js
+++ b/src/components/HeatMap/HeatMap.js
@@ -7,29 +7,42 @@ import $ from 'jquery';
 import { DocumentFiltersContext, DocumentAnnotationsContext } from '../../contexts/DocumentContext';
 
 
-function HeatMap({ pdf }) {
+const HeatMap = ({ pdf }) => {
   const lineHeight = 18;
   const documentHeight = $('#document-container').height() || 0;
-  let scaleFactor = $('#document-container').get(0) === undefined ? 1 : $('#document-container').height() / $('#document-container').get(0).scrollHeight;
+  const scaleFactor = $('#document-container').get(0) === undefined
+    ? 1
+    : $('#document-container').height() / $('#document-container').get(0).scrollHeight;
   const minStrokeHeight = 1;
-  const offsetTop = $('#document-container').offset() === undefined ? 0 : $('#document-container').offset().top;
-  const grandularity = lineHeight * scaleFactor >= minStrokeHeight ? lineHeight : Math.ceil(minStrokeHeight / scaleFactor);
+  const offsetTop = $('#document-container').offset() === undefined
+    ? 0
+    : $('#document-container').offset().top;
+  const grandularity = lineHeight * scaleFactor >= minStrokeHeight
+    ? lineHeight
+    : Math.ceil(minStrokeHeight / scaleFactor);
   const [channelAnnotations] = useContext(DocumentAnnotationsContext);
   const [documentFilters] = useContext(DocumentFiltersContext);
   const n = (Math.ceil($('#document-card-container').height() / grandularity));
-  const map = new Array(isNaN(n) ? 0 : n);
+  const map = new Array(Number.isNaN(n) ? 0 : n);
 
   for (const side in channelAnnotations) {
     if (channelAnnotations[side] !== null) {
       for (const anno of channelAnnotations[side]) {
-        if (documentFilters.annotationIds[side] !== null && documentFilters.annotationIds[side].includes(anno._id)) {
+        if (documentFilters.annotationIds[side] !== null
+          && documentFilters.annotationIds[side].includes(anno._id)) {
           if (anno.position.height !== undefined) {
             let h = anno.position.height;
-            // if for some reason the height of this annotation is a negative number we are going to recalculate the value in the loop
+            // if for some reason the height of this annotation is a negative number,
+            // recalculate the value in the loop
             if (h < 0) {
-              const annotationBeginning = $(`#document-content-container span[annotation-id='${anno._id}'] .annotation-beginning-marker`);
-              const annotationEnding = $(`#document-content-container span[annotation-id='${anno._id}'] .annotation-ending-marker`);
-              if (annotationBeginning.get(0) !== undefined && annotationEnding.get(0) !== undefined) {
+              const annotationBeginning = $(
+                `#document-content-container span[annotation-id='${anno._id}'] .annotation-beginning-marker`,
+              );
+              const annotationEnding = $(
+                `#document-content-container span[annotation-id='${anno._id}'] .annotation-ending-marker`,
+              );
+              if (annotationBeginning.get(0) !== undefined
+                && annotationEnding.get(0) !== undefined) {
                 const annotationBeginningPosition = annotationBeginning.offset();
                 const annotationEndingPosition = annotationEnding.offset();
                 h = (annotationEndingPosition.top - annotationBeginningPosition.top) + lineHeight;
@@ -37,8 +50,11 @@ function HeatMap({ pdf }) {
                 h = 0;
               }
             }
-            // now we have to convert the annotations position and height into starting and ending indexs for the map
-            let startIndex = Math.floor((anno.position.top - offsetTop) / grandularity);
+            // convert the annotation position and height
+            // into starting and ending indexs for the map
+            let startIndex = Math.floor(
+              (anno.position.top - offsetTop) / grandularity,
+            );
             startIndex = startIndex < 0 ? 0 : startIndex;
             const endIndex = Math.floor((anno.position.top + h - offsetTop) / grandularity);
             for (let i = startIndex; i <= endIndex; i += 1) {
@@ -57,8 +73,21 @@ function HeatMap({ pdf }) {
 
   return (
     <>
-      <div id="heat-map" style={{ height: documentHeight + (pdf ? 0 : 18) }}>
-        {map.map((v, i) => <div className="stroke" style={{ height: lineHeight * scaleFactor, top: i * lineHeight * scaleFactor, opacity: v * 0.5 }} />)}
+      <div
+        id="heat-map"
+        data-testid="heat-map"
+        style={{ height: documentHeight + (pdf ? 0 : 18) }}
+      >
+        {map.map((v, i) => (
+          <div
+            className="stroke"
+            style={{
+              height: lineHeight * scaleFactor,
+              top: i * lineHeight * scaleFactor,
+              opacity: v * 0.5,
+            }}
+          />
+        ))}
       </div>
 
       <style jsx global>
@@ -84,6 +113,6 @@ function HeatMap({ pdf }) {
       </style>
     </>
   );
-}
+};
 
 export default HeatMap;