explorer-page.component.html

<div id="appWindow" (window:resize)="onResize($event)">

  <div class="is-hidden-mobile fullheight" id="appContainer">
    <app-fa-icons></app-fa-icons>
    <app-loading-screen></app-loading-screen>
    <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"
              >
                <app-fa-solid-icon icon="info"></app-fa-solid-icon>
                <span> No item selected </span>
              </ng-container>
              <ng-container
                *ngIf="networkHandler.activeNetwork.selectedWrapper"
              >
                <span>
                  {{ drugstoneConfig.currentConfig().nodeGroups[networkHandler.activeNetwork.selectedWrapper.data[networkHandler.activeNetwork.selectedWrapper.data.group === 'selectedNode' ? '_group':'group']].groupName}}
                </span>
              </ng-container>
            </p>
            <a
              (click)="collapseDetails = !collapseDetails"
              data-action="collapse"
              class="card-header-icon is-hidden-fullscreen"
              aria-label="more options"
            >
              <app-fa-solid-icon
                *ngIf="collapseDetails"
                icon="angle-down"
              ></app-fa-solid-icon>
              <app-fa-solid-icon
                *ngIf="!collapseDetails"
                icon="angle-left"
              ></app-fa-solid-icon>
            </a>
          </header>
          <div *ngIf="collapseDetails">
            <div class="card-content">
              <app-info-tile
                [expressions]="networkHandler.activeNetwork.expressionMap"
                [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">
              <app-fa-solid-icon icon="info"></app-fa-solid-icon>
              Network Overview
            </p>
            <a
              (click)="collapseOverview = !collapseOverview"
              data-action="collapse"
              class="card-header-icon is-hidden-fullscreen"
              aria-label="more options"
            >
              <app-fa-solid-icon
                *ngIf="collapseOverview"
                icon="angle-down"
              ></app-fa-solid-icon>
              <app-fa-solid-icon
                *ngIf="!collapseOverview"
                icon="angle-left"
              ></app-fa-solid-icon>
            </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">
              <app-fa-solid-icon icon="search"></app-fa-solid-icon>
              Query Node
            </p>
            <a
              (click)="collapseQuery = !collapseQuery"
              data-action="collapse"
              class="card-header-icon is-hidden-fullscreen"
              aria-label="more options"
            >
              <app-fa-solid-icon
                *ngIf="collapseQuery"
                icon="angle-down"
              ></app-fa-solid-icon>
              <app-fa-solid-icon
                *ngIf="!collapseQuery"
                icon="angle-left"
              ></app-fa-solid-icon>
            </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">
              <app-fa-solid-icon icon="flask"></app-fa-solid-icon>
              Analysis
            </p>
            <a
              (click)="collapseAnalysis = !collapseAnalysis"
              data-action="collapse"
              class="card-header-icon is-hidden-fullscreen"
              aria-label="more options"
            >
              <app-fa-solid-icon
                *ngIf="collapseAnalysis"
                icon="angle-down"
              ></app-fa-solid-icon>
              <app-fa-solid-icon
                *ngIf="!collapseAnalysis"
                icon="angle-left"
              ></app-fa-solid-icon>
            </a>
          </header>
          <div *ngIf="collapseAnalysis">
            <div class="card-content">
              <div class="field"
                   *ngIf="!drugstoneConfig.config.showAdvAnalysisContent || drugstoneConfig.config.showAdvAnalysisContent.includes('drug-target-search')">
                <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 }"
                  >
                    <app-fa-solid-icon icon="crosshairs" classString="first-item-in-button"></app-fa-solid-icon>
                    <span>{{ drugstoneConfig.config.taskTargetName }}</span>
                  </button>
                </div>
              </div>
              <div class="field" *ngIf="!drugstoneConfig.config.showAdvAnalysisContent || drugstoneConfig.config.showAdvAnalysisContent.includes('drug-search')">
                <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 }"
                  >
                    <app-fa-solid-icon icon="capsules" classString="first-item-in-button"></app-fa-solid-icon>
                    <span>
                      {{ drugstoneConfig.config.taskDrugName }}
                    </span>
                  </button>
                </div>
              </div>
              <div class="field" *ngIf="!drugstoneConfig.config.showAdvAnalysisContent || drugstoneConfig.config.showAdvAnalysisContent.includes('enrichment-gprofiler')">
                <div class="control">
                  <a
                    *ngIf="analysis.getCount() > 0"
                    (click)="openExternal(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"
                  >
                    <app-fa-solid-icon
                      classString="first-item-in-button"
                      icon="external-link-alt"
                    ></app-fa-solid-icon>
                    <span
                      [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
                    >
                      g:Profiler 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"
                  >
                    <app-fa-solid-icon
                      icon="external-link-alt"
                      classString="first-item-in-button"
                    ></app-fa-solid-icon>
                    <span
                      [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
                    >
                      g:Profiler Enrichment Analysis
                    </span>
                  </a>
                </div>
              </div>
              <div class="field" *ngIf="!drugstoneConfig.config.showAdvAnalysisContent || drugstoneConfig.config.showAdvAnalysisContent.includes('enrichment-digest')">
                <div class="control">
                  <a
                    *ngIf="analysis.getCount() > 0"
                    (click)="openDigest()"
                    target="_blank"
                    [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
                    class="button is-primary is-fullwidth is-rounded has-tooltip"
                    pTooltip="Use enrichment analysis via DIGEST (external)."
                    [tooltipStyleClass]="
                      'drgstn drgstn-tooltip drgstn-tooltip-top'
                    "
                    tooltipPosition="top"
                  >
                    <app-fa-solid-icon
                      classString="first-item-in-button"
                      icon="external-link-alt"
                    ></app-fa-solid-icon>
                    <span
                      [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
                    >
                      DIGEST 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 DIGEST (external)."
                    [tooltipStyleClass]="
                      'drgstn drgstn-tooltip drgstn-tooltip-top'
                    "
                    tooltipPosition="top"
                  >
                    <app-fa-solid-icon
                      icon="external-link-alt"
                      classString="first-item-in-button"
                    ></app-fa-solid-icon>
                    <span
                      [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
                    >
                      DIGEST 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">
              <app-fa-solid-icon icon="tasks"></app-fa-solid-icon>
              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"
            >
              <app-fa-solid-icon
                *ngIf="collapseTask"
                icon="angle-down"
              ></app-fa-solid-icon>
              <app-fa-solid-icon
                *ngIf="!collapseTask"
                icon="angle-left"
              ></app-fa-solid-icon>
            </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"
              >
                <app-fa-solid-icon icon="trash"></app-fa-solid-icon>
                <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">
              <app-fa-solid-icon icon="filter"></app-fa-solid-icon>
              Selection ({{ analysis.getCount() }})
            </p>
            <a
              (click)="collapseSelection = !collapseSelection"
              data-action="collapse"
              class="card-header-icon is-hidden-fullscreen"
              aria-label="more options"
            >
              <app-fa-solid-icon
                *ngIf="collapseSelection"
                icon="angle-down"
              ></app-fa-solid-icon>
              <app-fa-solid-icon
                *ngIf="!collapseSelection"
                icon="angle-left"
              ></app-fa-solid-icon>
            </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.currentConfig().identifier !== 'symbol'">
                    Symbol
                  </td>
                  <td *ngIf="drugstoneConfig.currentConfig().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.currentConfig().nodeGroups[p.data['_group']][
                        "groupName"
                        ]
                      }}
                    </p>
                  </td>
                  <td *ngIf="drugstoneConfig.currentConfig().identifier !== 'symbol'">
                    <p>{{ p.data.symbol }}</p>
                  </td>
                  <td
                    *ngIf="drugstoneConfig.currentConfig().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."
                    >
                      <app-fa-solid-icon icon="trash"></app-fa-solid-icon>
                    </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."
              >
                <app-fa-solid-icon icon="plus"></app-fa-solid-icon>
                <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."
              >
                <app-fa-solid-icon icon="plus"></app-fa-solid-icon>
                <span class="is-fullwidth">
                  <app-group-selection
                    (selectGroupEmitter)="analysis.addGroupToSelection($event)"
                    [nodeGroups]="drugstoneConfig.currentConfig().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."
              >
                <app-fa-solid-icon icon="sync"></app-fa-solid-icon>
                <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."
              >
                <app-fa-solid-icon icon="broom"></app-fa-solid-icon>
                <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)"
          ></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>