feat(explorer): help for facets in explorer.html view

adobe · Jan 17, 2025 · ab48967 · ab48967
1 parent 985b0c3
commit ab48967
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 49 deletions.
diff --git a/tools/rum/elements/list-facet.js b/tools/rum/elements/list-facet.js
@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-unresolved
 import { utils, stats } from '@adobe/rum-distiller';
 import {
   escapeHTML, toHumanReadable,
@@ -131,6 +132,7 @@ export default class ListFacet extends HTMLElement {
       const fieldSet = this.querySelector('fieldset') || document.createElement('fieldset');
       fieldSet.classList.add(`facet-${facetName}`);
       const legendText = this.querySelector('legend')?.textContent || facetName;
+      const extraElements = Array.from(this.querySelectorAll(':scope > a, legend > a.icon') || []);
 
       fieldSet.textContent = '';
 
@@ -142,6 +144,8 @@ export default class ListFacet extends HTMLElement {
       clipboard.title = 'Copy facet rows to clipboard';
 
       legend.append(clipboard);
+      extraElements.forEach((el) => el.classList.add('icon'));
+      legend.append(...extraElements);
 
       fieldSet.append(legend);
       const filterKeys = facetName === 'checkpoint' && mode !== 'all';

diff --git a/tools/rum/explorer.html b/tools/rum/explorer.html
@@ -114,6 +114,8 @@ <h2>TTFB</h2>
             </list-facet>
             <list-facet facet="userAgent">
               <legend>Device Type and Operating System</legend>
+              <a href="/docs/rum-explorer#device-share" class="help"
+              target="_blank" title="What devices and operating systems have accessed your site?"></a>
               <dl>
                 <dt>desktop</dt>
                 <dd>All Desktop</dd>
@@ -147,9 +149,13 @@ <h2>TTFB</h2>
             </list-facet>
             <link-facet facet="url" thumbnail="true" highlight="filter">
               <legend>URL</legend>
+              <a href="/docs/rum-explorer#url" class="help"
+              target="_blank" title="What different pages make up your site?"></a>
             </link-facet>
             <list-facet facet="checkpoint" highlight="filter">
               <legend>Checkpoints</legend>
+              <a href="/docs/rum-explorer#checkpoints" class="help"
+              target="_blank" title="What type of activity data is collected?"></a>
               <dl>
                 <dt>enter</dt>
                 <dd>Visit Entry</dd>
@@ -175,28 +181,42 @@ <h2>TTFB</h2>
             </list-facet>
             <literal-facet facet="click.source">
               <legend>Click Source (CSS Selector)</legend>
+              <a href="/docs/rum-explorer#facet-click" class="help"
+              target="_blank" title="What page visitors clicked"></a>
             </literal-facet>
             <link-facet facet="click.target">
               <legend>Click Target (URL)</legend>
+              <a href="/docs/rum-explorer#facet-click" class="help"
+              target="_blank" title="What page visitors clicked"></a>
             </link-facet>
             <literal-facet facet="viewmedia.source">
               <legend>Media Source (CSS Selector)</legend>
+              <a href="/docs/rum-explorer#facet-viewmedia" class="help"
+              target="_blank" title="What image/video visitors have seen?"></a>
             </literal-facet>
             <file-facet facet="viewmedia.target">
               <legend>Media Target</legend>
+              <a href="/docs/rum-explorer#facet-viewmedia" class="help"
+              target="_blank" title="What image/video visitors have seen?"></a>
             </file-facet>
             <literal-facet facet="viewblock.source">
               <legend>Block (CSS Selector)</legend>
+              <a href="/docs/rum-explorer#facet-viewblock" class="help"
+              target="_blank" title="What blocks visitors have seen?"></a>
             </literal-facet>
             <link-facet facet="enter.source" thumbnail="true" favicon="true">
               <legend>External Referrer</legend>
+              <a href="/docs/rum-explorer#facet-enter" class="help"
+              target="_blank" title="How the users entered into the site?"></a>
               <dl>
                 <dt>(direct)</dt>
                 <dd>Direct Entry (or via App)</dd>
               </dl>
             </link-facet>
             <link-facet facet="navigate.source" thumbnail="true">
               <legend>Internal Referrer</legend>
+              <a href="/docs/rum-explorer#facet-navigate" class="help"
+              target="_blank" title="Internal navigation paths on the site"></a>
             </link-facet>
 
             <list-facet facet="consent.source">