Annotate survey features (#1406)

* annotate the survey features

* adjust feature check

* update appearance based on feedback

* fix feature ordering and query

* changes suggested by @jcscottiii

---------

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

Author: DanielRyanSmith

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

@@ -186,7 +186,7 @@ describe('WebstatusStatsMissingOneImplChartPanel', () => {
   it('renders missing one implementation features footer', async () => {
     apiClientStub.getMissingOneImplementationFeatures.resolves([
       {
-        feature_id: 'css',
+        feature_id: 'grid',
       },
       {
         feature_id: 'html',
@@ -232,7 +232,7 @@ describe('WebstatusStatsMissingOneImplChartPanel', () => {
     const expectedHeader = `
       <div slot="header" id="missing-one-implementation-list-header">
         Missing features on 2024-01-01 for Chrome:
-        <a href="/?q=id%3Acss+OR+id%3Ahtml+OR+id%3Ajs+OR+id%3Abluetooth">4 features</a>
+        <a href="/?q=id%3Agrid+OR+id%3Ahtml+OR+id%3Ajs+OR+id%3Abluetooth">4 features</a>
       </div>
     `;
     expect(header).dom.to.equal(expectedHeader);
@@ -246,10 +246,12 @@ describe('WebstatusStatsMissingOneImplChartPanel', () => {
     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',
-    );
+    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/utils.ts

@@ -14,6 +14,12 @@
  * limitations under the License.
  */
 
+import {html, TemplateResult} from 'lit';
+import {
+  TOP_CSS_INTEROP_ISSUES,
+  TOP_HTML_INTEROP_ISSUES,
+} from '../utils/constants.js';
+
 export const DRAWER_WIDTH_PX = 288;
 
 // Determine if the browser looks like the user is on a mobile device.
@@ -34,3 +40,47 @@ export const IS_MOBILE = (() => {
 
   return width <= NARROW_WINDOW_MAX_WIDTH || width === 0;
 })();
+
+function getTopSurveyIdentifierTemplate(
+  surveyName: string,
+  url: string,
+): TemplateResult | undefined {
+  return html`<sl-tag
+    size="small"
+    variant="${surveyName === 'CSS' ? 'success' : 'primary'}"
+    pill
+  >
+    <div
+      class="survey-result"
+      title="This feature was listed as a top interoperability pain point in the recent State of ${surveyName} survey."
+    >
+      <span class="survey-result-span">
+        <a href="${url}" target="_blank">TOP ${surveyName}</a>
+      </span>
+    </div>
+  </sl-tag>`;
+}
+
+export function getTopCssIdentifierTemplate(
+  featureId: string | undefined,
+): TemplateResult | undefined {
+  if (featureId && TOP_CSS_INTEROP_ISSUES.includes(featureId)) {
+    return getTopSurveyIdentifierTemplate(
+      'CSS',
+      'https://2024.stateofhtml.com/',
+    );
+  }
+  return undefined;
+}
+
+export function getTopHtmlIdentifierTemplate(
+  featureId: string | undefined,
+): TemplateResult | undefined {
+  if (featureId && TOP_HTML_INTEROP_ISSUES.includes(featureId)) {
+    return getTopSurveyIdentifierTemplate(
+      'HTML',
+      'https://2024.stateofhtml.com/',
+    );
+  }
+  return undefined;
+}

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

@@ -31,6 +31,10 @@ import {
 import {ChartSelectPointEvent} from './webstatus-gchart.js';
 import {customElement, state} from 'lit/decorators.js';
 import {formatOverviewPageUrl} from '../utils/urls.js';
+import {
+  getTopCssIdentifierTemplate,
+  getTopHtmlIdentifierTemplate,
+} from './utils.js';
 
 @customElement('webstatus-stats-missing-one-impl-chart-panel')
 export class WebstatusStatsMissingOneImplChartPanel extends WebstatusLineChartPanel {
@@ -63,8 +67,15 @@ export class WebstatusStatsMissingOneImplChartPanel extends WebstatusLineChartPa
           overflow-x: auto;
           white-space: nowrap;
         }
-        .missing-feature-id-link {
-          padding-right: 1em;
+        .missing-feature-id {
+          padding: 0.5em 1em 0 0;
+        }
+        .survey-result,
+        .survey-result:hover,
+        .survey-result a {
+          font-size: 10px;
+          text-decoration: none;
+          cursor: help;
         }
       `,
     ];
@@ -240,12 +251,22 @@ export class WebstatusStatsMissingOneImplChartPanel extends WebstatusLineChartPa
       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;
+          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>
-              <a href="/features/${feature_id}" class="missing-feature-id-link"
-                >${feature_id}</a
-              >
+              <div class="missing-feature-id">
+                <a href="/features/${featureId}">${featureId}</a>
+                ${extraIdentifiers}
+              </div>
             </td>`,
           );
         } else {

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

@@ -59,6 +59,34 @@ export interface SavedSearch {
   description?: string;
 }
 
+export const TOP_CSS_INTEROP_ISSUES: string[] = [
+  'anchor-positioning',
+  'container-queries',
+  'has',
+  'nesting',
+  'view-transitions',
+  'subgrid',
+  'grid',
+  'scrollbar-gutter',
+  'scrollbar-width',
+  'scrollbar-color',
+  'scroll-driven-animations',
+  'scope',
+];
+
+export const TOP_HTML_INTEROP_ISSUES: string[] = [
+  'popover',
+  'anchor-positioning',
+  'cross-document-view-transitions',
+  'dialog',
+  'datalist',
+  'customized-built-in-elements',
+  'file-system-access',
+  'scroll-driven-animations',
+  'notifications',
+  'web-bluetooth',
+];
+
 export const DEFAULT_GLOBAL_SAVED_SEARCHES: GlobalSavedSearch[] = [
   {
     name: 'Baseline 2025',
@@ -92,17 +120,15 @@ export const DEFAULT_GLOBAL_SAVED_SEARCHES: GlobalSavedSearch[] = [
   },
   {
     name: 'Top CSS Interop issues',
-    query:
-      'id:anchor-positioning OR id:container-queries OR id:has OR id:nesting OR id:view-transitions OR id:subgrid OR id:grid OR name:scrollbar OR id:scroll-driven-animations OR id:scope',
+    query: `id:${TOP_CSS_INTEROP_ISSUES.join(' OR id:')}`,
     description:
       "This list reflects the top 10 interoperability pain points identified by developers in the State of CSS 2024 survey. We have also included their implementation status across Baseline browsers. You will notice that in some cases the items are already Baseline features, but may not have have been Baseline for long enough for developers to use with their target audience's browser support requirements. Since some voted-on pain points involve multiple web features, the list extends beyond 10 individual items for clarity and comprehensive coverage.",
     is_ordered: true,
     override_num_param: 25,
   },
   {
     name: 'Top HTML Interop issues',
-    query:
-      'id:popover OR id:anchor-positioning OR id:cross-document-view-transitions OR id:dialog OR id:datalist OR id:customized-built-in-elements OR id:file-system-access OR id:scroll-driven-animations OR id:notifications OR id:web-bluetooth',
+    query: `id:${TOP_HTML_INTEROP_ISSUES.join(' OR id:')}`,
     description:
       "This list reflects the top 10 interoperability pain points identified by developers in the State of HTML 2024 survey. We have also included their implementation status across Baseline browsers. You will notice that in some cases the items are already Baseline features, but may not have have been Baseline for long enough for developers to use with their target audience's browser support requirements.",
     is_ordered: true,