ui/src/shared/components/graph/graph-panel.scss
@import 'node_modules/argo-ui/src/styles/config';

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(1.3);
  }
  50% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.node-search-bar {
  display: inline-block;
  margin-left: 10px;
}

.graph-options-panel {
  margin: 10px;
  padding: 10px;
  display: inline-block;
  background-color: white;
  box-shadow: 1px 1px 3px $argo-color-gray-5;
  position: fixed;

  div.argo-dropdown, a {
    padding: 5px;
    color: $argo-color-gray-6;
    border: 1px solid transparent;
    border-radius: 5px;

    &.active {
      background-color: $argo-color-gray-3;
      border: 1px solid $argo-color-gray-4;
    }
  }
}

.graph {
  text-align: center;
  max-height: calc(100vh - 2 * #{$top-bar-height});

  .group {
    rect {
      fill: transparent;
      stroke: $argo-color-gray-4;
      stroke-dasharray: 4;
    }
  }

  text {
    text-anchor: middle;
    dominant-baseline: central;

    &.node-label {
      fill: $argo-color-gray-8;
    }
  }

  .node {
    cursor: pointer;

    text {
      fill: $argo-color-gray-1;
    }

    .bg {
      fill: $argo-color-gray-6;
    }

    &.Warning, &.Pending {
      .bg {
        fill: $argo-status-warning-color;
      }
    }

    &.Suspended {
      .bg {
        fill: $argo-status-warning-color;
      }

      animation: pulse 2s linear infinite;
    }

    &.Skipped, &.Omitted {
      .bg {
        fill: $argo-color-gray-6;
      }
    }

    &.Running {
      .bg {
        fill: $argo-running-color;
      }

      text.icon {
        animation: spin 1s linear infinite;
      }
    }

    &.Succeeded {
      .bg {
        fill: $argo-success-color;
      }
    }

    &.Error, &.Failed {
      .bg {
        fill: $argo-failed-color;
      }
    }

    &.selected {
      .bg {
        stroke: $argo-color-yellow;
      }
    }

    path.icon {
      fill: transparent;
      stroke: $argo-color-gray-2;
    }
  }

  .edge {
    text {
      fill: $argo-color-gray-8;
    }

    .line {
      fill: transparent;
      stroke: $argo-color-gray-4;
    }

    .edge-label {
      transform: rotate(-22.5deg);
    }

    &.arrow .line {
      marker-end: url(#arrow);
    }

    &.related .line {
      stroke-dasharray: 2;
    }
  }

  .arrow {
    fill: $argo-color-gray-4;
  }
}
