Expose click and dblclick events in MSA.

ebi-webcomponents · Feb 9, 2024 · c2cf530 · c2cf530
1 parent 1d9d040
commit c2cf530
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 22 deletions.
diff --git a/packages/nightingale-msa/src/components/Canvas/SequenceViewer.ts b/packages/nightingale-msa/src/components/Canvas/SequenceViewer.ts
@@ -97,12 +97,12 @@ class SequenceViewerComponent extends DraggingComponent {
       currentViewSequence: clamp(
         floor(position.yPos / this.tileHeight),
         0,
-        (this.sequences?.length || 1) - 1,
+        (this.sequences?.length || 1) - 1
       ),
       currentViewSequencePosition: clamp(
         floor(position.xPos / this.tileWidth),
         0,
-        this.sequences?.maxLength || 0,
+        this.sequences?.maxLength || 0
       ),
       ...position,
     };
@@ -191,6 +191,8 @@ class SequenceViewerComponent extends DraggingComponent {
   firstUpdated() {
     super.firstUpdated();
     this.container?.addEventListener("mousemove", this.onMouseMove);
+    this.container?.addEventListener("click", this.onClick);
+    this.container?.addEventListener("dblclick", this.onDoubleClick);
     this.addEventListener("fake-scroll", ((e: CustomEvent) => {
       this.movePosition(e.detail.movement);
     }) as EventListener);
@@ -215,7 +217,7 @@ class SequenceViewerComponent extends DraggingComponent {
     if (!positions) {
       if (debug)
         console.error(
-          "Failed to draw scene because couldn't get the tile positions",
+          "Failed to draw scene because couldn't get the tile positions"
         );
       return;
     }
@@ -231,14 +233,14 @@ class SequenceViewerComponent extends DraggingComponent {
       this.ctx.canvas.dispatchEvent(
         new CustomEvent("drawCompleted", {
           bubbles: true,
-        }),
+        })
       );
     }
     if (debug) {
       const elapsed = Date.now() - this.redrawStarted;
       if (elapsed > 5) {
         console.log(
-          `Took ${elapsed} msecs to redraw for ${positions.startXTile} ${positions.startYTile} (redrawnTiles: ${this.redrawnTiles})`,
+          `Took ${elapsed} msecs to redraw for ${positions.startXTile} ${positions.startYTile} (redrawnTiles: ${this.redrawnTiles})`
         );
       }
     }
@@ -249,19 +251,19 @@ class SequenceViewerComponent extends DraggingComponent {
     if (!this.position || !this.sequences || !this.stats) return null;
     const startXTile = Math.max(
       0,
-      this.position.currentViewSequencePosition - this.props.cacheElements,
+      this.position.currentViewSequencePosition - this.props.cacheElements
     );
     const startYTile = Math.max(
       0,
-      this.position.currentViewSequence - this.props.cacheElements,
+      this.position.currentViewSequence - this.props.cacheElements
     );
     const endYTile = Math.min(
       this.sequences.length,
-      startYTile + this.stats.nrYTiles + 2 * this.props.cacheElements,
+      startYTile + this.stats.nrYTiles + 2 * this.props.cacheElements
     );
     const endXTile = Math.min(
       this.sequences.maxLength,
-      startXTile + this.stats.nrXTiles + 2 * this.props.cacheElements,
+      startXTile + this.stats.nrXTiles + 2 * this.props.cacheElements
     );
     return { startXTile, startYTile, endXTile, endYTile };
   }
@@ -328,7 +330,7 @@ class SequenceViewerComponent extends DraggingComponent {
           xPos,
           yPos,
           width,
-          height,
+          height
         );
       }
     }
@@ -395,7 +397,7 @@ class SequenceViewerComponent extends DraggingComponent {
       xPosFrom,
       yPosFrom,
       regionWidth,
-      regionHeight,
+      regionHeight
     );
   }
   movePosition = (m: Movement) => {
@@ -422,14 +424,14 @@ class SequenceViewerComponent extends DraggingComponent {
     const seqNr = clamp(
       floor((this.position.yPos + pos.yPos) / this.tileHeight),
       0,
-      sequences.length - 1,
+      sequences.length - 1
     );
     const sequence = sequences[seqNr];
 
     const position = clamp(
       floor((this.position.xPos + pos.xPos) / this.tileWidth),
       0,
-      sequence.sequence.length - 1,
+      sequence.sequence.length - 1
     );
     return {
       i: seqNr,
@@ -450,7 +452,7 @@ class SequenceViewerComponent extends DraggingComponent {
           sequencePosition.position >= feature.residues.from - 1 &&
           sequencePosition.position <= feature.residues.to - 1 &&
           sequencePosition.i >= feature.sequences.from &&
-          sequencePosition.i <= feature.sequences.to,
+          sequencePosition.i <= feature.sequences.to
       )
       .map((feature) => feature.id || "");
   }
@@ -475,7 +477,7 @@ class SequenceViewerComponent extends DraggingComponent {
         new CustomEvent(name, {
           bubbles: true,
           detail: data,
-        }),
+        })
       );
     }
 
@@ -564,7 +566,7 @@ class SequenceViewerComponent extends DraggingComponent {
       sequences: this.sequences,
     } as TileOptions);
     this.residueTileCache.updateTileSpecs(
-      residueTileSpecs as ResidueTileOptions,
+      residueTileSpecs as ResidueTileOptions
     );
   }
 

diff --git a/packages/nightingale-msa/src/nightingale-msa.ts b/packages/nightingale-msa/src/nightingale-msa.ts
@@ -20,8 +20,8 @@ const DEAFULT_COLOR_SCHEME = "clustal2";
 @customElement("nightingale-msa")
 class NightingaleMSA extends withManager(
   withResizable(
-    withHighlight(withMargin(withDimensions(withPosition(NightingaleElement)))),
-  ),
+    withHighlight(withMargin(withDimensions(withPosition(NightingaleElement))))
+  )
 ) {
   @property({
     attribute: "color-scheme",
@@ -67,7 +67,7 @@ class NightingaleMSA extends withManager(
         new CustomEvent("conservationProgress", {
           bubbles: true,
           detail: e.data,
-        }),
+        })
       );
       if (e.data.progress === 1) {
         const conservation = {
@@ -94,7 +94,7 @@ class NightingaleMSA extends withManager(
   }
 
   set features(features: Array<Region>) {
-    if (this.sequenceViewer) this.sequenceViewer.features= features;
+    if (this.sequenceViewer) this.sequenceViewer.features = features;
   }
 
   getColorMap() {
@@ -173,7 +173,7 @@ class NightingaleMSA extends withManager(
           },
           fillColor: this["highlight-color"],
           borderColor: this["highlight-color"],
-        }) as Region,
+        }) as Region
     );
   }
   protected firstUpdated() {

diff --git a/stories/10.MSA/NightingaleMSA.stories.ts b/stories/10.MSA/NightingaleMSA.stories.ts
@@ -239,5 +239,4 @@ MSAWithFeatures.play = async () => {
       mouseOverBorderColor: "purple",
     },
   ];
-  msa.sequenceViewer.addEventListener("click", msa.sequenceViewer.onClick);
 };