chore: include mass_spectrometry_data_processing, mass_spectrometry_focused_ion and acquisition_chromatography in RecordView.tsx; close #82

Author: michaelwenk

web-frontend/src/elements/record/AcquisitionTable.tsx

@@ -126,6 +126,24 @@ function AcquisitionTable({ acquisition, width, height }: InputProps) {
       key: 'key-ion-mode',
     });
 
+    if (acquisition.chromatography) {
+      acquisition.chromatography.forEach((c, i) => {
+        const split = splitStringAndCapitaliseFirstLetter(c.subtag, '_', ' ');
+        dataSource.push({
+          Parameter: split,
+          Value: (
+            <ExportableContent
+              mode="copy"
+              title={`Copy '${split}' to clipboard`}
+              component={c.value}
+              onClick={() => copyTextToClipboard(split, c.value)}
+            />
+          ),
+          key: `key-chromatography-${i}`,
+        });
+      });
+    }
+
     if (acquisition.mass_spectrometry.subtags) {
       acquisition.mass_spectrometry.subtags.forEach((s, i) => {
         const split = splitStringAndCapitaliseFirstLetter(s.subtag, '_', ' ');
@@ -134,7 +152,7 @@ function AcquisitionTable({ acquisition, width, height }: InputProps) {
           Value: (
             <ExportableContent
               mode="copy"
-              title={"Copy '${split}' to clipboard"}
+              title={`Copy '${split}' to clipboard`}
               component={s.value}
               onClick={() => copyTextToClipboard(split, s.value)}
             />

web-frontend/src/elements/record/MassSpectrometryTable.tsx

@@ -0,0 +1,92 @@
+import './Table.scss';
+
+import { Table } from 'antd';
+import { CSSProperties, useMemo } from 'react';
+import { splitStringAndCapitaliseFirstLetter } from '../../utils/stringUtils';
+import ExportableContent from '../common/ExportableContent';
+import copyTextToClipboard from '../../utils/copyTextToClipboard';
+import MassSpectrometry from '../../types/record/MassSpectrometry';
+
+type InputProps = {
+  massSpectrometry: MassSpectrometry | undefined;
+  width: CSSProperties['width'];
+  height: CSSProperties['height'];
+};
+
+function MassSpectrometryTable({
+  massSpectrometry,
+  width,
+  height,
+}: InputProps) {
+  return useMemo(() => {
+    if (!massSpectrometry) {
+      return null;
+    }
+
+    const columns = [
+      {
+        title: 'Parameter',
+        dataIndex: 'Parameter',
+        key: 'parameter',
+        align: 'center' as const,
+      },
+      {
+        title: 'Value',
+        dataIndex: 'Value',
+        key: 'value',
+        align: 'center' as const,
+      },
+    ];
+
+    const dataSource: { [key: string]: string | JSX.Element }[] = [];
+
+    if (massSpectrometry.focused_ion) {
+      massSpectrometry.focused_ion.forEach((c, i) => {
+        const split = splitStringAndCapitaliseFirstLetter(c.subtag, '_', ' ');
+        dataSource.push({
+          Parameter: split,
+          Value: (
+            <ExportableContent
+              mode="copy"
+              title={`Copy '${split}' to clipboard`}
+              component={c.value}
+              onClick={() => copyTextToClipboard(split, c.value)}
+            />
+          ),
+          key: `key-chromatography-${i}`,
+        });
+      });
+    }
+
+    if (massSpectrometry.data_processing) {
+      massSpectrometry.data_processing.forEach((s, i) => {
+        const split = splitStringAndCapitaliseFirstLetter(s.subtag, '_', ' ');
+        dataSource.push({
+          Parameter: split,
+          Value: (
+            <ExportableContent
+              mode="copy"
+              title={`Copy '${split}' to clipboard`}
+              component={s.value}
+              onClick={() => copyTextToClipboard(split, s.value)}
+            />
+          ),
+          key: `key-subtag-${i}`,
+        });
+      });
+    }
+
+    return (
+      <Table
+        className="table"
+        style={{ width, height }}
+        sticky
+        columns={columns}
+        dataSource={dataSource}
+        pagination={false}
+      />
+    );
+  }, [height, massSpectrometry, width]);
+}
+
+export default MassSpectrometryTable;

web-frontend/src/elements/record/RecordView.tsx

@@ -12,6 +12,7 @@ import InformationTable from './InformationTable';
 import SectionDivider from '../basic/SectionDivider';
 import Segmented from '../basic/Segmented';
 import segmentedWidth from '../../constants/segmentedWidth';
+import MassSpectrometryTable from './MassSpectrometryTable';
 
 type inputProps = {
   record: Record;
@@ -89,6 +90,19 @@ function RecordView({ record, width, height }: inputProps) {
       elementLabels.push('Peak Annotation');
     }
 
+    const massSpectrometry = (
+      <Content>
+        {buildDivider('Mass Spectrometry')}
+        <MassSpectrometryTable
+          massSpectrometry={record.mass_spectrometry}
+          width="100%"
+          height="auto"
+        />
+      </Content>
+    );
+    elements.push(massSpectrometry);
+    elementLabels.push('Mass Spectrometry');
+
     const acquisition = (
       <Content>
         {buildDivider('Acquisition')}