position and highlight as external props

ebi-webcomponents · Sep 28, 2020 · a79c95e · a79c95e
1 parent ff241ea
commit a79c95e
Show file tree

Hide file tree

Showing 5 changed files with 117 additions and 99 deletions.
diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
   "bugs": "https://github.com/ebi-webcomponents/react-msa-viewer/issues",
   "author": "Plotly, Inc",
   "license": "MIT",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "private": false,
   "main": "dist/index.umd.min.js",
   "module": "src/lib.js",
@@ -90,4 +90,4 @@
     "redux": "4.0.5",
     "reselect": "4.0.0"
   }
-}
+}
diff --git a/src/PropTypes.js b/src/PropTypes.js
@@ -17,7 +17,7 @@ import { ColorScheme, isColorScheme } from "./utils/ColorScheme";
  */
 export const SequencePropType = PropTypes.shape({
   name: PropTypes.string,
-  sequence: PropTypes.string,
+  sequence: PropTypes.string
 });
 
 export const AllowedColorschemes = [
@@ -42,7 +42,7 @@ export const AllowedColorschemes = [
   "taylor",
   "turn_propensity",
   "zappo",
-  "conservation",
+  "conservation"
 ];
 
 export const ColorSchemePropType = PropTypes.oneOfType([
@@ -61,12 +61,12 @@ export const ColorSchemePropType = PropTypes.oneOfType([
           "`. Validation failed."
       );
     }
-  },
+  }
 ]);
 
 export const PositionPropType = PropTypes.shape({
   xPos: PropTypes.number,
-  yPos: PropTypes.number,
+  yPos: PropTypes.number
 });
 
 /**
@@ -93,6 +93,19 @@ export const MSAPropTypes = {
    * Height of the main tiles (in pixels), e.g. `20`
    */
   tileHeight: PropTypes.number,
+  /**
+   * Current x and y position of the viewpoint
+   * in the main sequence viewer (in pixels).
+   * This specifies the position of the top-left corner
+   * of the viewpoint within the entire alignment,
+   * e.g. `{xPos: 20, yPos: 5}`.
+   */
+  position: PositionPropType,
+
+  /**
+   * Displays a highlight
+   */
+  highlight: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 
   /**
    * Colorscheme to use. Currently the follow colorschemes are supported:
@@ -112,19 +125,16 @@ export const MSAPropTypes = {
   calculateConservation: PropTypes.bool,
 
   /**
-   * The conservation data can be used to define an overlay that 
+   * The conservation data can be used to define an overlay that
    * defines the opacity of the background color of each residue.
    */
   overlayConservation: PropTypes.bool,
 
-
   /**
    * Number of sequences to use when calculating the conservation. Which is useful to get results for alignments of many sequences.
    * If not included, or not a vlid numeric value, the whole alignemnt will be use for the calculation.
    */
-  sampleSizeConservation: PropTypes.number,
-
-
+  sampleSizeConservation: PropTypes.number
 };
 
 // TODO: separate individual properties into their components
@@ -136,5 +146,5 @@ export const msaDefaultProps = {
   colorScheme: "clustal",
   calculateConservation: false,
   overlayConservation: false,
-  sampleSizeConservation: undefined,
+  sampleSizeConservation: undefined
 };
diff --git a/src/components/Canvas/SequenceViewer.js b/src/components/Canvas/SequenceViewer.js
@@ -72,7 +72,7 @@ class SequenceViewerComponent extends DraggingComponent {
     if (this.ctx) {
       this.ctx.canvas.dispatchEvent(
         new CustomEvent("drawCompleted", {
-          bubbles: true,
+          bubbles: true
         })
       );
     }
@@ -135,10 +135,10 @@ class SequenceViewerComponent extends DraggingComponent {
             "borderWidth",
             "borderColor",
             "overlayConservation",
-            "conservation",
-          ]),
+            "conservation"
+          ])
         });
-      },
+      }
     });
   };
 
@@ -187,7 +187,7 @@ class SequenceViewerComponent extends DraggingComponent {
       }
     }
     if (this.props.features) {
-      this.props.features.forEach((feature) => {
+      this.props.features.forEach(feature => {
         this.drawHighligtedRegion(feature);
       });
     }
@@ -215,7 +215,7 @@ class SequenceViewerComponent extends DraggingComponent {
     canvas.height = regionHeight;
 
     const ctx = canvas.getContext("2d");
-    const mouseOver = this.mouseOverFeatureIds?.some((id) => id === region.id);
+    const mouseOver = this.mouseOverFeatureIds?.some(id => id === region.id);
     ctx.globalAlpha = 0.3;
     ctx.fillStyle = mouseOver ? "green" : region.fillColor || "#9999FF";
     ctx.fillRect(0, 0, regionWidth, regionHeight);
@@ -241,7 +241,7 @@ class SequenceViewerComponent extends DraggingComponent {
   onPositionUpdate = (oldPos, newPos) => {
     const relativeMovement = {
       xMovement: oldPos[0] - newPos[0],
-      yMovement: oldPos[1] - newPos[1],
+      yMovement: oldPos[1] - newPos[1]
     };
     this.sendEvent("onPositionUpdate", newPos);
     this.props.positionDispatch(movePosition(relativeMovement));
@@ -265,7 +265,7 @@ class SequenceViewerComponent extends DraggingComponent {
       i: seqNr,
       sequence,
       position,
-      residue: sequence.sequence[position],
+      residue: sequence.sequence[position]
     };
   }
 
@@ -275,14 +275,14 @@ class SequenceViewerComponent extends DraggingComponent {
     }
     return this.props.features
       .filter(
-        (feature) =>
+        feature =>
           feature.id &&
           sequencePosition.position >= feature.residues.from - 1 &&
           sequencePosition.position <= feature.residues.to - 1 &&
           sequencePosition.i >= feature.sequences.from &&
           sequencePosition.i <= feature.sequences.to
       )
-      .map((feature) => feature.id);
+      .map(feature => feature.id);
   }
 
   updateScrollPosition = () => {
@@ -296,7 +296,7 @@ class SequenceViewerComponent extends DraggingComponent {
     const [x, y] = Mouse.rel(e);
     return this.positionToSequence({
       xPos: x,
-      yPos: y,
+      yPos: y
     });
   }
 
@@ -309,7 +309,7 @@ class SequenceViewerComponent extends DraggingComponent {
     }
   }
 
-  onMouseMove = (e) => {
+  onMouseMove = e => {
     if (typeof this.isInDragPhase === "undefined") {
       if (this.hasOnMouseMoveProps()) {
         const eventData = this.currentPointerPosition(e);
@@ -337,7 +337,7 @@ class SequenceViewerComponent extends DraggingComponent {
     super.onMouseMove(e);
   };
 
-  onMouseLeave = (e) => {
+  onMouseLeave = e => {
     this.sendEvent("onResidueMouseLeave", this.currentMouseSequencePosition);
     this.currentMouseSequencePosition = undefined;
     if (this.mouseOverFeatureIds) {
@@ -347,20 +347,20 @@ class SequenceViewerComponent extends DraggingComponent {
     super.onMouseLeave(e);
   };
 
-  onClick = (e) => {
+  onClick = e => {
     if (!this.mouseHasMoved) {
       const eventData = this.currentPointerPosition(e);
       this.sendEvent("onResidueClick", eventData);
       if (this.props.features) {
-        this.sequencePositionToFeatureIds(eventData).forEach((id) => {
+        this.sequencePositionToFeatureIds(eventData).forEach(id => {
           this.sendEvent("onFeatureClick", id);
         });
       }
     }
     super.onClick(e);
   };
 
-  onDoubleClick = (e) => {
+  onDoubleClick = e => {
     const eventData = this.currentPointerPosition(e);
     this.sendEvent("onResidueDoubleClick", eventData);
     super.onDoubleClick(e);
@@ -379,14 +379,14 @@ class SequenceViewerComponent extends DraggingComponent {
       "textFont",
       "borderColor",
       "overlayConservation",
-      "conservation",
+      "conservation"
     ];
     this.tileCache.updateTileSpecs(
       pick(this.props, [
         ...tileAttributes,
         "xGridSize",
         "yGridSize",
-        "sequences",
+        "sequences"
       ])
     );
     this.residueTileCache.updateTileSpecs(pick(this.props, tileAttributes));
@@ -415,6 +415,7 @@ SequenceViewerComponent.defaultProps = {
   overlayConservation: false,
   conservation: null,
   sequenceDisableDragging: false,
+  highlight: null
 };
 
 SequenceViewerComponent.propTypes = {
@@ -446,7 +447,7 @@ SequenceViewerComponent.propTypes = {
   /**
    * Displays a highlight
    */
-  highlight: PropTypes.object,
+  highlight: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 
   /**
    * An array of features which can be clicked
@@ -529,7 +530,7 @@ SequenceViewerComponent.propTypes = {
    */
   overlayConservation: PropTypes.bool,
   onPositionUpdate: PropTypes.func,
-  sequenceDisableDragging: PropTypes.bool,
+  sequenceDisableDragging: PropTypes.bool
 };
 
 // hoist the list of accepted properties to the parent
@@ -538,7 +539,7 @@ SequenceViewerComponent.propKeys = Object.keys(
   SequenceViewerComponent.propTypes
 );
 
-const mapStateToProps = (state) => {
+const mapStateToProps = state => {
   // Fallback to a smaller size if the given area is too large
   const width = Math.min(
     state.props.width,
@@ -552,6 +553,7 @@ const mapStateToProps = (state) => {
     sequences: state.sequences,
     width,
     height,
+    highlight: state.props.highlight,
     tileWidth: state.props.tileWidth,
     tileHeight: state.props.tileHeight,
     colorScheme: state.props.colorScheme,
@@ -562,18 +564,18 @@ const mapStateToProps = (state) => {
     nrXTiles: state.sequenceStats.nrXTiles,
     nrYTiles: state.sequenceStats.nrYTiles,
     fullWidth: state.sequenceStats.fullWidth,
-    fullHeight: state.sequenceStats.fullHeight,
+    fullHeight: state.sequenceStats.fullHeight
   };
 };
 
 const SV = withPositionStore(SequenceViewerComponent, {
   withX: true,
-  withY: true,
+  withY: true
 });
 
 export default msaConnect(mapStateToProps)(SV);
 
 export {
   SequenceViewerComponent as SequenceViewer,
-  SV as SequenceViewerWithPosition,
+  SV as SequenceViewerWithPosition
 };