ui/src/plugins/dev.perfetto.DataExplorer/styles.scss

// Copyright (C) 2025 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.

@import "./query_builder/builder.scss";
@import "./query_builder/results_panel.scss";
@import "./dashboard/dashboard.scss";

.pf-data-explorer {
  height: 100%;
  position: relative;
  overflow: hidden;

  &__header {
    display: flex;
    align-items: center;
  }

  &__tabs {
    height: 100%;

    // Override the default overflow:auto on tab content. The Data Explorer
    // manages its own layout (sidebar + canvas) and does not need container
    // scrollbars, which can cause scroll jumps when switching tabs.
    .pf-tabs__content {
      overflow: hidden;
    }
  }

  &__tab-actions {
    display: flex;
    align-items: center;
  }

  // Wrapper with nested sub-tabs (Graph | Dashboard). Uses flex column
  // so the sub-tab bar gets its natural height and the content fills rest.
  &__tab-with-subtabs {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  &__sub-tab-bar {
    flex-shrink: 0;
    padding: 4px 8px;
    border-bottom: 1px solid var(--pf-color-border);
  }

  // Wrapper for each tab's Builder content. The Tabs widget uses Gate
  // (display:contents) which has clientHeight === 0; DrawerPanel needs
  // a real sized parent to measure its container height.
  &__tab-content {
    height: 100%;
    min-height: 0;
    flex: 1;
  }
}

// Styles for node documentation (loaded from markdown)
.pf-node-info {
  line-height: 1.6;

  h1 {
    font-size: var(--pf-font-size-xl);
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--pf-color-border);
    padding-bottom: 0.5rem;
  }

  h2 {
    font-size: var(--pf-font-size-l);
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
  }

  h3 {
    font-size: var(--pf-font-size-m);
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
  }

  p {
    margin-top: 0;
    margin-bottom: 1rem;
  }

  strong {
    font-weight: 600;
  }

  code {
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    font-family: var(--monospace-font);
    font-size: 0.9em;
  }

  pre {
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    margin: 1rem 0;

    code {
      padding: 0;
    }
  }

  ul,
  ol {
    margin: 0.5rem 0 1rem 1.5rem;
    padding-left: 0;
  }

  li {
    margin-bottom: 0.25rem;
  }

  &-loading {
    font-style: italic;
  }

  &-error {
    color: var(--pf-color-danger);
  }
}

// Table source specific styling
.pf-table-source-selected {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 2px solid var(--pf-color-border);

  h2 {
    font-size: 1.2em;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 1rem;
  }

  .pf-details-box {
    padding: 1rem;
    border-radius: 4px;
    border: 1px solid var(--pf-color-border);
  }
}

// Time range source specific styling
.pf-timerange-current-data {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 2px solid var(--pf-color-border);

  h2 {
    font-size: 1.2em;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 1rem;
  }

  .pf-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;

    th,
    td {
      padding: 0.5rem;
      text-align: left;
      border: 1px solid var(--pf-color-border);
    }

    th {
      font-weight: 600;
    }
  }

  .pf-timerange-info-mode {
    font-style: italic;
    margin-top: 0.5rem;
  }
}

// Visualisation node details in node graph
.pf-visualisation-node-details {
  display: flex;
  flex-direction: column;
  gap: 4px;

  &__config {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  &__type {
    font-weight: 500;
  }

  &__column {
    color: var(--pf-color-text-secondary);
  }
}

// Chart view container (for ResultsPanel integration)
.pf-chart-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;

  &__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 12px;
    flex-shrink: 0;
  }

  &__title {
    font-size: var(--pf-font-size-m);
    font-weight: 500;
    color: var(--pf-color-text);
  }

  &__charts {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    overflow: auto;
    // Prevent flex lines from stretching to fill container height.
    // Cards have fixed height and should not resize with the panel.
    align-content: flex-start;
  }

  &__column-picker {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 100%;

    select {
      max-width: 250px;
    }
  }

  // Single chart container (extends Card widget)
  &__single {
    display: flex;
    flex-direction: column;
    overflow: visible;
    position: relative;
    // Fixed height: header (~36px) + content (250px) + padding (8px top)
    height: 294px;
    flex-shrink: 0;
    // Override Card padding
    padding: 0;

    // Resize handle positioned on right edge
    > .pf-resize-handle {
      position: absolute;
      right: -3px;
      top: 0;
      bottom: 0;
      height: auto;
      background: transparent;

      // Hide the default line - chart border is sufficient
      &::after {
        display: none;
      }
    }
  }

  &__single-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    font-size: var(--pf-font-size-s);
    font-weight: 500;
    color: var(--pf-color-text);
    background: var(--pf-color-background-secondary);
    border-bottom: 1px solid var(--pf-color-border);
    flex-shrink: 0;
  }

  &__single-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 8px;
  }

  &__single-header-text {
    flex: 1;
    padding: 8px 12px;
    cursor: pointer;
    transition: background 0.15s ease;

    &:hover {
      background: var(--pf-color-hover);
    }
  }

  &__single-header-input {
    flex: 1;
    padding: 8px 12px;
    border: none;
    outline: none;
    font-size: var(--pf-font-size-s);
    font-weight: 500;
    font-family: inherit;
    background: var(--pf-color-background);
    color: var(--pf-color-text);
    box-sizing: border-box;
  }

  // Draggable header styling
  &__single-header--draggable {
    cursor: grab;

    &:active {
      cursor: grabbing;
    }
  }

  &__single--dragging {
    opacity: 0.5;
  }

  &__single--drag-over {
    border-color: var(--pf-color-primary);
    border-style: dashed;
  }

  &__single-content {
    height: 250px; // Fixed height for chart container
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 8px 0;
    overflow: hidden;

    // Datagrid fills the content area edge-to-edge with no padding.
    &--datagrid {
      padding: 0;
      align-items: stretch;
      justify-content: stretch;
    }
  }
}

// Chart grid layouts — charts never grow beyond their basis.
.pf-chart-grid {
  &--1,
  &--2,
  &--2x2,
  &--3 {
    .pf-chart-view__single {
      flex: 0 1 calc(33.333% - 11px);
      min-width: 300px;
    }
  }
}

// Applied when the user resizes a chart via the resize handle.
// Doubled class selector bumps specificity to (0,2,0) so it overrides
// the .pf-chart-grid--X .pf-chart-view__single rules above.
.pf-chart-view__single--custom-width.pf-chart-view__single--custom-width {
  width: var(--pf-chart-width);
  flex: none;
}

// Chart config popup - horizontal form layout
.pf-chart-config-popup {
  // Override form styles for horizontal layout
  .pf-form {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    align-items: center;
    padding: 12px;
    min-width: 280px;
  }

  // FormLabel uses display:contents so its children become grid items
  .pf-form__label {
    display: contents;
    margin-bottom: 0;

    // Label text (the span)
    > span {
      font-size: var(--pf-font-size-s);
      color: var(--pf-color-text-secondary);
      font-weight: 500;
      white-space: nowrap;
    }
  }

  // Inputs take full width of their column
  .pf-select {
    width: 100%;
    min-width: 140px;
    margin-bottom: 0;
  }

  input[type="number"] {
    width: 100%;
    min-width: 140px;
    padding: 6px 8px;
    border: 1px solid var(--pf-color-border);
    border-radius: 4px;
    font-size: var(--pf-font-size-s);
    font-family: inherit;
    background: var(--pf-color-background);
    color: var(--pf-color-text);
    box-sizing: border-box;

    &:focus {
      outline: none;
      border-color: var(--pf-color-primary);
    }

    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      opacity: 1;
    }
  }

  // Button bar spans full width
  .pf-form__button-bar {
    grid-column: 1 / -1;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--pf-color-border);
  }
}

// Chart cards container in modify panel
.pf-chart-cards-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

// Individual chart card (extends Card widget)
.pf-chart-card {
  overflow: hidden;
  padding: 0;

  &--collapsed {
    .pf-chart-card__header {
      border-bottom: none;
    }
  }

  &__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--pf-color-background-secondary);
    border-bottom: 1px solid var(--pf-color-border);
    cursor: pointer;
    user-select: none;

    &:hover {
      background: var(--pf-color-hover);
    }
  }

  &__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pf-color-text-secondary);
  }

  &__info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
    color: var(--pf-color-text);

    .pf-icon {
      color: var(--pf-color-primary);
      flex-shrink: 0;
    }
  }

  &__title {
    font-size: var(--pf-font-size-s);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: text;

    &:hover {
      color: var(--pf-color-primary);
    }
  }

  &__title-input {
    font-size: var(--pf-font-size-s);
    font-weight: 500;
    border: none;
    background: transparent;
    outline: none;
    padding: 0;
    margin: 0;
    font-family: inherit;
    color: var(--pf-color-text);
    flex: 1;
    min-width: 0;

    &::placeholder {
      color: var(--pf-color-text-muted);
      font-style: italic;
    }
  }

  &__actions {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  &__filter-count {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 20px;
    padding: 0 4px 0 8px;
    border-radius: 10px;
    background: var(--pf-color-primary);
    color: white;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
  }

  &__filter-count-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    opacity: 0.7;

    &:hover {
      opacity: 1;
      background: rgba(255, 255, 255, 0.3);
    }
  }

  &__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
  }

  &__filter-label {
    font-size: var(--pf-font-size-xs);
    color: var(--pf-color-text-secondary);
  }

  &__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  &__empty-message {
    color: var(--pf-color-text-muted);
    font-size: var(--pf-font-size-s);
    font-style: italic;
    text-align: center;
    padding: 16px 8px;
  }
}

// Chart type picker — visual grid of chart types shown when adding a chart.
.pf-chart-type-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 4px 8px;

  &__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 6px 8px;
    border: 1px solid var(--pf-color-border-secondary);
    border-radius: 8px;
    background: var(--pf-color-background);
    cursor: pointer;
    transition:
      border-color 0.15s,
      box-shadow 0.15s,
      background 0.15s;
    // Reset button defaults
    font: inherit;
    color: inherit;

    &:hover {
      border-color: var(--pf-color-primary);
      background: var(--pf-color-surface-highlight);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    &:focus-visible {
      outline: 2px solid var(--pf-color-primary);
      outline-offset: 2px;
    }

    &:active {
      transform: scale(0.97);
    }

    &.pf-selected {
      border-color: var(--pf-color-primary);
      background: var(--pf-color-surface-highlight);
      box-shadow: 0 0 0 1px var(--pf-color-primary);
    }
  }

  &__preview {
    width: 52px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  &__label {
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    color: var(--pf-color-text);
    white-space: nowrap;
  }

  &__empty {
    padding: 12px 16px;
    font-size: 12px;
    color: var(--pf-color-text-muted);
    text-align: center;
  }
}

// Group node — sharp rectangle with strong border
.pf-node.pf-node--group {
  background: var(--pf-color-background);
  border-radius: 0;
  border: 2px solid var(--pf-color-text);

  .pf-node-header {
    border-radius: 0;
  }

  &.pf-invalid {
    border-color: var(--pf-color-danger);
    background: color-mix(
      in srgb,
      var(--pf-color-danger) 8%,
      var(--pf-color-background)
    );
  }
}

.pf-node-wrapper:has(.pf-node--group) {
  border-radius: 0;
}

// Disconnected input node in inner graph preview
.pf-node--disconnected {
  opacity: 0.4;
}

// Embedded read-only graph preview for group node side panel
.pf-group-inner-graph {
  position: relative;
  height: 300px;
  border: 1px solid var(--pf-color-border);
  border-radius: 4px;
  overflow: hidden;

  .pf-group-inner-graph__controls {
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: 1;
  }
}

// Read-only column items in group node — reuse draggable-item look without drag
.pf-group-column-readonly {
  cursor: default;

  .pf-column-type {
    cursor: default;
  }
}