diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropertiesPlots.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropertiesPlots.vue
index 1aed537585f98321731afe4ac99beebc3635ea02..d77997b3f2463d022a4e9dcc563246be1f6f8f69 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropertiesPlots.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropertiesPlots.vue
@@ -1,18 +1,23 @@
<template>
<div>
- <template v-for="cellData in cellViabilityData">
- <div :key="`${cellData.cellLine.name}-title`">
+ <template v-for="(cellData, cellLineID) in dataPerCell">
+ <div :key="`${cellLineID}-title`">
<v-banner single-line color="blue-grey lighten-4">
<div class="primary--text font-weight-bold">
- {{ cellData.cellLine.name }}
+ {{ cellData.name }}
</div>
<template #actions>
- <CellLineInfo />
+ <CellLineInfo :cell-line-i-d="cellLineID" />
</template>
</v-banner>
</div>
- <CellPropsRows :key="cellData.cellLine.name" :cell-health="cellHealth" />
- <v-divider :key="`${cellData.cellLine.name}-divider`" />
+ <CellPropsRows
+ :key="`${cellLineID}-props`"
+ :cell-health="cellHealth"
+ :time-points="timePoints"
+ :cell-line-data="dataPerCell[cellLineID]"
+ />
+ <v-divider :key="`${cellData.name}-divider`" />
</template>
</div>
</template>
@@ -30,6 +35,14 @@ export default {
type: Boolean,
default: () => false,
},
+ dataPerCell: {
+ type: Object,
+ default: () => {},
+ },
+ timePoints: {
+ type: Array,
+ default: () => [],
+ },
},
data() {
return {
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/CellCount.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/CellCount.vue
index c9acf3129bac6cb1633811917b08063f36268b31..ea939a0d3c75e009b22610b513d08e2cae97949e 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/CellCount.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/CellCount.vue
@@ -1,8 +1,20 @@
<template>
<div class="d-flex justify-space-between">
- <SingleCellCountDialog title="12h" />
- <SingleCellCountDialog title="24h" />
- <SingleCellCountDialog title="48h" />
+ <SingleCellCountDialog
+ :title="timePoints[0]"
+ :control-d-m-s-o-total-cell-count="controlDMSOCellCount"
+ :total-cell-count="cellCounts[0]"
+ />
+ <SingleCellCountDialog
+ :title="timePoints[1]"
+ :control-d-m-s-o-total-cell-count="controlDMSOCellCount"
+ :total-cell-count="cellCounts[1]"
+ />
+ <SingleCellCountDialog
+ :title="timePoints[2]"
+ :control-d-m-s-o-total-cell-count="controlDMSOCellCount"
+ :total-cell-count="cellCounts[2]"
+ />
</div>
</template>
@@ -12,6 +24,20 @@ export default {
components: {
SingleCellCountDialog,
},
+ props: {
+ timePoints: {
+ type: Array,
+ default: () => [],
+ },
+ cellCounts: {
+ type: Array,
+ default: () => [],
+ },
+ controlDMSOCellCount: {
+ type: Number,
+ default: () => 1,
+ },
+ },
}
</script>
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/SingleCellCountDialog.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/SingleCellCountDialog.vue
index d07d0c32bf6a5c43901858254f75f5a973064c57..0769e126b731516457403065536c8f3d75a5e4bb 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/SingleCellCountDialog.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellCount/SingleCellCountDialog.vue
@@ -103,17 +103,21 @@ export default {
type: String,
default: () => '',
},
+ controlDMSOTotalCellCount: {
+ type: Number,
+ default: () => 1,
+ },
+ totalCellCount: {
+ type: Number,
+ default: () => 1,
+ },
},
data() {
return {
dialog: false,
- controlDMSOTotalCellCount: 500,
}
},
computed: {
- totalCellCount() {
- return Math.floor(Math.random() * 500)
- },
normalisedCount() {
return parseInt(
(this.totalCellCount / this.controlDMSOTotalCellCount) * 100
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellLineInfo.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellLineInfo.vue
index 7e96023c3470c67d26aa1f0346d43f71b8d55d64..925c4644a24dd525518dccf5c9b410d55e5ef45f 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellLineInfo.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellLineInfo.vue
@@ -2,28 +2,94 @@
<div class="text-center">
<v-dialog v-model="dialog" width="500">
<template #activator="{ on, attrs }">
- <div>
- <div>
- {{ title }}
- </div>
- <v-btn color="primary" icon v-bind="attrs" v-on="on">
- <v-icon> mdi-information-outline </v-icon>
- </v-btn>
- </div>
+ <v-btn color="primary" icon v-bind="attrs" v-on="on" @click="loadData">
+ <v-icon> mdi-information-outline </v-icon>
+ </v-btn>
</template>
- <v-card>
+ <v-card v-if="!dataLoaded">
+ <v-skeleton-loader type="card"></v-skeleton-loader>
+ </v-card>
+
+ <v-card v-else>
<v-card-title class="text-h5 grey lighten-2">
- Cell Line Info
+ {{ title }}
</v-card-title>
+ <v-divider />
<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-simple-table>
+ <template #default>
+ <tbody>
+ <tr>
+ <td><b>Name:</b></td>
+ <td>{{ cellLineData.cell_name }}</td>
+ </tr>
+ <tr>
+ <td><b>Description:</b></td>
+ <td>{{ cellLineData.cell_description }}</td>
+ </tr>
+ <tr>
+ <td><b>Organism:</b></td>
+ <td>{{ cellLineData.cell_source_organism }}</td>
+ </tr>
+ <tr>
+ <td><b>Source Tissue:</b></td>
+ <td>{{ cellLineData.cell_source_tissue }}</td>
+ </tr>
+ </tbody>
+ </template>
+ </v-simple-table>
+ </v-card-text>
+ <v-card-subtitle> References </v-card-subtitle>
+ <v-card-text>
+ <v-simple-table>
+ <template #default>
+ <tbody>
+ <tr>
+ <td><b>ChEMBL:</b></td>
+ <td>
+ <a :href="linkToChEMBLReportCard">{{ cellLineID }}</a>
+ </td>
+ </tr>
+ <tr>
+ <td><b>Cell Line Ontology:</b></td>
+ <td>
+ <a v-if="thereIsCLOLink" :href="CLOLink">
+ {{ cellLineData.clo_id }}
+ </a>
+ <div v-else>---</div>
+ </td>
+ </tr>
+ <tr>
+ <td><b>Experimental Factor Ontology:</b></td>
+ <td>
+ <a v-if="thereIsEFOLink" :href="EFOLink">
+ {{ cellLineData.efo_id }}
+ </a>
+ <div v-else>---</div>
+ </td>
+ </tr>
+ <tr>
+ <td><b>Cellosaurus:</b></td>
+ <td>
+ <a v-if="thereIsCellosaurusLink" :href="CellosaurusLink">
+ {{ cellLineData.cellosaurus_id }}
+ </a>
+ <div v-else>---</div>
+ </td>
+ </tr>
+ <tr>
+ <td><b>LINCS Project:</b></td>
+ <td>
+ <a v-if="thereIsLINCSProjectLink" :href="LINCSProjectLink">
+ {{ cellLineData.cl_lincs_id }}
+ </a>
+ <div v-else>---</div>
+ </td>
+ </tr>
+ </tbody>
+ </template>
+ </v-simple-table>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
@@ -36,9 +102,16 @@
</template>
<script>
+import RequestNotifications from '~/web-components-submodule/utils/RequestNotifications.js'
+import ESProxyService from '~/web-components-submodule/services/ESProxyService.js'
+import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
+import IndexNames from '~/web-components-submodule/standardisation/IndexNames.js'
+import ErrorTracking from '~/web-components-submodule/tracking/ErrorTracking.js'
+import LinksToEntities from '~/web-components-submodule/standardisation/LinksToEntities.js'
+
export default {
props: {
- title: {
+ cellLineID: {
type: String,
default: () => '',
},
@@ -46,8 +119,80 @@ export default {
data() {
return {
dialog: false,
+ dataLoaded: false,
+ cellLineData: {},
}
},
+ computed: {
+ title() {
+ return this.cellLineData.cell_name == null
+ ? this.cellLineID
+ : this.cellLineData.cell_name
+ },
+ thereIsCLOLink() {
+ return this.cellLineData.clo_id != null
+ },
+ thereIsEFOLink() {
+ return this.cellLineData.efo_id != null
+ },
+ thereIsCellosaurusLink() {
+ return this.cellLineData.cellosaurus_id != null
+ },
+ thereIsLINCSProjectLink() {
+ return this.cellLineData.cl_lincs_id != null
+ },
+ linkToChEMBLReportCard() {
+ return LinksToEntities[EntityNames.CellLine.entityID].getLinkToReportCard(
+ this.cellLineID
+ )
+ },
+ CLOLink() {
+ return `https://purl.obolibrary.org/obo/${this.cellLineData.clo_id}`
+ },
+ EFOLink() {
+ return `https://www.ebi.ac.uk/efo/${this.cellLineData.efo_id}`
+ },
+ CellosaurusLink() {
+ return `https://web.expasy.org/cellosaurus/${this.cellLineData.cellosaurus_id}`
+ },
+ LINCSProjectLink() {
+ return `https://life.ccs.miami.edu/life/summary?mode=CellLine&source=LINCS&input=${this.cellLineData.cellosaurus_id}`
+ },
+ },
+ methods: {
+ loadData() {
+ if (this.dataLoaded) {
+ return
+ }
+ const entityID = EntityNames.CellLine.entityID
+ const indexName = IndexNames.getIndexNameFromEntityID(entityID)
+ const source = [
+ 'cell_name',
+ 'cell_description',
+ 'cell_source_organism',
+ 'cell_source_tissue',
+ 'cellosaurus_id',
+ 'cl_lincs_id',
+ 'clo_id',
+ 'efo_id',
+ ]
+
+ ESProxyService.getESDocument(indexName, this.cellLineID, source)
+ .then((response) => {
+ this.cellLineData = response.data._source
+ this.dataLoaded = true
+ })
+ .catch((error) => {
+ ErrorTracking.trackError(error, this)
+
+ RequestNotifications.dispatchRequestErrorNotification(
+ error,
+ this.$store.dispatch,
+ `There was an error while loading the data of cell line ${this.cellLineID}`
+ )
+ })
+ },
+ },
}
</script>
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellPropsRows.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellPropsRows.vue
index 6dcd53e6e3aba272e66ce992fa641dbbae955609..a5c326a56c354e469839088c4c30ef6baa3ce82e 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellPropsRows.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/CellPropsRows.vue
@@ -3,13 +3,20 @@
<v-expansion-panel>
<v-expansion-panel-header> Images </v-expansion-panel-header>
<v-expansion-panel-content>
- <ImagesInTime />
+ <ImagesInTime
+ :time-points="timePoints"
+ :image-u-r-l-s="cellLineData.imageURLS"
+ />
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
<v-expansion-panel-header> Properties </v-expansion-panel-header>
<v-expansion-panel-content>
- <LineChart :cell-health="cellHealth" />
+ <LineChart
+ :cell-health="cellHealth"
+ :time-points="timePoints"
+ :cell-properties="cellLineData.properties"
+ />
</v-expansion-panel-content>
</v-expansion-panel>
<v-expansion-panel>
@@ -17,7 +24,11 @@
Normalised Cell Count
</v-expansion-panel-header>
<v-expansion-panel-content>
- <CellCount />
+ <CellCount
+ :time-points="timePoints"
+ :cell-counts="cellLineData.cellCounts"
+ :control-d-m-s-o-cell-count="cellLineData.controlDMSOCellCount"
+ />
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
@@ -39,6 +50,14 @@ export default {
type: Boolean,
default: () => false,
},
+ timePoints: {
+ type: Array,
+ default: () => [],
+ },
+ cellLineData: {
+ type: Object,
+ default: () => {},
+ },
},
computed: {
panels() {
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesDialog.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesDialog.vue
index 2cecbaef9fd353ca9afae953211498f254e28271..bd46cd9e0362938dfe97247ad3f8d6ba159828cd 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesDialog.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesDialog.vue
@@ -69,12 +69,14 @@ export default {
type: String,
default: () => '',
},
+ imgUrl: {
+ type: String,
+ default: () => '',
+ },
},
data() {
return {
dialog: false,
- imgUrl:
- 'https://www.ebi.ac.uk/biostudies/files/S-BIAD145/processed_images/CQ1-ctf001_HEK_blanc/20211006T142945/B-02_F0001_T0001_Z0001.png',
}
},
}
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesInTime.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesInTime.vue
index a90fc3742a73859d4b7c82101104a984e16e3b48..cbdc3754effefb189f2b846bb05ae9508aad91ab 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesInTime.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/ImagesInTime/ImagesInTime.vue
@@ -1,9 +1,9 @@
<template>
<div>
<div class="d-flex justify-space-between">
- <ImagesDialog title="12h" />
- <ImagesDialog title="24h" />
- <ImagesDialog title="48h" />
+ <ImagesDialog :title="timePoints[0]" :img-url="imageURLS[0]" />
+ <ImagesDialog :title="timePoints[1]" :img-url="imageURLS[1]" />
+ <ImagesDialog :title="timePoints[2]" :img-url="imageURLS[2]" />
</div>
</div>
</template>
@@ -14,6 +14,16 @@ export default {
components: {
ImagesDialog,
},
+ props: {
+ timePoints: {
+ type: Array,
+ default: () => [],
+ },
+ imageURLS: {
+ type: Array,
+ default: () => [],
+ },
+ },
}
</script>
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue
index fc20185a7fe638c89a8084eed944cb3b8ee14a21..d638651c4ce16c29393b5278ccbb61842c28952c 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/LineChart.vue
@@ -23,23 +23,17 @@ export default {
type: Boolean,
default: () => false,
},
+ timePoints: {
+ type: Array,
+ default: () => [],
+ },
+ cellProperties: {
+ type: Object,
+ default: () => {},
+ },
},
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,
@@ -55,7 +49,7 @@ export default {
width: [5, 5, 4],
curve: 'straight',
},
- labels: ['12h', '24h', '48h'],
+ labels: this.timePoints,
xaxis: {},
yaxis: {
min: 0,
@@ -71,22 +65,19 @@ export default {
},
}
},
- methods: {
- getRandomValues() {
- const numbers = []
- while (numbers.length < 3) {
- numbers.push(parseInt(Math.random() * 100))
+ computed: {
+ series() {
+ const series = []
+ for (const propID in this.cellProperties) {
+ const propData = this.cellProperties[propID]
+ const propertyLabel = propData.label
+ const propertyValues = propData.values
+ series.push({
+ name: propertyLabel,
+ data: propertyValues,
+ })
}
- 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'
+ return series
},
},
}
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/SampleImages.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/SampleImages.vue
index 2fbece3f30a44a9318b722a009b116d35a233f6d..0bf083d063d83b10c174b3ed1662df0ddf69f219 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/SampleImages.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/CellPropsRows/SampleImages.vue
@@ -3,13 +3,13 @@
<v-dialog v-model="dialog" width="500">
<template #activator="{ on, attrs }">
<v-btn color="primary" outlined x-small v-bind="attrs" v-on="on">
- Sample Images
+ Training Images
</v-btn>
</template>
<v-card>
<v-card-title class="text-h5 grey lighten-2">
- Sample Images
+ Training Images
</v-card-title>
<v-container>
<v-row>
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/PlotsForConcentration.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/PlotsForConcentration.vue
index c83f32e37d16490e873a16bbe0d75258241946eb..dc52921e63d19c559f89b722f7f521e3910baab6 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/PlotsForConcentration.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/PlotsForConcentration.vue
@@ -6,12 +6,20 @@
<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
+ <div class="tab-item-content">
+ <CellPropertiesPlots
+ :data-per-cell="data.cellHealthProperties.dataPerCell"
+ :time-points="timePoints"
+ /></div
></v-tab-item>
<v-tab-item>
- <div><CellPropertiesPlots cell-health /></div
+ <div class="tab-item-content">
+ <CellPropertiesPlots
+ :data-per-cell="data.viabilityProperties.dataPerCell"
+ cell-health
+ :time-points="timePoints"
+ /></div
></v-tab-item>
</v-tabs>
</v-card-text>
@@ -30,6 +38,18 @@ export default {
type: String,
default: () => '',
},
+ data: {
+ type: Object,
+ default: () => {},
+ },
+ dataPerCell: {
+ type: Object,
+ default: () => {},
+ },
+ timePoints: {
+ type: Array,
+ default: () => [],
+ },
},
}
</script>
diff --git a/components/report_cards/chemical_probe/CellViabilityAndHealthData.vue b/components/report_cards/chemical_probe/CellViabilityAndHealthData.vue
index ffe21f061b3a2c01646a94a77a0a87d57b4f41ad..648311de0892a5ed1960e7712d9dc2f1582fd96d 100644
--- a/components/report_cards/chemical_probe/CellViabilityAndHealthData.vue
+++ b/components/report_cards/chemical_probe/CellViabilityAndHealthData.vue
@@ -1,31 +1,98 @@
<template>
<v-card>
- <v-card-text>
- <div class="d-flex justify-center align-center">
- <DataExplanationDialog />
- </div>
- </v-card-text>
- <v-card-text>
+ <v-card-text v-if="!dataLoaded">
+ <v-row dense>
+ <v-col cols="12" sm="6">
+ <v-skeleton-loader type="card"></v-skeleton-loader>
+ </v-col>
+ <v-col cols="12" sm="6">
+ <v-skeleton-loader type="card"></v-skeleton-loader>
+ </v-col>
+ </v-row>
<v-row dense>
<v-col cols="12" sm="6">
- <PlotsForConcentration concentration="1 µM" />
+ <v-skeleton-loader type="card"></v-skeleton-loader>
</v-col>
<v-col cols="12" sm="6">
- <PlotsForConcentration concentration="10 µM" />
+ <v-skeleton-loader type="card"></v-skeleton-loader>
</v-col>
</v-row>
</v-card-text>
+ <template v-else>
+ <v-card-text>
+ <div class="d-flex justify-center align-center">
+ <DataExplanationDialog />
+ </div>
+ </v-card-text>
+ <v-card-text>
+ <v-row dense>
+ <v-col
+ v-for="(data, concentration) in dataPerConcentration"
+ :key="concentration"
+ cols="12"
+ sm="6"
+ >
+ <PlotsForConcentration
+ :concentration="concentration"
+ :data="data"
+ :time-points="timePoints"
+ />
+ </v-col>
+ </v-row>
+ </v-card-text>
+ </template>
</v-card>
</template>
<script>
+import RequestNotifications from '@/web-components-submodule/utils/RequestNotifications.js'
import PlotsForConcentration from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/PlotsForConcentration.vue'
import DataExplanationDialog from '~/components/report_cards/chemical_probe/CellViabilityAndHealthComponents/DataExplanation/DataExplanationDialog.vue'
+import ESProxyService from '~/web-components-submodule/services/ESProxyService.js'
+import ErrorTracking from '~/web-components-submodule/tracking/ErrorTracking.js'
+
export default {
components: {
PlotsForConcentration,
DataExplanationDialog,
},
+ props: {
+ itemID: {
+ type: String,
+ default: () => undefined,
+ },
+ },
+ data() {
+ return {
+ dataLoaded: false,
+ dataPerConcentration: {},
+ timePoints: [],
+ }
+ },
+ mounted() {
+ this.loadData()
+ },
+ methods: {
+ loadData() {
+ const visualisationPath = `/eubopen/visualisations/compound/cell_viability_and_health_data/${this.itemID}`
+
+ ESProxyService.getGenericData(visualisationPath)
+ .then((response) => {
+ this.timePoints = response.data.timePoints
+ this.dataPerConcentration = response.data.concentrations
+ this.dataLoaded = true
+ })
+ .catch((error) => {
+ ErrorTracking.trackError(error, this)
+
+ RequestNotifications.dispatchRequestErrorNotification(
+ error,
+ this.$store.dispatch,
+ `Target Classifications: There was an error while loading the Cell Viability and Health Data!`
+ )
+ })
+ },
+ },
}
</script>
diff --git a/nuxt.config.js b/nuxt.config.js
index d8ebb910a6aef2d3fb8137ce85aeede383ca02f6..50d856f54846b7ad5f6cb320617224162b30ab00 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -47,6 +47,8 @@ export default {
process.env.COMPOUND_REPORT_CARDS_BASE_URL || '/compound',
targetReportCardsBaseUrl:
process.env.TARGET_REPORT_CARDS_BASE_URL || '/target',
+ cellLineReportCardsBaseUrl:
+ process.env.CELL_LINE_REPORT_CARDS_BASE_URL || '/cell_line_report_card',
eubopenCompoundReportCardsBaseUrl:
process.env.EUBOPEN_COMPOUND_REPORT_CARDS_BASE_URL || '/compound',
eubopenTargetReportCardsBaseUrl:
diff --git a/web-components-submodule b/web-components-submodule
index 67aa79551387d49155c461d6d960a22bf685cb0a..f81fef0169491c7e605c3211ad9ccb87ee079f9c 160000
--- a/web-components-submodule
+++ b/web-components-submodule
@@ -1 +1 @@
-Subproject commit 67aa79551387d49155c461d6d960a22bf685cb0a
+Subproject commit f81fef0169491c7e605c3211ad9ccb87ee079f9c