Skip to content
Snippets Groups Projects
Select Git revision
  • d232cc80ea7a56e737db9fae8d94d41341c470a4
  • master default protected
  • csv_export
  • ndex
  • v1.1.18-rc2
  • v1.1.17
  • v1.1.16
  • v1.1.16-rc12
  • v1.1.16-rc11
  • v1.1.16-rc10
  • v1.1.16-rc9
  • v1.1.16-rc8
  • v1.1.16-rc7
  • v1.1.16-rc4
  • v1.1.16-rc3
  • v1.1.16-rc1
  • v1.1.6-rc1
  • v1.1.15
  • v1.1.15-rc7
  • v1.1.15-rc6
  • v1.1.15-rc3
  • v1.1.15-rc1
  • v1.1.14
  • v1.1.13
24 results

explorer-page.component.html

Blame
  • Code owners
    Assign users and groups as approvers for specific file changes. Learn more.
    explorer-page.component.html 20.64 KiB
    <div id="appWindow" (window:resize)="onResize($event)">
      <div class="is-hidden-mobile fullheight" id="appContainer">
        <app-license-agreement></app-license-agreement>
    
        <app-launch-analysis
          [(show)]="showAnalysisDialog"
          [target]="analysisDialogTarget"
          (taskEvent)="emitTaskEvent($event)"
        >
        </app-launch-analysis>
    
        <app-add-expressed-proteins
          [(show)]="showThresholdDialog"
          [selectedTissue]="networkHandler.activeNetwork.currentViewSelectedTissue"
          [visibleNodes]="networkHandler.activeNetwork.currentViewNodes"
          [currentViewProteins]="networkHandler.activeNetwork.currentViewProteins"
          [expressionMap]="networkHandler.activeNetwork.expressionMap"
        >
        </app-add-expressed-proteins>
    
        <!-- Start explorer -->
        <div
          class="drugstone explorer columns is-gapless"
          [ngClass]="{
            'is-flex-direction-row-reverse':
              drugstoneConfig.config.showSidebar === 'right'
          }"
        >
          <!-- Start left sidebar -->
          <div
            class="drugstone sidebar column"
            *ngIf="drugstoneConfig.config.showSidebar"
          >
            <div
              *ngIf="drugstoneConfig.config.showItemSelector"
              class="card bar-large mt-0"
            >
              <header
                class="card-header"
                [ngClass]="{ 'b-text-small': drugstoneConfig.smallStyle }"
              >
                <p class="card-header-title">
                  <ng-container
                    *ngIf="!networkHandler.activeNetwork.selectedWrapper"
                  >
                    <span class="icon">
                      <i class="fas fa-info" aria-hidden="true"></i>
                    </span>
                    <span> No item selected </span>
                  </ng-container>
                  <ng-container
                    *ngIf="networkHandler.activeNetwork.selectedWrapper"
                  >
                    <span>
                      {{ networkHandler.activeNetwork.selectedWrapper.data.group }}
                    </span>
                  </ng-container>
                </p>
                <a
                  (click)="collapseDetails = !collapseDetails"
                  data-action="collapse"
                  class="card-header-icon is-hidden-fullscreen"
                  aria-label="more options"
                >
                  <span *ngIf="collapseDetails" class="icon">
                    <i class="fas fa-angle-down" aria-hidden="true"></i>
                  </span>
                  <span *ngIf="!collapseDetails" class="icon">
                    <i class="fas fa-angle-left" aria-hidden="true"></i>
                  </span>
                </a>
              </header>
              <div *ngIf="collapseDetails">
                <div class="card-content">
                  <app-info-tile
                    [wrapper]="networkHandler.activeNetwork.selectedWrapper"
                  ></app-info-tile>
                </div>
              </div>
            </div>
    
            <div
              *ngIf="drugstoneConfig.config.showOverview"
              class="card bar-large"
              [ngClass]="{ 'b-text-small': drugstoneConfig.smallStyle }"
            >
              <header class="card-header">
                <p class="card-header-title">
                  <span class="icon">
                    <i class="fas fa-info" aria-hidden="true"></i>
                  </span>
                  Network Overview
                </p>
                <a
                  (click)="collapseOverview = !collapseOverview"
                  data-action="collapse"
                  class="card-header-icon is-hidden-fullscreen"
                  aria-label="more options"
                >
                  <span *ngIf="collapseOverview" class="icon">
                    <i class="fas fa-angle-down" aria-hidden="true"></i>
                  </span>
                  <span *ngIf="!collapseOverview" class="icon">
                    <i class="fas fa-angle-left" aria-hidden="true"></i>
                  </span>
                </a>
              </header>
              <div *ngIf="collapseOverview">
                <div class="card-content">
                  <nav class="level" *ngIf="proteinData">
                    <!-- TO DO  : CHANGE THIS LATER
                    <div class="level-item has-text-centered">
                      <div>
                        <p class="heading">Viral<br>Proteins</p>
                        <p class="title"> {{ proteinData.effects.length }}</p>
                      </div>
                    </div>
                    -->
    
                    <div class="level-item has-text-centered">
                      <div>
                        <p class="heading">Nodes</p>
                        <p class="title">
                          {{
                            networkHandler.activeNetwork.currentViewNodes != null
                              ? networkHandler.activeNetwork.currentViewNodes.length
                              : 0
                          }}
                        </p>
                      </div>
                    </div>
                    <div class="level-item has-text-centered">
                      <div>
                        <p class="heading">Edges</p>
                        <p class="title">
                          {{
                            networkHandler.activeNetwork.currentViewEdges != null
                              ? networkHandler.activeNetwork.currentViewEdges.length
                              : 0
                          }}
                        </p>
                      </div>
                    </div>
                  </nav>
                </div>
              </div>
            </div>
    
            <div
              *ngIf="drugstoneConfig.config.showQuery"
              class="card bar-large"
              [ngClass]="{ 'b-text-small': drugstoneConfig.smallStyle }"
            >
              <header class="card-header">
                <p class="card-header-title">
                  <span class="icon">
                    <i class="fas fa-search" aria-hidden="true"></i>
                  </span>
                  Query Node
                </p>
                <a
                  (click)="collapseQuery = !collapseQuery"
                  data-action="collapse"
                  class="card-header-icon is-hidden-fullscreen"
                  aria-label="more options"
                >
                  <span class="icon">
                    <span *ngIf="collapseQuery" class="icon">
                      <i class="fas fa-angle-down" aria-hidden="true"></i>
                    </span>
                    <span *ngIf="!collapseQuery" class="icon">
                      <i class="fas fa-angle-left" aria-hidden="true"></i>
                    </span>
                  </span>
                </a>
              </header>
              <div *ngIf="collapseQuery">
                <div class="card-content">
                  <div class="field">
                    <div class="control">
                      <app-query-tile-component
                        (selectItem)="queryAction($event)"
                        [queryItems]="networkHandler.activeNetwork.queryItems"
                      ></app-query-tile-component>
                    </div>
                  </div>
                </div>
              </div>
            </div>
    
            <app-quick-drug-target
              *ngIf="drugstoneConfig.config.showConnectGenes"
              (taskEvent)="emitTaskEvent($event)"
            ></app-quick-drug-target>
    
            <app-quick-drug
              *ngIf="drugstoneConfig.config.showSimpleAnalysis"
              (taskEvent)="emitTaskEvent($event)"
            ></app-quick-drug>
    
            <div
              *ngIf="drugstoneConfig.config.showAdvAnalysis"
              class="card bar-large"
            >
              <header
                class="card-header"
                [ngClass]="{ 'b-text-small': drugstoneConfig.smallStyle }"
              >
                <p class="card-header-title">
                  <span class="icon">
                    <i class="fas fa-flask" aria-hidden="true"></i>
                  </span>
                  Analysis
                </p>
                <a
                  (click)="collapseAnalysis = !collapseAnalysis"
                  data-action="collapse"
                  class="card-header-icon is-hidden-fullscreen"
                  aria-label="more options"
                >
                  <span *ngIf="collapseAnalysis" class="icon">
                    <i class="fas fa-angle-down" aria-hidden="true"></i>
                  </span>
                  <span *ngIf="!collapseAnalysis" class="icon">
                    <i class="fas fa-angle-left" aria-hidden="true"></i>
                  </span>
                </a>
              </header>
              <div *ngIf="collapseAnalysis">
                <div class="card-content">
                  <div class="field">
                    <div
                      class="control"
                      pTooltip="Find drug targets for the selected proteins."
                      [tooltipStyleClass]="
                        'drgstn drgstn-tooltip drgstn-tooltip-top'
                      "
                      tooltipPosition="top"
                    >
                      <button
                        (click)="
                          analysisDialogTarget = 'drug-target';
                          showAnalysisDialog = true
                        "
                        class="button is-primary is-fullwidth is-rounded has-tooltip"
                        [disabled]="analysis.getCount() === 0"
                        [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
                      >
                        <span class="icon">
                          <i class="fa fa-crosshairs"></i>
                        </span>
                        <span>{{ drugstoneConfig.config.taskTargetName }}</span>
                      </button>
                    </div>
                  </div>
                  <div class="field">
                    <div
                      class="control"
                      pTooltip="Find drugs for the selected proteins."
                      [tooltipStyleClass]="
                        'drgstn drgstn-tooltip drgstn-tooltip-top'
                      "
                      tooltipPosition="top"
                    >
                      <button
                        (click)="
                          analysisDialogTarget = 'drug'; showAnalysisDialog = true
                        "
                        class="button is-primary is-fullwidth is-rounded has-tooltip"
                        [disabled]="analysis.getCount() === 0"
                        [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
                      >
                        <span class="icon">
                          <i class="fa fa-capsules"></i>
                        </span>
                        <span>
                          {{ drugstoneConfig.config.taskDrugName }}
                        </span>
                      </button>
                    </div>
                  </div>
                  <div class="field">
                    <div class="control">
                      <a
                        *ngIf="analysis.getCount() > 0"
                        [href]="gProfilerLink()"
                        target="_blank"
                        [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
                        class="button is-primary is-fullwidth is-rounded has-tooltip"
                        pTooltip="Use enrichment analysis via g:Profiler (external)."
                        [tooltipStyleClass]="
                          'drgstn drgstn-tooltip drgstn-tooltip-top'
                        "
                        tooltipPosition="top"
                      >
                        <span class="icon">
                          <i class="fa fa-external-link-alt"></i>
                        </span>
                        <span
                          [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
                        >
                          Enrichment Analysis
                        </span>
                      </a>
                      <a
                        *ngIf="analysis.getCount() === 0"
                        disabled
                        [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
                        class="button is-primary is-fullwidth is-rounded has-tooltip"
                        pTooltip="Use enrichment analysis via g:Profiler (external)."
                        [tooltipStyleClass]="
                          'drgstn drgstn-tooltip drgstn-tooltip-top'
                        "
                        tooltipPosition="top"
                      >
                        <span class="icon">
                          <i class="fa fa-external-link-alt"></i>
                        </span>
                        <span
                          [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
                        >
                          Enrichment Analysis
                        </span>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
    
            <div *ngIf="drugstoneConfig.config.showTasks" class="card bar-large">
              <header
                class="card-header"
                [ngClass]="{ 'b-text-small': drugstoneConfig.smallStyle }"
              >
                <p class="card-header-title">
                  <span class="icon">
                    <i class="fas fa-tasks" aria-hidden="true"></i>
                  </span>
                  Tasks ({{ analysis.tasks != null ? analysis.tasks.length : 0 }})
                </p>
                <a
                  (click)="collapseTask = !collapseTask"
                  data-action="collapse"
                  class="card-header-icon is-hidden-fullscreen"
                  aria-label="more options"
                >
                  <span *ngIf="collapseTask" class="icon">
                    <i class="fas fa-angle-down" aria-hidden="true"></i>
                  </span>
                  <span *ngIf="!collapseTask" class="icon">
                    <i class="fas fa-angle-left" aria-hidden="true"></i>
                  </span>
                </a>
              </header>
              <div *ngIf="collapseTask">
                <div
                  class="card-content overflow task-list-container"
                  *ngIf="analysis.tasks && analysis.tasks.length > 0"
                >
                  <app-task-list [(token)]="selectedAnalysisToken"></app-task-list>
                </div>
                <footer class="card-footer">
                  <a
                    *ngIf="analysis.tasks && analysis.tasks.length > 0"
                    (click)="
                      analysis.removeAllTasks(); selectedAnalysisToken = null
                    "
                    class="card-footer-item has-text-danger"
                    pTooltip="Delete all tasks."
                    [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-top'"
                    tooltipPosition="top"
                  >
                    <span class="icon">
                      <i class="fa fa-trash"></i>
                    </span>
                    <span> Delete all </span>
                  </a>
                </footer>
              </div>
            </div>
    
            <div
              *ngIf="drugstoneConfig.config.showSelection"
              class="card bar-large"
            >
              <header
                class="card-header"
                [ngClass]="{ 'b-text-small': drugstoneConfig.smallStyle }"
              >
                <p class="card-header-title">
                  <span class="icon">
                    <i class="fas fa-filter" aria-hidden="true"></i>
                  </span>
                  Selection ({{ analysis.getCount() }})
                </p>
                <a
                  (click)="collapseSelection = !collapseSelection"
                  data-action="collapse"
                  class="card-header-icon is-hidden-fullscreen"
                  aria-label="more options"
                >
                  <span *ngIf="collapseSelection" class="icon">
                    <i class="fas fa-angle-down" aria-hidden="true"></i>
                  </span>
                  <span *ngIf="!collapseSelection" class="icon">
                    <i class="fas fa-angle-left" aria-hidden="true"></i>
                  </span>
                </a>
              </header>
              <div
                *ngIf="collapseSelection"
                class="seed-selection"
                [ngClass]="{ 'text-normal': 'drugstoneConfig.smallStyle' }"
              >
                <div class="card-content overflow">
                  <table
                    class="table selection-table"
                    *ngIf="analysis.getCount() > 0"
                  >
                    <thead>
                      <tr>
                        <td>Label</td>
                        <td>Group</td>
                        <td *ngIf="drugstoneConfig.config.identifier !== 'symbol'">
                          Symbol
                        </td>
                        <td *ngIf="drugstoneConfig.config.identifier !== 'uniprot'">
                          Uniprot
                        </td>
                        <td>Actions</td>
                      </tr>
                    </thead>
                    <tbody>
                      <tr *ngFor="let p of analysis.getSelection()">
                        <td>
                          <p class="is-capitalized">{{ p.data.label }}</p>
                        </td>
                        <td>
                          <p>
                            {{
                              drugstoneConfig.config.nodeGroups[p.data.group][
                                "groupName"
                              ]
                            }}
                          </p>
                        </td>
                        <td *ngIf="drugstoneConfig.config.identifier !== 'symbol'">
                          <p>{{ p.data.symbol }}</p>
                        </td>
                        <td *ngIf="drugstoneConfig.config.identifier !== 'uniprot'" class="uniprot" title="{{p.data.uniprotAc}}">
                          <p>{{ p.data.uniprotAc }}</p>
                        </td>
                        <td>
                          <button
                            (click)="analysis.removeItems([p])"
                            class="button is-small is-danger is-outlined has-tooltip"
                            tooltipPosition="top"
                            pTooltip="Remove from selection."
                          >
                            <i class="fa fa-trash"></i>
                          </button>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <i *ngIf="analysis.getCount() === 0">
                    Double-click on a node to select it for the analysis.
                  </i>
                </div>
    
                <footer class="card-footer">
                  <a
                    (click)="analysis.addAllToSelection()"
                    class="card-footer-item text-primary"
                    tooltipPosition="top"
                    pTooltip="Add all proteins to the selection."
                  >
                    <span class="icon">
                      <i class="fa fa-plus"></i>
                    </span>
                    <span> Add all </span>
                  </a>
                </footer>
                <footer class="card-footer">
                  <a
                    class="card-footer-item text-primary"
                    tooltipPosition="top"
                    pTooltip="Add all proteins to the selection."
                  >
                    <span class="icon">
                      <i class="fa fa-plus"></i>
                    </span>
                    <span class="is-fullwidth">
                      <app-group-selection
                        (selectGroupEmitter)="analysis.addGroupToSelection($event)"
                        [nodeGroups]="drugstoneConfig.config.nodeGroups"
                      ></app-group-selection>
                    </span>
                  </a>
                </footer>
                <footer class="card-footer">
                  <a
                    (click)="
                      analysis.invertSelection(
                        networkHandler.activeNetwork.currentViewNodes
                      )
                    "
                    class="card-footer-item text-primary"
                    tooltipPosition="top"
                    pTooltip="Invert the current selection."
                  >
                    <span class="icon">
                      <i class="fa fa-sync"></i>
                    </span>
                    <span> Invert </span>
                  </a>
                  <a
                    *ngIf="analysis.getSelection().length"
                    (click)="analysis.resetSelection()"
                    class="card-footer-item has-text-danger"
                    tooltipPosition="top"
                    pTooltip="Remove all entries from the selection."
                  >
                    <span class="icon">
                      <i class="fa fa-broom"></i>
                    </span>
                    <span> Reset </span>
                  </a>
                </footer>
    
                <!-- </div> -->
                <!-- </div>  -->
              </div>
            </div>
          </div>
    
          <!-- Start network block -->
          <div class="drugstone network column" id="main-column">
            <!-- analysis panel with analysis network -->
            <div class="analysis-view" *ngIf="selectedAnalysisToken">
              <app-analysis-panel
                [(token)]="selectedAnalysisToken"
                (showDetailsChange)="
                  networkHandler.activeNetwork.selectedWrapper = $event
                "
                (visibleItems)="analysisWindowChanged($event)"
                [config]="drugstoneConfig.config"
              ></app-analysis-panel>
            </div>
            <!-- explorer network -->
            <app-network networkType="explorer" [nodeData]="nodeData"></app-network>
          </div>
          <!-- End  network block -->
    
          <div class="is-hidden-tablet mobile-fallback">
            Sorry, drugstone is not available for mobile phones. To find information
            about drugstone, please check the <a routerLink="/about">About</a> page
            or visit this page with another device with a larger screen.
          </div>
        </div>
      </div>
    
      <app-toast></app-toast>
    </div>