download button

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

@@ -136,7 +136,7 @@
       <div class="tab-content" *ngIf="task && task.info.done" [class.is-visible]="tab === 'network'">
         <div class="card-image canvas-content" #networkWithLegend>
           <div *ngIf="myConfig.showLegend">
-            <app-network-legend [config]="myConfig" [context]="legendContext"></app-network-legend>
+            <app-network-legend [config]="myConfig" [context]="legendContext" [smallStyle]="smallStyle"></app-network-legend>
           </div>
           <div class="parent fullheight">
             <div class="center image1 fullheight" #network>
@@ -154,6 +154,7 @@
                       pTooltip="Take a screenshot of the current network."
                       [tooltipStyleClass]="'drgstn drgstn-tooltip'"
                       tooltipPosition="top"
+                      [ngClass]="{ 'button-small': smallStyle }"
                       (click)="toImage()">
                   <span class="icon">
                     <i class="fas fa-camera" aria-hidden="true"></i>

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

@@ -11,7 +11,7 @@
             <th>
               <img [src]="nodeGroup.value.image" class="legend-icon"/>
             </th>
-            <td class="group-name">&nbsp;{{ nodeGroup.value.groupName }}</td>
+            <td class="group-name" [ngClass]="{ 'text-normal': smallStyle }">&nbsp;{{ nodeGroup.value.groupName }}</td>
           </ng-container>
 
           <ng-container *ngIf="!nodeGroup.value.image" [ngSwitch]="nodeGroup.value.shape">
@@ -56,7 +56,7 @@
               <span class="node {{ nodeGroup.value.shape }}" [style.background-color]=nodeGroup.value.color.background>
               </span>
             </th>
-            <td class="group-name">&nbsp;{{ nodeGroup.value.groupName }}</td>
+            <td class="group-name" [ngClass]="{ 'text-normal': smallStyle }">&nbsp;{{ nodeGroup.value.groupName }}</td>
           </ng-container>
         </ng-container>
       </tr>
@@ -69,7 +69,7 @@
             <hr *ngIf="!edgeGroup.value.dashes" class="edge" [style.background-color]=edgeGroup.value.color>
             <hr *ngIf="edgeGroup.value.dashes" class="edge dashes" [style.color]=edgeGroup.value.color>
           </th>
-          <td class="group-name">&nbsp;{{ edgeGroup.value.groupName }}</td>
+          <td class="group-name" [ngClass]="{ 'text-normal': smallStyle }">&nbsp;{{ edgeGroup.value.groupName }}</td>
         </ng-container>
       </tr>
     </ng-container>

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

@@ -11,6 +11,7 @@ export class NetworkLegendComponent implements OnInit {
 
   @Input() context: legendContext;
   @Input() config: IConfig;
+  @Input() smallStyle: boolean;
 
   private contextNodeGroupsToDelete = {
     'explorer': ['foundNode', 'foundDrug', 'seedNode', 'default', 'defaultDisorder'],

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

@@ -157,6 +157,7 @@
                 <app-network-legend
                   [config]="myConfig"
                   [context]="legendContext"
+                  [smallStyle]="smallStyle"
                 ></app-network-legend>
               </div>
               <div class="center image1 fullheight" #network>