Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • chembl/chembl/main-web-interface/web-components-submodule
1 result
Show changes
Commits on Source (1)
...@@ -28,10 +28,6 @@ ...@@ -28,10 +28,6 @@
<v-row no-gutters> <v-row no-gutters>
<v-col cols="12"> <v-col cols="12">
<DatasetActions <DatasetActions
:index-name="datasetState.indexName"
:query="datasetState.query"
:initial-load="datasetState.initialLoad"
:download-formats="datasetState.downloadFormats"
:dataset-state="datasetState" :dataset-state="datasetState"
:store-module-name="storeModuleName" :store-module-name="storeModuleName"
/> />
......
...@@ -52,14 +52,6 @@ export default { ...@@ -52,14 +52,6 @@ export default {
Share, Share,
}, },
props: { props: {
downloadFormats: {
type: Object,
default: () => {},
},
initialLoad: {
type: Boolean,
default: () => false,
},
storeModuleName: { storeModuleName: {
type: String, type: String,
default: () => `dataset_browser`, default: () => `dataset_browser`,
...@@ -68,26 +60,15 @@ export default { ...@@ -68,26 +60,15 @@ export default {
type: Object, type: Object,
default: () => {}, default: () => {},
}, },
indexName: {
type: String,
default: () => 'some_index',
},
hideTitle: { hideTitle: {
type: Boolean, type: Boolean,
default: () => false, default: () => false,
}, },
query: {
type: Object,
default: () => {
return {
query: {
match_all: {},
},
}
},
},
}, },
computed: { computed: {
initialLoad() {
return this.datasetState.initialLoad
},
showToolbarTitle() { showToolbarTitle() {
if (this.hideTitle) { if (this.hideTitle) {
return false return false
......
...@@ -132,13 +132,13 @@ export default { ...@@ -132,13 +132,13 @@ export default {
return 5 return 5
} }
}, },
datasetQuery(state) { datasetQuery() {
return this.datasetState.query return this.datasetState.query
}, },
indexName(state) { indexName() {
return this.datasetState.indexName return this.datasetState.indexName
}, },
downloadFormats(state) { downloadFormats() {
return this.datasetState.downloadFormats return this.datasetState.downloadFormats
}, },
}, },
......
...@@ -65,6 +65,13 @@ export default { ...@@ -65,6 +65,13 @@ export default {
default: () => false, default: () => false,
}, },
}, },
data() {
return {
imgChemblID: null,
showError: false,
errorMsg: '',
}
},
computed: { computed: {
eubopenCompoundEntityID() { eubopenCompoundEntityID() {
return EntityNames.EubopenCompound.entityID return EntityNames.EubopenCompound.entityID
......
...@@ -138,7 +138,9 @@ export default { ...@@ -138,7 +138,9 @@ export default {
return this.generatedImageFilePath == null return this.generatedImageFilePath == null
}, },
showOptionsMenu() { showOptionsMenu() {
return this.showOptions && !this.loadingStructureDetails return (
this.showOptions && !this.loadingStructureDetails && !this.showError
)
}, },
captionText() { captionText() {
if (this.hasStructureImg) { if (this.hasStructureImg) {
...@@ -186,7 +188,6 @@ export default { ...@@ -186,7 +188,6 @@ export default {
ESProxyService.getESDocument(indexName, this.moleculeChemblId, docSource) ESProxyService.getESDocument(indexName, this.moleculeChemblId, docSource)
.then((response) => { .then((response) => {
const sourceObtained = response.data._source const sourceObtained = response.data._source
console.log('sourceObtained: ', sourceObtained)
const generatedImageFilePath = ObjectPropertyAccess.getPropertyPalue( const generatedImageFilePath = ObjectPropertyAccess.getPropertyPalue(
sourceObtained, sourceObtained,
'_metadata.compound_generated.image_file', '_metadata.compound_generated.image_file',
......
...@@ -17,7 +17,6 @@ ...@@ -17,7 +17,6 @@
</template> </template>
<script> <script>
import RequestNotifications from '@/web-components-submodule/utils/RequestNotifications.js'
import ESProxyService from '~/web-components-submodule/services/ESProxyService.js' import ESProxyService from '~/web-components-submodule/services/ESProxyService.js'
import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js' import EntityNames from '~/web-components-submodule/standardisation/EntityNames.js'
import IndexNames from '~/web-components-submodule/standardisation/IndexNames.js' import IndexNames from '~/web-components-submodule/standardisation/IndexNames.js'
...@@ -55,6 +54,7 @@ export default { ...@@ -55,6 +54,7 @@ export default {
return { return {
generatedImageFilePath: undefined, generatedImageFilePath: undefined,
imgURL: undefined, imgURL: undefined,
showError: false,
} }
}, },
computed: { computed: {
...@@ -94,38 +94,57 @@ export default { ...@@ -94,38 +94,57 @@ export default {
} }
}, },
}, },
mounted() { async mounted() {
const structureImgID = await this.getstructureImgID()
const entityID = EntityNames.Compound.entityID const entityID = EntityNames.Compound.entityID
const indexName = IndexNames.getIndexNameFromEntityID(entityID) const indexName = IndexNames.getIndexNameFromEntityID(entityID)
const docSource = ['_metadata.compound_generated.image_file'] const docSource = ['_metadata.compound_generated.image_file']
ESProxyService.getESDocument(indexName, this.moleculeChemblId, docSource) const response = await ESProxyService.getESDocument(
.then((response) => { indexName,
const sourceObtained = response.data._source structureImgID,
const generatedImageFilePath = ObjectPropertyAccess.getPropertyPalue( docSource
sourceObtained, )
'_metadata.compound_generated.image_file',
undefined,
true
)
this.generatedImageFilePath = generatedImageFilePath try {
this.forcedHeight = undefined const sourceObtained = response.data._source
if (generatedImageFilePath == null) { const generatedImageFilePath = ObjectPropertyAccess.getPropertyPalue(
this.imgURL = `${process.env.chemblWSBaseUrl}/image/${this.moleculeChemblId}.svg` sourceObtained,
} else { '_metadata.compound_generated.image_file',
this.imgURL = `${process.env.fallbackIMGsBaseUrl}/compound_placeholders/${this.generatedImageFilePath}` undefined,
} true
}) )
.catch((error) => {
ErrorTracking.trackError(error, this)
RequestNotifications.dispatchRequestErrorNotification( this.generatedImageFilePath = generatedImageFilePath
error, this.forcedHeight = undefined
this.$store.dispatch, if (generatedImageFilePath == null) {
`There was an error while loading the image for ${this.moleculeChemblId}` this.imgURL = `${process.env.chemblWSBaseUrl}/image/${structureImgID}.svg`
} else {
this.imgURL = `${process.env.fallbackIMGsBaseUrl}/compound_placeholders/${this.generatedImageFilePath}`
}
} catch (error) {
ErrorTracking.trackError(error, this)
this.showError = true
}
},
methods: {
async getstructureImgID() {
const receivedChemblId = this.moleculeChemblId
const isChemblID = /^CHEMBL\d+$/.test(receivedChemblId)
if (isChemblID) {
return Promise.resolve(receivedChemblId)
} else {
const response = await ESProxyService.getESDocument(
IndexNames.getIndexNameFromEntityID(
EntityNames.EubopenCompound.entityID
),
receivedChemblId,
['molecule_chembl_id']
) )
}) return response.data._source.molecule_chembl_id
}
},
}, },
} }
</script> </script>
......
<template> <template>
<div> <div>
<DatasetActions <DatasetActions
:index-name="datasetState.indexName"
:query="datasetState.query"
:initial-load="datasetState.initialLoad"
:download-formats="datasetState.downloadFormats"
:dataset-state="datasetState" :dataset-state="datasetState"
:store-module-name="storeModuleName" :store-module-name="storeModuleName"
hide-title
/> />
<ActionsProgress :dataset-jobs="datasetState.datasetJobs" /> <ActionsProgress :dataset-state="datasetState" />
<div></div> <div></div>
<ItemsIterator <ItemsIterator
......
...@@ -52,7 +52,7 @@ export default { ...@@ -52,7 +52,7 @@ export default {
}, },
data() { data() {
return { return {
currentView: 0, currentView: 1,
} }
}, },
computed: { computed: {
......
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<v-col cols="12" sm="4" :lg="imageColsLg"> <v-col cols="12" sm="4" :lg="imageColsLg">
<div class="d-flex justify-center"> <div class="d-flex justify-center">
<div :class="imageContainerClasses"> <div :class="imageContainerClasses">
<MoleculeImage :molecule-chembl-id="item.id" /> <MoleculeImage :molecule-chembl-id="item.data.molecule_chembl_id" />
</div> </div>
</div> </div>
</v-col> </v-col>
......