Delete nested timespans and respective peaks segments

Author: Dananji

src/services/WaveformDataUtils.js

@@ -235,7 +235,7 @@ export default class WaveformDataUtils {
   }
 
   /**
-   * Delete the corresponding segment when a timespan is deleted
+   * Delete the corresponding segment(s) when a timespan/header is deleted
    * @param {Object} item - item to be deleted
    * @param {Object} peaksInstance - peaks instance for the current waveform
    */
@@ -246,13 +246,14 @@ export default class WaveformDataUtils {
         if (child.type === 'span') {
           peaksInstance.segments.removeById(child.id);
         }
-        if (child.items && child.items.length > 0) {
+        if (child.items?.length > 0) {
           deleteChildren(child);
         }
       }
     };
 
-    if (item.type === 'div') {
+    // Recursively delete item's children regardless of its type
+    if (item.items?.length > 0) {
       deleteChildren(item);
     }
 

src/services/__test__/WaveformDataUtils.test.js

@@ -207,7 +207,7 @@ describe('WaveformDataUtils class', () => {
       });
 
       describe('deleteSegments()', () => {
-        test('timespan', () => {
+        test('deletes timespan without children', () => {
           const item = {
             type: 'span',
             label: 'Segment 1.2',
@@ -219,7 +219,7 @@ describe('WaveformDataUtils class', () => {
           expect(value.segments._segments).toHaveLength(2);
         });
 
-        test('header', () => {
+        test('deletes header without children', () => {
           const item = {
             type: 'div',
             label: 'Sub-Segment 1.1',
@@ -230,7 +230,7 @@ describe('WaveformDataUtils class', () => {
           expect(value.segments._segments).toHaveLength(3);
         });
 
-        test('header with children', () => {
+        test('deletes header and its children', () => {
           const item = {
             type: 'div',
             label: 'Sub-Segment 2.1',
@@ -262,6 +262,39 @@ describe('WaveformDataUtils class', () => {
             ])
           );
         });
+
+        test('deletes timespan and its children', () => {
+          const item = {
+            type: 'span',
+            label: 'Sub-Segment 2.1',
+            id: '123a-456b-789c-6d',
+            items: [
+              {
+                type: 'div',
+                label: 'Sub-Segment 2.1.1',
+                id: '123a-456b-789c-7d',
+                items: [],
+              },
+              {
+                type: 'span',
+                label: 'Segment 2.1',
+                id: '123a-456b-789c-8d',
+                begin: '00:09:03.241',
+                end: '00:15:00.001',
+              },
+            ],
+          };
+          const value = waveformUtils.deleteSegments(item, peaks);
+          expect(value.segments._segments).toHaveLength(2);
+          expect(value.segments._segments).toEqual(
+            expect.arrayContaining([
+              expect.objectContaining({
+                id: '123a-456b-789c-4d',
+                labelText: 'Segment 1.2',
+              }),
+            ])
+          );
+        });
       });
 
       describe('rebuildPeaks()', () => {