<commit_before>
.column-manager {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  overflow: auto;
  margin-top: 2px;

  // disable selection in the whole main view
  user-select: none;

  .columnList {
    display: flex;
    align-items: stretch;
    padding: 0;
  }

  .column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-right: 2px;

    .toolbar {
      text-align: center;

      div.visChooser,
      a {
        display: inline-block;
        cursor: pointer;
        color: $toolbar-link-color;

        &:active,
        &:focus,
        &:hover {
          color: $toolbar-link-hover-color;
        }

        &.active {
          color: $toolbar-link-active-color;
        }
      }

      div.visChooser {
        position: relative;

        div {
          display: none;
          flex-direction: column;
          position: absolute;
          z-index: 999;
          background: #fff;
          padding: 2px;
          border: 1px solid $header-bg-color;

          > i {
            display: block;
            cursor: pointer;
            width: 1.2em;

            /*&:after {
              content: attr(title);
            }*/

            &:hover {
              background: $header-bg-color;
            }
          }

          > i + i {
            margin-top: 3px;
          }
        }

        &:hover {
          div {
            display: flex;
          }
        }
      }

    }

    .columnHeader {
      display: flex;
      flex-direction: column;
      position: relative;
      background: $header-bg-color;
      margin-bottom: 2px;
      min-width: 10px;
      padding: 3px;

      .labelName {
        cursor: move;
        display: flex;
        justify-content: center;
        padding: 0 2px 3px;

        i {
          margin-right: 3px;
        }

        span {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: center;
          font-weight: 500;
        }
      }

      .toolbar {
        a + div.visChooser,
        div.visChooser + a,
        div.visChooser + div.visChooser,
        a + a {
          margin-left: 5px;
        }
      }

    }

    main {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      // height: 600px;
      //align-items: center;
    }

    // column stratification
    aside {
      ol, li {
        list-style-type: none;
        padding: 0;
        margin-top: 5px;

        &:empty {
          margin-top: 0;
        }
      }
    }
  }

  .column.aggSwitcher {
    main > div {
      margin-bottom: $gap-between-stratifications;
      display: flex;
      flex-direction: column;

      background: $header-bg-color;
      padding: 5px 0;

      a + a {
        margin-top: 3px;
      }
    }
  }

  .column.column-matrix {
    position: relative;
    aside .labelName {
      position: absolute;
      right: 0;
      margin-right: 101%;
      margin-top: 5%;
      white-space: nowrap;
    }

    & ~ .column.column-matrix {
      aside .labelName {
        position: absolute;
        left: 0;
        margin-left: 101%;
        white-space: nowrap;
      }
    }<commit_msg>Fixed label for column stratifications<commit_after>
.column-manager {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  overflow: auto;
  margin-top: 2px;

  // disable selection in the whole main view
  user-select: none;

  .columnList {
    display: flex;
    align-items: stretch;
    padding: 0;
  }

  .column {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-right: 2px;

    .toolbar {
      text-align: center;

      div.visChooser,
      a {
        display: inline-block;
        cursor: pointer;
        color: $toolbar-link-color;

        &:active,
        &:focus,
        &:hover {
          color: $toolbar-link-hover-color;
        }

        &.active {
          color: $toolbar-link-active-color;
        }
      }

      div.visChooser {
        position: relative;

        div {
          display: none;
          flex-direction: column;
          position: absolute;
          z-index: 999;
          background: #fff;
          padding: 2px;
          border: 1px solid $header-bg-color;

          > i {
            display: block;
            cursor: pointer;
            width: 1.2em;

            /*&:after {
              content: attr(title);
            }*/

            &:hover {
              background: $header-bg-color;
            }
          }

          > i + i {
            margin-top: 3px;
          }
        }

        &:hover {
          div {
            display: flex;
          }
        }
      }

    }

    .columnHeader {
      display: flex;
      flex-direction: column;
      position: relative;
      background: $header-bg-color;
      margin-bottom: 2px;
      min-width: 10px;
      padding: 3px;

      .labelName {
        cursor: move;
        display: flex;
        justify-content: center;
        padding: 0 2px 3px;

        i {
          margin-right: 3px;
        }

        span {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: center;
          font-weight: 500;
        }
      }

      .toolbar {
        a + div.visChooser,
        div.visChooser + a,
        div.visChooser + div.visChooser,
        a + a {
          margin-left: 5px;
        }
      }

    }

    main {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      // height: 600px;
      //align-items: center;
    }

    // column stratification
    aside {
      ol, li {
        list-style-type: none;
        padding: 0;
        margin-top: 5px;

        &:empty {
          margin-top: 0;
        }
      }
    }
  }

  .column.aggSwitcher {
    main > div {
      margin-bottom: $gap-between-stratifications;
      display: flex;
      flex-direction: column;

      background: $header-bg-color;
      padding: 5px 0;

      a + a {
        margin-top: 3px;
      }
    }
  }

  .column.column-matrix {
    position: relative;
    aside .labelName {
      position: absolute;
      right: 0;
      margin-right: 101%;
      //margin-top: 5%; // doesn't work for smaller heights like heat map
      white-space: nowrap;
    }

    & ~ .column.column-matrix {
      aside .labelName {
        position: absolute;
        left: 0;
        margin-left: 101%;
        white-space: nowrap;
      }
    }
{'fraction_non_alphanumeric': 0.11104266132758356, 'fraction_numerical': 0.013861081164330817, 'mean_word_length': 1.2642956764295676, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4015902', 'n_tokens_mistral': 2135, 'n_tokens_neox': 1973, 'n_words': 454}