- CHG: Added all category values to bar charts and radar charts.

- ADD: Added hyperlink field to dataset edit dialog. - ADD: Added dataset institutes. -
germinateplatform · Oct 31, 2024 · 15b9bb0 · 15b9bb0
1 parent edfb516
commit 15b9bb0
Show file tree

Hide file tree

Showing 14 changed files with 142 additions and 13 deletions.
diff --git a/src/components/charts/BarChart.vue b/src/components/charts/BarChart.vue
@@ -52,6 +52,10 @@ export default {
       type: String,
       default: ''
     },
+    xLabels: {
+      type: Array,
+      default: () => null
+    },
     downloadName: {
       type: String,
       default: 'bar-chart'
@@ -129,6 +133,7 @@ export default {
                 .x(this.xColumn)
                 .xCategory(this.xTitle)
                 .yCategory(this.yTitle)
+                .xLabels(this.xLabels)
                 .mode(this.mode)
                 .onPointClicked(data => {
                   this.$emit('bar-clicked', data)

diff --git a/src/components/charts/ChoroplethChart.vue b/src/components/charts/ChoroplethChart.vue
@@ -65,7 +65,7 @@ export default {
 
       const reader = new FileReader()
       reader.onload = () => {
-        const rows = d3Dsv.tsvParse(reader.result)
+        const rows = d3Dsv.tsvParse(reader.result).filter(r => r.code !== 'UNK')
 
         let gradientColors
 

diff --git a/src/components/charts/RadarChart.vue b/src/components/charts/RadarChart.vue
@@ -119,6 +119,7 @@ export default {
         const layout = {
           paper_bgcolor: 'transparent',
           plot_bgcolor: 'transparent',
+          height: Math.min(700, div.offsetWidth),
           dragmode: 'pan',
           polar: {
             bgcolor: 'transparent',

diff --git a/src/components/export/ExportSelection.vue b/src/components/export/ExportSelection.vue
@@ -13,7 +13,7 @@
       <ExportGroupSelection :info="groupSelectionInfo" :queryId="queryId" :selectSize="selectSize" :multiple="multipleGroups" :title="texts.groupTitle" :text="texts.groupText" :tooltip="texts.groupTooltip" :itemType="itemType" :groups="groups" ref="groupSelection"/>
     </b-col>
     <b-col cols=12>
-      <b-btn variant="primary" @click="buttonPressed" :disabled="getButtonDisabled()"><MdiIcon :path="mdiArrowRightBox" /> {{ $t(texts.exportButton) }}</b-btn>
+      <b-btn class="my-3" variant="primary" @click="buttonPressed" :disabled="getButtonDisabled()"><MdiIcon :path="mdiArrowRightBox" /> {{ $t(texts.exportButton) }}</b-btn>
     </b-col>
   </b-row>
 </template>

diff --git a/src/components/germplasm/GermplasmTraitStats.vue b/src/components/germplasm/GermplasmTraitStats.vue
@@ -17,7 +17,10 @@
         </b-col>
       </b-row>
 
-      <RadarChart :baseFilename="`radar-chart-${germplasmId}`" :plotData="radarChartData" v-if="radarChartData" />
+      <template v-if="radarChartData">
+        <b-form-checkbox switch v-model="useTraitFullName"> {{ $t('formCheckboxShowTraitFullName') }}</b-form-checkbox>
+        <RadarChart :baseFilename="`radar-chart-${germplasmId}`" :plotData="radarChartData" v-if="radarChartData" />
+      </template>
       <div ref="chart" />
     </div>
     <p v-else>{{ $t('toastNoDataFound') }}</p>
@@ -46,7 +49,8 @@ export default {
       mdiPlaylistCheck,
       mdiPlaylistRemove,
       stats: null,
-      searchTerm: null
+      searchTerm: null,
+      useTraitFullName: false
     }
   },
   watch: {
@@ -84,7 +88,7 @@ export default {
           const v = (s.avg - s.min) / (s.max - s.min) * 100
 
           result.customdata.push(s.avg)
-          result.dims.push(s.traitNameShort || s.traitName)
+          result.dims.push(this.useTraitFullName ? s.traitName : (s.traitNameShort || s.traitName))
           result.values.push(v)
         })
 

diff --git a/src/components/modals/DatasetEditModal.vue b/src/components/modals/DatasetEditModal.vue
@@ -83,6 +83,11 @@
             <b-form-checkbox switch v-model="isExternal" id="external" :disabled="isEdit" />
           </b-form-group>
         </b-col>
+        <b-col cols=12 lg=6 v-if="isExternal">
+          <b-form-group label-for="hyperlink" :label="$t('tableColumnDatasetHyperlink')">
+            <b-form-input v-model="hyperlink" id="hyperlink" type="url" />
+          </b-form-group>
+        </b-col>
       </b-row>
     </b-form>
 
@@ -132,6 +137,7 @@ export default {
       datasetDescription: null,
       datasetStartDate: null,
       datasetEndDate: null,
+      hyperlink: null,
       isExternal: null,
       licenseId: null,
       licenses: [],
@@ -253,6 +259,7 @@ export default {
         this.datasetName = this.dataset.datasetName
         this.datasetDescription = this.dataset.datasetDescription
         this.isExternal = this.dataset.isExternal
+        this.hyperlink = this.dataset.hyperlink
         this.licenseId = this.dataset.licenseId || null
         this.experimentId = this.dataset.experimentId
         this.datasetStartDate = this.dataset.startDate ? new Date(this.dataset.startDate) : null
@@ -263,6 +270,7 @@ export default {
         this.datasetName = null
         this.datasetDescription = null
         this.isExternal = false
+        this.hyperlink = null
         this.licenseId = null
         this.experimentId = null
         this.datasetStartDate = null
@@ -363,7 +371,8 @@ export default {
           dateEnd: this.datasetEndDate,
           datasetStateId: this.datasetState,
           datasettypeId: this.selectedDatasetType,
-          isExternal: this.isExternal
+          isExternal: this.isExternal,
+          hyperlink: this.isExternal ? this.hyperlink : null
         }, (result) => {
           this.loading = false
 

diff --git a/src/components/structure/SidebarAsyncJobs.vue b/src/components/structure/SidebarAsyncJobs.vue
@@ -94,7 +94,7 @@
             <!-- Date time and filename -->
             <div class="text-muted">
               <MdiIcon :path="mdiCalendarClock" /><small v-if="job.updatedOn"> {{ new Date(job.updatedOn).toLocaleString() }}</small><br/>
-              <template v-if="job.originalFilename"><MdiIcon :path="mdiFile" /><small>&nbsp;{{ job.originalFilename }}</small></template>
+              <template v-if="job.originalFilename"><MdiIcon :path="mdiFile" /><small class="text-filename">&nbsp;{{ job.originalFilename }}</small></template>
             </div>
             <!-- Status -->
             <div v-if="job.status === 'failed'">
@@ -568,4 +568,8 @@ export default {
 .action-buttons .btn {
   border-radius: 0;
 }
+
+.text-filename {
+  overflow-wrap: anywhere;
+}
 </style>
diff --git a/src/components/tables/CollaboratorTable.vue b/src/components/tables/CollaboratorTable.vue
@@ -106,7 +106,7 @@ export default {
   },
   methods: {
     isOrcid: function (input) {
-      return input && input.length > 0 && /^(\d{4}-){3}\d{3}(\d|X)$/.test(input)
+      return /^(\d{4}-){3}\d{3}(\d|X)$/.test(input)
     },
     refresh: function () {
       this.$refs.collaboratorTable.refresh()

diff --git a/src/components/tables/DatasetTable.vue b/src/components/tables/DatasetTable.vue
@@ -117,6 +117,17 @@
         </a>
         <MdiIcon :path="mdiAccountMultiple" className="text-muted" v-else/>
       </template>
+      <!-- Display the number of institutions associated with this dataset -->
+      <template v-slot:cell(institutions)="data">
+        <template v-if="data.item.institutions !== undefined && data.item.institutions !== null && data.item.institutions.length > 0">
+          <div>
+            <a href="#" class="text-decoration-none text-nowrap" @click.prevent="showDetails('institutions', data)" v-b-tooltip.hover :title="$t('tableTooltipDatasetLocations')">
+              <MdiIcon :path="mdiCity" />
+              <span>{{ data.item.institutions.length }}</span>
+            </a>
+          </div>
+        </template>
+      </template>
       <!-- Show attributes -->
       <template v-slot:cell(attributes)="data">
         <a href="#" class="text-decoration-none" v-if="(data.item.attributes !== 0 || data.item.dublinCore) && (!data.item.licenseName || isAccepted(data.item))" @click.prevent="showDetails('attributes', data)">
@@ -161,6 +172,10 @@
           <!-- Attribute modal -->
           <AttributeDetails :dataset="data.item" v-if="data.item && (data.item.dublinCore !== undefined || data.item.attributes !== 0)" />
         </div>
+        <div v-else-if="detailType === 'institutions'" class="border-top border-primary bg-white p-3">
+          <!-- Institution table -->
+          <InstitutionDetails :dataset="data.item" v-if="data.item && data.item.institutions && data.item.institutions.length > 0" />
+        </div>
       </template>
     </BaseTable>
 
@@ -182,6 +197,7 @@ import MdiIcon from '@/components/icons/MdiIcon'
 import BaseTable from '@/components/tables/BaseTable'
 import LicenseModal from '@/components/modals/LicenseModal'
 import CollaboratorDetails from '@/components/tables/details/CollaboratorDetails'
+import InstitutionDetails from '@/components/tables/details/InstitutionDetails'
 import GenotypeExportModal from '@/components/modals/GenotypeExportModal'
 import DatasetEditModal from '@/components/modals/DatasetEditModal'
 import PublicationsModal from '@/components/modals/PublicationsModal'
@@ -197,7 +213,7 @@ import { isPageAvailable, downloadBlob } from '@/mixins/util'
 import { userIsAtLeast, USER_TYPE_DATA_CURATOR } from '@/mixins/api/auth'
 import { getDateTimeString, isTruncatedAfterWords, truncateAfterWords, getNumberWithSuffix } from '@/mixins/formatting'
 
-import { mdiHelpCircle, mdiOpenInNew, mdiPageNext, mdiInformationOutline, mdiPlusBox, mdiDelete, mdiAttachment, mdiMapMarker, mdiCheck, mdiNewBox, mdiTextBoxCheckOutline, mdiAccountMultiple, mdiFilePlus, mdiDownload, mdiSquareEditOutline, mdiLinkBoxVariantOutline, mdiTextBoxOutline } from '@mdi/js'
+import { mdiHelpCircle, mdiOpenInNew, mdiPageNext, mdiInformationOutline, mdiCity, mdiPlusBox, mdiDelete, mdiAttachment, mdiMapMarker, mdiCheck, mdiNewBox, mdiTextBoxCheckOutline, mdiAccountMultiple, mdiFilePlus, mdiDownload, mdiSquareEditOutline, mdiLinkBoxVariantOutline, mdiTextBoxOutline } from '@mdi/js'
 import { Pages } from '@/mixins/pages'
 
 const emitter = require('tiny-emitter/instance')
@@ -237,6 +253,7 @@ export default {
       datasetTypes,
       mdiDelete,
       mdiHelpCircle,
+      mdiCity,
       mdiOpenInNew,
       mdiPageNext,
       mdiInformationOutline,
@@ -402,6 +419,11 @@ export default {
           sortable: false,
           class: 'px-1',
           label: ''
+        }, {
+          key: 'institutions',
+          type: 'json',
+          sortable: false,
+          label: ''
         }, {
           key: 'collaborators',
           type: undefined,
@@ -459,6 +481,7 @@ export default {
     AttributeDetails,
     BaseTable,
     CollaboratorDetails,
+    InstitutionDetails,
     DatasetEditModal,
     GenotypeExportModal,
     LocationMap,

diff --git a/src/components/tables/InstitutionTable.vue b/src/components/tables/InstitutionTable.vue
@@ -14,12 +14,12 @@
       </template>
       <template v-slot:cell(institutionCode)="data">
         <div v-if="data.item.institutionCode">
-          <a :href="`https://www.fao.org/wiews/data/organizations/en/?instcode=${data.item.institutionCode}`">{{ data.item.institutionCode }}</a>
+          <a target="_blank" rel="noopener noreferrer" :href="`https://www.fao.org/wiews/data/organizations/en/?instcode=${data.item.institutionCode}`">{{ data.item.institutionCode }}</a>
         </div>
       </template>
       <template v-slot:cell(institutionAddress)="data">
         <div v-if="data.item.institutionAddress">
-          <a :href="`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(data.item.institutionAddress)}`">{{ data.item.institutionAddress }}</a>
+          <a target="_blank" rel="noopener noreferrer" :href="`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(data.item.institutionAddress)}`">{{ data.item.institutionAddress }}</a>
         </div>
       </template>
       <template v-slot:cell(institutionType)="data">

diff --git a/src/components/tables/details/InstitutionDetails.vue b/src/components/tables/details/InstitutionDetails.vue
@@ -0,0 +1,47 @@
+<template>
+  <InstitutionDatasetTable :filterOn="filterOn" :getData="getData" />
+</template>
+
+<script>
+import InstitutionDatasetTable from '@/components/tables/InstitutionDatasetTable'
+import { apiPostInstitutionDatasetTable } from '@/mixins/api/misc'
+
+export default {
+  props: {
+    dataset: {
+      type: Object,
+      default: null
+    }
+  },
+  components: {
+    InstitutionDatasetTable
+  },
+  computed: {
+    filterOn: function () {
+      if (this.dataset) {
+        return [{
+          column: {
+            name: 'allDatasetIds',
+            type: undefined
+          },
+          comparator: 'arrayContains',
+          operator: 'and',
+          values: [this.dataset.datasetId],
+          canBeChanged: false
+        }]
+      } else {
+        return null
+      }
+    }
+  },
+  methods: {
+    getData: function (data, callback) {
+      return apiPostInstitutionDatasetTable(data, callback)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/src/plugins/charts/plotly-bar-chart.js b/src/plugins/charts/plotly-bar-chart.js
@@ -3,6 +3,7 @@ export function plotlyBarChart (Plotly) {
   let height = 600
   let xCategory = ''
   let yCategory = ''
+  let xLabels = null
   let darkMode = false
   let onPointClicked = null
   let mode = 'traces'
@@ -16,9 +17,10 @@ export function plotlyBarChart (Plotly) {
 
       const data = []
 
+      const xValues = unpack(rows, x)
       for (let i = 0; i < dims.length; i++) {
         data.push({
-          x: unpack(rows, x),
+          x: xValues,
           y: unpack(rows, dims[i]),
           name: dims[i],
           type: 'bar',
@@ -35,6 +37,24 @@ export function plotlyBarChart (Plotly) {
         displaylogo: false
       }
 
+      let xTickLabels = null
+      let xTickValues = null
+
+      if (xLabels) {
+        xTickValues = xValues
+        xTickLabels = []
+
+        xLabels.forEach(scale => {
+          scale.forEach((l, i) => {
+            if (i > xTickLabels.length - 1) {
+              xTickLabels.push(l)
+            } else {
+              xTickLabels[i] += '<br>' + l
+            }
+          })
+        })
+      }
+
       const layout = {
         height: height,
         hovermode: 'closest',
@@ -44,6 +64,9 @@ export function plotlyBarChart (Plotly) {
         xaxis: {
           title: { text: xCategory, font: { color: darkMode ? 'white' : 'black' } },
           tickfont: { color: darkMode ? 'white' : 'black' },
+          tickmode: xTickLabels ? 'array' : 'auto',
+          ticktext: xTickLabels,
+          tickvals: xTickValues,
           automargin: true,
           fixedrange: true
         },
@@ -107,6 +130,14 @@ export function plotlyBarChart (Plotly) {
     return chart
   }
 
+  chart.xLabels = (_) => {
+    if (!arguments.length) {
+      return xLabels
+    }
+    xLabels = _
+    return chart
+  }
+
   chart.yCategory = (_) => {
     if (!arguments.length) {
       return yCategory

diff --git a/src/plugins/i18n/en_GB.json b/src/plugins/i18n/en_GB.json
@@ -916,6 +916,8 @@
   "pageStatisticsPdciTitle": "Passport Data Completeness Index",
   "pageStatisticsTaxonomyText": "These charts visualize the percentage of germplasm for each taxonomy. Each section represents a taxonomy. Hovering over a section will show the actual number of germplasm. Clicking on a section will take you to the germplasm overview page which will then show the germplasm with this taxonomy.",
   "pageStatisticsTaxonomyTitle": "Germplasm grouped by taxonomy",
+  "pageStatisticsInstitutionDatasetTitle": "Datasets per institution",
+  "pageStatisticsInstitutionDatasetText": "The table below shows institutions and datasets associated with collaborators working for those institutions.",
   "pageStoriesTitle": "Data stories",
   "pageStoriesText": "This page contains data stories which are a way of showcasing pre-selected pages, filtering and charts that tell a story about a subset of the data in this database. Data stories may be linked to publications to easily highlight the datasets and visualizations used in this publication or they may be standalone stories focussing on a particular flow of data through Germinate.",
   "pageTraitAttributesTitle": "Additional Attributes",
@@ -1139,6 +1141,7 @@
   "tableColumnDatasetPointCount": "Data points",
   "tableColumnDatasetStartDate": "Start date",
   "tableColumnDatasetState": "State",
+  "tableColumnDatasetHyperlink": "External link",
   "tableColumnElevation": "Elevation [m]",
   "tableColumnEntityChildHeader": "Derived material",
   "tableColumnEntityChildGid": "Derived material GID",
@@ -1341,6 +1344,7 @@
   "tableTooltipTraitEdit": "Edit trait information",
   "tableTooltipProjectDelete": "Delete project",
   "tableTooltipProjectEdit" :"Edit project",
+  "tableTooltipInstitutionDatasetsAll": "All datasets",
   "tableColumnUserFeedbackId": "Id",
   "tableColumnUserFeedbackType": "Feedback type",
   "tableColumnUserFeedbackSeverity": "Severity",

diff --git a/src/views/data/export/TrialsExport.vue b/src/views/data/export/TrialsExport.vue
@@ -39,11 +39,12 @@
                           :getItems="getTraits"
                           v-on:plot-clicked="updateCategoricalTraitCharts" />
 
-        <div v-for="(trait, i) in categoricalTraitsSelected" :key="`trait-bar-chart-${i}`">
+        <div class="mb-3" v-for="(trait, i) in categoricalTraitsSelected" :key="`trait-bar-chart-${i}`">
           <h3>{{ trait.traitName }}</h3>
           <BarChart xColumn="phenotype_value"
             :xTitle="trait.traitName"
             :yTitle="$t('genericCount')"
+            :xLabels="trait.traitRestrictions.categories"
             :height="400"
             :downloadName="trait.traitName"
             :sourceFile="categoricalTraitFiles[trait.traitId]"