function configureSegments()

in src/core/configurableTL.ts [1131:1240]

• 92 lines of code
• 22 McCabe index (conditional complexity)

function configureSegments(timeline_container, duration, width, height, tl_layout, tl_representation, tl_scale, unit_width) {
  const timeline_segment = timeline_container.selectAll(".timeline_segment")
    .data(globals.segments.domain());

  let segment_number = 0;

  const timeline_segment_exit = timeline_segment.exit().transition("timeline_segment_exit")
    .duration(duration)
    .remove();

  // define each segment and its rect container
  const timeline_segment_enter = timeline_segment.enter()
    .append("g")
    .attr("class", "timeline_segment")
    .each(insertFacetAtAxis);

  const timeline_segment_update = timeline_segment.transition("timeline_segment_update")
    .duration(duration);

  timeline_segment_enter.append("rect")
    .attr("class", "timeline_segment_frame")
    .attr("width", d3.max([0, width]))
    .attr("height", 0);

  // print the name of each segment
  timeline_segment_enter.append("text")
    .attr("class", "segment_title")
    .attr("dy", "-0.5em")
    .style("text-anchor", "middle")
    .text("")
    .attr("transform", "translate(0,0)rotate(0)");

  // update segment container dimensions
  timeline_segment_update.select(".timeline_segment_frame")
    .attr("width", d3.max([0, width]))
    .attr("height", function () {
      if (tl_layout !== "Segmented" || tl_representation === "Calendar" || tl_representation === "Grid") {
        return 0;
      } else if (tl_representation === "Linear") {
        return d3.max([0, height / globals.num_segments]);
      } else if (tl_representation === "Radial") {
        return 0;
      } else if (tl_representation === "Calendar" || tl_representation === "Grid") {
        return 0;
      }

      return 0;
    })
    .attr("transform", function () {
      var offset_x,
        offset_y;

      if (tl_layout !== "Segmented" || tl_representation === "Calendar" || tl_representation === "Grid") {
        offset_x = 0;
        offset_y = 0;
      } else if (tl_representation === "Linear") {
        offset_x = 0;
        offset_y = segment_number * (height / globals.num_segments);
        segment_number++;
      } else if (tl_representation === "Radial") {
        offset_x = width / 2;
        offset_y = 0;
      } else {
        offset_x = width / 2;
        offset_y = height / 2;
      }
      return "translate(" + unNaN(offset_x) + "," + unNaN(offset_y) + ")";
    });

  segment_number = 0;

  timeline_segment_update.select("text.segment_title")
    .text(function (d) {
      if (tl_layout !== "Segmented" || tl_representation === "Calendar" || tl_representation === "Grid" || globals.segment_granularity === "epochs") {
        return "";
      }
      return d;
    })
    .attr("transform", function () {
      var offset_x = 0,
        offset_y = 0,
        rotation = 0;
      if (tl_layout !== "Segmented" || tl_representation === "Calendar" || tl_representation === "Grid") {
        offset_x = width / 2;
        offset_y = height / 2;
        rotation = 0;
      } else if (tl_representation === "Linear") {
        offset_x = 0;
        offset_y = segment_number * (height / globals.num_segments) + height / globals.num_segments / 2;
        rotation = 270;
        segment_number++;
      } else if (tl_representation === "Radial") {
        offset_x = segment_number % globals.num_segment_cols * (width / globals.num_segment_cols) + width / globals.num_segment_cols / 2;
        offset_y = Math.floor(segment_number / globals.num_segment_cols) * (height / globals.num_segment_rows) + globals.buffer + unit_width;
        rotation = 0;
        segment_number++;
      }
      return "translate(" + offset_x + " ," + offset_y + ")rotate(" + rotation + ")";
    });

  timeline_segment_exit.select(".timeline_segment_frame")
    .attr("height", 0);

  timeline_segment_exit.select("text.segment_title")
    .attr("transform", "translate(" + (0 - width) + " ,0)");

  //logEvent("segment containers updated", "drawing");

  return { timeline_segment };
}