feat: prototype for using browse options in content view

Author: michaelwenk

cmd/mb3dbtool/main.go

@@ -5,16 +5,17 @@ import (
 	"bufio"
 	"bytes"
 	"fmt"
-	"github.com/MassBank/MassBank3/pkg/config"
-	"github.com/MassBank/MassBank3/pkg/database"
-	"github.com/MassBank/MassBank3/pkg/massbank"
-	"github.com/go-git/go-git/v5"
 	"io"
 	"log"
 	"net/http"
 	"os"
 	"path/filepath"
 	"strings"
+
+	"github.com/MassBank/MassBank3/pkg/config"
+	"github.com/MassBank/MassBank3/pkg/database"
+	"github.com/MassBank/MassBank3/pkg/massbank"
+	"github.com/go-git/go-git/v5"
 )
 
 func main() {

cmd/mb3server/src/api_default.go

@@ -99,7 +99,7 @@ func (c *DefaultApiController) GetBrowseOptions(w http.ResponseWriter, r *http.R
 	query := r.URL.Query()
 	instrumentTypeParam := strings.Split(query.Get("instrument_type"), ",")
 	msTypeParam := strings.Split(query.Get("ms_type"), ",")
-	ionModeParam := query.Get("ion-mode")
+	ionModeParam := query.Get("ion_mode")
 	contributorParam := strings.Split(query.Get("contributor"), ",")
 	result, err := c.service.GetBrowseOptions(r.Context(), instrumentTypeParam, msTypeParam, ionModeParam, contributorParam)
 	// If an error occurred, encode the error with the status code

docker/env.dist

@@ -31,10 +31,10 @@ MB3_FRONTEND_BASE_URL=/massbank3/
 # ----------------------
 
 # The database type: "mongodb" or "postgres"
-DB_TYPE=postgres
+DB_TYPE=mongodb
 
 # The port of the database
-DB_PORT=5432
+DB_PORT=27017
 
 # The database user name
 DB_USER=massbank3
@@ -43,7 +43,7 @@ DB_USER=massbank3
 DB_PASSWORD=massbank3password
 
 # The database host name
-DB_HOST=postgres
+DB_HOST=mongodb
 
 # The name of the database
 DB_NAME=massbank3

web-frontend/package-lock.json

@@ -33,6 +33,7 @@
   },
   "dependencies": {
     "@types/d3": "^7.4.3",
+    "axios": "^1.6.8",
     "chart.js": "^4.4.2",
     "d3": "^7.8.5",
     "openchemlib": "^8.7.2",

web-frontend/package.json

@@ -0,0 +1,5 @@
+.CheckBox {
+  text-align: center;
+  width: 100%;
+  height: 100%;
+}

web-frontend/src/elements/basic/CheckBox.scss

@@ -0,0 +1,50 @@
+import './CheckBox.scss';
+import {
+  CSSProperties,
+  ChangeEvent,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
+
+type InputProps = {
+  defaultValue: boolean;
+  // eslint-disable-next-line no-unused-vars
+  onChange: (isChecked: boolean) => void;
+  label?: string;
+  className?: string;
+  style?: CSSProperties;
+};
+
+function CheckBox({
+  defaultValue,
+  onChange,
+  label,
+  className = 'CheckBox',
+  style,
+}: InputProps) {
+  const [isChecked, setIsChecked] = useState<boolean>(defaultValue);
+
+  const handleOnChange = useCallback(
+    (e: ChangeEvent<HTMLInputElement>) => {
+      // e.preventDefault();
+      e.stopPropagation();
+
+      setIsChecked(!isChecked);
+      onChange(!isChecked);
+    },
+    [isChecked, onChange],
+  );
+
+  return useMemo(
+    () => (
+      <div className={className} style={style}>
+        <input type="checkbox" checked={isChecked} onChange={handleOnChange} />
+        <label>{label}</label>
+      </div>
+    ),
+    [className, handleOnChange, isChecked, label, style],
+  );
+}
+
+export default CheckBox;

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

@@ -7,6 +7,7 @@ import Button from '../../../basic/Button';
 import RecordView from '../../../record/RecordView';
 import generateID from '../../../../utils/generateID';
 import Record from '../../../../types/Record';
+import axios from 'axios';
 import {
   createSearchParams,
   useNavigate,
@@ -26,14 +27,13 @@ function AccessionView() {
   async function getRecord(id: string) {
     const url = import.meta.env.VITE_MB3_API_URL + '/v1/records/' + id;
 
-    const resp = await fetch(url);
-    if (resp.ok) {
-      const jsonData = await resp.json();
-
-      if (typeof jsonData === 'string') {
+    const resp = await axios.get(url);
+    if (resp.status === 200) {
+      const data = await resp.data;
+      if (typeof data === 'string') {
         return undefined;
       }
-      return jsonData;
+      return data;
     }
 
     return undefined;