Показать все остальные элементы, которые не перекрываются

Question

Мне нужно скрыть любые промежутки с классом tick-label--top или tick-label--bottom, если они перекрывают любые другие. Я уже сделал это. Все промежутки после 120 скрыты, потому что они перекрывают друг друга. Тем не менее, я только что получил, у меня есть новый запрос. Мне нужно скрыть перекрывающиеся промежутки, но когда есть последовательные перекрывающиеся промежутки, т.е. 2 или более, мне нужно показать третий. Я пытался зацикливание, проверка индексов и т. Д. c. но другие требования вызывают проблемы.

Мои требования:

• Скрыть и перекрывать интервалы
• Всегда показывать первый и последний интервал
• Показать по крайней мере один промежуток, если есть 2 или более последовательно перекрывающихся промежутка

Любая помощь будет принята, и я знаю, что это довольно много кода, но я вынул как можно больше, все еще будучи в состоянии повторить проблему.

function checkOverlappingLabels(periodIndex = 0) {
  let firstTickTopLabel = document.querySelector('.first-tick .tick-label--top');
  let firstTickBtmLabel = document.querySelector('.first-tick .tick-label--bottom');
  let ticks = document.querySelectorAll('.tick');
  let lastTickTopLabel = document.querySelector('.last-tick .tick-label--top');
  let lastTickBtmLabel = document.querySelector('.last-tick .tick-label--bottom');
  let tickTopLabels = document.querySelectorAll('.tick-label--top');
  let tickBtmLabels = document.querySelectorAll('.tick-label--bottom');
  let currentTickTopLabel = document.querySelectorAll('.tick-label--top')[periodIndex];
  let currentTickBtmLabel = document.querySelectorAll('.tick-label--bottom')[periodIndex];
  let isOverlapping = false;
  let isFirstTickIsOverlappingCurrent = false;
  let isLastTickIsOverlappingCurrent = false;

  let rightPos = (elem) => elem && elem.getBoundingClientRect().right;
  let leftPos = (elem) => elem && elem.getBoundingClientRect().left;

  // hide all ticks
  tickTopLabels.forEach(x => x.classList.add('hide-tick'))
  tickBtmLabels.forEach(x => x.classList.add('hide-tick'))

  // checks for when top & bottom labels are shown
  // show first and last ticks
  firstTickTopLabel.classList.remove('hide-tick');
  firstTickBtmLabel.classList.remove('hide-tick');
  lastTickTopLabel.classList.remove('hide-tick');
  lastTickBtmLabel.classList.remove('hide-tick');

  // loop thru all ticks and hide any that are overlapping each other
  // check both top and bottom labels
  for (let i = 0; i < ticks.length; i++) {
    for (let j = i + 1; j < ticks.length; j++) {
      isOverlapping = !(
        (
          rightPos(ticks[i].querySelector('.tick-label--top')) < leftPos(ticks[j].querySelector('.tick-label--top')) ||
          leftPos(ticks[i].querySelector('.tick-label--top')) > rightPos(ticks[j].querySelector('.tick-label--top'))
        ) &&
        (
          rightPos(ticks[i].querySelector('.tick-label--bottom')) < leftPos(ticks[j].querySelector('.tick-label--bottom')) ||
          leftPos(ticks[i].querySelector('.tick-label--bottom')) > rightPos(ticks[j].querySelector('.tick-label--bottom'))
        )
      );
      if (isOverlapping) {
        ticks[j].querySelector('.tick-label--bottom').classList.add('hide-tick');
        ticks[j].querySelector('.tick-label--top').classList.add('hide-tick');
      } else {
        ticks[j].querySelector('.tick-label--bottom').classList.remove('hide-tick');
        ticks[j].querySelector('.tick-label--top').classList.remove('hide-tick');
      }
    }
  }

  // loop thru all ticks and hide any that are overlapping the current tick
  // check both top and bottom labels
  for (let i = 0; i < ticks.length; i++) {
    isOverlapping = !(
      (
        rightPos(currentTickTopLabel) < leftPos(ticks[i].querySelector('.tick-label--top')) ||
        leftPos(currentTickTopLabel) > rightPos(ticks[i].querySelector('.tick-label--top'))
      ) &&
      (
        rightPos(currentTickBtmLabel) < leftPos(ticks[i].querySelector('.tick-label--bottom')) ||
        leftPos(currentTickBtmLabel) > rightPos(ticks[i].querySelector('.tick-label--bottom'))
      )
    );

    if (isOverlapping) {
      ticks[i].querySelector('.tick-label--bottom').classList.add('hide-tick');
      ticks[i].querySelector('.tick-label--top').classList.add('hide-tick');
    }
  }

  // check if first tick is overlapping current tick
  isFirstTickIsOverlappingCurrent = !(
    (rightPos(firstTickBtmLabel) < leftPos(currentTickBtmLabel) ||
      leftPos(firstTickBtmLabel) > rightPos(currentTickBtmLabel)) &&
    (rightPos(firstTickTopLabel) < leftPos(currentTickTopLabel) ||
      leftPos(firstTickTopLabel) > rightPos(currentTickTopLabel))
  );
  if (isFirstTickIsOverlappingCurrent) {
    firstTickTopLabel.classList.add('hide-tick');
    firstTickBtmLabel.classList.add('hide-tick');
  } else {
    firstTickTopLabel.classList.remove('hide-tick');
    firstTickBtmLabel.classList.remove('hide-tick');
  }

  // check if last tick is overlapping current tick
  isLastTickIsOverlappingCurrent = !(
    (rightPos(lastTickBtmLabel) < leftPos(currentTickBtmLabel) ||
      leftPos(lastTickBtmLabel) > rightPos(currentTickBtmLabel)) &&
    (rightPos(lastTickTopLabel) < leftPos(currentTickTopLabel) ||
      leftPos(lastTickTopLabel) > rightPos(currentTickTopLabel))
  );

  if (isLastTickIsOverlappingCurrent) {
    lastTickTopLabel.classList.add('hide-tick');
    lastTickBtmLabel.classList.add('hide-tick');
  } else {
    lastTickTopLabel.classList.remove('hide-tick');
    lastTickBtmLabel.classList.remove('hide-tick');
  }

  // show currentTick
  currentTickTopLabel.classList.remove('hide-tick');
  currentTickBtmLabel.classList.remove('hide-tick');

}

checkOverlappingLabels();

.progress {
  height: 20px;
  margin: 40px 0;
  max-width: 600px;
  border-radius: 10px;
  overflow: initial;
  position: relative;
  border-left: 7.5px solid #e9ecef;
  border-right: 20px solid #e9ecef;
  background-color: #e9ecef;
}

.tick {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  margin-left: -4px;
  padding: 0 6px;
  position: absolute;
  z-index: 10;
}

.tick-label {
  position: absolute;
  white-space: nowrap;
}

.tick div {
  position: absolute;
  height: 7px;
  width: 7px;
  border-radius: 50%;
  transition: background-color 0.6s ease;
  background-color: black;
}

.tick-label--top {
  top: -10px;
  line-height: 0;
}

.tick-label--bottom {
  bottom: -10px;
  line-height: 0;
}

.hide-tick {
  opacity: 0;
}

<div class="progress">
  <div>
    <div class="tick first-tick" style="left: 0%;"><span class="tick-label tick-label--top">Base</span><span class="tick-label tick-label--bottom"></span>
      <div></div>
    </div>
    <div class="tick" style="left: 5.84%;"><span class="tick-label tick-label--top">T16</span><span class="tick-label tick-label--bottom">B16</span>
      <div></div>
    </div>
    <div class="tick" style="left: 12.06%;"><span class="tick-label tick-label--top">T32</span><span class="tick-label tick-label--bottom">B32</span>
      <div></div>
    </div>
    <div class="tick" style="left: 46.3%;"><span class="tick-label tick-label--top">120</span><span class="tick-label tick-label--bottom">midterm</span>
      <div></div>
    </div>
    <div class="tick" style="left: 49.42%;"><span class="tick-label tick-label--top ">1</span><span class="tick-label tick-label--bottom">128</span>
      <div></div>
    </div>
    <div class="tick" style="left: 49.81%;"><span class="tick-label tick-label--top">128</span><span class="tick-label tick-label--bottom">128</span>
      <div></div>
    </div>
    <div class="tick" style="left: 50.19%;"><span class="tick-label tick-label--top ">130</span><span class="tick-label tick-label--bottom"></span>
      <div></div>
    </div>
    <div class="tick" style="left: 53.31%;"><span class="tick-label tick-label--top ">138</span><span class="tick-label tick-label--bottom"></span>
      <div></div>
    </div>
    <div class="tick" style="left: 56.42%;"><span class="tick-label tick-label--top ">146</span><span class="tick-label tick-label--bottom"></span>
      <div></div>
    </div>
    <div class="tick" style="left: 59.53%;"><span class="tick-label tick-label--top ">154</span><span class="tick-label tick-label--bottom"></span>
      <div></div>
    </div>
    <div class="tick" style="left: 62.65%;"><span class="tick-label tick-label--top ">162</span><span class="tick-label tick-label--bottom"></span>
      <div></div>
    </div>
    <div class="tick" style="left: 65.76%;"><span class="tick-label tick-label--top ">170</span><span class="tick-label tick-label--bottom"></span>
      <div></div>
    </div>
    <div class="tick" style="left: 68.87%;"><span class="tick-label tick-label--top ">178</span><span class="tick-label tick-label--bottom"></span>
      <div></div>
    </div>
    <div class="tick" style="left: 71.98%;"><span class="tick-label tick-label--top ">186</span><span class="tick-label tick-label--bottom"></span>
      <div></div>
    </div>
    <div class="tick" style="left: 75.1%;"><span class="tick-label tick-label--top ">194</span><span class="tick-label tick-label--bottom"></span>
      <div></div>
    </div>
    <div class="tick" style="left: 78.21%;"><span class="tick-label tick-label--top ">202</span><span class="tick-label tick-label--bottom"></span>
      <div></div>
    </div>
    <div class="tick" style="left: 81.32%;"><span class="tick-label tick-label--top ">210</span><span class="tick-label tick-label--bottom"></span>
      <div></div>
    </div>
    <div class="tick" style="left: 84.44%;"><span class="tick-label tick-label--top ">218</span><span class="tick-label tick-label--bottom"></span>
      <div></div>
    </div>
    <div class="tick" style="left: 87.55%;"><span class="tick-label tick-label--top ">226</span><span class="tick-label tick-label--bottom"></span>
      <div></div>
    </div>
    <div class="tick" style="left: 90.66%;"><span class="tick-label tick-label--top ">234</span><span class="tick-label tick-label--bottom"></span>
      <div></div>
    </div>
    <div class="tick" style="left: 93.77%;"><span class="tick-label tick-label--top ">242</span><span class="tick-label tick-label--bottom"></span>
      <div></div>
    </div>
    <div class="tick" style="left: 96.89%;"><span class="tick-label tick-label--top ">250</span><span class="tick-label tick-label--bottom"></span>
      <div></div>
    </div>
    <div class="tick last-tick" style="left: 100%;"><span class="tick-label tick-label--top">258</span><span class="tick-label tick-label--bottom"></span>
      <div></div>
    </div>
  </div>
</div>