Skip to content
Snippets Groups Projects
Commit 8dba02c1 authored by David Mendez's avatar David Mendez
Browse files

Start to add new cell viability and health visualisation

parent e2d4036f
No related branches found
No related tags found
1 merge request!80Add multiplex data visualisation
Hide whitespace changes
Inline Side-by-side
Showing
with 373 additions and 107 deletions
components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropertiesPlots.vue 0 → 100644
+ 51
− 0
View file @ 8dba02c1
<template>
<div>
<v-row v-for="cellData in cellViabilityData" :key="cellData.cellLine.name">
<v-col cols="12">
<div class="d-flex justify-space-between">
<div>{{ cellData.cellLine.name }}</div>
<div>NCG</div>
</div>
</v-col>
<v-col cols="12"> <LineChart :cell-health="cellHealth" /> </v-col>
</v-row>
</div>
</template>
<script>
import LineChart from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/LineChart.vue'
export default {
components: {
LineChart,
},
props: {
cellHealth: {
type: Boolean,
default: () => false,
},
},
data() {
return {
cellViabilityData: [
{
cellLine: {
name: 'HEK293T',
},
},
{
cellLine: {
name: 'U2OS',
},
},
{
cellLine: {
name: 'MRC-9',
},
},
],
}
},
}
</script>
<style></style>
components/report_cards/chemical_probe/CellViabilityAndHealthComponents/DataExplanation/DataExplanationDialog.vue 0 → 100644
+ 46
− 0
View file @ 8dba02c1
<template>
<div class="text-center">
<v-dialog v-model="dialog" width="500">
<template #activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">
How to interpret this data?
</v-btn>
</template>
<v-card>
<v-card-title class="text-h5 grey lighten-2">
Privacy Policy
</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" text @click="dialog = false"> I accept </v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialog: false,
}
},
}
</script>
<style></style>
components/report_cards/chemical_probe/CellViabilityAndHealthComponents/LineChart.vue 0 → 100644
+ 89
− 0
View file @ 8dba02c1
<template>
<!-- <div>hola</div> -->
<client-only>
<apexchart
type="line"
height="200"
:series="series"
:options="chartOptions"
></apexchart>
</client-only>
</template>
<script>
export default {
props: {
cellHealth: {
type: Boolean,
default: () => false,
},
},
data() {
return {
series: [
{
name: this.getMockName1(),
data: this.getRandomValues(),
},
{
name: this.getMockName2(),
data: this.getRandomValues(),
},
{
name: this.getMockName3(),
data: this.getRandomValues(),
},
],
chartOptions: {
chart: {
height: 350,
type: 'line',
zoom: {
enabled: false,
},
animations: {
enabled: false,
},
},
stroke: {
width: [5, 5, 4],
curve: 'straight',
},
labels: ['12h', '24h', '48h'],
xaxis: {},
yaxis: {
min: 0,
max: 100,
tickAmount: 2,
labels: {
formatter: (value) => value.toFixed(0) + '%',
},
},
dataLabels: {
enabled: false,
},
},
}
},
methods: {
getRandomValues() {
const numbers = []
while (numbers.length < 3) {
numbers.push(parseInt(Math.random() * 100))
}
return numbers
},
getMockName1() {
return this.cellHealth ? 'Mitochondrial mass' : 'Healthy nuclei'
},
getMockName2() {
return this.cellHealth ? 'Tubulin effect' : 'Fragmented nuclei'
},
getMockName3() {
return this.cellHealth ? 'Membrane permeabilized' : 'Pyknosed nuclei'
},
},
}
</script>
<style></style>
components/report_cards/chemical_probe/CellViabilityAndHealthComponents/PlotsForConcentration.vue 0 → 100644
+ 41
− 0
View file @ 8dba02c1
<template>
<v-card tile outlined>
<v-card-title> Concentration: {{ concentration }} </v-card-title>
<v-divider />
<v-card-text>
<v-tabs>
<v-tab>Viability Properties</v-tab>
<v-tab>Cell Health Properties</v-tab>
<v-tab-item>
<div class="tab-item-content"><CellPropertiesPlots /></div
></v-tab-item>
<v-tab-item>
<div><CellPropertiesPlots cell-health /></div
></v-tab-item>
</v-tabs>
</v-card-text>
</v-card>
</template>
<script>
import CellPropertiesPlots from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropertiesPlots.vue'
export default {
components: {
CellPropertiesPlots,
},
props: {
concentration: {
type: String,
default: () => '',
},
},
}
</script>
<style scoped lang="scss">
.tab-item-content {
padding-top: 10px;
}
</style>
components/report_cards/chemical_probe/CellViabilityAndHealthData.vue 0 → 100644
+ 32
− 0
View file @ 8dba02c1
<template>
<v-card>
<v-card-text>
<div class="d-flex justify-center align-center">
<DataExplanationDialog />
</div>
</v-card-text>
<v-card-text>
<v-row dense>
<v-col cols="12">
<PlotsForConcentration concentration="1 µM" />
</v-col>
<v-col cols="12">
<PlotsForConcentration concentration="10 µM" />
</v-col>
</v-row>
</v-card-text>
</v-card>
</template>
<script>
import PlotsForConcentration from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/PlotsForConcentration.vue'
import DataExplanationDialog from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/DataExplanation/DataExplanationDialog.vue'
export default {
components: {
PlotsForConcentration,
DataExplanationDialog,
},
}
</script>
<style></style>
package-lock.json
+ 3
− 3
View file @ 8dba02c1
......@@ -15635,9 +15635,9 @@
"integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
},
"vue-apexcharts": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/vue-apexcharts/-/vue-apexcharts-1.6.1.tgz",
"integrity": "sha512-ILn3/55IvZQUgsc7+jKDjPfHfGUlcUQi/lDrLjRe5g7gfjj99o8otXoHwMeib3CBHYdQXNG9foe1vzv7RdUzXA=="
"version": "1.6.2",
"resolved": "https://registry.npmjs.org/vue-apexcharts/-/vue-apexcharts-1.6.2.tgz",
"integrity": "sha512-9HS3scJwWgKjmkcWIf+ndNDR0WytUJD8Ju0V2ZYcjYtlTLwJAf2SKUlBZaQTkDmwje/zMgulvZRi+MXmi+WkKw=="
},
"vue-client-only": {
"version": "2.0.0",
......
package.json
+ 1
− 1
View file @ 8dba02c1
......@@ -22,7 +22,7 @@
"dotenv": "^8.2.0",
"form-data": "^4.0.0",
"nuxt": "^2.14.12",
"vue-apexcharts": "^1.6.1",
"vue-apexcharts": "^1.6.2",
"vue-cookies": "^1.7.4",
"@chembl/chembl-elasticsearch-service": "0.0.10",
"@chembl/metadata-tags-generator": "0.0.15"
......
pages/compound/_id.vue
+ 100
− 100
View file @ 8dba02c1
......@@ -3,119 +3,119 @@
</template>
<script>
import MetadataTagsGenerator from '@chembl/metadata-tags-generator'
// import MetadataTagsGenerator from '@chembl/metadata-tags-generator'
import ChemicalProbeReportCard from '~/components/report_cards/chemical_probe/ChemicalProbeReportCard.vue'
import MetadataLoader from '~/web-components-submodule/metadata/MetadataLoader.js'
import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
import ObjectPropertyAccess from '~/web-components-submodule/utils/ObjectPropertyAccess.js'
import StringUtils from '~/web-components-submodule/utils/StringUtils.js'
// import MetadataLoader from '~/web-components-submodule/metadata/MetadataLoader.js'
// import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
// import ObjectPropertyAccess from '~/web-components-submodule/utils/ObjectPropertyAccess.js'
// import StringUtils from '~/web-components-submodule/utils/StringUtils.js'
export default {
components: {
ChemicalProbeReportCard,
},
layout: 'reportCard',
async asyncData({ $axios, error, params }) {
try {
const docSource = [
'molecule_chembl_id',
'pref_name',
'molecule_synonyms',
'_metadata.compound_generated.image_file',
]
const result = await MetadataLoader.getMetadataForEntity(
EntityNames.EubopenCompound.entityID,
params.id,
docSource
)
// async asyncData({ $axios, error, params }) {
// try {
// const docSource = [
// 'molecule_chembl_id',
// 'pref_name',
// 'molecule_synonyms',
// '_metadata.compound_generated.image_file',
// ]
// const result = await MetadataLoader.getMetadataForEntity(
// EntityNames.EubopenCompound.entityID,
// params.id,
// docSource
// )
const itemURL = `https://gateway.eubopen.org/compound/${params.id}`
const imgBaseURL = 'https://www.ebi.ac.uk/chembl/api/data/image'
const fallbackImgBaseURL = ''
const bioschemasMetadata = await MetadataTagsGenerator.EUbOPEN.CompoundMetadata.getBioschemasMetadata(
{
itemID: params.id,
itemURL,
imgBaseURL,
fallbackImgBaseURL,
}
)
return {
rawMetadata: result.data._source,
bioschemasJSONLD: bioschemasMetadata,
}
} catch (e) {
error({
statusCode: 404,
message: `No ${EntityNames.EubopenCompound.singularEntityName} found with id ${params.id}`,
})
}
},
head() {
const name = this.rawMetadata.pref_name || this.itemID
const synonymsList = this.rawMetadata.molecule_synonyms
.filter((synonym) => synonym.syn_type !== 'TRADE_NAME')
.map((synonym) => synonym.molecule_synonym)
const synonymsText =
synonymsList.length === 0 ? '' : `Synonyms: ${synonymsList.join(', ')}`
const descriptionText = StringUtils.truncateString(
`Explore ${name} ${this.rawMetadata.pref_name} in EUbOPEN. ${synonymsText}`,
170
)
// const itemURL = `https://gateway.eubopen.org/compound/${params.id}`
// const imgBaseURL = 'https://www.ebi.ac.uk/chembl/api/data/image'
// const fallbackImgBaseURL = ''
// const bioschemasMetadata = await MetadataTagsGenerator.EUbOPEN.CompoundMetadata.getBioschemasMetadata(
// {
// itemID: params.id,
// itemURL,
// imgBaseURL,
// fallbackImgBaseURL,
// }
// )
// return {
// rawMetadata: result.data._source,
// bioschemasJSONLD: bioschemasMetadata,
// }
// } catch (e) {
// error({
// statusCode: 404,
// message: `No ${EntityNames.EubopenCompound.singularEntityName} found with id ${params.id}`,
// })
// }
// },
// head() {
// const name = this.rawMetadata.pref_name || this.itemID
// const synonymsList = this.rawMetadata.molecule_synonyms
// .filter((synonym) => synonym.syn_type !== 'TRADE_NAME')
// .map((synonym) => synonym.molecule_synonym)
// const synonymsText =
// synonymsList.length === 0 ? '' : `Synonyms: ${synonymsList.join(', ')}`
// const descriptionText = StringUtils.truncateString(
// `Explore ${name} ${this.rawMetadata.pref_name} in EUbOPEN. ${synonymsText}`,
// 170
// )
const titleText = `${EntityNames.EubopenCompound.singularEntityName} ${name}`
const canonicalURL =
`https://${process.env.canonicalDomain}` + this.$route.path
// const titleText = `${EntityNames.EubopenCompound.singularEntityName} ${name}`
// const canonicalURL =
// `https://${process.env.canonicalDomain}` + this.$route.path
const chemblID = this.rawMetadata.molecule_chembl_id
const generatedImageFilePath = ObjectPropertyAccess.getPropertyPalue(
this.rawMetadata,
'_metadata.compound_generated.image_file',
undefined,
true
)
// const chemblID = this.rawMetadata.molecule_chembl_id
// const generatedImageFilePath = ObjectPropertyAccess.getPropertyPalue(
// this.rawMetadata,
// '_metadata.compound_generated.image_file',
// undefined,
// true
// )
let imgURL
// let imgURL
if (generatedImageFilePath == null) {
imgURL = `${process.env.chemblWSBaseUrl}/image/${chemblID}.svg`
} else {
imgURL = `${process.env.fallbackIMGsBaseUrl}/compound_placeholders/${this.generatedImageFilePath}`
}
// if (generatedImageFilePath == null) {
// imgURL = `${process.env.chemblWSBaseUrl}/image/${chemblID}.svg`
// } else {
// imgURL = `${process.env.fallbackIMGsBaseUrl}/compound_placeholders/${this.generatedImageFilePath}`
// }
return {
title: titleText,
meta: [
{
hid: 'description',
name: 'description',
content: descriptionText,
},
{ hid: 'og:title', name: 'og:title', content: titleText },
{
hid: 'og:description',
name: 'og:description',
content: descriptionText,
},
{ hid: 'og:type', name: 'og:type', content: 'object' },
{ hid: 'og:url', name: 'og:url', content: canonicalURL },
{ hid: 'og:image', name: 'og:image', content: imgURL },
],
link: [
{
rel: 'canonical',
href: canonicalURL,
},
],
script: [
{
id: 'JSON_LD',
type: 'application/ld+json',
json: this.bioschemasJSONLD,
},
],
}
},
// return {
// title: titleText,
// meta: [
// {
// hid: 'description',
// name: 'description',
// content: descriptionText,
// },
// { hid: 'og:title', name: 'og:title', content: titleText },
// {
// hid: 'og:description',
// name: 'og:description',
// content: descriptionText,
// },
// { hid: 'og:type', name: 'og:type', content: 'object' },
// { hid: 'og:url', name: 'og:url', content: canonicalURL },
// { hid: 'og:image', name: 'og:image', content: imgURL },
// ],
// link: [
// {
// rel: 'canonical',
// href: canonicalURL,
// },
// ],
// script: [
// {
// id: 'JSON_LD',
// type: 'application/ld+json',
// json: this.bioschemasJSONLD,
// },
// ],
// }
// },
computed: {
itemID() {
return this.$route.params.id
......
report_cards_structure/CompoundReportCardGenerator.js
+ 9
− 2
View file @ 8dba02c1
......@@ -6,6 +6,7 @@ import ProbeMechanism from '~/components/report_cards/chemical_probe/ProbeMechan
import CompoundCrystalStructures from '~/components/report_cards/chemical_probe/CompoundCrystalStructures.vue'
import CalculatedProperties from '~/components/report_cards/chemical_probe/CalculatedProperties.vue'
import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
import CellViabilityAndHealthData from '~/components/report_cards/chemical_probe/CellViabilityAndHealthData.vue'
const methods = {
generateReportCardStructure(
......@@ -43,6 +44,12 @@ const methods = {
component: ProbeProfile,
index: 3,
},
{
id: 'CellViabilityAndHealthData',
title: 'Cell Viability And Health Data',
component: CellViabilityAndHealthData,
index: 4,
},
{
id: 'CalculatedProperties',
title: 'Calculated Properties',
......@@ -51,13 +58,13 @@ const methods = {
entityID: EntityNames.EubopenCompound.entityID,
},
index: 4,
index: 5,
},
{
id: 'CrystalStructures',
title: 'PBD Ligand Codes',
component: CompoundCrystalStructures,
index: 5,
index: 6,
},
],
}
......
web-components-submodule @ 67aa7955
Compare 8bf863da...67aa7955
Subproject commit 8bf863dac8152a4e62c3c5c689157577073a1fe4
Subproject commit 67aa79551387d49155c461d6d960a22bf685cb0a
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