Make all the benchmarks work/pass for Fast

Author: dsvorc41

frameworks/keyed/fast/src/App.ts

@@ -24,6 +24,7 @@ const template = html<BenchmarkApp>`
     html`
       <data-table
         :rows=${x => x.rows}
+        :selectedRowId=${x => x.selectedRowId}
         @action=${(x, c) => {
           x.onAction(c.event);
         }}
@@ -46,6 +47,7 @@ const template = html<BenchmarkApp>`
 })
 export class BenchmarkApp extends FASTElement {
   @observable rows?: RowItem[];
+  backupData?: RowItem[];
 
   createOneThousandRows() {
     this.clear();
@@ -57,8 +59,7 @@ export class BenchmarkApp extends FASTElement {
   }
 
   appendOneThousandRows() {
-    const lastRowId = this.rows ? this.rows[this.rows.length - 1].id : 0;
-    this.rows = this.rows ? this.rows.concat(buildData(1000, lastRowId)) : buildData();
+    this.rows = this.rows ? this.rows.concat(buildData(1000)) : buildData();
   }
 
   updateEveryTenthRowLabel() {
@@ -101,13 +102,13 @@ export class BenchmarkApp extends FASTElement {
     const eventDetails = (event as CustomEvent).detail;
     const { name, data } = eventDetails;
 
-    if (name === 'run') return this.createOneThousandRows();
-    if (name === 'runlots') return this.createTenThousandRows();
     if (name === 'add') return this.appendOneThousandRows();
+    if (name === 'run') return this.createOneThousandRows();
     if (name === 'update') return this.updateEveryTenthRowLabel();
+    if (name === 'runlots') return this.createTenThousandRows();
     if (name === 'clear') return this.clear();
     if (name === 'swaprows') return this.swapTwoRows();
-    if (name === 'deleteRow') return this.deleteSingleRow(data);
+    if (name === 'deleteSingleRow') return this.deleteSingleRow(data);
 
     throw new Error('unknown event name!');
   }

frameworks/keyed/fast/src/components/Table.ts

@@ -2,18 +2,18 @@ import { customElement, FASTElement, html, repeat, observable } from '@microsoft
 import { RowItem } from 'src/utils/build-dummy-data';
 
 const template = html<Table>`
-  <table class="table table-hover table-striped test-data">
+  <table class="table table-hover table-striped test-data" @click=${(x, c) => x.handleClick(c.event)}>
     <tbody id="tbody">
       ${repeat(
         x => x.rows,
         html`
-          <tr data-id="${row => row.id}">
+          <tr data-id="${row => row.id}" class="${(row, c) => (c.parent.selectedRowId === row.id ? 'danger' : '')}">
             <td class="col-md-1">${row => row.id}</td>
             <td class="col-md-4">
-              <a class="lbl">${row => row.label}</a>
+              <a class="lbl" data-row-id="${row => row.id}" }>${row => row.label}</a>
             </td>
             <td class="col-md-1">
-              <a class="remove" data-row-id="${row => row.id}" @click=${(x, c) => c.parent.handleClick(c.event)}>
+              <a class="remove" data-row-id="${row => row.id}">
                 <span class="remove glyphicon glyphicon-remove" aria-hidden="true"></span
               ></a>
             </td>
@@ -23,13 +23,13 @@ const template = html<Table>`
         /**
          * List Rendering without view recycling
          *
-         * With positioning set to true, and resycle set to false,
-         * Fast wil re-render when internal properties of
+         * With recycle set to false,
+         * Fast will re-render when internal properties of
          * RowItem[] change (e.g. id or label)
          *
          * https://www.fast.design/docs/fast-element/using-directives
          */
-        { positioning: true, recycle: false }
+        { recycle: false }
       )}
     </tbody>
   </table>
@@ -49,13 +49,28 @@ const template = html<Table>`
 })
 export class Table extends FASTElement {
   @observable rows!: RowItem[];
+  @observable selectedRowId = -1;
 
   handleClick(event: Event) {
-    const currentTarget = event.currentTarget as HTMLElement;
+    const target = event.target as HTMLElement;
 
-    if (currentTarget.classList.contains('remove')) {
-      const rowId = currentTarget.dataset['rowId'];
-      this.$emit('action', { name: 'deleteRow', data: Number(rowId) });
+    if (target.classList.contains('remove')) {
+      const rowId = target.parentElement?.dataset['rowId'];
+      this.$emit('action', { name: 'deleteSingleRow', data: Number(rowId) });
+      return;
+    }
+
+    if (target.classList.contains('lbl')) {
+      const rowId = target.dataset['rowId'];
+      this.toggleSelectRow(Number(rowId));
+      return;
+    }
+  }
+
+  toggleSelectRow(rowId: number) {
+    const rowIndex = this.rows.findIndex(row => row.id === rowId);
+    if (rowIndex > -1) {
+      this.selectedRowId = rowIndex + 1;
     }
   }
 }

frameworks/keyed/fast/src/utils/build-dummy-data.ts

@@ -7,7 +7,9 @@ export function _random(max: number) {
   return Math.round(Math.random() * 1000) % max;
 }
 
-export function buildData(count = 1000, lastRowId = 0): RowItem[] {
+let id = 1;
+
+export function buildData(count = 1000): RowItem[] {
   const adjectives = [
     'pretty',
     'large',
@@ -53,9 +55,8 @@ export function buildData(count = 1000, lastRowId = 0): RowItem[] {
     'keyboard'
   ];
   const data = [];
-  let id = lastRowId + 1;
 
-  for (let i = lastRowId; i < lastRowId + count; i++) {
+  for (let i = 0; i < count; i++) {
     const adjective = adjectives[_random(adjectives.length)];
     const color = colors[_random(colors.length)];
     const noun = nouns[_random(nouns.length)];