355 lines
17 KiB
HTML
355 lines
17 KiB
HTML
<template>
|
|
<header id="header">
|
|
<img src="/css/LABI_logo.jpeg" alt="Labi Logo Icon" id="imgLogo">
|
|
<div>
|
|
<h4>Julia mzML imzML analysis GUI </h4>
|
|
<h6>Please make sure the ibd, the mzML and the imzML files are located in the same directory and have the same
|
|
name.</h6>
|
|
<h6>It may take a while to generate the image and the plot, please be patient.</h6>
|
|
<h6>To generate the contour or surface plots, you have to select the desired image first using the interface.</h6>
|
|
</div>
|
|
</header>
|
|
<div id="extDivStyle" class="row col-12 q-pa-xl">
|
|
<div class="row col-6">
|
|
<!-- Left DIV -->
|
|
<div id="intDivStyle" class="st-col col-12 st-module">
|
|
<!--<q-input id="textRoute" standout="custom-standout" v-model="file_route" label="Insert the route to your imzML file"></q-input>-->
|
|
<h6>Search for the imzML or mzML file in your system</h6>
|
|
<q-btn id="btnStyle" icon="search" class="q-ma-sm" v-on:click="btnSearch=true"
|
|
label="Select your imzML or mzML file"></q-btn>
|
|
<!--<p>{{full_route}}</p>-->
|
|
<div class="row st-col col-12">
|
|
<!--<q-input id="textName" class="col-9" standout="custom-standout" v-model="file_name" label="Insert the name of your imzML file"></q-input>-->
|
|
<q-btn-dropdown id="btnStyle" class="q-ma-sm" :loading="progressPlot" :disable="btnPlotDisable"
|
|
label="Generate Plots" icon="play_arrow">
|
|
<template v-slot:loading>
|
|
<q-spinner-hourglass class="on-left" />
|
|
Loading Plot
|
|
</template>
|
|
|
|
<q-list>
|
|
<q-item clickable v-close-popup v-on:click="imageCPlot=true">
|
|
<q-item-section>
|
|
<q-item-label>Image Contour Plot</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item clickable v-close-popup v-on:click="triqCPlot=true">
|
|
<q-item-section>
|
|
<q-item-label>TrIQ Contour Plot</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item clickable v-close-popup v-on:click="image3dPlot=true">
|
|
<q-item-section>
|
|
<q-item-label>Image 3D Plot</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
|
|
<q-item clickable v-close-popup v-on:click="triq3dPlot=true">
|
|
<q-item-section>
|
|
<q-item-label>TrIQ 3D Plot</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-btn-dropdown>
|
|
</div>
|
|
<p id="lblFullRoute">full route: {{full_route}}</p>
|
|
<!-- Variable Manipulation -->
|
|
<div class="row">
|
|
<div class="st-col col-12 col-sm q-ma-sm">
|
|
<q-input standout="custom-standout" id="textNmass" step="0.01" v-model="Nmass"
|
|
label="Mass-to-charge ratio of interest" type="number"
|
|
:rules="[ val => !!val || '* Required', val => val >= 0.0 || 'Need positive mass values',]"></q-input>
|
|
</div>
|
|
<div class="st-col col-12 col-sm q-ma-sm">
|
|
<q-input standout="custom-standout" id="textTol" step="0.05" v-model="Tol"
|
|
label="Mass-to-charge ratio tolerance" type="number"
|
|
:rules="[val => !!val || '* Required', val => val >= 0.0 && val <= 1.0 || 'Needs to be in range between 0 and 1',]"></q-input>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<!-- Triq Variable Manipulation -->
|
|
<div class="col-6">
|
|
<div class="st-col col-6 col-sm q-ma-sm">
|
|
<q-toggle id="btnEnableTriq" v-on:click="triqEnabled" v-model="triqEnabled" color="blue"
|
|
label="Add Threshold Intensity Quantization (TrIQ)"></q-toggle>
|
|
</div>
|
|
<div class="row">
|
|
<div class="st-col col-4 col-sm-4 q-ma-sm">
|
|
<q-input standout="custom-standout" id="textTriqProb" step="0.01" v-model="triqProb"
|
|
label="TrIQ probability" type="number" :rules="[
|
|
val => triqEnabled ? ( '* Required', val >= 0.8 && val <= 1 || 'Needs to be in range between 0.8 and 1') : true
|
|
]" :readonly="!triqEnabled" :disable="!triqEnabled"></q-input>
|
|
</div>
|
|
<div class="st-col col-4 col-sm-4 q-ma-sm">
|
|
<q-input standout="custom-standout" id="textcolorLevel" step="1" v-model="colorLevel"
|
|
label="TrIQ color levels" type="number" :rules="[
|
|
val => triqEnabled ? ( '* Required', val >= 4 && val <= 256 || 'Needs to be in range between 2 and 256') : true
|
|
]" :readonly="!triqEnabled" :disable="!triqEnabled"></q-input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Spectra Plot Manipulation -->
|
|
<div class="col-6">
|
|
<div class="st-col col-6 col-sm">
|
|
<q-btn-dropdown id="btnStyle" class="q-ma-sm" :loading="progressSpectraPlot" :disable="btnSpectraDisable"
|
|
label="Generate Spectra" icon="play_arrow">
|
|
<template v-slot:loading>
|
|
<q-spinner-hourglass class="on-left" />
|
|
Loading Plot
|
|
</template>
|
|
|
|
<q-list>
|
|
<q-item clickable v-close-popup v-on:click="createSumPlot=true">
|
|
<q-item-section>
|
|
<q-item-label>Sum Spectrum Plot</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item clickable v-close-popup v-on:click="createXYPlot=true">
|
|
<q-item-section>
|
|
<q-item-label>Spectrum Plot (X,Y)</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-btn-dropdown>
|
|
</div>
|
|
<div class="row col-6">
|
|
<div class="st-col col-4 col-sm-4 q-ma-sm">
|
|
<q-input standout="custom-standout" step="1" v-model="xCoord" label="X coord"
|
|
type="number" :rules="[
|
|
val => SpectraEnabled ? ( '* Required', val >= 0|| 'Needs to be bigger than 0') : true
|
|
]" :readonly="!SpectraEnabled" :disable="!SpectraEnabled"></q-input>
|
|
</div>
|
|
<div class="st-col col-4 col-sm-4 q-ma-sm">
|
|
<q-input standout="custom-standout" step="1" v-model="yCoord" label="Y coord"
|
|
type="number" :rules="[
|
|
val => SpectraEnabled ? ( '* Required', val <= 0|| 'Needs to be lower than 0') : true
|
|
]" :readonly="!SpectraEnabled" :disable="!SpectraEnabled"></q-input>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<q-btn id="btnStyle" :loading="progress" class="q-ma-sm" :disabled="btnStartDisable" icon="play_arrow"
|
|
v-on:click="mainProcess=true" padding="lg" label="Main process">
|
|
<template v-slot:loading>
|
|
<q-spinner-hourglass class="on-left" />
|
|
Loading...
|
|
</template>
|
|
</q-btn>
|
|
<q-btn id="btnStyle" icon="zoom_out_map" class="q-ma-sm on-right" v-on:click="compareBtn=true" padding="sm"
|
|
label="Compare"></q-btn>
|
|
</div>
|
|
<p>{{msg}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="row col-6">
|
|
<!-- Right DIV -->
|
|
<div id="intDivStyle" class="st-col col-12 col-sm st-module">
|
|
<st-tabs id="tabHeader" :ids="tabIDs" :labels="tabLabels" v-model="selectedTab" no-arrows></st-tabs>
|
|
<q-tab-panels v-model="selectedTab">
|
|
<q-tab-panel name="tab0">
|
|
<!-- Content for Tab 0 -->
|
|
<!-- Btn image changer -->
|
|
<h6>Image Visualizer</h6>
|
|
<div>
|
|
<q-btn id="btnStyle" icon="arrow_back" class="q-my-sm" v-on:click="imgMinus=true"></q-btn>
|
|
<q-btn id="btnStyle" icon="arrow_forward" class="q-my-sm on-right" v-on:click="imgPlus=true"></q-btn>
|
|
</div>
|
|
<!-- Image manager -->
|
|
<div id="image-container" class="row st-col col-12">
|
|
<div class="col-10 q-pa-none q-ma-none ">
|
|
<plotly id="plotStyle" :data="plotdataImg" :layout="plotlayoutImg" class="q-pa-none q-ma-none sync_data" @click="data_click"></plotly>
|
|
<!--<q-img id="imgInt" class="q-ma-none q-pa-none" :src="imgInt" width="80%"></q-img>-->
|
|
</div>
|
|
<div class="col-2 q-pa-none q-ma-none ">
|
|
<q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbar"></q-img>
|
|
</div>
|
|
</div>
|
|
<p>{{msgimg}}</p>
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="tab1">
|
|
<!-- Content for Tab 1 -->
|
|
<!-- Triq Btn image changer -->
|
|
<h6>TrIQ Visualizer</h6>
|
|
<div>
|
|
<q-btn id="btnStyle" icon="arrow_back" class="q-my-sm" v-on:click="imgMinusT=true"></q-btn>
|
|
<q-btn id="btnStyle" icon="arrow_forward" class="q-my-sm on-right" v-on:click="imgPlusT=true"></q-btn>
|
|
</div>
|
|
<!-- Triq Image manager -->
|
|
<div id="image-container" class="row st-col col-12">
|
|
<div class="col-10 q-pa-none q-ma-none ">
|
|
<plotly id="plotStyle" :data="plotdataImgT" :layout="plotlayoutImgT" class="q-pa-none q-ma-none sync_data" @click="data_click"></plotly>
|
|
<!--<q-img id="imgInt" class="q-ma-none q-pa-none" :src="imgIntT" width="80%"></q-img>-->
|
|
</div>
|
|
<div class="col-2 q-pa-none q-ma-none ">
|
|
<q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbarT"></q-img>
|
|
</div>
|
|
</div>
|
|
<p>{{msgtriq}}</p>
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="tab2">
|
|
<!-- Content for Tab 2 -->
|
|
<!--<plotly id="plotStyle" :data="plotdata" :layout="plotlayout" class="q-pa-none q-ma-none"></plotly>-->
|
|
<plotly id="plotStyle" :data="plotdata" :layout="plotlayout" class="q-pa-none q-ma-none sync_data" @click="data_click"></plotly>
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="tab3">
|
|
<!-- Content for Tab 3 -->
|
|
<plotly id="plotStyle" :data="plotdataC" :layout="plotlayoutC" class="q-pa-none q-ma-none"></plotly>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="tab4">
|
|
<!-- Content for Tab 4 -->
|
|
<plotly id="plotStyle3d" :data="plotdata3d" :layout="plotlayout3d" class="q-pa-none q-ma-none"></plotly>
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<q-dialog v-model="warning_msg">
|
|
<q-card>
|
|
<q-card-section>
|
|
<div class="text-h6">Warning</div>
|
|
</q-card-section>
|
|
|
|
<q-card-section class="q-pt-none">
|
|
{{msg}}
|
|
</q-card-section>
|
|
|
|
<q-card-actions align="right">
|
|
<q-btn flat label="Ok" style="color:#009f90" v-close-popup />
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
<q-dialog v-model="CompareDialog" full-width>
|
|
<q-card>
|
|
<q-card-section>
|
|
<div class="text-h6">Compare two diferent images or plots in a larger screen</div>
|
|
</q-card-section>
|
|
|
|
<q-card-section class="q-pt-none col-12">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<st-tabs id="tabHeader" :ids="tabIDs" :labels="tabLabels" v-model="selectedTab"></st-tabs>
|
|
<q-tab-panels v-model="selectedTab">
|
|
<q-tab-panel name="tab0">
|
|
<!-- Content for Tab 0 -->
|
|
<!-- Btn image changer -->
|
|
<div>
|
|
<q-btn id="btnStyle" icon="arrow_back" class="q-my-sm" v-on:click="imgMinus=true"></q-btn>
|
|
<q-btn id="btnStyle" icon="arrow_forward" class="q-my-sm on-right" v-on:click="imgPlus=true"></q-btn>
|
|
</div>
|
|
<!-- Image manager -->
|
|
<div id="image-container" class="row st-col col-12">
|
|
<div class="col-10 q-pa-none q-ma-none ">
|
|
<plotly id="plotStyle" :data="plotdataImg" :layout="plotlayoutImg" class="q-pa-none q-ma-none"></plotly>
|
|
</div>
|
|
<div class="col-2">
|
|
<q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbar"></q-img>
|
|
</div>
|
|
</div>
|
|
<p>{{msgimg}}</p>
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="tab1">
|
|
<!-- Content for Tab 1 -->
|
|
<!-- Triq Btn image changer -->
|
|
<div>
|
|
<q-btn id="btnStyle" icon="arrow_back" class="q-my-sm" v-on:click="imgMinusT=true"></q-btn>
|
|
<q-btn id="btnStyle" icon="arrow_forward" class="q-my-sm on-right" v-on:click="imgPlusT=true"></q-btn>
|
|
</div>
|
|
<!-- Triq Image manager -->
|
|
<div id="image-container" class="row st-col col-12">
|
|
<div class="col-10 q-pa-none q-ma-none ">
|
|
<plotly id="plotStyle" :data="plotdataImgT" :layout="plotlayoutImgT" class="q-pa-none q-ma-none"></plotly>
|
|
</div>
|
|
<div class="col-2">
|
|
<q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbarT"></q-img>
|
|
</div>
|
|
</div>
|
|
<p>{{msgtriq}}</p>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="tab2">
|
|
<!-- Content for Tab 2 -->
|
|
<plotly id="plotStyle" :data="plotdata" :layout="plotlayout" class="q-pa-none q-ma-none"></plotly>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="tab3">
|
|
<!-- Content for Tab 3 -->
|
|
<plotly id="plotStyle" :data="plotdataC" :layout="plotlayoutC" class="q-pa-none q-ma-none"></plotly>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="tab4">
|
|
<!-- Content for Tab 4 -->
|
|
<plotly id="plotStyle3d" :data="plotdata3d" :layout="plotlayout3d" class="q-pa-none q-ma-none"></plotly>
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</div>
|
|
<div class="col-6">
|
|
<st-tabs id="tabHeader" :ids="CompTabIDs" :labels="CompTabLabels" v-model="CompSelectedTab" outside-arrows
|
|
mobile-arrows></st-tabs>
|
|
<q-tab-panels v-model="CompSelectedTab">
|
|
<q-tab-panel name="tab0">
|
|
<!-- Content for Tab 0 -->
|
|
<!-- Btn image changer -->
|
|
<div>
|
|
<q-btn id="btnStyle" icon="arrow_back" class="q-my-sm" v-on:click="imgMinus=true"></q-btn>
|
|
<q-btn id="btnStyle" icon="arrow_forward" class="q-my-sm on-right" v-on:click="imgPlus=true"></q-btn>
|
|
</div>
|
|
<!-- Image manager -->
|
|
<div id="image-container" class="row st-col col-12">
|
|
<div class="col-10 q-pa-none q-ma-none ">
|
|
<plotly id="plotStyle" :data="plotdataImg" :layout="plotlayoutImg" class="q-pa-none q-ma-none"></plotly>
|
|
</div>
|
|
<div class="col-2 q-pa-none q-ma-none ">
|
|
<q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbar"></q-img>
|
|
</div>
|
|
</div>
|
|
<p>{{msgimg}}</p>
|
|
</q-tab-panel>
|
|
|
|
<q-tab-panel name="tab1">
|
|
<!-- Content for Tab 1 -->
|
|
<!-- Triq Btn image changer -->
|
|
<div>
|
|
<q-btn id="btnStyle" icon="arrow_back" class="q-my-sm" v-on:click="imgMinusT=true"></q-btn>
|
|
<q-btn id="btnStyle" icon="arrow_forward" class="q-my-sm on-right" v-on:click="imgPlusT=true"></q-btn>
|
|
</div>
|
|
<!-- Triq Image manager -->
|
|
<div id="image-container" class="row st-col col-12">
|
|
<div class="col-10 q-pa-none q-ma-none ">
|
|
<plotly id="plotStyle" :data="plotdataImgT" :layout="plotlayoutImgT" class="q-pa-none q-ma-none"></plotly>
|
|
</div>
|
|
<div class="col-2 q-pa-none q-ma-none ">
|
|
<q-img id="colorbar" class="q-ma-none q-pa-none" :src="colorbarT"></q-img>
|
|
</div>
|
|
</div>
|
|
<p>{{msgtriq}}</p>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="tab2">
|
|
<!-- Content for Tab 2 -->
|
|
<plotly id="plotStyle" :data="plotdata" :layout="plotlayout" class="q-pa-none q-ma-none"></plotly>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="tab3">
|
|
<!-- Content for Tab 3 -->
|
|
<plotly id="plotStyle" :data="plotdataC" :layout="plotlayoutC" class="q-pa-none q-ma-none"></plotly>
|
|
</q-tab-panel>
|
|
<q-tab-panel name="tab4">
|
|
<!-- Content for Tab 4 -->
|
|
<plotly id="plotStyle3d" :data="plotdata3d" :layout="plotlayout3d" class="q-pa-none q-ma-none"></plotly>
|
|
</q-tab-panel>
|
|
</q-tab-panels>
|
|
</div>
|
|
</div>
|
|
</q-card-section>
|
|
|
|
<q-card-actions align="right">
|
|
<q-btn flat label="Done" style="color:#009f90" v-close-popup />
|
|
</q-card-actions>
|
|
</q-card>
|
|
</q-dialog>
|
|
|
|
</template> |