console tool added

console_utility/README.md

@@ -0,0 +1,53 @@
+## Console tool usage
+
+**NB!** This file provides hints on the [console NPvis tool](https://github.com/ablab/NPvis/releases) installation and usage. 
+Please first read the [main README](../README.md) to get the general info about the tool and its inputs/outputs.
+
+**NB!** We strongly recommend you to use the NPvis [web service](http://cab.cc.spbu.ru/npvis/) since its much more robust and user-friendly! 
+
+### Prerequisites & Dependencies
+
+* Linux or macOS
+* Python 2.7 
+
+You will also need [NPDtools](https://cab.spbu.ru/software/npdtools/) 2.5.0.
+It can be downloaded for your platform [here](https://github.com/ablab/npdtools/releases), e.g. for Linux type
+
+    wget https://github.com/ablab/npdtools/releases/download/npdtools-2.5.0/NPDtools-2.5.0-Linux.tar.gz
+    tar -xzf NPDtools-*.tar.gz
+
+We assume that the NPDtools package is unpacked in the current working directory. Adjust the paths accordingly if needed.
+
+### Input data
+
+The console version currently accepts only the MGF and mzXML formats for spectra and MDL MOL V3000 for structures.
+Sample examples are in the [test data folder](https://github.com/ablab/NPvis/tree/main/test_data). 
+Please convert your data to these formats using third-party software (see hints/links in the [main README](../README.md)).
+
+### Running the tool
+
+As an example we will use `massetolide_1252.mgf` and `massetolide_A.mol` files from the test data. 
+This is not an exact match, the masses of the compound and MS/MS are different, so we will run NPvis in the "PNP with modification" mode.
+
+**First**, we need to create the annotation file for a Peptide-Spectrum Match (`psm.ann`).
+
+    NPDtools-*/bin/print_score -C NPDtools-*/share/npdtools/ test_data/massetolide_1252.mgf test_data/massetolide_A.mol --print_matches --print_spectrum --print_structure_summary --blind_search > psm.ann
+
+For running NPvis in the "PNP" mode simply remove the `--blind_search` option.
+
+**Second**, visualize the match!
+
+    python2.7 visualize.py --mol test_data/massetolide_A.mol --ann psm.ann --portable_html -o my_first_visualization.html 
+
+The resulting NPvis report is in `my_first_visualization.html` (feel free to use another filename).
+Mind the option `--portable_html` that embeds everything needed (JavaScripts and CSS) inside the HTML file, so you can move it wherever you want.
+
+### Plans for the next console release
+
+1. Python v.3 support.
+2. Single-push-of-a-button, i.e., `print_score` part would be embedded, so a user will need to run only `visualize.py`.
+3. Support for SMILES, USI, and other currently unsupported data formats.
+
+### Disclaimer
+
+The JavaScript part of the visualizer is based on the [Lorikeet Spectrum Viewer](https://github.com/UWPR/Lorikeet) for proteomics.

console_utility/html_aux_files/css/additional.css

@@ -0,0 +1,68 @@
+/* THE FOLLOWING STYLES ARE FOR THE TABLE DISPLAYING THE ANNOTATED PEAKS */
+#table_scroll {
+  width: 400px;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+#table_scroll th, td {
+    padding-left: 5px;
+    padding-right: 5px;
+    text-align: center;
+}
+#table_scroll td, th {
+	width: 85px;
+}
+#table_scroll thead tr {
+    width: 400px;
+    display: block;
+    position: relative;
+}
+#table_scroll tbody {
+    width: 400px;
+    display: block;
+    overflow: auto;
+    height: 160px;
+}
+
+div.lorikeet .annoPeaksTable {
+    border-collapse:collapse;
+	border-color:#DDDDDD;
+}
+div.lorikeet .annoPeaksTable th {
+	background-color:#BDB76B;
+	border: 1px solid #666666;
+}
+#table_scroll.annoPeaksTable td {
+	border: 1px solid #666666;
+	text-align: right;
+	background-color:#FFFFFF;
+	font-size: 8pt;
+}
+#table_scroll.annoPeaksTable tr.selected_row td {
+    background-color: #46d3ff;
+}
+div.lorikeet .annoPeaksHeader {
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.infoTable {
+    float: left;
+	font-family: "Trebuchet MS",Arial,sans-serif;
+    font-size: 12px;
+    padding-right: 40px;
+}
+.infoTable th {
+    border: 1px solid #666666;
+    background-color: #F5F5DC;
+}
+.infoTable td.field_name {
+    border: 1px solid #666666;
+    background-color: #F5F5DC;
+}
+
+.span_tip {
+    font-size: 8pt;
+    margin-top: 5px;
+    color: sienna;
+}

console_utility/html_aux_files/css/lorikeet.css

@@ -0,0 +1,153 @@
+/*$LastChangedDate$*/
+/*$LastChangedBy$*/
+/*$LastChangedRevision$*/
+
+@media print {
+	.noprint {
+         display:none;
+    }
+}
+
+div.lorikeet {
+	width:100%; 
+	background-color: #FFFFFF;
+	color: #000000;
+	font-family: "Trebuchet MS",Arial,sans-serif;
+	font-size: 10pt;
+    font-style: normal;
+    margin: 0;
+    padding: 0;
+}
+
+div.lorikeet div.bar {
+	background-color:#F5F5DC;
+    color:black; 
+}
+div.lorikeet td {
+	background-color:#FFFFEF; 
+	border:1px solid black;
+	padding: 5px;
+}
+
+div.lorikeet td.optionCell {
+	background-color: white; 
+	border: 1px dotted #666666; 
+	padding: 5px;
+	margin:5px;
+}
+
+div.lorikeet .link {
+	text-decoration: underline;
+	cursor:pointer;
+	color:sienna;
+}
+div.lorikeet .font_small {
+	font-size: 8pt;
+}
+div.lorikeet .zoom_out_link {
+	background-image: url('../images/lorikeet/zoom_out.png');
+	background-repeat: no-repeat;
+	width:20px;
+	height:20px;
+	cursor:pointer;
+}
+div.lorikeet .zoom_in_link {
+	background-image: url('../images/lorikeet/zoom_in.png');
+	background-repeat: no-repeat;
+	width:20px;
+	height:20px;
+	cursor:pointer;
+}
+
+
+/* THE FOLLOWING STYLES ARE FOR THE TABLE DISPLAYING THE SEQUENCE AND FRAGMENT ION MASS */
+div.lorikeet .ionTable {
+    border-collapse:collapse;
+	border-color:#DDDDDD;
+}
+div.lorikeet .ionTable th {
+	background-color:#BDB76B;
+	border: 1px solid #666666;
+}
+div.lorikeet .ionTable td {
+	border: 1px solid #666666;
+	text-align: center;
+	background-color:#FFFFFF;
+	font-size: 8pt;
+}
+
+/* style for a cell containing a residue from the sequence */
+div.lorikeet .ionTable td.seq {
+	font-weight: bold;
+	background-color:#BDB76B;
+}
+
+/* style for cell containing a modified residue */
+div.lorikeet .ionTable td.modified{
+	background-color:gold;
+}
+
+/* style for cell containing the fragment indices */
+div.lorikeet .ionTable td.numCell {
+	background-color:#F5F5DC;
+	color:#777777;
+}
+
+
+/* style for cell containing a fragment m/z that matches a peak in the scan */
+div.lorikeet .ionTable td.matchIon {
+	font-weight:bold;
+	opacity:0.8;
+	filter: alpha(opacity=80); /*For IE*/
+	-moz-opacity:0.8; /*Old Mozilla browsers*/
+	color:white;
+}
+
+
+/* THE FOLLOWING STYLES ARE FOR THE TABLE DISPLAYING VARIABLE MODIFICATIONS */
+div.lorikeet .varModsTable {
+    border-collapse:collapse;
+}
+
+div.lorikeet .varModsTable td {
+	border: 0px;
+	text-align: left;
+	font-size: 10pt;
+    padding: 1px 5px 1px 0px;
+}
+
+/*
+ * THE FOLLOWING STYLES ARE FOR THE SLIDERS CONTROLLING THE PLOT SIZE
+ */
+
+/*
+ * jQuery UI Slider @VERSION
+ *
+ * Copyright 2010, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://docs.jquery.com/UI/Slider#theming
+ */
+.ui-slider { position: relative; text-align: left; }
+.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.0em; height: 0.9em; cursor: default; }
+.ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; background-position: 0 0;}
+
+.ui-slider-horizontal { height: .3em; }
+.ui-slider-horizontal .ui-slider-handle { top: -.3em; margin-left: -.6em; }
+.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
+.ui-slider-horizontal .ui-slider-range-min { left: 0; }
+.ui-slider-horizontal .ui-slider-range-max { right: 0; }
+
+.ui-corner-all { -moz-border-radius: 4px/*{cornerRadius}*/; -webkit-border-radius: 4px/*{cornerRadius}*/; border-radius: 4px/*{cornerRadius}*/; }
+.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #d3d3d3/*{borderColorDefault}*/; 
+background-image: url('../images/lorikeet/slider_handle.png');
+background-repeat: no-repeat;
+font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; }
+
+/* Component containers
+----------------------------------*/
+.ui-widget { }
+.ui-widget .ui-widget { }
+.ui-widget-content { border: 1px solid #888888/*{borderColorContent}*/; background: #CFCFCF/*{bgColorContent}*/ ; color: #111111/*{fcContent}*/; }
+.ui-widget-content a { color: #000000/*{fcContent}*/; }