feat: format the decimal fields in database panel

close #1592
cheminfo · Jun 28, 2022 · 4700745 · 4700745
1 parent ec2607d
commit 4700745
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 21 deletions.
diff --git a/src/component/panels/databasePanel/DatabasePreferences.tsx b/src/component/panels/databasePanel/DatabasePreferences.tsx
@@ -80,13 +80,13 @@ function DatabasePreferences(props, ref) {
           />
           <FormikColumnFormatField
             label="Range"
-            checkControllerName="showRange"
-            hideFormatField
+            checkControllerName="range.show"
+            formatControllerName="range.format"
           />
           <FormikColumnFormatField
             label="δ (ppm)"
-            checkControllerName="showDelta"
-            hideFormatField
+            checkControllerName="delta.show"
+            formatControllerName="delta.format"
           />
           <FormikColumnFormatField
             label="Assignment"
@@ -95,8 +95,8 @@ function DatabasePreferences(props, ref) {
           />
           <FormikColumnFormatField
             label="J (Hz)"
-            checkControllerName="showCoupling"
-            hideFormatField
+            checkControllerName="coupling.show"
+            formatControllerName="coupling.format"
           />
           <FormikColumnFormatField
             label="Multiplicity"

diff --git a/src/component/panels/databasePanel/DatabaseTable.tsx b/src/component/panels/databasePanel/DatabaseTable.tsx
@@ -1,4 +1,5 @@
 /** @jsxImportSource @emotion/react */
+import lodashGet from 'lodash/get';
 import { useMemo, memo, CSSProperties } from 'react';
 import { ResponsiveChart } from 'react-d3-utils';
 import { FaPlus } from 'react-icons/fa';
@@ -10,6 +11,7 @@ import addCustomColumn, {
 } from '../../elements/ReactTable/utility/addCustomColumn';
 import { HighlightedSource } from '../../highlight';
 import { usePanelPreferences } from '../../hooks/usePanelPreferences';
+import { formatNumber } from '../../utility/formatNumber';
 
 interface DatabaseTableProps {
   data: any;
@@ -22,7 +24,9 @@ const overFlowStyle: CSSProperties = {
   textOverflow: 'ellipsis',
 };
 
-const COLUMNS: (CustomColumn & { showWhen: string })[] = [
+const databaseTableColumns = (
+  databasePreferences,
+): (CustomColumn & { showWhen: string })[] => [
   {
     showWhen: 'showNames',
     index: 1,
@@ -37,18 +41,26 @@ const COLUMNS: (CustomColumn & { showWhen: string })[] = [
     },
   },
   {
-    showWhen: 'showRange',
+    showWhen: 'range.show',
     index: 2,
     Header: 'From - To',
-    accessor: (row) => `${row.from.toFixed(2)} - ${row.to.toFixed(2)}`,
+    accessor: (row) => {
+      const rangeFormat = databasePreferences.range.format;
+      return `${formatNumber(row.from, rangeFormat)} - ${formatNumber(
+        row.to,
+        rangeFormat,
+      )}`;
+    },
     enableRowSpan: true,
   },
   {
-    showWhen: 'showDelta',
+    showWhen: 'delta.show',
     index: 3,
     Header: 'δ (ppm)',
-    accessor: 'delta',
+    accessor: (row) =>
+      `${formatNumber(row.delta, databasePreferences.delta.format)}`,
   },
+
   {
     showWhen: 'showAssignment',
     index: 4,
@@ -61,11 +73,13 @@ const COLUMNS: (CustomColumn & { showWhen: string })[] = [
     Header: 'Multi.',
     accessor: 'multiplicity',
   },
+
   {
-    showWhen: 'showCoupling',
+    showWhen: 'coupling.show',
     index: 6,
     Header: 'J (Hz)',
-    accessor: 'coupling',
+    accessor: (row) =>
+      `${formatNumber(row.coupling, databasePreferences.coupling.format)}`,
     style: {
       width: '60px',
       minWidth: '60px',
@@ -153,9 +167,9 @@ function DatabaseTable({ data, onAdd }: DatabaseTableProps) {
 
   const tableColumns = useMemo(() => {
     let columns = [...initialColumns];
-    for (const col of COLUMNS) {
+    for (const col of databaseTableColumns(databasePreferences)) {
       const { showWhen, ...colParams } = col;
-      if (databasePreferences[showWhen]) {
+      if (lodashGet(databasePreferences, showWhen, false)) {
         addCustomColumn(columns, colParams);
       }
     }

diff --git a/src/component/reducer/preferences/panelsPreferencesDefaultValues.ts b/src/component/reducer/preferences/panelsPreferencesDefaultValues.ts
@@ -60,10 +60,10 @@ const databaseDefaultValues: PanelsPreferences['database'] = {
   showSmiles: true,
   showSolvent: false,
   showNames: true,
-  showRange: false,
-  showDelta: true,
+  range: { show: false, format: '0.00' },
+  delta: { show: true, format: '0.00' },
   showAssignment: false,
-  showCoupling: true,
+  coupling: { show: true, format: '0.0' },
   showMultiplicity: true,
   color: '#C0B000',
   marginBottom: 30,

diff --git a/src/component/workspaces/Workspace.ts b/src/component/workspaces/Workspace.ts
@@ -58,10 +58,10 @@ export interface DatabasePanelPreferences {
   showSmiles: boolean;
   showSolvent: boolean;
   showNames: boolean;
-  showRange: boolean;
-  showDelta: boolean;
+  range: ColumnPreferences;
+  delta: ColumnPreferences;
   showAssignment: boolean;
-  showCoupling: boolean;
+  coupling: ColumnPreferences;
   showMultiplicity: boolean;
   color: string;
   marginBottom: number;