From 2488e90f60e82e1ea00f9d2858284969d2dfbeb4 Mon Sep 17 00:00:00 2001 From: tmushayahama Date: Sun, 22 Mar 2020 13:48:27 -0700 Subject: [PATCH] added species demo. removed the redundant search service and put in main https://github.com/geneontology/noctua-landing-page/issues/2 --- .../search-organisms.component.ts | 2 +- .../services/noctua-search.service.ts | 13 +- src/@noctua/scss/noctua.scss | 6 +- src/@noctua/scss/partials/_buttons.scss | 2 +- .../components/footer/footer.component.html | 34 ++++-- .../components/footer/footer.component.scss | 14 +++ .../components/toolbar/toolbar.component.ts | 7 +- .../cams/cams-table/cams-table.component.html | 3 +- .../cams/cams-table/cams-table.component.scss | 10 +- .../cams/cams-table/cams-table.component.ts | 4 +- .../noctua-search.component.html | 106 +++++++++++------ .../noctua-search.component.scss | 68 +++++++++++ .../noctua-search/noctua-search.component.ts | 39 +++--- .../noctua-search/noctua-search.module.ts | 2 + .../noctua-search/services/search.service.ts | 112 ------------------ src/assets/images/logos/go-logo.svg | 1 + src/index.html | 4 +- src/inject.tmpl | 6 +- 18 files changed, 237 insertions(+), 196 deletions(-) delete mode 100644 src/app/main/apps/noctua-search/services/search.service.ts create mode 100644 src/assets/images/logos/go-logo.svg diff --git a/src/@noctua.search/components/search-organisms/search-organisms.component.ts b/src/@noctua.search/components/search-organisms/search-organisms.component.ts index 62d0836..09e10bf 100644 --- a/src/@noctua.search/components/search-organisms/search-organisms.component.ts +++ b/src/@noctua.search/components/search-organisms/search-organisms.component.ts @@ -36,7 +36,7 @@ export class SearchOrganismsComponent implements OnInit, OnDestroy { } ngOnInit(): void { - + console.log(this.noctuaSearchService.organisms) } selectOrganism(organism) { diff --git a/src/@noctua.search/services/noctua-search.service.ts b/src/@noctua.search/services/noctua-search.service.ts index 781456f..357675d 100644 --- a/src/@noctua.search/services/noctua-search.service.ts +++ b/src/@noctua.search/services/noctua-search.service.ts @@ -43,12 +43,17 @@ export class NoctuaSearchService { id: 1 }, filter: { id: 2 - }, group: { + }, relation: { id: 3 - }, contributor: { + }, group: { id: 4 - }, species: { + }, contributor: { id: 5 + }, species: { + id: 6 + }, + history: { + id: 7 } }; @@ -114,7 +119,7 @@ export class NoctuaSearchService { } this.getCams(searchCriteria).subscribe((response: any) => { - this.cams = this.cams = response; + this.cams = response; this.onCamsChanged.next(this.cams); }); diff --git a/src/@noctua/scss/noctua.scss b/src/@noctua/scss/noctua.scss index 321bc05..500cfd6 100644 --- a/src/@noctua/scss/noctua.scss +++ b/src/@noctua/scss/noctua.scss @@ -87,11 +87,11 @@ textarea { .noc-paginator { overflow: hidden; - @include deep-height(40px); - background-color: #DDD; + @include deep-height(60px); + background-color: #F2F2F2; .mat-paginator-container { - @include deep-height(40px !important); + @include deep-height(60px !important); } } diff --git a/src/@noctua/scss/partials/_buttons.scss b/src/@noctua/scss/partials/_buttons.scss index 207980d..6b78b62 100644 --- a/src/@noctua/scss/partials/_buttons.scss +++ b/src/@noctua/scss/partials/_buttons.scss @@ -1,7 +1,7 @@ $noc-border-color: #BBB; .noc-rounded-button { - border-radius: 20px; + border-radius: 20px !important; @include deep-height(40px); line-height: 36px; font-size: 14px; diff --git a/src/app/layout/components/footer/footer.component.html b/src/app/layout/components/footer/footer.component.html index d51db4f..d1c5ebc 100644 --- a/src/app/layout/components/footer/footer.component.html +++ b/src/app/layout/components/footer/footer.component.html @@ -1,11 +1,27 @@ -
-
- - About   |   - Release Information   |   - Contact Us   |   - Privacy Policy   |   - Disclaimer -
© Copyright 2018 Paul Thomas All Rights Reserved. +
+
+
+ Home +
+
+ Contact us +
+
+ Citation and Terms of Use +
+
+ +
+ + Copyright © 1999-2020 + Member of the + Open Biological Ontologies Foundry + The Gene Ontology Consortium is supported by a P41 grant from the National Human Genome Research Institute + (NHGRI) [grant + + U41 HG002273] +
diff --git a/src/app/layout/components/footer/footer.component.scss b/src/app/layout/components/footer/footer.component.scss index e69de29..b4a2efd 100644 --- a/src/app/layout/components/footer/footer.component.scss +++ b/src/app/layout/components/footer/footer.component.scss @@ -0,0 +1,14 @@ +@import "src/@noctua/scss/noctua"; +@import "src/@noctua.common/scss/noctua.common"; + +$primary: map-get($theme, primary); +$accent: map-get($theme, accent); + +:host { + .footer { + background: #1A237E; + background: linear-gradient(to right, #0E2A3B 0%, #34306B 100%); + padding: 20px; + color: #FFF; + } +} diff --git a/src/app/layout/components/toolbar/toolbar.component.ts b/src/app/layout/components/toolbar/toolbar.component.ts index a9670f7..7983576 100644 --- a/src/app/layout/components/toolbar/toolbar.component.ts +++ b/src/app/layout/components/toolbar/toolbar.component.ts @@ -61,9 +61,12 @@ export class NoctuaToolbarComponent implements OnInit, OnDestroy { const noctuaFormReturnUrl = `${environment.workbenchUrl}noctua-form/?model_id=${modelId}`; const baristaParams = { 'barista_token': baristaToken }; const modelIdParams = { 'model_id': modelId }; + const returnUrlParams = { 'return': noctuaFormReturnUrl }; - this.loginUrl = `${environment.globalBaristaLocation}/login?return=${noctuaFormReturnUrl}`; - this.logoutUrl = `${environment.globalBaristaLocation}/logout?return=${noctuaFormReturnUrl}`; + this.loginUrl = environment.globalBaristaLocation + '/login?' + + self._parameterize(Object.assign({}, returnUrlParams)); + this.logoutUrl = environment.globalBaristaLocation + '/logout?' + + self._parameterize(Object.assign({}, baristaParams, returnUrlParams)); this.noctuaUrl = environment.noctuaUrl + '?' + (baristaToken ? self._parameterize(Object.assign({}, baristaParams)) : ''); this.noctuaFormUrl = environment.workbenchUrl + 'noctua-form?' + (baristaToken ? self._parameterize(Object.assign({}, modelIdParams, baristaParams)) : ''); diff --git a/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.html b/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.html index e788e0b..067ddb0 100644 --- a/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.html +++ b/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.html @@ -2,8 +2,7 @@
-
+
diff --git a/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.scss b/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.scss index e372c49..f365254 100644 --- a/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.scss +++ b/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.scss @@ -102,16 +102,21 @@ $rotate-graph: 235deg; } .mat-header-row { - + position: -webkit-sticky; + position: sticky; + top: 40px; + background-color: #FFF; @include deep-height(30px); border-bottom: $noc-primary-color-light solid 1px; - + z-index: 10; } .mat-cell { min-width: 0; display: flex; align-items: center; + padding-top: 6px; + padding-bottom: 6px; } .mat-column-id { @@ -124,6 +129,7 @@ $rotate-graph: 235deg; .noc-title { font-size: 12px; + padding-left: 10px; } .noc-model-state { diff --git a/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.ts b/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.ts index ecb2890..199f501 100644 --- a/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.ts +++ b/src/app/main/apps/noctua-search/cams/cams-table/cams-table.component.ts @@ -17,7 +17,6 @@ import { } from 'noctua-form-base'; import { Cam } from 'noctua-form-base'; -import { SearchService } from 'app/main/apps/noctua-search/services/search.service'; import { MatPaginator } from '@angular/material'; import { CamPage } from '@noctua.search/models/cam-page'; @@ -55,7 +54,6 @@ export class CamsTableComponent implements OnInit, OnDestroy { constructor( public noctuaFormConfigService: NoctuaFormConfigService, public noctuaSearchService: NoctuaSearchService, - public searchService: SearchService, public sparqlService: SparqlService) { this._unsubscribeAll = new Subject(); @@ -87,7 +85,7 @@ export class CamsTableComponent implements OnInit, OnDestroy { } toggleLeftDrawer(panel) { - this.searchService.toggleLeftDrawer(panel); + this.noctuaSearchService.toggleLeftDrawer(panel); } search() { diff --git a/src/app/main/apps/noctua-search/noctua-search.component.html b/src/app/main/apps/noctua-search/noctua-search.component.html index 0be2295..2b107a8 100644 --- a/src/app/main/apps/noctua-search/noctua-search.component.html +++ b/src/app/main/apps/noctua-search/noctua-search.component.html @@ -1,101 +1,134 @@
-
- - - - - - - +
+
+ + + + + Noctua Form + + + Graph Editor + + +
+
+
+ + + + + + +
- -
-

- Welcome to Noctua -

- Noctua is a web-based tool for collaborative editing of models of biological processes. - - You must Login to create or edit models. Models may be viewed without login. + +
+ school +

+ WELCOME TO NOCTUA +

+

+ Noctua is a web-based, collaborative Gene Ontology (GO) annotation tool developed by the GO Consortium. + It can be used to create standard GO annotations as well as more expressive models of biological processes, + known as GO-CAMs (Gene Ontology Causal Activity Models). There are two types of user interface available in + Noctua: 1) + a form interface and 2) a graph interface. +

You must Login to create or edit models. Models may be viewed without login.
-
+ + list + Results: ({{camPage?.total}}) + + Filtered By: GPs: ({{ noctuaSearchService.searchCriteria.gps.length}}) cancel GO Terms: ({{ noctuaSearchService.searchCriteria.goterms.length}}) cancel Contributors: ({{ noctuaSearchService.searchCriteria.contributors.length}}) cancel Groups: ({{ noctuaSearchService.searchCriteria.groups.length}}) cancel Species: ({{ noctuaSearchService.searchCriteria.organisms.length}}) cancel PMIDs: ({{ noctuaSearchService.searchCriteria.pmids.length}}) cancel Model State: ({{ noctuaSearchService.searchCriteria.states.length}}) cancel @@ -111,9 +144,12 @@

-
+
+
+ +
diff --git a/src/app/main/apps/noctua-search/noctua-search.component.scss b/src/app/main/apps/noctua-search/noctua-search.component.scss index 18d9872..483351a 100644 --- a/src/app/main/apps/noctua-search/noctua-search.component.scss +++ b/src/app/main/apps/noctua-search/noctua-search.component.scss @@ -5,6 +5,61 @@ padding: 10px; } +.header { + position: relative; + background: #1A237E; + background: linear-gradient(to right, #0E2A3B 0%, #34306B 100%); + flex: 1 0 auto; + height: 280px; + max-height: 280px; + text-align: center; + overflow: hidden; + + @include media-breakpoint('xs') { + height: 240px; + padding: 16px; + } + + + + .hero-icon { + position: absolute; + top: -64px; + left: 0px; + opacity: 0.04; + font-size: 512px !important; + width: 512px !important; + height: 512px !important; + } + + h1 { + font-size: 40px; + font-weight: 300; + letter-spacing: 0.01em; + text-align: center; + margin-top: 0; + margin-bottom: 16px; + color: white; + + @include media-breakpoint('xs') { + font-size: 24px; + } + } + + h3 { + max-width: 80%; + text-align: center; + font-weight: 300; + letter-spacing: 0.03em; + margin: 0; + color: rgba(#ffffff, 0.9); + + @include media-breakpoint('xs') { + font-size: 14px; + } + } +} + .noc-left-drawer { @include deep-height(100%); @include deep-width(300px); @@ -43,7 +98,14 @@ $rotate-relation: 155deg; background-color: #E2E2E2; } + .noc-create { + padding: 8px; + } + .noc-summary-bar { + position: -webkit-sticky; + position: sticky; + top: 0; margin-bottom: 4px; padding: 0 10px; @include deep-height(40px); @@ -51,6 +113,7 @@ $rotate-relation: 155deg; background-color: #FFF; font-size: 16px; overflow: hidden; + z-index: 10; @include mat-elevation(2); @@ -86,6 +149,11 @@ $rotate-relation: 155deg; } } + + .noc-table-container { + min-height: 500px; + } + .noc-sidemenu { padding: 0; margin-right: 5px; diff --git a/src/app/main/apps/noctua-search/noctua-search.component.ts b/src/app/main/apps/noctua-search/noctua-search.component.ts index ff56fe9..c45c01c 100644 --- a/src/app/main/apps/noctua-search/noctua-search.component.ts +++ b/src/app/main/apps/noctua-search/noctua-search.component.ts @@ -8,7 +8,6 @@ import { Contributor, NoctuaUserService, NoctuaFormConfigService, - NoctuaGraphService, NoctuaAnnotonFormService } from 'noctua-form-base'; @@ -16,7 +15,7 @@ import { FormGroup } from '@angular/forms'; import { NoctuaSearchService } from '@noctua.search/services/noctua-search.service'; import { SparqlService } from '@noctua.sparql/services/sparql/sparql.service'; import { takeUntil } from 'rxjs/operators'; -import { SearchService } from '../noctua-search/services/search.service'; +import { CamPage } from '@noctua.search/models/cam-page'; @Component({ selector: 'noc-noctua-search', @@ -33,6 +32,7 @@ export class NoctuaSearchComponent implements OnInit, OnDestroy { @ViewChild('rightDrawer', { static: true }) rightDrawer: MatDrawer; + camPage: CamPage; public cam: Cam; public user: Contributor; @@ -56,11 +56,8 @@ export class NoctuaSearchComponent implements OnInit, OnDestroy { constructor(private route: ActivatedRoute, public noctuaUserService: NoctuaUserService, - public noctuaFormConfigService: NoctuaFormConfigService, - public noctuaAnnotonFormService: NoctuaAnnotonFormService, public noctuaSearchService: NoctuaSearchService, private sparqlService: SparqlService, - public searchService: SearchService, ) { this._unsubscribeAll = new Subject(); @@ -73,6 +70,15 @@ export class NoctuaSearchComponent implements OnInit, OnDestroy { this.getUserInfo(); this.loadCams(); }); + + this.noctuaSearchService.onCamsPageChanged + .pipe(takeUntil(this._unsubscribeAll)) + .subscribe((camPage: CamPage) => { + if (!camPage) { + return; + } + this.camPage = camPage; + }); } getUserInfo() { @@ -92,48 +98,47 @@ export class NoctuaSearchComponent implements OnInit, OnDestroy { } ngOnInit(): void { - this.searchService.setLeftDrawer(this.leftDrawer); - this.searchService.setRightDrawer(this.rightDrawer); + this.noctuaSearchService.setLeftDrawer(this.leftDrawer); + this.noctuaSearchService.setRightDrawer(this.rightDrawer); this.rightDrawer.open(); this.sparqlService.getAllContributors() .pipe(takeUntil(this._unsubscribeAll)) .subscribe((response: any) => { - this.searchService.contributors = response; - this.searchService.onContributorsChanged.next(response); + this.noctuaSearchService.contributors = response; + this.noctuaSearchService.onContributorsChanged.next(response); this.noctuaSearchService.updateSearch(); }); this.sparqlService.getAllGroups() .pipe(takeUntil(this._unsubscribeAll)) .subscribe((response: any) => { - this.searchService.groups = response; - this.searchService.onGroupsChanged.next(response); + this.noctuaSearchService.groups = response; + this.noctuaSearchService.onGroupsChanged.next(response); }); this.sparqlService.getAllOrganisms() .pipe(takeUntil(this._unsubscribeAll)) .subscribe((response: any) => { - this.searchService.organisms = response; - this.searchService.onOrganismsChanged.next(response); + this.noctuaSearchService.organisms = response; + this.noctuaSearchService.onOrganismsChanged.next(response); }); this.noctuaSearchService.onCamsChanged .pipe(takeUntil(this._unsubscribeAll)) .subscribe(cams => { this.cams = cams; - this.summary.detail = this.sparqlService.searchSummary; this.loadCams(); }); - this.searchService.onContributorsChanged + this.noctuaSearchService.onContributorsChanged .pipe(takeUntil(this._unsubscribeAll)) .subscribe(contributors => { this.noctuaUserService.contributors = contributors; }); - this.searchService.onGroupsChanged + this.noctuaSearchService.onGroupsChanged .pipe(takeUntil(this._unsubscribeAll)) .subscribe(groups => { this.noctuaUserService.groups = groups; @@ -142,7 +147,7 @@ export class NoctuaSearchComponent implements OnInit, OnDestroy { } toggleLeftDrawer(panel) { - this.searchService.toggleLeftDrawer(panel); + this.noctuaSearchService.toggleLeftDrawer(panel); } search() { diff --git a/src/app/main/apps/noctua-search/noctua-search.module.ts b/src/app/main/apps/noctua-search/noctua-search.module.ts index 72539dd..8f7a1ae 100644 --- a/src/app/main/apps/noctua-search/noctua-search.module.ts +++ b/src/app/main/apps/noctua-search/noctua-search.module.ts @@ -7,6 +7,7 @@ import { CamsTableComponent } from './cams/cams-table/cams-table.component'; import { NoctuaSearchComponent } from './noctua-search.component'; import { ScrollingModule } from '@angular/cdk/scrolling'; import { NoctuaSearchBaseModule } from '@noctua.search'; +import { NoctuaFooterModule } from 'app/layout/components/footer/footer.module'; const routes = [ { @@ -23,6 +24,7 @@ const routes = [ RouterModule.forChild(routes), ContextMenuModule.forRoot(), NoctuaSearchBaseModule, + NoctuaFooterModule ], declarations: [ NoctuaSearchComponent, diff --git a/src/app/main/apps/noctua-search/services/search.service.ts b/src/app/main/apps/noctua-search/services/search.service.ts deleted file mode 100644 index d736f9e..0000000 --- a/src/app/main/apps/noctua-search/services/search.service.ts +++ /dev/null @@ -1,112 +0,0 @@ -import { Injectable } from '@angular/core'; -import { MatDrawer } from '@angular/material'; -import { BehaviorSubject } from 'rxjs'; -import { Organism } from 'noctua-form-base'; -import { NoctuaFormConfigService } from 'noctua-form-base'; -import { Contributor } from 'noctua-form-base'; -import { Group } from 'noctua-form-base'; -import { groupBy } from 'lodash'; -@Injectable({ - providedIn: 'root' -}) -export class SearchService { - - leftPanel = { - search: { - id: 1 - }, filter: { - id: 2 - }, relation: { - id: 3 - }, group: { - id: 4 - }, contributor: { - id: 5 - }, species: { - id: 6 - }, - history: { - id: 7 - } - }; - - selectedLeftPanel; - - onContributorsChanged: BehaviorSubject; - onGroupsChanged: BehaviorSubject; - onOrganismsChanged: BehaviorSubject; - - contributors: Contributor[] = []; - groups: Group[] = []; - organisms: Organism[] = []; - states: any[] = []; - - private leftDrawer: MatDrawer; - private rightDrawer: MatDrawer; - - constructor(private noctuaFormConfigService: NoctuaFormConfigService) { - this.onContributorsChanged = new BehaviorSubject([]); - this.onGroupsChanged = new BehaviorSubject([]); - this.onOrganismsChanged = new BehaviorSubject([]); - - this.selectedLeftPanel = this.leftPanel.filter; - this.states = this.noctuaFormConfigService.modelState.options; - } - - selectLeftPanel(panel) { - this.selectedLeftPanel = panel; - } - - public setLeftDrawer(leftDrawer: MatDrawer) { - this.leftDrawer = leftDrawer; - } - - public openLeftDrawer() { - return this.leftDrawer.open(); - } - - public closeLeftDrawer() { - return this.leftDrawer.close(); - } - - public toggleLeftDrawer(panel) { - if (this.selectedLeftPanel.id === panel.id) { - this.leftDrawer.toggle(); - } else { - this.selectLeftPanel(panel) - return this.openLeftDrawer(); - } - } - - public setRightDrawer(rightDrawer: MatDrawer) { - this.rightDrawer = rightDrawer; - } - - public openRightDrawer() { - return this.rightDrawer.open(); - } - - public closeRightDrawer() { - return this.rightDrawer.close(); - } - - public groupContributors() { - return groupBy(this.contributors, function (contributor) { - return contributor.group; - }); - - } - - public filterOrganisms(value: string): any[] { - const filterValue = value.toLowerCase(); - - return this.organisms.filter(organism => organism.taxonName.toLowerCase().indexOf(filterValue) === 0); - } - - public filterStates(value: string): any[] { - const filterValue = value.toLowerCase(); - - return this.states.filter(state => state.name.toLowerCase().indexOf(filterValue) === 0); - } - -} diff --git a/src/assets/images/logos/go-logo.svg b/src/assets/images/logos/go-logo.svg new file mode 100644 index 0000000..07587e4 --- /dev/null +++ b/src/assets/images/logos/go-logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.html b/src/index.html index f832a82..f632485 100644 --- a/src/index.html +++ b/src/index.html @@ -3,11 +3,11 @@ - Noctua Form + Noctua Landing - + diff --git a/src/inject.tmpl b/src/inject.tmpl index ad9d837..eb4be8e 100644 --- a/src/inject.tmpl +++ b/src/inject.tmpl @@ -3,11 +3,11 @@ - Noctua Search - + Noctua Landing + - +