Fix: update logic and add spec

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

@@ -107,9 +107,8 @@ class Graph {
                 return `${d} ${suffixes[seq_type]}`;
             } else {
                 const formatted = prefix(d);
-                const numericPart = Math.floor(parseFloat(formatted));
-                const suffix = formatted.replace(/[0-9.]/g, '');
-                return `${numericPart} ${suffix}${suffixes[seq_type]}`;
+
+                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,7 +31,7 @@ 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.
  *
@@ -43,13 +43,33 @@ export function tick_formatter(scale, seq_type) {
 
     return function (d) {
         const formatted = prefix(d);
-        const numericPart = Math.floor(parseFloat(formatted));
-        const suffix = formatted.replace(/[0-9.]/g, '');
 
-        return `${numericPart} ${suffix}${suffixes[seq_type]}`;
+        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: {