@nightingale-elements/nightingale-track - npm Package Compare versions

Comparing version 5.0.0 to 5.1.0

dist/config.d.ts

@@ -289,2 +289,16 @@ export declare const config: {
     };
+    PTM: {
+        name: string;
+        label: string;
+        tooltip: string;
+        shape: string;
+        color: string;
+    };
+    EPITOPE: {
+        name: string;
+        label: string;
+        tooltip: string;
+        shape: string;
+        color: string;
+    };
     ANTIGEN: {
@@ -291,0 +305,0 @@ name: string;

dist/nightingale-track.d.ts

@@ -13,2 +13,24 @@ import { Selection } from "d3";
 };
+type PTM = {
+    name: string;
+    position: number;
+    sources: string[];
+    dbReferences: DBReference[];
+};
+type DBReference = {
+    id: string;
+    properties: Properties;
+};
+type Properties = {
+    "Pubmed ID": string;
+    "PSM Score": string;
+    "Dataset ID": string;
+    "Site q value": string;
+    "Universal Spectrum Id": string;
+    "PSM Count (0.05 gFLR)": string;
+    "Confidence score": "Gold" | "Silver" | "Bronze";
+    "Final site probability": string;
+    "Organism part": string;
+    Proforma: string;
+};
 export type Feature = {
@@ -26,2 +48,3 @@ accession: string;
     opacity?: number;
+    ptms?: Array<PTM>;
 };
@@ -28,0 +51,0 @@ declare const NightingaleTrack_base: import("@nightingale-elements/nightingale-new-core/dist/nightingale-base-element").Constructor<import("@nightingale-elements/nightingale-new-core/dist/mixins/withZoom").WithZoomInterface> & import("@nightingale-elements/nightingale-new-core/dist/nightingale-base-element").Constructor<import("@nightingale-elements/nightingale-new-core/dist/mixins/withResizable").WithResizableInterface> & import("@nightingale-elements/nightingale-new-core/dist/nightingale-base-element").Constructor<import("@nightingale-elements/nightingale-new-core/dist/mixins/withMargin").withMarginInterface> & import("@nightingale-elements/nightingale-new-core/dist/nightingale-base-element").Constructor<import("@nightingale-elements/nightingale-new-core/dist/mixins/withPosition").withPositionInterface> & import("@nightingale-elements/nightingale-new-core/dist/nightingale-base-element").Constructor<import("@nightingale-elements/nightingale-new-core/dist/mixins/withDimensions").WithDimensionsInterface> & import("@nightingale-elements/nightingale-new-core/dist/nightingale-base-element").Constructor<import("@nightingale-elements/nightingale-new-core/dist/mixins/withHighlight").WithHighlightInterface> & typeof NightingaleElement;

package.json

 {
   "name": "@nightingale-elements/nightingale-track",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Basic track type of the viewer.",
@@ -36,7 +36,7 @@ "files": [
   "dependencies": {
-    "@nightingale-elements/nightingale-new-core": "^5.0.0",
+    "@nightingale-elements/nightingale-new-core": "^5.1.0",
     "d3": "7.9.0",
     "lodash-es": "^4.17.15"
   },
-  "gitHead": "035f8c7fb65d0ce6836052ac6fdf494f3f11df36"
+  "gitHead": "890c670e7492ca599f74a03e18aa62c1575699be"
 }

src/config.ts

@@ -308,2 +308,16 @@ export const config = {
   },
+  PTM: {
+    name: "ptm",
+    label: "PTM residue",
+    tooltip: "",
+    shape: "rectangle",
+    color: "#06038D",
+  },
+  EPITOPE: {
+    name: "epitope",
+    label: "Epitopes",
+    tooltip: "",
+    shape: "rectangle",
+    color: "#4ade33",
+  },
   ANTIGEN: {
@@ -310,0 +324,0 @@ name: "antigen",

src/nightingale-track.ts

@@ -33,2 +33,28 @@ import { select, Selection } from "d3";
 };
+
+type PTM = {
+  name: string;
+  position: number;
+  sources: string[];
+  dbReferences: DBReference[];
+};
+
+type DBReference = {
+  id: string;
+  properties: Properties;
+};
+
+type Properties = {
+  "Pubmed ID": string;
+  "PSM Score": string;
+  "Dataset ID": string;
+  "Site q value": string;
+  "Universal Spectrum Id": string;
+  "PSM Count (0.05 gFLR)": string;
+  "Confidence score": "Gold" | "Silver" | "Bronze";
+  "Final site probability": string;
+  "Organism part": string;
+  Proforma: string;
+};
+
 export type Feature = {
@@ -46,2 +72,3 @@ accession: string;
   opacity?: number;
+  ptms?: Array<PTM>;
 };
@@ -57,6 +84,6 @@
       withMargin(
-        withPosition(withDimensions(withHighlight(NightingaleElement))),
-      ),
-    ),
-  ),
+        withPosition(withDimensions(withHighlight(NightingaleElement)))
+      )
+    )
+  )
 ) {
@@ -167,3 +194,3 @@ @property({ type: String })
     oldValue: string | null,
-    newValue: string | null,
+    newValue: string | null
   ): void {
@@ -181,2 +208,16 @@ super.attributeChangedCallback(name, oldValue, newValue);
 
+  #getPTMResidueShape(f: PTM & { feature: Feature; position: number }) {
+    let ptmLength = 1;
+    // For longer proteins, the PTMs have to be shown prominent in the first look
+    if (this.length && this.length > 500) {
+      ptmLength = this.getSingleBaseWidth() < 4 ? 4 : 1;
+    }
+    return this.featureShape.getFeatureShape(
+      this.getSingleBaseWidth() / 2, // Halve the width of the ptm residue to distinguish between each other if one follows next closely
+      this.layoutObj?.getFeatureHeight(f) || 0,
+      ptmLength,
+      this.getShape(f)
+    );
+  }
+
   protected getFeatureColor(f: Feature | { feature: Feature }): string {
@@ -229,3 +270,3 @@ const defaultColor = "gray";
       return getShapeByType(
-        (f as { feature: Feature }).feature.type as string,
+        (f as { feature: Feature }).feature.type as string
       ) as Shapes;
@@ -270,4 +311,4 @@ }
             feature: d,
-          }),
-        ),
+          })
+        )
       )
@@ -284,4 +325,4 @@ .enter()
             feature: d.feature,
-          }),
-        ),
+          })
+        )
       )
@@ -300,4 +341,4 @@ .enter()
           f.end ? f.end - f.start + 1 : 1,
-          this.getShape(f),
-        ),
+          this.getShape(f)
+        )
       )
@@ -309,3 +350,3 @@ .attr(
             this.layoutObj?.getFeatureYPos(f.feature) || 0
-          })`,
+          })`
       )
@@ -315,8 +356,26 @@ .style("fill", (f) => this.getFeatureFillColor(f))
       .style("fill-opacity", ({ feature }) =>
-        feature.opacity ? feature.opacity : 0.9,
+        feature.opacity ? feature.opacity : 0.9
       )
       .style("stroke-opacity", ({ feature }) =>
-        feature.opacity ? feature.opacity : 0.9,
+        feature.opacity ? feature.opacity : 0.9
       );
 
+    const residueGroup = fragmentGroup
+      .selectAll("g.residue-group")
+      .data((d) =>
+        d.feature.ptms
+          ? [
+              d.feature.ptms?.map((ptm) =>
+                Object.assign({}, ptm, {
+                  feature: d.feature,
+                  position: ptm.position,
+                })
+              ),
+            ]
+          : []
+      )
+      .enter()
+      .append("g")
+      .attr("class", "residue-group");
+
     fragmentGroup
@@ -328,4 +387,4 @@ .append("rect")
           0,
-          this.getSingleBaseWidth() * (f.end ? f.end - f.start + 1 : 1),
-        ),
+          this.getSingleBaseWidth() * (f.end ? f.end - f.start + 1 : 1)
+        )
       )
@@ -338,3 +397,3 @@ .attr("height", this.layoutObj?.getFeatureHeight() || 0)
             this.layoutObj?.getFeatureYPos(f.feature) || 0
-          })`,
+          })`
       )
@@ -344,2 +403,30 @@ .style("fill", "transparent")
       .call(bindEvents, this);
+
+    residueGroup
+      .selectAll("g.residue")
+      .data((d) => d)
+      .enter()
+      .append("path")
+      .attr("class", (f) => `${this.getShape(f)} residue`)
+      .attr("d", (f) => this.#getPTMResidueShape(f))
+      .attr(
+        "transform",
+        (f) =>
+          // It is placed in the middle of a single bandwidth
+          `translate(${
+            this.getXFromSeqPosition(
+              Number(f.feature.start) + Number(f.position) - 1
+            ) +
+            this.getSingleBaseWidth() / 4
+          },
+          ${this.layoutObj?.getFeatureYPos(f.feature)})`
+      )
+      .attr("fill", getColorByType("PTM"))
+      .style("fill-opacity", ({ feature }) =>
+        feature.opacity ? feature.opacity : 0.9
+      )
+      .style("stroke-opacity", ({ feature }) => {
+        return feature.opacity ? feature.opacity : 0.9;
+      })
+      .call(bindEvents, this);
   }
@@ -377,12 +464,31 @@
                         feature: f,
-                      }),
-                    ),
+                      })
+                    )
                   ),
-                [],
-              ),
+                []
+              )
             ),
-          [],
-        ),
+          []
+        )
       );
 
+      const residueG = this.seqG.selectAll("g.residue-group").data(
+        this.#data.reduce(
+          (featureAcc: unknown[], f) =>
+            featureAcc.concat([
+              f.ptms?.reduce(
+                (ptmAcc: unknown[]) =>
+                  ptmAcc.concat((ptm: PTM) =>
+                    Object.assign({}, ptm, {
+                      feature: f,
+                      position: ptm.position,
+                    })
+                  ),
+                []
+              ),
+            ]),
+          []
+        )
+      );
+
       fragmentG
@@ -395,4 +501,4 @@ .selectAll<SVGPathElement, Feature>("path.feature")
             f?.end && f?.start ? f.end - f.start + 1 : 1,
-            this.getShape(f),
-          ),
+            this.getShape(f)
+          )
         )
@@ -403,6 +509,20 @@ .attr(
             `translate(${this.getXFromSeqPosition(
-              f.start || 0,
-            )},${this.layoutObj?.getFeatureYPos(f.feature as Feature)})`,
+              f.start || 0
+            )},${this.layoutObj?.getFeatureYPos(f.feature as Feature)})`
         );
 
+      residueG
+        .selectAll<SVGPathElement, PTM & { feature: Feature; position: number; }>("path.residue")
+        .attr("d", (f) => this.#getPTMResidueShape(f))
+        .attr(
+          "transform",
+          (f) =>
+            `translate(${
+              this.getXFromSeqPosition(
+                Number(f.feature?.start) + Number(f.position) - 1
+              ) +
+              this.getSingleBaseWidth() / 4
+            },${this.layoutObj?.getFeatureYPos(f.feature as Feature)})`
+        );
+
       fragmentG
@@ -414,4 +534,4 @@ .selectAll<SVGRectElement, Feature>("rect.outer-rectangle")
             this.getSingleBaseWidth() *
-              (f?.end && f?.start ? f.end - f.start + 1 : 1),
-          ),
+              (f?.end && f?.start ? f.end - f.start + 1 : 1)
+          )
         )
@@ -424,3 +544,3 @@ .attr("height", this.layoutObj?.getFeatureHeight() || 0)
               this.layoutObj?.getFeatureYPos(f.feature as Feature) || 0
-            })`,
+            })`
         );
@@ -435,3 +555,3 @@ }
     if (!this.#highlighted) return;
-    const highlighs = this.#highlighted
+    const highlights = this.#highlighted
       .selectAll<
@@ -446,7 +566,7 @@ SVGRectElement,
 
-    highlighs
+    highlights
       .enter()
       .append("rect")
       .style("pointer-events", "none")
-      .merge(highlighs)
+      .merge(highlights)
       .attr("fill", this["highlight-color"])
@@ -456,6 +576,6 @@ .attr("height", this.height)
       .attr("width", (d) =>
-        Math.max(0, this.getSingleBaseWidth() * (d.end - d.start + 1)),
+        Math.max(0, this.getSingleBaseWidth() * (d.end - d.start + 1))
       );
 
-    highlighs.exit().remove();
+    highlights.exit().remove();
   }
@@ -462,0 +582,0 @@

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

459610

increased by2.85%

Lines of code

2147

increased by8.6%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@nightingale-elements/nightingale-new-core@^5.1.0