data-catalog/catalog/templates/dataset-template.html

613 lines
No EOL
45 KiB
HTML

<div v-if="display_ready">
<b-card border-variant="dark">
<!-- TOP SECTION -->
<b-card-body>
<!-- DATASET TITLE -->
<b-card-title>
<span class="dataset-nav">
<span>
<a @click="gotoHome" class="newlink"><small><i class="fas fa-home"></i></small></a>
</span>
<span class="dataset-nav-item" v-if="showBackButtonComp">
<a @click="clickBackButton()" class="newlink"><small><i class="fas fa-backward"></i></small></a>
</span>
</span>
<div class="dataset-title">
{{displayData.display_name}}
</div>
</b-card-title>
<!-- DATASET AUTHORS -->
<b-card-sub-title class="mb-2">
<span v-for="(author, index) in selectedDataset.authors"><span v-if="author.givenName">{{author.givenName}} {{author.familyName}}</span><span v-else>{{author.name}}</span><span v-if="index != selectedDataset.authors.length - 1">, </span></span>
</b-card-sub-title>
<!-- DATASET VERSION ETC -->
<b-card-text>
<strong>Version:</strong> {{selectedDataset.dataset_version.substring(0,7)}}&nbsp;
<strong>Last updated:</strong> <span v-if="displayData.last_updated">{{displayData.last_updated}}&nbsp;</span>
<span v-else><em>unknown</em></span>&nbsp;
<strong>DOI:</strong> <span v-if="selectedDataset.doi"><a :href="selectedDataset.doi" target="_blank"> {{selectedDataset.doi.replace("https://doi.org/", "")}}</a></span>
<span v-else><em>unknown</em></span>&nbsp;
<strong>License:</strong> <span v-if="selectedDataset.license && selectedDataset.license.name"><a :href="selectedDataset.license.url" target="_blank"> {{selectedDataset.license.name}}</a></span>
<span v-else><em>unknown</em></span>
</b-card-text>
<!-- DATASET BUTTONS -->
<div style="text-align: left;">
<div style="display: flex; flex-direction: row;">
<span v-show="displayData.show_datalad"><b-button variant="outline-dark" size="sm" v-b-modal.modal-1>
<img src="data:image/png;base64,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"
alt="datalad_d" height="14em" class="mb-1"/>
Download with DataLad</b-button>&nbsp;</span>
<span v-show="displayData.show_github"><b-button variant="outline-dark" size="sm" @click="gotoURL(displayData.url)"><i class="fab fa-github"></i> View on GitHub</b-button>&nbsp;</span>
<span v-show="displayData.show_gin"><b-button variant="outline-dark" size="sm" @click="gotoURL(displayData.url)"><img src="artwork/ginfavicon.png" style="height: 1em;"></img> View on GIN</b-button>&nbsp;</span>
<span v-show="displayData.show_gitlab"><b-button variant="outline-dark" size="sm" @click="gotoURL(displayData.url)"><i class="fab fa-gitlab"></i> View on GitLab</b-button>&nbsp;</span>
<span v-show="displayData.show_cite"><b-button variant="outline-dark" size="sm" v-b-modal.modal-2 @click="getCitationText(selectedDataset.doi)"><i class="fas fa-quote-right"></i> Cite</b-button>&nbsp;</span>
<span v-if="displayData.show_export"><b-button variant="outline-dark" size="sm" :href="displayData.file_path" :download="displayData.download_filename"><i class="fas fa-file-arrow-down"></i> Export metadata</b-button>&nbsp;</span>
<span v-show="displayData.show_binder"><b-button variant="outline-dark" size="sm" @click="openWithBinder(displayData.url, selectedDataset)"><img src="data:image/png;base64,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"
alt="binder_logo" height="14em" class="mb-1">Explore with Binder</b-button>&nbsp;</span>
<span><b-button variant="outline-dark" size="sm" v-b-modal.modal-4><i class="fas fa-share"></i> Share</b-button>&nbsp;</span>
<span style="margin-left: auto;">
<span v-if="displayData.show_homepage"><b-button variant="outline-dark" size="sm" :href="displayData.homepage_url" target="_blank"><i class="fas fa-house"></i> Homepage</b-button>&nbsp;</span>
<span v-if="displayData.show_download"><b-button variant="outline-dark" size="sm" :href="displayData.download_url" target="_blank"><i class="fas fa-download"></i> Download</b-button>&nbsp;</span>
<span v-if="displayData.show_access_request && selectedDataset.access_request_contact"><b-button variant="outline-dark" size="sm" :href="displayData.access_request_mailto"><i class="far fa-envelope"></i> Request access</b-button>&nbsp;</span>
<span v-if="displayData.show_access_request && selectedDataset.access_request_url"><b-button variant="outline-dark" size="sm" @click="gotoURL(selectedDataset.access_request_url)"><i class="fas fa-share"></i> Request access</b-button></span>
</span>
</div>
<b-modal id="modal-1" size="lg"
header-bg-variant="light"
footer-bg-variant="light"
body-bg-variant="light"
body-text-variant="dark"
ok-only>
<template #modal-header="{ close }">
<div class="d-block text-center">
<h3>Download with <img src="artwork/datalad_logo_wide.svg" width="100em"></h3>
</div>
</template>
<h5>Step 1: Install DataLad</h5>
<p class="my-4">Make sure that you have a recent version of DataLad installed on your system.
Full instructions are provided in the
<a href="http://handbook.datalad.org/en/latest/intro/installation.html#install">DataLad Handbook.</a>
</p>
<h5>Step 2: Clone the dataset</h5>
<p class="my-4">The dataset can be cloned by running:</p>
<div class="shadow-sm p-3 mb-3 bg-white rounded">
<b-row>
<b-col cols="11">
<code id="clone_code">
datalad clone {{displayData.url}}
</code>
</b-col>
<b-col cols="1">
<i id="copyBtn" class="far fa-clone" @click="copyCloneCommand"></i>
<b-tooltip target="copyBtn" :show.sync="showCopyTooltip" @shown="hideTooltipLater" triggers left title="Copied!">
</b-tooltip>
</b-col>
</b-row>
</div>
<p class="my-4">Once the dataset is cloned, it is a light-weight directory on your local machine.
At this point, it contains only small metadata and information on the identity of the files in the dataset,
but not actual content of the (sometimes large) data files.
</p>
<h5>Step 3: Retrieve dataset content</h5>
<p class="my-4">After cloning the dataset, you can retrieve file contents by running:</p>
<div class="shadow-sm p-3 mb-3 bg-white rounded">
<code>
datalad get path/to/directory/or/file
</code>
</div>
<p class="my-4">This command will trigger a download of the files, directories, or subdatasets you have specified.</p>
</b-modal>
<b-modal id="modal-2" size="lg"
header-bg-variant="light"
footer-bg-variant="light"
body-bg-variant="light"
body-text-variant="dark"
ok-only>
<template #modal-header="{ close }">
<div class="d-block text-center">
<h3>Cite dataset</h3>
</div>
</template>
<b-spinner v-if="citation_busy" variant="warning" type="grow" style="text-align:center;">Firing up the citation minions...</b-spinner>
<div v-if="selectedDataset.citation_text" class="shadow-sm p-3 mb-3 bg-white rounded">
<b-row>
<b-col cols="11">
<code id="citation">
{{selectedDataset.citation_text}}
</code>
</b-col>
<b-col cols="1">
<i id="copyBtnCite" class="far fa-clone" @click="copyCitationText"></i>
<b-tooltip target="copyBtnCite" :show.sync="showCopyCiteTooltip" @shown="hideCiteTooltipLater" triggers left title="Copied!">
</b-tooltip>
</b-col>
</b-row>
</div>
<span v-show="invalid_doi"><em>Invalid DOI</em></span>
</b-modal>
</div>
<b-modal id="modal-4" size="lg"
header-bg-variant="light"
footer-bg-variant="light"
body-bg-variant="light"
body-text-variant="dark"
ok-only>
<template #modal-header="{ close }">
<h3>Share the dataset</h3>
</template>
<span v-if="selectedDataset.alias">
<h6>Alias URL</h5>
<div class="shadow-sm p-3 mb-3 bg-white rounded">
<b-row>
<b-col cols="11">
<code id="alias_url">
<!-- TODO: this url does not take into account if catalog is served from a subdirectory relative to root -->
{{window.location.origin + '/dataset/' + selectedDataset.alias}}
</code>
</b-col>
<b-col cols="1">
<i id="copyBtnAliasURL" class="far fa-clone" @click="copyDatasetURL('alias')"></i>
<b-tooltip target="copyBtnAliasURL" :show.sync="showCopyDatasetAliasTooltip" @shown="hideURLTooltipLater('alias')" triggers left title="Copied!">
</b-tooltip>
</b-col>
</b-row>
</div>
</span>
<span v-if="selectedDataset.has_id_path">
<h6>ID URL</h5>
<div class="shadow-sm p-3 mb-3 bg-white rounded">
<b-row>
<b-col cols="11" style="overflow: auto; white-space: nowrap;">
<code id="id_url" >
{{window.location.origin + '/dataset/' + selectedDataset.dataset_id}}
</code>
</b-col>
<b-col cols="1">
<i id="copyBtnIdURL" class="far fa-clone" @click="copyDatasetURL('id')"></i>
<b-tooltip target="copyBtnIdURL" :show.sync="showCopyDatasetIdTooltip" @shown="hideURLTooltipLater('id')" triggers left title="Copied!">
</b-tooltip>
</b-col>
</b-row>
</div>
</span>
<h6>Full URL</h5>
<div class="shadow-sm p-3 mb-3 bg-white rounded">
<b-row>
<b-col cols="11" style="overflow: auto; white-space: nowrap;">
<code id="full_url">
{{window.location.origin + '/dataset/' + selectedDataset.dataset_id + '/' + selectedDataset.dataset_version}}
</code>
</b-col>
<b-col cols="1">
<i id="copyBtnFullURL" class="far fa-clone" @click="copyDatasetURL('full')"></i>
<b-tooltip target="copyBtnFullURL" :show.sync="showCopyDatasetFullTooltip" @shown="hideURLTooltipLater('full')" triggers left title="Copied!">
</b-tooltip>
</b-col>
</b-row>
</div>
</b-modal>
<!-- -->
<hr>
<!-- DATASET DESCRIPTION, KEYWORDS, PROPERTIES -->
<b-row no-gutters>
<b-col md="9" style="text-align: justify;">
<b-card-text>
<strong>Description:</strong>
<span v-if="displayData.description && Array.isArray(displayData.description) && displayData.description.length>0 ">
<span v-for="desc in displayData.description">{{desc}}<br></span>
</span>
<span v-else>{{selectedDataset.description}}</span>
</b-card-text>
</b-col>
<b-col md="3">
<b-card-text>
<strong>Keywords:</strong> <br>
<b-button pill disabled size="sm" variant="outline-dark" v-for="keyword in selectedDataset.keywords">{{keyword}}</b-button>
</b-card-text>
<b-card-text v-if="selectedDataset.subdatasets_available_count || selectedDataset.top_display">
<strong>Properties:</strong> <br>
<span v-if="selectedDataset.subdatasets_available_count"><b-button disabled size="sm" variant="outline-dark">Datasets: {{selectedDataset.subdatasets_available_count}}</b-button>&nbsp;</span>
<span v-if="selectedDataset.top_display && selectedDataset.top_display.length">
<span v-for="display_property in selectedDataset.top_display" v-if="display_property.value"><b-button disabled size="sm" variant="outline-dark">{{display_property.name}}: {{display_property.value}}</b-button>&nbsp;</span>
</span>
</b-card-text>
</b-col>
</b-row>
</b-card-body>
<!-- BOTTOM SECTION WITH TABS-->
<b-card-body>
<b-tabs card content-class="mt-3" fill active-nav-item-class="font-weight-bold" v-model="tabIndex" @activate-tab="newTabActivated" ref="alltabs">
<!-- FILE TREE -->
<b-tab @click="getFiles" key="content" ref="tabelement">
<template v-slot:title>
<i class="far fa-folder"></i> Content <span v-if="!selectedDataset.has_files">(no record)</span>
</template>
<span v-if="files_ready">
<span v-if="!selectedDataset.tree || !selectedDataset.tree.length"><em>This catalog record contains no information on dataset content</em></span>
<span v-else>
<b-card no-body class="p-2">
<ul>
<tree-item class="item" v-for="item in selectedDataset.tree" :item="item" @clear-filters="clearFilters"></tree-item>
</ul>
</b-card>
</span>
<b-modal id="modal-3" size="md"
header-bg-variant="light"
footer-bg-variant="light"
body-bg-variant="light"
body-text-variant="dark"
ok-only
>
<template #modal-header="{ close }">
<div class="d-block text-center">
<h3>Dataset not found</h3>
<p class="my-4">The selected dataset is currently not available in the catalog.</p>
</div>
</template>
</b-modal>
</span>
<span v-else>
<div class="d-flex justify-content-center mb-3">
<b-spinner label="Loading..."></b-spinner>
</div>
</span>
</b-tab>
<!-- SUBDATASETS -->
<b-tab key="datasets" ref="tabelement">
<template v-slot:title>
<i class="fas fa-list-ol"></i> Datasets <span v-if="subdatasets_ready">({{selectedDataset.subdatasets_available_count}})</span>
</template>
<span v-if="!subdatasets_ready">
<div class="d-flex justify-content-center mb-3">
<b-spinner label="Loading..."></b-spinner>
</div>
</span>
<span v-else>
<span v-if="!subdatasets || !subdatasets.length"><em>There are no datasets listed for the current dataset</em></span>
<span v-else>
<b-form v-if="subdatasets.length > 3">
<b-row>
<b-col md="7">
<b-input-group>
<b-button-group>
<b-button pill variant="outline-dark" @click="sortByName">
<span v-if="sort_name"><i class="fas fa-sort-amount-down-alt"></i></span>
<span v-else><i class="fas fa-sort-amount-up-alt"></i></span>
Name
</b-button>&nbsp;
<b-button pill variant="outline-dark" @click="sortByModified">
<span v-if="sort_modified"><i class="fas fa-sort-amount-down-alt"></i></span>
<span v-else><i class="fas fa-sort-amount-up-alt"></i></span>
Modified
</b-button>
</b-button-group>&nbsp;&nbsp;
<b-form-input id="input-1" type="search" placeholder="Filter by dataset or author name" required v-model="search_text" ref="text_search_input"></b-form-input>
</b-input-group>
</b-col>
<b-col md="5">
<b-input-group>
<b-form-tags v-model="search_tags" :tag-validator="validator" no-outer-focus class="border-0 p-0">
<template v-slot="{ tags, inputAttrs, inputHandlers, tagVariant, addTag, removeTag}">
<b-input-group class="mb-1">
<b-form-input
v-bind="inputAttrs"
v-model="tag_text"
v-on="inputHandlers"
placeholder="Filter by keyword (select or press enter to add)"
class="form-control"
ref="tag_search_input"
@input="inputTagText()"
v-on:keyup.enter="clearSearchTagText()"
></b-form-input>
</b-input-group>
<div class="d-inline-block" style="font-size: 1.5rem;">
<span v-for="tag in tags" :key="tag"><b-button pill size="sm" class="p-1" variant="outline-dark" @click="removeSearchTag(tag)">{{tag}} <i class="fas fa-times-circle"></i></b-button>&nbsp;</span>
</div>
</template>
</b-form-tags>
<template #append>
<b-button variant="outline-dark" id="popover-target-1">Keywords</b-button>
<b-popover target="popover-target-1" triggers="hover" :show.sync="popoverShow" placement="auto" ref="popover">
<div v-if="tags_ready">
<span v-if="tag_options_filtered.length == 0"><em>No tags found</em></span>
<span v-else v-for="option in tag_options_filtered"><b-button pill size="sm" class="p-1" variant="outline-dark" @click="addSearchTag(option)">{{option}}</b-button>&nbsp;</span>
</div>
</b-popover>
</template>
</b-input-group>
</b-col>
</b-row>
</b-form>
<br>
<b-card v-for="ds in sortedSubdatasets" border-variant="dark" header-bg-variant="transparent" no-body class="mb-2 pt-1">
<template v-slot:header>
<b-row no-gutters>
<b-col align-h="center" align-v="center" md="1">
<span class="xxlfont"><i class="fas fa-database"></i></span>
</b-col>
<b-col class="text-muted" md="7">
<h5><a :href="'/dataset/'+ds.dataset_id+'/'+ds.dataset_version" @click.prevent="selectDataset($event, ds)" class="newlink">{{ds.dirs_from_path.at(-1)}}</a></h5>
<span v-for="(author, index) in ds.authors">
<small>
<span v-if="author.givenName">{{author.givenName}} {{author.familyName}}</span><span v-else>{{author.name}}</span><span v-if="index != ds.authors.length - 1">, </span>
</small>
</span>
<b-card-text>
<small>
<strong>Version:</strong> {{ds.dataset_version.substring(0,7)}}&nbsp;
<strong>Modified:</strong> {{getDateFromUTCseconds(ds.source_time)}}&nbsp;
</small>
</b-card-text>
</b-col>
<b-col md="4">
<b-card-text>
<span v-if="subdatasets.length > 3">
<span v-for="keyword in ds.keywords"><b-button pill size="sm" class="p-1" variant="outline-dark" @click="addSearchTag(keyword)">{{keyword}}</b-button>&nbsp;</span>
</span>
<span v-else>
<span v-for="keyword in ds.keywords"><b-button pill size="sm" class="p-1" variant="outline-secondary">{{keyword}}</b-button>&nbsp;</span>
</span>
</b-card-text>
</b-col>
</b-row>
</template>
</b-card>
</span>
</span>
</b-tab>
<!-- PUBLICATIONS -->
<span v-if="selectedDataset.publications && selectedDataset.publications.length">
<b-tab key="publications" ref="tabelement">
<template v-slot:title>
<i class="fas fa-book"></i> Publications
</template>
<span v-if="!selectedDataset.publications || !selectedDataset.publications.length"><em>There are no publications listed for the current dataset</em></span>
<span v-else v-for="pub in selectedDataset.publications">
<b-card border-variant="dark" header-bg-variant="transparent" no-body class="mb-2">
<template v-slot:header>
<b-row no-gutters>
<b-col align-h="center" align-v="center" md="1">
<span class="xxlfont"><i class="fas fa-book "></i></span>
</b-col>
<b-col class="text-muted" md="8">
<h5>{{pub.title}}</h5>
<small>
<span v-for="(author, index) in pub.authors"><span v-if="author.givenName">{{author.givenName}} {{author.familyName}}</span><span v-else>{{author.name}}</span><span v-if="index != pub.authors.length - 1">, </span></span>
</small><br>
</b-col>
<b-col md="3">
<small>
Published: {{pub.datePublished}} <br>
DOI: <span v-if="pub.doi"><a :href="pub.doi" target="_blank">{{pub.doi.replace("https://doi.org/", "")}}</a></span> <br>
<span v-if="pub.publicationOutlet">Journal: {{pub.publicationOutlet}}</span>
</small>
</b-col>
</b-row>
</template>
</b-card>
</span>
</b-tab>
</span>
<!-- FUNDING -->
<span v-if="selectedDataset.funding && selectedDataset.funding.length">
<b-tab key="funding" ref="tabelement">
<template v-slot:title>
<i class="fas fa-building-columns"></i> Funding
</template>
<span v-if="!selectedDataset.funding || !selectedDataset.funding.length"><em>There are no funding sources listed for the current dataset</em></span>
<span v-else v-for="fund in selectedDataset.funding">
<!-- If the fund has @type, treat it as a fund item with semantic info -->
<b-card v-if="fund?.['@type']=='https://schema.org/Grant'" border-variant="dark" header-bg-variant="transparent" no-body class="mb-2">
<template v-slot:header>
<b-row no-gutters>
<b-col align-h="center" align-v="center" md="1">
<span class="xxlfont"><i class="fas fa-dollar-sign "></i></span>
</b-col>
<b-col class="text-muted" md="11">
<h5><span v-if="fund.funder">{{fund.funder}}</span><span v-else><em>(funder not specified)</em></span></h5>
<span v-if="fund.name">
<small><strong>Grant name:</strong> {{fund.name}}</small><br>
</span>
<template v-if="fund.alternateName">
<span><small><strong>Alternate name: </strong>{{fund.alternateName}}</small></span><br>
</template>
<span v-if="fund.description">
<small><strong>Description:</strong> {{fund.description}}</small><br>
</span>
<span v-if="fund.identifier">
<template v-if="fund.identifier.startsWith('http')">
<small><strong>Grant identifier:</strong> <a :href="fund.identifier">{{fund.identifier}}</a></small><br>
</template>
<template v-else>
<small><strong>Grant identifier:</strong> {{fund.identifier}}</small><br>
</template>
</span>
<span v-if="fund.url">
<small><strong>URL:</strong> <a :href="fund.url">{{fund.url}}</a></small><br>
</span>
<span v-if="fund.sameAs">
<small><strong>Same as:</strong> <a :href="fund.sameAs">{{fund.sameAs}}</a></small><br>
</span>
</b-col>
</b-row>
</template>
</b-card>
<!-- If the tab has NO @type: standard fund rendering with no customizations -->
<b-card v-else border-variant="dark" header-bg-variant="transparent" no-body class="mb-2">
<template v-slot:header>
<b-row no-gutters>
<b-col align-h="center" align-v="center" md="1">
<span class="xxlfont"><i class="fas fa-dollar-sign "></i></span>
</b-col>
<b-col class="text-muted" md="11">
<h5><span v-if="fund.name">{{fund.name}}</span><span v-else><em>(fund name not specified)</em></span></h5>
<span v-if="fund['identifier']"><small><strong>Grant identifier:</strong> {{fund["identifier"]}}</small><br></span>
<span v-if="fund['description']"><small><strong>Description:</strong> {{fund["description"]}}</small><br></span>
<span v-if="fund['url']"><small><strong>URL:</strong> <a :href="fund['url']">{{fund["url"]}}</a></small><br></span>
</b-col>
</b-col>
</b-row>
</template>
</b-card>
</span>
</b-tab>
</span>
<!-- PROVENANCE -->
<span v-if="selectedDataset.provenance && selectedDataset.provenance.length">
<b-tab key="provenance" ref="tabelement">
<template v-slot:title>
<i class="fas fa-laptop-code"></i> Provenance
</template>
<span v-if="!selectedDataset.provenance || !selectedDataset.provenance.length"><em>There are no provenance records listed for the current dataset</em></span>
<span v-else v-for="record in selectedDataset.provenance">
<b-container>
<b-row>
<b-col cols="3">
<b-card header-bg-variant="transparent" >
<template v-slot:header>
<b-row no-gutters>
<b-col align-h="center" align-v="center" md="3">
<span class="lfont"><i class="fas fa-database"></i></span>
</b-col>
<b-col align-h="center" align-v="center" md="9">
<span><a @click="selectDataset($event, null, selectedDataset.dataset_id, record.previous_version)" class="newlink"><span class="lfont">Dataset: <em>before</em></span></a></span>
</b-col>
</b-row>
</template>
<b-card-text class="text-muted">
<small>
<strong>ID: </strong>{{selectedDataset.dataset_id.slice(0,7)}}...<br>
<strong>Version: </strong>{{record.previous_version.slice(0,7)}}...<br>
</small>
</b-card-text>
<b-card-text >
<small>
<strong>Inputs: </strong>{{record.inputs}}<br>
</small>
</b-card-text>
</b-card>
</b-col>
<b-col cols="6">
<b-card border-variant="dark">
<template v-slot:header class="text-center">
<b-card-title class="text-center"><i class="fas fa-terminal"></i>&nbsp;&nbsp;run-record</strong></b-card-title>
</template>
<b-card-text class="text-center" >
<small>
<span class="text-muted"><i class="fas fa-code-commit"></i> {{record.dataset_version}}</span>
</small>
</b-card-text>
<small>
<strong>&nbsp;Run command message: </strong><br>
</small>
<b-card-text class="shadow p-3 mb-3 bg-white rounded">
<span style="white-space: pre-wrap;">{{record.description.replace('[DATALAD RUNCMD] ', '')}}</span>
</b-card-text>
<b-card-text >
<small>
<strong>&nbsp;Command: </strong><br>
<div class="shadow p-3 mb-3 bg-white rounded">
<b-row>
<b-col cols="11">
<code id="command_code">
{{record.cmd}}
</code>
</b-col>
<b-col cols="1">
</b-col>
</b-row>
</div>
<!-- <code>{{record.cmd}}</code> -->
</small>
</b-card-text>
<template v-slot:footer>
<b-row no-gutters>
<b-col >
<span class="lfont"><i class="fas fa-user-check"></i></span>&nbsp;&nbsp;{{record.author.name}}
</b-col>
<b-col align-h="right">
<small>{{record.datetime.replace('T', ' ')}}</small>
</b-col>
</b-row>
</template>
</b-card>
</b-col>
<b-col cols="3">
<b-card header-bg-variant="transparent" >
<template v-slot:header>
<b-row no-gutters>
<b-col align-h="center" align-v="center" md="3">
<span class="lfont"><i class="fas fa-database"></i></span>
</b-col>
<b-col align-h="center" align-v="center" md="9">
<span><a @click="selectDataset($event, null, selectedDataset.dataset_id, record.dataset_version)" class="newlink"><span class="lfont">Dataset: <em>after</em></span></a></span>
</b-col>
</b-row>
</template>
<b-card-text class="text-muted">
<small>
<strong>ID: </strong>{{selectedDataset.dataset_id.slice(0,7)}}...<br>
<strong>Version: </strong>{{record.dataset_version.slice(0,7)}}...<br>
</small>
</b-card-text>
<b-card-text >
<small>
<strong>Outputs: </strong>{{record.outputs}}<br>
</small>
</b-card-text>
</b-card>
</b-col>
</b-row>
</b-container>
<br>
<hr class="mb-5 pb-1">
</span>
</b-tab>
</span>
<!-- EXTRA TABS -->
<span v-if="selectedDataset.additional_display && selectedDataset.additional_display.length">
<span v-for="(new_tab, index) in selectedDataset.additional_display">
<b-tab :key="new_tab.name" ref="tabelement">
<template v-slot:title>
<span v-if="new_tab.icon"><i :class="new_tab.icon"></i></span><span v-else><i class="fas fa-bars"></i></span> {{new_tab.name}}
</template>
<span v-if="!new_tab.content"><em>No available content for this display option</em></span>
<span v-else>
<table class="table table-striped">
<thead>
<tr>
<th>Property</th>
<th>Value(s)</th>
</tr>
</thead>
<!-- If the tab has @context, treat it as a semantic tab and try to look up each object's @type for custom rendering -->
<context-tab-body v-if="new_tab.content?.['@context']" :tabby="new_tab" ></context-tab-body>
<!-- If the tab has NO @context: standard additional tab rendering with no customizations -->
<tbody v-else>
<tr v-for="content_key in Object.keys(new_tab.content)">
<td><strong>{{ content_key.charAt(0).toUpperCase() + content_key.slice(1) }}</strong></td>
<td>
<span v-if="!new_tab.content[content_key]"><em>not specified</em></span>
<span v-else-if="Array.isArray(new_tab.content[content_key])">
<span v-for="val in new_tab.content[content_key]">{{val}}<br></span>
</span>
<span v-else-if="typeof new_tab.content[content_key] === 'object'">
<span v-for="k in Object.keys(new_tab.content[content_key])">
<em>{{k}}:</em> {{new_tab.content[content_key][k]}} <br>
</span>
</span>
<span v-else>{{ new_tab.content[content_key] }}</span>
</td>
</tr>
</tbody>
</table>
</span>
</b-tab>
</span>
</span>
</b-tabs>
</b-card-body>
</b-card>
</div>