feat: format metadata floats with significant digits

Author: emigun

src/app/app-config.service.spec.ts

@@ -50,6 +50,12 @@ const appConfig: AppConfigInterface = {
   thumbnailFetchLimitPerPage: 500,
   maxFileUploadSizeInMb: "16mb",
   maxDirectDownloadSize: 5000000000,
+  metadataFloatFormatEnabled: true,
+  metadataFloatFormat: {
+    significantDigits: 3,
+    minCutoff: 0.001,
+    maxCutoff: 1000,
+  },
   metadataPreviewEnabled: true,
   metadataStructure: "",
   multipleDownloadAction: "http://localhost:3012/zip",

src/app/app-config.service.ts

@@ -64,6 +64,12 @@ export class MainMenuConfiguration {
   authenticatedUser: MainMenuOptions;
 }
 
+export class MetadataFloatFormat {
+  significantDigits: number;
+  minCutoff: number; // using scientific notation below this cutoff
+  maxCutoff: number; // using scientific notation above this cutoff
+}
+
 export interface AppConfigInterface {
   skipSciCatLoginPageEnabled?: boolean;
   accessTokenPrefix: string;
@@ -102,6 +108,8 @@ export interface AppConfigInterface {
   maxDirectDownloadSize: number | null;
   metadataPreviewEnabled: boolean;
   metadataStructure: string;
+  metadataFloatFormat?: MetadataFloatFormat;
+  metadataFloatFormatEnabled?: boolean;
   multipleDownloadAction: string | null;
   multipleDownloadEnabled: boolean;
   multipleDownloadUseAuthToken: boolean;
@@ -232,6 +240,14 @@ export class AppConfigService {
       config.dateFormat = "yyyy-MM-dd HH:mm";
     }
 
+    if (!config.metadataFloatFormat) {
+      config.metadataFloatFormat = {
+        significantDigits: 3,
+        minCutoff: 0.001,
+        maxCutoff: 1000,
+      };
+    }
+
     this.appConfig = config;
   }
 

src/app/datasets/dataset-table/dataset-table.component.ts

@@ -63,6 +63,7 @@ import { FileSizePipe } from "shared/pipes/filesize.pipe";
 import { actionMenu } from "shared/modules/dynamic-material-table/utilizes/default-table-settings";
 import { TableConfigService } from "shared/services/table-config.service";
 import { selectInstruments } from "state-management/selectors/instruments.selectors";
+import { FormatNumberPipe } from "shared/pipes/format-number.pipe";
 
 export interface SortChangeEvent {
   active: string;
@@ -155,6 +156,7 @@ export class DatasetTableComponent implements OnInit, OnDestroy {
     private datePipe: DatePipe,
     private fileSize: FileSizePipe,
     private tableConfigService: TableConfigService,
+    private formatNumberPipe: FormatNumberPipe,
   ) {}
 
   private getInstrumentName(row: OutputDatasetObsoleteDto): string {
@@ -480,6 +482,19 @@ export class DatasetTableComponent implements OnInit, OnDestroy {
             this.getInstrumentName(row);
         }
 
+        if (column.name.startsWith("scientificMetadata.")) {
+          convertedColumn.customRender = (col, row) => {
+            return String(
+              this.formatNumberPipe.transform(lodashGet(row, col.name)),
+            );
+          };
+          convertedColumn.toExport = (row) => {
+            return String(
+              this.formatNumberPipe.transform(lodashGet(row, column.name)),
+            );
+          };
+        }
+
         return convertedColumn;
       });
   }

src/app/shared/modules/scientific-metadata-tree/base-classes/metadata-input-base.spec.ts

@@ -6,6 +6,8 @@ import { MetadataInputComponent } from "../metadata-input/metadata-input.compone
 import { FormatNumberPipe } from "shared/pipes/format-number.pipe";
 import { ScientificMetadataTreeModule } from "../scientific-metadata-tree.module";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { AppConfigService } from "app-config.service";
+import { provideHttpClient } from "@angular/common/http";
 
 describe("MetadataInputBase", () => {
   let component: MetadataInputComponent;
@@ -15,11 +17,25 @@ describe("MetadataInputBase", () => {
     TestBed.configureTestingModule({
       declarations: [MetadataInputComponent],
       imports: [ScientificMetadataTreeModule, BrowserAnimationsModule],
-      providers: [FormBuilder, FormatNumberPipe],
+      providers: [
+        FormBuilder,
+        FormatNumberPipe,
+        AppConfigService,
+        provideHttpClient(),
+      ],
     }).compileComponents();
   }));
 
   beforeEach(() => {
+    const appConfigService = TestBed.inject(AppConfigService);
+    (appConfigService as any).appConfig = {
+      metadataFloatFormatEnabled: true,
+      metadataFloatFormat: {
+        significantDigits: 3,
+        minCutoff: 0.001,
+        maxCutoff: 1000,
+      },
+    };
     fixture = TestBed.createComponent(MetadataInputComponent);
     component = fixture.componentInstance;
     const data = new FlatNodeEdit();

src/app/shared/modules/scientific-metadata-tree/base-classes/tree-base.spec.ts

@@ -7,6 +7,8 @@ import { FlatNode, TreeNode } from "../base-classes/tree-base";
 import { TreeEditComponent } from "../tree-edit/tree-edit.component";
 import { ScientificMetadataTreeModule } from "../scientific-metadata-tree.module";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { AppConfigService } from "app-config.service";
+import { provideHttpClient } from "@angular/common/http";
 
 describe("TreeBaseComponent", () => {
   let component: TreeEditComponent;
@@ -16,11 +18,26 @@ describe("TreeBaseComponent", () => {
     TestBed.configureTestingModule({
       declarations: [TreeEditComponent],
       imports: [ScientificMetadataTreeModule, BrowserAnimationsModule],
-      providers: [MatDialog, MatSnackBar, DatePipe],
+      providers: [
+        MatDialog,
+        MatSnackBar,
+        DatePipe,
+        AppConfigService,
+        provideHttpClient(),
+      ],
     }).compileComponents();
   }));
 
   beforeEach(() => {
+    const appConfigService = TestBed.inject(AppConfigService);
+    (appConfigService as any).appConfig = {
+      metadataFloatFormatEnabled: true,
+      metadataFloatFormat: {
+        significantDigits: 3,
+        minCutoff: 0.001,
+        maxCutoff: 1000,
+      },
+    };
     fixture = TestBed.createComponent(TreeEditComponent);
     component = fixture.componentInstance;
     component.metadata = {

src/app/shared/modules/scientific-metadata-tree/base-classes/tree-base.ts

@@ -9,6 +9,7 @@ import { FormatNumberPipe } from "shared/pipes/format-number.pipe";
 import { PrettyUnitPipe } from "shared/pipes/pretty-unit.pipe";
 import { DateTimeService } from "shared/services/date-time.service";
 import { UnitsService } from "shared/services/units.service";
+import { AppConfigService } from "app-config.service";
 
 export class TreeNode {
   children: TreeNode[];
@@ -43,10 +44,10 @@ export class TreeBaseComponent {
   prettyUnitPipe: PrettyUnitPipe;
   unitsService: UnitsService;
   dateTimeService: DateTimeService;
-  constructor() {
+  constructor(protected configService: AppConfigService) {
     this.unitsService = new UnitsService();
     this.prettyUnitPipe = new PrettyUnitPipe(this.unitsService);
-    this.formatNumberPipe = new FormatNumberPipe();
+    this.formatNumberPipe = new FormatNumberPipe(this.configService);
     this.dateTimeService = new DateTimeService();
   }
   buildDataTree(obj: { [key: string]: any }, level: number): TreeNode[] {

src/app/shared/modules/scientific-metadata-tree/metadata-input/metadata-input.component.spec.ts

@@ -9,6 +9,8 @@ import { ScientificMetadataTreeModule } from "../scientific-metadata-tree.module
 import { MetadataInputComponent } from "./metadata-input.component";
 
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { AppConfigService } from "app-config.service";
+import { provideHttpClient } from "@angular/common/http";
 
 describe("MetadataInputComponent", () => {
   let component: MetadataInputComponent;
@@ -18,11 +20,25 @@ describe("MetadataInputComponent", () => {
     TestBed.configureTestingModule({
       declarations: [MetadataInputComponent],
       imports: [ScientificMetadataTreeModule, BrowserAnimationsModule],
-      providers: [FormBuilder, FormatNumberPipe],
+      providers: [
+        FormBuilder,
+        FormatNumberPipe,
+        AppConfigService,
+        provideHttpClient(),
+      ],
     }).compileComponents();
   }));
 
   beforeEach(() => {
+    const appConfigService = TestBed.inject(AppConfigService);
+    (appConfigService as any).appConfig = {
+      metadataFloatFormatEnabled: true,
+      metadataFloatFormat: {
+        significantDigits: 3,
+        minCutoff: 0.001,
+        maxCutoff: 1000,
+      },
+    };
     fixture = TestBed.createComponent(MetadataInputComponent);
     component = fixture.componentInstance;
     const data = new FlatNodeEdit();
@@ -76,7 +92,7 @@ describe("MetadataInputComponent", () => {
       component.addCurrentMetadata(component.data);
       expect(component.metadataForm.get("type").value).toEqual("quantity");
       expect(component.metadataForm.get("key").value).toEqual("energy");
-      expect(component.metadataForm.get("value").value).toEqual(3);
+      expect(component.metadataForm.get("value").value).toEqual("3");
       expect(component.metadataForm.get("unit").value).toEqual("joule");
     });
     it("should set values in form control (number)", () => {

src/app/shared/modules/scientific-metadata-tree/tree-edit/tree-edit.component.spec.ts

@@ -10,6 +10,8 @@ import { ScientificMetadataTreeModule } from "../scientific-metadata-tree.module
 
 import { FlatNodeEdit, TreeEditComponent } from "./tree-edit.component";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
+import { AppConfigService } from "app-config.service";
+import { provideHttpClient } from "@angular/common/http";
 
 describe("TreeEditComponent", () => {
   let component: TreeEditComponent;
@@ -19,11 +21,26 @@ describe("TreeEditComponent", () => {
     TestBed.configureTestingModule({
       declarations: [TreeEditComponent],
       imports: [ScientificMetadataTreeModule, BrowserAnimationsModule],
-      providers: [MatDialog, MatSnackBar, DatePipe],
+      providers: [
+        MatDialog,
+        MatSnackBar,
+        DatePipe,
+        AppConfigService,
+        provideHttpClient(),
+      ],
     }).compileComponents();
   }));
 
   beforeEach(() => {
+    const appConfigService = TestBed.inject(AppConfigService);
+    (appConfigService as any).appConfig = {
+      metadataFloatFormatEnabled: true,
+      metadataFloatFormat: {
+        significantDigits: 3,
+        minCutoff: 0.001,
+        maxCutoff: 1000,
+      },
+    };
     fixture = TestBed.createComponent(TreeEditComponent);
     component = fixture.componentInstance;
     component.metadata = {

src/app/shared/modules/scientific-metadata-tree/tree-edit/tree-edit.component.ts

@@ -29,6 +29,7 @@ import { MatSnackBar } from "@angular/material/snack-bar";
 import { DatePipe } from "@angular/common";
 import { Type } from "../base-classes/metadata-input-base";
 import { DateTime } from "luxon";
+import { AppConfigService } from "app-config.service";
 
 export class FlatNodeEdit implements FlatNode {
   key: string;
@@ -64,8 +65,9 @@ export class TreeEditComponent
     public dialog: MatDialog,
     private snackBar: MatSnackBar,
     datePipe: DatePipe,
+    configService: AppConfigService,
   ) {
-    super();
+    super(configService);
     this.datePipe = datePipe;
     this.treeFlattener = new MatTreeFlattener(
       this.transformer,

src/app/shared/modules/scientific-metadata-tree/tree-view/tree-view.component.html

@@ -38,7 +38,7 @@
       <div class="key-cell" [style.padding-left.px]="getPadding(node)">
         <label class="label-cell">{{ node.key }}</label>
       </div>
-      <div class="value-cell">{{ getValueRepresentation(node) }}</div>
+      <div class="value-cell">{{ getValueRepresentation(node) | formatNumber }}</div>
     </section>
   </mat-tree-node>
   <!-- Only Key -->