Fix: reformat long seqs

public/js/kablammo.js

@@ -41,7 +41,7 @@ class Graph {
     constructor($svgContainer, props) {
         this._zoom_scale_by = 1.4;
         this._padding_x = 12;
-        this._padding_y = 50;
+        this._padding_y = 55;
 
         this._canvas_height = $svgContainer.height();
         this._canvas_width = $svgContainer.width();

public/js/length_distribution.js

@@ -96,19 +96,19 @@ class Graph {
     }
 
     tick_formatter(seq_type) {
-        var ticks = this._scale_x.ticks();
-        var prefix = d3.format('~s');
-        var suffixes = {amino_acid: 'aa', nucleic_acid: 'bp'};
-        return function (d) {
-            if (d === 0) { return ; }
-            if (_.indexOf(ticks,d) >= 0) {
-                if (suffixes[seq_type] == 'aa') {
-                    return `${d} ${suffixes[seq_type]}`;
-                } else {
-                    return `${prefix(d)}${suffixes[seq_type]}`.replace(/([a-zA-Z]+)/, ' $1');
-                }
+        const ticks = this._scale_x.ticks();
+        const prefix = d3.format('~s');
+        const suffixes = { amino_acid: 'aa', nucleic_acid: 'bp' };
+
+        return (d) => {
+            if (d === 0 || !ticks.includes(d)) return;
+
+            if (suffixes[seq_type] === 'aa') {
+                return `${d} ${suffixes[seq_type]}`;
             } else {
-                return ;
+                const formatted = prefix(d);
+
+                return `${Helpers.formatNumberUnits(formatted)}${suffixes[seq_type]}`;
             }
         };
     }

public/js/tests/visualisation_helpers.spec.js

@@ -0,0 +1,28 @@
+// Import the necessary functions
+import { tick_formatter, formatNumberUnits } from '../visualisation_helpers';
+
+describe('tick_formatter', () => {
+    test('formats tick for amino_acid sequence', () => {
+        const formatter = tick_formatter(null, 'amino_acid');
+        expect(formatter(1_000)).toBe('1 kaa');
+        expect(formatter(25_286_936)).toBe('25.2 Maa');
+    });
+
+    test('formats tick for nucleic_acid sequence', () => {
+        const formatter = tick_formatter(null, 'nucleic_acid');
+        expect(formatter(1_000)).toBe('1 kbp');
+        expect(formatter(25_965_000)).toBe('26 Mbp');
+    });
+});
+
+describe('formatNumberUnits', () => {
+    test('formats number with units correctly', () => {
+        expect(formatNumberUnits('1.9k')).toBe('1.9 k');
+        expect(formatNumberUnits('1.5k', 0.5)).toBe('2 k');
+    });
+
+    test('rounds up correctly based on threshold', () => {
+        expect(formatNumberUnits('2.95k')).toBe('3 k');
+        expect(formatNumberUnits('2.94k')).toBe('2.9 k');
+    });
+});

public/js/visualisation_helpers.js

@@ -31,22 +31,45 @@ export function getPrefix(str) {
 }
 
 /**
- * Defines how ticks will be formatted.
+* Defines how ticks will be formatted.
  *
  * Examples: 200 aa, 2.4 kbp, 7.6 Mbp.
  *
  * Borrowed from Kablammo. Modified by Priyam based on https://github.com/mbostock/d3/issues/1722.
  */
 export function tick_formatter(scale, seq_type) {
-    var prefix = d3.format('~s')
-    var suffixes = {amino_acid: 'aa', nucleic_acid: 'bp'};
+    const prefix = d3.format('~s')
+    const suffixes = {amino_acid: 'aa', nucleic_acid: 'bp'};
 
     return function (d) {
-        return `${prefix(d)}${suffixes[seq_type]}`
-            .replace(/([a-zA-Z]+)/, ' $1')
+        const formatted = prefix(d);
+
+        return `${formatNumberUnits(formatted)}${suffixes[seq_type]}`;
     };
 }
 
+function extractSuffix(str) {
+    const suffix = str.replace(/[0-9.]/g, '');
+    const numericPart = d3.format('.2f')(parseFloat(str));
+
+    return [parseFloat(numericPart), suffix];
+}
+
+export function formatNumberUnits(number, threshold = 0.95) {
+    const [numericPart, suffix] = extractSuffix(number);
+    const integerPart = Math.floor(numericPart);
+    const fractionalPart = parseFloat((numericPart - integerPart).toFixed(2));
+
+    // when fractionalPart more than the threshold round up
+    // example:
+    //  threshold 0.95
+    //  2.95 -> 3
+    //  2.94 -> 2.9
+    const formatted = fractionalPart >= threshold ? integerPart + 1 : Math.floor(numericPart * 10) / 10;
+
+    return `${formatted} ${suffix}`;
+}
+
 export function get_seq_type(algorithm) {
     var SEQ_TYPES = {
         blastn: {