fixed styling issues with network menus

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

@@ -82,6 +82,8 @@
 }
 
 div.dropdown-list {
+  padding: 0 !important;
+  border-radius: 5px !important;
   right: 0;
   left: auto !important;
   background-color: var(--drgstn-background);

src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.html

-<div class="control dropdown is-hoverable">
+<div class="dropdown is-hoverable">
   <div class="dropdown-trigger">
     <button
       aria-haspopup="true"
       attr.aria-controls="controls-menu-button"
-      class="button is-rounded is-small is-outlined highlight-primary">
+      class="button is-rounded is-outlined highlight-primary"
+      [ngClass]="{
+              'is-small': drugstoneConfig.smallStyle
+            }"
+    >
     <span
       [ngClass]="{
-      'text-normal': drugstoneConfig.smallStyle
+      'text-small': drugstoneConfig.smallStyle
     }"
     >
     Reset
   </span>
       <app-fa-solid-icon icon="sync-alt" classString="is-small last-item-in-button"></app-fa-solid-icon>
     </button>
-    <div class="dropdown-menu dropdown-list " id="controls-menu-button" role="menu">
-      <div class="dropdown-content inner-dropdown">
+  </div>
+  <div class="dropdown-menu dropdown-list" id="controls-menu-button" role="menu"
+       [ngClass]="{'inner-dropdown': !networkHandler.networkSidebarOpen, 'small-border': drugstoneConfig.smallStyle}">
+    <div class="dropdown-content">
       <a class="dropdown-item has-tooltip" pTooltip="Reset the network zoom and position."
          (click)="fitNetwork()"
          [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-right'"
          tooltipPosition="right"
          [ngClass]="{
-    'is-small': drugstoneConfig.smallStyle
+    'text-small': drugstoneConfig.smallStyle
   }">Reset View
       </a>
       <a class="dropdown-item has-tooltip" pTooltip="Reset everything to the initial state."
@@ -28,10 +34,9 @@
          [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-right'"
          tooltipPosition="right"
          [ngClass]="{
-    'is-small': drugstoneConfig.smallStyle
+    'text-small': drugstoneConfig.smallStyle
   }">Full Reset
       </a>
     </div>
   </div>
 </div>
-</div>

src/app/components/network/network-menu-left/center-view-inverse/center-view-inverse.component.scss

 @import "src/stylesheets/variables";
 
-div.dropdown-list {
-  right: 0;
-  left: auto !important;
-  background-color: var(--drgstn-background);
-  min-width: $menu-width !important;
-  width: auto;
-}
-
-div.control.dropdown {
-  margin-bottom: 0.4rem;
-}
-
 .dropdown-menu {
   z-index: $menu-z-index !important;
 }
 
-.inner-dropdown {
-  padding-bottom: 0 !important;
-
-  .dropdown-menu {
-    margin-left: calc(150px - 15px);
+.dropdown-menu.inner-dropdown {
+  margin-left: 105px;
   width: 150px;
   margin-top: -45px;
 
@@ -33,4 +18,7 @@ div.control.dropdown {
     }
   }
 }
+
+.dropdown-menu.inner-dropdown.small-border {
+  margin-left: 75px;
 }

src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.html

@@ -9,7 +9,7 @@
         'is-small': drugstoneConfig.smallStyle
       }"
     >
-      <span [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
+      <span [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
         >Download</span
       >
       <app-fa-solid-icon icon="download"  classString="is-small last-item-in-button"></app-fa-solid-icon>
@@ -20,8 +20,8 @@
     id="{{ 'controls-' + buttonId }}"
     role="menu"
     [ngClass]="{
-      'inner-dropdown': !networkHandler.networkSidebarOpen
-    }"
+      'inner-dropdown': !networkHandler.networkSidebarOpen, 'small-border': drugstoneConfig.smallStyle}
+    "
   >
     <div class="dropdown-content">
       <a

src/app/components/network/network-menu-left/download-button-inverse/download-button-inverse.component.scss

@@ -6,7 +6,7 @@
 }
 
 .inner-dropdown.dropdown-menu {
-  margin-left: calc(150px - 15px);
+  margin-left: 134px;
   width: 150px;
   margin-top: -45px;
 
@@ -18,5 +18,8 @@
       padding: .375rem !important;
     }
   }
+}
 
+.inner-dropdown.small-border {
+  margin-left: 100px;
 }

src/app/components/network/network-menu-left/network-menu-left.component.html

@@ -100,7 +100,7 @@
               class="button is-rounded"
               [class.is-primary]="networkHandler.activeNetwork.selectedTissue"
               aria-haspopup="true"
-              aria-controls="dropdown-menu"
+              aria-controls="dropdown-menu-id"
               pTooltip="Tissue expression data is provided by the GTEx project."
               [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-right'"
               tooltipPosition="right"
@@ -136,7 +136,8 @@
               ></app-fa-solid-icon>
             </button>
           </div>
-          <div class="dropdown-menu" id="dropdown-menu" role="menu">
+          <div class="dropdown-menu" id="dropdown-menu-id" role="menu" [ngClass]="{
+                'small-border': drugstoneConfig.smallStyle}">
             <div class="dropdown-content tissue-dropdown">
               <div class="scroll-area">
                 <a
@@ -144,6 +145,7 @@
                   [class.is-active]="
                     !networkHandler.activeNetwork.selectedTissue
                   "
+                  [ngClass]="{'text-small': drugstoneConfig.smallStyle}"
                   class="dropdown-item"
                 >
                   None
@@ -153,6 +155,7 @@
                     let tissue of networkHandler.activeNetwork.analysis.getTissues()
                   "
                   (click)="networkHandler.activeNetwork.selectTissue(tissue)"
+                  [ngClass]="{'text-small': drugstoneConfig.smallStyle}"
                   [class.is-active]="
                     networkHandler.activeNetwork.selectedTissue &&
                     tissue.drugstoneId ===

src/app/components/network/network-menu-left/network-menu-left.component.scss

@@ -95,6 +95,7 @@
     right: -12px;
     padding: calc(.75em - 1px) !important;
     height: 1em !important;
+
     .dropdown-menu {
       z-index: $network-tissue-options-z;
 
@@ -118,7 +119,7 @@
 
 .inner-dropdown {
   .dropdown-menu {
-    margin-left: calc(150px - 24px);
+    margin-left: 125px;
     width: 250px;
     margin-top: -45px;
 
@@ -131,4 +132,9 @@
       }
     }
   }
+  .dropdown-menu.small-border {
+    margin-left: 90px;
+  }
 }
+
+

src/app/components/network/network-menu-left/network-menu-left.component.ts

@@ -19,5 +19,4 @@ export class NetworkMenuLeftComponent implements OnInit {
   public reset() {
     this.resetEmitter.emit(true);
   }
-
 }

src/app/components/network/network-menu/center-view/center-view.component.html

-<!--<button-->
-<!--  (click)="fitNetwork()"-->
-<!--  class="button is-primary is-rounded has-tooltip"-->
-<!--  pTooltip="Reset the network zoom and position."-->
-<!--  [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-right'"-->
-<!--  tooltipPosition="right"-->
-<!--  [ngClass]="{-->
-<!--    'is-small': drugstoneConfig.smallStyle-->
-<!--  }"-->
-<!--&gt;-->
-<!--  <span-->
-<!--    [ngClass]="{-->
-<!--      'text-normal': drugstoneConfig.smallStyle-->
-<!--    }"-->
-<!--  >-->
-<!--    Reset View-->
-<!--  </span>-->
-<!--  <app-fa-solid-icon icon="sync-alt" classString="is-small last-item-in-button"></app-fa-solid-icon>-->
-<div class="control dropdown is-hoverable">
+<div class="dropdown is-hoverable">
   <div class="dropdown-trigger">
     <button
       aria-haspopup="true"
       attr.aria-controls="controls-menu-button"
-      class="button is-rounded is-small is-outlined highlight-primary">
+      class="button is-rounded is-outlined highlight-primary"
+      [ngClass]="{
+              'is-small': drugstoneConfig.smallStyle
+            }"
+    >
       <app-fa-solid-icon icon="sync-alt" classString="is-small"></app-fa-solid-icon>
       <span
         [ngClass]="{
-      'text-normal': drugstoneConfig.smallStyle
+      'text-small': drugstoneConfig.smallStyle
     }"
       >
     Reset
   </span>
     </button>
-    <div class="dropdown-menu dropdown-list " id="controls-menu-button" role="menu">
-      <div class="dropdown-content inner-dropdown">
+  </div>
+  <div class="dropdown-menu dropdown-list " id="controls-menu-button" role="menu"
+       [ngClass]="{'inner-dropdown':!networkHandler.networkSidebarOpen}">
+    <div class="dropdown-content">
       <a class="dropdown-item has-tooltip" pTooltip="Reset the network zoom and position."
          (click)="fitNetwork()"
          [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
          tooltipPosition="left"
          [ngClass]="{
-    'is-small': drugstoneConfig.smallStyle
+    'text-small': drugstoneConfig.smallStyle
   }">Reset View
       </a>
       <a class="dropdown-item has-tooltip" pTooltip="Reset everything to the initial state."
@@ -46,11 +34,10 @@
          [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
          tooltipPosition="left"
          [ngClass]="{
-    'is-small': drugstoneConfig.smallStyle
+    'text-small': drugstoneConfig.smallStyle
   }">Full Reset
       </a>
     </div>
-    </div>
     <!--</button>-->
   </div>
 </div>

src/app/components/network/network-menu/center-view/center-view.component.scss

 @import "src/stylesheets/variables";
 
-div.dropdown-list {
-  right: 0;
-  left: auto !important;
-  background-color: var(--drgstn-background);
-  min-width: $menu-width !important;
-  width: auto;
-}
-
-div.control.dropdown {
-  margin-bottom: 0.4rem;
-}
-
 .dropdown-menu {
   z-index: $menu-z-index !important;
 }
 
-.inner-dropdown {
-  padding-bottom: 0 !important;
-
-  .dropdown-menu {
-    margin-left: calc(150px - 15px);
+.inner-dropdown.dropdown-menu {
+  margin-left: calc(-150px - 43px) !important;
   width: 150px;
   margin-top: -45px;
 
   .dropdown-content {
-      padding-left: 0.5rem;
-      padding-right: 0.5rem;
+    padding-left: 0.5rem !important;
+    padding-right: 0.5rem !important;
 
     .dropdown-item {
-        padding: .375rem !important;
-      }
+      padding: .375rem 0 !important;
     }
   }
 }

src/app/components/network/network-menu/download-button/download-button.component.html

@@ -10,7 +10,7 @@
       }"
     >
       <app-fa-solid-icon icon="download"></app-fa-solid-icon>
-      <span [ngClass]="{ 'text-normal': drugstoneConfig.smallStyle }"
+      <span [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
         >Download</span
       >
     </button>

src/app/components/network/network-menu/network-menu.component.html

@@ -141,6 +141,7 @@
                   [class.is-active]="
                     !networkHandler.activeNetwork.selectedTissue
                   "
+                  [ngClass]="{'text-small': drugstoneConfig.smallStyle}"
                   class="dropdown-item"
                 >
                   None
@@ -155,6 +156,7 @@
                     tissue.drugstoneId ===
                       networkHandler.activeNetwork.selectedTissue.drugstoneId
                   "
+                  [ngClass]="{'text-small': drugstoneConfig.smallStyle}"
                   class="dropdown-item"
                 >
                   {{ tissue.name }}

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

@@ -12,6 +12,8 @@
 }
 
 div.dropdown-list {
+  padding: 0 !important;
+  border-radius: 5px !important;
   right: 0;
   left: auto !important;
   background-color: var(--drgstn-background);

src/app/components/network/network.component.ts

@@ -119,141 +119,6 @@ export class NetworkComponent implements OnInit {
     this.resetEmitter.emit(true);
   }
 
-  rectangleSelect(select: boolean) {
-
-    this.selectMode = select;
-    const options = this.getOptions();
-    if (!options.interaction) {
-      options.interaction = {};
-    }
-    if (select) {
-      options.interaction.zoomView = false;
-      options.interaction.dragView = false;
-      this.initDragSelect();
-    } else {
-      options.interaction.zoomView = true;
-      options.interaction.dragView = true;
-      this.removeDragSelect();
-    }
-    this.updateOptions(options);
-  }
-
-  public rect = undefined;
-
-
-
-  selectNodesFromHighlight() {
-    // const fromX;
-    // const toX;
-    // const fromY;
-    // const toY;
-    const nodesIdInDrawing = [];
-    const xRange = this.getStartToEnd(this.rect.startX, this.rect.w);
-    const yRange = this.getStartToEnd(this.rect.startY, this.rect.h);
-
-    // @ts-ignore
-    const allNodes = this.nodeData.nodes.get();
-    const selection = [];
-    for (let i = 0; i < allNodes.length; i++) {
-      const curNode = allNodes[i];
-      const nodePosition = this.net.getPositions([curNode.id]);
-      const nodeXY = this.net.canvasToDOM({x: nodePosition[curNode.id].x, y: nodePosition[curNode.id].y});
-      if (xRange.start <= nodeXY.x && nodeXY.x <= xRange.end && yRange.start <= nodeXY.y && nodeXY.y <= yRange.end) {
-        nodesIdInDrawing.push(curNode.id);
-        selection.push({id: curNode.id, label: curNode.label});
-      }
-    }
-    this.net.selectNodes(nodesIdInDrawing);
-  }
-
-  getStartToEnd(start, theLen) {
-    return theLen > 0 ? {start: start, end: start + theLen} : {start: start + theLen, end: start};
-  }
-
-  private ctx: CanvasRenderingContext2D;
-  private canvas: HTMLCanvasElement;
-  private net: any;
-
-  initDragSelect() {
-    if (this.net === undefined) {
-      this.net = this.networkInternal;
-      this.canvas = this.net.canvas.frame.canvas;
-      this.canvas.oncontextmenu = () => false;
-      this.ctx = this.canvas.getContext('2d');
-      this.canvas.addEventListener('mousemove', this.dragMouseMove.bind(this));
-      this.canvas.addEventListener('mousedown', this.dragMouseDown.bind(this));
-      this.canvas.addEventListener('mouseup', this.dragMouseUp.bind(this));
-    }
-  }
-
-
-  removeDragSelect() {
-    this.net = undefined;
-    if (this.canvas) {
-      this.canvas.removeEventListener('mousemove', this.dragMouseMove.bind(this));
-      this.canvas.removeEventListener('mousedown', this.dragMouseDown.bind(this));
-      this.canvas.removeEventListener('mouseup', this.dragMouseUp.bind(this));
-    }
-  }
-
-  private drag = false;
-  public offsetLeft = 0;
-  public offsetTop = 0;
-
-  dragMouseMove(e) {
-    if (this.drag) {
-      this.restoreDrawingSurface();
-      this.rect.w = (e.pageX - this.offsetLeft) - this.rect.startX;
-      this.rect.h = (e.pageY - this.offsetTop) - this.rect.startY;
-
-      this.ctx.setLineDash([5]);
-      this.ctx.strokeStyle = 'rgb(0, 102, 0)';
-      this.ctx.strokeRect(this.rect.startX, this.rect.startY, this.rect.w, this.rect.h);
-      this.ctx.setLineDash([]);
-      this.ctx.fillStyle = 'rgba(0, 255, 0, 0.2)';
-      this.ctx.fillRect(this.rect.startX, this.rect.startY, this.rect.w, this.rect.h);
-
-    }
-  }
-
-  private canvasCursor = 'default';
-
-  dragMouseDown(e) {
-    if (e.button === 0) {
-      this.offsetLeft = e.target.getBoundingClientRect().left;
-      this.offsetTop = e.target.getBoundingClientRect().top;
-      this.saveDrawingSurface();
-      this.rect = {};
-      this.rect.startX = e.pageX - this.offsetLeft;
-      this.rect.startY = e.pageY - this.offsetTop;
-      this.drag = true;
-      this.canvasCursor = 'crosshair';
-    }
-  }
-
-
-  dragMouseUp(e) {
-    if (e.button === 0) {
-      this.restoreDrawingSurface();
-      this.drag = false;
-
-      this.canvasCursor = 'default';
-      this.selectNodesFromHighlight();
-    }
-  }
-
-  private drawingSurfaceImageData: ImageData;
-
-  saveDrawingSurface() {
-    this.drawingSurfaceImageData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height);
-  }
-
-
-  restoreDrawingSurface() {
-    this.ctx.putImageData(this.drawingSurfaceImageData, 0, 0);
-  }
-
-
   getResetInputNetwork(): NetworkData {
     const nodes = [...this.inputNetwork.nodes];
     nodes.forEach(n => {
@@ -265,7 +130,6 @@ export class NetworkComponent implements OnInit {
     return {edges: this.inputNetwork.edges, nodes};
   }
 
-
   setLoading(bool: boolean): void {
     this.loading = bool;
   }

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

@@ -444,15 +444,6 @@
                 <app-fa-solid-icon icon="plus"></app-fa-solid-icon>
                 <span>Add Connected Components</span>
               </a>
-<!--              <a-->
-<!--                (click)="analysis.rectangleSelect()"-->
-<!--                class="card-footer-item text-primary"-->
-<!--                tooltipPosition="top"-->
-<!--                pTooltip="Use rectangle select mode to select genes."-->
-<!--              >-->
-<!--                <app-fa-solid-icon icon="plus"></app-fa-solid-icon>-->
-<!--                <span>Select mode</span>-->
-<!--              </a>-->
             </footer>
             <footer class="card-footer">
               <a

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

@@ -559,67 +559,6 @@ export class ExplorerPageComponent implements OnInit, AfterViewInit {
     this.drugstoneConfig.smallStyle = this.windowWidth < 1250;
   }
 
-  // public initNetworkListeners(resolve) {
-  //   this.networkHandler.activeNetwork.networkInternal.on('doubleClick', (properties) => {
-  //     const nodeIds: Array<string> = properties.nodes;
-  //     if (nodeIds != null && nodeIds.length > 0) {
-  //       const nodeId = nodeIds[0];
-  //       const node = this.nodeData.nodes.get(nodeId);
-  //       if (node.drugstoneId === undefined || node.drugstoneType !== 'protein') {
-  //         this.analysis.unmappedNodeToast();
-  //         // skip if node is not a protein mapped to backend
-  //         return;
-  //       }
-  //       const wrapper = getWrapperFromNode(node);
-  //       if (this.analysis.inSelection(node)) {
-  //         this.analysis.removeItems([wrapper]);
-  //       } else {
-  //         this.analysis.addItems([wrapper]);
-  //       }
-  //     }
-  //   });
-  //
-  //   this.networkHandler.activeNetwork.networkInternal.on('click', (properties) => {
-  //     if (properties.nodes.length === 0 && properties.edges.length === 1) {
-  //       // clicked on one edge
-  //       const edgeId = properties.edges[0];
-  //       this.networkHandler.activeNetwork.openEdgeSummary(edgeId);
-  //     } else {
-  //       // clicked not on one edge
-  //       const nodeIds: Array<string> = properties.nodes;
-  //       if (nodeIds != null && nodeIds.length > 0) {
-  //         const nodeId = nodeIds[0];
-  //         const node = this.nodeData.nodes.get(nodeId);
-  //         const wrapper = getWrapperFromNode(node);
-  //         this.openNodeSummary(wrapper, false);
-  //       } else {
-  //         this.closeSummary();
-  //       }
-  //     }
-  //   });
-  //
-  //   this.networkHandler.activeNetwork.networkInternal.on('deselectNode', (properties) => {
-  //     this.closeSummary();
-  //   });
-  //
-  //   if (this.networkHandler.activeNetwork.selectedWrapper) {
-  //     this.zoomToNode(this.networkHandler.activeNetwork.selectedWrapper.id);
-  //   }
-  //
-  //   this.networkHandler.activeNetwork.currentViewNodes = this.nodeData.nodes;
-  //   this.networkHandler.activeNetwork.currentViewEdges = this.nodeData.edges;
-  //
-  //   this.networkHandler.activeNetwork.queryItems = [];
-  //   this.networkHandler.activeNetwork.updateQueryItems();
-  //   this.networkHandler.activeNetwork.currentViewProteins = this.networkHandler.activeNetwork.inputNetwork.nodes;
-  //   // this.fillQueryItems(this.currentViewNodes);
-  //   if (this.networkHandler.activeNetwork.selectedWrapper) {
-  //     this.networkHandler.activeNetwork.networkInternal.selectNodes([this.networkHandler.activeNetwork.selectedWrapper.id]);
-  //   }
-  //
-  //   resolve(true);
-  // }
-
   public async openNodeSummary(item: Wrapper, zoom: boolean) {
     // close edge summary if open
     this.networkHandler.activeNetwork.activeEdge = null;

src/app/services/analysis/analysis.service.ts

@@ -261,11 +261,6 @@ export class AnalysisService {
     this.addItems(wrappers);
   }
 
-
-  public rectangleSelect() {
-    this.networkHandler.activeNetwork.rectangleSelect(true);
-  }
-
   // Identifies connected components of all selected nodes and adds all nodes of the components to the selection
   public addConnectedComponents() {
     const wrappers: Wrapper[] = [];
@@ -318,27 +313,6 @@ export class AnalysisService {
     this.addItems(wrappers);
   }
 
-  // public addSeeds(nodes) {
-  //   const addedWrappers: Wrapper[] = [];
-  //   nodes.forEach((node) => {
-  //     if (node.isSeed === true && !this.inSelection(node)) {
-  //       addedWrappers.push(node);
-  //       this.selectedItems.set(node.id, node);
-  //     }
-  //   });
-  //   this.selectListSubject.next({items: addedWrappers, selected: true});
-  // }
-
-  // public removeSeeds(nodes) {
-  //   const removedWrappers: Wrapper[] = [];
-  //   nodes.forEach((node) => {
-  //     if (node.isSeed === true && this.inSelection(node)) {
-  //       removedWrappers.push(node);
-  //       this.selectedItems.delete(node.id);
-  //     }
-  //   });
-  //   this.selectListSubject.next({items: removedWrappers, selected: false});
-  // }
 
   public invertSelection(nodes) {
     const newSelection = [];

src/stylesheets/default-theme.css

@@ -5,7 +5,7 @@
   --drgstn-warning: #ffdd00;
   --drgstn-danger: #ff2744;
   --drgstn-background: #f8f9fa;
-  --drgstn-panel: #ffffff;
+  --drgstn-panel: #ff3b3b;
   --drgstn-info: #61c43d;
   --drgstn-text-primary: #151515;
   --drgstn-text-secondary: #eeeeee;