ActivityDecomposition Pagination (#1225)

* Paginate ActivityDecomposition children and allow user to load successive pages of child nodes.

src/components/activity/ActivityDecomposition.svelte

@@ -14,24 +14,34 @@
   export let selectedSpanId: SpanId | null = null;
   export let spansMap: SpansMap = {};
   export let spanUtilityMaps: SpanUtilityMaps;
+  export let childPageSize: number = 25;
 
   const dispatch = createEventDispatcher<{
     select: number | null;
   }>();
 
   let childIds: SpanId[] = [];
   let span: Span | null = null;
+  let childLimit = childPageSize;
+  let isRoot: boolean = true;
+  let type: string;
+  let hasChildren: boolean = false;
+  let role: 'tree' | 'treeitem' = 'tree';
+  let nodeClass: string = '';
+  let buttonClass: string = '';
+  let childIdsInView: SpanId[] = [];
 
   $: span = rootSpanId !== null ? spansMap[rootSpanId] : null;
   $: isRoot = span ? !span.parent_id : true;
   $: type = span?.type || '';
-  $: childIds = span !== null ? spanUtilityMaps?.spanIdToChildIdsMap[span?.id] : [];
+  $: childIds = span !== null ? spanUtilityMaps?.spanIdToChildIdsMap[span?.id] || [] : [];
   $: hasChildren = childIds ? childIds.length > 0 : false;
   $: role = isRoot ? 'tree' : 'treeitem';
   $: nodeClass =
     'activity-decomposition-node activity-decomposition-' +
     (rootSpanId === selectedSpanId ? 'selected st-typography-medium' : 'unselected st-typography-body');
   $: buttonClass = 'st-button icon' + (!hasChildren ? ' st-button-no-hover' : '');
+  $: childIdsInView = childIds.slice(0, childLimit);
 
   function toggle() {
     expanded = !expanded;
@@ -68,11 +78,16 @@
 
   {#if hasChildren && expanded}
     <ul>
-      {#each childIds as childId}
+      {#each childIdsInView as childId}
         <li>
           <svelte:self {spansMap} rootSpanId={spansMap[childId]?.id} {selectedSpanId} {spanUtilityMaps} on:select />
         </li>
       {/each}
+      {#if childIds.length !== childIdsInView.length}
+        <button on:click={() => (childLimit += childPageSize)} class="st-button tertiary show-more">
+          Show more ({childIds.length - childIdsInView.length})
+        </button>
+      {/if}
     </ul>
   {/if}
 {/if}
@@ -137,4 +152,9 @@
     background: none;
     cursor: default;
   }
+
+  .st-button.show-more {
+    border-radius: 2px;
+    margin-left: 20px;
+  }
 </style>

src/components/activity/ActivityDecomposition.svelte.test.ts

@@ -1,6 +1,6 @@
 import { cleanup, getByText, render } from '@testing-library/svelte';
 import { afterEach, describe, expect, it } from 'vitest';
-import type { SpansMap, SpanUtilityMaps } from '../../types/simulation';
+import type { SpanUtilityMaps, SpansMap } from '../../types/simulation';
 import ActivityDecomposition from './ActivityDecomposition.svelte';
 
 const spanUtilityMaps: SpanUtilityMaps = {
@@ -184,4 +184,17 @@ describe('Activity Decomposition component', () => {
     // Should see a message warning about the missing activity
     expect(getByText(container, `Activity not found`)).to.exist;
   });
+
+  it('Should display "show more" button to load more child spans', () => {
+    const { container } = render(ActivityDecomposition, {
+      childPageSize: 1,
+      rootSpanId: 12,
+      selectedSpanId: 12,
+      spanUtilityMaps,
+      spansMap,
+    });
+
+    // Should display a "show more" button
+    expect(getByText(container, `Show more (1)`)).to.exist;
+  });
 });