Utilize overview table in "Missing One" panel (#1458)

* Separate data loading from table component

* fix global saved search sorting

* use TaskTracker status

* remove unused variable

* use taskTracker in overview-table

* Use overview table for missing one table

* remove unused variable

* overview table uses TaskTracker

* fix optional chaining

---------

Co-authored-by: DanielRyanSmith <danielrsmith@google.com>

Author: DanielRyanSmith

frontend/src/static/js/components/test/webstatus-stats-missing-one-impl-chart-panel.test.ts

@@ -215,21 +215,8 @@ describe('WebstatusStatsMissingOneImplChartPanel', () => {
     `;
     expect(header).dom.to.equal(expectedHeader);
 
-    const table = el.shadowRoot!.querySelector('.missing-features-table');
+    const table = el.shadowRoot!.querySelector('webstatus-overview-table');
     expect(table).to.exist;
-
-    const rows = table!
-      .getElementsByTagName('tbody')[0]
-      .getElementsByTagName('tr');
-    expect(rows.length).to.equal(10, 'should have 10 rows');
-
-    const firstRowCells = rows[0].querySelectorAll('td');
-    const textContent = firstRowCells[0].textContent
-      ?.split('\n')
-      .map(word => word.trim())
-      .filter(word => word.length > 0)
-      .join(' ');
-    expect(textContent).to.equal('grid TOP CSS', 'first row ID');
   });
 
   it('renders empty features footer', async () => {

frontend/src/static/js/components/webstatus-overview-data-loader.ts

@@ -53,12 +53,13 @@ export class WebstatusOverviewDataLoader extends LitElement {
     searchKey: string,
     searchValue: string,
   ): components['schemas']['Feature'][] {
-    if (!this.taskTracker.data?.data) {
+    if (!this.taskTracker.data) {
       return [];
     }
 
     const features: components['schemas']['Feature'][] = [];
-    for (const feature of this.taskTracker.data.data) {
+    const data = this.taskTracker.data?.data || [];
+    for (const feature of data) {
       if (searchKey === 'id' && feature?.feature_id === searchValue) {
         features.push(feature);
         break;
@@ -126,18 +127,27 @@ export class WebstatusOverviewDataLoader extends LitElement {
     }
 
     if (
-      this.taskTracker.status === TaskStatus.COMPLETE &&
-      this.taskTracker.data
+      this.taskTracker.data?.data &&
+      this.taskTracker.status === TaskStatus.COMPLETE
     ) {
       this.taskTracker.data.data =
         this.reorderByQueryTerms() || this.taskTracker.data?.data;
     }
 
+    const featureTaskTracker: TaskTracker<
+      components['schemas']['Feature'][],
+      ApiError
+    > = {
+      status: this.taskTracker.status,
+      error: this.taskTracker.error,
+      data: this.taskTracker.data?.data,
+    };
+
     return html`<webstatus-overview-table
       .columns=${columns}
       .headerCells=${headerCells}
       .location=${this.location}
-      .taskTracker=${this.taskTracker}
+      .taskTracker=${featureTaskTracker}
     ></webstatus-overview-table>`;
   }
 }

frontend/src/static/js/components/webstatus-overview-table.ts

@@ -38,7 +38,7 @@ import {TaskTracker} from '../utils/task-tracker.js';
 @customElement('webstatus-overview-table')
 export class WebstatusOverviewTable extends LitElement {
   @property({type: Object})
-  taskTracker: TaskTracker<components['schemas']['FeaturePage'], ApiError> = {
+  taskTracker: TaskTracker<components['schemas']['Feature'][], ApiError> = {
     status: TaskStatus.INITIAL, // Initial state
     error: undefined,
     data: undefined,
@@ -168,7 +168,7 @@ export class WebstatusOverviewTable extends LitElement {
       case TaskStatus.PENDING:
         return this.renderBodyWhenPending(columns);
       case TaskStatus.COMPLETE:
-        return this.taskTracker.data?.data?.length === 0
+        return this.taskTracker.data?.length === 0
           ? this.renderBodyWhenNoResults(columns)
           : this.renderBodyWhenComplete(columns);
       case TaskStatus.ERROR:
@@ -178,9 +178,7 @@ export class WebstatusOverviewTable extends LitElement {
 
   renderBodyWhenComplete(columns: ColumnKey[]): TemplateResult {
     return html`
-      ${this.taskTracker.data?.data?.map(f =>
-        this.renderFeatureRow(f, columns),
-      )}
+      ${this.taskTracker.data?.map(f => this.renderFeatureRow(f, columns))}
     `;
   }
 
@@ -234,7 +232,7 @@ export class WebstatusOverviewTable extends LitElement {
   renderBodyWhenPending(columns: ColumnKey[]): TemplateResult {
     const DEFAULT_SKELETON_ROWS = 10;
     const skeleton_rows =
-      this.taskTracker.data?.data?.length || DEFAULT_SKELETON_ROWS;
+      this.taskTracker.data?.length || DEFAULT_SKELETON_ROWS;
     return html`
       ${map(
         range(skeleton_rows),

frontend/src/static/js/components/webstatus-stats-missing-one-impl-chart-panel.ts

@@ -14,8 +14,9 @@
  * limitations under the License.
  */
 
-import {Task} from '@lit/task';
+import {Task, TaskStatus} from '@lit/task';
 import {TemplateResult, html, nothing, css} from 'lit';
+import {type components} from 'webstatus.dev-backend';
 import {
   FetchFunctionConfig,
   WebstatusLineChartPanel,
@@ -29,17 +30,34 @@ import {
   BROWSER_ID_TO_LABEL,
 } from '../api/client.js';
 import {ChartSelectPointEvent} from './webstatus-gchart.js';
-import {customElement} from 'lit/decorators.js';
+import {customElement, property} from 'lit/decorators.js';
 import {formatOverviewPageUrl} from '../utils/urls.js';
 import {
-  getTopCssIdentifierTemplate,
-  getTopHtmlIdentifierTemplate,
-} from './utils.js';
+  ColumnKey,
+  parseColumnsSpec,
+  renderSavedSearchHeaderCells,
+} from './webstatus-overview-cells.js';
+import {MISSING_ONE_TABLE_COLUMNS} from '../utils/constants.js';
+import {TaskTracker} from '../utils/task-tracker.js';
+import {ApiError, UnknownError} from '../api/errors.js';
+import {toast} from '../utils/toast.js';
 
 @customElement('webstatus-stats-missing-one-impl-chart-panel')
 export class WebstatusStatsMissingOneImplChartPanel extends WebstatusLineChartPanel<BrowsersParameter> {
   readonly series: BrowsersParameter[] = ['chrome', 'firefox', 'safari'];
 
+  @property({type: Object})
+  taskTracker: TaskTracker<components['schemas']['Feature'][], ApiError> = {
+    status: TaskStatus.INITIAL, // Initial state
+    error: undefined,
+    data: undefined,
+  };
+
+  supportedBrowsers: BrowsersParameter[] = ['chrome', 'firefox', 'safari'];
+
+  @property({type: Boolean})
+  isLoadingFeatures = false;
+
   missingFeaturesList: MissingOneImplFeaturesList = [];
   selectedBrowser: string = '';
   selectedDate: string = '';
@@ -153,6 +171,16 @@ export class WebstatusStatsMissingOneImplChartPanel extends WebstatusLineChartPa
     this.featureListHref = formatOverviewPageUrl({search: ''}, {q: query});
   }
 
+  async getAllFeatureData(
+    features: MissingOneImplFeaturesList,
+  ): Promise<components['schemas']['Feature'][]> {
+    if (features.length === 0) {
+      return [];
+    }
+    const query = `id:${features.map(f => f.feature_id).join(' OR id:')}`;
+    return await this.apiClient.getAllFeatures(query, 'name_asc');
+  }
+
   /**
    * Creates a task and a renderer for handling point-selected events.
    * Overrides createPointSelectedTask() in the parent class when an point is
@@ -181,9 +209,33 @@ export class WebstatusStatsMissingOneImplChartPanel extends WebstatusLineChartPa
         this.selectedDate = targetDate.toISOString().substring(0, 10);
         this.selectedBrowser = label;
         this.updateFeatureListHref(features);
-        return features;
+        return await this.getAllFeatureData(features);
       },
       args: () => [targetDate, targetBrowser],
+      onComplete: features => {
+        this.taskTracker = {
+          status: TaskStatus.COMPLETE,
+          error: undefined,
+          data: features,
+        };
+      },
+      onError: async (error: unknown) => {
+        if (error instanceof ApiError) {
+          this.taskTracker = {
+            status: TaskStatus.ERROR,
+            error: error,
+            data: undefined,
+          };
+          await toast(`${error.message}`, 'danger', 'exclamation-triangle');
+        } else {
+          // Should never reach here but let's handle it.
+          this.taskTracker = {
+            status: TaskStatus.ERROR,
+            error: new UnknownError('unknown error fetching features'),
+            data: undefined,
+          };
+        }
+      },
     });
     return {task: task, renderSuccess: this.pointSelectedTaskRenderOnSuccess};
   }
@@ -236,52 +288,14 @@ export class WebstatusStatsMissingOneImplChartPanel extends WebstatusLineChartPa
   }
 
   renderMissingFeaturesTable(): TemplateResult {
-    const numCols = Math.ceil(this.missingFeaturesList.length / 10);
-
-    // Create table body with `numCols` columns and 10 rows each.
-    const bodyRows = [];
-    for (let i = 0; i < 10; i++) {
-      const cells = [];
-      for (let j = 0; j < numCols; j++) {
-        const featureIndex = j * 10 + i;
-        if (featureIndex < this.missingFeaturesList.length) {
-          const featureId = this.missingFeaturesList[featureIndex].feature_id;
-          const extraIdentifiers: TemplateResult[] = [];
-          const cssIdentifier = getTopCssIdentifierTemplate(featureId);
-          if (cssIdentifier) {
-            extraIdentifiers.push(cssIdentifier);
-          }
-          const htmlIdentifier = getTopHtmlIdentifierTemplate(featureId);
-          if (htmlIdentifier) {
-            extraIdentifiers.push(htmlIdentifier);
-          }
-          cells.push(
-            html` <td>
-              <div class="missing-feature-id">
-                <a href="/features/${featureId}">${featureId}</a>
-                ${extraIdentifiers}
-              </div>
-            </td>`,
-          );
-        } else {
-          // Empty cell.
-          cells.push(html`<td></td>`);
-        }
-      }
+    const columns: ColumnKey[] = parseColumnsSpec(MISSING_ONE_TABLE_COLUMNS);
+    let headerCells: TemplateResult[] = [];
+    headerCells = renderSavedSearchHeaderCells(this.getPanelText(), columns);
 
-      bodyRows.push(
-        html`<tr>
-          ${cells}
-        </tr>`,
-      );
-    }
-
-    return html`
-      <table class="missing-features-table">
-        <tbody>
-          ${bodyRows}
-        </tbody>
-      </table>
-    `;
+    return html`<webstatus-overview-table
+      .columns=${columns}
+      .headerCells=${headerCells}
+      .taskTracker=${this.taskTracker}
+    ></webstatus-overview-table>`;
   }
 }

frontend/src/static/js/utils/constants.ts

@@ -214,3 +214,6 @@ export const VOCABULARY = [
     doc: 'Negate search term with a leading minus',
   },
 ];
+
+export const MISSING_ONE_TABLE_COLUMNS: string =
+  'name,availability_chrome,availability_firefox,availability_safari,availability_chrome_android,availability_firefox_android,availability_safari_ios,chrome_usage';