added species demo. removed the redundant search service and put in m…

…ain #2
geneontology · Mar 22, 2020 · 2488e90 · 2488e90
1 parent ffb167b
commit 2488e90
Show file tree

Hide file tree

Showing 18 changed files with 237 additions and 196 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -1,11 +1,27 @@
-<div>
-  <div>
-    <span class="legal">
-      <a [routerLink]="['/about']" routerLinkActive="active">About</a> &nbsp;&nbsp;|&nbsp;&nbsp;
-      <a [routerLink]="['/release-info']" routerLinkActive="active">Release Information</a> &nbsp;&nbsp;|&nbsp;&nbsp;
-      <a [routerLink]="['/contact-us']" routerLinkActive="active">Contact Us</a> &nbsp;&nbsp;|&nbsp;&nbsp;
-      <a [routerLink]="['/privacy-policy']" routerLinkActive="active">Privacy Policy</a> &nbsp;&nbsp;|&nbsp;&nbsp;
-      <a [routerLink]="['/disclaimer']" routerLinkActive="active">Disclaimer</a>
-      <br> &copy;&nbsp;Copyright&nbsp;2018&nbsp;Paul Thomas&nbsp;All&nbsp;Rights&nbsp;Reserved.</span>
+<div class="footer" fxLayout="row" fxLayoutAlign="start start">
+  <div class="" style="padding-left: 0px;" fxLayout="row" fxLayoutAlign="start start" fxFlex="50%">
+    <div class="mr-16">
+      <a href="/" class="" style="color: white !important;">Home</a>
+    </div>
+    <div class="mr-16">
+      <a href="http://help.geneontology.org" class="" style="color: white !important;" target="blank">Contact us</a>
+    </div>
+    <div class="mr-16">
+      <a href="/docs/go-citation-policy/" class="" style="color: white !important;">Citation and Terms of Use</a>
+    </div>
+  </div>
+  <span fxFlex=""></span>
+  <div class="" style="text-align: right;" fxFlex="40%">
+    <small class="">
+      Copyright © 1999-2020
+      Member of the
+      <a href=" http://www.obofoundry.org/" class="footer__link" rel="external" title="Open Biological Ontologies"
+        target="blank">Open Biological Ontologies Foundry</a>
+      The Gene Ontology Consortium is supported by a P41 grant from the National Human Genome Research Institute
+      (NHGRI) [grant
+      <a href="https://projectreporter.nih.gov/project_info_details.cfm?aid=9209989" rel="external"
+        title="National Human Genome Research Institute grant 2U41HG002273-17" class="footer__link" target="blank">
+        U41 HG002273</a>]
+    </small>
   </div>
 </div>
diff --git 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
@@ -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
@@ -2,8 +2,7 @@
   <mat-progress-spinner class="example-margin" [color]="loadingSpinner.color" [mode]="loadingSpinner.mode">
   </mat-progress-spinner>
 </div>
-<div class="noc-cams-table" class="noc-drawer-body" fxLayout="column" fxLayoutAlign="start stretch"
-  noctuaPerfectScrollbar>
+<div class="noc-cams-table noc-drawer-body" fxLayout="column" fxLayoutAlign="start stretch">
   <table fxFlex="1 1 auto" mat-table class="" [dataSource]="cams" [@animateStagger]="{value:'50'}">
     <ng-container matColumnDef="title">
       <th mat-header-cell *matHeaderCellDef fxFlex="250px" fxLayout="row" fxLayoutAlign="start center">

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
@@ -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
@@ -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
@@ -1,101 +1,134 @@
 <div class="w-100-p h-100-p" fxLayout="row" fxLayoutAlign="start start">
   <div class="noc-sidemenu" fxLayout="column" fxLayoutAlign="start center">
     <button mat-icon-button color="primary" class="noc-rounded-button"
-      (click)="toggleLeftDrawer(searchService.leftPanel.filter)" matTooltip="Filter" [matTooltipPosition]="'after'"
-      [matTooltipShowDelay]="1500">
+      (click)="toggleLeftDrawer(noctuaSearchService.leftPanel.filter)" matTooltip="Filter"
+      [matTooltipPosition]="'after'" [matTooltipShowDelay]="1500">
       <mat-icon> search </mat-icon>
     </button>
     <button mat-icon-button color="primary" class="noc-rounded-button" (click)="
-      toggleLeftDrawer(searchService.leftPanel.group)" matTooltip="Browse by group" [matTooltipPosition]="'after'"
-      [matTooltipShowDelay]="1000">
+      toggleLeftDrawer(noctuaSearchService.leftPanel.group)" matTooltip="Browse by group"
+      [matTooltipPosition]="'after'" [matTooltipShowDelay]="1000">
       <mat-icon> people_outline </mat-icon>
     </button>
     <button mat-icon-button color="primary" class="noc-rounded-button" (click)="
-      toggleLeftDrawer(searchService.leftPanel.contributor)" matTooltip="Browse by contributor"
+      toggleLeftDrawer(noctuaSearchService.leftPanel.contributor)" matTooltip="Browse by contributor"
       [matTooltipPosition]="'after'" [matTooltipShowDelay]="1000">
       <mat-icon>person_outline</mat-icon>
     </button>
     <button mat-icon-button color="primary" class="noc-rounded-button" (click)="
-      toggleLeftDrawer(searchService.leftPanel.species)" matTooltip="Search by species" [matTooltipPosition]="'after'"
-      [matTooltipShowDelay]="1000">
+      toggleLeftDrawer(noctuaSearchService.leftPanel.species)" matTooltip="Search by species"
+      [matTooltipPosition]="'after'" [matTooltipShowDelay]="1000">
       <mat-icon> pets </mat-icon>
     </button>
     <button mat-icon-button color="primary" class="noc-rounded-button"
-      (click)="toggleLeftDrawer(searchService.leftPanel.relation)" matTooltip="Relation Search"
+      (click)="toggleLeftDrawer(noctuaSearchService.leftPanel.relation)" matTooltip="Relation Search"
       [matTooltipPosition]="'after'" [matTooltipShowDelay]="1500">
       <mat-icon class="icon-rotate-relation"> linear_scale </mat-icon>
     </button>
     <button mat-icon-button color="primary" class="noc-rounded-button"
-      (click)="toggleLeftDrawer(searchService.leftPanel.history)" matTooltip="History" [matTooltipPosition]="'after'"
-      [matTooltipShowDelay]="1500">
+      (click)="toggleLeftDrawer(noctuaSearchService.leftPanel.history)" matTooltip="History"
+      [matTooltipPosition]="'after'" [matTooltipShowDelay]="1500">
       <mat-icon> history </mat-icon>
     </button>
   </div>
   <mat-drawer-container class="w-100-p h-100-p" fxLayout="row" fxLayoutAlign="start start" autosize>
     <mat-drawer #leftDrawer class="noc-left-drawer" mode="side" position="start" opened>
-      <div [ngSwitch]="searchService.selectedLeftPanel?.id" class="h-100-p">
-        <noc-search-form *ngSwitchCase="searchService.leftPanel.search.id"></noc-search-form>
-        <noc-search-filter *ngSwitchCase="searchService.leftPanel.filter.id"></noc-search-filter>
-        <noc-search-relation *ngSwitchCase="searchService.leftPanel.relation.id"></noc-search-relation>
-        <noc-search-groups *ngSwitchCase="searchService.leftPanel.group.id"></noc-search-groups>
-        <noc-search-contributors *ngSwitchCase="searchService.leftPanel.contributor.id"></noc-search-contributors>
-        <noc-search-organisms *ngSwitchCase="searchService.leftPanel.species.id"></noc-search-organisms>
-        <noc-search-history *ngSwitchCase="searchService.leftPanel.history.id"></noc-search-history>
+      <div class="noc-create" fxLayout="column" fxLayoutAlign="start center">
+        <div class="" fxLayout="row" fxLayoutAlign="center center">
+          <button mat-flat-button (click)="openAnnotonForm(AnnotonType.default)" color="primary"
+            class="noc-rounded-button noc-half-button noc-sm noc-r">
+            <mat-icon class=""> add </mat-icon> Create New Model
+          </button>
+          <button mat-flat-button fxFlex="35px" [matMenuTriggerFor]="createOptions" color="primary"
+            class="noc-rounded-button noc-half-button noc-sm noc-l mr-8 p-0">
+            <mat-icon class="">arrow_drop_down </mat-icon>
+          </button>
+          <mat-menu #createOptions="matMenu" xPosition="before">
+            <a mat-menu-item>
+              Noctua Form
+            </a>
+            <a mat-menu-item>
+              Graph Editor
+            </a>
+          </mat-menu>
+        </div>
+      </div>
+      <div [ngSwitch]="noctuaSearchService.selectedLeftPanel?.id" class="h-100-p">
+        <noc-search-form *ngSwitchCase="noctuaSearchService.leftPanel.search.id"></noc-search-form>
+        <noc-search-filter *ngSwitchCase="noctuaSearchService.leftPanel.filter.id"></noc-search-filter>
+        <noc-search-relation *ngSwitchCase="noctuaSearchService.leftPanel.relation.id"></noc-search-relation>
+        <noc-search-groups *ngSwitchCase="noctuaSearchService.leftPanel.group.id"></noc-search-groups>
+        <noc-search-contributors *ngSwitchCase="noctuaSearchService.leftPanel.contributor.id"></noc-search-contributors>
+        <noc-search-organisms *ngSwitchCase="noctuaSearchService.leftPanel.species.id"></noc-search-organisms>
+        <noc-search-history *ngSwitchCase="noctuaSearchService.leftPanel.history.id"></noc-search-history>
       </div>
     </mat-drawer>
-    <mat-drawer-content class="noc-section-body w-100-p h-100-p" fxLayout="column" fxLayoutAlign="start stretch">
-      <div class="noc-welcome" fxLayout="column" fxLayoutAlign="start center">
-        <h2>
-          Welcome to Noctua
-        </h2>
-        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.
+    <mat-drawer-content class="noc-section-body w-100-p h-100-p" noctuaPerfectScrollbar>
+      <div class="header accent p-8 w-100-p" fxLayout="column" fxLayoutAlign="center center">
+        <mat-icon class="hero-icon">school</mat-icon>
+        <h1 [@animate]="{value:'*',params:{delay:'100ms', y:'25px'}}">
+          WELCOME TO NOCTUA
+        </h1>
+        <h3 [@animate]="{value:'*',params:{delay:'100ms', y:'25px'}}">
+          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.
+        </h3> You must Login to create or edit models. Models may be viewed without login.
       </div>
-
       <div class="noc-summary-bar" [ngClass]="{'noc-expanded': summary.expanded}" fxLayout="column"
         fxLayoutAlign="start stretch">
         <div class="noc-cams-table-header w-100-p" fxLayout="row" fxLayoutAlign="start center">
+          <mat-chip class="mr-12" (click)="refresh()">
+            <mat-icon>list</mat-icon>
+            <small>Results: </small> ({{camPage?.total}})
+            <button mat-icon-button (click)="refresh()" class="">
+              <mat-icon class="">
+                refresh
+              </mat-icon>
+            </button>
+          </mat-chip>
           <small class="mr-12">Filtered By: </small>
           <mat-chip-list>
             <mat-chip *ngIf="noctuaSearchService.searchCriteria.gps.length>0"
-              (click)="toggleLeftDrawer(searchService.leftPanel.filter)" [removable]="true"
+              (click)="toggleLeftDrawer(noctuaSearchService.leftPanel.filter)" [removable]="true"
               (removed)="noctuaSearchService.removeFilterType(noctuaSearchService.filterType.gps)">
               <small>GPs: </small> ({{ noctuaSearchService.searchCriteria.gps.length}})
               <mat-icon matChipRemove>cancel</mat-icon>
             </mat-chip>
             <mat-chip *ngIf="noctuaSearchService.searchCriteria.goterms.length>0"
-              (click)="toggleLeftDrawer(searchService.leftPanel.filter)" [removable]="true"
+              (click)="toggleLeftDrawer(noctuaSearchService.leftPanel.filter)" [removable]="true"
               (removed)="noctuaSearchService.removeFilterType(noctuaSearchService.filterType.goterms)">
               <small>GO Terms: </small> ({{ noctuaSearchService.searchCriteria.goterms.length}})
               <mat-icon matChipRemove>cancel</mat-icon>
             </mat-chip>
             <mat-chip *ngIf="noctuaSearchService.searchCriteria.contributors.length>0"
-              (click)="toggleLeftDrawer(searchService.leftPanel.filter)" [removable]="true"
+              (click)="toggleLeftDrawer(noctuaSearchService.leftPanel.filter)" [removable]="true"
               (removed)="noctuaSearchService.removeFilterType(noctuaSearchService.filterType.contributors)">
               <small>Contributors: </small> ({{ noctuaSearchService.searchCriteria.contributors.length}})
               <mat-icon matChipRemove>cancel</mat-icon>
             </mat-chip>
             <mat-chip *ngIf="noctuaSearchService.searchCriteria.groups.length>0"
-              (click)="toggleLeftDrawer(searchService.leftPanel.filter)" [removable]="true"
+              (click)="toggleLeftDrawer(noctuaSearchService.leftPanel.filter)" [removable]="true"
               (removed)="noctuaSearchService.removeFilterType(noctuaSearchService.filterType.groups)">
               <small>Groups: </small> ({{ noctuaSearchService.searchCriteria.groups.length}})
               <mat-icon matChipRemove>cancel</mat-icon>
             </mat-chip>
             <mat-chip *ngIf="noctuaSearchService.searchCriteria.organisms.length>0"
-              (click)="toggleLeftDrawer(searchService.leftPanel.filter)" [removable]="true"
+              (click)="toggleLeftDrawer(noctuaSearchService.leftPanel.filter)" [removable]="true"
               (removed)="noctuaSearchService.removeFilterType(noctuaSearchService.filterType.organisms)">
               <small>Species: </small> ({{ noctuaSearchService.searchCriteria.organisms.length}})
               <mat-icon matChipRemove>cancel</mat-icon>
             </mat-chip>
             <mat-chip *ngIf="noctuaSearchService.searchCriteria.pmids.length>0"
-              (click)="toggleLeftDrawer(searchService.leftPanel.filter)" [removable]="true"
+              (click)="toggleLeftDrawer(noctuaSearchService.leftPanel.filter)" [removable]="true"
               (removed)="noctuaSearchService.removeFilterType(noctuaSearchService.filterType.pmids)">
               <small>PMIDs: </small> ({{ noctuaSearchService.searchCriteria.pmids.length}})
               <mat-icon matChipRemove>cancel</mat-icon>
             </mat-chip>
             <mat-chip *ngIf="noctuaSearchService.searchCriteria.states.length>0"
-              (click)="toggleLeftDrawer(searchService.leftPanel.filter)" [removable]="true"
+              (click)="toggleLeftDrawer(noctuaSearchService.leftPanel.filter)" [removable]="true"
               (removed)="noctuaSearchService.removeFilterType(noctuaSearchService.filterType.states)">
               <small>Model State: </small> ({{ noctuaSearchService.searchCriteria.states.length}})
               <mat-icon matChipRemove>cancel</mat-icon>
@@ -111,9 +144,12 @@ <h2>
           </div>
         </div>
       </div>
-      <div class="w-100-p" fxFlex noctuaPerfectScrollbar>
+      <div class="noc-table-container w-100-p">
         <noc-cams-table></noc-cams-table>
       </div>
+      <div class="w-100-p">
+        <app-footer></app-footer>
+      </div>
     </mat-drawer-content>
     <mat-drawer #rightDrawer class="noc-right-drawer" noctuaPerfectScrollbar mode="side" position="end">
       <div [ngSwitch]="noctuaSearchService.selectedRightPanel?.id" class="h-100-p">
-Original file line number
+Diff line change
@@ Expand Up @@
       }
       ngOnInit(): void {
+        console.log(this.noctuaSearchService.organisms)
       }
       selectOrganism(organism) {
@@ Expand Down @@