bugfix: make legend again move to right

app-test/legend_image.html

@@ -41,8 +41,7 @@
   "showQuery": false,
   "legendPos": "right",
   "nodeGroups": {"default": {"color": "grey", "name": "Default Group", "shape": "triangle"} },
-  "edgeGroups":{"default": {"color": "grey", "name": "Default Edge Group"}, "custom": {"color": "red", "name": "Custom Edge Group"}},
-  "legendUrl": "https://exbio.wzw.tum.de/covex/assets/leg1.png"
+  "edgeGroups":{"default": {"color": "grey", "name": "Default Edge Group"}, "custom": {"color": "red", "name": "Custom Edge Group"}}
   }' style="height: 100vh"></network-expander>
 </div>
 

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

@@ -143,7 +143,10 @@
 
             <ng-container *ngIf="myConfig.showFooterButtonScreenshot">
               <button class="button is-primary is-rounded has-tooltip network-footer-toolbar-element footer-buttons"
-                      pTooltip="Take a screenshot of the current network." tooltipStyleClass="drgstn" tooltipPosition="top" (click)="toImage()">
+                      pTooltip="Take a screenshot of the current network." 
+                      tooltipStyleClass="drgstn" 
+                      tooltipPosition="top" 
+                      (click)="toImage()">
                   <span class="icon">
                     <i class="fas fa-camera" aria-hidden="true"></i>
                   </span>
@@ -153,15 +156,10 @@
               </button>
             </ng-container>
 
-            <ng-container *ngIf="myConfig.showFooterButtonScreenshot">
+            <ng-container *ngIf="myConfig.showFooterButtonExportGraphml">
               <button
                 (click)="graphmlLink()"
-                class="
-                  button
-                  is-success is-rounded
-                  has-tooltip
-                  network-footer-toolbar-element
-                "
+                class="button is-primary is-rounded has-tooltip network-footer-toolbar-element footer-buttons"
                 pTooltip="Export this network as .graphml file."
                 tooltipStyleClass="drgstn"
                 tooltipPosition="top"
@@ -170,7 +168,7 @@
                   <i class="fas fa-download" aria-hidden="true"></i>
                 </span>
                 <span [ngClass]="{ 'text-normal': smallStyle }"
-                >Export as .graphml</span
+                >.graphml</span
                 >
               </button>
             </ng-container>
@@ -234,13 +232,13 @@
                         [value]="highlightSeeds" (valueChange)="updateHighlightSeeds($event)"></app-toggle>
 
             <app-toggle *ngIf="task.info.target === 'drug-target'" class="footer-buttons network-footer-toolbar-element"
-                        textOn="Drugs On" textOff="Off"
+                        textOn="Drugs" textOff="Off"
                         tooltipOn="Display adjacent drugs ON."
                         tooltipOff="Display adjacent drugs OFF."
                         [smallStyle]="smallStyle"
                         [value]="adjacentDrugs" (valueChange)="updateAdjacentDrugs($event)"></app-toggle>
 
-            <app-toggle class="footer-buttons network-footer-toolbar-element" textOn="Animation On" textOff="Off"
+            <app-toggle class="footer-buttons network-footer-toolbar-element" textOn="Animation" textOff="Off"
                         tooltipOn="Enable the network animation."
                         tooltipOff="Disable the network animation and freeze nodes."
                         [smallStyle]="smallStyle"

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

@@ -70,6 +70,7 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
     for (const key of Object.keys(config)) {
       this.myConfig[key] = config[key];
     }
+    console.log(this.myConfig)
   }
   @Output() tokenChange = new EventEmitter<string | null>();
   @Output() showDetailsChange = new EventEmitter<Wrapper>();
@@ -493,7 +494,6 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
         nodeDetails.group = nodeDetails.group ? nodeDetails.group : 'default';
         nodeDetails.label = nodeDetails.label ? nodeDetails.label : nodeDetails[identifier]
       }
-      console.log(nodeDetails)
       // IMPORTANT we set seeds to "selected" and not to seeds. The user should be inspired to run 
       // further analysis and the button function can be used to highlight seeds
       // option to use scores[node] as gradient, but sccores are very small
@@ -624,7 +624,6 @@ export class AnalysisPanelComponent implements OnInit, OnChanges {
     this.tableSelectedProteins = e;
     const addItems = [];
     const removeItems = [];
-    console.log(e)
     
     for (const i of this.tableSelectedProteins) {
       const wrapper = getWrapperFromNode(i);

src/app/components/network-legend/network-legend.component.scss

@@ -4,14 +4,14 @@
 div.legend {
   position: absolute;
   bottom: 0;
-  left: 1rem;
-  bottom: 1rem;
+  margin-left: 1rem;
   z-index: $explorer-networklegend-z;
   &.right {
     right: 0;
   }
   img {
     max-width: 20vw;
+    // margin-bottom: 1rem;
   }
   td.group-name{
     color:var(--drgstn-text-primary);

src/app/dialogs/launch-analysis/launch-analysis.component.ts

@@ -112,12 +112,9 @@ export class LaunchAnalysisComponent implements OnInit, OnChanges {
       config: this.config,
       input_network: this.inputNetwork
     };
-    console.log("config")
-    console.log(this.config)
 
     parameters.ppi_dataset = this.config.interactionProteinProtein;
     parameters.pdi_dataset = this.config.interactionDrugProtein;
-    console.log(this.target)
     parameters.target = this.target === 'drug' ? 'drug' : 'drug-target';
     // pass network data to reconstruct network in analysis result to connect non-proteins to results
     // drop interactions in nodes beforehand to no cause cyclic error, information is contained in edges
@@ -176,9 +173,6 @@ export class LaunchAnalysisComponent implements OnInit, OnChanges {
       }
       parameters.hub_penalty = this.multisteinerHubPenalty;
     }
-    console.log('parameters')
-
-    console.log(parameters)
     await this.analysis.startAnalysis(this.algorithm, this.target, parameters);
   }
 

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

@@ -198,7 +198,7 @@
                     (click)="graphmlLink()"
                     class="
                       button footer-buttons
-                      is-success is-rounded
+                      is-primary is-rounded
                       has-tooltip
                       network-footer-toolbar-element
                     "
@@ -210,7 +210,7 @@
                       <i class="fas fa-download" aria-hidden="true"></i>
                     </span>
                     <span [ngClass]="{ 'text-normal': smallStyle }"
-                    >Export as .graphml</span
+                    >.graphml</span
                     >
                   </button>
                 </ng-container>
@@ -293,7 +293,7 @@
 
                 <app-toggle
                   class="footer-buttons network-footer-toolbar-element"
-                  textOn="Animation On"
+                  textOn="Animation"
                   textOff="Off"
                   tooltipOn="Enable the network animation."
                   tooltipOff="Disable the network animation and freeze nodes."

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

@@ -389,7 +389,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
           // skip if node is not a protein mapped to backend
           return;
         }
-        console.log(node)
         const wrapper = getWrapperFromNode(node);
         if (this.analysis.inSelection(node)) {
           this.analysis.removeItems([wrapper]);

src/index.html

@@ -20,6 +20,10 @@
 <input type="checkbox" onclick=changeConfigStr('{"showSelection":'+this.checked+'}') checked /> Show Selection<br>
 <input type="checkbox" onclick=changeConfigStr('{"showFooter":'+this.checked+'}') checked /> Show Footer<br>
 <input type="checkbox" onclick=changeConfigStr('{"showLegend":'+this.checked+'}') checked /> Show Legend<br>
+<input type="checkbox" onclick=changeConfigStr('{"showFooterButtonScreenshot":'+this.checked+'}') checked /> Show Screenshot button<br>
+<input type="checkbox" onclick=changeConfigStr('{"showFooterButtonExportGraphml":'+this.checked+'}') checked /> Show Export As Graphml Button<br>
+
+
 <input id="new_color" type="text" /> <button onclick=changeColor(document.getElementById("new_color").value) >Set Color </button> <br>
 <button onclick=changeConfigStr('{"legendPos":"left"}') > Legend to Left </button> <br>
 <button onclick=changeConfigStr('{"legendPos":"right"}') > Legend to Right </button> <br>
@@ -39,7 +43,8 @@
                       "edgeGroups": {"xxx": {"color": "black", "groupName": "xxx Group", "dashes": [1, 2]}, "notdashes": {"color": "black", "groupName": "not dashes Group"}},
                       "identifier": "symbol",
                       "nodeShadow": true,
-                      "edgeShadow": true
+                      "edgeShadow": true,
+                      "legendUrl": "https://exbio.wzw.tum.de/covex/assets/leg1.png"
                     }'
                     network='{
                       "nodes": [{"id": "TP53", "group": "0.5"}, {"id": "MYC", "group": "pugGroup"}, {"id": "Patient No. 5", "group": "patientgroup"}, {"label": "PTEN", "id": "PTEN", "group": 0.5, "value":"5"}],