D-Net

<div id="tm-main" class=" uk-section  uk-margin-small-top tm-middle">

    <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">

      <div class="uk-container uk-margin-top dataset">

        <div *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning  uk-margin-large-top"

             role="alert">{{warningMessage}}</div>

        <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger  uk-margin-large-top"

             role="alert">{{errorMessage}}</div>

        <div [style.display]="showLoading ? 'inline' : 'none'"

             class="uk-animation-fade uk-margin-large-top  uk-width-1-1" role="alert"><span

          class="loading-gif  uk-align-center"></span></div>

        <div *ngIf="datasetInfo != null" uk-grid>

          <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"

                  [texts]="pageContents['top']" styleName="uk-width-1-1"></helper>

          <div class="uk-width-expand@m uk-width-1-1@s">

            <schema2jsonld *ngIf="datasetInfo.record" [data]=datasetInfo.record

                           [URL]="properties.baseLink+'/search/dataset?datasetId='+datasetId"></schema2jsonld>

            <showTitle [titleName]="datasetInfo.title"></showTitle>

            <span *ngIf="datasetInfo.types && datasetInfo.types.length > 0" class="uk-label custom-label label-dataset "

                  title="Type">{{datasetInfo.types.join(", ")}}</span>{{" "}}

            <span *ngIf="datasetInfo.languages && datasetInfo.languages.length > 0"

                  class="uk-label custom-label  label-language "

                  title="Language">{{datasetInfo.languages.join(", ")}}</span>{{" "}}

            <span *ngIf="datasetInfo.countries && datasetInfo.countries.length > 0"

                  class="uk-label custom-label  label-country "

                  title="Country">{{datasetInfo.countries.join(", ")}}</span>{{" "}}

            <span *ngIf="datasetInfo.accessMode" [class]="'uk-label custom-label   label-'+ datasetInfo.accessMode "

                  title="Access Mode">{{datasetInfo.accessMode}}</span>{{" "}}

            <span *ngIf="datasetInfo.underCurationMessage" class="uk-label custom-label label-underCuration ">{{" "}}

                    title="{{buildCurationTooltip()}}">

            <div class=" uk-margin-top">

              <showAuthors [authors]="datasetInfo.authors"></showAuthors>

              <span *ngIf="datasetInfo.date != ''">({{datasetInfo.date}})</span>

              <li *ngIf="datasetInfo.embargoEndDate"><span

                class="uk-text-bold">Embargo end date:</span> {{datasetInfo.embargoEndDate}}</li>

              <li *ngIf="datasetInfo.identifiers && datasetInfo.identifiers.size > 0">

                <showIdentifiers [identifiers]="datasetInfo.identifiers"></showIdentifiers>

              </li>

              <li *ngIf="datasetInfo.subjects ||datasetInfo.otherSubjects ||  datasetInfo.classifiedSubjects">

                <showSubjects [subjects]="datasetInfo.subjects"

                              [otherSubjects]="datasetInfo.otherSubjects"

                              [classifiedSubjects]="datasetInfo.classifiedSubjects">

              </li>

            <hr *ngIf="datasetInfo.description">

            <div *ngIf="datasetInfo.description"

                 class="uk-text-justify descriptionText uk-height-max-medium uk-overflow-auto">

              ><span

              *ngIf="showNumDescription == thresholdDescription && datasetInfo.description.length > thresholdDescription">...</span

            ><span

              *ngIf="showNumDescription == thresholdDescription && datasetInfo.description.length > thresholdDescription"

              class="uk-text-right">

            <div *ngIf="datasetInfo.description && showNumDescription > thresholdDescription"

                 class="uk-width-1-1 uk-text-right">

                <a class="uk-accordion-title" href="#">

                  References ({{datasetInfo.references.length | number}})

                </a>

                <div class="uk-accordion-content">

                  <div>

                    <div *ngIf="datasetInfo.references.length > pageSize" class="uk-margin-bottom">

                      <span class="uk-h6">{{datasetInfo.references.length | number}}

                        references, page {{referencesPage | number}}

                        of {{totalPages(datasetInfo.references.length) | number}}</span>

                      <paging-no-load class="uk-float-right" [currentPage]="referencesPage"

                                      [totalResults]="datasetInfo.references.length" [size]="pageSize"

                                      (pageChange)="updateReferencesPage($event)"></paging-no-load>

                    </div>

                    <div

                      *ngFor="let item of datasetInfo.references.slice((referencesPage-1)*pageSize, referencesPage*pageSize)">

                      <p *ngIf=" item && item['url']"

                         class="custom-external custom-icon">

                        <a href="{{item['url']}}" target="_blank">

                          {{item['name']}}

                        </a>

                      </p>

                      <p *ngIf="!item['url']" class="pseudo-external custom-icon">

                        {{item['name']}}

                      </p>

                </div>

              </li>

              <li *ngIf="datasetInfo.relatedResearchResults" (click)="activeTab='Related Research Results'">

                <a class="uk-accordion-title" href="#">

                  Related Research Results

                  <!-- <span *ngIf="!datasetInfo.relatedResearchResults" class="uk-badge uk-badge-notification">0</span>

                  <span *ngIf="datasetInfo.relatedResearchResults" class="uk-badge uk-badge-notification">

                      {{relatedResearchResultsNum | number}}

                  </span> -->

                  <!-- <span class="uk-badge uk-badge-notification"> -->

                  ({{relatedResearchResultsNum | number}})

                  <!-- </span> -->

                </a>

                <div class="uk-accordion-content">

                  <!-- <div *ngIf="!datasetInfo.relatedResearchResults" class = "uk-alert  uk-alert-primary">

                      No related research results available

                  </div>

                  <div *ngIf="datasetInfo.relatedResearchResults"> -->

                  <div>

                    <div *ngFor="let provenanceaction of getKeys(datasetInfo.relatedResearchResults)">

                      <div class="uk-text-large">{{provenanceaction}}</div>

                      <tabTable [percentageName]="trust"

                                [info]="datasetInfo.relatedResearchResults.get(provenanceaction)"

                                [(properties)]=properties></tabTable>

                    </div>

                  </div>

                </div>

              </li>

              <li *ngIf="datasetInfo.similarResearchResults" (click)="activeTab='Similar Research Results'">

                <a class="uk-accordion-title" href="#">

                  Similar Research Results

                  <!-- <span *ngIf="!datasetInfo.similarResearchResults" class="uk-badge uk-badge-notification">0</span>

                  <span *ngIf="datasetInfo.similarResearchResults" class="uk-badge uk-badge-notification">

                      {{datasetInfo.similarResearchResults.length | number}}

                  </span> -->

                  <!-- <span class="uk-badge uk-badge-notification"> -->

                  ({{datasetInfo.similarResearchResults.length | number}})

                  <!-- </span> -->

                </a>

                <div class="uk-accordion-content">

                  <!-- <div *ngIf="!datasetInfo.similarResearchResults" class = "uk-alert  uk-alert-primary" >

                      No similar research results available

                  </div>

                  <div *ngIf="datasetInfo.similarResearchResults"> -->

                  <div>

                    <tabTable [percentageName]="similarity" [info]="datasetInfo.similarResearchResults"

                              [(properties)]=properties></tabTable>

                  </div>

                </div>

              </li>

              <li (click)="metricsClicked=true; activeTab='Metrics'">

                <a class="uk-accordion-title" href="#">

                  Metrics

                </a>

                <div class="uk-accordion-content">

                  <metrics [pageViews]="pageViews"

                           (metricsResults)="metricsResults($event)" [(properties)]=properties>

                  </metrics>

                  <i-frame *ngIf="metricsClicked && totalViews > 0"

                  </i-frame>

                  <i-frame *ngIf="metricsClicked && totalDownloads > 0"

                  </i-frame>

                </div>

              </li>

              <li (click)="activeTab='Other Versions'"

                  *ngIf="properties.environment == 'development' && datasetInfo.deletedByInferenceIds">

                <a class="uk-accordion-title" href="#">

                  Other Versions

                  ({{datasetInfo.deletedByInferenceIds.length | number}})

                </a>

                <div *ngIf="activeTab=='Other Versions'" class="uk-accordion-content">

                  <deletedByInference [id]="datasetId" [ids]="datasetInfo.deletedByInferenceIds"

                                      [type]="'research data'"></deletedByInference>

                </div>

              </li>

          <div class="uk-width-large@m uk-width-1-1@s">

            <div class="  uk-padding-small">

              <div>

                <div class="sideInfoTitle uk-margin-small-bottom">Share - Bookmark</div>

                <addThis></addThis>

              </div>

              <altmetrics *ngIf="datasetInfo.identifiers && datasetInfo.identifiers.get('doi')"

                          id="{{datasetInfo.identifiers.get('doi')[0]}}" type="doi">

              </altmetrics>

              <ul class="uk-list uk-margin-remove-bottom ">

                  <availableOn [availableOn]="datasetInfo.hostedBy_collectedFrom"></availableOn>

                  <fundedBy [fundedByProjects]="datasetInfo.fundedByProjects"></fundedBy>

                <li *ngIf="datasetInfo.contexts && datasetInfo.contexts.length >0 ">

                  <dl class="uk-description-list-line">

                    <dt class="sideInfoTitle">Related to</dt>

                    <dd class="line" *ngFor="let item of datasetInfo.contexts">

                          <span *ngIf="!item['inline']">

                      <mark *ngIf="item['inline']">

                        <span>{{item['labelContext']}}</span>

                        <span *ngIf="item['labelCategory']">-> {{item['labelCategory']}}</span>

                        <span *ngIf="item['labelConcept']">: {{item['labelConcept']}}</span>

                      </mark>

                    </dd>

                  </dl>

              </ul>

              <button *ngIf="isRouteAvailable('participate/direct-claim') "

                      class="   uk-button portal-button   uk-width-1-1 ">

                   <svg icon="link" ratio="1" xmlns="http://www.w3.org/2000/svg" width="25" viewBox="0 0 20 20"

                        height="25"><path

                     d="M10.625,12.375 L7.525,15.475 C6.825,16.175 5.925,16.175 5.225,15.475 L4.525,14.775 C3.825,14.074 3.825,13.175 4.525,12.475 L7.625,9.375"

                     fill="none" stroke="#000" stroke-width="1.1"></path><path

                     d="M9.325,7.375 L12.425,4.275 C13.125,3.575 14.025,3.575 14.724,4.275 L15.425,4.975 C16.125,5.675 16.125,6.575 15.425,7.275 L12.325,10.375"

                     fill="none" stroke="#000" stroke-width="1.1"></path><path d="M7.925,11.875 L11.925,7.975"

                                                                               fill="none" stroke="#000"

                                                                               stroke-width="1.1"></path></svg>

              </button>

              <div *ngIf="isRouteAvailable('participate/direct-claim') " uk-dropdown="pos: bottom-left; mode:click"

                   style="background: transparent !important;box-shadow: none; max-width: 70px !important; min-width: 70px !important;">

                <ul class="uk-iconnav uk-iconnav-vertical">

                  <li uk-tooltip="pos:right;" title="<div class='tooltip-custom-font-size   '>Projects</div>">

                    <a class="   uk-icon-button portal-button  shadowBox" style="padding: 6px;"

                       [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[datasetId,'dataset','project'])"

                       routerLinkActive="router-link-active" routerLink="/participate/direct-claim">

                    <span class="uk-icon">

                       <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="album"

                            ratio="1"><rect x="5" y="2" width="10" height="1"></rect><rect x="3" y="4" width="14"

                                                                                           height="1"></rect><rect

                         fill="none" stroke="#000" x="1.5" y="6.5" width="17" height="11"></rect></svg></span>

                    </a>

                  </li>

                  <li uk-tooltip="pos:right;" title="<div class='tooltip-custom-font-size  '>Communities</div>">

                    <a class="   uk-icon-button portal-button shadowBox" style="padding: 6px;"

                       [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[datasetId,'dataset','context'])"

                       routerLinkActive="router-link-active" routerLink="/participate/direct-claim">

                     <span class="uk-icon">

                          <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"

                               icon="users" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="7.7"

                                                              cy="8.6" r="3.5"></circle><path fill="none" stroke="#000"

                                                                                              stroke-width="1.1"

                                                                                              d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path><path

                            fill="none" stroke="#000" stroke-width="1.1"

                            d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg></span>

                    </a>

                  </li>

                  <li uk-tooltip="pos:right;"

                      title="<div class='tooltip-custom-font-size  uk-margin-small'>Other research results</div>">

                    <a class="   uk-icon-button portal-button  shadowBox" style="padding: 6px;"

                       [queryParams]="routerHelper.createQueryParams(['id','type','linkTo'],[datasetId,'dataset','result'])"

                       routerLinkActive="router-link-active" routerLink="/participate/direct-claim">

                     <span class="uk-icon">

                          <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="copy"

                               ratio="1"><rect fill="none" stroke="#000" x="3.5" y="2.5" width="12" height="16"></rect><polyline

                            fill="none" stroke="#000" points="5 0.5 17.5 0.5 17.5 17"></polyline></svg></span>

                    </a>

                  </li>

                </ul>

              </div>

            </div>

          <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"

                  [texts]="pageContents['bottom']" styleName="uk-width-1-1"></helper>

        </div>

  </div>