AG-1412 fixed bug in border condition handling logic

src/app/features/genes/components/gene-comparison-tool/components/gene-comparison-tool-details-panel/gene-comparison-tool-details-panel.component.html

@@ -18,10 +18,8 @@
         <div>P-Value</div>
       </div>
       <div>
-        <div>{{ getSignificantFigures(data.value, 3) }}</div>
-        <div>
-          {{ getSignificantFigures(data.pValue, 3) }}
-        </div>
+        <div [innerHTML]="getSignificantFigures(data.value, 3)"></div>
+        <div [innerHTML]="getSignificantFigures(data.pValue, 3)"></div>
       </div>
     </div>
 
@@ -36,17 +34,17 @@
             [style]="getIntervalPositions(data)"
           >
             <div>
-              <div class="gct-details-panel-chart-interval-left">{{ getSignificantFigures(data.intervalMin, 3) }}</div>
+              <div class="gct-details-panel-chart-interval-left" [innerHTML]="getSignificantFigures(data.intervalMin, 3)"></div>
             </div>
             <div>
-              <div class="gct-details-panel-chart-interval-right">{{ getSignificantFigures(data.intervalMax, 3) }}</div>
+              <div class="gct-details-panel-chart-interval-right" [innerHTML]="getSignificantFigures(data.intervalMax, 3)"></div>
             </div>
           </div>
           <div
             class="gct-details-panel-chart-value"
             [style]="getValuePosition(data)"
           >
-            <div>{{ getSignificantFigures(data.value, 3) }}</div>
+            <div [innerHTML]="getSignificantFigures(data.value, 3)"></div>
           </div>
         </div>
       </div>

src/app/features/genes/components/gene-comparison-tool/gene-comparison-tool.component.spec.ts

@@ -27,6 +27,7 @@ import { ApiService, HelperService } from '../../../../core/services';
 import { GeneService } from '../../../../features/genes/services';
 import { routes } from '../../../../app.routing';
 import { comparisonGeneEmptyHGNCMock, comparisonGeneMock1, comparisonGeneMock2 } from '../../../../testing';
+import { GCTGeneTissue } from '../../../../models';
 
 const DEFAULT_SIGNIFICANCE_THRESHOLD = 0.05;
 
@@ -518,5 +519,32 @@ describe('Component: GeneComparisonToolComponent', () => {
       const expected2 = 'ENSG00000147065';
       expect(label2).toBe(expected2);
     });
+
+    it('should set circle size to zero for undefined pValues', () => {
+      let tissue: GCTGeneTissue | undefined;
+      // undefined values should result in a circle size of zero
+      expect(tissue).toBeUndefined();
+      const result = component.getCircleSize(tissue?.adj_p_val);
+      expect(result).toBe(0);
+    });
+
+    it('should set circle size to zero for null pValues', () => {
+      // null values should result in a circle size of zero pixels
+      const pValue = null;
+      const result = component.getCircleSize(pValue);
+      expect(result).toBe(0);
+    });
+
+    it('should set circle size for pValues within acceptable ranges', () => {
+      let expectedSizeInPixels = 0;
+      let pValue = 0.5;
+      let result = component.getCircleSize(pValue);
+      expect(result).toBe(expectedSizeInPixels);
+
+      expectedSizeInPixels = 33;
+      pValue = 0.04;
+      result = component.getCircleSize(pValue);
+      expect(result).toBe(expectedSizeInPixels);
+    });
   });
 });

src/app/features/genes/components/gene-comparison-tool/gene-comparison-tool.component.ts

@@ -901,13 +901,14 @@ export class GeneComparisonToolComponent implements OnInit, AVI, OnDestroy {
     }
   }
 
-  getCircleSize(pval: number | undefined) {
+  getCircleSize(pval: number | null | undefined) {
     // define min and max size of possible circles in pixels
     const MIN_SIZE = 6;
     const MAX_SIZE = 50;
 
-    // shouldn't be undefined but if it is, don't show a circle
-    if (pval === undefined)
+    // pval shouldn't be undefined but if it is, don't show a circle
+    // null means there is no data in which case, also don't show a circle
+    if (pval === null || pval === undefined)
       return 0;
 
     // if significance cutoff radio button selected and