tez-ui/src/main/webapp/app/styles/dag-view.less

/**
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you 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 "../bower_components/bootstrap/less/bootstrap";
@import "../bower_components/font-awesome/less/font-awesome";

@import "app/styles/colors.less";
@import "app/styles/shared.less";

// -- HTML styles ---
.dag-view-container {
  .no-select;
  .well;

  background-color: @bg-liter;

  position: relative;

  padding: 0px;
  width:100%;
  height: 100%;

  .svg-container {
    width:100%;
    overflow:hidden;
    height: 100%;

    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: grab;

    &.panning {
      cursor: -moz-grabbing;
      cursor: -webkit-grabbing;
      cursor: grabbing;
    }

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

  .button-panel {
    .no-select;

    position: absolute;
    top: 10px;
    right: 10px;

    // Toggle buttons
    .tgl-orientation, .tgl-additionals, .config, .timeline, .fit-graph, .tgl-fullscreen {
      .fa;
      .fa-border;
      font-size: 20px;
      border-radius: 5px;

      cursor: pointer;

      border-color: @border-lite;
      background-color: @bg-lite;

      &:hover {
        color: @bg-lite;
        background-color: @text-color;
      }
    }
    .tgl-orientation {
      .fa-icon(share-alt);
    }
    .tgl-additionals {
      .fa-icon(circle);

      &.hide-additionals {
        .fa-icon(circle-o);
      }
    }
    .config {
      .fa-icon(cog);
    }
    .timeline {
      .fa-icon(clock-o);
    }
    .fit-graph {
      .fa-icon(arrows-alt);
    }
    .tgl-fullscreen {
      .fa-icon(expand);
    }

    .seperator {
      display: inline-block;
      border-left: 1px dotted @text-color;
      height: 13px;
    }
  }

  .fullscreen {
    height: 100%;
    margin: 0px;
    .svg-container, svg {
      height: 100%;
    }

    .tgl-fullscreen {
      .fa-icon(compress);
    }
  }

  &:-webkit-full-screen {
    .fullscreen;
  }
  &:fullscreen {
    .fullscreen;
  }
  &:-moz-full-screen {
    .fullscreen;
  }
}

// -- SVG styles ---

.grey-glow {
  stroke: grey;
}

.vertex-node-bg {
  .grey-glow;
}

.input-node-bg {
  .grey-glow;
}

.output-node-bg {
  .grey-glow;
}

.task-bubble-bg {
  .grey-glow;
}

.group-bubble-bg {
  .grey-glow;
}

.node {
  cursor: pointer;

  text {
    .no-select;

    pointer-events: none;
    font: 11px sans-serif;
    text-anchor: middle;

    // Ensure to manually change the transforms in graph-view.js for IE compatibility
    -webkit-transform: translate(0px, 4px); // For safari
    -moz-transform: translate(0px, 4px);
    transform: translate(0px, 4px);
  }
}

.vertex {
  text.title {
    // Ensure to manually change the transforms in graph-view.js for IE compatibility
    -webkit-transform: translate(0px, 3px); // For safari
    transform: translate(0px, -1px);
  }

  .task-bubble {
    // Ensure to manually change the transforms in graph-view.js for IE compatibility
    -webkit-transform: translate(38px, -15px);
    transform: translate(38px, -15px);
    text {
      letter-spacing: -1px;
      text-anchor: middle;
    }
  }

  .io-bubble {
    // Ensure to manually change the transforms in graph-view.js for IE compatibility
    -webkit-transform: translate(-38px, -15px);
    transform: translate(-38px, -15px);
    opacity: 0;
    pointer-events: none;

    -moz-transition: opacity .5s ease-in-out;
    -webkit-transition: opacity .5s ease-in-out;
    transition: opacity .5s ease-in-out;

    text {
      text-anchor: middle;
    }
  }

  .group-bubble {
    // Ensure to manually change the transforms in graph-view.js for IE compatibility
    -webkit-transform: translate(38px, 15px);
    transform: translate(38px, 15px);
  }

  .status-bar {
    pointer-events: none;

    .status {
      -webkit-transform: translate(-35px, 2px);
      transform: translate(-35px, 2px);
      font: 8px Helvetica;
      text-align: center;

      .msg-container {
        border-radius: 5px;
        padding: 2px 3px 0px 1px;
        background-color: rgba(255, 255, 255, 0.3);

        .task-status {
          -webkit-animation: none !important;
          font-size: 11px;
          margin-top: 3px;
          background-color: rgba(255, 255, 255, 0.8);
          border-radius: 6px;
          vertical-align: -1px;

          width: 8px;
          height: 7px;

          &.running {
            font-size: 11px;

            width: 9px;
            height: 7px
          }
        }
      }
    }
  }
}

.hide-io {
  .vertex {
    .io-bubble {
      opacity: 1;
      pointer-events: auto;
    }
  }
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 3px;

  cursor: default;

  &.broadcast {
    stroke: #ccbb8f;
  }
}

// -- Tooltip style ---
.tool-tip {
  .no-select;

  position: fixed;
  pointer-events: none;
  display: none;

  max-width: 820px;

  .sub {
    font-size: 10px;
  }

  .bubble {
    margin-left: -11px; // Border radious + arrow margin-left

    position: relative;
    padding: 10px;

    font-family: helvetica;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 5px;

    .tip-title {
      text-align: center;
      font-size: 1.1em;
    }
    .tip-text {
      border-top: 1px solid rgba(255, 255, 255, 0.4);
      text-align: center;
      margin-bottom: -1px;
    }
    .tip-list {
      table {
        table-layout:fixed;

        border-top: 1px solid rgba(255, 255, 255, 0.4);

        td {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          max-width: 400px;
        }
        td:nth-child(1) {
          padding-right: 10px;
        }
        td:nth-child(2) {
          text-align: right;
          padding-left: 10px;
          border-left: 1px solid rgba(255, 255, 255, 0.4);
        }
      }
    }
  }

  &.show {
    display: inline-block;
  }

  &.below:after, &.above:before {
    display: inline;
    box-sizing: border-box;

    font-size: 12px;
    line-height: 9px;

    color: rgba(0, 0, 0, 0.8);
    margin-left: -6px; // Half of font size
  }

  &.above {
    margin-top: 10px;
    .bubble {
      margin-top: -5px;
    }

    &:before {
      content: "\25B2";
    }
  }

  &.below {
    margin-top: -12px;
    .bubble {
      margin-bottom: -7px;
    }

    &:after {
      content: "\25BC";
    }
  }
}

.dag-view-legend {
  margin-top: -20px;
  font-size: .7em;
  text-align: right;
}