<commit_before><div id="jobs-page" class="page-layout carded fullwidth">

  <!-- CENTER -->
  <div class="center">

    <!-- HEADER -->
    <div class="header accent">
      <mat-toolbar style="background: transparent">

        <h1>Jobs</h1>

        <span class="fill-space"></span>

        <div id="filters">

          <span class="filter-label">Filters</span>
          <mat-icon class="reset-filters-btn" (click)="clearFilters()" title="reset filters">replay</mat-icon>
          <mat-form-field>
            <mat-select [(ngModel)]="filterValues.flow" id="filter-flow-name" placeholder="Flow Name" (selectionChange)="applyFilter('flow', $event.value)">
              <mat-option class="name-option" [id]="'filter-name-option-' + (val ? val : 'All').toLowerCase().split(' ').join('-')" *ngFor="let val of getMenuVals('flow')" [value]="val">{{val ? val : 'All'}}</mat-option>
            </mat-select>
          </mat-form-field>

          <mat-form-field>
            <mat-select [(ngModel)]="filterValues.targetEntity" id="filter-target-entity" placeholder="Target Entity" (selectionChange)="applyFilter('targetEntity', $event.value)">
              <mat-option class="target-entity-option" [id]="'filter-entity-option-' + (val ? val : 'All').toLowerCase().split(' ').join('-')" *ngFor="let val of getMenuVals('targetEntity')" [value]="val">{{val ? val : 'All'}}</mat-option>
            </mat-select>
          </mat-form-field>

          <mat-form-field>
            <mat-select [(ngModel)]="filterValues.jobStatus" id="filter-status" placeholder="Status" (selectionChange)="applyFilter('jobStatus', $event.value)">
              <mat-option class="status-option" [id]="'filter-status-option-' + (val ? val : 'All').toLowerCase().split(' ').join('-')" *ngFor="let val of getMenuVals('jobStatus')" [value]="val">{{val ? val : 'All'}}</mat-option>
            </mat-select>
          </mat-form-field>

          <mat-form-field>
            <input [(ngModel)]="filterValues.text" id="filter-by-text" matInput (keyup)="applyFilter('text', $event.target.value)" placeholder="Text">
          </mat-form-field>

        </div>

      </mat-toolbar>
    </div>
    <!-- / HEADER -->

    <div class="content-card">

      <mat-table id="jobs-table"
                 class="jobs-table"
                 #table [dataSource]="dataSource"
                 matSort>

        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <mat-header-cell id="job-name-sort-btn" *matHeaderCellDef mat-sort-header>Flow Name/Job ID</mat-header-cell>
          <mat-cell class="job-name" *matCellDef="let job">
            <div class="name-container">
              <div class="flow-name">
                <a [routerLink]="['/jobs', job.jobId]">
                  {{job.flow}}
                </a>
              </div>
              <div class="job-id">
                {{job.jobId | truncate : 40}}
              </div>
            </div>
          </mat-cell>
        </ng-container>

        <!-- Target Entity -->
        <ng-container matColumnDef="targetEntity">
          <mat-header-cell id="job-entity-sort-btn" *matHeaderCellDef mat-sort-header>Target Entity</mat-header-cell>
          <mat-cell class="job-entity" *matCellDef="let job">
            {{job.targetEntity}}
          </mat-cell>
        </ng-container>

        <!-- Status Column -->
        <ng-container matColumnDef="jobStatus">
          <mat-header-cell id="job-status-sort-btn" *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
          <mat-cell class="job-status" *matCellDef="let job">
            <span class="capitalize" *ngIf="job.jobStatus !== 'failed'">
              {{job.jobStatus}}
            </span>
            <span class="capitalize" *ngIf="job.jobStatus === 'failed'">
              <a class="status-btn" (click)="openStatusDialog(job)">
                {{job.jobStatus}}
              </a>
            </span>
          </mat-cell>
        </ng-container>

        <!-- Ended Column -->
        <ng-container matColumnDef="timeEnded">
          <mat-header-cell id="job-ended-sort-btn" *matHeaderCellDef mat-sort-header>Ended</mat-header-cell>
          <mat-cell class="job-ended" *matCellDef="let job">
            <span class="capitalize">
              {{friendlyDate(job.timeEnded)}}
            </span>
          </mat-cell>
        </ng-container>

        <!-- Duration Column -->
        <ng-container matColumnDef="duration">
          <mat-header-cell id="job-duration-sort-btn" *matHeaderCellDef mat-sort-header>Duration</mat-header-cell>
          <mat-cell class="job-duration" *matCellDef="let job">
            <span class="capitalize">
              {{friendlyDuration(job.timeStarted, job.timeEnded)}}
            </span>
          </mat-cell>
        </ng-container>

        <!-- Committed Column -->
        <ng-container matColumnDef="committed">
          <mat-header-cell id="job-committed-sort-btn" *matHeaderCellDef mat-sort-header>Committed</mat-header-cell>
          <mat-cell class="job-committed" *matCellDef="let job">
            <a *ngIf="job.committed !== 0" [routerLink]="['/browse']" [queryParams]="{Collection:job.jobId}">
              {{job.committed | number}}
            </a>
            <span *ngIf="job.committed === 0">
              {{job.committed}}
            </span>
          </mat-cell>
        </ng-container>

        <!-- Errors Column -->
        <ng-container matColumnDef="errors">
          <mat-header-cell id="job-errors-sort-btn" *matHeaderCellDef mat-sort-header>Failed</mat-header-cell>
          <mat-cell class="job-errors" *matCellDef="let job">
            <a *ngIf="job.errors !== 0" [routerLink]="">
              {{job.errors | number}}
            </a>
            <span *ngIf="job.errors === 0">
              {{job.errors}}
            </span>
          </mat-cell>
        </ng-container>

        <!-- Actions Column -->
        <ng-container matColumnDef="actions">
          <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
          <mat-cell class="job-actions" *matCellDef="let job">
            <mat-icon class="job-menu" [matMenuTriggerFor]="jobMenu" [matMenuTriggerData]="{job: job}"
                      disableRipple>more_vert</mat-icon>
          </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>
        <mat-row
          *matRowDef="let job; columns: displayedColumns;"
          class="{{ 'job-' + job.flow.toLowerCase().split(' ').join('-') }}"
        >
        </mat-row>

      </mat-table>

      <mat-paginator id="jobs-pagination"
                     #paginator
                     [length]="jobs.length"
                     [pageIndex]="0"
                     [pageSize]="5"
                     [pageSizeOptions]="[3, 5, 15, 30]">
      </mat-paginator>

    </div>
  </div>
</div>

<mat-menu class="job-menu-dialog" #jobMenu="matMenu">
  <ng-template matMenuContent let-job="job">
    <div class="job-menu-output-btn" mat-menu-item (click)="openOutputDialog(job)">Output</div>
    <div class="job-menu-view-flow-btn" mat-menu-item (click)="viewFlow(job)">View Flow</div>
  </ng-template>
</mat-menu>
<commit_msg>Fix filterValues ref’s for jobs filters<commit_after><div id="jobs-page" class="page-layout carded fullwidth">

  <!-- CENTER -->
  <div class="center">

    <!-- HEADER -->
    <div class="header accent">
      <mat-toolbar style="background: transparent">

        <h1>Jobs</h1>

        <span class="fill-space"></span>

        <div id="filters">

          <span class="filter-label">Filters</span>
          <mat-icon class="reset-filters-btn" (click)="clearFilters()" title="reset filters">replay</mat-icon>
          <mat-form-field>
            <mat-select [(ngModel)]="filterValues['flow']" id="filter-flow-name" placeholder="Flow Name" (selectionChange)="applyFilter('flow', $event.value)">
              <mat-option class="name-option" [id]="'filter-name-option-' + (val ? val : 'All').toLowerCase().split(' ').join('-')" *ngFor="let val of getMenuVals('flow')" [value]="val">{{val ? val : 'All'}}</mat-option>
            </mat-select>
          </mat-form-field>

          <mat-form-field>
            <mat-select [(ngModel)]="filterValues['targetEntity']" id="filter-target-entity" placeholder="Target Entity" (selectionChange)="applyFilter('targetEntity', $event.value)">
              <mat-option class="target-entity-option" [id]="'filter-entity-option-' + (val ? val : 'All').toLowerCase().split(' ').join('-')" *ngFor="let val of getMenuVals('targetEntity')" [value]="val">{{val ? val : 'All'}}</mat-option>
            </mat-select>
          </mat-form-field>

          <mat-form-field>
            <mat-select [(ngModel)]="filterValues['jobStatus']" id="filter-status" placeholder="Status" (selectionChange)="applyFilter('jobStatus', $event.value)">
              <mat-option class="status-option" [id]="'filter-status-option-' + (val ? val : 'All').toLowerCase().split(' ').join('-')" *ngFor="let val of getMenuVals('jobStatus')" [value]="val">{{val ? val : 'All'}}</mat-option>
            </mat-select>
          </mat-form-field>

          <mat-form-field>
            <input [(ngModel)]="filterValues['text']" id="filter-by-text" matInput (keyup)="applyFilter('text', $event.target.value)" placeholder="Text">
          </mat-form-field>

        </div>

      </mat-toolbar>
    </div>
    <!-- / HEADER -->

    <div class="content-card">

      <mat-table id="jobs-table"
                 class="jobs-table"
                 #table [dataSource]="dataSource"
                 matSort>

        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <mat-header-cell id="job-name-sort-btn" *matHeaderCellDef mat-sort-header>Flow Name/Job ID</mat-header-cell>
          <mat-cell class="job-name" *matCellDef="let job">
            <div class="name-container">
              <div class="flow-name">
                <a [routerLink]="['/jobs', job.jobId]">
                  {{job.flow}}
                </a>
              </div>
              <div class="job-id">
                {{job.jobId | truncate : 40}}
              </div>
            </div>
          </mat-cell>
        </ng-container>

        <!-- Target Entity -->
        <ng-container matColumnDef="targetEntity">
          <mat-header-cell id="job-entity-sort-btn" *matHeaderCellDef mat-sort-header>Target Entity</mat-header-cell>
          <mat-cell class="job-entity" *matCellDef="let job">
            {{job.targetEntity}}
          </mat-cell>
        </ng-container>

        <!-- Status Column -->
        <ng-container matColumnDef="jobStatus">
          <mat-header-cell id="job-status-sort-btn" *matHeaderCellDef mat-sort-header>Status</mat-header-cell>
          <mat-cell class="job-status" *matCellDef="let job">
            <span class="capitalize" *ngIf="job.jobStatus !== 'failed'">
              {{job.jobStatus}}
            </span>
            <span class="capitalize" *ngIf="job.jobStatus === 'failed'">
              <a class="status-btn" (click)="openStatusDialog(job)">
                {{job.jobStatus}}
              </a>
            </span>
          </mat-cell>
        </ng-container>

        <!-- Ended Column -->
        <ng-container matColumnDef="timeEnded">
          <mat-header-cell id="job-ended-sort-btn" *matHeaderCellDef mat-sort-header>Ended</mat-header-cell>
          <mat-cell class="job-ended" *matCellDef="let job">
            <span class="capitalize">
              {{friendlyDate(job.timeEnded)}}
            </span>
          </mat-cell>
        </ng-container>

        <!-- Duration Column -->
        <ng-container matColumnDef="duration">
          <mat-header-cell id="job-duration-sort-btn" *matHeaderCellDef mat-sort-header>Duration</mat-header-cell>
          <mat-cell class="job-duration" *matCellDef="let job">
            <span class="capitalize">
              {{friendlyDuration(job.timeStarted, job.timeEnded)}}
            </span>
          </mat-cell>
        </ng-container>

        <!-- Committed Column -->
        <ng-container matColumnDef="committed">
          <mat-header-cell id="job-committed-sort-btn" *matHeaderCellDef mat-sort-header>Committed</mat-header-cell>
          <mat-cell class="job-committed" *matCellDef="let job">
            <a *ngIf="job.committed !== 0" [routerLink]="['/browse']" [queryParams]="{Collection:job.jobId}">
              {{job.committed | number}}
            </a>
            <span *ngIf="job.committed === 0">
              {{job.committed}}
            </span>
          </mat-cell>
        </ng-container>

        <!-- Errors Column -->
        <ng-container matColumnDef="errors">
          <mat-header-cell id="job-errors-sort-btn" *matHeaderCellDef mat-sort-header>Failed</mat-header-cell>
          <mat-cell class="job-errors" *matCellDef="let job">
            <a *ngIf="job.errors !== 0" [routerLink]="">
              {{job.errors | number}}
            </a>
            <span *ngIf="job.errors === 0">
              {{job.errors}}
            </span>
          </mat-cell>
        </ng-container>

        <!-- Actions Column -->
        <ng-container matColumnDef="actions">
          <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
          <mat-cell class="job-actions" *matCellDef="let job">
            <mat-icon class="job-menu" [matMenuTriggerFor]="jobMenu" [matMenuTriggerData]="{job: job}"
                      disableRipple>more_vert</mat-icon>
          </mat-cell>
        </ng-container>

        <mat-header-row *matHeaderRowDef="displayedColumns; sticky:true"></mat-header-row>
        <mat-row
          *matRowDef="let job; columns: displayedColumns;"
          class="{{ 'job-' + job.flow.toLowerCase().split(' ').join('-') }}"
        >
        </mat-row>

      </mat-table>

      <mat-paginator id="jobs-pagination"
                     #paginator
                     [length]="jobs.length"
                     [pageIndex]="0"
                     [pageSize]="5"
                     [pageSizeOptions]="[3, 5, 15, 30]">
      </mat-paginator>

    </div>
  </div>
</div>

<mat-menu class="job-menu-dialog" #jobMenu="matMenu">
  <ng-template matMenuContent let-job="job">
    <div class="job-menu-output-btn" mat-menu-item (click)="openOutputDialog(job)">Output</div>
    <div class="job-menu-view-flow-btn" mat-menu-item (click)="viewFlow(job)">View Flow</div>
  </ng-template>
</mat-menu>

{'fraction_non_alphanumeric': 0.1857753863134658, 'fraction_numerical': 0.002207505518763797, 'mean_word_length': 2.155637788419678, 'pattern_counts': {'":': 0, '<': 291, '<?xml version=': 0, '>': 291, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4232090', 'n_tokens_mistral': 4517, 'n_tokens_neox': 4360, 'n_words': 707}