ui/src/components/distribution_panel.scss

// Copyright (C) 2026 The Android Open Source Project
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

.pf-distribution-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;

  &--placeholder {
    opacity: 0.4;
    pointer-events: none;
  }

  &__placeholder-chart {
    height: 220px;
    border: 1px dashed var(--pf-color-border);
    border-radius: 4px;
  }

  &__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }

  &__histogram-toolbar {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    min-height: 24px;
  }

  // Two side-by-side bordered Trees: count/total/min/mean/max on the left,
  // percentiles on the right.
  &__stats {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    font-variant-numeric: tabular-nums;
  }
}

.pf-distribution-panel {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  min-height: 0;
  gap: 8px;
  padding: 8px;
  box-sizing: border-box;

  // Instances pane (left): flex chain so the DataGrid (with fillHeight) can
  // virtual scroll within its own bounds rather than expanding the panel.
  &__instances {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;

    > .pf-section {
      display: flex;
      flex-direction: column;
      flex: 1 1 0;
      min-height: 0;

      > article {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        padding: 0;
      }
    }
  }

  // Histogram pane (right): scrollable for when stats overflow.
  &__histogram {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    overflow-y: auto;
  }
}

// Cap the header title width so long slice names don't push the description
// and buttons off-screen; overflow is clipped with an ellipsis (the full text
// stays available as a native tooltip, see view()).
.pf-distribution-shell .pf-header-title {
  max-width: 400px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

// When the distribution panel is the body of a fill-height DetailsShell, the
// shell's pf-content tries to scroll itself; suppress that so the DataGrid in
// the right pane handles its own virtual scroll instead.
.pf-details-shell.pf-fill-height .pf-content:has(> .pf-distribution-panel) {
  overflow-y: hidden;
}

// Wraps the greyed-out placeholder so the "Load distribution" button can sit
// on top of the chart area instead of below the whole summary.
.pf-distribution-summary-gate {
  position: relative;
}

.pf-distribution-summary-gate__overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

// "View matching slices" button under the inline DistributionSummary in the
// slice details panel.
.pf-thread-slice-distribution-link {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

// Scope picker shown above the inline histogram in the slice details panel.
.pf-thread-slice-distribution-scope {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--pf-font-size-s);
  color: var(--pf-color-foreground-muted);
  margin-bottom: 4px;
}

// Help icon shown next to a Section title via titleWithHelp().
.pf-section-title-with-help {
  display: inline-flex;
  align-items: center;
  gap: 4px;

  &__icon {
    color: var(--pf-color-foreground-muted);
    cursor: help;
    font-size: var(--pf-font-size-m);
  }
}