From 6990368340c56715643fe6e22945e50485920f72 Mon Sep 17 00:00:00 2001
From: Marcelo Afonso <marcelo@ebi.ac.uk>
Date: Tue, 9 Jul 2024 11:05:25 +0100
Subject: [PATCH 1/5] heatmap component to v0.10

---
 dev/index.html                                |  3 +-
 .../nightingale-sequence-heatmap/README.md    | 37 ++++---
 .../nightingale-sequence-heatmap/package.json |  2 +-
 .../src/nightingale-sequence-heatmap.ts       | 54 ++++++++---
 yarn.lock                                     | 96 ++-----------------
 5 files changed, 78 insertions(+), 114 deletions(-)

diff --git a/dev/index.html b/dev/index.html
index 382f5eaf..d5ce2353 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -120,7 +120,7 @@
             }
           }
           if (document.getElementById("heatmapHotmap"))
-            document.getElementById("heatmapHotmap").fixedHighlight = "10:20";
+          document.getElementById("heatmapHotmap").fixedHighlight = "10:20";
           document
             .getElementById("heatmapHotmap")
             .setHeatmapData(xDomain, yDomain, data);
@@ -185,6 +185,7 @@ <h1>Manager</h1>
           height="500"
           display-start="5"
           display-end="25"
+          hm-highlight-width="0"
           highlight-event="onmouseover"
           highlight-color="#EB3BFF66"
         ></nightingale-sequence-heatmap>
diff --git a/packages/nightingale-sequence-heatmap/README.md b/packages/nightingale-sequence-heatmap/README.md
index cd5fb3d5..e5357335 100644
--- a/packages/nightingale-sequence-heatmap/README.md
+++ b/packages/nightingale-sequence-heatmap/README.md
@@ -4,6 +4,13 @@ Nightingale Sequence Heatmap component is used to generate a heatmap visualisati
 
 It uses [heatmap-component](https://www.npmjs.com/package/heatmap-component) to render the canvas heatmap.
 
+##### Attributes
+
+###### `hm-highlight-width: number (default 0)`
+
+Number of pixels for the border width of the heatmap. See [live demos](https://github.com/PDBeurope/heatmap-component/#live-demos)
+for examples with border width 1.
+
 ## Usage
 
 The below example shows how to instantiate the component
@@ -14,6 +21,7 @@ The below example shows how to instantiate the component
   heatmap-id="seq-heatmap"
   width="400"
   height="400"
+  hm-highlight-width="0"
   highlight-event="onmouseover"
   highlight-color="#EB3BFF66"
 ></nightingale-sequence-heatmap>
@@ -71,16 +79,20 @@ interface HotmapData {
 Allows dynamic setting of heatmap color palette
 
 ```javascript
-customElements.whenDefined("nightingale-sequence-heatmap").then(() => {
+customElements.whenDefined("nightingale-sequence-heatmap").then( async() => {
   const heatmapElement = document.getElementById(
     "id-for-nightingale-sequence-heatmap",
   );
+  heatmapElement.setHeatmapData(xDomain, yDomain, data);
 
   const colorScale = d3.scaleLinear(
     [0, 1], // score value domain
     ["#ffffff", "#00441b"], // color range to map values
   );
-  heatmapElement.heatmapInstance.setColor((d) => colorScale(d.score));
+
+  await heatmapElement.updateComplete.then(() => {
+    heatmapElement.heatmapInstance.setColor((d) => colorScale(d.score));
+  });
 });
 ```
 
@@ -89,18 +101,21 @@ customElements.whenDefined("nightingale-sequence-heatmap").then(() => {
 Allows dynamic setting of tooltip HTML content
 
 ```javascript
-customElements.whenDefined("nightingale-sequence-heatmap").then(() => {
+customElements.whenDefined("nightingale-sequence-heatmap").then( async() => {
   const heatmapElement = document.getElementById(
     "id-for-nightingale-sequence-heatmap",
   );
-
-  heatmapElement.heatmapInstance.setTooltip((d, x, y, xIndex, yIndex) => {
-    let returnHTML = `
-      <b>Your are at</b> <br />
-
-      x,y: <b>${d.xValue},${d.yValue}</b><br />
-      score: <b>${d.score}</b>`;
-    return returnHTML;
+  heatmapElement.setHeatmapData(xDomain, yDomain, data);
+  
+  await heatmapElement.updateComplete.then(() => {
+    heatmapElement.heatmapInstance.setTooltip((d, x, y, xIndex, yIndex) => {
+      let returnHTML = `
+        <b>You are at</b> <br />
+
+        x,y: <b>${d.xValue},${d.yValue}</b><br />
+        score: <b>${d.score}</b>`;
+      return returnHTML;
+    });
   });
 });
 ```
diff --git a/packages/nightingale-sequence-heatmap/package.json b/packages/nightingale-sequence-heatmap/package.json
index fc32f22c..0fddfbf7 100644
--- a/packages/nightingale-sequence-heatmap/package.json
+++ b/packages/nightingale-sequence-heatmap/package.json
@@ -21,7 +21,7 @@
   "dependencies": {
     "@nightingale-elements/nightingale-new-core": "^4.5.0",
     "d3": "7.8.5",
-    "heatmap-component": "^0.9.0"
+    "heatmap-component": "^0.10.0"
   },
   "publishConfig": {
     "access": "public"
diff --git a/packages/nightingale-sequence-heatmap/src/nightingale-sequence-heatmap.ts b/packages/nightingale-sequence-heatmap/src/nightingale-sequence-heatmap.ts
index 92e07495..60aae49a 100644
--- a/packages/nightingale-sequence-heatmap/src/nightingale-sequence-heatmap.ts
+++ b/packages/nightingale-sequence-heatmap/src/nightingale-sequence-heatmap.ts
@@ -14,7 +14,6 @@ import NightingaleElement, {
   withZoom,
 } from "@nightingale-elements/nightingale-new-core";
 import { Heatmap } from "heatmap-component";
-import { formatDataItem } from "heatmap-component/lib/heatmap-component/utils";
 import {
   interpolateYlOrRd,
   scaleSequential,
@@ -39,6 +38,11 @@ const hexComponentToNumber = (hexComp: string): number => {
   return parseInt(hexComp, 16);
 };
 
+const formatDataItem = (item: unknown): string => {
+  if (typeof item === 'number') return item.toFixed(3);
+  else return JSON.stringify(item);
+}
+
 const hexToRgb = (
   hex: string,
 ): { r: number; g: number; b: number; a?: number } | null => {
@@ -73,10 +77,14 @@ class NightingaleSequenceHeatmap extends withManager(
   @property({ type: String })
   "heatmap-id"!: string;
 
+  @property({ type: Number })
+  "hm-highlight-width": number = 0;
+
   heatmapDomainX?: number[];
   heatmapDomainY?: string[];
   heatmapData?: HotmapData[];
   heatmapInstance?: Heatmap<number, string, HotmapData>;
+  firstZoom = false;
 
   connectedCallback() {
     super.connectedCallback();
@@ -137,6 +145,8 @@ class NightingaleSequenceHeatmap extends withManager(
     let colorString = this["highlight-color"];
     let fillValue = 0.9;
 
+    let highlightWidth = this["hm-highlight-width"];
+
     const rgb = hexToRgb(this["highlight-color"]);
     if (rgb) {
       colorString = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
@@ -158,12 +168,12 @@ class NightingaleSequenceHeatmap extends withManager(
           .heatmap-marker-x {
             fill: ${colorString} !important;
             fill-opacity: ${fillValue} !important;
-            stroke-width: 0 !important;
+            stroke-width: ${highlightWidth} !important;
           }
           .heatmap-marker-y {
             fill: ${colorString} !important;
             fill-opacity: ${fillValue} !important;
-            stroke-width: 0 !important;
+            stroke-width: ${highlightWidth} !important;
           }
           ${heatmapStyleSheet}
         </style>
@@ -242,7 +252,7 @@ class NightingaleSequenceHeatmap extends withManager(
       this.heatmapInstance!.setData({
         xDomain: xDomain,
         yDomain: yDomain,
-        items: data,
+        data: data,
         x: (d) => {
           const x = d.xValue;
           return x;
@@ -292,7 +302,7 @@ class NightingaleSequenceHeatmap extends withManager(
     const hm = Heatmap.create({
       xDomain: this.heatmapDomainX!,
       yDomain: this.heatmapDomainY!,
-      items: this.heatmapData!,
+      data: this.heatmapData!,
       x: (d) => {
         const x = d.xValue;
         return x;
@@ -313,7 +323,7 @@ class NightingaleSequenceHeatmap extends withManager(
 
     hm.setTooltip((d, _x, _y, _xIndex, _yIndex) => {
       const returnHTML = `
-        <b>Your are at</b> <br />
+        <b>You are at</b> <br />
 
         x,y: <b>${d.xValue},${d.yValue}</b><br />
         score: <b>${formatDataItem(d.score)}</b>`;
@@ -339,11 +349,16 @@ class NightingaleSequenceHeatmap extends withManager(
       // no data, stop zoom from occurring
       if (!d) return;
       // On heatmap zoom dispatch event to Nightingale
-      if (d.xMin + 0.5 !== this["display-start"]) {
+      let xDiff = d.xMin;
+      // if not zoomed yet but display attr values exist
+      if (!this.firstZoom && this["display-start"]) {
+        xDiff = this["display-start"];
+      }
+      if (xDiff !== this["display-start"]) {
         this.dispatchEvent(
           new CustomEvent("change", {
             detail: {
-              value: d.xMin + 0.5,
+              value: xDiff,
               type: "display-start",
             },
             bubbles: true,
@@ -351,11 +366,16 @@ class NightingaleSequenceHeatmap extends withManager(
           }),
         );
       }
-      if (d.xMax - 0.5 !== this["display-end"]) {
+      let xMaxDiff = d.xMax - 1;
+      // if not zoomed yet but display attr values exist
+      if (!this.firstZoom && this["display-end"]) {
+        xMaxDiff = this["display-end"];
+      }
+      if (xMaxDiff !== this["display-end"]) {
         this.dispatchEvent(
           new CustomEvent("change", {
             detail: {
-              value: d.xMax - 0.5,
+              value: xMaxDiff,
               type: "display-end",
             },
             bubbles: true,
@@ -363,11 +383,17 @@ class NightingaleSequenceHeatmap extends withManager(
           }),
         );
       }
+      if (!this.firstZoom) {
+        this.firstZoom = true;
+      }
     });
 
     this.heatmapInstance.events.hover.subscribe((d) => {
       // data to send to nightingale can be null if hover outside boundaries
-      const toSend = d === undefined ? null : `${d.xIndex + 1}:${d.xIndex + 1}`;
+      let toSend = null;
+      if (d && d.cell && d.cell.xIndex) {
+        toSend = `${d.cell.xIndex + 1 }:${d.cell.xIndex + 1 }`;
+      }
       // On heatmap zoom dispatch event to Nightingale
       this.dispatchEvent(
         new CustomEvent("change", {
@@ -387,11 +413,11 @@ class NightingaleSequenceHeatmap extends withManager(
    */
   triggerHeatmapZoom() {
     const toStart = this["display-start"]!;
-    const toEnd = this["display-end"]!;
+    const toEnd = this["display-end"]! + 1;
     if (this.heatmapInstance) {
       this.heatmapInstance.zoom({
-        xMin: toStart - 0.5,
-        xMax: toEnd + 0.5,
+        xMin: toStart,
+        xMax: toEnd,
       });
     }
   }
diff --git a/yarn.lock b/yarn.lock
index edacb830..2f4f6d26 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6944,11 +6944,6 @@ d3-chord@3:
   dependencies:
     d3-path "1 - 3"
 
-d3-color@1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.4.1.tgz#c52002bf8846ada4424d55d97982fef26eb3bc8a"
-  integrity sha512-p2sTHSLCJI2QKunbGb7ocOh7DgTAn8IrLx21QRc/BSnodXM4sv6aLQlnfpvehFMLZEfBc6g9pH9SWQccFYfJ9Q==
-
 "d3-color@1 - 3", d3-color@3:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
@@ -6968,11 +6963,6 @@ d3-delaunay@6:
   dependencies:
     delaunator "5"
 
-d3-dispatch@1:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.6.tgz#00d37bcee4dd8cd97729dd893a0ac29caaba5d58"
-  integrity sha512-fVjoElzjhCEy+Hbn8KygnmMS7Or0a9sI2UzGwoB7cCtvI1XpVN9GpoYlnb3xt2YV66oXYb1fLJ8GMvP4hdU1RA==
-
 "d3-dispatch@1 - 3", d3-dispatch@3:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz#5fc75284e9c2375c36c839411a0cf550cbfc4d5e"
@@ -6995,11 +6985,6 @@ d3-dispatch@1:
     iconv-lite "0.6"
     rw "1"
 
-d3-ease@1:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.7.tgz#9a834890ef8b8ae8c558b2fe55bd57f5993b85e2"
-  integrity sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ==
-
 "d3-ease@1 - 3", d3-ease@3:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
@@ -7038,13 +7023,6 @@ d3-hierarchy@3:
   resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz#b01cd42c1eed3d46db77a5966cf726f8c09160c6"
   integrity sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==
 
-d3-interpolate@1:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.4.0.tgz#526e79e2d80daa383f9e0c1c1c7dcc0f0583e987"
-  integrity sha512-V9znK0zc3jOPV4VD2zZn0sDhZU3WAE2bmlxdIwwQPPzPjvyLkd8B3JUVdS1IDUFDkWZ72c9qnv1GK2ZagTZ8EA==
-  dependencies:
-    d3-color "1"
-
 "d3-interpolate@1 - 3", "d3-interpolate@1.2.0 - 3", d3-interpolate@3:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
@@ -7091,19 +7069,6 @@ d3-scale@4:
     d3-time "2.1.1 - 3"
     d3-time-format "2 - 4"
 
-d3-selection-multi@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/d3-selection-multi/-/d3-selection-multi-1.0.1.tgz#cd6c25413d04a2cb97470e786f2cd877f3e34f58"
-  integrity sha512-mEnRkJ6A+Otd1LuRPV3az+s/RLDmIEhuz/MnT21O2nPcWNH7wZotdIlRjMA4Wpr+n7AESQ5fD8v1J3nL2Mnw9g==
-  dependencies:
-    d3-selection "1"
-    d3-transition "1"
-
-d3-selection@1, d3-selection@^1.1.0:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.4.2.tgz#dcaa49522c0dbf32d6c1858afc26b6094555bc5c"
-  integrity sha512-SJ0BqYihzOjDnnlfyeHT0e30k0K1+5sR3d5fNueCNeuhZTnGw4M4o8mqJchSwgKMXCNFo+e2VTChiSJ0vYtXkg==
-
 "d3-selection@2 - 3", d3-selection@3:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-3.0.0.tgz#c25338207efa72cc5b9bd1458a1a41901f1e1b31"
@@ -7130,28 +7095,11 @@ d3-shape@3:
   dependencies:
     d3-array "2 - 3"
 
-d3-timer@1:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.10.tgz#dfe76b8a91748831b13b6d9c793ffbd508dd9de5"
-  integrity sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==
-
 "d3-timer@1 - 3", d3-timer@3:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
   integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
 
-d3-transition@1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-1.3.2.tgz#a98ef2151be8d8600543434c1ca80140ae23b398"
-  integrity sha512-sc0gRU4PFqZ47lPVHloMn9tlPcv8jxgOQg+0zjhfZXMQuvppjG6YuwdMBE0TuqCZjeJkLecku/l9R0JPcRhaDA==
-  dependencies:
-    d3-color "1"
-    d3-dispatch "1"
-    d3-ease "1"
-    d3-interpolate "1"
-    d3-selection "^1.1.0"
-    d3-timer "1"
-
 "d3-transition@2 - 3", d3-transition@3:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-3.0.1.tgz#6869fdde1448868077fdd5989200cb61b2a1645f"
@@ -7210,7 +7158,7 @@ d3@7.8.5:
     d3-transition "3"
     d3-zoom "3"
 
-d3@7.9.0, d3@^7.8.5:
+d3@7.9.0, d3@^7.9.0:
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/d3/-/d3-7.9.0.tgz#579e7acb3d749caf8860bd1741ae8d371070cd5d"
   integrity sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==
@@ -9406,13 +9354,12 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-heatmap-component@^0.9.0:
-  version "0.9.0"
-  resolved "https://registry.yarnpkg.com/heatmap-component/-/heatmap-component-0.9.0.tgz#53726cb56b886f65885a14e8840d20370f937f4d"
-  integrity sha512-RUvymuHcxJLqdTcQjv5rHh76svh1HDF51OXAWCkjrDUJnK0xuaa9NOW5UZhlsr59fNOmlWXjT3ugcH3fcUiMPA==
+heatmap-component@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/heatmap-component/-/heatmap-component-0.10.0.tgz#123da655cd5de15567bd9697b40d418505a7eb38"
+  integrity sha512-vHUlV27iXpIP6RhXLnLkcEvM8Ww5Io+AiSLzM1fXHudokD2FCZAwkajOQLvJDS02vitN1O66i/2VVaDsMrDkMw==
   dependencies:
-    d3 "^7.8.5"
-    d3-selection-multi "^1.0.1"
+    d3 "^7.9.0"
     lodash "^4.17.21"
     rxjs "^7.8.1"
     tslib "^2.6.2"
@@ -15309,16 +15256,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -15421,7 +15359,7 @@ string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -15435,13 +15373,6 @@ strip-ansi@^3.0.1:
   dependencies:
     ansi-regex "^2.0.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -16891,7 +16822,7 @@ worker-rpc@^0.1.0:
   dependencies:
     microevent.ts "~0.1.1"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -16909,15 +16840,6 @@ wrap-ansi@^6.0.1:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"

From 80f8b16223915574eb3b7965c5b2fdf3d79af1e8 Mon Sep 17 00:00:00 2001
From: Marcelo Afonso <marcelo@ebi.ac.uk>
Date: Tue, 9 Jul 2024 11:21:20 +0100
Subject: [PATCH 2/5] heatmap component to v1.0.1

---
 dev/index.html                                     | 7 ++++++-
 packages/nightingale-sequence-heatmap/package.json | 2 +-
 yarn.lock                                          | 8 ++++----
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/dev/index.html b/dev/index.html
index d5ce2353..6a4c2d31 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -101,7 +101,7 @@
         }
       });
       customElements.whenDefined("nightingale-sequence-heatmap").then(() => {
-        setTimeout(() => {
+        setTimeout( async() => {
           const xDomain = [
             1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
             20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36,
@@ -124,6 +124,11 @@
           document
             .getElementById("heatmapHotmap")
             .setHeatmapData(xDomain, yDomain, data);
+          
+          // await document.getElementById("heatmapHotmap").updateComplete.then(() => {
+          //   const colorScale = d3.scaleLinear([0, 1], ["lightblue", "blue"]);
+          //   document.getElementById("heatmapHotmap").heatmapInstance.setColor((d) => colorScale(d.score));
+          // });
           setTimeout(() => {
             const colorScale = d3.scaleLinear([0, 1], ["lightblue", "blue"]);
             document
diff --git a/packages/nightingale-sequence-heatmap/package.json b/packages/nightingale-sequence-heatmap/package.json
index 0fddfbf7..99952c94 100644
--- a/packages/nightingale-sequence-heatmap/package.json
+++ b/packages/nightingale-sequence-heatmap/package.json
@@ -21,7 +21,7 @@
   "dependencies": {
     "@nightingale-elements/nightingale-new-core": "^4.5.0",
     "d3": "7.8.5",
-    "heatmap-component": "^0.10.0"
+    "heatmap-component": "^1.0.1"
   },
   "publishConfig": {
     "access": "public"
diff --git a/yarn.lock b/yarn.lock
index 2f4f6d26..fe6192a6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9354,10 +9354,10 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-heatmap-component@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/heatmap-component/-/heatmap-component-0.10.0.tgz#123da655cd5de15567bd9697b40d418505a7eb38"
-  integrity sha512-vHUlV27iXpIP6RhXLnLkcEvM8Ww5Io+AiSLzM1fXHudokD2FCZAwkajOQLvJDS02vitN1O66i/2VVaDsMrDkMw==
+heatmap-component@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/heatmap-component/-/heatmap-component-1.0.1.tgz#1bec0546b8f85912d59bffb297172372e4c87256"
+  integrity sha512-FftYefBTv6Dbw4f5gMj6OqtpZrzDVWLQvxti9VjbPJhoP2VGkTWYvSO/kiBORrFelR8HA22UjRtm0kLxVx+k7w==
   dependencies:
     d3 "^7.9.0"
     lodash "^4.17.21"

From 2e70e3afe91da2655b0b10915b8ea7e1468402d8 Mon Sep 17 00:00:00 2001
From: Marcelo Afonso <marcelo@ebi.ac.uk>
Date: Tue, 9 Jul 2024 11:31:55 +0100
Subject: [PATCH 3/5] lint fixes

---
 dev/index.html                                            | 6 +++---
 .../src/nightingale-sequence-heatmap.ts                   | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/dev/index.html b/dev/index.html
index 6a4c2d31..71c63908 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -101,7 +101,7 @@
         }
       });
       customElements.whenDefined("nightingale-sequence-heatmap").then(() => {
-        setTimeout( async() => {
+        setTimeout(async () => {
           const xDomain = [
             1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19,
             20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36,
@@ -120,11 +120,11 @@
             }
           }
           if (document.getElementById("heatmapHotmap"))
-          document.getElementById("heatmapHotmap").fixedHighlight = "10:20";
+            document.getElementById("heatmapHotmap").fixedHighlight = "10:20";
           document
             .getElementById("heatmapHotmap")
             .setHeatmapData(xDomain, yDomain, data);
-          
+
           // await document.getElementById("heatmapHotmap").updateComplete.then(() => {
           //   const colorScale = d3.scaleLinear([0, 1], ["lightblue", "blue"]);
           //   document.getElementById("heatmapHotmap").heatmapInstance.setColor((d) => colorScale(d.score));
diff --git a/packages/nightingale-sequence-heatmap/src/nightingale-sequence-heatmap.ts b/packages/nightingale-sequence-heatmap/src/nightingale-sequence-heatmap.ts
index 60aae49a..e139c584 100644
--- a/packages/nightingale-sequence-heatmap/src/nightingale-sequence-heatmap.ts
+++ b/packages/nightingale-sequence-heatmap/src/nightingale-sequence-heatmap.ts
@@ -39,9 +39,9 @@ const hexComponentToNumber = (hexComp: string): number => {
 };
 
 const formatDataItem = (item: unknown): string => {
-  if (typeof item === 'number') return item.toFixed(3);
+  if (typeof item === "number") return item.toFixed(3);
   else return JSON.stringify(item);
-}
+};
 
 const hexToRgb = (
   hex: string,
@@ -145,7 +145,7 @@ class NightingaleSequenceHeatmap extends withManager(
     let colorString = this["highlight-color"];
     let fillValue = 0.9;
 
-    let highlightWidth = this["hm-highlight-width"];
+    const highlightWidth = this["hm-highlight-width"];
 
     const rgb = hexToRgb(this["highlight-color"]);
     if (rgb) {
@@ -392,7 +392,7 @@ class NightingaleSequenceHeatmap extends withManager(
       // data to send to nightingale can be null if hover outside boundaries
       let toSend = null;
       if (d && d.cell && d.cell.xIndex) {
-        toSend = `${d.cell.xIndex + 1 }:${d.cell.xIndex + 1 }`;
+        toSend = `${d.cell.xIndex + 1}:${d.cell.xIndex + 1}`;
       }
       // On heatmap zoom dispatch event to Nightingale
       this.dispatchEvent(

From 14b81695dc679c578beef32c3a89fbbf4d8e9719 Mon Sep 17 00:00:00 2001
From: Marcelo Afonso <marcelo@ebi.ac.uk>
Date: Tue, 9 Jul 2024 11:34:31 +0100
Subject: [PATCH 4/5] new test snapshot

---
 .../nightingale-sequence-heatmap.test.js.snap | 36 +++++++++++++++----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/packages/nightingale-sequence-heatmap/tests/__snapshots__/nightingale-sequence-heatmap.test.js.snap b/packages/nightingale-sequence-heatmap/tests/__snapshots__/nightingale-sequence-heatmap.test.js.snap
index 4cfa3769..37dff2f6 100644
--- a/packages/nightingale-sequence-heatmap/tests/__snapshots__/nightingale-sequence-heatmap.test.js.snap
+++ b/packages/nightingale-sequence-heatmap/tests/__snapshots__/nightingale-sequence-heatmap.test.js.snap
@@ -36,7 +36,10 @@ exports[`nightingale-sequence-heatmap tests it should display the sequence corre
     <!---->
     0.359
      !important;
-            stroke-width: 0 !important;
+            stroke-width: 
+    <!---->
+    0
+     !important;
           }
           .heatmap-marker-y {
             fill: 
@@ -47,7 +50,10 @@ exports[`nightingale-sequence-heatmap tests it should display the sequence corre
     <!---->
     0.359
      !important;
-            stroke-width: 0 !important;
+            stroke-width: 
+    <!---->
+    0
+     !important;
           }
           
     <!---->
@@ -187,11 +193,13 @@ exports[`nightingale-sequence-heatmap tests it should display the sequence corre
           style="position: absolute; width: 100%; height: 100%;"
         >
           <canvas
+            class="heatmap-canvas"
             height="0"
             style="position: absolute; width: 100%; height: 100%;"
             width="0"
           />
           <svg
+            class="heatmap-svg"
             style="position: absolute; width: 100%; height: 100%;"
           >
             <rect
@@ -248,7 +256,10 @@ exports[`nightingale-sequence-heatmap tests it should display the sequence heatm
     <!---->
     0.359
      !important;
-            stroke-width: 0 !important;
+            stroke-width: 
+    <!---->
+    0
+     !important;
           }
           .heatmap-marker-y {
             fill: 
@@ -259,7 +270,10 @@ exports[`nightingale-sequence-heatmap tests it should display the sequence heatm
     <!---->
     0.359
      !important;
-            stroke-width: 0 !important;
+            stroke-width: 
+    <!---->
+    0
+     !important;
           }
           
     <!---->
@@ -399,11 +413,13 @@ exports[`nightingale-sequence-heatmap tests it should display the sequence heatm
           style="position: absolute; width: 100%; height: 100%;"
         >
           <canvas
+            class="heatmap-canvas"
             height="100"
             style="position: absolute; width: 100%; height: 100%;"
             width="100"
           />
           <svg
+            class="heatmap-svg"
             style="position: absolute; width: 100%; height: 100%;"
           />
         </div>
@@ -450,7 +466,10 @@ exports[`nightingale-sequence-heatmap tests it should zoom in 1`] = `
     <!---->
     0.359
      !important;
-            stroke-width: 0 !important;
+            stroke-width: 
+    <!---->
+    0
+     !important;
           }
           .heatmap-marker-y {
             fill: 
@@ -461,7 +480,10 @@ exports[`nightingale-sequence-heatmap tests it should zoom in 1`] = `
     <!---->
     0.359
      !important;
-            stroke-width: 0 !important;
+            stroke-width: 
+    <!---->
+    0
+     !important;
           }
           
     <!---->
@@ -601,11 +623,13 @@ exports[`nightingale-sequence-heatmap tests it should zoom in 1`] = `
           style="position: absolute; width: 100%; height: 100%;"
         >
           <canvas
+            class="heatmap-canvas"
             height="0"
             style="position: absolute; width: 100%; height: 100%;"
             width="0"
           />
           <svg
+            class="heatmap-svg"
             style="position: absolute; width: 100%; height: 100%;"
           />
         </div>

From ed131c12f2a5ece28bee52ec66ca7c7c2da6a49d Mon Sep 17 00:00:00 2001
From: Marcelo Afonso <marcelo@ebi.ac.uk>
Date: Mon, 19 Aug 2024 14:51:43 +0100
Subject: [PATCH 5/5] removed comments in dev/index.html

---
 dev/index.html | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/dev/index.html b/dev/index.html
index 71c63908..fa381120 100644
--- a/dev/index.html
+++ b/dev/index.html
@@ -125,10 +125,6 @@
             .getElementById("heatmapHotmap")
             .setHeatmapData(xDomain, yDomain, data);
 
-          // await document.getElementById("heatmapHotmap").updateComplete.then(() => {
-          //   const colorScale = d3.scaleLinear([0, 1], ["lightblue", "blue"]);
-          //   document.getElementById("heatmapHotmap").heatmapInstance.setColor((d) => colorScale(d.score));
-          // });
           setTimeout(() => {
             const colorScale = d3.scaleLinear([0, 1], ["lightblue", "blue"]);
             document