unipept-heatmap - npm Package Compare versions

Comparing version 2.0.0-beta.5 to 2.0.0-beta.6

package.json

 {
   "name": "unipept-heatmap",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.6",
   "description": "HeatMap built for the Unipept project. See http://unipept.ugent.be for more information. This HeatMap supports UPGMA-clustering and MOLO-reordering.",
@@ -5,0 +5,0 @@ "main": "dist/bundle.js",

readme.md

@@ -63,2 +63,7 @@ # Unipept heatmap
 
+#### `toSVG`
+Export the heatmap to SVG. This function produces a valid SVG-string that can directly be downloaded or rendered. Note
+that it can a significant time to perform this function for very large heatmaps. It's recommended to wrap this function
+in a Worker thread to avoid blocking the main UI-thread in that case.
+
 ### HeatmapValue
@@ -65,0 +70,0 @@ A HeatmapValue object represents one value (or one grid) in the heatmap. This interface keeps track of the decimal

src/heatmap/Heatmap.ts

@@ -15,2 +15,3 @@ import * as d3 from "d3";
 import "regenerator-runtime/runtime";
+import SVGOptions from "./../svg/SVGOptions";
 
@@ -272,2 +273,94 @@ type ViewPort = {
     /**
+     * Convert the heatmap to an SVG-string that can easily be downloaded as a valid SVG-file. Note that the current
+     * positioning and zooming level of the heatmap will not be taken into account (but clustering will!).
+     *
+     * Note that this function can take a while to compute for larger heatmaps. It is recommended to start this
+     * function in a dedicated worker in order not to block the main JS thread.
+     *
+     * @return A string that represents the content of a valid SVG file.
+     */
+    public toSVG(options: SVGOptions = new SVGOptions()): string {
+        const dimension = options.squareDimension;
+
+        let svgContents = "";
+
+        // First produce SVG-contents for all squares in the heatmap
+        for (const [color, values] of this.valuesPerColor) {
+            for (const [row, col] of values) {
+                const xTop = col * (dimension + options.squarePadding);
+                const yTop = row * (dimension + options.squarePadding);
+
+                svgContents += `
+                    <rect width="${dimension}" height="${dimension}" fill="${color}" x="${xTop}" y="${yTop}"></rect>
+                `
+            }
+        }
+
+        const offscreenCanvas = new OffscreenCanvas(1, 1);
+        const ctx = offscreenCanvas.getContext("2d");
+
+        ctx!.font = `${options.fontSize}px 'Helvetica Neue', Helvetica, Arial, sans-serif`;
+
+        // Then add the row and colum titles to the heatmap
+        const x = dimension * this.columns.length + options.squarePadding * (this.columns.length - 1) + options.visualizationTextPadding;
+        const textCenter = Math.max((dimension - options.fontSize) / 2, 0);
+
+        let maximumWidth: number = x;
+        for (let row = 0; row < this.rows.length; row++) {
+            const y = (dimension + options.squarePadding) * row + textCenter;
+
+            svgContents += `
+                <text 
+                    x="${x}" 
+                    y="${y}" 
+                    font-size="${options.fontSize}" 
+                    dominant-baseline="hanging" 
+                    fill="black"
+                    font-family="'Helvetica Neue', Helvetica, Arial, sans-serif"
+                >
+                    ${this.rows[row].name}
+                </text>
+            `;
+
+            // Compute the length of the label in pixels
+            const computedWidth: number = ctx!.measureText(this.rows[row].name).width + x;
+            if (computedWidth > maximumWidth) {
+                maximumWidth = computedWidth;
+            }
+        }
+
+        const y = dimension * this.rows.length + options.squarePadding * (this.rows.length - 1) + options.visualizationTextPadding;
+        let maximumHeight: number = y;
+
+        for (let col = 0; col < this.columns.length; col++) {
+            const x = (dimension + options.squarePadding) * col + textCenter;
+
+            svgContents += `
+                <text 
+                    x="${x}" 
+                    y="${y}" 
+                    font-size="${options.fontSize}" 
+                    text-anchor="start" 
+                    fill="black"
+                    transform="rotate(90, ${x}, ${y})"
+                    font-family="'Helvetica Neue', Helvetica, Arial, sans-serif"
+                >
+                    ${this.columns[col].name}
+                </text>
+            `;
+
+            const computedWidth: number = ctx!.measureText(this.columns[col].name).width + y;
+            if (computedWidth > maximumHeight) {
+                maximumHeight = computedWidth;
+            }
+        }
+
+        return `
+            <svg xmlns="http://www.w3.org/2000/svg" width="${Math.ceil(maximumWidth)}" height="${Math.ceil(maximumHeight)}">
+                ${svgContents}
+            </svg>
+        `;
+    }
+
+    /**
      * Extracts a linear order from a dendrogram by following all branches up to leaves in a depth-first ordering.
@@ -274,0 +367,0 @@ *

types/heatmap/Heatmap.d.ts

 import HeatmapSettings from "./HeatmapSettings";
+import HeatmapValue from "./HeatmapValue";
 import "core-js/stable";
 import "regenerator-runtime/runtime";
+import SVGOptions from "./../svg/SVGOptions";
 export default class Heatmap {
@@ -21,3 +23,3 @@ private element;
     private pixelRatio;
-    constructor(elementIdentifier: HTMLElement, values: number[][], rowLabels: string[], columnLabels: string[], options?: HeatmapSettings);
+    constructor(elementIdentifier: HTMLElement, values: (number | HeatmapValue)[][], rowLabels: string[], columnLabels: string[], options?: HeatmapSettings);
     private fillOptions;
@@ -37,2 +39,12 @@ /**
     /**
+     * Convert the heatmap to an SVG-string that can easily be downloaded as a valid SVG-file. Note that the current
+     * positioning and zooming level of the heatmap will not be taken into account (but clustering will!).
+     *
+     * Note that this function can take a while to compute for larger heatmaps. It is recommended to start this
+     * function in a dedicated worker in order not to block the main JS thread.
+     *
+     * @return A string that represents the content of a valid SVG file.
+     */
+    toSVG(options?: SVGOptions): string;
+    /**
      * Extracts a linear order from a dendrogram by following all branches up to leaves in a depth-first ordering.
@@ -39,0 +51,0 @@ *

types/heatmap/Preprocessor.d.ts

@@ -23,3 +23,3 @@ import HeatmapFeature from "./HeatmapFeature";
      */
-    preprocessValues(data: number[][], lowColor: string, highColor: string, colorValues: number): HeatmapValue[][];
+    preprocessValues(data: (number | HeatmapValue)[][], lowColor: string, highColor: string, colorValues: number): HeatmapValue[][];
     /**
@@ -26,0 +26,0 @@ * Order all values in a map, per color.

types/settings.d.ts

 export default abstract class Settings {
+    /**
+     * Total width of the visualization (in pixels).
+     */
     width: number;
+    /**
+     * Total height of the visualization (in pixels)
+     */
     height: number;
+    /**
+     * Are tooltips enabled when hovering the visualization?
+     */
     enableTooltips: boolean;
-    abstract className: string;
 }

types/transition/Transition.d.ts

@@ -20,3 +20,3 @@ export declare namespace Transition {
      */
-    function easeInOutElastic(x: number): number;
+    function easeInEaseOutElastic(x: number): number;
     /**
@@ -23,0 +23,0 @@ * See: https://easings.net/#easeInElastic

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

36752632

increased by0.09%

Number of package files

79

increased by3.95%

Lines of code

3163

increased by12.36%

Number of lines in readme file

168

increased by3.07%

No dependency changes