Skip to content

GitLab

Commit 8d421fb5 authored by Patrick Blumenkamp's avatar Patrick Blumenkamp
Browse files

refactor html code to vue-style

parent 3b7a92a1
Hide whitespace changes
Inline Side-by-side
genome-vuer/src/index.html
View file @ 8d421fb5
......@@ -15,7 +15,7 @@
<body>
<div id="app">
<genome-viewer/>
<genome-viewer :genome-stats="genome_stats" :feature-data="feature_data"></genome-viewer>
</div>
<script src="js/genome_viewer.js"></script>
</body>
......
genome-vuer/src/js/data.js
View file @ 8d421fb5
let feauture_data = [
{ name: "Gene 1",
description: "GMP synthase",
start: 1706479,
end: 1708024,
strand: "+",
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 2",
description: "glyoxalase",
start: 1708314,
end: 1708671,
strand: "+",
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 3",
description: "ABC transporter ATP-binding protein LlsG",
start: 1709429,
end: 1710317,
strand: '-',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 4",
description: "ABC transporter permease protein LlsH",
start: 1710316,
end: 1711066,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 5",
description: "LlsX",
start: 1711106,
end: 1711424,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 6",
description: "SagB family dehydrogenase LlsB",
start: 1711420,
end: 1712296,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 7",
description: "LlsY",
start: 1712303,
end: 1713221,
strand: '-',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 8",
description: "streptolysin-associated protein LlsD",
start: 1713213,
end: 1714527,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 9",
description: "hypothetical protein",
start: 1715351,
end: 1716125,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 10",
description: "glyoxalase family protein, N-terminal part",
start: 1716189,
end: 1716321,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 11",
description: "hypothetical protein",
start: 1717235,
end: 1718084,
strand: '-',
type: "gene",
color: '#454aff',
color_border: '#000000'
}
]
let genome_info = {
id: "my-genome",
start: 1706479,
end: 1718084,
tooltip: null
}
\ No newline at end of file
genome-vuer/src/js/genome_viewer.js
View file @ 8d421fb5
let genome_viewer = {
template: `
<div class="container-lin-dna">
<div id="linear-DNA-1" class="lin-dna" data-cluster-start=1706479 data-cluster-end=1718084 style="width: 100%; height: 50px;">
<div class="region-to-display" data-region-name="Gene 1" data-region-description="GMP synthase" data-region-start=1706479 data-region-end=1708024 data-region-strand="+" data-region-type="gene">
</div>
<div class="region-to-display" data-region-name="Gene 2" data-region-description="glyoxalase" data-region-start=1708314 data-region-end=1708671 data-region-strand="+" data-region-type="gene">
</div>
<div class="region-to-display" data-region-name="Gene 3" data-region-description="ABC transporter ATP-binding protein LlsG" data-region-start=1709429 data-region-end=1710317 data-region-strand="+" data-region-type="gene">
</div>
<div class="region-to-display" data-region-name="Gene 4" data-region-description="ABC transporter permease protein LlsH" data-region-start=1710316 data-region-end=1711066 data-region-strand="+" data-region-type="gene">
</div>
<div class="region-to-display" data-region-name="Gene 5" data-region-description="LlsX" data-region-start=1711106 data-region-end=1711424 data-region-strand="+" data-region-type="gene">
</div>
<div class="region-to-display" data-region-name="Gene 6" data-region-description="SagB family dehydrogenase LlsB" data-region-start=1711420 data-region-end=1712296 data-region-strand="+" data-region-type="gene">
</div>
<div class="region-to-display" data-region-name="Gene 7" data-region-description="LlsY" data-region-start=1712303 data-region-end=1713221 data-region-strand="+" data-region-type="gene">
</div>
<div class="region-to-display" data-region-name="Gene 8" data-region-description="streptolysin-associated protein LlsD" data-region-start=1713213 data-region-end=1714527 data-region-strand="+" data-region-type="gene">
</div>
<div class="region-to-display" data-region-name="Gene 9" data-region-description="hypothetical protein" data-region-start=1715351 data-region-end=1716125 data-region-strand="+" data-region-type="gene">
</div>
<div class="region-to-display" data-region-name="Gene 10" data-region-description="glyoxalase family protein, N-terminal part" data-region-start=1716189 data-region-end=1716321 data-region-strand="+" data-region-type="gene">
</div>
<div class="region-to-display" data-region-name="Gene 11" data-region-description="hypothetical protein" data-region-start=1717235 data-region-end=1718084 data-region-strand="-" data-region-type="gene">
<div :id="genomeStats.id" class="lin-dna" :data-cluster-start="genomeStats.start" :data-cluster-end="genomeStats.end" style="width: 100%; height: 50px;">
<div v-for="feature in featureData" :key="feature.name" class="region-to-display" :data-region-name="feature.name" :data-region-description="feature.description" :data-region-start="feature.start" :data-region-end="feature.end" :data-region-strand="feature.strand" :data-region-type="feature.type">
</div>
</div>
</div>`
</div>`,
props: {
genomeStats: {
validator (value) {
for (let property of ['id', 'start', 'end']) {
if (!value.hasOwnProperty(property)) {
return false
}
}
return true
}
},
featureData: {
validator (value) {
for (let feature of value) {
for (let property of ['name', 'description', 'start', 'end', 'strand', 'type']) {
if (!feature.hasOwnProperty(property)) {
return false
}
}
return true
}
}
}
}
}
var app = new Vue({
......@@ -44,6 +38,112 @@ var app = new Vue({
'genome-viewer': genome_viewer
},
data: {
message: 'Hello Vue!'
genome_stats: {
id: "my-genome",
start: 1706479,
end: 1718084,
tooltip: null
},
feature_data: [
{ name: "Gene 1",
description: "GMP synthase",
start: 1706479,
end: 1708024,
strand: "+",
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 2",
description: "glyoxalase",
start: 1708314,
end: 1708671,
strand: "+",
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 3",
description: "ABC transporter ATP-binding protein LlsG",
start: 1709429,
end: 1710317,
strand: '-',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 4",
description: "ABC transporter permease protein LlsH",
start: 1710316,
end: 1711066,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 5",
description: "LlsX",
start: 1711106,
end: 1711424,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 6",
description: "SagB family dehydrogenase LlsB",
start: 1711420,
end: 1712296,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 7",
description: "LlsY",
start: 1712303,
end: 1713221,
strand: '-',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 8",
description: "streptolysin-associated protein LlsD",
start: 1713213,
end: 1714527,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 9",
description: "hypothetical protein",
start: 1715351,
end: 1716125,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 10",
description: "glyoxalase family protein, N-terminal part",
start: 1716189,
end: 1716321,
strand: '+',
type: "gene",
color: '#454aff',
color_border: '#000000'
},
{ name: "Gene 11",
description: "hypothetical protein",
start: 1717235,
end: 1718084,
strand: '-',
type: "gene",
color: '#454aff',
color_border: '#000000'
}
]
}
})
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment