Skip to content

Commit a4b6022

Browse files
petermchalepetermchale
committed
lollipops; input validation in web app
1 parent c6c5b40 commit a4b6022

File tree

12 files changed

+161
-76
lines changed

12 files changed

+161
-76
lines changed

‎build-vue-app.sh‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,18 @@ set -o xtrace
1515
# https://www.gnu.org/software/bash/manual/html_node/Bash-Variables.html
1616
PS4='+ (${BASH_SOURCE[0]##*/} @ ${LINENO}): ${FUNCNAME[0]:+${FUNCNAME[0]}(): }'
1717

18+
export RED='\033[0;31m'
19+
export CYAN='\033[0;36m'
20+
export NO_COLOR='\033[0m'
21+
1822
root=$PWD
1923

2024
# no need to export PATH since it is already in the environment: https://unix.stackexchange.com/a/26059/406037
25+
# this sets the path for modern versions of npm AND node
2126
PATH="${root}/node/bin:$PATH"
2227

2328
bash ${root}/utilities/info.sh "npm version is: $(npm --version)"
29+
bash ${root}/utilities/info.sh "node version is: $(node --version)"
2430

2531
cd ${root}/vue-app
2632
npm install

‎flask-app/app.py‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import argparse
22
import color_traceback
33
from flask import Flask, request, make_response
4-
# from flask_cors import CORS
4+
from flask_cors import CORS # required for development of vue app
55

66
from compute_mutation_counts import compute_mutation_counts
77
from colorize import print_string_as_info, print_json
@@ -16,7 +16,7 @@ def parse_arguments():
1616

1717
# https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
1818
# this line of code can be removed once the vue.js app is served from the same port as the flask app:
19-
# CORS(app)
19+
CORS(app) # required for development of vue app
2020

2121
# Notes on serving SPAs:
2222
# https://flask.palletsprojects.com/en/2.0.x/patterns/singlepageapplications/

‎install/node.sh‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ set -o nounset
44
set -o xtrace
55
PS4='+ (${BASH_SOURCE[0]##*/} @ ${LINENO}): ${FUNCNAME[0]:+${FUNCNAME[0]}(): }'
66

7+
export RED='\033[0;31m'
8+
export CYAN='\033[0;36m'
9+
export NO_COLOR='\033[0m'
10+
711
root=$1
812

913
kernel=$(uname --kernel-name)
@@ -35,9 +39,11 @@ else
3539
fi
3640

3741
# no need to export PATH since it is already in the environment: https://unix.stackexchange.com/a/26059/406037
42+
# this sets the path for modern versions of npm AND node
3843
PATH="${root}/node/bin:$PATH"
3944

4045
bash ${root}/utilities/info.sh "npm version is: $(npm --version)"
46+
bash ${root}/utilities/info.sh "node version is: $(node --version)"
4147

4248

4349

‎predict-constraint/compute_mutation_counts.py‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,9 +92,13 @@ def compute_mutation_counts(region, model_filename, window_size, window_stride):
9292
window_observed_mutation_counts = compute_window_observed_mutation_counts(mutations, genome, windows, model)
9393
lollipops_CpG_positive, lollipops_CpG_negative = compute_lollipops(mutations, genome, region, model)
9494

95+
chromosome, start, end = unpack(region)
96+
9597
return {
9698
'region': region,
97-
'chromosome': unpack(region)[0],
99+
'chromosome': chromosome,
100+
'start': start,
101+
'end': end,
98102
'windowPositions': [window['position'] for window in windows],
99103
'windowRegions': [window['region'] for window in windows],
100104
'windowExpectedMutationCounts': window_expected_mutation_counts,

‎tests/model.json‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎vue-app/README.md‎

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,6 @@
11
# vue-app
22

3-
## Project setup
4-
```
5-
npm install
6-
```
7-
83
### Compiles and hot-reloads for development
94
```
10-
npm run serve
11-
```
12-
13-
### Compiles and minifies for production
14-
```
15-
npm run build
16-
```
17-
18-
### Lints and fixes files
5+
bash run-dev-serve.sh
196
```
20-
npm run lint
21-
```
22-
23-
### Customize configuration
24-
See [Configuration Reference](https://cli.vuejs.org/config/).

‎vue-app/run-dev-server.sh‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
set -o errexit
2+
set -o pipefail
3+
set -o nounset
4+
set -o xtrace
5+
PS4='+ (${BASH_SOURCE[0]##*/} @ ${LINENO}): ${FUNCNAME[0]:+${FUNCNAME[0]}(): }'
6+
7+
export RED='\033[0;31m'
8+
export CYAN='\033[0;36m'
9+
export NO_COLOR='\033[0m'
10+
11+
root=".."
12+
13+
# no need to export PATH since it is already in the environment: https://unix.stackexchange.com/a/26059/406037
14+
# this sets the path for modern versions of npm AND node
15+
PATH="${root}/node/bin:$PATH"
16+
17+
bash ${root}/utilities/info.sh "npm version is: $(npm --version)"
18+
bash ${root}/utilities/info.sh "node version is: $(node --version)"
19+
20+
npm run serve

‎vue-app/src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div>
2+
<div style="padding: 10px;">
33
<set-plot-parameters/>
44
<plot-mutation-counts/>
55
</div>

‎vue-app/src/api.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import axios from 'axios'
22

33
const jsonAxios = axios.create({
4-
// baseURL: 'http://localhost:5000', // comment this out once vue SPA is served by flask
4+
// baseURL: 'http://localhost:5000', // required for development of vue app
55
withCredentials: false,
66
headers: {
77
'Accept': 'application/json', // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept

‎vue-app/src/components/PlotMutationCounts.vue‎

Lines changed: 65 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -23,57 +23,74 @@ export default {
2323
...this.mutationCounts.windowExpectedMutationCounts,
2424
...this.mutationCounts.windowObservedMutationCounts
2525
)
26+
},
27+
traces () {
28+
return [
29+
{
30+
x: this.mutationCounts.windowPositions,
31+
y: this.mutationCounts.windowObservedMutationCounts,
32+
name: 'observed'
33+
},
34+
{
35+
x: this.mutationCounts.windowPositions,
36+
y: this.mutationCounts.windowExpectedMutationCounts,
37+
name: 'expected'
38+
},
39+
{
40+
type: 'bar', // https://github.com/plotly/documentation/issues/1270#issuecomment-468645317
41+
x: this.mutationCounts.lollipopsCpGNegativePositions,
42+
y: this.mutationCounts.lollipopsCpGNegativeHeights,
43+
width: Array(this.mutationCounts.lollipopsCpGNegativePositions.length).fill(1),
44+
name: 'CpG-'
45+
},
46+
{
47+
type: 'bar', // https://github.com/plotly/documentation/issues/1270#issuecomment-468645317
48+
x: this.mutationCounts.lollipopsCpGPositivePositions,
49+
y: this.mutationCounts.lollipopsCpGPositiveHeights,
50+
width: Array(this.mutationCounts.lollipopsCpGPositivePositions.length).fill(1),
51+
name: 'CpG+'
52+
},
53+
]
54+
},
55+
layout () {
56+
return {
57+
responsive: true,
58+
font: {
59+
family: 'Roboto, sans-serif',
60+
size: 16
61+
},
62+
// https://codepen.io/plotly/pen/KpLVzv ...
63+
xaxis: {
64+
title: `Position (bps) along chromosome ${this.mutationCounts.chromosome}`,
65+
showline: true,
66+
showgrid: false,
67+
zeroline: false,
68+
autotick: true,
69+
showticklabels: true,
70+
},
71+
yaxis: {
72+
title: 'Number of mutations',
73+
showline: true,
74+
showgrid: false,
75+
zeroline: false,
76+
autotick: true,
77+
showticklabels: true,
78+
range: [0, this.yaxisMax]
79+
},
80+
hovermode: 'closest',
81+
hoverlabel: {
82+
bgcolor: '#fafafa'
83+
},
84+
margin: {
85+
t: 40
86+
}
87+
}
2688
}
2789
},
2890
watch: {
2991
mutationCounts: {
3092
handler: function () {
31-
Plotly.react(
32-
this.$refs.chart,
33-
[
34-
{
35-
x: this.mutationCounts.windowPositions,
36-
y: this.mutationCounts.windowObservedMutationCounts,
37-
name: 'observed'
38-
},
39-
{
40-
x: this.mutationCounts.windowPositions,
41-
y: this.mutationCounts.windowExpectedMutationCounts,
42-
name: 'expected'
43-
}
44-
],
45-
{
46-
font: {
47-
family: 'Roboto, sans-serif',
48-
size: 16
49-
},
50-
// https://codepen.io/plotly/pen/KpLVzv ...
51-
xaxis: {
52-
title: `Position (bps) along chromosome ${this.mutationCounts.chromosome}`,
53-
showline: true,
54-
showgrid: false,
55-
zeroline: false,
56-
autotick: true,
57-
showticklabels: true,
58-
},
59-
yaxis: {
60-
title: 'Number of mutations',
61-
showline: true,
62-
showgrid: false,
63-
zeroline: false,
64-
autotick: true,
65-
showticklabels: true,
66-
range: [0, this.yaxisMax]
67-
},
68-
hovermode: 'closest',
69-
hoverlabel: {
70-
bgcolor: '#fafafa'
71-
},
72-
margin: {
73-
t: 40
74-
}
75-
},
76-
)
93+
Plotly.react(this.$refs.chart, this.traces, this.layout)
7794
},
7895
deep: true
7996
}
@@ -86,8 +103,8 @@ export default {
86103

87104
<style scoped>
88105
.plot-container {
89-
margin: auto;
90-
width: 800px;
106+
margin: 10px auto;
107+
width: 1000px;
91108
height: 500px;
92109
background-color: white;
93110
}

0 commit comments

Comments
 (0)