Fix trace update and tooltip position

BioComputingUP · Jul 29, 2024 · 21a5ca0 · 21a5ca0
1 parent fffff18
commit 21a5ca0
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 108 deletions.
diff --git a/projects/demo-showcase/src/app/page-features-viewer/page-features-viewer.component.html b/projects/demo-showcase/src/app/page-features-viewer/page-features-viewer.component.html
@@ -49,7 +49,7 @@ <h1>Feature viewer</h1>
         <!-- Tooltip template -->
         <ng-template let-trace="trace" let-feature="feature" let-index="index" let-coordinates="coordinates"
                      ngx-features-viewer-tooltip>
-          <div>
+          <div class="tooltipOuter">
             {{ feature.label }}
           </div>
 

diff --git a/projects/demo-showcase/src/app/page-features-viewer/page-features-viewer.component.scss b/projects/demo-showcase/src/app/page-features-viewer/page-features-viewer.component.scss
@@ -4,3 +4,18 @@ ngx-features-viewer {
     --locus-hover-outline: 2px outset #00ffa0;
     --locus-hover-border-radius: 4px;
 }
+
+.tooltipOuter {
+
+    border-style: solid;
+    border-width: 1px;
+    border-radius: 4px;
+    border-color: rgb(255, 255, 255);
+    white-space: nowrap;
+
+    box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;
+    background-color: rgb(255, 255, 255);
+    color: rgb(102, 102, 102);
+    font: 14px / 21px sans-serif;
+    padding: 10px;
+}
diff --git a/projects/demo-showcase/src/app/page-features-viewer/page-features-viewer.component.ts b/projects/demo-showcase/src/app/page-features-viewer/page-features-viewer.component.ts
@@ -56,7 +56,7 @@ export class PageFeaturesViewerComponent {
       'text-color' : 'black',
       // Define margins
       'margin-top' : 0,
-      'margin-right' : 0,
+      'margin-right' : 50,
       'margin-bottom' : 0,
       'margin-left' : 140,
       'sequence-show' : true,
@@ -77,7 +77,7 @@ export class PageFeaturesViewerComponent {
 
     // Set traces
     this.traces = [{
-      label : "Trace 1",
+      label : "Very long Trace 1",
       options : {
         "grid" : true,
         'margin-top' : 0,

diff --git a/projects/ngx-features-viewer/src/lib/ngx-features-viewer.component.html b/projects/ngx-features-viewer/src/lib/ngx-features-viewer.component.html
@@ -2,7 +2,7 @@
   <!-- Case template for left label exists -->
   @if (initializeService.labelLeft; as label) {
     <!-- Loop through each trace, generate custom tooltip -->
-    @for (trace of featuresService.tracesNoNesting; track trace) {
+    @for (trace of featuresService.tracesNoNesting; track trace.id) {
       <!-- Then, generate trace as specified in the given template -->
       <div [id]="'label-left-' + trace.id" tabindex=0 (click)="drawService.onLabelClick(trace)"
            (keyup)="drawService.onLabelClick(trace)" [style.display]="trace.show ? 'block' : 'none'">
@@ -14,7 +14,7 @@
   <!-- Case template for right label exists -->
   @if (initializeService.labelRight; as label) {
     <!-- Loop through each trace, generate custom tooltip -->
-    @for (trace of featuresService.tracesNoNesting; track trace) {
+    @for (trace of featuresService.tracesNoNesting; track trace.id) {
       <!-- Then, generate trace as specified in the given template -->
       <div [id]="'label-right-' + trace.id" tabindex=0 [style.display]="trace.show ? 'block' : 'none'">
         <ng-container [ngTemplateOutlet]="label.templateRef"

diff --git a/projects/ngx-features-viewer/src/lib/ngx-features-viewer.component.scss b/projects/ngx-features-viewer/src/lib/ngx-features-viewer.component.scss
@@ -70,28 +70,19 @@ text {
 
 
 .tooltip {
-    user-select: none;
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    margin: 0;
-    display: block;
-    position: fixed;
-    top: 0;
-    left: 0;
-    border-style: solid;
-    white-space: nowrap;
-    z-index: 9999999;
-    box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px;
-    transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
-    background-color: rgb(255, 255, 255);
-    border-width: 1px;
-    border-radius: 4px;
-    color: rgb(102, 102, 102);
-    font: 14px / 21px sans-serif;
-    padding: 10px;
-    transform: translate3d(0px, 0px, 0px);
-    border-color: rgb(255, 255, 255);
-    pointer-events: none;
-    opacity: 0;
-    visibility: hidden;
+  user-select: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  margin: 0;
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  white-space: nowrap;
+  z-index: 9999999;
+  transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s;
+  transform: translate3d(0px, 0px, 0px);
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
 }
 
diff --git a/projects/ngx-features-viewer/src/lib/ngx-features-viewer.component.ts b/projects/ngx-features-viewer/src/lib/ngx-features-viewer.component.ts
@@ -1,7 +1,7 @@
 import {
   AfterContentInit,
   AfterViewInit,
-  ChangeDetectionStrategy,
+  ChangeDetectionStrategy, ChangeDetectorRef,
   Component,
   ContentChild,
   ContentChildren,
@@ -16,7 +16,7 @@ import {
   SimpleChanges,
   TemplateRef,
   ViewChild,
-  ViewEncapsulation
+  ViewEncapsulation,
 } from '@angular/core';
 import { map, Observable, Subscription, switchMap, tap } from 'rxjs';
 import { CommonModule } from '@angular/common';
@@ -139,9 +139,9 @@ export class NgxFeaturesViewerComponent implements AfterViewInit, AfterContentIn
     public zoomService: ZoomService,
     public drawService: DrawService,
   ) {
-    // TODO Update SVG according to inputs
+    // Update SVG according to inputs
     this.update$ = this.initializeService.initialized$.pipe(
-      // TODO Initialize drawings
+      // Initialize drawings
       switchMap(() => this.drawService.draw$),
       // Subscribe to resize event (set width, height)
       switchMap(() => this.resizeService.resized$),

diff --git a/projects/ngx-features-viewer/src/lib/services/draw.service.ts b/projects/ngx-features-viewer/src/lib/services/draw.service.ts
@@ -31,12 +31,13 @@ export const REM = parseFloat(getComputedStyle(document.documentElement).fontSiz
 
 // Define function for extracting identifier out of unknown object
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const identity = (f: InternalTrace) => (f as { id: any }).id;
+export const identity = (f: InternalTrace) => {
+  return f.id;
+};
 
 // Define function for extracting index out of unknown object
 export const index = (f: InternalTraces) => {
-  console.log(f);
-  return f.length;
+  return f.map((t) => t.id).join('-');
 };
 
 const alreadyExitedFromView = new Set<Feature>();
@@ -111,14 +112,15 @@ export class DrawService {
       shareReplay(1),
       // Switch to traces emission
       switchMap(() => this.traces$),
+      tap(() => console.log("traces emitted")),
       // Update vertical scale
-      tap((traces) => this.updateScale(traces)),
+      tap((traces: InternalTraces) => this.updateScale(traces)),
       // Draw labels, without setting position but saving references
-      tap((traces) => this.createLabels(traces)),
+      tap((traces: InternalTraces) => this.setLabelsPosition(traces)),
       // Draw grid, without setting position but saving references
-      tap((traces) => this.createGrid(traces)),
+      tap((traces: InternalTraces) => this.createGrid(traces)),
       // Draw features, without setting position but saving references
-      tap((traces) => this.createTraces(traces)),
+      tap((traces: InternalTraces) => this.createTraces(traces)),
       // NOTE This is required to avoid re-drawing everything on each resize/zoom event
       shareReplay(1),
     );
@@ -379,66 +381,33 @@ export class DrawService {
       .attr('width', 0);
   }
 
-  private createLabels(traces: InternalTraces): void {
-    console.log('creating Labels')
-    // Initialize labels SVG group
-    const group = this.initializeService.svg
-      // Select previous labels group
-      .selectAll<SVGGElement, InternalTraces>('g.labels')
-      // Bind group to current traces
-      .data<InternalTraces>([traces], index)
-      // Create current labels group
-      .join('g')
-      .attr('class', 'labels');
-
-    // Add labels to their group
-    this['group.labels'] = group
-      .selectAll<SVGGElement | BaseType, InternalTrace>('g')
-      .data<InternalTrace>([{
-        id : 'sequence',
-        label : 'Sequence',
-        expanded : true,
-      }, ...traces] as InternalTraces, identity)
-      .join(
-        (enter) => enter.append('g'),
-        (update) => update,
-        (exit) => {
-          // Hide labels
-          exit.each((d) => {
-            this.hideLabels(d);
-          });
-          return exit;
-        },
-      )
-    this['group.labels'].each((trace: InternalTrace) => {
-      this.setLabelsPosition(trace);
-    });
-  }
-
-  private setLabelsPosition(trace: InternalTrace) {
+  private setLabelsPosition(traces: InternalTraces) {
     const y = this.initializeService.scale.y;
     const {left : ml, right : mr} = this.initializeService.margin;
-    const settings = this.initializeService.settings
-    // Get identifier trace
-    const identifier = '' + trace.id;
-    for (const place of ['left', 'right']) {
-      // Get associated trace
-      const label = this.initializeService.div.querySelector<HTMLDivElement>(`div#label-${place}-` + identifier);
-      // If label exists, update its positioning
-      if (label) {
-        label.classList.add('label');
-        if (place === 'left') {
-          // Position the label to the left
-          label.style.left = '0px';
-          label.style.width = `${ml}px`;
-        } else {
-          // Position the label to the right, ad add a "margin" left of 8 px to space the label from the traces
-          label.style.right = '0px';
-          label.style.width = `${mr}px`;
+    const settings = this.initializeService.settings;
+
+    for (const trace of traces) {
+      // Get identifier trace
+      const identifier = '' + trace.id;
+      for (const place of ['left', 'right']) {
+        // Get associated trace
+        const label = this.initializeService.div.querySelector<HTMLDivElement>(`div#label-${place}-` + identifier);
+        // If label exists, update its positioning
+        if (label) {
+          label.classList.add('label');
+          if (place === 'left') {
+            // Position the label to the left
+            label.style.left = '0px';
+            label.style.width = `${ml}px`;
+          } else {
+            // Position the label to the right, ad add a "margin" left of 8 px to space the label from the traces
+            label.style.right = '0px';
+            label.style.width = `${mr}px`;
+          }
+          label.style.top = y(identifier) + 'px';
+          label.style.display = 'block';
+          label.style.height = (trace.options?.['line-height'] || settings['line-height']) + 'px';
         }
-        label.style.top = y(identifier) + 'px';
-        label.style.display = 'block';
-        label.style.height = (trace.options?.['line-height'] || settings['line-height']) + 'px';
       }
     }
   }

diff --git a/projects/ngx-features-viewer/src/lib/services/features.service.ts b/projects/ngx-features-viewer/src/lib/services/features.service.ts
@@ -1,13 +1,13 @@
 import { Injectable } from '@angular/core';
-import { ContentSettings } from '../settings';
-import { InternalTrace, InternalTraces, Trace, Traces } from "../trace";
 import { Feature } from "../features/feature";
+import { InternalTrace, InternalTraces, Trace, Traces } from "../trace";
 import { checkContentSettings } from './initialize.service';
 
 
-@Injectable({ providedIn: 'platform' })
+@Injectable({providedIn : 'platform'})
 export class FeaturesService {
   protected traceMap = new Map<number, InternalTrace>();
+  public tracesNoNesting!: InternalTraces;
   protected internalTraces!: InternalTraces;
 
   protected _parent = new Map<InternalTrace, number>();
@@ -59,11 +59,11 @@ export class FeaturesService {
         // Initialize internal trace
         const internalTrace: InternalTrace = {
           ...tmpTrace,
-          id: idx++,
-          expanded: false,
-          show: level === 0,
-          domain: domain,
-          level
+          id : idx++,
+          expanded : false,
+          show : level === 0,
+          domain : domain,
+          level,
         };
 
         this.traceMap.set(internalTrace.id, internalTrace);
@@ -86,16 +86,13 @@ export class FeaturesService {
     }
     // Set internal traces
     this.internalTraces = convert(traces, 0);
+    this.tracesNoNesting = Array.from(this.traceMap.values());
   }
 
   public get traces(): InternalTraces {
     return this.internalTraces;
   }
 
-  public get tracesNoNesting(): InternalTraces {
-    return Array.from(this.traceMap.values());
-  }
-
   /**
    * Get all the features in the traces, setting the key as `trace-${trace.id}-feature-${index}`
    * @returns (Map<string, Feature>) - The features map