Project

General

Profile

« Previous | Next » 

Revision 59539

[Trunk | Graph]:
1. app.component.ts: Remove submenu (fragment items) for Support.
2. about.component.css & about.component.html: Fixes in UI | Not selected tabs are gray | [Bug fix] Architecture image is always uk-width-4-5 (gifs were loosing their proper position).

View differences:

modules/uoa-graph-portal/trunk/src/app/app.component.ts
56 56
      {
57 57
        rootItem: new MenuItem("contact", "Support", "", "/support", false, [], null, {}),
58 58
        items: [
59
          new MenuItem("contact", "Contact", "", "/support", false, [], null, {}),
60
          new MenuItem("documentation", "Documentation", "", "/support", false, [], null, {}, null, "documentation"),
61
          new MenuItem("faq", "FAQs", "", "/support", false, [], null, {}, null, "faq"),
59
          // new MenuItem("contact", "Contact", "", "/support", false, [], null, {}),
60
          // new MenuItem("documentation", "Documentation", "", "/support", false, [], null, {}, null, "documentation"),
61
          // new MenuItem("faq", "FAQs", "", "/support", false, [], null, {}, null, "faq"),
62 62
        ]
63 63
      }
64 64
    ];
modules/uoa-graph-portal/trunk/src/app/about/about.component.css
1
.firstBackground {
2
    background-image: url("/assets/graph-assets/backgrounds/blue_circle.svg"), url("/assets/graph-assets/backgrounds/pink_dots.svg");
3
    background-size: auto;
4
    background-repeat: no-repeat;
5
    background-position: 104% 23%, 108% 41%;
1
@media only screen and (min-width: 960px) {
2
    .firstBackground {
3
        background-image: url("/assets/graph-assets/backgrounds/blue_circle.svg"), url("/assets/graph-assets/backgrounds/pink_dots.svg");
4
        background-size: auto;
5
        background-repeat: no-repeat;
6
        background-position: 104% 23%, 108% 41%;
7
    }
6 8
}
7 9

  
8 10
.marker-gif {
......
35 37
    text-align: left;
36 38
    font: normal normal bold 16px/21px Roboto !important;
37 39
    letter-spacing: 0;
40
    padding: 10px 0 0 0;
41
    text-transform: capitalize;
42

  
43
    color: #1A1A1A !important;
44
    opacity: 0.5;
45
    font-weight: 300 !important;
46
}
47

  
48
.uk-tab > li > a {
49
    border: none;
50
}
51

  
52
.uk-tab > li:hover:not(.uk-active) > a {
38 53
    color: #4687e6 !important;
39
    text-transform: capitalize;
40 54
    opacity: 1;
41
    padding: 10px 0 0 0;
42 55
}
43 56

  
44
.uk-tab > .uk-active > a {
45
    border-color: #4687e6 !important;
57
.uk-tab > li.uk-active > a {
58
    color: #4687e6 !important;
59
    opacity: 1;
60
    font-weight: bold !important;
46 61
}
47 62

  
63
.uk-tab > li.uk-active > a {
64
    border-bottom: 3px solid #4687e6 !important;
65
}
66

  
48 67
.button-tab > li > a {
49 68
    padding: 2px 15px;
50 69
    line-height: 25px;
51 70
    border-radius: 500px;
52 71
    font-family: Roboto;
53
    font-size: 16px;
72
    font-size: 13px;
54 73
    text-transform: capitalize;
55 74

  
56 75
    color: #1a1a1a;
......
70 89
    opacity: 1;
71 90
}
72 91

  
92
.tab-image {
93
    max-height: 400px;
94
    /*width: auto;*/
95
}
96

  
73 97
.architecture-image {
74 98
    align-self: start;
75 99
}
76 100

  
77
/*.block-ellipsis {*/
78
/*    display: -webkit-box;*/
79
/*    !* autoprefixer: ignore next *!*/
80
/*    -webkit-box-orient: vertical;*/
81
/*    overflow: hidden;*/
82
/*    text-overflow: ellipsis;*/
83
/*    -webkit-line-clamp: 3;*/
84
/*}*/
101
.uk-align-right\@m .uk-list>li::before, .uk-align-right\@m .uk-list>li::after {
102
    display: inline;
103
}
modules/uoa-graph-portal/trunk/src/app/about/about.component.html
48 48
        </div>
49 49
      </div>
50 50
    </div>
51
    <div class="uk-flex uk-flex-center uk-container uk-inline">
52
      <img [src]="'assets/graph-assets/about/architecture/'+architectureImage" class="uk-width-4-5@m architecture-image">
51
    <div class="uk-flex uk-flex-center uk-inline">
52
      <img [src]="'assets/graph-assets/about/architecture/'+architectureImage" class="uk-width-4-5 architecture-image">
53
      
53 54
      <a class="uk-position-absolute uk-transform-center" style="left: 27%; top: 48%"
54 55
         (click)="goTo('tabs_card'); changeTab(0)"
55 56
         (mouseenter)="architectureImage = 'aggregation_hover.png'" (mouseleave)="architectureImage = 'gray.png'">
......
102 103
      <ul class="uk-switcher uk-margin">
103 104
        <li>
104 105
<!--            uk-grid-->
105
          <div class=" uk-margin-large-top">
106
          <div class=" uk-margin-large-top uk-text-small">
106 107
<!--              <div class="uk-width-3-5@m">-->
107
              <img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent"
108
              <img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent tab-image"
108 109
                   src="assets/graph-assets/about/architecture/aggregation.png" alt="Aggregation">
109
              <div [class]="'uk-margin-bottom uk-margin-medium-right uk-text-small '+(aggregationReadMore ? '' : 'lines-18 multi-line-ellipsis')">
110
              <div [class]="'uk-margin-bottom uk-margin-medium-right '+(aggregationReadMore ? '' : 'lines-18 multi-line-ellipsis')">
110 111
                <div>
111 112
                  OpenAIRE collects metadata records from a variety of content providers as described in
112 113
                  <a href="https://www.openaire.eu/aggregation-and-content-provision-workflows" target="_blank">https://www.openaire.eu/aggregation-and-content-provision-workflows</a>.
......
149 150

  
150 151
                <ul class="uk-switcher uk-margin">
151 152
                  <li>
152
                    <img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent"
153
                    <img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent tab-image"
153 154
                         src="assets/graph-assets/about/architecture/deduplication.svg" alt="Deduplication">
154 155
                    <div [class]="'uk-margin-bottom uk-margin-medium-right uk-text-small '+(dedupClusteringReadMore ? '' : 'lines-18 multi-line-ellipsis')">
155 156
                      <div>
......
168 169
                          <li>
169 170
                            <div>
170 171
                              Title-based function: the function generates a key that depends on
171
                              <span class="portal-color">(i)</span>
172
                              number of significant words in the title (normalized, stemming, etc.),
173
                              <span class="portal-color">(ii)</span>
174
                              module 10 of the number of characters of such words, and (iii) a string obtained as an alternation of the function prefix(3) and suffix(3) (and vice versa) o the first 3 words (2 words if the title only has 2). For example, the title “Entity deduplication in big data graphs for scholarly communication” becomes “entity deduplication big data graphs scholarly communication” with two keys key “7.1entionbig” and “7.1itydedbig” (where 1 is module 10 of 54 characters of the normalized title.
172
                              (i) number of significant words in the title (normalized, stemming, etc.),
173
                              (ii) module 10 of the number of characters of such words, and
174
                              (iii) a string obtained as an alternation of the function prefix(3) and suffix(3) (and vice versa) o the first 3 words (2 words if the title only has 2). For example, the title “Entity deduplication in big data graphs for scholarly communication” becomes “entity deduplication big data graphs scholarly communication” with two keys key “7.1entionbig” and “7.1itydedbig” (where 1 is module 10 of 54 characters of the normalized title.
175 175
                            </div>
176 176
                          </li>
177 177
                        </ul>
......
190 190
                    </div>
191 191
                  </li>
192 192
                  <li>
193
                    <img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent"
193
                    <img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent tab-image"
194 194
                         src="assets/graph-assets/about/architecture/deduplication.svg" alt="Deduplication">
195 195
                    <div [class]="'uk-margin-bottom uk-margin-medium-right uk-text-small '+(dedupMatchingAndElectionReadMore ? '' : 'lines-18 multi-line-ellipsis')">
196 196
                      <div>
......
283 283

  
284 284
                <ul class="uk-switcher uk-margin">
285 285
                  <li>
286
                    <img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent"
286
                    <img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent tab-image"
287 287
                         src="assets/graph-assets/about/architecture/enrichment.svg" alt="Enrichment">
288 288
                    <div class="uk-margin-bottom uk-margin-medium-right uk-text-small">
289 289
                      <p>
......
299 299
                    </div>
300 300
                  </li>
301 301
                  <li>
302
                    <img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent"
302
                    <img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent tab-image"
303 303
                         src="assets/graph-assets/about/architecture/enrichment.svg" alt="Enrichment">
304 304
                    <div [class]="'uk-margin-bottom uk-margin-medium-right uk-text-small '+(enrichmentMiningReadMore ? '' : 'lines-18 multi-line-ellipsis')">
305 305
                      <div>
......
311 311
                          <span class="portal-color">Project mining</span>
312 312
                          in OpenAIRE text mines the full-texts of publications in order to extract matches to funding project codes/IDs.
313 313
                          The mining algorithm works by utilising
314
                          <span class="portal-color">(i)</span> the grant identifier, and
315
                          <span class="portal-color">(ii)</span> the project acronym (if available) of each project.
314
                          (i) the grant identifier, and
315
                          (ii) the project acronym (if available) of each project.
316 316
                          The mining algorithm:
317
                          <span class="portal-color">(1)</span>
318
                          Preprocesses/normalizes the full-texts using several functions, which depend on the  characteristics of each funder (i.e., the format of the grant identifiers), such as stopword and/or punctuation removal, tokenization, stemming, converting to lowercase; then
319
                          <span class="portal-color">(2)</span>
320
                          string matching of grant identifiers against the normalized text is done using database techniques; and
321
                          <span class="portal-color">(3)</span>
322
                          the results are validated and cleaned using the context near the match by looking at the context around the matched ID for relevant metadata and positive or negative words/phrases, in order to calculate a confidence value for each publication-->project link.
317
                          (1) Preprocesses/normalizes the full-texts using several functions, which depend on the  characteristics of each funder (i.e., the format of the grant identifiers), such as stopword and/or punctuation removal, tokenization, stemming, converting to lowercase; then
318
                          (2) String matching of grant identifiers against the normalized text is done using database techniques; and
319
                          (3) The results are validated and cleaned using the context near the match by looking at the context around the matched ID for relevant metadata and positive or negative words/phrases, in order to calculate a confidence value for each publication-->project link.
323 320
                          A confidence threshold is set to optimise high accuracy while minimising false positives, such as matches with page or report numbers, post/zip codes, parts of telephone numbers, DOIs or URLs, accession numbers.
324 321
                          The algorithm also applies rules for disambiguating results, as different funders can share identical project IDs; for example, grant number 633172 could refer to H2020 project EuroMix but also to Australian-funded NHMRC project “Brain activity (EEG) analysis and brain imaging techniques to measure the neurobiological effects of sleep apnea”.
325 322
                          Project mining works very well and was the first Text & Data Mining (TDM) service of OpenAIRE.
......
371 368
                    </div>
372 369
                  </li>
373 370
                  <li>
374
                    <img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent"
371
                    <img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent tab-image"
375 372
                         src="assets/graph-assets/about/architecture/enrichment.svg" alt="Enrichment">
376 373
                    <div class="uk-margin-bottom uk-margin-medium-right uk-text-small">
377 374
                      The Deduction process (also known as “bulk tagging”) enriches each record with new information that can be derived from the existing property values.
......
386 383
                    </div>
387 384
                  </li>
388 385
                  <li>
389
                    <img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent"
386
                    <img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent tab-image"
390 387
                         src="assets/graph-assets/about/architecture/enrichment.svg" alt="Enrichment">
391 388
                    <div [class]="'uk-margin-bottom uk-margin-medium-right uk-text-small '+(enrichmentPropagationReadMore ? '' : 'lines-18 multi-line-ellipsis')">
392 389
                      <div>
......
440 437
          </div>
441 438
        </li>
442 439
        <li>
443
          <div class="uk-margin-large-top">
440
          <div class="uk-text-small uk-margin-large-top">
444 441
<!--              <div class="uk-width-3-5@m">-->
445
            <img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent"
442
            <img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent tab-image"
446 443
                 src="assets/graph-assets/about/architecture/post_cleaning.svg" alt="Post Cleaning">
447
            <div class="uk-margin-bottom uk-margin-medium-right uk-text-small">
444
            <div class="uk-margin-bottom uk-margin-medium-right">
448 445
              <p>
449 446
                Lorem ipsum...
450 447
              </p>
......
456 453
          </div>
457 454
        </li>
458 455
        <li>
459
          <div class="uk-margin-large-top">
456
          <div class="uk-text-small uk-margin-large-top">
460 457
<!--              <div class="uk-width-3-5@m">-->
461
            <img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent"
458
            <img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent tab-image"
462 459
                 src="assets/graph-assets/about/architecture/indexing.svg" alt="Indexing">
463
            <div class="uk-margin-bottom uk-margin-medium-right uk-text-small">
460
            <div class="uk-margin-bottom uk-margin-medium-right">
464 461
              <p>
465 462
                The final version of the OpenAIRE Research Graph is indexed on a Solr server that is used by the OpenAIRE portals (EXPLORE, CONNECT, PROVIDE) and APIs, the latter adopted by several third-party applications and organizations, such as:
466 463
              </p>
......
488 485
          </div>
489 486
        </li>
490 487
        <li>
491
          <div class="uk-margin-large-top">
488
          <div class="uk-text-small uk-margin-large-top">
492 489
<!--              <div class="uk-width-3-5@m">-->
493
            <img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent"
490
            <img class="uk-width-2-5@m uk-align-right@m uk-margin-remove-adjacent tab-image uk-padding-large uk-padding-remove-top uk-padding-remove-horizontal"
494 491
                 src="assets/graph-assets/about/architecture/stats_analysis.svg" alt="Stats Analysis">
495
            <div class="uk-margin-bottom uk-margin-medium-right uk-text-small">
492
            <div class="uk-margin-bottom uk-margin-medium-right">
496 493
              <p>
497 494
                The OpenAIRE Research Graph is also processed by a pipeline for extracting the statistics and producing the charts for funders, research initiative, infrastructures, and policy makers that you can see on MONITOR.
498 495
                Based on the information available on the graph, OpenAIRE provides a set of indicators for monitoring the funding and research impact and the uptake of Open Science publishing practices,
......
527 524
  <div id="metrics" class="uk-container uk-container-large uk-section">
528 525
    <div class="uk-margin-large-left uk-margin-large-right">
529 526
      <h2 class="uk-text-center">Data & Metrics</h2>
530
      <h4 class="uk-margin-medium-top portal-color">Coming soon...</h4>
527
      <h4 class="uk-text-center uk-margin-medium-top portal-color">Coming soon...</h4>
531 528
<!--        <div>-->
532 529
<!--          <h3 class="uk-margin-medium-top portal-color">Data</h3>-->
533 530
<!--          <div></div>-->

Also available in: Unified diff