histogram_component.scss

/* Copyright 2021 The TensorFlow Authors. All Rights Reserved.

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 'tensorboard/webapp/theme/tb_theme';

:host,
.main {
  display: inline-block;
  height: 100%;
  width: 100%;
}

:host {
  box-sizing: border-box;
  padding: 10px;
}

.main {
  display: grid;
  grid-template-areas:
    'content y-axis'
    'x-axis .';
  grid-template-columns: 1fr 50px;
  grid-template-rows: 1fr 30px;

  &.wall_time {
    grid-template-columns: 1fr 75px;
  }
}

.tooltip,
.baseline {
  color: #000;

  @include tb-dark-theme {
    color: #fff;
  }
}

.linked-time-fob,
.tooltip {
  text {
    font-weight: bold;
    font-size: 10px;
  }

  text,
  circle {
    fill: currentColor;
  }

  .value-label {
    dominant-baseline: ideographic;
    text-anchor: start;
  }
}

.axis ::ng-deep {
  @include tb-theme-foreground-prop(color, secondary-text);
  position: relative;
  overflow: hidden;

  .domain,
  .tick text {
    display: none;
  }

  .tick:nth-child(2n + 1) text {
    display: initial;
  }
}

svg {
  height: 100%;
  width: 100%;
  pointer-events: visiblePainted;

  line,
  circle,
  .tooltip {
    pointer-events: none;
  }

  g {
    will-change: transform;
  }
}

.x-axis {
  grid-area: x-axis;

  .tooltip {
    dominant-baseline: hanging;
    text-anchor: middle;
  }
}

.y-axis {
  grid-area: y-axis;
  -webkit-mask-image: linear-gradient(
    to bottom,
    #0000 0%,
    #000 10%,
    #000 90%,
    #0000 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #0000 0%,
    #000 10%,
    #000 90%,
    #0000 100%
  );

  .tooltip {
    dominant-baseline: middle;
    text-anchor: start;
  }
}

.content .tick,
.axis ::ng-deep .tick line {
  stroke: #ddd;

  @include tb-dark-theme {
    stroke: map-get($tb-dark-foreground, border);
  }
}

.content {
  grid-area: content;
  // Allow overflow to be visible so that the tooltip can be shown for points
  // near the edges.
  overflow: visible;
  // Raise the content area above the axes so that the tooltip can be shown over
  // the axes marks.
  z-index: 1;

  .tick {
    stroke-width: 1px;
    stroke-dasharray: 2;
  }

  $_path-circle-opacity: 0.6;

  circle,
  path {
    fill: currentColor;
    stroke-opacity: $_path-circle-opacity;
    stroke-width: 1px;
  }

  circle {
    filter: drop-shadow(0 0 1px rgba(#000, $_path-circle-opacity));
    stroke: #fff;
    will-change: transform;
  }

  .baseline {
    stroke-opacity: 0.1;
    stroke-width: 1px;
    stroke: currentColor;
    width: 100%;
  }

  .tooltip path {
    stroke-opacity: 1;
    stroke: currentColor;
    fill: transparent;
  }

  .no-color {
    // Must override the color on style attribute.
    color: rgba(#ddd, 0.4) !important;

    path {
      stroke-opacity: 0.2;
    }

    @include tb-dark-theme {
      color: rgba(#333, 0.4) !important;
    }
  }
}

// Offset mode customizations.
.offset .content .histograms {
  path {
    stroke: #fff;

    @include tb-dark-theme {
      stroke: map-get($tb-dark-foreground, border);
    }
  }

  &.linked-time-single-step :not(.no-color) {
    path {
      stroke: #000;

      @include tb-dark-theme {
        stroke: #fff;
      }
    }
  }
}

// Overlay mode customizations.
.overlay {
  .x-axis ::ng-deep .tick line {
    display: none;
  }

  .content {
    path {
      fill-opacity: 0;
      stroke: currentColor;
    }
  }
}

// Tooltip hover interactions.
.tooltip,
.content circle {
  display: none;
}

.main:hover {
  .content circle,
  .tooltip {
    display: block;
  }
}