Show missing features specifically for each data point (#1242)

* Implement Missing One Implementation feature list UI

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

Co-authored-by: James C Scott III <[email protected]>

---------

Co-authored-by: James C Scott III <[email protected]>

Author: KyleJu

frontend/src/static/js/api/client.ts

@@ -148,6 +148,10 @@ export type BaselineStatusMetricsPage =
   components['schemas']['BaselineStatusMetricsPage'];
 export type BaselineStatusMetric =
   components['schemas']['BaselineStatusMetric'];
+export type MissingOneImplFeaturesPage =
+  components['schemas']['MissingOneImplFeaturesPage'];
+export type MissingOneImplFeaturesList =
+  components['schemas']['MissingOneImplFeature'][];
 
 // TODO. Remove once not behind UbP
 const temporaryFetchOptions: FetchOptions<unknown> = {

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

@@ -19,6 +19,7 @@ import {SinonStub, SinonStubbedInstance, stub} from 'sinon';
 import {WebstatusStatsMissingOneImplChartPanel} from '../webstatus-stats-missing-one-impl-chart-panel.js'; // Path to your component
 import {APIClient, BrowserReleaseFeatureMetric} from '../../api/client.js';
 import {WebstatusLineChartPanel} from '../webstatus-line-chart-panel.js';
+import {ChartSelectPointEvent} from '../webstatus-gchart.js';
 
 import '../webstatus-stats-missing-one-impl-chart-panel.js';
 
@@ -133,4 +134,49 @@ describe('WebstatusStatsMissingOneImplChartPanel', () => {
     );
     expect(options.hAxis?.viewWindow?.max).to.deep.equal(expectedEndDate);
   });
+
+  it('renders missing one implementation features footer', async () => {
+    const chart = el.shadowRoot!.querySelector(
+      '#missing-one-implementation-chart',
+    )!;
+
+    const chartClickEvent: ChartSelectPointEvent = new CustomEvent(
+      'point-selected',
+      {
+        detail: {label: 'Test Label', timestamp: new Date(), value: 123},
+        bubbles: true,
+      },
+    );
+    // Simulate point-selected event on the chart component
+    chart.dispatchEvent(chartClickEvent);
+    await el.updateComplete;
+
+    // Assert that the task and renderer are set (no need to wait for the event)
+    expect(el._pointSelectedTask).to.exist;
+    expect(el._renderCustomPointSelectedSuccess).to.exist;
+    await el.updateComplete;
+
+    const header = el.shadowRoot!.querySelector(
+      '#missing-one-implementation-list-header',
+    );
+    expect(header).to.exist;
+    // Note: \n before chrome due to a complaint from lint in the html.
+    expect(header!.textContent?.trim()).to.contain(
+      'The missing feature IDs on 2024-08-20 for\n        chrome',
+    );
+
+    const table = el.shadowRoot!.querySelector('.missing-features-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');
+    expect(firstRowCells[0].textContent?.trim()).to.equal(
+      'css',
+      'first row ID',
+    );
+  });
 });

frontend/src/static/js/components/webstatus-line-chart-panel.ts

@@ -759,7 +759,7 @@ export abstract class WebstatusLineChartPanel extends LitElement {
           error: error => this._renderPointSelectFailure(error),
           initial: () => this._renderPointSelectInitial(),
           pending: () => this._renderPointSelectPending(),
-        })};
+        })}
       </div>
     `;
   }

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

@@ -15,7 +15,7 @@
  */
 
 import {Task} from '@lit/task';
-import {TemplateResult, html, nothing} from 'lit';
+import {TemplateResult, html, nothing, css} from 'lit';
 import {
   FetchFunctionConfig,
   WebstatusLineChartPanel,
@@ -25,14 +25,36 @@ import {
   BrowsersParameter,
   BROWSER_ID_TO_COLOR,
   BROWSER_ID_TO_LABEL,
+  MissingOneImplFeaturesList,
 } from '../api/client.js';
+import {ChartSelectPointEvent} from './webstatus-gchart.js';
 import {customElement, state} from 'lit/decorators.js';
 
 @customElement('webstatus-stats-missing-one-impl-chart-panel')
 export class WebstatusStatsMissingOneImplChartPanel extends WebstatusLineChartPanel {
   @state()
   supportedBrowsers: BrowsersParameter[] = ['chrome', 'firefox', 'safari'];
 
+  missingFeaturesList: MissingOneImplFeaturesList = [];
+  selectedBrowser: string = '';
+  selectedDate: string = '';
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        #missing-one-implementation-datapoint-details-complete {
+          display: block;
+        }
+        .missing-features-table {
+          width: 100%;
+          overflow-x: auto;
+          white-space: nowrap;
+        }
+      `,
+    ];
+  }
+
   private _createFetchFunctionConfigs(
     browsers: BrowsersParameter[],
     startDate: Date,
@@ -89,6 +111,74 @@ export class WebstatusStatsMissingOneImplChartPanel extends WebstatusLineChartPa
     };
   }
 
+  /**
+   * Creates a task and a renderer for handling point-selected events.
+   * Overrides createPointSelectedTask() in the parent class when an point is
+   * selected on the chart.
+   *
+   * @param {ChartSelectPointEvent} _ The point-selected event.
+   * @returns {{ task: Task | undefined; renderSuccess?: () => TemplateResult; }}
+   */
+  createPointSelectedTask(_: ChartSelectPointEvent): {
+    task: Task | undefined;
+    renderSuccess?: () => TemplateResult;
+  } {
+    const task = new Task(this, {
+      task: async () => {
+        // TODO(https://github.com/GoogleChrome/webstatus.dev/issues/1181):
+        // implement the adapter logic to retrieve feature IDs.
+        const pageData = {
+          data: [
+            {
+              feature_id: 'css',
+            },
+            {
+              feature_id: 'html',
+            },
+            {
+              feature_id: 'javascript',
+            },
+            {
+              feature_id: 'bluetooth',
+            },
+          ],
+          metadata: {
+            total: 4,
+          },
+        };
+        for (let i = 0; i < 80; i++) {
+          pageData.data.push({
+            feature_id: 'item' + i,
+          });
+        }
+        this.missingFeaturesList = pageData.data;
+        // TODO:(kyleju) return these data from the API.
+        this.selectedDate = '2024-08-20';
+        this.selectedBrowser = 'chrome';
+        return this.missingFeaturesList;
+      },
+      args: () => [],
+    });
+    return {task: task, renderSuccess: this.pointSelectedTaskRenderOnSuccess};
+  }
+
+  /**
+   * Renders the success state of the createPointSelectedTask above.
+   * This method implements the _renderCustomPointSelectedSuccess
+   * in the parent class.
+   *
+   * @returns {TemplateResult} The rendered content for the success state.
+   */
+  pointSelectedTaskRenderOnSuccess(): TemplateResult {
+    return html`
+      <div slot="header" id="${this.getPanelID()}-list-header">
+        The missing feature IDs on ${this.selectedDate} for
+        ${this.selectedBrowser}:
+      </div>
+      ${this.renderMissingFeaturesTable()}
+    `;
+  }
+
   getPanelID(): string {
     return 'missing-one-implementation';
   }
@@ -98,4 +188,42 @@ export class WebstatusStatsMissingOneImplChartPanel extends WebstatusLineChartPa
   renderControls(): TemplateResult {
     return html`${nothing}`;
   }
+
+  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 feature_id = this.missingFeaturesList[featureIndex].feature_id;
+          cells.push(
+            html` <td>
+              <a href="/features/${feature_id}">${feature_id}</a>
+            </td>`,
+          );
+        } else {
+          // Empty cell.
+          cells.push(html`<td></td>`);
+        }
+      }
+
+      bodyRows.push(
+        html`<tr>
+          ${cells}
+        </tr>`,
+      );
+    }
+
+    return html`
+      <table class="missing-features-table">
+        <tbody>
+          ${bodyRows}
+        </tbody>
+      </table>
+    `;
+  }
 }