perfdb/pdb-js/src/app/visualization-page/visualization-page.component.html

<div id="visualization">
  <div id="query-box">
    <pdb-query-autocomplete #query></pdb-query-autocomplete>
  </div>

  <div id="date-box">
    <app-date-picker #datePicker></app-date-picker>
    <!--
    <mat-form-field class="pdb-form-full-width">
        <mat-label>Date Range:</mat-label>
        <input matInput id="search-date-range" value="dateRange" name="dates" />
      </mat-form-field>
      -->
  </div>

  <div id="filters">
    <div id="filterpanel">
      <mat-form-field class="pdb-form-full-width">
        <mat-label>Type:</mat-label>
        <mat-select
          multiple
          [(ngModel)]="selectedPlotType"
          (ngModelChange)="changePlotType($event)"
        >
          <mat-option
            *ngFor="let plotType of plotTypes"
            [value]="plotType"
            [disabled]="!plotType.active"
          >
            <img src="assets/img/{{ plotType.icon }}.svg" class="icon-select" />
            {{ plotType.name }}
          </mat-option>
        </mat-select>
      </mat-form-field>

      <mat-form-field class="pdb-form-full-width">
        <mat-label>Group By:</mat-label>
        <mat-select multiple [(value)]="groupBy">
          <mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{
            tagField.name
          }}</mat-option>
        </mat-select>
      </mat-form-field>

      <pdb-limit-by #limitbycomponent></pdb-limit-by>
      <div [hidden]="!selectedPlotTypesContains(['BAR', 'BOX'])">
        <mat-form-field>
          <mat-label>Intervals (only bar chart):</mat-label>
          <mat-select [(value)]="intervalUnit">
            <mat-option value="NO_INTERVAL">-</mat-option>
            <mat-option value="SECOND">second</mat-option>
            <mat-option value="MINUTE">minute</mat-option>
            <mat-option value="HOUR">hour</mat-option>
            <mat-option value="DAY">day</mat-option>
            <mat-option value="WEEK">week</mat-option>
            <mat-option value="MONTH">month</mat-option>
            <mat-option value="YEAR">year</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      <div [hidden]="!selectedPlotTypesContains(['BAR', 'BOX'])">
        <mat-checkbox [(ngModel)]="renderBarChartTickLabels"
          >Show Tic Labels (bar chart)</mat-checkbox
        >
      </div>
      <pdb-y-axis-definition
        #y1AxisDefinitionComponent
        yIndex="1"
      ></pdb-y-axis-definition>
      <pdb-y-axis-definition
        #y2AxisDefinitionComponent
        yIndex="2"
        [hidden]="!y2AxisAvailable"
      ></pdb-y-axis-definition>

      <mat-checkbox
        *ngIf="galleryEnabled"
        [(ngModel)]="enableGallery"
        (click)="toggleGallery($event)"
        >Gallery</mat-checkbox
      >

      <mat-form-field *ngIf="enableGallery" class="pdb-form-full-width">
        <mat-label>Split By:</mat-label>
        <mat-select [(value)]="splitBy">
          <mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{
            tagField.name
          }}</mat-option>
        </mat-select>
        <mat-error *ngIf="splitBy == null || true">
          Please select a value!
        </mat-error>
      </mat-form-field>

      <div id="plot-button-bar">
        <a
          mat-icon-button
          [routerLink]="['/vis']"
          [queryParams]="{ config: serializedConfig() }"
          target="_blank"
          aria-label="open new window with the same search"
          title="open new window with the same search"
          ><img src="assets/img/link.svg" aria-hidden="true"
        /></a>
        <button
          *ngIf="!enableGallery && !plotJobActive"
          [disabled]="plotJobActive"
          mat-button
          matTooltip="Create Plot"
          (click)="plot()"
        >
          <img
            src="assets/img/scatter-chart2.svg"
            class="icon-inline"
            aria-hidden="true"
            title="create plot"
          />
          Plot
        </button>
        <button
          *ngIf="enableGallery && !plotJobActive"
          mat-button
          matTooltip="Create Gallery"
          (click)="gallery()"
          [disabled]="this.splitBy == null"
        >
          <img
            src="assets/img/four-squares-line.svg"
            class="icon-inline"
            aria-hidden="true"
            title="Create Gallery (only active if 'Split' is set)"
          />
          Gallery
        </button>
        <button
          *ngIf="plotJobActive"
          mat-button
          (click)="abort()"
          matTooltip="abort"
        >
          <img src="assets/img/close.svg" class="icon-inline" /> Abort
        </button>
      </div>
    </div>
  </div>

  <div id="results">
    <pdb-plot-view
      #plotView
      (loadingEvent)="loading($event)"
      (dateRangeUpdateEvent)="updateDateRange($event)"
    ></pdb-plot-view>
    <pdb-gallery-view #galleryView> </pdb-gallery-view>
  </div>
</div>