Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interface Updated and Fix for windows/Linux (folder with spaces) #15

Merged
merged 4 commits into from
Dec 18, 2024
+151 −115
Merged

Interface Updated and Fix for windows/Linux (folder with spaces) #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4e18d0e
updated interface
Dec 17, 2024
42aee86
fixed for windows and spaces in path
Syntist Dec 17, 2024
f373cf4
updated the ui and added logo
Dec 17, 2024
8713653
updated the installer script for linux for folder with space
Dec 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion electron-app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "maestro",
"version": "1.2.0",
"version": "1.3.0",
"description": "An Electron application with React and TypeScript",
"main": "./out/main/index.js",
"author": "example.com",
Expand Down
Binary file added electron-app/resources/saeedlogo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 7 additions & 5 deletions electron-app/src/main/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { app, shell, BrowserWindow, ipcMain, dialog } from 'electron'
import path, { join } from 'path'
import { electronApp, optimizer, is } from '@electron-toolkit/utils'
import icon from '../../resources/icon.png?asset'
import icon from '../../resources/saeedlogo.png?asset'
import { spawn } from 'child_process'
import fs from 'fs'

Expand All @@ -25,14 +25,16 @@ const config = JSON.parse(rawData)

let cmd

function createWindow(): void {


function createWindow(): void {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 900,
height: 670,
width: 1280,
height: 720,
show: false,
autoHideMenuBar: true,
...(process.platform === 'linux' ? { icon } : {}),
icon,
webPreferences: {
preload: join(__dirname, '../preload/index.js'),
sandbox: false,
Expand Down
2 changes: 1 addition & 1 deletion electron-app/src/renderer/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<head>
<meta charset="UTF-8" />
<title>Electron</title>
<title>Maestro</title>
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta
http-equiv="Content-Security-Policy"
Expand Down
2 changes: 1 addition & 1 deletion electron-app/src/renderer/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Runner } from './components/Runner'

// const specollate = `${await window.electron.getEnvVariable('SPECOLLATE')} -c ${await window.electron.getEnvVariable('SPECOLLATE_CONFIG')}`

const proteorift = `${await window.electron.getEnvVariable('PROTEORIFT')} -c ${await window.electron.getEnvVariable('SPECOLLATE_CONFIG')}`
let proteorift = `\"${await window.electron.getEnvVariable('python')}\" \"${await window.electron.getEnvVariable('PROTEORIFT')}\" -c \"${await window.electron.getEnvVariable('SPECOLLATE_CONFIG')}\"`

function App(): JSX.Element {
const [show, setShow] = useState(false)
Expand Down
Binary file added electron-app/src/renderer/src/assets/logo-1.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
147 changes: 81 additions & 66 deletions electron-app/src/renderer/src/components/ConfigForm/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
import FolderSelector from '../FolderSelector'
import { configBuilderV2 } from '@renderer/utils/helper'
import { useState } from 'react'
import Divider from '@mui/material/Divider'

const ConfigForm = ({ run }: any) => {
const [useGpu, setUseGpu] = useState(false)
Expand All @@ -29,17 +30,17 @@ const ConfigForm = ({ run }: any) => {
} = useForm({
mode: 'onTouched',
defaultValues: {
spec_batch_size: 16384,
pep_batch_size: 4096,
spec_batch_size: 4,
pep_batch_size: 1,

search_spec_batch_size: 1024,
search_spec_batch_size: 0.5,

precursor_tolerance: 20,
precursor_tolerance_type: 'ppm',

keep_psms: 5,
num_mods: 1,
charge: 8,
charge: 4,

length_filter: true,
len_tol_neg: -1,
Expand Down Expand Up @@ -75,7 +76,7 @@ const ConfigForm = ({ run }: any) => {
<form onSubmit={handleSubmit(onSubmit)}>
<Box>
<FolderSelector
label="MGF Directory"
label="Spectra Directory (MGF)"
{...register('mgf_dir', { required: true })}
error={errors.mgf_dir ? 'This field is required' : ''}
onChange={(path) => setValue('mgf_dir', path, { shouldValidate: true })}
Expand All @@ -84,16 +85,7 @@ const ConfigForm = ({ run }: any) => {
</Box>
<Box margin="normal">
<FolderSelector
label="Preprocessed Directory"
{...register('prep_dir', { required: true })}
error={errors.prep_dir ? 'This field is required' : ''}
onChange={(path) => setValue('prep_dir', path, { shouldValidate: true })}
value={watch('prep_dir')}
/>
</Box>
<Box margin="normal">
<FolderSelector
label="Peptide Directory"
label="Peptide Database Directory (fasta)"
error={errors.pep_dir ? 'This field is required' : ''}
{...register('pep_dir', { required: true })}
onChange={(path) => setValue('pep_dir', path, { shouldValidate: true })}
Expand All @@ -115,9 +107,12 @@ const ConfigForm = ({ run }: any) => {
<TextField
margin="normal"
fullWidth
label="Spectra Batch Size"
label="Spectra Batch Size (GiB)"
variant="outlined"
type="number"
inputProps={{
step: 0.01
}}
{...register('spec_batch_size', { required: true })}
error={!!errors.spec_batch_size}
helperText={errors.spec_batch_size ? 'This field is required' : ''}
Expand All @@ -127,9 +122,12 @@ const ConfigForm = ({ run }: any) => {
<TextField
margin="normal"
fullWidth
label="Peptide Batch Size"
label="Peptide Batch Size (GiB)"
variant="outlined"
type="number"
inputProps={{
step: 0.01
}}
{...register('pep_batch_size', { required: true })}
error={!!errors.pep_batch_size}
helperText={errors.pep_batch_size ? 'This field is required' : ''}
Expand All @@ -139,14 +137,29 @@ const ConfigForm = ({ run }: any) => {
<TextField
margin="normal"
fullWidth
label="Search Spectra Batch Size"
label="Search Spectra Batch Size (GiB)"
variant="outlined"
type="number"
inputProps={{
step: 0.01
}}
{...register('search_spec_batch_size', { required: true })}
error={!!errors.search_spec_batch_size}
helperText={errors.search_spec_batch_size ? 'This field is required' : ''}
/>
</Grid>
<Grid item xs={6}>
<TextField
margin="normal"
fullWidth
label="Number of Top Scoring PSMs to Keep"
variant="outlined"
type="number"
{...register('keep_psms', { required: true })}
error={!!errors.keep_psms}
helperText={errors.keep_psms ? 'This field is required' : ''}
/>
</Grid>
<Grid item xs={6}>
<TextField
margin="normal"
Expand Down Expand Up @@ -174,18 +187,7 @@ const ConfigForm = ({ run }: any) => {
</Select>
</FormControl>
</Grid>
<Grid item xs={6}>
<TextField
margin="normal"
fullWidth
label="Number of Top Scoring PSMs to Keep"
variant="outlined"
type="number"
{...register('keep_psms', { required: true })}
error={!!errors.keep_psms}
helperText={errors.keep_psms ? 'This field is required' : ''}
/>
</Grid>

<Grid item xs={6}>
<TextField
margin="normal"
Expand All @@ -211,18 +213,56 @@ const ConfigForm = ({ run }: any) => {
/>
</Grid>

<Box width={'100%'} sx={{ marginLeft: 2, marginTop: 2, fontFamily: 500 }}>
<Divider />
<Typography variant="h5" mt={2} mb={2}>
Search space reduction using the following
</Typography>
</Box>
{/* Filters */}
<Box display="flex" justifyContent="center" width={'100%'}>
<FormControlLabel
control={
<Checkbox
checked={watch('length_filter')}
onChange={(e) => setValue('length_filter', e.target.checked)}
/>
}
label="Length Filter"
/>
</Box>
{watch('length_filter') && (
<>
<Grid item xs={6}>
<TextField
margin="normal"
fullWidth
label="Length Tolerance Negative"
variant="outlined"
type="number"
{...register('len_tol_neg', { required: true })}
error={!!errors.len_tol_neg}
helperText={errors.len_tol_neg ? 'This field is required' : ''}
/>
</Grid>

<Grid item xs={6}>
<TextField
margin="normal"
fullWidth
label="Length Tolerance Positive"
variant="outlined"
type="number"
{...register('len_tol_pos', { required: true })}
error={!!errors.len_tol_pos}
helperText={errors.len_tol_pos ? 'This field is required' : ''}
/>
</Grid>
</>
)}
<Box></Box>
<Grid item xs={12}>
<Box display="flex" justifyContent="center">
<FormControlLabel
control={
<Checkbox
checked={watch('length_filter')}
onChange={(e) => setValue('length_filter', e.target.checked)}
/>
}
label="Length Filter"
/>
<FormControlLabel
control={
<Checkbox
Expand All @@ -245,35 +285,10 @@ const ConfigForm = ({ run }: any) => {
</Grid>

{/* Text fields at the bottom */}
<Grid item xs={6}>
<TextField
margin="normal"
fullWidth
label="Length Tolerance Negative"
variant="outlined"
type="number"
{...register('len_tol_neg', { required: true })}
error={!!errors.len_tol_neg}
helperText={errors.len_tol_neg ? 'This field is required' : ''}
/>
</Grid>

<Grid item xs={6}>
<TextField
margin="normal"
fullWidth
label="Length Tolerance Positive"
variant="outlined"
type="number"
{...register('len_tol_pos', { required: true })}
error={!!errors.len_tol_pos}
helperText={errors.len_tol_pos ? 'This field is required' : ''}
/>
</Grid>
</Grid>

<Button type="submit" variant="contained" color="primary">
Run ProteoRift
<Button sx={{ marginTop: 2 }} type="submit" variant="contained" color="primary">
Run Maestro
</Button>
</form>
</Container>
Expand Down
47 changes: 28 additions & 19 deletions electron-app/src/renderer/src/components/SideBar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@ import {
ListItemIcon,
ListItemText,
Divider,
Typography
Typography,
Box
} from '@mui/material'
import HomeIcon from '@mui/icons-material/Home'
import { styled } from '@mui/material/styles'
import logo from '../../assets/logo-1.png'

const drawerWidth = 240

Expand All @@ -33,24 +35,31 @@ const Toolbar = styled('div')(({ theme }) => ({
const Sidebar = () => {
return (
<StyledDrawer variant="permanent" anchor="left">
<Toolbar>
<Typography variant="h6">Maestro</Typography>
</Toolbar>
<Divider />
<List>
<ListItem button>
<ListItemIcon>
<HomeIcon />
</ListItemIcon>
<ListItemText primary="Home" />
</ListItem>
{/* <ListItem button>
<ListItemIcon>
<ListIcon />
</ListItemIcon>
<ListItemText primary="Previous Runs Data" />
</ListItem> */}
</List>
<Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
<Toolbar>
<Typography variant="h6">
<b>MAESTRO</b>
</Typography>
</Toolbar>
<Divider />
<List sx={{ flexGrow: 1 }}>
<ListItem>
<ListItemIcon>
<HomeIcon />
</ListItemIcon>
<ListItemText primary="Home" />
</ListItem>
{/* <ListItem button>
<ListItemIcon>
<ListIcon />
</ListItemIcon>
<ListItemText primary="Previous Runs Data" />
</ListItem> */}
</List>
<Box sx={{ p: 2 }}>
<img src={logo} width={150} />
</Box>
</Box>
</StyledDrawer>
)
}
Expand Down
10 changes: 5 additions & 5 deletions electron-app/src/renderer/src/utils/helper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,19 +151,19 @@ rank : 1
[search]

mgf_dir: ${data.mgf_dir}
prep_path: ${data.prep_dir}
prep_path: ${data.mgf_dir}${isWindows ? '\\preprocess' : '/preprocessed'}
pep_dir: ${data.pep_dir}
out_pin_dir : ${data.out_pin_dir}

model_name : ${isWindows ? MODEL_2?.replaceAll('/', '\\') : MODEL_2}
specollate_model_path: ${isWindows ? MODEL?.replaceAll('/', '\\'): MODEL}
specollate_model_path: ${isWindows ? MODEL?.replaceAll('/', '\\') : MODEL}

# Batch sizes for forward pass through the network
spec_batch_size : ${data.spec_batch_size}
pep_batch_size : ${data.pep_batch_size}
spec_batch_size : ${data.spec_batch_size * 1024}
pep_batch_size : ${data.pep_batch_size * 1024}

# Batch size for database search
search_spec_batch_size : ${data.search_spec_batch_size}
search_spec_batch_size : ${data.search_spec_batch_size * 1024}

precursor_tolerance : ${data.precursor_tolerance} # Precursor tolerance to use during database search (Da or ppm)
precursor_tolerance_type : ${data.precursor_tolerance_type} # either ppm or Da
Expand Down
Loading
Loading