<commit_before>import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, ViewEncapsulation} from "@angular/core";
import {Workflow} from "cwl-svg";
import {StepModel, WorkflowModel} from "cwlts/models";
import {UpdateStepModalComponent} from "../../../components/modal/custom/update-step-modal.component";
import {PlatformAPI} from "../../../services/api/platforms/platform-api.service";
import {UserPreferencesService} from "../../../services/storage/user-preferences.service";
import {ModalService} from "../../../ui/modal/modal.service";
import {DirectiveBase} from "../../../util/directive-base/directive-base";

@Component({
    selector: "ct-workflow-step-inspector",
    changeDetection: ChangeDetectionStrategy.OnPush,
    styleUrls: ["./step-inspector.component.scss"],
    template: `

        <!--Update warning-->
        <div class="alert alert-warning form-control-label" *ngIf="step.hasUpdate">
            Update available.<a href="" (click)="updateStep($event)"> Click here for update!</a>
        </div>

        <!--View Modes-->
        <div class="row workflow-step-inspector-tabs">

            <!--Tab Info-->
            <div class="single-tab col-sm-4" [class.active]="viewMode == tabs.Info" (click)="changeTab(tabs.Info)">
                <span>App Info</span>
            </div>

            <!--Tab Inputs-->
            <div class="single-tab col-sm-4" [class.active]="viewMode == tabs.Inputs" (click)="changeTab(tabs.Inputs)">
                <span>Inputs</span>
            </div>

            <!--Tab Step-->
            <div class="single-tab col-sm-4" [class.active]="viewMode == tabs.Step" (click)="changeTab(tabs.Step)">
                <span>Step</span>
            </div>

        </div>

        <!--Info-->
        <ct-workflow-step-inspector-inputs *ngIf="viewMode === tabs.Inputs"
                                           [step]="step"
                                           [inputs]="step.in"
                                           [graph]="graph"
                                           [workflowModel]="workflowModel">
        </ct-workflow-step-inspector-inputs>

        <!--Inputs-->
        <ct-workflow-step-inspector-info *ngIf="viewMode === tabs.Info"
                                         [step]="step">
        </ct-workflow-step-inspector-info>
<commit_msg>fix(workflow-editor): Step inspector tabs are now highlighted and have an underline-highlight when selected<commit_after>import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, ViewEncapsulation} from "@angular/core";
import {Workflow} from "cwl-svg";
import {StepModel, WorkflowModel} from "cwlts/models";
import {UpdateStepModalComponent} from "../../../components/modal/custom/update-step-modal.component";
import {PlatformAPI} from "../../../services/api/platforms/platform-api.service";
import {UserPreferencesService} from "../../../services/storage/user-preferences.service";
import {ModalService} from "../../../ui/modal/modal.service";
import {DirectiveBase} from "../../../util/directive-base/directive-base";

@Component({
    selector: "ct-workflow-step-inspector",
    changeDetection: ChangeDetectionStrategy.OnPush,
    styleUrls: ["./step-inspector.component.scss"],
    template: `

        <!--Update warning-->
        <div class="alert alert-warning form-control-label" *ngIf="step.hasUpdate">
            Update available.<a href="" (click)="updateStep($event)"> Click here for update!</a>
        </div>

        <!--View Modes-->
        <ct-action-bar class="row workflow-step-inspector-tabs">
            <ct-tab-selector class="full-width"
                             [distribute]="'equal'"
                             [active]="viewMode"
                             (activeChange)="changeTab($event)">

                <ct-tab-selector-entry [tabName]="tabs.Info">
                    <span>App Info</span>
                </ct-tab-selector-entry>

                <ct-tab-selector-entry [tabName]="tabs.Inputs">
                    <span>Inputs</span>
                </ct-tab-selector-entry>

                <ct-tab-selector-entry [tabName]="tabs.Step">
                    <span>Step</span>
                </ct-tab-selector-entry>
            </ct-tab-selector>
        </ct-action-bar>

        <!--Info-->
        <ct-workflow-step-inspector-inputs *ngIf="viewMode === tabs.Inputs"
                                           [step]="step"
                                           [inputs]="step.in"
                                           [graph]="graph"
                                           [workflowModel]="workflowModel">
        </ct-workflow-step-inspector-inputs>

        <!--Inputs-->
        <ct-workflow-step-inspector-info *ngIf="viewMode === tabs.Info"
                                         [step]="step">
        </ct-workflow-step-inspector-info>

{'fraction_non_alphanumeric': 0.16440608302507193, 'fraction_numerical': 0.0006165228113440197, 'mean_word_length': 1.8987492555092318, 'pattern_counts': {'":': 0, '<': 60, '<?xml version=': 0, '>': 60, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 20, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6820093', 'n_tokens_mistral': 1347, 'n_tokens_neox': 1305, 'n_words': 226}