feat(render-performance): add draft Summary View alongside Raw Logs

app/components/summary-item.hbs

@@ -0,0 +1,21 @@
+<Ui::Disclosure as |disclosure|>
+<tr  style={{this.nodeStyle}} class="list-row js-render-profile-item">
+
+  <@list.cell class="list-cell-main js-render-main-cell js-render-profile-name"  style={{this.nameStyle}}>
+   {{@model.name}}
+  </@list.cell>
+
+<@list.cell class="list-cell-main js-render-main-cell list-cell-value_numeric  js-render-profile-duration">
+  {{@model.initial-render}}
+   </@list.cell>
+
+<@list.cell class="list-cell-main js-render-main-cell list-cell-value_numeric  js-render-profile-duration">
+  {{@model.avg-re-render}}
+   </@list.cell>
+
+    <@list.cell class="list-cell-main js-render-main-cell list-cell-value_numeric js-render-profile-timestamp">
+    {{@model.render-count}}
+    </@list.cell>
+</tr>
+
+</Ui::Disclosure>

app/components/summary-item.ts

@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+
+interface SummaryItemArgs {
+  model: {
+    name: string;
+    'initial-render': number;
+    'avg-re-render': number;
+    'render-count': number;
+  };
+  list: unknown; // or just leave this out
+}
+
+export default class SummaryItem extends Component<SummaryItemArgs> {
+  get row() {
+    return this.args.model;
+  }
+}

app/components/summary-render-table.hbs

@@ -0,0 +1,10 @@
+<List
+    class="js-render-tree "
+    @schema={{this.schema}} as |list|
+  >
+    <tbody>
+      {{#each this.rows as |row|}}
+        <SummaryItem @model={{row}} @list={{list}} @search={{this.search}} @list={{list}}/>
+      {{/each}}
+    </tbody>
+  </List>

app/components/summary-render-table.ts

@@ -0,0 +1,88 @@
+import Component from '@glimmer/component';
+
+import summarySchema from '../schemas/summary-render-tree';
+
+import escapeRegExp from '../utils/escape-reg-exp';
+
+import type { RenderTreeModel } from '../routes/render-tree';
+
+import isEmpty from '@ember/utils/lib/is_empty';
+
+interface SummaryRenderArgs {
+  profiles: RenderTreeModel['profiles'];
+  searchValue: string;
+}
+
+// TODO handle for recursive cases also
+
+export default class SummaryRenderTable extends Component<SummaryRenderArgs> {
+  get schema() {
+    return summarySchema;
+  }
+
+  get escapedSearch() {
+    return escapeRegExp(this.args.searchValue?.toLowerCase());
+  }
+
+  get rows() {
+    const profiles = this.args.profiles ?? [];
+
+    if (profiles.length === 0) {
+      return [];
+    }
+
+    // Flatten children (actual components)
+    const allComponents = profiles.flatMap((p) => p.children ?? []);
+
+    const grouped: Record<
+      string,
+      {
+        initial: number | null;
+        reRenders: number[];
+      }
+    > = {};
+
+    allComponents.forEach((profile) => {
+      const name = profile.name;
+
+      const time = profile.time; // precise ms
+
+      if (!grouped[name]) {
+        grouped[name] = { initial: null, reRenders: [] };
+      }
+
+      if (grouped[name].initial === null) {
+        // First time we see this component → initial render
+        grouped[name].initial = time;
+      } else {
+        // All later times → re-renders
+        grouped[name].reRenders.push(time);
+      }
+    });
+
+    return Object.entries(grouped)
+      .map(([name, data]) => {
+        const avgReRender = data.reRenders.length
+          ? data.reRenders.reduce((a, b) => a + b, 0) / data.reRenders.length
+          : 0;
+
+        const count = data.reRenders.length + (data.initial ? 1 : 0);
+        return {
+          name,
+          'initial-render': data.initial ? Number(data.initial.toFixed(2)) : 0,
+          'avg-re-render': Number(avgReRender.toFixed(2)),
+          'render-count': count,
+        };
+      })
+      .filter((item) => {
+        if (isEmpty(this.escapedSearch)) {
+          return true;
+        }
+
+        const regExp = new RegExp(this.escapedSearch as string);
+        return !!item.name.toLowerCase().match(regExp);
+      })
+      .sort((a, b) => b['initial-render'] - a['initial-render'])
+      .slice(0, 5);
+  }
+}

app/routes/render-tree.ts

@@ -10,6 +10,7 @@ import type RenderTreeController from '../controllers/render-tree';
 import TabRoute from './tab';
 
 export interface Profile {
+  time: number;
   children: Array<Profile>;
   name: string;
 }

app/schemas/summary-render-tree.ts

@@ -0,0 +1,30 @@
+/**
+ * Summary render performance schema.
+ */
+export default {
+  columns: [
+    {
+      id: 'name',
+      name: 'Component',
+      visible: true,
+    },
+    {
+      id: 'initial-render',
+      name: 'Initial Render Time (ms)',
+      visible: true,
+      numeric: true,
+    },
+    {
+      id: 'avg-re-render',
+      name: 'Avg Re-Render Time (ms)',
+      visible: true,
+      numeric: true,
+    },
+    {
+      id: 'render-count',
+      name: 'Render Count',
+      visible: true,
+      numeric: true,
+    },
+  ],
+};

app/templates/render-tree.hbs

@@ -38,7 +38,10 @@
     </button>
   </Ui::EmptyMessage>
 {{else}}
-  <List
+<!--TODO: Tab routing -->
+<SummaryRenderTable @profiles={{this.model.profiles}}  @searchValue={{this.searchValue}} />
+
+  {{!-- <List
     class="js-render-tree list-css-striping"
     @headerHeight={{this.headerHeight}}
     @schema={{schema-for "render-tree"}} as |list|
@@ -48,5 +51,5 @@
         <RenderItem @model={{item}} @search={{this.search}} @list={{list}} />
       {{/each}}
     </tbody>
-  </List>
+  </List>--}}
 {{/if}}

tests/integration/components/summary-item-test.ts

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-inspector/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | summary-item', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<SummaryItem />`);
+
+    assert.dom().hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <SummaryItem>
+        template block text
+      </SummaryItem>
+    `);
+
+    assert.dom().hasText('template block text');
+  });
+});

tests/integration/components/summary-render-table-test.ts

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-inspector/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | summary-render-table', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders', async function (assert) {
+    // Set any properties with this.set('myProperty', 'value');
+    // Handle any actions with this.set('myAction', function(val) { ... });
+
+    await render(hbs`<SummaryRenderTable />`);
+
+    assert.dom().hasText('');
+
+    // Template block usage:
+    await render(hbs`
+      <SummaryRenderTable>
+        template block text
+      </SummaryRenderTable>
+    `);
+
+    assert.dom().hasText('template block text');
+  });
+});