<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>
          <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>