Merge branch 'ngx-features-viewer'

.gitignore

@@ -41,3 +41,5 @@ testem.log
 .DS_Store
 Thumbs.db
 .nx/
+
+.vscode/

.nvmrc

@@ -1 +1 @@
-v20.14.0
+20

angular.json

@@ -145,7 +145,9 @@
               "zone.js",
               "zone.js/testing"
             ],
-            "assets": ["projects/ngx-structure-viewer/src/assets"]
+            "assets": [
+              "projects/ngx-structure-viewer/src/assets"
+            ]
           }
         },
         "lint": {

package.json

@@ -28,6 +28,7 @@
     "react-dom": "^18.3.1",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.3",
+    "uuid": "^10.0.0",
     "zone.js": "~0.14.7"
   },
   "devDependencies": {
@@ -40,7 +41,9 @@
     "@angular/cli": "^17.3.8",
     "@angular/compiler-cli": "^17.3.11",
     "@types/jasmine": "~5.1.4",
+    "@types/node": "^20.14.10",
     "@types/react-dom": "^18.3.0",
+    "@types/uuid": "^10.0.0",
     "@typescript-eslint/eslint-plugin": "6.21.0",
     "@typescript-eslint/parser": "6.21.0",
     "engine.io": "^6.5.5",
@@ -53,6 +56,7 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "ng-packagr": "^17.3.0",
     "socket.io-adapter": "^2.5.5",
+    "typedoc": "^0.25.13",
     "typescript": "~5.4.5",
     "webpack-dev-server": "^5.0.4"
   }

projects/demo-showcase/src/app/app.component.html

@@ -29,9 +29,14 @@ <h1 class="h2 text-white m-0">ngx-biocomp-up</h1>
       <img src="assets/biocomp-white.png" alt="BioComputing UP" height="36">
     </div>
     <!-- Center: my own GitHub -->
-    <div class="col-6 d-flex align-items-center justify-content-center">
-      <a class="text-light small" href="https://github.com/damiclem">
-        Developed by Damiano Clementel <i class="bi bi-github"></i>
+    <div class="col-6 d-flex align-items-center justify-content-center text-white">
+      Developed by
+      <a class="text-light small mx-2" href="https://github.com/damiclem">
+        Damiano Clementel <i class="bi bi-github"></i>
+      </a>
+      &
+      <a class="text-light small mx-2" href="https://github.com/alessiodelconte">
+        Alessio Del Conte <i class="bi bi-github"></i>
       </a>
     </div>
     <!-- Right side: UniPD -->

projects/demo-showcase/src/app/page-features-viewer/page-features-viewer.component.html

@@ -1,82 +1,54 @@
 <div class="container pt-3">
-    <!-- Section: introduction -->
-    <div class="mb-3">
-        <h1>Feature viewer</h1>
-        <p>
-            The feature viewer allows you to represent features on a reference seqeunce...
-        </p>
-    </div>
-    <!-- Section: example -->
-    <div class="d-flex flex-row gap-3 mb-3">
-        <!-- TODO Remove this -->
-        <div style="display: block; width: 1rem; height: 1rem; background: black; font-size: 1rem; line-height: 1rem;">
+  <!-- Section: introduction -->
+  <div class="mb-3">
+    <h1>Feature viewer</h1>
+    <p>
+      The feature viewer allows you to represent features on a reference seqeunce...
+    </p>
+  </div>
+
+  <div style="display: block; height: auto; overflow: hidden; width: 100%;">
+    <ngx-features-viewer [sequence]="sequence" [traces]="traces" [settings]="(settings$ | async)!"
+                         (selectedFeature)="onFeatureSelected($event)">
+      <!-- Left label -->
+      <ng-template let-trace="trace" ngx-features-viewer-label>
+        <div class="d-flex h-100 w-100 justify-content-start pe-0 align-items-center font-monospace">
+          <div [class.text-muted]="trace.nested?.length > 0 && !trace.expanded">
+            {{ '&nbsp;'.repeat(trace.level) }}{{ trace.label }}
+            @if (trace.nested?.length > 0) {
+              <!-- Add symbol if expanded -->
+              @if (trace.expanded) {
+                <i class="bi bi-caret-down-fill"></i>
+              } @else {
+                <i class="bi bi-caret-right"></i>
+              }
+            }
+          </div>
         </div>
-        <div
-            style="display: block; width: 1rem; height: auto; background: black; color: white; font-size: 1rem; line-height: .5rem;">
-            W</div>
-        <div
-            style="display: block; width: auto; height: 1rem; background: black; color: white; font-size: 1rem; line-height: 1rem;">
-            W</div>
-    </div>
-    <!-- TODO Remove this -->
-    <div class="d-block mb-3">
-        <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras congue velit in sem sodales pretium. Vivamus
-            sit amet enim malesuada, efficitur quam quis, semper metus. Aenean commodo tellus eu viverra lacinia. Nam
-            sed lectus non tellus suscipit pellentesque. Class aptent taciti sociosqu ad litora torquent per conubia
-            nostra, per inceptos himenaeos. Suspendisse lacus diam, laoreet eget nisl et, dictum dictum elit. Vivamus
-            sit amet fringilla elit, vitae pulvinar nisl. Donec mattis magna lacus, id congue risus aliquet a.
-        </p>
-        <p>
-            Cras nec malesuada risus. Integer a tincidunt ante. Vivamus eu mauris placerat, dictum diam vitae, laoreet
-            eros. Integer porttitor neque vel lectus ullamcorper commodo. Aliquam erat volutpat. Morbi convallis
-            fermentum mauris, quis aliquet tellus posuere non. Nunc aliquet mattis tellus et ultrices.
-        </p>
-    </div>
-    <!-- Show output -->
-    <div style="display: block; height: auto; width: 100%;">
-        <ngx-features-viewer [sequence]="sequence" [features]="features" [settings]="settings">
-            <!-- Left label -->
-            <ng-template let-trace="trace" ngx-features-viewer-label>
-                <div [class.text-muted]="!trace.expanded">
-                    {{ trace.label }}&nbsp;
-                    <!-- Add symbol if expanded -->
-                    @if (trace.expanded) {
-                    <i class="bi bi-caret-down-fill"></i>
-                    } @else {
-                    <i class="bi bi-caret-right"></i>
-                    }
-                </div>
-            </ng-template>
-            <!-- Right label -->
-            <ng-template let-trace="trace" ngx-features-viewer-label="right">
-                <div [class.text-muted]="!trace.expanded">
-                    Right label!
-                </div>
-            </ng-template>
-        </ngx-features-viewer>
-    </div>
-    <!-- TODO Remove this -->
-    <div>
-        <p>
-            Morbi convallis ipsum sit amet felis faucibus mollis. Duis nec viverra nisl, nec maximus nisl. Proin non
-            malesuada massa, sit amet auctor elit. Sed condimentum, urna id commodo semper, nisi lorem lobortis velit,
-            eu
-            auctor ante magna eu nibh. Aliquam mattis pulvinar sapien vitae rhoncus. Sed lacinia ex a ultrices finibus.
-            Phasellus eu erat eu sapien laoreet dapibus ac vitae mauris.
-        </p>
-        <p>
-            Vestibulum elementum sem vel lorem suscipit varius. Mauris malesuada porta sapien blandit facilisis. Aliquam
-            pretium erat nec lorem molestie, et feugiat turpis semper. Donec tempus posuere nibh, maximus hendrerit odio
-            eleifend vitae. Praesent consequat felis leo, at ullamcorper nisl dictum sed. Morbi erat dui, sollicitudin
-            id
-            interdum convallis, elementum laoreet lorem. Duis leo massa, commodo id tempor sed, semper ut dui. Proin
-            faucibus feugiat sapien, et cursus nunc. Duis eu mattis ipsum, ac facilisis quam. Donec a sapien non lectus
-            iaculis luctus. Nulla lobortis turpis id nisi consectetur aliquet. Aliquam dignissim aliquam erat, at
-            egestas
-            nulla ullamcorper a. Duis porta interdum venenatis. Praesent a lorem at velit egestas efficitur eu et
-            lectus.
-            Suspendisse potenti. Duis imperdiet aliquam hendrerit.
-        </p>
-    </div>
+      </ng-template>
+      <!-- Right label -->
+      <ng-template let-trace="trace" ngx-features-viewer-label where="right">
+        <div class="d-flex h-100 w-100 justify-content-center align-items-center font-monospace">
+          <button class="btn btn-sm btn-primary" (click)="onTraceButtonClick(trace)">Trace {{ trace.id }}</button>
+        </div>
+      </ng-template>
+      <!-- Tooltip template -->
+      <ng-template let-trace="trace" let-feature="feature" let-index="index" let-coordinates="coordinates"
+                   ngx-features-viewer-tooltip>
+        <div class="tooltipOuter">
+          {{ feature.label }}
+        </div>
+
+        <!--          <ngx-features-viewer [sequence]="sequence" [settings]="settings.inner" [traces]="[trace]">-->
+        <!--            &lt;!&ndash; Define simple label left &ndash;&gt;-->
+        <!--            <ng-template let-trace="trace" ngx-features-viewer-label>-->
+        <!--              <div class="d-flex h-100 w-100 justify-content-start pe-0 align-items-center font-monospace">-->
+        <!--                {{ trace.label }}-->
+        <!--              </div>-->
+        <!--            </ng-template>-->
+        <!--          </ngx-features-viewer>-->
+      </ng-template>
+    </ngx-features-viewer>
+  </div>
+  <!--  </div>-->
 </div>

projects/demo-showcase/src/app/page-features-viewer/page-features-viewer.component.scss

@@ -1 +1,20 @@
+ngx-features-viewer {
+    --feature-cursor: pointer;
+    --overlay-cursor: col-resize;
+    --feature-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;
+}