PDBeRepresentativeStructure.vue

<template>
  <div>
    <v-skeleton-loader v-if="loading" type="card"></v-skeleton-loader>
    <template v-if="!loading && !thereAreAccessions">
      <v-card-text>
        No structures found for {{ uniProtAccession }}
      </v-card-text>
    </template>
    <template v-if="!loading && thereAreAccessions">
      <div class="yellow lighten-4">
        <span>{{ temporaryMsg }}</span>
      </div>
      <v-card outlined tile>
        <v-card-text>
          <v-card-title>
            UniProt Accesion: {{ uniProtAccession }}
          </v-card-title>
          <v-row>
            <v-col
              v-for="pdbeMol in structures"
              :key="pdbeMol"
              cols="12"
              lg="6"
            >
              <v-card outlined tile>
                <v-card-title> {{ pdbeMol }} </v-card-title>
                <v-card-text>
                  <Molstar :pbde-molecule-i-d="pdbeMol" />
                </v-card-text>
              </v-card>
            </v-col>
          </v-row>
        </v-card-text>
        <v-card-actions>
          <div class="buttons-container d-flex flex-wrap justify-space-around">
            <v-btn
              class="a-button"
              depressed
              color="primary"
              :href="refLink"
              target="_blank"
            >
              {{ uniProtAccession }} in PDB

              <v-icon> mdi-open-in-new </v-icon>
            </v-btn>
          </div>
        </v-card-actions>
      </v-card>
    </template>
  </div>
</template>

<script>
import axios from 'axios'
import RequestNotifications from '@/web-components-submodule/utils/RequestNotifications.js'
import Molstar from '~/web-components-submodule/components/externalTools/PDBe/Molstar.vue'

export default {
  components: {
    Molstar,
  },
  props: {
    uniProtAccession: {
      type: String,
      default: () => undefined,
    },
  },
  data() {
    return {
      structures: [],
      loading: true,
      temporaryMsg: '',
    }
  },
  computed: {
    thereAreAccessions() {
      return this.structures.length > 0
    },
    refLink() {
      return `https://www.ebi.ac.uk/pdbe/pdbe-kb/proteins/${this.uniProtAccession}`
    },
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      const requestURL = `https://www.ebi.ac.uk/pdbe/graph-api/mappings/best_structures/${this.uniProtAccession}`

      axios
        .get(requestURL)
        .then((response) => {
          const structures = response.data[this.uniProtAccession]

          // Just get the first structure for now
          if (structures.length === 0) {
            this.structures = []
            this.loading = false
          }

          const firstStructure = structures[0].pdb_id
          this.structures = [firstStructure]
          this.temporaryMsg = `Using first structure of ${requestURL} for now.`
          this.loading = false
        })
        .catch((error) => {
          RequestNotifications.dispatchRequestErrorNotification(
            error,
            this.$store.dispatch,
            `There was an error while loading the best structure for ${this.uniProtAccession}`
          )
        })
    },
  },
}
</script>

<style></style>