React Timelines Plugin Issue: Displaying Message Borders but Not Date Ranges

Question

Hi Stack Overflow community,

I'm currently working on a React project and using the React Timelines plugin to create timelines. However, I've run into an issue where only the borders of messages are displayed, and the date ranges are not showing up as expected.

Here's a snippet of my React component code:

Timeline.js

/* eslint-disable import/no-unresolved */
import React, { Component } from 'react';
import Timeline from 'react-timelines';
import 'react-timelines/lib/css/style.css';
import { loadAttivita } from '../../services/attivita';
import { buildTimebar, buildTrack } from './builders';
import { fill } from './utils';
const now = new Date();
const timebar = buildTimebar();
const clickElement = (element) => alert(`Clicked element\n${JSON.stringify(element, null, 2)}`);
const MIN_ZOOM = 2;
const MAX_ZOOM = 20;
var tracksById = fill(2).reduce((acc, i) => {
  const track = buildTrack(i + 1, 'prova');
  acc[track.id] = track;
  return acc;
}, {});
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      attivitaLoad: [],
      valueLoad: [],
      open: false,
      zoom: 2,
      tracksById,
      tracks: Object.values(tracksById),
    };
  }
  /**
   * Caricamento valori dashboard
   */
  async loadValues() {
    var attivitaLoad = await loadAttivita();
    this.setState({ attivitaLoad: attivitaLoad });
    tracksById = fill(attivitaLoad.length).reduce((acc, i) => {
      const track = buildTrack(
        i + 1,
        attivitaLoad[i].Descrizione,
        attivitaLoad[i].DataInizio,
        attivitaLoad[i].DataFine
      );
      acc[track.id] = track;
      return acc;
    }, {});
    this.setState({ tracksById: tracksById });
    this.setState({ tracks: Object.values(tracksById) });
  }
  async componentDidMount() {
    this.loadValues();
  }
  handleToggleOpen = () => {
    this.setState(({ open }) => ({ open: !open }));
  };
  handleZoomIn = () => {
    this.setState(({ zoom }) => ({ zoom: Math.min(zoom + 1, MAX_ZOOM) }));
  };
  handleZoomOut = () => {
    this.setState(({ zoom }) => ({ zoom: Math.max(zoom - 1, MIN_ZOOM) }));
  };
  handleToggleTrackOpen = (track) => {
    this.setState((state) => {
      const tracksById = {
        ...state.tracksById,
        [track.id]: {
          ...track,
          isOpen: !track.isOpen,
        },
      };
      return {
        tracksById,
        tracks: Object.values(tracksById),
      };
    });
  };
  render() {
    const { open, zoom, tracks } = this.state;
    const start = new Date(2020, 3, 19, 8, 30);
    const end = new Date(2020, 9, 19, 8, 30);
    return (
      <div className="app">
        <h1 className="title" style={{ align: 'center' }}>
          Quote Timelines
        </h1>
        <Timeline
          scale={{
            start,
            end,
            zoom,
            zoomMin: MIN_ZOOM,
            zoomMax: MAX_ZOOM,
          }}
          isOpen={open}
          toggleOpen={this.handleToggleOpen}
          clickElement={clickElement}
          timebar={timebar}
          tracks={tracks}
          now={now}
          toggleTrackOpen={this.handleToggleTrackOpen}
          enableSticky
          scrollToNow
        />
      </div>
    );
  }
}
export default App;

builder.js

import {
  START_YEAR,
  NUM_OF_YEARS,
  MONTH_NAMES,
  MONTHS_PER_YEAR,
  QUARTERS_PER_YEAR,
  MONTHS_PER_QUARTER,
  NUM_OF_MONTHS,
  MAX_TRACK_START_GAP,
  MAX_ELEMENT_GAP,
  MAX_MONTH_SPAN,
  MIN_MONTH_SPAN,
  MAX_NUM_OF_SUBTRACKS,
} from './constants';

import { fill, hexToRgb, colourIsLight, addMonthsToYear, addMonthsToYearAsDate, nextColor } from './utils';

export const buildQuarterCells = () => {
  const v = [];
  for (let i = 0; i < QUARTERS_PER_YEAR * NUM_OF_YEARS; i += 1) {
    const quarter = (i % 4) + 1;
    const startMonth = i * MONTHS_PER_QUARTER;
    const s = addMonthsToYear(START_YEAR, startMonth);
    const e = addMonthsToYear(START_YEAR, startMonth + MONTHS_PER_QUARTER);
    v.push({
      id: `${s.year}-q${quarter}`,
      title: `Q${quarter} ${s.year}`,
      start: new Date(`${s.year}-${s.month}-01`),
      end: new Date(`${e.year}-${e.month}-01`),
    });
  }
  return v;
};

export const buildMonthCells = () => {
  const v = [];
  for (let i = 0; i < MONTHS_PER_YEAR * NUM_OF_YEARS; i += 1) {
    const startMonth = i;
    const start = addMonthsToYearAsDate(START_YEAR, startMonth);
    const end = addMonthsToYearAsDate(START_YEAR, startMonth + 1);
    v.push({
      id: `m${startMonth}`,
      title: MONTH_NAMES[i % 12],
      start,
      end,
    });
  }
  return v;
};

export const buildTimebar = () => [
  {
    id: 'months',
    title: 'Months',
    cells: buildMonthCells(),
    useAsGrid: true,
    style: {},
  },
];

export const buildTrackStartGap = () => Math.floor(Math.random() * MAX_TRACK_START_GAP);
export const buildElementGap = () => Math.floor(Math.random() * MAX_ELEMENT_GAP);

export const buildSubtrack = (trackId, subtrackId) => ({
  id: `track-${trackId}-${subtrackId}`,
  title: `Subtrack ${subtrackId}`,
  elements: buildElements(subtrackId),
});

/**
 * Build single element
 * @param {*} param0
 * @returns
 */
export const buildElement = ({ trackId, start, end, i, titleUi }) => {
  const bgColor = nextColor();
  const color = colourIsLight(...hexToRgb(bgColor)) ? '#000000' : '#ffffff';
  return {
    id: `t-${trackId}-el-${i}`,
    title: titleUi,
    start,
    end,
    style: {
      backgroundColor: `#${bgColor}`,
      color,
      borderRadius: '4px',
      boxShadow: '1px 1px 0px rgba(0, 0, 0, 0.25)',
      textTransform: 'capitalize',
    },
  };
};

/**
 * Crete line title
 * @param {*} trackId
 * @param {*} title
 * @returns
 */
export const buildTrack = (trackId, title, DataInizio, DataFine) => {
  const tracks = fill(Math.floor(Math.random() * MAX_NUM_OF_SUBTRACKS) + 1).map((i) => buildSubtrack(trackId, i + 1));
  return {
    id: `track-${trackId}`,
    title: title,
    elements: buildElements(trackId, title),
    tracks,
    isOpen: false,
  };
};

/**
 * Funzione che costruisce il singolo elemento
 * @param {*} trackId
 * @returns
 */
export const buildElements = (trackId, title) => {
  const v = [];
  let i = 1;
  let month = buildTrackStartGap();

  while (month < NUM_OF_MONTHS) {
    let monthSpan = Math.floor(Math.random() * (MAX_MONTH_SPAN - (MIN_MONTH_SPAN - 1))) + MIN_MONTH_SPAN;

    if (month + monthSpan > NUM_OF_MONTHS) {
      monthSpan = NUM_OF_MONTHS - month;
    }

    const titleText = title;
    const start = addMonthsToYearAsDate(START_YEAR, month);
    const end = addMonthsToYearAsDate(START_YEAR, month + monthSpan);
    v.push(
      buildElement({
        trackId,
        start,
        end,
        i,
        titleText,
      })
    );
    const gap = buildElementGap();
    month += monthSpan + gap;
    i += 1;
  }

  return v;
};

I've thoroughly checked the documentation and project issues without finding a solution. Has anyone encountered a similar problem or could provide guidance on how to correctly display date ranges along with messages?

Any help or insights would be greatly appreciated!