Merge pull request #1 from michaelwenk/dev-frontend

Introduction of React-based frontend with accession webpage containing an interactive spectrum chart and peak table

Dockerfile-frontend

@@ -0,0 +1,16 @@
+FROM node:19-alpine
+# Create app directory
+WORKDIR /app
+
+# Bundle app source
+COPY ./web-frontend/ .
+
+# install dependencies
+# RUN npm install --legacy-peer-deps
+RUN npm install
+
+# for production mode
+RUN node ./node_modules/rimraf dist && node ./node_modules/typescript/bin/tsc && node ./node_modules/vite/bin/vite.js build
+
+EXPOSE 3000
+CMD npm run preview

cmd/mb3server/src/api-impl.go

@@ -1,14 +1,15 @@
 package mb3server
 
 import (
-	"github.com/MassBank/MassBank3/pkg/config"
-	"github.com/MassBank/MassBank3/pkg/database"
-	"github.com/MassBank/MassBank3/pkg/massbank"
 	"io"
 	"log"
 	"net/http"
 	"net/url"
 	"regexp"
+
+	"github.com/MassBank/MassBank3/pkg/config"
+	"github.com/MassBank/MassBank3/pkg/database"
+	"github.com/MassBank/MassBank3/pkg/massbank"
 )
 
 var db database.MB3Database = nil
@@ -307,6 +308,44 @@ func GetRecord(accession string) (*MbRecord, error) {
 			MarcRelator: author.MarcRelator,
 		})
 	}
+
+	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)
+	// }
+
+	for i := 0; i < len(mzs); i++ {
+		result.Peak.Peak.Values = append(result.Peak.Peak.Values, MbRecordPeakPeakValuesInner{
+			Mz:        mzs[i],
+			Intensity: ints[i],
+			Rel:       rels[i],
+		})
+	}
+
+	// var header = []string{}
+	// for _, h := range *&record.Peak.Annotation.Header {
+	// 	fmt.Printf("%v\n", h)
+	// 	header = append(header, h)
+	// }
+	// result.Peak.Annotation.Header = header
+
+	// for _, v := range *&record.Peak.Annotation.Values {
+	// 	fmt.Printf("%v\n", v)
+	// 	// for _, k := range *&v {
+	// 	// 	fmt.Printf("%v\n", k)
+	// 	// }
+	// }
+
+	// // result.Peak.Annotation.Values =
+
 	return &result, nil
 
 }

cmd/mb3server/src/model_mb_record_peak_peak_values_inner.go

@@ -19,7 +19,7 @@ type MbRecordPeakPeakValuesInner struct {
 	Intensity float64 `json:"intensity,omitempty"`
 
 	// Relative intensity of the peak
-	Rel int32 `json:"rel,omitempty"`
+	Rel uint `json:"rel,omitempty"`
 }
 
 // AssertMbRecordPeakPeakValuesInnerRequired checks if the required fields are not zero-ed

docker/docker-compose-deploy.yaml

@@ -27,7 +27,7 @@ services:
       service: mb3frontend
     build:
       context: ..
-      dockerfile: Dockerfile-svelte
+      dockerfile: Dockerfile-frontend
     environment:
       MB3_API_URL: "http://${MB3_API_HOST}:${MB3_API_PORT}"
     ports:

pkg/database/postgres.go

@@ -5,13 +5,14 @@ import (
 	"encoding/json"
 	"errors"
 	"fmt"
+	"log"
+	"strconv"
+
 	"github.com/Code-Hex/dd"
 	"github.com/MassBank/MassBank3/pkg/massbank"
 	"github.com/lib/pq"
 	_ "github.com/lib/pq"
 	"github.com/nullism/bqb"
-	"log"
-	"strconv"
 )
 
 // PostgresSQLDB is a struct representing a postgres connection. This should implement

pkg/database/testdata_test.go

@@ -1,9 +1,10 @@
 package database
 
 import (
-	"github.com/MassBank/MassBank3/pkg/massbank"
 	"os"
 	"time"
+
+	"github.com/MassBank/MassBank3/pkg/massbank"
 )
 
 func getEnv(name string, fallback string) string {

pkg/massbank/bson.go

@@ -2,10 +2,11 @@ package massbank
 
 import (
 	"fmt"
-	"go.mongodb.org/mongo-driver/bson"
-	"go.mongodb.org/mongo-driver/bson/bsontype"
 	"strings"
 	"time"
+
+	"go.mongodb.org/mongo-driver/bson"
+	"go.mongodb.org/mongo-driver/bson/bsontype"
 )
 
 func (p DatabaseProperty) MarshalBSONValue() (bsontype.Type, []byte, error) {

pkg/massbank/parser.go

@@ -217,6 +217,7 @@ func (mb *MassBank2) parsePeakValue(line string) error {
 	var mz, intens float64
 	var err error
 	var rel uint64
+
 	if mz, err = strconv.ParseFloat(svals[0], 32); err != nil {
 		return errors.New("could not parse mz Value")
 	}

web-frontend/.babelrc

@@ -0,0 +1,7 @@
+{
+  "plugins": ["@babel/plugin-transform-modules-commonjs"],
+  "presets": [
+    "@babel/preset-typescript",
+    ["@babel/preset-react", { "runtime": "automatic" }]
+  ]
+}

web-frontend/.dockerignore

@@ -0,0 +1,4 @@
+node_modules
+npm-debug.log
+dist
+data

web-frontend/.eslintignore

@@ -1,13 +1,3 @@
-.DS_Store
+dist
 node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
-package-lock.json
-yarn.lock
+public

web-frontend/.eslintrc

@@ -0,0 +1,16 @@
+{
+  "env": { "browser": true, "node": true },
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "prettier", "react"],
+  "extends": [
+    "prettier",
+    "eslint:recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "warn",
+    "no-undef": "off",
+    "no-console": "warn",
+    "no-unused-vars": "warn"
+  }
+}

web-frontend/.gitignore

@@ -1,10 +1,28 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# VSCode
+.vscode
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/dist
+
+# misc
 .DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.eslintcache

web-frontend/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "arrowParens": "always",
+  "tabWidth": 2,
+  "singleQuote": true,
+  "semi": true,
+  "trailingComma": "all"
+}

web-frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MassBank Europe</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>