merged

src/app/components/analysis-panel/analysis-panel.component.ts

@@ -79,7 +79,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
   public myConfig: IConfig = JSON.parse(JSON.stringify(defaultConfig));
 
 
-  private network: any;
+  public network: any;
   private nodeData: { nodes: any, edges: any } = {nodes: null, edges: null};
   private drugNodes: any[] = [];
   private drugEdges: any[] = [];

src/app/components/query-tile/query-tile.component.html

 <div class="content">
-  <ng-select [items]="queryItems" bindLabel="label" bindValue="data" [virtualScroll]="true" class="custom"
-             placeholder="Search..." [hideSelected]="true" [searchFn]="querySearch" (change)="select($event)" pTooltip="Find nodes in the network." tooltipStyleClass="drgstn" tooltipPosition="top">
+  <ng-select [items]="queryItems" bindLabel="data.label" bindValue="data.label" [virtualScroll]="true" class="custom"
+             placeholder="Search..." [hideSelected]="true" [searchFn]="querySearch" (change)="select($event)" pTooltip="Find nodes in the network." tooltipStyleClass="drgstn"  tooltipPosition="top">
     <ng-template ng-option-tmp let-item="item">
-      <p>{{item.data.label}}</p>
+      <span>{{item.data.label}}</span>
     </ng-template>
   </ng-select>
 </div>

src/app/components/query-tile/query-tile.component.ts

 import {Component, Input, Output, EventEmitter} from '@angular/core';
+import { element } from 'protractor';
 import {Node, Wrapper} from '../../interfaces';
 
 @Component({
@@ -12,16 +13,31 @@ export class QueryTileComponent {
   @Output() selectItem: EventEmitter<any> = new EventEmitter();
   @Input() queryItems: Wrapper[];
 
-  querySearch(term: string, item: Wrapper) {
-    term = term.toLowerCase();
-    const data = item.data as Node;
-    if (data.netexId === undefined) {
-      return data.label.toLowerCase().indexOf(term) > -1 || data.id.toLowerCase().indexOf(term) > -1 
-    } else {
-      data.ensg = data.ensg.map(x => x.toLowerCase())
-      return data.symbol.toLowerCase().indexOf(term) > -1 || data.uniprotAc.toLowerCase().indexOf(term) > -1 || 
-        data.label.toLowerCase().indexOf(term) > -1 || data.ensg.includes(term) || data.id.toLowerCase().indexOf(term) > -1 ;
+  private listStartsWith = (elments: any[], term) => {
+    for (const e of elments) {
+      if (e.toLowerCase().indexOf(term) > -1) {
+        return true;
+      }
     }
+    return false;
+  }
+
+  querySearch = (term: string, item: Wrapper) => {
+    term = term.toLowerCase();
+    const data = JSON.parse(JSON.stringify(item.data));
+    // add possible missing attributes to not throw errors
+    if (data.ensg === undefined) {data.ensg = []};
+    if (data.groupName === undefined) {data.groupName = ''};
+    if (data.type === undefined) {data.type = ''};
+    if (data.symbol === undefined) {data.symbol = ''};
+    if (data.proteinName === undefined) {data.proteinName = ''};
+    if (data.uniprotAc === undefined) {data.uniprotAc = ''};
+    if (data.drugId === undefined) {data.drugId = ''};
+
+    return data.symbol.toLowerCase().indexOf(term) > -1 || data.uniprotAc.toLowerCase().indexOf(term) > -1 || 
+      data.label.toLowerCase().indexOf(term) > -1 || this.listStartsWith(data.ensg, term) || data.id.toLowerCase().indexOf(term) > -1 
+      || data.proteinName.toLowerCase().indexOf(term) > -1 || data.type.toLowerCase().indexOf(term) > -1 || 
+      data.groupName.toLowerCase().indexOf(term) > -1 || data.drugId.toLowerCase().indexOf(term) > -1;
   }
 
   select(item) {

src/app/pages/explorer-page/explorer-page.component.html

@@ -100,7 +100,7 @@
               <span class="icon">
                 <i class="fas fa-search" aria-hidden="true"></i>
               </span>
-              Query Protein/Gene
+              Query Node
             </p>
             <a
               (click)="collapseQuery = !collapseQuery"

src/app/pages/explorer-page/explorer-page.component.ts

@@ -27,6 +27,7 @@ import {defaultConfig, EdgeGroup, IConfig, InteractionDatabase, NodeGroup} from
 import {NetexControllerService} from 'src/app/services/netex-controller/netex-controller.service';
 import {removeDuplicateObjectsFromList} from '../../utils'
 import * as merge from 'lodash/fp/merge';
+import { AnalysisPanelComponent } from 'src/app/components/analysis-panel/analysis-panel.component';
 
 // import * as 'vis' from 'vis-network';
 // import {DataSet} from 'vis-data';
@@ -179,6 +180,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
   @ViewChild('network', {static: false}) networkEl: ElementRef;
   @ViewChild('networkWithLegend', {static: false}) networkWithLegendEl: ElementRef;
 
+  @ViewChild(AnalysisPanelComponent, { static: false })
+  private analysisPanel: AnalysisPanelComponent;
+
   constructor(
     public omnipath: OmnipathControllerService,
     public analysis: AnalysisService,
@@ -314,8 +318,11 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
   }
 
   private zoomToNode(id: string) {
+    // get network object, depending on whether analysis is open or not
+    const network = this.selectedAnalysisToken ? this.analysisPanel.network : this.networkInternal;
+
     this.nodeData.nodes.getIds();
-    const coords = this.networkInternal.getPositions(id)[id];
+    const coords = network.getPositions(id)[id];
     if (!coords) {
       return;
     }
@@ -325,7 +332,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
     } else {
       zoomScale = 3.0;
     }
-    this.networkInternal.moveTo({
+    network.moveTo({
       position: {x: coords.x, y: coords.y},
       scale: zoomScale,
       animation: true,
@@ -398,18 +405,15 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
       this.closeSummary();
     });
 
-    // // this might be not necessary, positions get saved right before reloding network
-    // this.networkInternal.on('stabilizationIterationsDone', () => {
-    //   this.networkPositions = this.networkInternal.getPositions();
-    // });
-    // this.networkInternal.stabilize();
-
     if (this.selectedWrapper) {
       this.zoomToNode(this.selectedWrapper.id);
     }
 
+    this.currentViewNodes = this.nodeData.nodes;
+    this.currentViewEdges = this.nodeData.edges;
+
     this.queryItems = [];
-    this.fillQueryItems(this.proteins);
+    this.fillQueryItems(this.currentViewNodes);
     if (this.selectedWrapper) {
       this.networkInternal.selectNodes([this.selectedWrapper.id]);
     }
@@ -421,8 +425,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
       this.queryItems.push(getWrapperFromNode(protein));
     });
 
-    this.currentViewNodes = this.nodeData.nodes;
-    this.currentViewEdges = this.nodeData.edges;
+
     this.currentViewProteins = this.proteins;
   }
 
@@ -586,6 +589,9 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
       this.currentViewProteins = this.proteins;
       this.currentViewSelectedTissue = this.selectedTissue;
     }
+    // changes for either way (analysis open and close)
+    this.selectedWrapper = null;
+    this.fillQueryItems(this.currentViewNodes);
   }
 
   gProfilerLink(): string {

src/styles.scss

+@charset "utf-8";
+
+@import url('https://fonts.googleapis.com/css?family=Varela+Round');
+@import "~@ng-select/ng-select/themes/default.theme.css";
+@import "~bulma/bulma.sass";
+@import '~bulma-tooltip';
+@import "~animate.css/animate.min";
+@import '~primeng/resources/themes/md-dark-deeppurple/theme.css';
+@import "~primeng/resources/primeng.min.css";
+@import "~primeicons/primeicons.css";
+@import "variables";
+
+.fullheight {
+  height: 100%;
+}
+
+.canvas-content {
+  height: calc(100% - #{$network-footer-height});
+  z-index: $explorer-network-z;
+}
+
+// general network settings, some will be overwritten in analysis
+.network-footer-toolbar {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  height: $network-footer-height;
+  &-inner-container{
+    width: 100%;
+    display: inline-flex;
+    overflow-x: auto;
+    overflow-y: hidden;
+    height: $network-footer-inner-container-height;
+    position: absolute;
+    bottom: 0;
+  }
+  &-element {
+    position: relative;
+    margin-top: calc(#{$network-footer-inner-container-height} - #{$network-footer-height} + #{$network-footer-space-button-to-border});
+  }
+  .dropdown-menu{
+    z-index: $explorer-network-toolbar-dropdown-z;
+    .scroll-area{
+      height: calc(#{$network-footer-inner-container-height} - #{$network-footer-height});
+    }
+  }
+}
+
+nav.navbar {
+  height: 60px;
+}
+
+img.menu-icon.is-hoverable.navbar-item.logo {
+  height: 40px;
+  width: 125px;
+  padding: 0;
+}
+
+
+.tissue-dropdown {
+  padding: 5px;
+  background-color: rgba(255.0, 255.0, 255.0, 0.85);
+
+  .scroll-area {
+    max-height: 600px;
+    overflow-y: scroll;
+    padding-right: 5px;
+  }
+}
+
+div.navbar-menu {
+  margin-left: 5px;
+}
+
+span.icon {
+  margin-right: 5px;
+}
+
+
+.mb-3 {
+  margin-bottom: 10px;
+}
+
+
+img.inline {
+  height: 30px;
+  align: middle;
+}
+
+button.i {
+  margin-left: 5px;
+}
+
+input.checkbox {
+  margin-left: 15px;
+}
+
+div.covex.sidebar {
+  height: $height;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+div.covex.bar-left {
+  float: left;
+  width: $sidebar-left-width;
+  max-width: 300px;
+  min-width: $sidebar-left-min-width;
+  height: 100%;
+}
+
+div.covex.bar-right {
+  float: left;
+  width: $sidebar-right-width;
+  max-width: 450px;
+  min-width: $sidebar-right-min-width;
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+
+}
+
+
+div.card.bar-small {
+  margin-bottom: 15px;
+  word-wrap: break-word;
+  height: 130px;
+}
+
+div.card.bar-medium {
+  margin-bottom: 15px;
+  word-wrap: break-word;
+  height: 170px;
+}
+
+div.card.bar-large {
+  margin-bottom: 15px;
+  max-height: 600px;
+}
+
+div.card-content.overflow {
+  overflow: auto;
+  max-height: 350px;
+}
+
+div.covex.network {
+  height: 100%;
+  float: left;
+  position: relative;
+
+}
+
+.center-panel {
+  width: $main-width;
+
+  &.leftgone {
+    width: calc(#{$main-width} + max(#{$sidebar-left-width},#{$sidebar-left-min-width}));
+  }
+
+  &.rightgone {
+    width: calc(#{$main-width} + max(#{$sidebar-right-width},#{$sidebar-right-min-width}));
+  }
+
+  &.rightgone.leftgone {
+    width: calc(#{$main-width} + max(#{$sidebar-left-width},#{$sidebar-left-min-width}) + max(#{$sidebar-right-width},#{$sidebar-right-min-width}));
+  }
+}
+
+div.card.network {
+  width: 100%;
+  height: $height;
+}
+
+div.parent {
+  position: relative;
+}
+
+div.image1 {
+  position: relative;
+}
+
+div.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+div.covex.explorer {
+  height: #{$height};
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.analysis-view {
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  margin-top: 0;
+  z-index: $analysis-view-z;
+  .canvas-content {
+    z-index: $analysis-network-z;
+  }
+}
+
+div.field.has-addons.add-remove-toggle {
+  margin-top: 20px;
+}
+
+.fa-spinner {
+  color: $light-invert;
+}
+
+.footer-buttons {
+  margin-left: 20px;
+  margin-right: 10px;
+}
+
+.toolbar {
+  padding: 5px;
+  border-top: 2px solid #d0d0d0;
+
+  .field {
+    margin-bottom: 0;
+
+    .control {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.p-tooltip-text:before {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 0;
+  left: 50%;
+  bottom: +7px;
+  border: 6px solid transparent;
+  border-bottom: 0;
+  border-top: 6px solid var(--drgstn-tooltip);
+  transform: translate(-50%, calc(100% + 3px));
+}
+
+html, #appWindow {
+  height: 100%;
+}
+
+#appWindow {
+  margin: 0;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+}
+
+// classes for different screen sizes
+.text-small {
+  font-size: $text-small-font-size;
+}
+.text-normal{
+  font-size: $text-normal-font-size;
+}
+.b-text-small{
+  font-size: $b-text-small-font-size;
+}
+.b-text-smaller{
+  font-size: $b-text-smaller-font-size;
+}
+.button-small{
+  padding: $button-small-padding;
+}