#21 Add frontend for record

cmd/mb3server/src/api-impl.go

@@ -137,3 +137,81 @@ func GetRecords(limit int32, offset int32) (*SearchResult, error) {
 	}
 	return &result, nil
 }
+
+func GetRecord(accession string) (*MbRecord, error) {
+	if err := initDB(); err != nil {
+		return nil, err
+	}
+	record, err := db.GetRecord(&accession)
+	if err != nil {
+		return nil, err
+	}
+	result := MbRecord{
+		Accession:  record.Accession.String,
+		Deprecated: MbRecordDeprecated{},
+		Title:      record.RecordTitle.String,
+		Date: MbRecordDate{
+			Updated:  record.Date.Updated.String(),
+			Created:  record.Date.Created.String(),
+			Modified: record.Date.Modified.String(),
+		},
+		Authors:     nil,
+		License:     record.License.String,
+		Copyright:   "",
+		Publication: "",
+		Project:     "",
+		Comments:    nil,
+		Compound: MbRecordCompound{
+			Names:     nil,
+			Classes:   nil,
+			Formula:   record.Compound.Formula.String,
+			CdkDepict: nil,
+			Mass:      record.Compound.Mass.Value,
+			Smiles:    record.Compound.Smiles.String,
+			Inchi:     record.Compound.Inchi.String,
+			Link:      nil,
+		},
+		Species: MbRecordSpecies{
+			Name:    "",
+			Lineage: nil,
+			Link:    nil,
+			Sample:  nil,
+		},
+		Acquisition: MbRecordAcquisition{
+			Instrument:     record.Acquisition.Instrument.String,
+			InstrumentType: record.Acquisition.InstrumentType.String,
+			MassSpectrometry: AcMassSpec{
+				MsType:  "",
+				IonMode: "",
+				Subtags: nil,
+			},
+			Chromatography: nil,
+			General:        nil,
+			IonMobility:    nil,
+		},
+		MassSpectrometry: MbRecordMassSpectrometry{
+			FocusedIon:     nil,
+			DataProcessing: nil,
+		},
+		Peak: MbRecordPeak{
+			Splash: record.Peak.Splash.String,
+			Annotation: MbRecordPeakAnnotation{
+				Header: nil,
+				Values: nil,
+			},
+			NumPeak: int32(record.Peak.NumPeak.Value),
+			Peak: MbRecordPeakPeak{
+				Header: nil,
+				Values: nil,
+			},
+		},
+	}
+	for _, author := range record.Authors.Value {
+		result.Authors = append(result.Authors, AuthorsInner{
+			Name:        author.Name,
+			MarcRelator: author.MarcRelator,
+		})
+	}
+	return &result, nil
+
+}

cmd/mb3server/src/api_default_service.go

@@ -62,8 +62,8 @@ func (s *DefaultApiService) GetRecord(ctx context.Context, accession string) (Im
 	// TODO - update GetRecord with the required logic for this service method.
 	// Add api_default_service.go to the .openapi-generator-ignore to avoid overwriting this service implementation when updating open api generation.
 
-	//TODO: Uncomment the next line to return response Response(200, MbRecord{}) or use other options such as http.Ok ...
-	//return Response(200, MbRecord{}), nil
+	record, err := GetRecord(accession)
+	return Response(200, record), err
 
 	return Response(http.StatusNotImplemented, nil), errors.New("GetRecord method not implemented")
 }

web-frontend/package.json

@@ -17,14 +17,16 @@
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/adapter-node": "^1.2.3",
 		"@sveltejs/kit": "^1.5.0",
+		"@tsconfig/svelte": "^4.0.1",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.45.0",
 		"eslint": "^8.28.0",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"svelte": "^3.54.0",
-		"svelte-check": "^3.0.1",
+		"svelte-check": "^3.3.1",
+		"svelte-preprocess": "^5.0.3",
 		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
+		"typescript": "^5.0.4",
 		"vite": "^4.2.0",
 		"vitest": "^0.25.3"
 	},

web-frontend/src/app.css

@@ -5,4 +5,18 @@ body,html {
     line-height: 1.5;
 }
 
+.error .info{
+    border: 1px solid;
+    margin: 10px 0px;
+	padding: 15px 10px 15px 50px;
+}
+
+.error{
+    color: #D8000C;
+    background-color: #FFBABA;
+}
 
+.info{
+    color: #00529B;
+    background-color: #BDE5F8;
+}

web-frontend/src/lib/components/Header.svelte

@@ -9,6 +9,7 @@
         width: 100%;
         padding: 0.5em ;
         background: darkgrey;
+        position: sticky;
     }
 
     h1 {
@@ -18,4 +19,4 @@
     b {
         font-weight: 600;
     }
-</style>
+</style>

web-frontend/src/lib/components/MainNav.svelte

@@ -1,3 +1,8 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    let acc: string;
+</script>
+
 <div class="pure-menu pure-menu-horizontal">
      <ul class="pure-menu-list">
          <li class="pure-menu-item">
@@ -13,7 +18,7 @@
             <a href="https://github.com/MassBank/MassBank-data/releases/latest" target="_blank" class="pure-menu-link">Download</a>
         </li>
          <li class="pure-menu-item">
-    <input type="search" placeholder="Accession"><button>Go</button>
+        <input type="search" placeholder="Accession" bind:value="{acc}"><button on:click={() => goto('/record/'+acc)}>Go</button>
          </li>
          <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
              <a href="#" id="moreLink" class="pure-menu-link">More</a>
@@ -31,6 +36,3 @@
          </li>
      </ul>
 </div>
-
-
-

web-frontend/src/lib/components/ShortRecordSummary.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    export let record: any;
+</script>
+<div class="card short-record">
+                <div class="record-name">{record.name}</div>
+                <div>{record.formula}</div>
+                <div>{record.smiles}</div>
+                <div>{record.mass}</div>
+                    <div class="spectra">{record.spectra.length} Spectra :</div>
+                        {#each record.spectra as spectrum}
+                            <a href="/record/{spectrum.id}"><div>{spectrum.id} {spectrum.title}</div></a>
+                    {/each}
+                </div>
+
+<style>
+    .card {
+        border: solid #a9a9a9;
+        margin: 0.5em;
+    }
+
+    .record-name {
+        font-weight: bold;
+        font-size: 1.5em;
+    }
+</style>

web-frontend/src/routes/+layout.svelte

@@ -3,13 +3,33 @@
     import MainFoot from "$component/MainFoot.svelte"
     import Logos from "$component/Logos.svelte";
     import Header from "$lib/components/Header.svelte";
+    import { page } from '$app/stores';
     import 'purecss';
     import '../app.css'
 </script>
-<MainNav></MainNav>
-
-<slot></slot>
-
-<hr>
+<div class="head">
+    <MainNav></MainNav>
+    <Header>{$page.data.title}</Header>
+</div>
+<div class="main"><slot></slot></div>
+<div class="foot">
 <MainFoot></MainFoot>
 <Logos></Logos>
+</div>
+
+<style>
+    .head, .foot{
+        width: 100%;
+        background: #eeeeee;
+        padding: 10px 0;
+    }
+    .head{
+        position: sticky;
+        top: 0;
+    }
+    .foot{
+        position: fixed;
+        bottom: 0;
+    }
+
+</style>

web-frontend/src/routes/+page.svelte

@@ -5,7 +5,6 @@
 </script>
 
 
-<Header>MassBank Europe</Header>
 <div></div>
 <div class="pure-g">
     <div class="pure-u-1-2"><img class="pure-img" id="logo" src="images/logo.svg"></div>

web-frontend/src/routes/+page.ts

@@ -0,0 +1,6 @@
+/** @type {import('./$types').PageLoad} */
+export function load() {
+    return {
+        title: "Massbank Europe"
+    };
+}

web-frontend/src/routes/about/+page.svelte

@@ -1,4 +0,0 @@
-<script>
-    import Header from "$lib/components/Header.svelte";
-</script>
-<Header>About Massbank</Header>

web-frontend/src/routes/about/+page.ts

@@ -0,0 +1,6 @@
+/** @type {import('./$types').PageLoad} */
+export function load() {
+    return {
+        title: "About Massbank"
+    };
+}