ui/src/plugins/dev.perfetto.ExplorePage/query_builder/builder.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 "common";
@import "./graph/graph.scss";
@import "./empty_graph.scss";
@import "./help.scss";
@import "./graph/node_box.scss";
@import "./graph/node_container.scss";
@import "./graph/node_block.scss";
@import "./node_explorer.scss";
@import "./operations/operation_component.scss";
@import "./nodes/sources/slices_source.scss";
@import "./nodes/sources/table_source.scss";
@import "./nodes/aggregation_node.scss";
@import "./nodes/modify_columns_node.scss";

.pf-query-builder-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;

  &.no-selection {
    grid-template-rows: auto 1fr;
  }

  &.selection {
    grid-template-rows: 50% 50%;
  }

  .pf-qb-node-graph {
    grid-column: 1;
    grid-row: 1;
    overflow: auto;
  }

  .pf-qb-explorer {
    grid-column: 2;
    grid-row: 1;
    overflow: auto;
  }

  .pf-qb-viewer {
    overflow: auto;
  }

  &.selection-left {
    .pf-qb-viewer {
      grid-column: 1;
      grid-row: 2;
    }
    .pf-qb-explorer {
      grid-row: 1 / span 2;
    }
  }

  &.selection-right {
    .pf-qb-viewer {
      grid-column: 2;
      grid-row: 2;
    }
    .pf-qb-node-graph {
      grid-row: 1 / span 2;
    }
  }

  &.selection-bottom {
    .pf-qb-viewer {
      grid-column: 1 / span 2;
      grid-row: 2;
    }
  }
  &.full-page {
    .pf-qb-node-graph,
    .pf-qb-explorer {
      display: none;
    }
    .pf-qb-viewer {
      grid-column: 1 / span 2;
      grid-row: 1 / span 2;
    }
  }
}