Project

General

Profile

« Previous | Next » 

Revision 60869

[Graph | Trunk]: Add explore and cases section in home page

View differences:

modules/uoa-graph-portal/trunk/src/app/home/home.component.css
65 65
.uk-list.target > li:nth-child(n+2) {
66 66
    margin-top: 10px;
67 67
}
68

  
69
.case {
70
    background-color: white;
71
    height: 250px;
72
    position: relative;
73
}
74

  
75
.case img {
76
    position: absolute;
77
    left: 50%;
78
    top: 50%;
79
    transform: translate(-50%, -50%);
80
    height: 150px;
81
}
82

  
83
.explore {
84
    background-color: #F9DBD1;
85
    --portal-main-color: var(--explore-color);
86
    --portal-dark-color: var(--explore-dark-color);
87
}
modules/uoa-graph-portal/trunk/src/app/home/home.component.html
115 115
    </div>
116 116
  </div>
117 117
</div>
118
<div id="explore" class="explore">
119
  <div class="uk-section uk-text-small uk-container uk-container-large">
120
    <div class="uk-text-center uk-margin-large-top">
121
      <img class="uk-width-medium" src="assets/common-assets/logo-large-explore.png">
122
      <h2 class="uk-margin-remove-bottom">Discover the content of the graph with EXPLORE</h2>
123
      <h6 class="uk-margin-top"><span class="portal-color">Explore</span> all open access <span class="portal-color">research outcomes</span>.</h6>
124
    </div>
125
    <div class="uk-flex uk-flex-center uk-margin-large-top uk-margin-xlarge-bottom">
126
      <form class="uk-flex uk-flex-wrap">
127
        <div class="uk-margin-small-top">
128
          <entities-selection [simpleView]="true" currentEntity="all" [selectedEntity]="selectedEntity"
129
                              [properties]="properties" [onChangeNavigate]="false" [allEnable]="true"
130
                              (selectionChange)="entityChanged($event)"
131
          ></entities-selection>
132
        </div>
133
        <div class="uk-margin-small-top uk-width-expand">
134
          <div class="uk-inline">
135
            <a *ngIf="keyword.length > 0" class="uk-form-icon uk-form-icon-flip" (click)="keyword = ''" uk-icon="icon: close"></a>
136
            <input type="text" class="uk-input uk-width-xlarge@l uk-width-large@m uk-width-medium"
137
                   placeholder="Search by title, author, doi, abstract, content..."
138
                   [(ngModel)]="keyword"
139
                   name="keyword">
140
          </div>
141
          <div class=" quickSelectionsBox uk-width-xlarge@l uk-width-large@m uk-width-medium">
142
            <quick-selections *ngIf="selectedEntity == 'result'" [resultTypes]="resultTypes"
143
                              [quickFilter]="resultsQuickFilter"
144
                              [properties]="properties">
145
            </quick-selections>
146
          </div>
147
        </div>
148
        <div class="uk-margin-small-top">
149
          <button (click)="goTo()" type="submit" class="uk-button portal-button uk-text-bold uk-margin-small-left">
150
            Search
151
          </button>
152
        </div>
153
        </form>
154
    </div>
155
  </div>
156
</div>
118 157
<div>
119
  Explore
120
</div>
121
<div id="cases">
122 158
  <div class="uk-section uk-container uk-container-large">
159
    <div class="uk-text-center">
160
      <h2 class="uk-margin-remove-bottom">Use Cases</h2>
161
      <h6 class="uk-margin-small-top">Brief presentations of our success stories</h6>
162
    </div>
123 163
    <div class="uk-padding-small">
124
      <div class="uk-text-center">
125
        <h2 class="uk-margin-remove-bottom">Use Cases</h2>
126
        <h6 class="uk-margin-small-top">Brief presentations of our success stories</h6>
127
      </div>
128
      <div class="uk-grid uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
129
        <div class="">
130

  
164
      <div class="uk-grid uk-child-width-1-3@m uk-child-width-1-1 uk-margin-large-top" uk-height-match="target: .uk-text-justify" uk-grid>
165
        <div>
166
          <div class="case">
167
            <img src="assets/graph-assets/home/cases/open-maps.png">
168
          </div>
169
          <h4 class="uk-text-bold uk-text-center uk-margin-top">Open Knowledge maps</h4>
170
          <div class="uk-text-justify">
171
            VIPER, the Visual Project Explorer enables funders, institutions and researchers to systematically explore a
172
            project’s output, and to understand its reception in different areas.
173
          </div>
174
          <div class="uk-text-center uk-margin-top">
175
            <a class="uk-text-uppercase uk-text-bold uk-text-small" href="https://www.openaire.eu/viper-the-visual-project-explorer" target="_blank">
176
              <span>Read More</span>
177
              <icon name="arrow_right" class="uk-margin-small-left"></icon>
178
            </a>
179
          </div>
131 180
        </div>
181
        <div>
182
          <div class="case">
183
            <img src="assets/graph-assets/home/cases/ec.png">
184
          </div>
185
          <h4 class="uk-text-bold uk-text-center uk-margin-top">European Commission</h4>
186
          <div class="uk-text-justify">
187
            The EC Participant Portal is using the OpenAIRE Research Graph to collect information about publications and
188
            datasets resulting from H2020 funded projects.
189
          </div>
190
          <div class="uk-text-center uk-margin-top">
191
            <a class="uk-text-uppercase uk-text-bold uk-text-small" href="https://www.openaire.eu/reporting-research-outputs-to-the-ec-using-the-openaire-api" target="_blank">
192
              <span>Read More</span>
193
              <icon name="arrow_right" class="uk-margin-small-left"></icon>
194
            </a>
195
          </div>
196
        </div>
197
        <div>
198
          <div class="case">
199
            <img src="assets/graph-assets/home/cases/orcid.png">
200
          </div>
201
          <h4 class="uk-text-bold uk-text-center uk-margin-top">ORCID</h4>
202
          <div class="uk-text-justify">
203
            ORCID data is used to enrich the research product records of the OpenAIRE Research Graph. Through EXPLORE,
204
            ORCID users can instantly identify their works, enrich the OpenAIRE Research Graph and their ORCID profiles.
205
          </div>
206
          <div class="uk-text-center uk-margin-top">
207
            <a class="uk-text-uppercase uk-text-bold uk-text-small" href="https://www.openaire.eu/openaire-explore-integration-with-the-orcid-search-and-link-wizard" target="_blank">
208
              <span>Read More</span>
209
              <icon name="arrow_right" class="uk-margin-small-left"></icon>
210
            </a>
211
          </div>
212
        </div>
132 213
      </div>
133 214
    </div>
134 215
  </div>
modules/uoa-graph-portal/trunk/src/app/home/home.component.ts
2 2
import {Subscription} from 'rxjs';
3 3
import {ActivatedRoute, Router} from '@angular/router';
4 4
import {Location} from '@angular/common';
5
import "rxjs/add/observable/zip";
6
import {Title, Meta} from '@angular/platform-browser';
5
import 'rxjs/add/observable/zip';
6
import {Meta, Title} from '@angular/platform-browser';
7 7
import {ConfigurationService} from '../openaireLibrary/utils/configuration/configuration.service';
8
import {SearchDataprovidersService} from '../openaireLibrary/services/searchDataproviders.service';
9
import {SearchProjectsService} from '../openaireLibrary/services/searchProjects.service';
10
import {SearchOrganizationsService} from '../openaireLibrary/services/searchOrganizations.service';
11
import {RefineFieldResultsService} from '../openaireLibrary/services/refineFieldResults.service';
12
import {NumberUtils} from '../openaireLibrary/utils/number-utils.class';
13

  
14
import {RouterHelper} from '../openaireLibrary/utils/routerHelper.class';
15 8
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
16
import {ErrorCodes} from '../openaireLibrary/utils/properties/errorCodes';
17 9
import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service';
18 10
import {SEOService} from '../openaireLibrary/sharedComponents/SEO/SEO.service';
19
import {SearchResearchResultsService} from "../openaireLibrary/services/searchResearchResults.service";
20
import {properties} from "../../environments/environment";
21
import {portals} from "./portals";
11
import {properties} from '../../environments/environment';
12
import {portals} from './portals';
13
import {Filter} from '../openaireLibrary/searchPages/searchUtils/searchHelperClasses.class';
14
import {RouterHelper} from '../openaireLibrary/utils/routerHelper.class';
22 15

  
23 16
@Component({
24 17
  selector: 'home',
......
26 19
  styleUrls: ['home.component.css']
27 20
})
28 21
export class HomeComponent {
29
  public pageTitle = "OpenAIRE - Research Graph";
22
  public pageTitle = 'OpenAIRE - Research Graph';
30 23
  public portals: any[] = portals;
31 24
  public state: number = 0;
32 25
  public properties: EnvProperties = properties;
26
  public selectedEntity = 'all';
27
  public url: string;
28
  public routerHelper: RouterHelper = new RouterHelper();
29
  public resultTypes: Filter = {
30
    values: [
31
      {name: 'Publications', id: 'publications', selected: true, number: 0},
32
      {name: "Research data", id: "datasets", selected: true, number: 0},
33
      {name: "Software", id: "software", selected: true, number: 0},
34
      {name: "Other research products", id: "other", selected: true, number: 0}
35
    ],
36
    filterId: 'type',
37
    countSelectedValues: 0,
38
    filterType: 'checkbox',
39
    originalFilterId: '',
40
    valueIsExact: true,
41
    title: 'Result Types',
42
    filterOperator: 'or'
43
  };
44
  public resultsQuickFilter: { filter: Filter, selected: boolean, filterId: string, value: string } = {
45
    filter: null,
46
    selected: true,
47
    filterId: 'resultbestaccessright',
48
    value: 'Open Access'
49
  };
50
  public keyword: string = '';
33 51
  private timeouts: any[] = [];
34 52
  private subs: Subscription[] = [];
35 53
  
......
40 58
    private config: ConfigurationService, private _meta: Meta, private _title: Title, private seoService: SEOService
41 59
  ) {
42 60
    
43
    let description = "OpenAIRE Research Graph is an open resource that aggregates a collection of research data properties (metadata, links) available within the OpenAIRE Open Science infrastructure for funders, organizations, researchers, research communities and publishers to interlink information by using a semantic graph database approach.";
61
    let description = 'OpenAIRE Research Graph is an open resource that aggregates a collection of research data properties (metadata, links) available within the OpenAIRE Open Science infrastructure for funders, organizations, researchers, research communities and publishers to interlink information by using a semantic graph database approach.';
44 62
    
45 63
    this._title.setTitle(this.pageTitle);
46
    this._meta.updateTag({content: description}, "name='description'");
47
    this._meta.updateTag({content: description}, "property='og:description'");
48
    this._meta.updateTag({content: this.pageTitle}, "property='og:title'");
64
    this._meta.updateTag({content: description}, 'name=\'description\'');
65
    this._meta.updateTag({content: description}, 'property=\'og:description\'');
66
    this._meta.updateTag({content: this.pageTitle}, 'property=\'og:title\'');
49 67
  }
50 68
  
51 69
  public ngOnInit() {
52 70
    if (this.properties) {
53 71
      let url = this.properties.domain + this.properties.baseLink + this._router.url;
54 72
      this.seoService.createLinkForCanonicalURL(url, false);
55
      this._meta.updateTag({content: url}, "property='og:url'");
73
      this._meta.updateTag({content: url}, 'property=\'og:url\'');
56 74
      if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) {
57 75
        this.subs.push(this._piwikService.trackView(this.properties, this.pageTitle).subscribe());
58 76
      }
......
70 88
  private animation() {
71 89
    this.timeouts.push(setTimeout(() => {
72 90
      this.animation();
73
      if (this.state === (this.portals.length -1)) {
74
        this.state = 0
91
      if (this.state === (this.portals.length - 1)) {
92
        this.state = 0;
75 93
      } else {
76 94
        this.state++;
77 95
      }
78 96
    }, 4000));
79 97
  }
80 98
  
99
  entityChanged($event) {
100
    this.selectedEntity = $event.entity;
101
    this.url = $event.simpleUrl;
102
  }
103
  
81 104
  private changeSlide(slide: number) {
82 105
    this.clearTimeouts();
83 106
    this.state = slide;
......
90 113
    });
91 114
    this.state = 0;
92 115
  }
116
  
117
  goTo() {
118
    let url = 'https://explore.openaire.eu' + this.url;
119
    let parameterNames = [];
120
    let parameterValues = [];
121
    if (this.selectedEntity == 'result') {
122
      if (this.resultTypes) {
123
        let values = [];
124
        for (let value of this.resultTypes.values) {
125
          if (value.selected) {
126
            values.push(value.id);
127
          }
128
        }
129
        if (values.length > 0 && values.length != 4) {
130
          parameterNames.push('type');
131
          parameterValues.push(values.join(','));
132
        }
133
        if (this.resultsQuickFilter) {
134
          parameterNames.push('qf');
135
          parameterValues.push('' + this.resultsQuickFilter.selected);
136
        }
137
      }
138
    } else if (this.selectedEntity == 'all') {
139
      if (this.resultsQuickFilter) {
140
        parameterNames.push('qf');
141
        parameterValues.push('true');
142
      }
143
    }
144
    if (this.keyword.length > 0) {
145
      parameterNames.push('fv0');
146
      parameterValues.push(this.keyword);
147
      parameterNames.push('f0');
148
      parameterValues.push('q');
149
    }
150
    window.open(url + this.routerHelper.createQueryParamsString(parameterNames, parameterValues), '_blank').focus();
151
  }
93 152
}
modules/uoa-graph-portal/trunk/src/environments/environment.beta.ts
12 12
  admins: ["graph@openaire.eu"],
13 13
  cookieDomain: ".openaire.eu",
14 14
  reCaptchaSiteKey: "6LezhVIUAAAAAOb4nHDd87sckLhMXFDcHuKyS76P",
15
  searchLinkToResult: "/search/result?id=",
16
  searchLinkToPublication: "/search/publication?articleId=",
17
  searchLinkToProject: "/search/project?projectId=",
18
  searchLinkToDataProvider: "/search/dataprovider?datasourceId=",
19
  searchLinkToDataset: "/search/dataset?datasetId=",
20
  searchLinkToSoftwareLanding: "/search/software?softwareId=",
21
  searchLinkToOrp: "/search/other?orpId=",
22
  searchLinkToOrganization: "/search/organization?organizationId=",
23
  searchLinkToPublications: "/search/find/publications",
24
  searchLinkToDataProviders: "/search/find/dataproviders",
25
  searchLinkToProjects: "/search/find/projects",
26
  searchLinkToDatasets: "/search/find/datasets",
27
  searchLinkToSoftware: "/search/find/software",
28
  searchLinkToOrps: "/search/find/other",
29
  searchLinkToOrganizations: "/search/find/organizations",
30
  searchLinkToCompatibleDataProviders: "/search/content-providers",
31
  searchLinkToEntityRegistriesDataProviders: "/search/entity-registries",
32
  searchLinkToEntityRegistriesDataProvidersTable: "/search/entity-registries-table",
33
  searchLinkToJournals: "/search/journals",
34
  searchLinkToJournalsTable: "/search/journals-table",
35
  searchLinkToResults: "/search/find/research-outcomes",
36
  searchLinkToAdvancedPublications: "/search/advanced/publications",
37
  searchLinkToAdvancedProjects: "/search/advanced/projects",
38
  searchLinkToAdvancedDatasets: "/search/advanced/datasets",
39
  searchLinkToAdvancedSoftware: "/search/advanced/software",
40
  searchLinkToAdvancedOrps: "/search/advanced/other",
41
  searchLinkToAdvancedDataProviders: "/search/advanced/dataproviders",
42
  searchLinkToAdvancedOrganizations: "/search/advanced/organizations",
43
  searchLinkToAdvancedResults: "/search/advanced/research-outcomes"
15 44
};
modules/uoa-graph-portal/trunk/src/environments/environment.ts
17 17
  admins: ["kostis30fylloy@gmail.com"],
18 18
  cookieDomain: ".di.uoa.gr",
19 19
  reCaptchaSiteKey: "6LcVtFIUAAAAAB2ac6xYivHxYXKoUvYRPi-6_rLu",
20
  searchLinkToResult: "/search/result?id=",
21
  searchLinkToPublication: "/search/publication?articleId=",
22
  searchLinkToProject: "/search/project?projectId=",
23
  searchLinkToDataProvider: "/search/dataprovider?datasourceId=",
24
  searchLinkToDataset: "/search/dataset?datasetId=",
25
  searchLinkToSoftwareLanding: "/search/software?softwareId=",
26
  searchLinkToOrp: "/search/other?orpId=",
27
  searchLinkToOrganization: "/search/organization?organizationId=",
28
  searchLinkToPublications: "/search/find/publications",
29
  searchLinkToDataProviders: "/search/find/dataproviders",
30
  searchLinkToProjects: "/search/find/projects",
31
  searchLinkToDatasets: "/search/find/datasets",
32
  searchLinkToSoftware: "/search/find/software",
33
  searchLinkToOrps: "/search/find/other",
34
  searchLinkToOrganizations: "/search/find/organizations",
35
  searchLinkToCompatibleDataProviders: "/search/content-providers",
36
  searchLinkToEntityRegistriesDataProviders: "/search/entity-registries",
37
  searchLinkToEntityRegistriesDataProvidersTable: "/search/entity-registries-table",
38
  searchLinkToJournals: "/search/journals",
39
  searchLinkToJournalsTable: "/search/journals-table",
40
  searchLinkToResults: "/search/find/research-outcomes",
41
  searchLinkToAdvancedPublications: "/search/advanced/publications",
42
  searchLinkToAdvancedProjects: "/search/advanced/projects",
43
  searchLinkToAdvancedDatasets: "/search/advanced/datasets",
44
  searchLinkToAdvancedSoftware: "/search/advanced/software",
45
  searchLinkToAdvancedOrps: "/search/advanced/other",
46
  searchLinkToAdvancedDataProviders: "/search/advanced/dataproviders",
47
  searchLinkToAdvancedOrganizations: "/search/advanced/organizations",
48
  searchLinkToAdvancedResults: "/search/advanced/research-outcomes"
20 49
};
modules/uoa-graph-portal/trunk/src/environments/environment.prod.ts
12 12
  admins: ["graph@openaire.eu"],
13 13
  cookieDomain: ".openaire.eu",
14 14
  reCaptchaSiteKey: "6LezhVIUAAAAAOb4nHDd87sckLhMXFDcHuKyS76P",
15
  searchLinkToResult: "/search/result?id=",
16
  searchLinkToPublication: "/search/publication?articleId=",
17
  searchLinkToProject: "/search/project?projectId=",
18
  searchLinkToDataProvider: "/search/dataprovider?datasourceId=",
19
  searchLinkToDataset: "/search/dataset?datasetId=",
20
  searchLinkToSoftwareLanding: "/search/software?softwareId=",
21
  searchLinkToOrp: "/search/other?orpId=",
22
  searchLinkToOrganization: "/search/organization?organizationId=",
23
  searchLinkToPublications: "/search/find/publications",
24
  searchLinkToDataProviders: "/search/find/dataproviders",
25
  searchLinkToProjects: "/search/find/projects",
26
  searchLinkToDatasets: "/search/find/datasets",
27
  searchLinkToSoftware: "/search/find/software",
28
  searchLinkToOrps: "/search/find/other",
29
  searchLinkToOrganizations: "/search/find/organizations",
30
  searchLinkToCompatibleDataProviders: "/search/content-providers",
31
  searchLinkToEntityRegistriesDataProviders: "/search/entity-registries",
32
  searchLinkToEntityRegistriesDataProvidersTable: "/search/entity-registries-table",
33
  searchLinkToJournals: "/search/journals",
34
  searchLinkToJournalsTable: "/search/journals-table",
35
  searchLinkToResults: "/search/find/research-outcomes",
36
  searchLinkToAdvancedPublications: "/search/advanced/publications",
37
  searchLinkToAdvancedProjects: "/search/advanced/projects",
38
  searchLinkToAdvancedDatasets: "/search/advanced/datasets",
39
  searchLinkToAdvancedSoftware: "/search/advanced/software",
40
  searchLinkToAdvancedOrps: "/search/advanced/other",
41
  searchLinkToAdvancedDataProviders: "/search/advanced/dataproviders",
42
  searchLinkToAdvancedOrganizations: "/search/advanced/organizations",
43
  searchLinkToAdvancedResults: "/search/advanced/research-outcomes"
15 44
};
modules/uoa-graph-portal/trunk/src/styles.css
7 7
  --portal-main-color: #EE2540;
8 8
  --portal-main-contrast: white;
9 9
  --portal-dark-color: #E63946;
10
  --explore-color: #D95F2D;
11
  --explore-dark-color: #a0462c;
10 12
}
11 13

  
12 14
.graphApp {

Also available in: Unified diff