Skip to content

Commit

Permalink
fix: digits format (#2137)
Browse files Browse the repository at this point in the history 
* fix: value format

close #2110

* style: remove margin

* test: fix peaks test
  • Loading branch information
@hamed-musallam
hamed-musallam committed Feb 13, 2023
1 parent 60b4303 commit fc38f51
Show file tree
Hide file tree
Showing 7 changed files with 45 additions and 40 deletions.
1 change: 0 additions & 1 deletion src/component/elements/Select.tsx
View file
Expand Up @@ -17,7 +17,6 @@ const styles = {
background-position-x: calc(100% - 5px);
background-size: 15px 15px;
border-radius: 5px;
margin: 0px 5px;
align-self: center;
&:focus,
input:focus {
Expand Down
16 changes: 8 additions & 8 deletions src/component/panels/IntegralsPanel/IntegralTable.tsx
View file
Expand Up @@ -23,7 +23,7 @@ import NoTableData from '../extra/placeholder/NoTableData';

import { IntegralPanelInnerProps } from './IntegralPanel';

const selectStyle = { marginLeft: 10, marginRight: 10, border: 'none' };
const selectStyle = { width: '100%', border: 'none' };

interface IntegralTableProps
extends Pick<IntegralPanelInnerProps, 'activeTab'> {
Expand Down Expand Up @@ -130,8 +130,12 @@ function IntegralTable({ activeTab, data }: IntegralTableProps) {
showWhen: 'absolute.show',
index: 4,
Header: 'Absolute',
accessor: (row) =>
formatNumber(row.absolute, integralsPreferences.absolute.format),
accessor: 'absolute',
Cell: ({ row }) =>
formatNumber(
row.original.absolute,
integralsPreferences.absolute.format,
),
},
{
showWhen: 'relative.show',
Expand All @@ -141,11 +145,7 @@ function IntegralTable({ activeTab, data }: IntegralTableProps) {
const n = activeTab?.replace(/\d/g, '');
return <span>{`Relative ${n}`}</span>;
},
accessor: (row) => {
return row?.integral
? formatNumber(row.integral, integralsPreferences.relative.format)
: '';
},
accessor: 'integral',
Cell: ({ row }) => {
let integral: string | number = '';

Expand Down
37 changes: 23 additions & 14 deletions src/component/panels/PeaksPanel/PeaksTable.tsx
View file
Expand Up @@ -88,8 +88,7 @@ function PeaksTable({ activeTab, data }: PeaksTableProps) {
showWhen: 'deltaPPM.show',
index: 3,
Header: 'δ (ppm)',
accessor: (row) =>
formatNumber(row.x, peaksPreferences.deltaPPM.format),
accessor: 'x',
Cell: ({ row }) => (
<EditableColumn
value={formatNumber(
Expand All @@ -105,23 +104,26 @@ function PeaksTable({ activeTab, data }: PeaksTableProps) {
showWhen: 'deltaHz.show',
index: 4,
Header: 'δ (Hz)',
accessor: (row) =>
formatNumber(row.xHz, peaksPreferences.deltaHz.format),
accessor: 'xHz',
Cell: ({ row }) =>
formatNumber(row.original.xHz, peaksPreferences.deltaHz.format),
},
{
showWhen: 'intensity.show',
index: 5,
Header: 'Intensity',
style: { maxWidth: '80px' },
accessor: (row) =>
formatNumber(row.y, peaksPreferences.intensity.format),
accessor: 'y',
Cell: ({ row }) =>
formatNumber(row.original.y, peaksPreferences.intensity.format),
},
{
showWhen: 'peakWidth.show',
index: 6,
Header: 'Width (Hz)',
accessor: (row) =>
formatNumber(row.width, peaksPreferences.peakWidth.format),
accessor: 'width',
Cell: ({ row }) =>
formatNumber(row.original.width, peaksPreferences.peakWidth.format),
},
{
showWhen: 'showKind',
Expand All @@ -133,9 +135,11 @@ function PeaksTable({ activeTab, data }: PeaksTableProps) {
showWhen: 'fwhm.show',
index: 8,
Header: 'fwhm',
accessor: (row) => {
if (row?.shape?.fwhm) {
return formatNumber(row.shape.fwhm, peaksPreferences.fwhm.format);
accessor: (row) => row?.shape?.fwhm || '',
Cell: ({ row }) => {
const fwhm = row.original?.shape?.fwhm;
if (fwhm) {
return formatNumber(fwhm, peaksPreferences.fwhm.format);
}
return '';
},
Expand All @@ -144,9 +148,14 @@ function PeaksTable({ activeTab, data }: PeaksTableProps) {
showWhen: 'mu.show',
index: 9,
Header: 'mu',
accessor: (row) => {
if (row?.shape?.kind === 'pseudoVoigt' && row?.shape?.mu) {
return formatNumber(row.shape.mu, peaksPreferences.mu.format);
accessor: (row) =>
(row?.shape?.kind === 'pseudoVoigt' && row?.shape?.mu) || '',
Cell: ({ row }) => {
const mu =
row.original?.shape?.kind === 'pseudoVoigt' &&
row.original?.shape?.mu;
if (mu) {
return formatNumber(mu, peaksPreferences.mu.format);
}
return '';
},
Expand Down
8 changes: 4 additions & 4 deletions src/component/panels/RangesPanel/RangesHeader.tsx
View file
Expand Up @@ -246,7 +246,7 @@ function RangesHeader({
popupTitle="Remove all Assignments"
popupPlacement="right"
onClick={handleOnRemoveAssignments}
disabled={!ranges || !ranges.values || ranges.values.length === 0}
disabled={!ranges?.values || ranges.values.length === 0}
className="btn icon"
>
<FaUnlink />
Expand All @@ -260,7 +260,7 @@ function RangesHeader({
popupPlacement="right"
onClick={handleSetShowMultiplicityTrees}
value={showMultiplicityTrees}
disabled={!ranges || !ranges.values || ranges.values.length === 0}
disabled={!ranges?.values || ranges.values.length === 0}
>
<FaSitemap style={{ pointerEvents: 'none', fontSize: '12px' }} />
</ActiveButton>
Expand All @@ -269,7 +269,7 @@ function RangesHeader({
popupPlacement="right"
onClick={handleShowJGraph}
value={showJGraph}
disabled={!ranges || !ranges.values || ranges.values.length === 0}
disabled={!ranges?.values || ranges.values.length === 0}
>
<FaChartBar style={{ pointerEvents: 'none', fontSize: '12px' }} />
</ActiveButton>
Expand All @@ -278,7 +278,7 @@ function RangesHeader({
popupPlacement="right"
onClick={handleShowIntegrals}
value={showRangesIntegrals}
disabled={!ranges || !ranges.values || ranges.values.length === 0}
disabled={!ranges?.values || ranges.values.length === 0}
>
<SvgNmrIntegrate
style={{ pointerEvents: 'none', fontSize: '12px' }}
Expand Down
7 changes: 4 additions & 3 deletions src/component/panels/databasePanel/DatabaseTable.tsx
View file
Expand Up @@ -61,9 +61,10 @@ const databaseTableColumns = (
showWhen: 'delta.show',
index: 3,
Header: 'δ (ppm)',
accessor: (row) =>
row.delta
? formatNumber(row.delta, databasePreferences.delta.format)
accessor: 'delta',
Cell: ({ row }) =>
row.original.delta
? formatNumber(row.original.delta, databasePreferences.delta.format)
: '',
},

Expand Down
12 changes: 4 additions & 8 deletions src/component/utility/formatNumber.ts
View file
Expand Up @@ -13,15 +13,11 @@ function formatNumber(
) {
const { prefix = '', suffix = '', defaultFormat = '0.00' } = options;

if (typeof value === 'number' || !Number.isNaN(Number(value))) {
const formattedValue = numeral(value).format(format || defaultFormat);
if (prefix || suffix) {
return prefix + formattedValue + suffix;
}
return Number(formattedValue);
const formattedValue = numeral(value).format(format || defaultFormat);
if (prefix || suffix) {
return prefix + formattedValue + suffix;
}

return value;
return formattedValue;
}

function getNumberOfDecimals(value: number | string) {
Expand Down
4 changes: 2 additions & 2 deletions test-e2e/panels/peaks.test.ts
View file
Expand Up @@ -45,7 +45,7 @@ async function shiftX(nmrium: NmriumPage) {
await peakInputLocator.type('10');
await peakInputLocator.press('Enter');

await expect(peakInputLocator).toHaveValue('10');
await expect(peakInputLocator).toHaveValue('10.00');
}

async function shiftSpectraByDeltaColumn(nmrium: NmriumPage) {
Expand All @@ -62,7 +62,7 @@ async function shiftSpectraByDeltaColumn(nmrium: NmriumPage) {
const peakInputLocator = nmrium.page.locator(
'_react=PeakAnnotation >> nth=0 >> input',
);
await expect(peakInputLocator).toHaveValue('20');
await expect(peakInputLocator).toHaveValue('20.00');
}

async function deletePeak(nmrium: NmriumPage) {
Expand Down

0 comments on commit fc38f51

Please sign in to comment.