<commit_before><!-- # CE - camunda-cockpit-ui/client/scripts/pages/process-instance.html -->
<div class="ctn-fixed-view">
  <div class="ctn-content-container"
       ctn-collapsable-parent="sidebar"
       ctn-min-width=".nav-tabs li">

    <!-- toolbar -->
    <div class="ctn-toolbar">

      <!-- Toolbar actions are provided by plugins -->
      <span ng-repeat="tabProvider in processInstanceActions">
        <view provider="tabProvider"
              vars="processInstanceVars" />
      </span>

    </div>

    <!-- sidebar -->
    <div class="ctn-column ctn-sidebar ctn-scroll"
         ctn-collapsable="left"
         ng-controller="ProcessInstanceFilterController">

      <ul class="nav nav-tabs">
        <li ng-class="{active: sidebarTab === 'info'}">
          <a ng-click="sidebarTab = 'info'">Information</a>
        </li>
        <li ng-class="{active: sidebarTab === 'filters'}">
          <a ng-click="sidebarTab = 'filters'">Filter</a>
        </li>
      </ul>

      <div class="tab-content"
           ng-show="sidebarTab === 'info'">
        <dl class="process-information">
          <dt cam-widget-clipboard="processInstance.id"
              ng-class="{hovered: hovered === 'instance-id'}">
            <span tooltip="Process instance ID as it appears in the database">Instance ID:</span>
          </dt>
          <dd class="instance-id"
              ng-mouseenter="hoverTitle('instance-id')"
              ng-mouseleave="hoverTitle()">
            {{ processInstance.id }}
          </dd>

          <dt cam-widget-clipboard="processInstance.businessKey"
              ng-class="{hovered: hovered === 'business-key'}"
              ng-if="processInstance.businessKey">
            <span tooltip="Business key of the process instance">Business Key:</span>
          </dt>
          <dd ng-if="processInstance.businessKey"
              class="business-key"
              ng-mouseenter="hoverTitle('business-key')"
              ng-mouseleave="hoverTitle()">
            {{ processInstance.businessKey }}
          </dd>
          <dt ng-if="!processInstance.businessKey">
            <span tooltip="Business key of the process instance">Business Key:</span>
          </dt>
          <dd ng-if="!processInstance.businessKey"
              class="business-key"><span class="null-value">null</span></dd>

          <dt>Definition Version:</dt>
          <dd class="definition-version">
            {{ processDefinition.version }}
            <a ng-href="{{ getMigrationUrl() }}"
               class="instance-upgrade-link"
               ng-if="hasMigrationPlugin && !isLatestVersion()">
              <span class="glyphicon glyphicon-arrow-up"
                    tooltip="Migrate this instance to latest version"></span>
            </a>
          </dd>

          <dt cam-widget-clipboard="processDefinition.id"
              ng-class="{hovered: hovered === 'definition-id'}">Definition ID:</dt>
          <dd class="definition-id"
              ng-mouseenter="hoverTitle('definition-id')"
              ng-mouseleave="hoverTitle()">
            <a ng-href="#/process-definition/{{ processDefinition.id }}/runtime">{{ processDefinition.id }}</a>
          </dd>

          <dt cam-widget-clipboard="processDefinition.key"
              ng-class="{hovered: hovered === 'definition-key'}">Definition Key:</dt>
          <dd class="definition-key"
              ng-mouseenter="hoverTitle('definition-key')"
              ng-mouseleave="hoverTitle()">{{ processDefinition.key }}</dd>

          <dt>Definition Name:</dt>
          <dd class="definition-name">{{ processDefinition.name }}</dd>

          <dt ng-if="processInstance.tenantId"
              ng-class="{hovered: hovered === 'tenant-id'}"
              cam-widget-clipboard="processInstance.tenantId">Tenant ID:</dt>
          <dd class="tenant-id"
              ng-if="processInstance.tenantId"
              ng-mouseenter="hoverTitle('tenant-id')"
              ng-mouseleave="hoverTitle()">{{ processInstance.tenantId }}</dd>
          <dt ng-if="!processInstance.tenantId">Tenant ID:</dt>
          <dd class="tenant-id"
              ng-if="!processInstance.tenantId"><span class="null-value">null</span></dd>

          <dt cam-widget-clipboard="processDefinition.deploymentId"
              ng-class="{hovered: hovered === 'deployment-id'}">Deployment ID:</dt>
          <dd class="deployment-id"
              ng-mouseenter="hoverTitle('deployment-id')"
              ng-mouseleave="hoverTitle()">
            <a ng-href="{{ getDeploymentUrl() }}">{{ processDefinition.deploymentId }}</a>
          </dd>

          <dt ng-if="hasMigrationPlugin">Related:</dt>
          <dd ng-if="hasMigrationPlugin">
            <ul>
              <li>
                <a ng-href="#/migration?searchQuery=%5B%5D&sourceKey={{ processDefinition.key }}">Migration</a>
              </li>
            </ul>
          </dd>
        </dl>
      </div>

      <div class="tab-content filters"
           ng-show="sidebarTab === 'filters'">
        <h5>
          Filter
          <span class="glyphicon glyphicon-info-sign"
                tooltip="The activity instance tree with all currently selected activity instances. You may change the selection via (CTRL +) click."></span>
        </h5>

        <div cam-quick-filter
             name-filter
             holder-selector=".instance-tree"
             label-selector=".tree-node-label"
             item-selector=".tree-node-group">
        </div>

        <div class="filter-selection">
          <button class="btn btn-link btn-xs btn-control"
                  ng-show="filterData.activityInstanceCount"
                  ng-click="clearSelection()">
            <span class="glyphicon glyphicon-remove"></span>
          </button>

          <ng-pluralize count="filterData.activityInstanceCount"
                        when="{ 'null' : 'Nothing',
                                '0': 'Nothing',
                                'one': '1 activity instance',
                                'other': '{{ filterData.activityInstanceCount }} activity instances'}"><commit_msg>chore(process-instance): only display instance tree if tab is active<commit_after><!-- # CE - camunda-cockpit-ui/client/scripts/pages/process-instance.html -->
<div class="ctn-fixed-view">
  <div class="ctn-content-container"
       ctn-collapsable-parent="sidebar"
       ctn-min-width=".nav-tabs li">

    <!-- toolbar -->
    <div class="ctn-toolbar">

      <!-- Toolbar actions are provided by plugins -->
      <span ng-repeat="tabProvider in processInstanceActions">
        <view provider="tabProvider"
              vars="processInstanceVars" />
      </span>

    </div>

    <!-- sidebar -->
    <div class="ctn-column ctn-sidebar ctn-scroll"
         ctn-collapsable="left"
         ng-controller="ProcessInstanceFilterController">

      <ul class="nav nav-tabs">
        <li ng-class="{active: sidebarTab === 'info'}">
          <a ng-click="sidebarTab = 'info'">Information</a>
        </li>
        <li ng-class="{active: sidebarTab === 'filters'}">
          <a ng-click="sidebarTab = 'filters'">Filter</a>
        </li>
      </ul>

      <div class="tab-content"
           ng-if="sidebarTab === 'info'">
        <dl class="process-information">
          <dt cam-widget-clipboard="processInstance.id"
              ng-class="{hovered: hovered === 'instance-id'}">
            <span tooltip="Process instance ID as it appears in the database">Instance ID:</span>
          </dt>
          <dd class="instance-id"
              ng-mouseenter="hoverTitle('instance-id')"
              ng-mouseleave="hoverTitle()">
            {{ processInstance.id }}
          </dd>

          <dt cam-widget-clipboard="processInstance.businessKey"
              ng-class="{hovered: hovered === 'business-key'}"
              ng-if="processInstance.businessKey">
            <span tooltip="Business key of the process instance">Business Key:</span>
          </dt>
          <dd ng-if="processInstance.businessKey"
              class="business-key"
              ng-mouseenter="hoverTitle('business-key')"
              ng-mouseleave="hoverTitle()">
            {{ processInstance.businessKey }}
          </dd>
          <dt ng-if="!processInstance.businessKey">
            <span tooltip="Business key of the process instance">Business Key:</span>
          </dt>
          <dd ng-if="!processInstance.businessKey"
              class="business-key"><span class="null-value">null</span></dd>

          <dt>Definition Version:</dt>
          <dd class="definition-version">
            {{ processDefinition.version }}
            <a ng-href="{{ getMigrationUrl() }}"
               class="instance-upgrade-link"
               ng-if="hasMigrationPlugin && !isLatestVersion()">
              <span class="glyphicon glyphicon-arrow-up"
                    tooltip="Migrate this instance to latest version"></span>
            </a>
          </dd>

          <dt cam-widget-clipboard="processDefinition.id"
              ng-class="{hovered: hovered === 'definition-id'}">Definition ID:</dt>
          <dd class="definition-id"
              ng-mouseenter="hoverTitle('definition-id')"
              ng-mouseleave="hoverTitle()">
            <a ng-href="#/process-definition/{{ processDefinition.id }}/runtime">{{ processDefinition.id }}</a>
          </dd>

          <dt cam-widget-clipboard="processDefinition.key"
              ng-class="{hovered: hovered === 'definition-key'}">Definition Key:</dt>
          <dd class="definition-key"
              ng-mouseenter="hoverTitle('definition-key')"
              ng-mouseleave="hoverTitle()">{{ processDefinition.key }}</dd>

          <dt>Definition Name:</dt>
          <dd class="definition-name">{{ processDefinition.name }}</dd>

          <dt ng-if="processInstance.tenantId"
              ng-class="{hovered: hovered === 'tenant-id'}"
              cam-widget-clipboard="processInstance.tenantId">Tenant ID:</dt>
          <dd class="tenant-id"
              ng-if="processInstance.tenantId"
              ng-mouseenter="hoverTitle('tenant-id')"
              ng-mouseleave="hoverTitle()">{{ processInstance.tenantId }}</dd>
          <dt ng-if="!processInstance.tenantId">Tenant ID:</dt>
          <dd class="tenant-id"
              ng-if="!processInstance.tenantId"><span class="null-value">null</span></dd>

          <dt cam-widget-clipboard="processDefinition.deploymentId"
              ng-class="{hovered: hovered === 'deployment-id'}">Deployment ID:</dt>
          <dd class="deployment-id"
              ng-mouseenter="hoverTitle('deployment-id')"
              ng-mouseleave="hoverTitle()">
            <a ng-href="{{ getDeploymentUrl() }}">{{ processDefinition.deploymentId }}</a>
          </dd>

          <dt ng-if="hasMigrationPlugin">Related:</dt>
          <dd ng-if="hasMigrationPlugin">
            <ul>
              <li>
                <a ng-href="#/migration?searchQuery=%5B%5D&sourceKey={{ processDefinition.key }}">Migration</a>
              </li>
            </ul>
          </dd>
        </dl>
      </div>

      <div class="tab-content filters"
           ng-if="sidebarTab === 'filters'">
        <h5>
          Filter
          <span class="glyphicon glyphicon-info-sign"
                tooltip="The activity instance tree with all currently selected activity instances. You may change the selection via (CTRL +) click."></span>
        </h5>

        <div cam-quick-filter
             name-filter
             holder-selector=".instance-tree"
             label-selector=".tree-node-label"
             item-selector=".tree-node-group">
        </div>

        <div class="filter-selection">
          <button class="btn btn-link btn-xs btn-control"
                  ng-show="filterData.activityInstanceCount"
                  ng-click="clearSelection()">
            <span class="glyphicon glyphicon-remove"></span>
          </button>

          <ng-pluralize count="filterData.activityInstanceCount"
                        when="{ 'null' : 'Nothing',
                                '0': 'Nothing',
                                'one': '1 activity instance',
                                'other': '{{ filterData.activityInstanceCount }} activity instances'}">
{'fraction_non_alphanumeric': 0.15571300594510953, 'fraction_numerical': 0.0009772782799902272, 'mean_word_length': 2.0380999505195447, 'pattern_counts': {'":': 0, '<': 217, '<?xml version=': 0, '>': 217, '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': '5559089', 'n_tokens_mistral': 3396, 'n_tokens_neox': 3289, 'n_words': 595}