feat: improve SVG exportation

src/component/1d/Chart1D.tsx

@@ -28,10 +28,11 @@ function Chart1D({ mode, width, height, margin, displayerKey }) {
   return (
     <PeakEditionProvider>
       <svg
-        viewBox={`0 0 ${width} ${height}`}
+        id="nmrSVG"
         width={width}
         height={height}
-        id="nmrSVG"
+        viewBox={`0 0 ${width} ${height}`}
+        fontFamily="Arial, Helvetica, sans-serif"
         shapeRendering={spectraRendering}
       >
         <defs>

src/component/1d/SpectraLegends.tsx

@@ -71,7 +71,7 @@ function InnerSpectraLegends({
               fill: (spectrum as Spectrum1D).display.color,
             }}
           />
-          <SVGGroup space={5} style={{ transform: 'translate(12px,0)' }}>
+          <SVGGroup space={5} transform="translate(12 0)">
             {legendsFields.map((field) => {
               const predefinedField = field as PredefinedLegendField;
 

src/component/1d/jCouplingGraph/JsCoupling.tsx

@@ -13,10 +13,7 @@ export default function JsCoupling({ value }: JsCouplingProps) {
   if (!scaleY) return null;
 
   return (
-    <g
-      className="coupling"
-      style={{ transform: `translate(0px,${scaleY(value)}px)` }}
-    >
+    <g className="coupling" transform={`translate(0 ${scaleY(value)})`}>
       <circle
         onMouseEnter={() => setOver(true)}
         onMouseLeave={() => setOver(false)}
@@ -27,7 +24,7 @@ export default function JsCoupling({ value }: JsCouplingProps) {
         pointerEvents="all"
       />
       {isOver && (
-        <g style={{ transform: `translate(0px,15px)` }}>
+        <g transform="translate(0 15)">
           <text
             pointerEvents="none"
             stroke="white"

src/component/2d/Chart2D.tsx

@@ -35,12 +35,15 @@ function chart2DInner({
 }: Chart2DInnerProps) {
   return (
     <svg
+      id="nmrSVG"
       viewBox={`0 0 ${width} ${height}`}
       width={width}
       height={height}
-      id="nmrSVG"
+      fontFamily="Arial, Helvetica, sans-serif"
       shapeRendering={SpectraRendering}
-      style={{ position: 'absolute' }}
+      style={{
+        position: 'absolute',
+      }}
     >
       <defs>
         <clipPath id={`${displayerKey}clip-chart-2d`}>

src/component/elements/SVGGroup.tsx

@@ -23,10 +23,10 @@ export function SVGGroup(props: SVGGroupProps) {
         if (element) {
           const boundary = element.getBoundingClientRect();
           if (direction === 'row') {
-            element.style.transform = `translate(${shift}px,0)`;
+            element.setAttribute('transform', `translate(${shift} 0)`);
             shift += boundary.width + space;
           } else {
-            element.style.transform = `translate(0,${shift}px)`;
+            element.setAttribute('transform', `translate(0 ${shift})`);
             shift += boundary.height + space;
           }
         }

src/component/elements/linearAxis/LinearVerticalAxis.tsx

@@ -56,7 +56,12 @@ const VerticalAxis = forwardRef<SVGGElement | null, VerticalRenderProps>(
               />
             )}
             <line y1={position} y2={position} x1={15} x2={10} stroke="black" />
-            <text y={position} dominantBaseline="middle" textAnchor="end">
+            <text
+              y={position}
+              dominantBaseline="middle"
+              textAnchor="end"
+              fill="black"
+            >
               {label}
             </text>
           </g>

src/component/elements/resizer/SVGResizer.tsx

@@ -82,7 +82,7 @@ function SVGResizerHandle(props: {
     <g
       onPointerDown={props.onPointerDown}
       css={styles.container}
-      style={{ transform: `translateX(${props.position}px)` }}
+      transform={`translate(${props.position})`}
       data-no-export="true"
     >
       <rect x="-5px" style={style.innerContainer} />

src/component/modal/ExportAsJcampModal.tsx

@@ -61,7 +61,7 @@ function ExportAsJcampModal(props: ExportAsJCAMPProps) {
   function submitHandler(options) {
     void (async () => {
       const hideLoading = await alert.showLoading(
-        'export as JCAMP in progress',
+        'export as JCAMP-DX in progress',
       );
       try {
         exportAsJcamp(spectrum, options);

src/component/panels/SpectrumsPanel/SpectraTable.tsx

@@ -81,7 +81,7 @@ const Spectra2DContextMenuOptions: ContextMenuItem[] = [
     data: { id: SpectraContextMenuOptionsKeys.Delete },
   },
   {
-    text: 'Export as jcamp',
+    text: 'Export as JCAMP-DX',
     icon: <FaFileExport />,
     data: { id: SpectraContextMenuOptionsKeys.ExportAsJcamp },
   },
@@ -90,7 +90,7 @@ const Spectra2DContextMenuOptions: ContextMenuItem[] = [
 const Spectra1DContextMenuOptions: ContextMenuItem[] = [
   ...Spectra2DContextMenuOptions,
   {
-    text: 'Export as jcamp',
+    text: 'Export as JCAMP-DX',
     icon: <FaFileExport />,
     data: { id: SpectraContextMenuOptionsKeys.ExportAsJcamp },
   },

src/component/reducer/actions/utilities/__tests__/data/test.json

@@ -1194,13 +1194,13 @@
           "format": ""
         },
         {
-          "label": "Number Of Scan",
+          "label": "Number of scans",
           "jpath": ["info", "numberOfScans"],
           "visible": true,
           "format": "0"
         },
         {
-          "label": "Pulse Sequence",
+          "label": "Pulse sequence",
           "jpath": ["info", "pulseSequence"],
           "visible": true,
           "format": ""

src/component/utility/export.ts

@@ -248,6 +248,9 @@ function getBlob(
   _svg.append(floatingMoleculesGroup);
 
   const nmrCss = `
+  * {
+    font-family: Arial, Helvetica, sans-serif;
+  }
   .grid line,.grid path{stroke:none;} .peaks-text{fill:#730000} .x path{stroke-width:1px} .x text{
     font-size: 12px;
     font-weight: bold;

src/component/workspaces/workspaceDefaultProperties.ts

@@ -99,16 +99,16 @@ export const workspaceDefaultProperties: Required<WorkspacePreferences> = {
   infoBlock: {
     visible: false,
     fields: [
-      { label: 'name', jpath: ['info', 'name'], visible: true, format: '' },
+      { label: 'Name', jpath: ['info', 'name'], visible: true, format: '' },
       {
-        label: 'Number Of Scan',
+        label: 'Number of scans',
         jpath: ['info', 'numberOfScans'],
         visible: true,
         format: '0',
       },
 
       {
-        label: 'Pulse Sequence',
+        label: 'Pulse sequence',
         jpath: ['info', 'pulseSequence'],
         visible: true,
         format: '',

src/demo/views/CustomWorkspace.tsx

@@ -94,16 +94,16 @@ const customWorkspaces: CustomWorkspaces = {
     infoBlock: {
       visible: false,
       fields: [
-        { label: 'name', jpath: ['info', 'name'], visible: true, format: '' },
+        { label: 'Name', jpath: ['info', 'name'], visible: true, format: '' },
         {
-          label: 'Number Of Scan',
+          label: 'Number of scans',
           jpath: ['info', 'numberOfScans'],
           visible: true,
           format: '0',
         },
 
         {
-          label: 'Pulse Sequence',
+          label: 'Pulse sequence',
           jpath: ['info', 'pulseSequence'],
           visible: true,
           format: '',

src/demo/views/SnapshotView.tsx

@@ -389,16 +389,16 @@ const customWorkspaces: CustomWorkspaces = {
     infoBlock: {
       visible: false,
       fields: [
-        { label: 'name', jpath: ['info', 'name'], visible: true, format: '' },
+        { label: 'Name', jpath: ['info', 'name'], visible: true, format: '' },
         {
-          label: 'Number Of Scan',
+          label: 'Number of scans',
           jpath: ['info', 'numberOfScans'],
           visible: true,
           format: '0',
         },
 
         {
-          label: 'Pulse Sequence',
+          label: 'Pulse sequence',
           jpath: ['info', 'pulseSequence'],
           visible: true,
           format: '',

test-e2e/panels/peaks.test.ts

@@ -5,10 +5,12 @@ import { test, expect } from '@playwright/test';
 import NmriumPage from '../NmriumPage';
 import { selectRange } from '../utilities/selectRange';
 
+const PEAK_ANNOTATIONS_SELECTOR =
+  '_react=Peaks[peaksSource="peaks"] >> _react=PeakAnnotation';
+const FIRST_PEAK_ANNOTATION_SELECTOR = `${PEAK_ANNOTATIONS_SELECTOR} >> nth=0 >> text`;
+
 async function addPeaks(nmrium: NmriumPage) {
-  const peaksAnnotationLocator = nmrium.page.locator(
-    '_react=Peaks[peaksSource="peaks"] >> _react=PeakAnnotation',
-  );
+  const peaksAnnotationLocator = nmrium.page.locator(PEAK_ANNOTATIONS_SELECTOR);
 
   // select peak picking tool
   await nmrium.clickTool('peakPicking');
@@ -38,13 +40,11 @@ async function addPeaks(nmrium: NmriumPage) {
 }
 
 async function shiftX(nmrium: NmriumPage) {
-  const peakLocator = nmrium.page.locator(
-    '_react=Peaks[peaksSource="peaks"] >> _react=PeakAnnotation >> nth=0 >> text',
-  );
+  const peakLocator = nmrium.page.locator(FIRST_PEAK_ANNOTATION_SELECTOR);
 
   await peakLocator.click();
   const peakInputLocator = nmrium.page.locator('_react=PeakEditionField');
-  await peakInputLocator.type('10');
+  await peakInputLocator.pressSequentially('10');
   await peakInputLocator.press('Enter');
 
   await expect(peakLocator).toHaveText('10.00');
@@ -58,28 +58,22 @@ async function shiftSpectraByDeltaColumn(nmrium: NmriumPage) {
   await ppmColumnLocator.dblclick();
   const inputLocator = ppmColumnLocator.locator('input');
   await inputLocator.selectText();
-  await inputLocator.type('20');
+  await inputLocator.fill('20');
   await inputLocator.press('Enter');
 
-  const peakInputLocator = nmrium.page.locator(
-    '_react=Peaks[peaksSource="peaks"] >> _react=PeakAnnotation >> nth=0 >>text',
-  );
+  const peakInputLocator = nmrium.page.locator(FIRST_PEAK_ANNOTATION_SELECTOR);
   await expect(peakInputLocator).toHaveText('20.00');
 }
 
 async function deletePeak(nmrium: NmriumPage) {
   const peakAnnotationLocator = nmrium.page.locator(
-    '_react=Peaks[peaksSource="peaks"] >> _react=PeakAnnotation >> nth=0',
+    FIRST_PEAK_ANNOTATION_SELECTOR,
   );
   await peakAnnotationLocator.hover();
   await nmrium.page.keyboard.press('Delete');
 
   // Test that the peak deleted
-  await expect(
-    nmrium.page.locator(
-      '_react=Peaks[peaksSource="peaks"] >> _react=PeakAnnotation',
-    ),
-  ).toHaveCount(1);
+  await expect(nmrium.page.locator(PEAK_ANNOTATIONS_SELECTOR)).toHaveCount(1);
 }
 
 test('add/shift/delete peaks', async ({ page }) => {
@@ -111,11 +105,7 @@ test('Automatic peak picking should work', async ({ page }) => {
   //apply auto ranges detection
   await nmrium.page.click('button >> text=Apply');
 
-  await expect(
-    nmrium.page.locator(
-      '_react=Peaks[peaksSource="peaks"] >> _react=PeakAnnotation',
-    ),
-  ).toHaveCount(50);
+  await expect(nmrium.page.locator(PEAK_ANNOTATIONS_SELECTOR)).toHaveCount(50);
 });
 test('Processed spectra peaks', async ({ page }) => {
   const nmrium = await NmriumPage.create(page);

test-e2e/panels/ranges.test.ts

@@ -25,7 +25,7 @@ async function shiftSignal(nmrium: NmriumPage) {
   await signalColumnLocator.dblclick();
   const inputLocator = signalColumnLocator.locator('input');
   await inputLocator.selectText();
-  await inputLocator.type('100');
+  await inputLocator.fill('100');
   await inputLocator.press('Enter');
   const trackerLocator = nmrium.page.locator('_react=XAxis >> text=100');
   await expect(trackerLocator).toHaveCount(1);