Skip to content

Commit 9dfe9fb

Browse files
michaelwenkmichaelwenk
committed
chore: added loadable example to similarity search in frontend
1 parent 0f872d9 commit 9dfe9fb

File tree

4 files changed

+92
-27
lines changed

4 files changed

+92
-27
lines changed

‎web-frontend/src/elements/routes/pages/search/SearchPanel.scss

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
$button-container-height: 40px;
2+
13
.search-panel-container {
24
display: flex;
35
flex-direction: column;
@@ -6,15 +8,15 @@
68

79
.search-panel-container-inner {
810
width: 100%;
9-
height: calc(100% - 50px);
11+
height: calc(100% - $button-container-height);
1012
display: flex;
1113
flex-direction: row;
1214
justify-content: center;
1315
align-items: center;
1416

1517
.peak-list-input-container {
1618
width: 100%;
17-
height: calc(100% - 50px);
19+
height: 100%;
1820
display: flex;
1921
flex-direction: column;
2022
justify-content: center;
@@ -23,22 +25,39 @@
2325

2426
.reference-spectra-list-input-container {
2527
width: 100%;
26-
height: calc(100% - 50px);
28+
height: 100%;
2729
display: flex;
2830
flex-direction: column;
2931
justify-content: center;
3032
align-items: center;
3133
}
34+
}
35+
.search-panel-button-container {
36+
width: 100%;
37+
height: $button-container-height;
38+
display: flex;
39+
flex-direction: row;
40+
justify-content: space-around;
41+
align-items: center;
3242

33-
.search-panel-submit-button-container {
34-
width: 100%;
35-
height: 50px;
36-
}
37-
38-
.error-label {
39-
color: red;
43+
.submit-input {
4044
text-align: center;
41-
font-weight: bold;
45+
background-color: transparent;
46+
color: inherit;
47+
border: 1px solid lightgrey;
48+
border-radius: 5px;
49+
padding-left: 2px;
50+
padding-right: 2px;
51+
padding-bottom: 2px;
52+
font: inherit;
53+
cursor: pointer;
54+
outline: inherit;
4255
}
4356
}
57+
58+
.error-label {
59+
color: red;
60+
text-align: center;
61+
font-weight: bold;
62+
}
4463
}

‎web-frontend/src/elements/routes/pages/search/SearchPanel.tsx

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,16 @@ import './SearchPanel.scss';
22

33
import { useCallback } from 'react';
44
import { FieldValues, useForm } from 'react-hook-form';
5+
import Button from '../../../basic/Button';
6+
import {
7+
referencePeakList,
8+
referenceSpectraList,
9+
} from './utils/peakListExample';
10+
11+
const peakListPattern =
12+
/^(\d+(\.\d+)* \d+(\.\d+)*)(\n\d+(\.\d+)* \d+(\.\d+)*)*$/;
13+
const msbnkPattern =
14+
/^(MSBNK-[a-zA-Z0-9_]+-[a-zA-Z0-9_]+)(\nMSBNK-[a-zA-Z0-9_]+-[a-zA-Z0-9_]+)*$/;
515

616
type InputProps = {
717
width: number;
@@ -14,6 +24,7 @@ function SearchPanel({ width, height, onSubmit }: InputProps) {
1424
const {
1525
register,
1626
handleSubmit,
27+
setValue,
1728
formState: { errors },
1829
} = useForm();
1930

@@ -25,17 +36,14 @@ function SearchPanel({ width, height, onSubmit }: InputProps) {
2536
);
2637

2738
const errorLabelHeight = 30;
28-
const peakListPattern = /^(\d+\.\d+ \d+)(\n\d+\.\d+ \d+)*$/;
29-
const msbnkPattern =
30-
/^(MSBNK-[a-zA-Z0-9_]+-[a-zA-Z0-9_]+)(\nMSBNK-[a-zA-Z0-9_]+-[a-zA-Z0-9_]+)*$/;
3139

3240
return (
3341
<form onSubmit={handleSubmit((data) => handleOnSubmit(data))}>
3442
<div className="search-panel-container" style={{ width, height }}>
3543
<div className="search-panel-container-inner">
3644
<div className="peak-list-input-container">
3745
<textarea
38-
placeholder="Enter a peak list: m/z and relative intensities(0-999), delimited by a space. For example:&#10;147.063 11&#10;303.05 999&#10;449.108 64&#10;465.102 588&#10;611.161 670"
46+
placeholder="Enter a peak list: m/z and intensity, delimited by a space. For example:&#10;&#10;147.063 11&#10;303.05 999&#10;449.108 64&#10;465.102 588&#10;611.161 670"
3947
{...register('peakListInputField', {
4048
required: true,
4149
pattern: peakListPattern,
@@ -61,7 +69,7 @@ function SearchPanel({ width, height, onSubmit }: InputProps) {
6169
</div>
6270
<div className="reference-spectra-list-input-container">
6371
<textarea
64-
placeholder="Enter reference spectra:&#10;MSBNK-IPB_Halle-PB001341&#10;MSBNK-IPB_Halle-PB006202&#10;MSBNK-IPB_Halle-PB006203&#10;MSBNK-IPB_Halle-PB001342&#10;MSBNK-IPB_Halle-PB001343"
72+
placeholder="Enter reference spectra. For example:&#10;&#10;MSBNK-IPB_Halle-PB001341&#10;MSBNK-IPB_Halle-PB006202&#10;MSBNK-IPB_Halle-PB006203&#10;MSBNK-IPB_Halle-PB001342&#10;MSBNK-IPB_Halle-PB001343"
6573
{...register('referenceSpectraInputField', {
6674
required: false,
6775
pattern: msbnkPattern,
@@ -85,8 +93,23 @@ function SearchPanel({ width, height, onSubmit }: InputProps) {
8593
)}
8694
</div>
8795
</div>
88-
<div className="search-panel-submit-button-container">
89-
<input type="submit" value="Search" />
96+
<div className="search-panel-button-container">
97+
<Button
98+
child={'Load Example'}
99+
onClick={() => {
100+
setValue('peakListInputField', referencePeakList.join('\n'), {
101+
shouldValidate: true,
102+
});
103+
setValue(
104+
'referenceSpectraInputField',
105+
referenceSpectraList.join('\n'),
106+
{
107+
shouldValidate: true,
108+
},
109+
);
110+
}}
111+
/>
112+
<input type="submit" value="Search" className="submit-input" />
90113
</div>
91114
</div>
92115
</form>

‎web-frontend/src/elements/routes/pages/search/SearchView.tsx

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ function SearchView() {
2222
const [hits, setHits] = useState<Hit[]>([]);
2323

2424
const searchPanelWidth = width;
25-
const searchPanelHeight = 400;
25+
const searchPanelHeight = 350;
2626

2727
const searchHits = useCallback(
2828
async (peakList: Peak[], referenceSpectraList: string[]) => {
@@ -72,17 +72,23 @@ function SearchView() {
7272
width={searchPanelWidth}
7373
height={searchPanelHeight}
7474
onSubmit={(data) => {
75-
const peakList: Peak[] = data.peakListInputField
75+
const peakListValues: number[][] = data.peakListInputField
7676
.split('\n')
7777
.map((line: string) => {
78-
const [mz, rel] = line.split(' ');
79-
return {
80-
mz: parseFloat(mz),
81-
intensity: parseFloat(rel),
82-
rel: parseFloat(rel),
83-
id: generateID(),
84-
} as Peak;
78+
const [mz, intensity] = line.split(' ');
79+
return [parseFloat(mz), parseFloat(intensity)];
8580
});
81+
const max = Math.max(...peakListValues.map((p) => p[1]));
82+
const peakList: Peak[] = peakListValues.map((values: number[]) => {
83+
const [mz, intensity] = values;
84+
const rel = Math.floor((intensity / max) * 1000) - 1;
85+
return {
86+
mz,
87+
intensity,
88+
rel: rel < 0 ? 0 : rel,
89+
id: generateID(),
90+
} as Peak;
91+
});
8692
const referenceSpectraList = data.referenceSpectraInputField
8793
.split('\n')
8894
.filter((s: string) => s !== '');

‎web-frontend/src/elements/routes/pages/search/utils/peakListExample.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const referencePeakList: string[] = [
2+
'147.063 121.7',
3+
'303.05 10000',
4+
'449.108 657.4',
5+
'465.102 5884.2',
6+
'611.161 6700',
7+
];
8+
9+
const referenceSpectraList: string[] = [
10+
'MSBNK-IPB_Halle-PB001341',
11+
'MSBNK-IPB_Halle-PB006202',
12+
'MSBNK-IPB_Halle-PB006203',
13+
'MSBNK-IPB_Halle-PB001342',
14+
'MSBNK-IPB_Halle-PB001343',
15+
];
16+
17+
export { referencePeakList, referenceSpectraList };

0 commit comments

Comments
 (0)