Skip to content
Snippets Groups Projects
Select Git revision
  • 74c4997298adc44e3b5fea39cb550edd3cc76219
  • 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

analysis-panel.component.html

Blame
  • Code owners
    Assign users and groups as approvers for specific file changes. Learn more.
    analysis-panel.component.html 19.80 KiB
    <div *ngIf="token">
      <div class="card analysis analysis-view" [ngClass]="{ fullscreen: fullscreen }">
        <header class="card-header">
          <p class="card-header-title">
            <app-fa-solid-icon icon="flask"></app-fa-solid-icon>
            Analysis Results
          </p>
    
          <span class="mr-1 is-pulled-right columns is-flex is-vcentered">
            <div class="field has-addons">
              <p class="control" *ngIf="!fullscreen">
                <button
                  (click)="analysis.removeTask(token); close()"
                  class="button is-rounded is-small is-outlined highlight-danger has-text-danger"
                  aria-label="delete"
                  pTooltip="Delete analysis"
                  [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
                  tooltipPosition="left"
                >
                  <app-fa-solid-icon
                    classString="only-item-in-button"
                    icon="trash"
                    title="Delete analysis"
                  ></app-fa-solid-icon>
                </button>
              </p>
              <p class="control">
                <button
                  pTooltip="Open in fullscreen"
                  [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
                  tooltipPosition="left"
                  *ngIf="!fullscreen"
                  (click)="toggleFullscreen()"
                  class="button is-rounded is-small is-outlined highlight-primary"
                >
                  <app-fa-solid-icon
                    icon="expand"
                    classString="only-item-in-button"
                  ></app-fa-solid-icon>
                </button>
                <button
                  pTooltip="Close fullscreen"
                  [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
                  tooltipPosition="left"
                  *ngIf="fullscreen"
                  (click)="toggleFullscreen()"
                  class="button is-rounded is-small is-outlined highlight-primary"
                >
                  <app-fa-solid-icon
                    icon="compress"
                    classString="only-item-in-button"
                  ></app-fa-solid-icon>
                </button>
              </p>
              <div class="control dropdown" ngbDropdown>
                      <button ngbDropdownToggle
                              class="button is-rounded is-small is-outlined highlight-primary"
                              type="button" (click)="showMenu = !showMenu"
                              [class]="{'dropdown-toggle-enabled': showMenu}" (focusout)="hideMenu()">
                                <app-fa-solid-icon icon="bars" classString="only-item-in-button"></app-fa-solid-icon>
                    </button>
                  <ul ngbDropdownMenu class="dropdown-content dropdown-list"
                      [style]="{'display':showMenu ? 'inline-block':'none'}">
                      <li ngbDropdownItem pTooltip="Display end-user license agreement (EULA)." tooltipPosition="left"
                          [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
                          (click)="showEULA()"><a>Show EULA</a></li>
                      <li ngbDropdownItem pTooltip="Opens Drugst.One website" tooltipPosition="left"
                          [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"><a target="_blank"
                                                                                               href="https://drugst.one/home">About Drugst.One</a></li>
                  </ul>
              </div>
              <p class="control">
                <button
                  class="button is-rounded is-small is-outlined highlight-danger has-text-danger"
                  (click)="close()"
                  aria-label="close"
                  pTooltip="Close analysis"
                  [tooltipStyleClass]="'drgstn drgstn-tooltip drgstn-tooltip-left'"
                  tooltipPosition="left"
                >
                  <app-fa-solid-icon
                    icon="times"
                    classString="only-item-in-button"
                    title="Close analysis"
                  ></app-fa-solid-icon>
                </button>
              </p>
            </div>
          </span>
        </header>
        <div
          class="card-content tab-header-small"
          [class.network-view-settings]="tab === 'network'"
        >
          <div class="tabs is-centered tabs-header">
            <ul>
              <li [class.is-active]="tab === 'table'">
                <a (click)="tab = 'table'">Table</a>
              </li>
              <li [class.is-active]="tab === 'network'">
                <a (click)="tab = 'network'">Network</a>
              </li>
              <li [class.is-active]="tab === 'meta'">
                <a (click)="tab = 'meta'">Parameters</a>
              </li>
            </ul>
          </div>
          <div
            class="tab-content meta parameter-tab"
            *ngIf="task && task.info.done"
            [class.is-visible]="tab === 'meta'"
          >
            <div *ngIf="task">
              <div class="columns m-1">
                <div class="column content">
                  <h4 class="is-4 has-text-weight-bold">
                    <app-fa-solid-icon
                      icon="wrench"
                      title="Algorithm"
                    ></app-fa-solid-icon>
                    {{
                    ["quick", "super", "connect", "connectSelected"].indexOf(
                      task.info.algorithm
                    ) === -1
                      ? "Algorithm:"
                      : "Method:"
                    }}
                    {{ algorithmNames[task.info.algorithm] }}
                  </h4>
                </div>
              </div>
              <div class="columns m-1">
                <div class="column">
                  <table class="table parameter-table">
                    <tbody>
                    <tr
                      *ngIf="
                          result && result.geneInteractionDataset !== undefined
                        "
                    >
                      <td>Protein-Protein Interaction Dataset</td>
                      <td>
                        {{ result.geneInteractionDataset.name }} (Version
                        {{ result.geneInteractionDataset.version }})
                      </td>
                    </tr>
                    <tr
                      *ngIf="
                          result && result.drugInteractionDataset !== undefined
                        "
                    >
                      <td>Protein-Drug Interaction Dataset</td>
                      <td>
                        {{ result.drugInteractionDataset.name }} (Version
                        {{ result.drugInteractionDataset.version }})
                      </td>
                    </tr>
                    <tr *ngIf="task.info.parameters.resultSize !== undefined">
                      <td>Result Size</td>
                      <td>{{ task.info.parameters.resultSize }}</td>
                    </tr>
                    <tr *ngIf="task.info.parameters.k !== undefined">
                      <td>K</td>
                      <td>{{ task.info.parameters.k }}</td>
                    </tr>
                    <tr *ngIf="task.info.parameters.numTrees !== undefined">
                      <td>Number of trees</td>
                      <td>{{ task.info.parameters.numTrees }}</td>
                    </tr>
                    <tr *ngIf="task.info.parameters.tolerance !== undefined">
                      <td>Tolerance</td>
                      <td>{{ task.info.parameters.tolerance }}</td>
                    </tr>
                    <tr *ngIf="task.info.parameters.dampingFactor !== undefined">
                      <td>Damping Factor</td>
                      <td>{{ task.info.parameters.dampingFactor }}</td>
                    </tr>
                    <tr *ngIf="task.info.parameters.maxDeg !== undefined">
                      <td>Maximum Degree</td>
                      <td>{{ task.info.parameters.maxDeg }}</td>
                    </tr>
                    <tr *ngIf="task.info.parameters.hubPenalty !== undefined">
                      <td>Hub Penality</td>
                      <td>{{ task.info.parameters.hubPenalty }}</td>
                    </tr>
                    <tr
                      *ngIf="
                          task.info.parameters.includeIndirectDrugs !== undefined &&
                          task.info.target === 'drug'
                        "
                    >
                      <td>Include indirect drugs</td>
                      <td>
                        <app-fa-solid-icon
                          *ngIf="task.info.parameters.includeIndirectDrugs"
                          icon="check"
                          title="indirect drugs included"
                          classString="has-text-success"
                        ></app-fa-solid-icon>
                        <app-fa-solid-icon
                          *ngIf="!task.info.parameters.includeIndirectDrugs"
                          icon="times"
                          classString="has-text-danger"
                          title="indirect drugs excluded"
                        ></app-fa-solid-icon>
                      </td>
                    </tr>
                    <tr
                      *ngIf="
                          task.info.parameters.includeNonApprovedDrugs !==
                            undefined && task.info.target === 'drug'
                        "
                    >
                      <td>Include non-approved drugs</td>
                      <td>
                        <app-fa-solid-icon
                          *ngIf="task.info.parameters.includeNonApprovedDrugs"
                          icon="check"
                          title="non-approved drugs included"
                          classString="has-text-success"
                        ></app-fa-solid-icon>
                        <app-fa-solid-icon
                          *ngIf="!task.info.parameters.includeNonApprovedDrugs"
                          icon="times"
                          classString="has-text-danger"
                          title="non-approved drugs excluded"
                        ></app-fa-solid-icon>
                      </td>
                    </tr>
                    <tr *ngIf="task.info.parameters.customEdges !== undefined">
                      <td>Include all displayed edges</td>
                      <td>
                        <app-fa-solid-icon
                          *ngIf="task.info.parameters.customEdges"
                          icon="check"
                          title="custom edges drugs included"
                          classString="has-text-success"
                        ></app-fa-solid-icon>
                        <app-fa-solid-icon
                          *ngIf="!task.info.parameters.customEdges"
                          icon="times"
                          classString="has-text-danger"
                          title="custom edges drugs excluded"
                        ></app-fa-solid-icon>
                      </td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div
                class="columns m-1"
                *ngIf="
                  ['quick', 'super', 'connect', 'connectSelected'].indexOf(
                    task.info.algorithm
                  ) > -1
                "
              >
                <div class="column">
                  <h4 class="is-4 has-text-weight-bold">
                    <app-fa-solid-icon
                      icon="wrench"
                      title="algorithm"
                    ></app-fa-solid-icon>
                    Algorithm:
                    {{ algorithmNames["multisteiner"] }}
                  </h4>
                  <table class="table parameter-table">
                    <tbody>
                    <tr>
                      <td>Number of Trees</td>
                      <td>1</td>
                    </tr>
                    <tr>
                      <td>Tolerance</td>
                      <td>0</td>
                    </tr>
                    <tr>
                      <td>Hub Penality</td>
                      <td>1</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
              <div
                class="columns m-1"
                *ngIf="['quick', 'super'].indexOf(task.info.algorithm) > -1"
              >
                <div class="column">
                  <h4 class="is-4 has-text-weight-bold">
                    <app-fa-solid-icon
                      icon="wrench"
                      title="algorithm"
                    ></app-fa-solid-icon>
                    Algorithm:
                    {{ algorithmNames["closeness"] }}
                  </h4>
                  <table class="table parameter-table">
                    <tbody>
                    <tr>
                      <td>Include indirect drugs</td>
                      <td>
                        <app-fa-solid-icon
                          icon="times"
                          classString="has-text-danger"
                          title="indirect drugs excluded"
                        ></app-fa-solid-icon>
                      </td>
                    </tr>
                    <tr>
                      <td>Include non-approved drugs</td>
                      <td>
                        <app-fa-solid-icon
                          icon="check"
                          title="non-approved drugs included"
                          classString="has-text-success"
                        ></app-fa-solid-icon>
                      </td>
                    </tr>
                    <tr>
                      <td>Hub Penality</td>
                      <td>1</td>
                    </tr>
                    <tr>
                      <td>Result Size</td>
                      <td>10</td>
                    </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
    
          <div class="tab-content" [class.is-visible]="tab === 'network'">
            <!-- network start -->
            <app-network networkType="analysis" [nodeData]="nodeData"></app-network>
            <!-- network end -->
          </div>
          <div
            class="content tab-content scrollable table-tab"
            *ngIf="task && task.info.done"
            [class.is-visible]="tab === 'table'"
          >
            <div *ngIf="task.info.target === 'drug'">
              <div class="columns m-1">
                <!-- column normalization for drugs button START -->
                <div class="column">
                  <h4 class="is-4">
                    <app-fa-solid-icon
                      icon="capsules"
                      title="drug icon"
                    ></app-fa-solid-icon>
                    <span>Drugs</span>
                  </h4>
                </div>
                <div class="column">
                  <div class="field has-addons is-pulled-right m-1">
                    <a
                      [href]="downloadLink('drugs')"
                      class="button is-primary control is-outlined is-rounded is-pulled-right is-small"
                    >
                      <app-fa-solid-icon
                        icon="download"
                        title="download resulting drugs"
                      ></app-fa-solid-icon>
                      <span>Download</span>
                    </a>
                  </div>
    
                  <div
                    class="field has-addons is-pulled-right m-1"
                    *ngIf="tableHasScores && task.info.algorithm !== 'proximity'"
                  >
                    <p class="control">
                      <button
                        class="button is-rounded has-tooltip is-small"
                        pTooltip="Normalize the scores"
                        [tooltipStyleClass]="
                          'drgstn drgstn-tooltip drgstn-tooltip-top'
                        "
                        tooltipPosition="top"
                        [class.is-primary]="tableNormalize"
                        (click)="toggleNormalization(true)"
                        [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
                      >
                        <app-fa-solid-icon
                          icon="ruler-vertical"
                          title="normalization icon"
                          classString="is-small"
                        ></app-fa-solid-icon>
                        <span>Normalization On</span>
                      </button>
                    </p>
                    <p class="control">
                      <button
                        class="button is-rounded has-tooltip is-small"
                        pTooltip="Disable normalization of the scores."
                        [tooltipStyleClass]="
                          'drgstn drgstn-tooltip drgstn-tooltip-top'
                        "
                        tooltipPosition="top"
                        [class.is-primary]="!tableNormalize"
                        (click)="toggleNormalization(false)"
                        [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
                      >
                        <span>Off</span>
                      </button>
                    </p>
                  </div>
                </div>
                <!-- column normalization for drugs button START -->
              </div>
    
              <div class="columns m-1">
                <!-- drug table or placeholder if no drugs found START -->
                <div class="column">
                  <div *ngIf="tableDrugs.length === 0">
                    <i>No drugs have been found.</i>
                  </div>
                  <app-drug-table
                    [tableDrugs]="tableDrugs"
                    [tableDrugScoreTooltip]="tableDrugScoreTooltip"
                    [tableHasScores]="tableHasScores"
                  ></app-drug-table>
                </div>
                <!-- drug table or placeholder if no drugs found END -->
              </div>
            </div>
            <div *ngIf="tableProteins.length > 0" class="table-header">
              <div class="columns m-1">
                <div class="column">
                  <h4 class="is-4">
                    <app-fa-solid-icon
                      icon="dna"
                      title="protein table"
                    ></app-fa-solid-icon>
                    <span>Proteins</span>
                  </h4>
                </div>
    
                <div class="column">
                  <div class="field has-addons is-pulled-right m-1 control">
                    <a
                      [href]="downloadLink('proteins')"
                      class="button is-primary is-rounded is-outlined is-pulled-right is-small"
                    >
                      <app-fa-solid-icon
                        icon="download"
                        title="download resulting proteins"
                      ></app-fa-solid-icon>
                      <span>Download</span>
                    </a>
                  </div>
                  <div
                    class="field has-addons is-pulled-right m-1"
                    *ngIf="tableHasScores && task.info.target !== 'drug'"
                  >
                    <p class="control">
                      <button
                        class="button is-rounded has-tooltip is-small"
                        pTooltip="Normalize the scores"
                        [tooltipStyleClass]="
                          'drgstn drgstn-tooltip drgstn-tooltip-top'
                        "
                        tooltipPosition="top"
                        [class.is-primary]="tableNormalize"
                        (click)="toggleNormalization(true)"
                        [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
                      >
                        <app-fa-solid-icon
                          classString="is-small"
                          icon="ruler-vertical"
                          title="normalization for drug target results"
                        ></app-fa-solid-icon>
                        <span>Normalization On</span>
                      </button>
                    </p>
                    <p class="control">
                      <button
                        class="button is-rounded has-tooltip is-small"
                        pTooltip="Disable normalization of the scores."
                        [tooltipStyleClass]="
                          'drgstn drgstn-tooltip drgstn-tooltip-top'
                        "
                        tooltipPosition="top"
                        [class.is-primary]="!tableNormalize"
                        (click)="toggleNormalization(false)"
                        [ngClass]="{ 'text-small': drugstoneConfig.smallStyle }"
                      >
                        <span>Off</span>
                      </button>
                    </p>
                  </div>
                </div>
              </div>
            </div>
    
            <div class="columns m-1">
              <div class="column">
                <app-prot-table
                  [tableHasScores]="tableHasScores"
                  [tableProteins]="tableProteins"
                  [tableProteinScoreTooltip]="tableDrugScoreTooltip"
                  [tableProteinSelection]="tableProteinSelection"
                  [tableSelectedProteins]="tableSelectedProteins"
                  [identifier]="drugstoneConfig.currentConfig().identifier"
                ></app-prot-table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>