Fix dssp sheet bug, add input output for zoom event

projects/ngx-features-viewer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-features-viewer",
-  "version": "0.1.13",
+  "version": "0.1.15",
   "license": "MIT",
   "author": {
     "name": "Damiano Clementel",

projects/ngx-features-viewer/src/lib/ngx-features-viewer.component.ts

@@ -112,6 +112,16 @@ export class NgxFeaturesViewerComponent implements AfterViewInit, AfterContentIn
 
   @Input() public sequence!: Sequence;
 
+
+  @Input() public set zoomOnRegion(zoomRegion: [number, number] | undefined) {
+    // Check that the selected region is within the sequence
+    if (zoomRegion && zoomRegion[0] >= 1 && zoomRegion[1] <= this.sequence.length) {
+      const x = this.initializeService.scale.x;
+      zoomRegion = [zoomRegion[0] - .5, zoomRegion[1] + .5];
+      this.zoomService.brush$.next(zoomRegion.map(x) as [number, number]);
+    }
+  }
+
   @Output() public selectedFeature: Observable<SelectionContext | undefined> = this.drawService.selectedFeature$.pipe(
     // Adjust for the .5 offset
     map((context) => context ? {
@@ -123,6 +133,13 @@ export class NgxFeaturesViewerComponent implements AfterViewInit, AfterContentIn
     } : undefined),
   );
 
+  @Output() public zoomedAt: Observable<[number, number] | undefined> = this.zoomService.brush$.pipe(
+    map((range) => {
+      const x = this.initializeService.scale.x;
+      return range ? range.map(x.invert).map((v, i) => i == 0 ? v + 0.5 : v - 0.5).map(Math.round) as [number, number] : undefined;
+    }),
+  );
+
   private readonly sequence$ = this.drawService.sequence$;
 
   private update$: Observable<unknown>;

projects/ngx-features-viewer/src/lib/services/draw.service.ts

@@ -896,9 +896,9 @@ export class DrawService {
           const bitOccupancy = bitWidth / widthPerResidue;
 
           // Calculate the position in reverse order
-          const xPositions = Array.from({length : numBits}, (_, i) => startPoint + i * bitOccupancy);
+          const xPositions = Array.from({length : numBits}, (_, i) => startPoint + i * bitOccupancy).filter(x => x >= startPoint && x <= endPoint);
 
-          if (xPositions.length < 2) {
+          if (xPositions.length < 2 && xPositions.length > 0) {
             xPositions.push(endPoint);
           }
 
@@ -950,6 +950,14 @@ export class DrawService {
           }
 
           if (shapeToDraw == "sheet") {
+            if (endPoint < startPoint) {
+              // Set the feature to be outside the view
+              d3.select<d3.BaseType, DSSP>(this)
+                .selectAll<d3.BaseType, number>('polygon')
+                .attr("points", "");
+              return;
+            }
+
             // In the case of the sheet, we just want to draw an arrow, where the body is a rectangle, and the head is a triangle
             const arrowWidth = cs / 2;
             const sheetWidth = totalFeatureWidth - arrowWidth;