Merge pull request #30 from michaelwenk/dev-frontend

Added annotation data in frontend & fixed wrong localhost and port in vite preview

api/schemas/FilterSchemas.yaml

@@ -13,7 +13,7 @@ components:
         enum: [ MS,MS2,MS3,MS4 ]
     IonMode:
       type: string
-      desciption: "enum: [ POSITIVE, NEGATIVE ]"
+      description: "enum: [ POSITIVE, NEGATIVE ]"
     CompoundName:
       type: string
     ExactMass:
@@ -35,7 +35,7 @@ components:
         description: 'A m/z prefixed with "and" or "or" before a colon, e.g. "or:143.0".'
         pattern: "(and|or):[0-9]+(\\.[0-9]*)?"
     Intensity:
-      description: "Releative intensity for peak search"
+      description: "Relative intensity for peak search"
       type: integer
       default: 100
       minimum: 1

cmd/mb3server/src/api-impl.go

@@ -6,6 +6,7 @@ import (
 	"net/http"
 	"net/url"
 	"regexp"
+	"strconv"
 
 	"github.com/MassBank/MassBank3/pkg/config"
 	"github.com/MassBank/MassBank3/pkg/database"
@@ -309,19 +310,12 @@ func GetRecord(accession string) (*MbRecord, error) {
 		})
 	}
 
-	var mzs = *&record.Peak.Peak.Mz         //[]float64{}
-	var ints = *&record.Peak.Peak.Intensity //[]float64{}
-	var rels = *&record.Peak.Peak.Rel       //[]uint{}
-	// for _, mz := range *&record.Peak.Peak.Mz {
-	// 	mzs = append(mzs, mz)
-	// }
-	// for _, int := range *&record.Peak.Peak.Intensity {
-	// 	ints = append(ints, int)
-	// }
-	// for _, rel := range *&record.Peak.Peak.Rel {
-	// 	rels = append(rels, rel)
-	// }
+	// insert peak data
+	result.Peak.Peak.Header = record.Peak.Peak.Header
 
+	var mzs = record.Peak.Peak.Mz
+	var ints = record.Peak.Peak.Intensity
+	var rels = record.Peak.Peak.Rel
 	for i := 0; i < len(mzs); i++ {
 		result.Peak.Peak.Values = append(result.Peak.Peak.Values, MbRecordPeakPeakValuesInner{
 			Mz:        mzs[i],
@@ -330,21 +324,31 @@ func GetRecord(accession string) (*MbRecord, error) {
 		})
 	}
 
-	// var header = []string{}
-	// for _, h := range *&record.Peak.Annotation.Header {
-	// 	fmt.Printf("%v\n", h)
-	// 	header = append(header, h)
-	// }
-	// result.Peak.Annotation.Header = header
+	// insert annotation data
+	if record.Peak.Annotation != nil {
 
-	// for _, v := range *&record.Peak.Annotation.Values {
-	// 	fmt.Printf("%v\n", v)
-	// 	// for _, k := range *&v {
-	// 	// 	fmt.Printf("%v\n", k)
-	// 	// }
-	// }
+		result.Peak.Annotation.Header = record.Peak.Annotation.Header
 
-	// // result.Peak.Annotation.Values =
+		var annotationValues = [][]string{}
+		for _, headerKey := range record.Peak.Annotation.Header {
+			annotationValues = append(annotationValues, []string{})
+
+			for _, v := range record.Peak.Annotation.Values[headerKey] {
+				m, ok := v.(float64)
+				if ok {
+					s := strconv.FormatFloat(m, 'f', -1, 64)
+					annotationValues[len(annotationValues)-1] = append(annotationValues[len(annotationValues)-1], s)
+				} else {
+					m, ok := v.(string)
+					if ok {
+						annotationValues[len(annotationValues)-1] = append(annotationValues[len(annotationValues)-1], m)
+					}
+				}
+			}
+		}
+
+		result.Peak.Annotation.Values = annotationValues
+	}
 
 	return &result, nil
 

web-frontend/package.json

@@ -4,7 +4,7 @@
   "scripts": {
     "start": "vite --host localhost --port 3000 --strictPort --open",
     "build": "rimraf dist && tsc && vite build",
-    "preview": "vite preview --host 127.0.0.1 --port 5173 -d --strictPort",
+    "preview": "vite preview --host 0.0.0.0 --port 3000 -d --strictPort",
     "compile": "tsc",
     "clean-install": "rm package-lock.json && rm -rf node_modules && npm i",
     "eslint": "eslint . --ext .js,.jsx,.ts,.tsx",

web-frontend/src/elements/basic/Chart.tsx

@@ -1,15 +1,15 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { brushX, scaleLinear, select } from 'd3';
-import PeakData from '../../types/PeakData';
 import ChartElement from './ChartElement';
 import Button from './Button';
+import Peak from '../../types/peak/Peak';
 
 const MARGIN = { top: 55, right: 30, bottom: 50, left: 70, button: 35 };
 
 type InputProps = {
-  peakData: PeakData[];
+  peakData: Peak[];
   // eslint-disable-next-line no-unused-vars
-  onZoom: (fpd: PeakData[]) => void;
+  onZoom: (fpd: Peak[]) => void;
   width?: number;
   height?: number;
 };

web-frontend/src/elements/basic/ChartElement.tsx

@@ -1,12 +1,12 @@
 import './ChartElement.scss';
 
 import { MouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
-import PeakData from '../../types/PeakData';
 import { ScaleLinear } from 'd3';
 import { useHighlight, useHighlightData } from '../../highlight/Index';
+import Peak from '../../types/peak/Peak';
 
 type InputProps = {
-  pd: PeakData;
+  pd: Peak;
   xScale: ScaleLinear<number, number, never>;
   yScale: ScaleLinear<number, number, never>;
   showLabel: boolean;
@@ -79,7 +79,7 @@ function ChartElement({ pd, xScale, yScale, showLabel }: InputProps) {
               yScale(pd.rel || 0) - 10
             }) rotate(-30)`}
           >
-            {pd.mz}
+            {pd.mz.toFixed(4)}
           </text>
         )}
       </g>

web-frontend/src/elements/record/AnnotationTable.scss

@@ -0,0 +1,20 @@
+.AnnotationTable {
+  overflow: scroll;
+
+  table {
+    width: 100%;
+    height: 100%;
+    text-align: center;
+
+    thead th {
+      position: sticky;
+      position: -webkit-sticky;
+      top: 0;
+      background: lightgrey;
+    }
+
+    .auto-height {
+      height: 100%;
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+import './AnnotationTable.scss';
+
+import { useMemo } from 'react';
+import PeakAnnotation from '../../types/peak/PeakAnnotation';
+
+type InputProps = {
+  annotation: PeakAnnotation;
+  width?: number | string;
+  height?: number | string;
+};
+
+function AnnotationTable({
+  annotation,
+  width = '100%',
+  height = 400,
+}: InputProps) {
+  const annotationTable = useMemo(() => {
+    const numHeaders = annotation.header.length;
+    const numPeaks = annotation.values[0].length;
+
+    const headerContent = (
+      <tr key={'anno-header'}>
+        {annotation.header.map((h) => (
+          <th key={'anno-header-' + h}>{h.split('_').join(' ')}</th>
+        ))}
+      </tr>
+    );
+
+    const bodyContent: JSX.Element[] = [];
+    for (let i = 0; i < numPeaks; i++) {
+      const rows: JSX.Element[] = [];
+      for (let h = 0; h < numHeaders; h++) {
+        rows.push(
+          <td key={'anno-row-' + i + '-' + h}>{annotation.values[h][i]}</td>,
+        );
+      }
+      bodyContent.push(<tr key={'anno-row-' + i}>{rows}</tr>);
+    }
+
+    return (
+      <table>
+        <thead>{headerContent}</thead>
+        <tbody>
+          {bodyContent}
+          <tr className="auto-height" />
+        </tbody>
+      </table>
+    );
+  }, [annotation]);
+
+  return (
+    <div className="AnnotationTable" style={{ width, height }}>
+      {annotationTable}
+    </div>
+  );
+}
+
+export default AnnotationTable;

web-frontend/src/elements/record/PeakTable.scss

@@ -4,7 +4,6 @@
   table {
     width: 100%;
     height: 100%;
-    table-layout: fixed;
     text-align: center;
 
     thead th {
@@ -18,10 +17,6 @@
       background-color: lightcyan;
     }
 
-    tr {
-      height: 10px;
-    }
-
     .auto-height {
       height: 100%;
     }

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

@@ -1,18 +1,18 @@
 import './PeakTable.scss';
 
 import { useMemo } from 'react';
-import PeakData from '../../types/PeakData';
 import PeakTableRow from './PeakTableRow';
+import Peak from '../../types/peak/Peak';
 
 type InputProps = {
-  pd: PeakData[];
+  pd: Peak[];
   width: number;
   height: number;
 };
 
 function PeakTable({ pd, width, height }: InputProps) {
   const rows = useMemo(
-    () => pd.map((r) => <PeakTableRow rowData={r} key={r.id} />),
+    () => pd.map((p) => <PeakTableRow peak={p} key={p.id} />),
     [pd],
   );
 
@@ -28,7 +28,7 @@ function PeakTable({ pd, width, height }: InputProps) {
         </thead>
         <tbody>
           {rows}
-          <tr className="auto-height"></tr>
+          <tr className="auto-height" />
         </tbody>
       </table>
     </div>

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

@@ -1,13 +1,13 @@
 import { MouseEvent, useCallback, useMemo } from 'react';
 import { useHighlight } from '../../highlight/Index';
-import PeakData from '../../types/PeakData';
+import Peak from '../../types/peak/Peak';
 
 type InputProps = {
-  rowData: PeakData;
+  peak: Peak;
 };
 
-function PeakTableRow({ rowData }: InputProps) {
-  const highlightRow = useHighlight([rowData.id]);
+function PeakTableRow({ peak }: InputProps) {
+  const highlightRow = useHighlight([peak.id]);
 
   const handleOnMouseEnter = useCallback(
     (e: MouseEvent<HTMLTableRowElement>) => {
@@ -38,18 +38,18 @@ function PeakTableRow({ rowData }: InputProps) {
           backgroundColor: highlightRow.isActive ? 'lightblue' : 'transparent',
         }}
       >
-        <td>{rowData.mz.toFixed(4)}</td>
-        <td>{rowData.intensity.toFixed(2)}</td>
-        <td>{rowData.rel || 0}</td>
+        <td>{peak.mz.toFixed(4)}</td>
+        <td>{peak.intensity.toFixed(1)}</td>
+        <td>{peak.rel || 0}</td>
       </tr>
     ),
     [
       handleOnMouseEnter,
       handleOnMouseLeave,
       highlightRow.isActive,
-      rowData.intensity,
-      rowData.mz,
-      rowData.rel,
+      peak.intensity,
+      peak.mz,
+      peak.rel,
     ],
   );