JSFiddle - React, Tailwind, and code Playground

CSS

body { font-family: monospace; margin-top: -5em; white-space: pre; }

JavaScript

function buildNonOverlappingGroups(resources) {
  // TODO: https://medium.com/p/21bd2f69992c
}


const EX_1 = [
  { id: 'A', timestamps: [0, 10] },
  { id: 'B', timestamps: [10, 20] }
];
// [ [ 'A', 'B' ] ]


const EX_2 = [
  { id: 'A', timestamps: [0, 10] },
  { id: 'B', timestamps: [10, 20] },
  { id: 'C', timestamps: [5, 15] }
];
// [ [ 'A', 'B' ], [ 'C' ] ]


const EX_3 = [
  { id: 'A', timestamps: [0, 10] },
  { id: 'B', timestamps: [1, 2] },
  { id: 'C', timestamps: [5, 8] },
  { id: 'D', timestamps: [4, 9] },
  { id: 'E', timestamps: [3, 6] },
  { id: 'F', timestamps: [7, 9] }
];
// Multiple solutions:
// [ [ 'A' ], [ 'B', 'E' ], [ 'D' ], [ 'C', 'F' ] ]
// [ [ 'A' ], [ 'B', 'E', 'F' ], [ 'D' ], [ 'C' ] ]


// TEST
for (const ex of [ EX_1, EX_2, EX_3 ]) {
  document.write('\n\nInput:\n');
  document.write(JSON.stringify(ex, null, 2));
  document.write('\nOutput:\n');
  document.write(JSON.stringify(buildNonOverlappingGroups(ex), null, 2));
}