Merge branch 'develop' into AG978-zero-scores-showing-as-data-unavail…

…able

src/app/core/components/footer/footer.component.html

@@ -95,13 +95,7 @@
     </ul>
   </div>
   <div class="footer-metas">
-    <div>
-      Site Version
-      <div class="site-version">{{ getVersion() }}</div>
-    </div>
-    <div>
-      Data Version
-      <div class="data-version">{{ getVersion(true) }}</div>
-    </div>
+    <div class="site-version">Site Version {{ getVersion() }}</div>
+    <div class="data-version">Data Version {{ getVersion(true) }}</div>
   </div>
 </div>

src/app/core/components/footer/footer.component.scss

@@ -6,23 +6,14 @@
 #footer {
   box-sizing: border-box;
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
   background-color: var(--color-primary);
   font-weight: 300;
-  height: 100px;
   padding: var(--spacing-sm);
 
-  @include respond-to('small') {
-    height: var(--footer-height);
-    padding: var(--spacing-xl);
-    justify-content: space-between;
-  }
-
   .footer-nav {
-    width: 100%;
-
     ul {
       display: flex;
       align-items: center;
@@ -42,10 +33,6 @@
         @include respond-to('small') {
           display: block;
         }
-
-        @include respond-to('medium') {
-          margin-right: var(--spacing-lg);
-        }
       }
 
       li {
@@ -75,19 +62,29 @@
   }
 
   .footer-metas {
-    display: none;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: stretch;
+
+    @include respond-to('ex-small') {
+      margin: 10px 0;
+    }
 
     @include respond-to('small') {
-      display: flex;
+      margin: 10px 0;
     }
 
     div {
-      display: inline-flex;
-      flex-direction: column;
+      display: flex;
+      flex-direction: row;
       gap: var(--spacing-sm);
       font-size: var(--font-size-xs);
       color: var(--color-gray-100);
-      width: 144px;
+    }
+
+    .site-version {
+      margin-right: 50px;
     }
   }
 }

src/app/core/services/helper.service.spec.ts

@@ -48,11 +48,51 @@ describe('Service: Helper', () => {
     expect(res).toEqual({ top: 0, left: 0 });
   });
 
-  it('should truncate number to fixed', () => {
-    const res = helperService.truncateNumberToFixed(0.123, 2);
+  it('should round 0.123 to 0.12', () => {
+    const res = helperService.roundNumber(0.123, 2);
     expect(res).toEqual('0.12');
   });
 
+  it('should round 1.96897662132087 to 1.97', () => {
+    const res = helperService.roundNumber(1.96897662132087, 2);
+    expect(res).toEqual('1.97');
+  });
+
+  it('should round 0.1 to 0.10', () => {
+    const res = helperService.roundNumber(0.1, 2);
+    expect(res).toEqual('0.10');
+  });
+
+  it('should round 1.015 to 1.02', () => {
+    const res = helperService.roundNumber(1.015, 2);
+    expect(res).toEqual('1.02');
+  });
+
+  it('should round 4.015 to 4.02', () => {
+    const res = helperService.roundNumber(4.015, 2);
+    expect(res).toEqual('4.02');
+  });
+
+  it('should round 5.015 to 5.02', () => {
+    const res = helperService.roundNumber(5.015, 2);
+    expect(res).toEqual('5.02');
+  });
+
+  it('should round 6.015 to 6.02', () => {
+    const res = helperService.roundNumber(6.015, 2);
+    expect(res).toEqual('6.02');
+  });
+
+  it('should round 7.015 to 7.02', () => {
+    const res = helperService.roundNumber(7.015, 2);
+    expect(res).toEqual('7.02');
+  });
+
+  it('should round 128.015 to 128.02', () => {
+    const res = helperService.roundNumber(128.015, 2);
+    expect(res).toEqual('128.02');
+  });
+
   it('should get significant figures', () => {
     const res = helperService.getSignificantFigures(0.123, 2);
     expect(res).toEqual(0.12);

src/app/core/services/helper.service.ts

@@ -2,6 +2,7 @@
 // External
 // -------------------------------------------------------------------------- //
 import { Injectable, Output, EventEmitter } from '@angular/core';
+import { round } from 'lodash';
 
 // -------------------------------------------------------------------------- //
 // Internal
@@ -113,15 +114,18 @@ export class HelperService {
     };
   }
 
-  truncateNumberToFixed(num: number, fixed: number): string {
-    /*
-     * You might think that truncating a number to a certain number of decimal
-     * places in JavaScript would be simple, but then you would be wrong.
-     * See https://stackoverflow.com/a/11818658/9723359
-     */
-    const regex = new RegExp('^-?\\d+(?:.\\d{0,' + (fixed || -1) + '})?');
-    const matches = num.toString().match(regex);
-    return matches ? matches[0] : '';
+  roundNumberAsString(num: string, fixed: number): string {
+    const n = parseFloat(num);
+    return this.roundNumber(n, fixed);
+  }
+
+  roundNumber(num: number, decimalPlaces: number): string {
+    //lodash will drop trailing zeros
+    const roundedResult = round(num, decimalPlaces);
+    //pad trailing zeros as necessary
+    const paddedResult = roundedResult.toFixed(decimalPlaces);
+    //return as string
+    return paddedResult.toString();
   }
 
   getSignificantFigures(n: number, sig = 2) {

src/app/features/charts/components/score-chart/score-chart.component.ts

@@ -30,10 +30,12 @@ export class ScoreChartComponent extends BaseChartComponent {
     this.init();
   }
 
+  @Input() barColor = '#8b8ad1';
+
   @Input() distribution: any = [];
   @Input() xAxisLabel = 'Gene score';
   @Input() yAxisLabel = 'Number of genes';
-
+  
   override name = 'score-chart';
   dimension: any;
   group: any;
@@ -132,7 +134,7 @@ export class ScoreChartComponent extends BaseChartComponent {
       );
 
     // Colors
-    this.chart.colors(['#8b8ad1']);
+    this.chart.colors([this.barColor]);
 
     // Spacing
     this.chart
@@ -159,16 +161,16 @@ export class ScoreChartComponent extends BaseChartComponent {
           const label = chart.select('g.chart-body').append('text');
 
           label
-            .attr('class', 'score-label')
             .attr('x', barBox.x)
             .attr('y', barBox.y - 6)
-            .style('color', 'rgb(166 132 238)');
+            .attr('font-size', '12px')
+            .attr('fill', this.barColor);
 
           if (this._score === undefined) {
             label.text = 'n/a';
           }
           else
-            label.text(this.helperService.truncateNumberToFixed(this._score, 2));
+            label.text(this.helperService.roundNumber(this._score, 2));
 
           const labelBox = label.node().getBBox();
           const widthDiff = labelBox.width - barBox.width;
@@ -198,7 +200,7 @@ export class ScoreChartComponent extends BaseChartComponent {
             .append('rect')
             .attr('width', barBox.width + 8)
             .attr('height', 14)
-            .attr('fill', '#8b8ad1');
+            .attr('fill', this.barColor);
 
           breakContainer
             .append('rect')
@@ -226,13 +228,14 @@ export class ScoreChartComponent extends BaseChartComponent {
     d3.select(bar)
       .on('mouseover', function () {
         const barBox = bar.getBoundingClientRect();
+
+        const lowerRange = parseFloat(distribution.range[0]).toFixed(2);
+        const upperRange = parseFloat(distribution.range[1]).toFixed(2);
+
         const text =
-          'Score Range: ' + leftBoundCharacter +
-          parseFloat(distribution.range[0]).toFixed(2) +
-          ', ' +
-          parseFloat(distribution.range[1]).toFixed(2) +
-          ']  <br>  Gene Count: ' +
-          distribution.value;
+          `Score Range: ${ leftBoundCharacter } ${ lowerRange }, ${ upperRange }]
+          <br>
+          Gene Count: ${ distribution.value }`;
 
         tooltip
           .html(text)

src/app/features/genes/components/gene-soe-charts/gene-soe-charts.component.html

@@ -13,6 +13,7 @@ <h2 class="gene-score-charts-heading">
     </div>
     <score-chart
       [score]="chart.score"
+      [barColor]="chart.barColor"
       [distribution]="chart.distribution"
     ></score-chart>
   </div>