Dataset.vue 46.7 KB
Newer Older
shabai517's avatar
shabai517 committed
1
<template>
shabai517's avatar
shabai517 committed
2
  <div class="dataset-container">
3
      <div class="panel nav"><NavBar/></div>
shabai517's avatar
shabai517 committed
4 5 6
      <div class="content">
          <Row>
            <Col span="24">
shabai517's avatar
shabai517 committed
7
                <!--
shabai517's avatar
shabai517 committed
8 9 10 11 12
                <Breadcrumb separator=">">
                    <BreadcrumbItem to="/">Home</BreadcrumbItem>
                    <BreadcrumbItem to="/components/breadcrumb">Pride</BreadcrumbItem>
                    <BreadcrumbItem>PXD006887</BreadcrumbItem>
                </Breadcrumb>
shabai517's avatar
shabai517 committed
13 14
                -->
               <h2 class="project-title">Project {{accession}}</h2>
shabai517's avatar
shabai517 committed
15
                <div class="tags">
shabai517's avatar
shabai517 committed
16
                  <!--
shabai517's avatar
shabai517 committed
17 18 19 20 21 22 23
                    <span class="type-tag-wrapper">
                      <Icon class="type-tag" type="ios-pricetag-outline"></Icon>
                      <a>Biological Dataset</a>
                    </span>
                    <span>
                      <Icon class="download-tag" type="ios-download-outline"></Icon><a>Download</a>
                    </span>
shabai517's avatar
shabai517 committed
24
                  -->
shabai517's avatar
shabai517 committed
25
                </div>
shabai517's avatar
shabai517 committed
26 27 28 29 30 31 32
            </Col>
          </Row>
          <Row :gutter="48">
              <Col span="16">
                  <div>
                    <Card class="card">
                          <p slot="title">Summary</p>
shabai517's avatar
shabai517 committed
33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57
                          <div class="card-item-wrapper">
                              <div class="summary-content-header">Title</div>
                              <p>{{title}}</p>
                          </div>
                          <div class="card-item-wrapper">
                              <div class="summary-content-header">Description</div>
                              <read-more class="readMore" more-str="Read more" :text="projectDescription" link="#" less-str="Read less" :max-chars="400"></read-more>
                          </div>
                          <div class="card-item-wrapper">
                              <div class="summary-content-header">Sample Processing Protocol</div>
                              <div v-if="sampleProcessingProtocol != 'Not available'">
                                <read-more class="readMore" more-str="Read more" :text="sampleProcessingProtocol" link="#" less-str="Read less" :max-chars="400"></read-more>
                              </div>
                              <div v-else>
                                  <div v-if="publications.length == 0">
                                    <p>Not available</p>
                                  </div>
                                  <div v-else>
                                    <div v-for="item in publications">
                                      <p>See details in reference(s): <a @click="europePMC(item.pmid)">{{item.pmid}}</a></p>
                                    </div>
                                  </div>
                              </div>
                          </div>
                          <div class="card-item-wrapper">
58
                              <div class="summary-content-header">Data Processing Protocol</div>
shabai517's avatar
shabai517 committed
59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
                              <div v-if="dataProcessingProtocol != 'Not available'">
                                <read-more class="readMore" more-str="Read more" :text="dataProcessingProtocol" link="#" less-str="Read less" :max-chars="400"></read-more>
                              </div>
                              <div v-else>
                                  <div v-if="publications.length == 0">
                                    <p>Not available</p>
                                  </div>
                                  <div v-else>
                                    <div v-for="item in publications">
                                      <p>See details in reference(s): <a @click="europePMC(item.pmid)">{{item.pmid}}</a></p>
                                    </div>
                                  </div>
                              </div>
                          </div>
                          <div class="card-item-wrapper">
                              <div class="summary-content-header">Contact</div>
                              <p v-for ="item in contactors"> <a :href="'mailto:'+item.email">{{item.name}}</a><span>, {{item.affiliation}}</span></p>
                          </div>
                          <div class="card-item-wrapper">
                              <div class="summary-content-header">Submission Date</div>
                              <p>{{submissionDate}}</p>
                          </div>
                          <div class="card-item-wrapper">
                              <div class="summary-content-header">Publication Date</div>
                              <p>{{publicationDate}}</p>
                          </div>
shabai517's avatar
shabai517 committed
85
                    </Card>
86
                    <!--
shabai517's avatar
shabai517 committed
87
                    <Card class="card">
88
                       <p slot="title">Properties</p>
shabai517's avatar
shabai517 committed
89 90 91 92
                       <div class="property">
                          <div class="property-col">
                            <div class="property-row">
                                <div class="summary-content-header">Species</div>
shabai517's avatar
shabai517 committed
93 94 95 96 97 98 99
                                <div class="property-wrapper">
                                  <div v-if="species.length>0">
                                      <a v-for="item in species">{{item.name}}</a>
                                  </div>
                                  <div v-else>
                                      <p>Unknown</p>
                                  </div>
shabai517's avatar
shabai517 committed
100
                                </div>
shabai517's avatar
shabai517 committed
101 102 103
                            </div>
                            <div class="property-row">
                                <div class="summary-content-header">Tissue</div>
shabai517's avatar
shabai517 committed
104
                                <div class="property-wrapper">
shabai517's avatar
shabai517 committed
105
                                  <div v-if="tissues.length>0">
106
                                      <a v-for="item in tissues">{{item.name}}</a>
shabai517's avatar
shabai517 committed
107 108 109 110
                                  </div>
                                  <div v-else>
                                      <p>Unknown</p>
                                  </div>
shabai517's avatar
shabai517 committed
111
                                </div>
shabai517's avatar
shabai517 committed
112 113 114
                            </div>
                            <div class="property-row">
                                <div class="summary-content-header">Instrument</div>
shabai517's avatar
shabai517 committed
115
                                <div class="property-wrapper">
shabai517's avatar
shabai517 committed
116
                                  <a v-for="item in instrumentNames">{{item.name}}</a>
shabai517's avatar
shabai517 committed
117
                                </div>
shabai517's avatar
shabai517 committed
118 119
                            </div>
                            <div class="property-row">
120
                                <div class="summary-content-header">Softwares</div>
shabai517's avatar
shabai517 committed
121
                                <div class="property-wrapper">
122 123
                                  <div v-if="softwares.length>0">
                                      <a v-for="item in softwares">{{item}}</a>
shabai517's avatar
shabai517 committed
124 125 126 127
                                  </div>
                                  <div v-else>
                                      <p>Unknown</p>
                                  </div>
128

shabai517's avatar
shabai517 committed
129 130 131 132 133 134
                                </div>
                            </div>
                            <div class="property-row">
                                <div class="summary-content-header">Diseases</div>
                                <div class="property-wrapper">
                                  <div v-if="diseases.length>0">
135
                                      <a v-for="item in diseases">{{item.name}}</a>
shabai517's avatar
shabai517 committed
136 137 138 139 140
                                  </div>
                                  <div v-else>
                                      <p>Unknown</p>
                                  </div>
                                </div>
shabai517's avatar
shabai517 committed
141 142 143 144 145
                            </div>
                          </div>
                          <div class="property-col">
                            <div class="property-row">
                                <div class="summary-content-header">Modification</div>
146 147 148 149 150 151 152 153
                                <div class="property-wrapper">
                                  <div v-if="modification.length>0">
                                      <a v-for="item in modification">{{item.name}}</a>
                                  </div>
                                  <div v-else>
                                      <p>No PTMs are included in the dataset</p>
                                  </div>
                                </div>
shabai517's avatar
shabai517 committed
154 155 156
                            </div>
                            <div class="property-row">
                                <div class="summary-content-header">Quantification</div>
shabai517's avatar
shabai517 committed
157 158
                                <div class="property-wrapper">
                                  <div v-if="quantificationMethods.length>0">
159
                                      <a v-for="item in quantificationMethods">{{item.name}}</a>
shabai517's avatar
shabai517 committed
160 161
                                  </div>
                                  <div v-else>
shabai517's avatar
shabai517 committed
162
                                      <p>Unknown</p>
shabai517's avatar
shabai517 committed
163 164
                                  </div>
                                </div>
165

shabai517's avatar
shabai517 committed
166 167 168
                            </div>
                            <div class="property-row">
                                <div class="summary-content-header">Experiment Type</div>
shabai517's avatar
shabai517 committed
169 170 171 172 173 174
                                <div class="property-wrapper">
                                  <a v-for="item in experimentTypes">{{item}}</a>
                                </div>
                            </div>
                            <div class="property-row">
                                <div class="summary-content-header">Assay count</div>
shabai517's avatar
shabai517 committed
175
                                <p>{{total}}</p>
shabai517's avatar
shabai517 committed
176 177 178
                            </div>
                          </div>
                       </div>
179
                        -->
shabai517's avatar
shabai517 committed
180
                    </Card>
shabai517's avatar
shabai517 committed
181 182
                    <Card class="card">
                        <p slot="title">Publication</p>
shabai517's avatar
shabai517 committed
183 184 185 186 187 188 189 190
                        <div v-if="publications.length>0">
                          <div v-for="item in publications">
                            <p>{{item.desc}}<span>, PubMed: </span><a @click="europePMC(item.pmid)">{{item.pmid}}</a></p>
                          </div>
                        </div>
                        <div v-else>
                          <p>Publication pending</p>
                        </div>
shabai517's avatar
shabai517 committed
191
                    </Card>
192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213
                    <Card class="card">
                       <p slot="title"> <i class="fas fa-download icon-tag"></i>Download</p>
                       <!--
                       <div class="filter-wrapper">
                           <div class="summary-content-header">Filter</div>
                           <Select v-model="model1" size="small" style="width:100px">
                              <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                           </Select>
                       </div>
                        -->
                       <div class="download-list-wrapper">
                         <!--<div class="summary-content-header">List</div>-->
                         <div class="download-list">
                           <Table border ref="selection" height="350" :loading="fileListLoading" :columns="fileListCol" :data="fileList" @on-select="downLoadSelect" @on-select-all="filesSelectAll"></Table>
                           <!--
                           <div class="page-container">
                              <Page :total="totalDownLoad" :page-size="pageSizeDownLoad" size="small" class-name="page" @on-change="pageChangeDownload" @on-page-size-change="pageSizeChangeDownload"></Page>
                           </div>
                           -->
                           <Button v-if="selectAllfiles" class= "download-button">Download</Button>
                         </div>
                       </div>
shabai517's avatar
shabai517 committed
214 215
                    </Card>
                    <!--
shabai517's avatar
shabai517 committed
216 217 218 219 220 221 222 223 224
                    <Card v-if="total>0" class="card">
                        <p slot="title">Assay</p>
                        <div class="assay-search-container">
                        <Table class="assay-detail-table" :loading="assayLoading" border :columns="assayCol" :data="assayResults" size="small"></Table>
                        </div>
                        <div class="page-container">
                          <Page :total="total" :page-size="size" size="small" show-sizer show-total class-name="page" @on-change="pageChange" @on-page-size-change="pageSizeChange"></Page>
                        </div>
                    </Card>
shabai517's avatar
shabai517 committed
225
                    -->
shabai517's avatar
shabai517 committed
226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265
                  </div>
                 <!--
                  <Tabs :animated="false">
                    <TabPane label="Summary">
                      <div class="tab-container">
                          <h2>Title</h2>
                          <p>Analysis of isotope incorporation in differentiated and undifferentiated podocytes</p>
                          <h2>Title</h2>
                          <p>Analysis of isotope incorporation in differentiated and undifferentiated podocytes</p>
                          <h2>Title</h2>
                          <p>Analysis of isotope incorporation in differentiated and undifferentiated podocytes</p>
                          <h2>Title</h2>
                          <p>Analysis of isotope incorporation in differentiated and undifferentiated podocytes</p>
                          <h2>Title</h2>
                          <p>Analysis of isotope incorporation in differentiated and undifferentiated podocytes</p>
                          <h2>Title</h2>
                          <p>Analysis of isotope incorporation in differentiated and undifferentiated podocytes</p>
                          <h2>Title</h2>
                          <p>Analysis of isotope incorporation in differentiated and undifferentiated podocytes</p>
                          <h2>Title</h2>
                          <p>Analysis of isotope incorporation in differentiated and undifferentiated podocytes</p>
                          <h2>Title</h2>
                          <p>Analysis of isotope incorporation in differentiated and undifferentiated podocytes</p>
                          <h2>Title</h2>
                          <p>Analysis of isotope incorporation in differentiated and undifferentiated podocytes</p>
                          <h2>Title</h2>
                          <p>Analysis of isotope incorporation in differentiated and undifferentiated podocytes</p>
                          <h2>Title</h2>
                          <p>Analysis of isotope incorporation in differentiated and undifferentiated podocytes</p>
                      </div>
                    </TabPane>
                    <TabPane label="Publication">
                      <div class="tab-container">
                        <p>Schroeter CB, Koehler S, Kann M, Schermer B, Benzing T, Brinkkoetter PT, Rinschen MM. Protein half-life determines expression of proteostatic networks in podocyte differentiation. FASEB J. 2018:fj201701307R PubMed: 29694247</p>
                      </div>
                    </TabPane>
                  </Tabs>
                -->
              </Col>
              <Col span="8">
266 267 268 269
                  <Card class="card">
                     <p slot="title">Properties</p>
                     <div class="property">
                          <div class="property-row">
270
                              <div class="summary-content-header">Organism</div>
271 272 273 274 275 276 277 278 279 280 281 282
                              <div class="property-wrapper">
                                <div v-if="species.length>0">
                                  <div v-for="item in species">
                                    <a>{{item.name}}</a>
                                  </div>
                                </div>
                                <div v-else>
                                    <p>Unknown</p>
                                </div>
                              </div>
                          </div>
                          <div class="property-row">
283
                              <div class="summary-content-header">Organism part</div>
284 285 286 287 288 289 290 291 292 293 294 295
                              <div class="property-wrapper">
                                <div v-if="tissues.length>0">
                                  <div v-for="item in tissues">
                                    <a>{{item.name}}</a>
                                  </div>
                                </div>
                                <div v-else>
                                    <p>Unknown</p>
                                </div>
                              </div>
                          </div>
                          <div class="property-row">
shabai517's avatar
shabai517 committed
296
                              <div class="summary-content-header">Diseases</div>
297
                              <div class="property-wrapper">
shabai517's avatar
shabai517 committed
298 299
                                <div v-if="diseases.length>0">
                                  <div v-for="item in diseases">
300
                                    <a>{{item.name}}</a>
301 302 303 304 305 306 307 308
                                  </div>
                                </div>
                                <div v-else>
                                    <p>Unknown</p>
                                </div>
                              </div>
                          </div>
                          <div class="property-row">
shabai517's avatar
shabai517 committed
309
                              <div class="summary-content-header">Modification</div>
310
                              <div class="property-wrapper">
shabai517's avatar
shabai517 committed
311 312 313
                                <div v-if="modification.length>0">
                                  <div v-for="item in modification">
                                    <a>{{item.name}}</a>
314 315 316
                                  </div>
                                </div>
                                <div v-else>
shabai517's avatar
shabai517 committed
317
                                    <p>No PTMs are included in the dataset</p>
318 319 320 321
                                </div>
                              </div>
                          </div>
                          <div class="property-row">
shabai517's avatar
shabai517 committed
322
                              <div class="summary-content-header">Instrument</div>
323
                              <div class="property-wrapper">
shabai517's avatar
shabai517 committed
324 325 326
                                <div v-if="instrumentNames.length>0">
                                  <div v-for="item in instrumentNames">
                                    <a>{{item.name}}</a>
327 328 329 330 331 332 333 334
                                  </div>
                                </div>
                                <div v-else>
                                    <p>Unknown</p>
                                </div>
                              </div>
                          </div>
                          <div class="property-row">
335
                              <div class="summary-content-header">Software</div>
336
                              <div class="property-wrapper">
shabai517's avatar
shabai517 committed
337 338
                                <div v-if="softwares.length>0">
                                  <div v-for="item in softwares">
339
                                    <a>{{item.name}}</a>
340 341 342
                                  </div>
                                </div>
                                <div v-else>
shabai517's avatar
shabai517 committed
343
                                    <p>Unknown</p>
344
                                </div>
345

346 347 348
                              </div>
                          </div>
                          <div class="property-row">
shabai517's avatar
shabai517 committed
349
                              <div class="summary-content-header">Experiment Type</div>
350
                              <div class="property-wrapper">
shabai517's avatar
shabai517 committed
351 352 353
                                <div v-if="experimentTypes.length>0">
                                  <div v-for="item in experimentTypes">
                                    <a>{{item}}</a>
354 355 356 357 358 359 360 361
                                  </div>
                                </div>
                                <div v-else>
                                    <p>Unknown</p>
                                </div>
                              </div>
                          </div>
                          <div class="property-row">
shabai517's avatar
shabai517 committed
362
                              <div class="summary-content-header">Quantification</div>
363
                              <div class="property-wrapper">
shabai517's avatar
shabai517 committed
364 365 366
                                <div v-if="quantificationMethods.length>0">
                                  <div v-for="item in quantificationMethods">
                                    <a>{{item.name}}</a>
367 368 369 370 371 372 373 374
                                  </div>
                                </div>
                                <div v-else>
                                    <p>Unknown</p>
                                </div>
                              </div>
                          </div>
                     </div>
shabai517's avatar
shabai517 committed
375
                  </Card>
shabai517's avatar
shabai517 committed
376
                  <Card class="card" v-if="similarProjects.length>0">
shabai517's avatar
shabai517 committed
377 378
                       <p slot="title"><i class="fas fa-link icon-tag"></i>Similar Studies</p>
                       <div class="list-wrapper">
shabai517's avatar
shabai517 committed
379
                            <Card class="similarity-card" v-for="item in similarProjects" :key="item.accession">
shabai517's avatar
shabai517 committed
380
                              <div class="similarity-title"><a @click="gotoDetails(item.accession)">{{item.title}}</a></div>
shabai517's avatar
shabai517 committed
381 382
                              <div><span>{{item.submissionDate}}</span></div>
                            </Card>
shabai517's avatar
shabai517 committed
383 384
                       </div>
                      </p>
shabai517's avatar
shabai517 committed
385 386 387
                  </Card>
              </Col>
          </Row>
388

shabai517's avatar
shabai517 committed
389 390
      </div>
  </div>
shabai517's avatar
shabai517 committed
391
</template>
shabai517's avatar
shabai517 committed
392

shabai517's avatar
shabai517 committed
393
<script>
394
  import NavBar from '@/components/landingpage/Nav'
shabai517's avatar
shabai517 committed
395
  import store from "@/store/store.js"
shabai517's avatar
shabai517 committed
396 397 398 399
  export default {
    name: 'archive',
    data(){
      return {
shabai517's avatar
shabai517 committed
400 401 402 403 404 405 406 407 408
          accession:'',
          title:'',
          projectDescription:'',
          publicationDate:'',
          submissionDate:'',
          sampleProcessingProtocol:'',
          dataProcessingProtocol:'',
          publications:[],
          species:[],
shabai517's avatar
shabai517 committed
409
          diseases:[],
shabai517's avatar
shabai517 committed
410 411 412 413
          tissues:[],
          instrumentNames:[],
          quantificationMethods:[],
          experimentTypes:[],
414 415
          softwares:[],
          modification:[],
shabai517's avatar
shabai517 committed
416 417
          queryArchiveProjectApi: this.$store.state.baseApiURL + '/projects/',
          queryArchiveProjectFilesApi: this.$store.state.baseApiURL + '/projects/',
shabai517's avatar
shabai517 committed
418
          queryAssayApi:'https://www.ebi.ac.uk:443/pride/ws/archive/assay/list/project/',
shabai517's avatar
shabai517 committed
419 420 421
          europepmcApi:'http://europepmc.org/abstract/MED/',
          reactomeApi:'https://reactome.org/AnalysisService/identifiers/url?pageSize=1&page=1',
          viewInreactomeApi:'https://www.ebi.ac.uk/pride/ws/archive/protein/list/assay/',
shabai517's avatar
shabai517 committed
422
          similarityApi: this.$store.state.baseApiURL + '/projects/',
shabai517's avatar
shabai517 committed
423
          contactors:[],
shabai517's avatar
shabai517 committed
424 425
          similarProjects:[],
          similarityLoading:false,
shabai517's avatar
shabai517 committed
426 427 428
          fileListLoading:false,
          fileListCol: [
            /*
shabai517's avatar
shabai517 committed
429 430 431 432
              {
                  type: 'selection',
                  width: 40,
                  align: 'center'
shabai517's avatar
shabai517 committed
433
              },*/
shabai517's avatar
shabai517 committed
434 435 436
              {
                  title: 'Name',
                  key: 'name',
437
                  align:'left',
shabai517's avatar
shabai517 committed
438 439
                  ellipsis:true
              },
440 441 442 443 444 445 446 447 448 449 450
              {
                  title: 'Type',
                  width: 100,
                  key: 'type',
                  align:'left',
                  sortable: true,
                  ellipsis:true,
                  render: (h, params) => {
                      var className;
                      var iconColor;
                      if(params.row.type == 'PEAK'){
shabai517's avatar
shabai517 committed
451
                        className='far fa-chart-bar';
452 453 454 455 456 457 458
                        iconColor='#bd7edc'
                      }
                      else if (params.row.type == 'RAW'){
                        className ='far fa-list-alt';
                        iconColor='#e2c94c'
                      }
                      else if (params.row.type == 'RESULT'){
shabai517's avatar
shabai517 committed
459
                        className ='far fa-envelope-open';
460 461 462 463 464 465 466 467 468 469 470 471 472 473 474 475 476
                        iconColor='#6acaef'
                      }
                      else if (params.row.type == 'OTHER'){
                        className ='far fa-file';
                        iconColor='#999c9c'
                      }
                      else if (params.row.type == 'SEARCH'){
                        className ='fas fa-search';
                        iconColor='#5bc0be'
                      }
                      return h('div', [

                          h('i', {
                              attrs: { class: className},
                              style: {
                                  color:iconColor,
                                  marginRight: '5px',
shabai517's avatar
shabai517 committed
477
                                  marginLeft: '0px'
478 479 480 481 482
                              },
                          }),
                          h('span', {
                              on: {
                                  click: () => {
483

484 485 486
                                  }
                              }
                          }, params.row.type),
487

488 489 490 491 492 493 494 495 496 497 498 499 500 501 502 503 504 505 506 507 508
                          /*
                          h('Button', {
                              props: {
                                  type: 'primary',
                                  size: 'small'
                              },
                              style: {
                                  display:'inline-block',
                                  marginRight: '5px',
                                  paddingLeft: '22px',
                                  paddingRight: '22px'
                              },
                              on: {
                                  click: () => {
                                      //window.location.href = params.row.url.ftp;
                                      window.open(params.row.url.ftp)
                                      console.log(params.row.url.ftp);
                                      //this.gotoBlast(params);
                                  }
                              }
                          }, 'FTP'),*/
509

510 511 512
                      ]);
                  }
              },
shabai517's avatar
shabai517 committed
513 514 515 516 517
              {
                  title: 'Size (M)',
                  width: 80,
                  key: 'size',
                  sortable: true,
shabai517's avatar
shabai517 committed
518
                  align:'center'
shabai517's avatar
shabai517 committed
519
              },
shabai517's avatar
shabai517 committed
520 521 522 523
              {
                  title: 'Download',
                  key: 'download',
                  align:'center',
524
                  width:160,
shabai517's avatar
shabai517 committed
525 526 527 528
                  render: (h, params) => {
                      return h('div', [
                          /*
                          h('Button', {
529

shabai517's avatar
shabai517 committed
530 531 532 533 534 535 536 537 538 539 540 541 542 543
                              on: {
                                  click: () => {
                                      this.gotoBlast(params);
                                  }
                              }
                          }, 'Blast'),
                          */
                          h('Button', {
                              props: {
                                  type: 'primary',
                                  size: 'small'
                              },
                              style: {
                                  display:'inline-block',
544 545 546
                                  marginRight: '5px',
                                  paddingLeft: '22px',
                                  paddingRight: '22px'
shabai517's avatar
shabai517 committed
547 548 549 550 551 552 553 554 555 556 557 558 559 560 561 562 563
                              },
                              on: {
                                  click: () => {
                                      //window.location.href = params.row.url.ftp;
                                      window.open(params.row.url.ftp)
                                      console.log(params.row.url.ftp);
                                      //this.gotoBlast(params);
                                  }
                              }
                          }, 'FTP'),
                          h('Button', {
                              props: {
                                  type: 'primary',
                                  size: 'small'
                              },
                              style: {
                                  display:'inline-block',
564
                                  marginRight: '0px'
shabai517's avatar
shabai517 committed
565 566 567 568 569 570 571 572
                              },
                              on: {
                                  click: () => {
                                      //window.location.href = params.row.url.asp;
                                      window.open(params.row.url.asp)
                                      console.log(params.row.url.asp);
                                  }
                              }
573
                          }, 'ASPERA'),
shabai517's avatar
shabai517 committed
574 575 576
                      ]);
                  }
              }
shabai517's avatar
shabai517 committed
577
          ],
shabai517's avatar
shabai517 committed
578
          fileList: [],
shabai517's avatar
shabai517 committed
579 580 581 582 583 584 585 586 587 588 589 590 591 592 593 594 595 596 597 598 599 600 601 602 603 604 605 606 607 608 609 610 611 612 613 614 615 616 617 618 619 620 621 622 623 624 625 626 627 628 629 630 631 632 633 634 635 636 637 638 639 640 641 642 643 644 645 646 647 648 649 650 651 652 653 654 655 656 657 658
          cityList: [
                  {
                      value: 'New York',
                      label: 'New York'
                  },
                  {
                      value: 'London',
                      label: 'London'
                  },
                  {
                      value: 'Sydney',
                      label: 'Sydney'
                  },
                  {
                      value: 'Ottawa',
                      label: 'Ottawa'
                  },
                  {
                      value: 'Paris',
                      label: 'Paris'
                  },
                  {
                      value: 'Canberra',
                      label: 'Canberra'
                  }
          ],
          model1: '',
          viewInReactomeButtonArray:[],
          assayLoading:true,
          assayCol: [
              {
                  type: 'index',
                  width: 60,
                  align: 'center'
              },
              {
                  title: 'Accession',
                  key: 'accession',
                  align:'center',
                  width: 100,
                  render: (h, params) => {
                      return h('div', [
                        h('Icon', {
                            props: {
                                type: 'eye',
                            },
                            style: {
                                marginRight: '1px'
                            },
                        }),
                        h('a', {
                          on: {
                              click: () => {
                                  this.$router.push({name:'assay',params:{id:params.row.accession}})
                              }
                          }
                        }, params.row.accession),
                      ]);
                  }
              },
              {
                  title: 'Title',
                  key: 'title',
                  sortable: false,
                  align:'center',
              },
              {
                  title: 'Proteins',
                  key: 'proteins',
                  sortable: false,
                  align:'center',
                  width: 80,
              },
              {
                  title: 'Peptides',
                  key: 'peptides',
                  sortable: false,
                  align:'center',
                  width: 80,
              },
shabai517's avatar
shabai517 committed
659
              {
shabai517's avatar
shabai517 committed
660 661 662 663 664
                  title: 'Unique Peptides',
                  key: 'uniquepeptides',
                  sortable: false,
                  align:'center',
                  width: 110,
shabai517's avatar
shabai517 committed
665 666
              },
              {
shabai517's avatar
shabai517 committed
667 668 669 670 671
                  title: 'Spectra',
                  key: 'spectra',
                  sortable: false,
                  align:'center',
                  width: 80,
shabai517's avatar
shabai517 committed
672 673
              },
              {
shabai517's avatar
shabai517 committed
674 675 676 677 678
                  title: 'Identified Spectra',
                  key: 'identifiedspectra',
                  sortable: false,
                  align:'center',
                  width: 120,
shabai517's avatar
shabai517 committed
679 680
              },
              {
shabai517's avatar
shabai517 committed
681 682 683 684 685 686 687 688
                  title: 'View in Reactome',
                  key: 'viewinreactome',
                  align:'center',
                  width: 120,
                  render: (h, params) => {
                      return h('div', [
                          /*
                          h('Button', {
689

shabai517's avatar
shabai517 committed
690 691 692 693 694 695 696 697 698 699 700 701 702 703 704 705 706 707 708 709 710 711 712 713 714 715 716 717 718 719 720 721 722 723 724 725 726 727 728
                              on: {
                                  click: () => {
                                      this.gotoBlast(params);
                                  }
                              }
                          }, 'Blast'),
                          */
                          h('Tooltip',//first item
                              {
                                  props: {
                                      placement:"bottom",
                                      content: 'Analysis the protein set in Reactome',
                                      disabled: this.viewInReactomeButtonArray[params.row._index].disabled,
                                  },
                              },//second item
                              [
                                  h('Button', {
                                      props: {
                                          type: this.viewInReactomeButtonArray[params.row._index].type,
                                          size: 'small',
                                          loading: this.viewInReactomeButtonArray[params.row._index].loading,
                                      },
                                      style: {
                                          marginRight: '5px'
                                      },
                                      on: {
                                          click: () => {
                                              if(this.viewInReactomeButtonArray[params.row._index].type != 'success'){
                                                  this.viewInReactomeButtonArray[params.row._index].loading = true;
                                                  this.$http
                                                      .post(this.reactomeApi,this.viewInReactomeButtonArray[params.row._index].api, {headers: {'Content-Type': 'text/plain'}})
                                                      .then(function(res){
                                                          this.viewInReactomeButtonArray[params.row._index].loading = false;
                                                          this.viewInReactomeButtonArray[params.row._index].disabled = true;
                                                          this.viewInReactomeButtonArray[params.row._index].content = 'View ' + '(' + res.body.pathwaysFound + ')';
                                                          this.viewInReactomeButtonArray[params.row._index].type = 'success';
                                                          this.viewInReactomeButtonArray[params.row._index].token = JSON.parse(res.bodyText).summary.token;
                                                        //this.$router.push({name:'me',  params: {username: res.body.data.user.username}});
                                                      },function(err){
729 730

                                                      });
shabai517's avatar
shabai517 committed
731 732 733 734
                                              }
                                              else{
                                                  window.open('https://reactome.org/PathwayBrowser/#/DTAB=AN&ANALYSIS='+this.viewInReactomeButtonArray[params.row._index].token+'&RESOURCE=UNIPROT');
                                              }
735

shabai517's avatar
shabai517 committed
736 737 738 739 740 741 742 743
                                          }
                                      }
                                  }, this.viewInReactomeButtonArray[params.row._index].content),
                              ]//third item
                          ),
                      ]);
                  }
              },
shabai517's avatar
shabai517 committed
744
          ],
shabai517's avatar
shabai517 committed
745 746 747 748
          assayResults:[],
          page:0, //TODO for queryAssayApi
          size:20, //TODO for queryAssayApi
          total:0, //TODO for queryAssayApi
shabai517's avatar
shabai517 committed
749 750 751 752
          pageDownLoad:0,
          pageSizeDownLoad:100,
          totalDownLoad:0,
          selectAllfiles:false,
shabai517's avatar
shabai517 committed
753 754
      }
    },
shabai517's avatar
shabai517 committed
755 756
    beforeRouteUpdate:function (to, from, next) {
      this.queryProjectDetails(to.params.id);
shabai517's avatar
shabai517 committed
757
      //this.queryAssay(to.params.id);
shabai517's avatar
shabai517 committed
758 759 760 761 762 763 764 765 766 767 768
      this.queryArchiveProjectFiles(to.params.id);
      this.querySimilarity(to.params.id);
      //console.log('to query',to.query);
      /*
      let filter = to.query.split('?')[1].split('filter');
      if(filter.length>1)
        filter.split("=");
      console.log('filter',filter);*/
      //this.$bus.$emit('submit-search', {params: to.params, query: to.query});
      next();
    },
shabai517's avatar
shabai517 committed
769
    components: {
770
      NavBar
shabai517's avatar
shabai517 committed
771 772
    },
    methods:{
shabai517's avatar
shabai517 committed
773 774
      queryProjectDetails(id){
           var id = id || this.$route.params.id;
shabai517's avatar
shabai517 committed
775
           this.$http
shabai517's avatar
shabai517 committed
776
            .get(this.queryArchiveProjectApi + id)
shabai517's avatar
shabai517 committed
777 778 779 780 781 782 783 784
            .then(function(res){
                this.accession = res.body.accession;
                this.title = res.body.title;
                this.projectDescription = res.body.projectDescription;
                this.publicationDate = res.body.publicationDate.split('-')[2] +'/'+ res.body.publicationDate.split('-')[1] +'/'+ res.body.publicationDate.split('-')[0];
                this.submissionDate = res.body.submissionDate.split('-')[2] +'/'+ res.body.submissionDate.split('-')[1] +'/'+ res.body.submissionDate.split('-')[0];
                this.sampleProcessingProtocol = res.body.sampleProcessingProtocol;
                this.dataProcessingProtocol = res.body.dataProcessingProtocol;
shabai517's avatar
shabai517 committed
785 786 787 788
                this.species = res.body.organisms || [];
                this.tissues = res.body.organismParts || [];
                this.diseases = res.body.diseases || [];
                this.instrumentNames = res.body.instruments || [];
789
                this.softwares = res.body.softwares || [];
shabai517's avatar
shabai517 committed
790 791
                this.quantificationMethods = res.body.quantificationMethods || [];
                this.experimentTypes = res.body.projectTags || [];
792
                this.modification = res.body.identifiedPTMStrings || [];
shabai517's avatar
shabai517 committed
793
                //for contactors
shabai517's avatar
shabai517 committed
794 795 796 797 798 799 800
                for(let i=0; i<res.body.submitters.length; i++){
                  let item = {
                    name: res.body.submitters[i].name,
                    affiliation: res.body.submitters[i].affiliation,
                    email:res.body.submitters[i].email
                  }
                  this.contactors.push(item);
shabai517's avatar
shabai517 committed
801
                }
shabai517's avatar
shabai517 committed
802
                for(let i=0; i<res.body.labPIs.length; i++){
shabai517's avatar
shabai517 committed
803
                  let item = {
shabai517's avatar
shabai517 committed
804 805 806
                    name: res.body.labPIs[i].name,
                    affiliation: res.body.labPIs[i].affiliation + ' ' +'(lab head)',
                    email:res.body.labPIs[i].email
shabai517's avatar
shabai517 committed
807 808 809 810
                  }
                  this.contactors.push(item);
                }
                //for publications
shabai517's avatar
shabai517 committed
811
                //console.log('res.body',res.body);
shabai517's avatar
shabai517 committed
812 813
                for(let i=0; i<res.body.references.length; i++){
                  let item = {
shabai517's avatar
shabai517 committed
814 815
                    desc:res.body.references[i].referenceLine,
                    pmid:res.body.references[i].pubmedId,
shabai517's avatar
shabai517 committed
816 817 818
                  }
                  this.publications.push(item);
                }
819

shabai517's avatar
shabai517 committed
820
            },function(err){
shabai517's avatar
shabai517 committed
821
                //this.$router.replace({name:'404'});
shabai517's avatar
shabai517 committed
822 823
            });
      },
shabai517's avatar
shabai517 committed
824 825
      queryArchiveProjectFiles(id){
           var id = id || this.$route.params.id;
shabai517's avatar
shabai517 committed
826 827
           this.fileListLoading = true;
           this.$http
shabai517's avatar
shabai517 committed
828
            .get(this.queryArchiveProjectFilesApi +id+ '/files'+ this.queryDownload)
shabai517's avatar
shabai517 committed
829
            .then(function(res){
830
                console.log(res.body);
shabai517's avatar
shabai517 committed
831
                this.fileListLoading = false;
shabai517's avatar
shabai517 committed
832
                this.totalDownLoad = res.body.page.totalElements;
shabai517's avatar
shabai517 committed
833
                if(res.body._embedded && res.body._embedded.files){
shabai517's avatar
shabai517 committed
834 835 836 837 838
                  let filesArray = res.body._embedded.files;
                  let tempArray = [];
                  for(let i=0;i<filesArray.length;i++){
                      let item ={
                            name: filesArray[i].fileName,
839
                            type: filesArray[i].fileCategory.value,
shabai517's avatar
shabai517 committed
840 841 842 843 844 845 846 847
                            size: Math.round(filesArray[i].fileSizeBytes/1024/1024),
                            url: {
                              ftp: filesArray[i].publicFileLocations[0].value,
                              asp: filesArray[i].publicFileLocations[1].value
                            }
                      }
                      tempArray.push(item);
                  }
848

shabai517's avatar
shabai517 committed
849 850
                  this.fileList=tempArray;
                }
shabai517's avatar
shabai517 committed
851 852 853
                else{
                    this.$Message.error({content:'No results', duration:1});
                }
shabai517's avatar
shabai517 committed
854
            },function(err){
shabai517's avatar
shabai517 committed
855
                this.fileListLoading = false;
shabai517's avatar
shabai517 committed
856 857
            });
      },
shabai517's avatar
shabai517 committed
858 859
      pageChange(page){
          this.page = page-1;
shabai517's avatar
shabai517 committed
860
          //this.queryAssay();
shabai517's avatar
shabai517 committed
861 862 863
      },
      pageSizeChange(size){
          this.size = size;
shabai517's avatar
shabai517 committed
864
          //this.queryAssay();
shabai517's avatar
shabai517 committed
865
      },
shabai517's avatar
shabai517 committed
866 867
      queryAssay(id){
          var id = id || this.$route.params.id;
shabai517's avatar
shabai517 committed
868 869
          this.assayResults=[];
          this.assayLoading=true;
shabai517's avatar
shabai517 committed
870
          this.$http
shabai517's avatar
shabai517 committed
871
            .get(this.queryAssayApi + id)
shabai517's avatar
shabai517 committed
872
            .then(function(res){
shabai517's avatar
shabai517 committed
873 874 875 876 877 878 879 880 881 882 883 884
                this.assayLoading=false;
                //console.log(res.body);
                this.total = res.body.list.length;
                for(let i=0;i<res.body.list.length; i++){
                    let item = {
                        accession: res.body.list[i].assayAccession,
                        title: res.body.list[i].title,
                        proteins: res.body.list[i].proteinCount,
                        peptides: res.body.list[i].peptideCount,
                        uniquepeptides:  res.body.list[i].uniquePeptideCount,
                        spectra: res.body.list[i].totalSpectrumCount,
                        identifiedspectra: res.body.list[i].identifiedSpectrumCount,
885 886

                    }
shabai517's avatar
shabai517 committed
887 888 889 890 891 892 893 894 895 896 897 898

                    let button = {
                        type:'primary',
                        content:'Analyse',
                        loading:false,
                        disabled:false,
                        token:'',
                        api: this.viewInreactomeApi+res.body.list[i].assayAccession+'.acc'
                    }
                    this.viewInReactomeButtonArray.push(button);
                    this.assayResults.push(item);
                }
shabai517's avatar
shabai517 committed
899 900 901 902 903 904 905
            },function(err){

            });
      },
      europePMC(id){
          window.open(this.europepmcApi + id);
          //location.href = this.europepmcApi + id;
shabai517's avatar
shabai517 committed
906 907 908 909 910 911 912 913 914 915 916
      },
      pageChangeDownload(page){
          this.pageDownLoad = page-1;
          this.queryArchiveProjectFiles();
      },
      pageSizeChangeDownload(size){
          this.pageSizeDownLoad = size;
          this.queryArchiveProjectFiles();
      },
      downLoadSelect(selection,row){
          console.log(selection);
shabai517's avatar
shabai517 committed
917
          console.log(row);
shabai517's avatar
shabai517 committed
918 919
      },
      filesSelectAll(){
shabai517's avatar
shabai517 committed
920 921 922
          this.selectAllfiles =! this.selectAllfiles;
          this.$refs.selection.selectAll(this.selectAllfiles);
      },
shabai517's avatar
shabai517 committed
923 924
      querySimilarity(id){
          var id = id || this.$route.params.id;
shabai517's avatar
shabai517 committed
925 926 927
          this.similarProjects=[];
          this.similarityLoading=true;
          this.$http
shabai517's avatar
shabai517 committed
928
            .get(this.similarityApi +id+'/similarProjects')
shabai517's avatar
shabai517 committed
929 930 931 932 933 934
            .then(function(res){
                this.similarityLoading=false;
                this.similarProjects=res.body._embedded.compactprojects;
            },function(err){

            });
shabai517's avatar
shabai517 committed
935 936 937 938
      },
      gotoDetails(id){
          this.$router.push({name:'dataset',params:{id:id}});
      },
shabai517's avatar
shabai517 committed
939 940 941
    },
    mounted: function(){
        this.queryProjectDetails();
shabai517's avatar
shabai517 committed
942
        //this.queryAssay();
shabai517's avatar
shabai517 committed
943
        this.queryArchiveProjectFiles();
shabai517's avatar
shabai517 committed
944
        this.querySimilarity();
shabai517's avatar
shabai517 committed
945
    },
shabai517's avatar
shabai517 committed
946 947 948 949 950
    computed:{//TODO for queryAssayApi
      query:function(){
          let page='page='+this.page+'&';
          let size='size='+this.size;
          return '?'+sequence+project+mod+page+size;
shabai517's avatar
shabai517 committed
951 952 953 954 955
      },
      queryDownload:function(){
          let pageDownLoad='page='+this.pageDownLoad+'&';
          let pageSizeDownLoad='pageSize='+this.pageSizeDownLoad;
          return '?'+pageDownLoad+pageSizeDownLoad;
shabai517's avatar
shabai517 committed
956 957
      }
    },
shabai517's avatar
shabai517 committed
958
  }
shabai517's avatar
shabai517 committed
959 960
</script>

shabai517's avatar
shabai517 committed
961
<!-- Add "scoped" attribute to limit CSS to this component only -->
962
<style scoped>
shabai517's avatar
shabai517 committed
963 964 965 966 967 968 969
  .dataset-container{
    width: 100%;
  }
  .content{
    width: 80%;
    margin:0 auto;
    padding: 40px 0;
shabai517's avatar
shabai517 committed
970
    min-height: calc(100vh - 200px);
shabai517's avatar
shabai517 committed
971 972 973 974 975 976 977 978 979 980 981 982 983 984 985 986 987 988 989 990 991
  }
  .tab-container{
    /*min-height: calc(100vh - 685px);*/
  }
  .card{
    margin-top: 30px;
  }
  .project-title{
      margin: 20px 0;
      color:rgb(100, 102, 100);
  }
  .tags{
    font-size: 16px;
    color:rgb(100, 102, 100);
  }
  .tags a{
    color:rgb(100, 102, 100);
  }
  .tags a:hover{
    color: #5bc0be;;
  }
shabai517's avatar
shabai517 committed
992 993
  .icon-tag{
    font-size: 12px;
shabai517's avatar
shabai517 committed
994 995 996 997 998 999 1000 1001 1002 1003 1004 1005 1006
    margin-right: 5px;
  }
  .summary-content-header{
    font-size: 14px;
    color: #5bc0be;
    font-weight: bold;
  }
  .card p{
    text-align: justify;
  }
  .card .summary-content-header:first-child{
    margin-top: 0px;
  }
shabai517's avatar
shabai517 committed
1007 1008
  .card a{
      color: #495060;
shabai517's avatar
shabai517 committed
1009
      border-bottom-style: dotted;
shabai517's avatar
shabai517 committed
1010 1011 1012 1013
  }
  .card a:hover{
        color: #5bc0be;
  }
shabai517's avatar
shabai517 committed
1014
  .card .property{
1015 1016
    /*display: flex;*/
    display: block;
shabai517's avatar
shabai517 committed
1017 1018 1019 1020 1021 1022 1023 1024 1025
  }
  .card .property .property-col{
    display: flex;
    flex:1;
    flex-direction:column;
  }
  .card .property .property-col:not(:last-child) {
    margin-right: 40px;
  }
1026
  /*
shabai517's avatar
shabai517 committed
1027 1028 1029 1030 1031
  .card .property .property-col .property-row{
    display: flex;
    padding: 12px 0;
    justify-content: space-between;
    border-bottom: 1px solid #e7e7e7;
1032 1033 1034 1035 1036 1037 1038
    margin-bottom: 10px;
  }*/
  .card .property .property-row{
    /*display: flex;*/
    /*padding: 2px 0;*/
    /*border-bottom: 1px solid #e7e7e7;*/
    margin-bottom: 10px;
shabai517's avatar
shabai517 committed
1039 1040
  }
  .list-wrapper{
1041

shabai517's avatar
shabai517 committed
1042 1043 1044 1045 1046 1047
  }
  .similarity-card{
    margin-bottom: 5px;
  }
  .similarity-title{
    margin-bottom: 3px;
shabai517's avatar
shabai517 committed
1048 1049 1050 1051 1052 1053 1054 1055 1056 1057 1058 1059 1060 1061 1062 1063
  }
  .download-button{
    padding: 6px 8px;
    font-size: 12px;
    margin-top: 10px;
    font-weight: 700;
    background-color: #5bc0be;
    border-radius: 3px;
    color: #f8f8f8;
    border-bottom-style:none;
    display: inline-block;
  }
  .download-button:hover{
    opacity: .8;
  }
  .download-list-wrapper{
1064
    /*margin-top: 10px;*/
shabai517's avatar
shabai517 committed
1065
  }
shabai517's avatar
shabai517 committed
1066 1067 1068
  .card-item-wrapper{
    margin-bottom: 10px;
  }
1069
  /*
shabai517's avatar
shabai517 committed
1070 1071 1072
  .property-wrapper{
    display: flex;
    flex-direction: column;
1073 1074 1075
  }*/
  .property-wrapper{
    display: block;
shabai517's avatar
shabai517 committed
1076 1077 1078 1079 1080
  }
  .summary-content-header{
    display: flex;
    align-items: center;
  }
shabai517's avatar
shabai517 committed
1081 1082 1083 1084
  .page-container{
    text-align: center;
    margin-top: 20px;
  }
shabai517's avatar
shabai517 committed
1085 1086 1087 1088 1089 1090 1091 1092
  /*
  @media (min-width: 768px) {
      .content{
         min-height: calc(100vh - 505px);
      }

  }
  @media (min-width: 992px) {
1093

shabai517's avatar
shabai517 committed
1094 1095 1096

  }
  @media (min-width: 1200px) {
1097

shabai517's avatar
shabai517 committed
1098 1099 1100
  }

  @media (min-width: 1600px) {
1101

shabai517's avatar
shabai517 committed
1102 1103
  }
  @media (min-width: 1800px) {
1104

shabai517's avatar
shabai517 committed
1105 1106
  }
  @media (min-width: 2000px) {
1107

shabai517's avatar
shabai517 committed
1108 1109
  }
  @media (min-width: 2300px) {
1110

shabai517's avatar
shabai517 committed
1111
  }*/
1112

shabai517's avatar
shabai517 committed
1113 1114 1115 1116 1117 1118 1119 1120 1121 1122 1123
</style>
<style>
  .card .ivu-card-body table{
    margin-bottom: 0;
  }
  .card .ivu-card-body .ivu-checkbox-wrapper{
    margin-right: 0px;
  }
  .card .ivu-card-body .ivu-table-cell{
    padding: 0 5px;
  }