analysis fullscreen

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

 <div *ngIf="token">
-  <div class="card analysis">
+  <div class="card analysis" [ngClass]="{'fullscreen': fullscreen}">
     <header class="card-header">
       <p class="card-header-title">
         <span class="icon">
@@ -12,17 +12,50 @@
         (click)="analysis.removeTask(token); close()"
         class="card-header-icon"
         aria-label="delete"
+        pTooltip="Delete analysis"
+        [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
+        tooltipPosition="left"
       >
         <span class="icon has-text-danger" title="Delete analysis">
           <i class="fas fa-trash" aria-hidden="true"></i>
         </span>
       </a>
 
-      <a (click)="close()" class="card-header-icon" aria-label="close">
+      <a
+        (click)="close()"
+        class="card-header-icon"
+        aria-label="close"
+        pTooltip="Close analysis"
+        [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
+        tooltipPosition="left"
+      >
         <span class="icon" title="Close analysis">
           <i class="fas fa-times color-danger" aria-hidden="true"></i>
         </span>
       </a>
+
+      <a
+        pTooltip="Open in fullscreen"
+        [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
+        tooltipPosition="left"
+        *ngIf="!fullscreen"
+        (click)="toggleFullscreen()"
+        class="card-header-icon"
+      >
+        <span class="icon is-small">
+          <i class="fas fa-expand"></i>
+        </span>
+      </a>
+      <a
+        title="close fullscreen"
+        *ngIf="fullscreen"
+        (click)="toggleFullscreen()"
+        class="card-header-icon"
+      >
+        <span class="icon is-small">
+          <i class="fas fa-compress"></i>
+        </span>
+      </a>
     </header>
     <div
       class="card-content tab-header-small"
@@ -49,13 +82,17 @@
         <div *ngIf="task">
           <div class="columns m-1">
             <div class="column content">
-              <h4
-                class="is-4 has-text-weight-bold"
-              >
+              <h4 class="is-4 has-text-weight-bold">
                 <span class="icon">
                   <i class="fas fa-wrench" aria-hidden="true"></i>
                 </span>
-                {{(['quick', 'super', 'connect', 'connectSelected'].indexOf(task.info.algorithm) === -1) ? 'Algorithm:' : 'Method:' }}
+                {{
+                  ["quick", "super", "connect", "connectSelected"].indexOf(
+                    task.info.algorithm
+                  ) === -1
+                    ? "Algorithm:"
+                    : "Method:"
+                }}
                 {{ algorithmNames[task.info.algorithm] }}
               </h4>
             </div>
@@ -167,8 +204,13 @@
               </table>
             </div>
           </div>
-          <div class="columns m-1"
-               *ngIf="['quick','super','connect','connectSelected'].indexOf(task.info.algorithm) > -1"
+          <div
+            class="columns m-1"
+            *ngIf="
+              ['quick', 'super', 'connect', 'connectSelected'].indexOf(
+                task.info.algorithm
+              ) > -1
+            "
           >
             <div class="column">
               <h4 class="is-4 has-text-weight-bold">
@@ -196,7 +238,10 @@
               </table>
             </div>
           </div>
-          <div class="columns m-1" *ngIf="['quick','super'].indexOf(task.info.algorithm) > -1">
+          <div
+            class="columns m-1"
+            *ngIf="['quick', 'super'].indexOf(task.info.algorithm) > -1"
+          >
             <div class="column">
               <h4 class="is-4 has-text-weight-bold">
                 <span class="icon">
@@ -236,10 +281,7 @@
 
       <div class="tab-content" [class.is-visible]="tab === 'network'">
         <!-- network start -->
-        <app-network
-          networkType="analysis"
-          [nodeData]="nodeData"
-        ></app-network>
+        <app-network networkType="analysis" [nodeData]="nodeData"></app-network>
         <!-- network end -->
       </div>
       <div

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

@@ -6,6 +6,15 @@
   width: 100% !important;
 }
 
+.fullscreen{
+  position: fixed !important;
+  height: 100vh !important;
+  width: 100vw !important;
+  top: 0 !important;
+  left: 0 !important;
+  z-index: $fullscreen-z;
+}
+
 .tab-header-small {
   padding: 0 !important;
 }

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

@@ -80,6 +80,8 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
   public result: any = null;
   public myConfig: IConfig = JSON.parse(JSON.stringify(defaultConfig));
 
+  public fullscreen = false;
+
   public network: any;
   public nodeData: { nodes: any, edges: any } = {nodes: null, edges: null};
   // private drugNodes: any[] = [];
@@ -505,4 +507,9 @@ export class AnalysisPanelComponent implements OnInit, OnChanges, AfterViewInit
     this.analysis.addItems(addItems);
     this.analysis.removeItems(removeItems);
   }
+
+  public toggleFullscreen() {
+    this.fullscreen = !this.fullscreen;
+    console.log('this.fullscreen', this.fullscreen)
+  }
 }

src/app/config.ts

@@ -163,7 +163,7 @@ export const defaultConfig: IConfig = {
   networkMenuButtonAnimationLabel: 'Animation',
   identifier: 'symbol',
   selfReferences: false,
-  customEdges: {default: true, selectable: false},
+  customEdges: {default: true, selectable: true},
   interactionDrugProtein: 'NeDRex',
   interactionProteinProtein: 'NeDRex',
   indicationDrugDisorder: 'NeDRex',

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

@@ -466,7 +466,7 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
    * @param key
    * @param values
    */
-  public setConfigNodeGroup(key: string, nodeGroups: { [key: string]: NodeGroup }) {
+  public setConfigNodeGroup(key: string, nodeGroups: { [key: string]: NodeGroup } | {}) {
     // make sure that return-groups (seeds, drugs, found nodes) are set
     const defaultNodeGroups = JSON.parse(JSON.stringify(defaultConfig.nodeGroups));
     // user merge function to do deep merge

src/stylesheets/styles.scss

@@ -255,3 +255,5 @@
   padding: 0.5rem 1rem;
   line-height: 24px;
 }
+
+