Merge pull request #117 from daisybio/dev

Fix several minor issues

Author: nictru

src/app/components/transcript-modal/transcript-modal.component.html

@@ -53,7 +53,7 @@ <h1 mat-dialog-title>{{ BrowseService.getFullName(transcript) }}</h1>
         </ng-container>
 
         <ng-container matColumnDef="psi">
-          <th *matHeaderCellDef mat-header-cell>Psivec</th>
+          <th *matHeaderCellDef mat-header-cell>Psi value</th>
           <td *matCellDef="let asEntry" mat-cell>
             {{ asEntry.psi | async }}
           </td>

src/app/routes/browse/network/network.component.html

@@ -7,6 +7,8 @@
   <app-info title="What do I see?">
     <p>What you see is a subset of a large ceRNA network obtained by applying SPONGE to data from TCGA. The entire
       network is too large to visualize here. You can adjust the filter criteria using the controls on the left.</p>
+    <p>The size of the nodes is proportional to the degree of the node. The thickness of the edges is proportional to
+      the mscor value of the interaction.</p>
     <h3>Shapes</h3>
     <table>
       <tr>
@@ -29,4 +31,8 @@ <h3>Shapes</h3>
     <mat-icon>open_in_new</mat-icon>
     Functional enrichment analysis using g:Profiler
   </a>
+  <button (click)="setAllNodesState(!allNodesSelected$())" mat-stroked-button>{{allNodesSelected$() ? 'Deselect' :
+    'Select'}} all visible nodes</button>
+  <button (click)="setAllEdgesState(!allEdgesSelected$())" mat-stroked-button>{{allEdgesSelected$() ? 'Deselect' :
+    'Select'}} all visible edges</button>
 </div>

src/app/routes/browse/network/network.component.ts

@@ -92,6 +92,8 @@ export class NetworkComponent implements AfterViewInit, OnDestroy {
   graph$ = new ReplaySubject<Graph>();
   sigma?: Sigma;
   level$ = this.browseService.level$;
+  allNodesSelected$ = this.browseService.allNodesSelected$;
+  allEdgesSelected$ = this.browseService.allEdgesSelected$;
 
   circleExplanation$: Signal<string> = computed(() => {
     switch (this.level$()) {
@@ -283,4 +285,12 @@ export class NetworkComponent implements AfterViewInit, OnDestroy {
       this.setNodeState(node, this.determineState(state));
     });
   }
+
+  setAllNodesState(state: boolean) {
+    this.browseService.setAllNodesState(state);
+  }
+
+  setAllEdgesState(state: boolean) {
+    this.browseService.setAllEdgesState(state);
+  }
 }

src/app/services/browse.service.ts

@@ -451,12 +451,14 @@ export class BrowseService {
     const graph = new Graph();
 
     // Find max node degree for normalization
-    const maxNodeDegree = Math.max(...nodes.map(node => node.node_degree));
+    const maxNodeDegree = Math.max(...nodes.map((node) => node.node_degree));
 
     // Find max mscor for normalization
-    const maxMscor = Math.max(...interactions.map(interaction =>
-      'gene1' in interaction ? interaction.mscor : interaction.mscor
-    ));
+    const maxMscor = Math.max(
+      ...interactions.map((interaction) =>
+        'gene1' in interaction ? interaction.mscor : interaction.mscor
+      )
+    );
 
     nodes.forEach((node) => {
       const gene = BrowseService.getNodeGeneName(node);
@@ -465,7 +467,7 @@ export class BrowseService {
       );
 
       // Calculate normalized node size based on degree (range: 5-20)
-      const normalizedSize = 5 + (15 * (node.node_degree / maxNodeDegree));
+      const normalizedSize = 5 + 15 * (node.node_degree / maxNodeDegree);
 
       graph.addNode(BrowseService.getNodeID(node), {
         label: BrowseService.getNodeFullName(node),
@@ -484,14 +486,55 @@ export class BrowseService {
       }
 
       // Calculate normalized edge size based on mscor (range: 1-5)
-      const mscor = 'gene1' in interaction ? interaction.mscor : interaction.mscor;
-      const normalizedSize = 1 + (6 * (mscor / maxMscor));
+      const mscor =
+        'gene1' in interaction ? interaction.mscor : interaction.mscor;
+      const normalizedSize = 1 + 6 * (mscor / maxMscor);
 
       graph.addEdge(ids[0], ids[1], {
-        size: normalizedSize
+        size: normalizedSize,
       });
     });
 
     return graph;
   }
+
+  setAllNodesState(state: boolean) {
+    this._nodeStates$.update((entityStates) => {
+      return Object.fromEntries(
+        Object.keys(entityStates).map((key) => [
+          key,
+          {
+            ...entityStates[key],
+            [State.Active]: state,
+          },
+        ])
+      );
+    });
+  }
+
+  allNodesSelected$ = computed(() => {
+    return Object.values(this._nodeStates$()).every(
+      (state) => state[State.Active]
+    );
+  });
+
+  setAllEdgesState(state: boolean) {
+    this._edgeStates$.update((entityStates) => {
+      return Object.fromEntries(
+        Object.keys(entityStates).map((key) => [
+          key,
+          {
+            ...entityStates[key],
+            [State.Active]: state,
+          },
+        ])
+      );
+    });
+  }
+
+  allEdgesSelected$ = computed(() => {
+    return Object.values(this._edgeStates$()).every(
+      (state) => state[State.Active]
+    );
+  });
 }