Add and consolidate tooltips

Add tooltips to relevant portions of the detail view page (closes #360). Adjust patent growth tooltip structure to match newly-added tooltips. Consolidate column tooltip definitions into a single file (closes #377).
georgetown-cset · Jun 3, 2024 · 7c0e0da · 7c0e0da
1 parent ca5108a
commit 7c0e0da
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 75 deletions.
diff --git a/web/gui-v2/src/components/DetailViewPatents.jsx b/web/gui-v2/src/components/DetailViewPatents.jsx
@@ -134,7 +134,7 @@ const DetailViewPatents = ({
     {
       key: "ai-patents",
       stat: <>#{commas(data.patents.ai_patents.rank)}</>,
-      text: <>in PARAT for number of AI-related patents filed</>,
+      text: <span>in PARAT for number of AI-related patents filed <HelpTooltip smallIcon={true} text={tooltips.detailView.patents.aiRelatedPatents} /></span>,
     },
     {
       key: "ai-patent-growth",
@@ -160,7 +160,7 @@ const DetailViewPatents = ({
       display_name: (
         <>
           Growth ({overall.startPatentYear}&ndash;{overall.endPatentYear})
-          <HelpTooltip smallIcon={true} text={tooltips.detailView.growthColumnExplanation} />
+          <HelpTooltip smallIcon={true} text={tooltips.detailView.patents.growthColumnExplanation} />
         </>
       ),
       key: "growth",
@@ -207,15 +207,15 @@ const DetailViewPatents = ({
         css={styles.section}
         data={patentApplicationAreas}
         id="top-patent-applications"
-        title={<>Top application areas across {data.name}'s AI filed patents</>}
+        title={<>Top application areas across {data.name}'s AI filed patents <HelpTooltip text={tooltips.detailView.patents.topApplicationAreasTable} /></>}
       />
 
       <TableSection
         columns={patentTableColumns}
         css={styles.section}
         data={patentIndustryAreas}
         id="top-patent-industries"
-        title={<>Top industry areas across {data.name}'s AI filed patents</>}
+        title={<>Top industry areas across {data.name}'s AI filed patents <HelpTooltip text={tooltips.detailView.patents.topIndustryAreasTable} /></>}
       />
 
       <TrendsChart

diff --git a/web/gui-v2/src/components/DetailViewPublications.jsx b/web/gui-v2/src/components/DetailViewPublications.jsx
@@ -64,7 +64,7 @@ const DetailViewPublications = ({
     {
       key: "ai-papers",
       stat: <>#{data.articles.ai_publications.rank}</>,
-      text: <>in PARAT for number of AI research articles</>,
+      text: <span>in PARAT for number of AI research articles <HelpTooltip smallIcon={true} text={tooltips.detailView.publications.aiResearchArticles} /></span>,
     },
     {
       key: "average-citations",
@@ -74,7 +74,7 @@ const DetailViewPublications = ({
     {
       key: "highly-cited",
       stat: <>{commas(data.articles.highly_cited_ai_pubs.total)}</>,
-      text: <>highly-cited articles (#{commas(data.articles.highly_cited_ai_pubs.rank)} in PARAT{data.groups.sp500 && <>, #{commas(data.articles.highly_cited_ai_pubs.sp500_rank)} in the S&P 500</>})</>,
+      text: <span>highly-cited articles (#{commas(data.articles.highly_cited_ai_pubs.rank)} in PARAT{data.groups.sp500 && <>, #{commas(data.articles.highly_cited_ai_pubs.sp500_rank)} in the S&P 500</>}) <HelpTooltip smallIcon={true} text={tooltips.detailView.publications.highlyCitedArticles} /></span>,
     },
     {
       key: "ai-research-growth",
@@ -134,14 +134,14 @@ const DetailViewPublications = ({
         bigText={<>{commas(data.articles.ai_publications.total)} AI research articles</>}
       />
 
-      <StatGrid css={styles.sectionMargin} entries={statGridEntries} />
+      <StatGrid entries={statGridEntries} />
 
       <TableSection
         columns={topAiResearchTopicsColumns}
         css={styles.section}
         data={topAiResearchTopics}
         id="top-research-topics"
-        title={<>{data.name}'s top AI research topics</>}
+        title={<>{data.name}'s top AI research topics <HelpTooltip text={tooltips.detailView.publications.topResearchTopicsTable} /></>}
       />
 
       <TrendsChart
@@ -198,7 +198,7 @@ const DetailViewPublications = ({
         id="ai-top-conference-pubs-2"
         layoutChanges={chartLayoutChanges}
         partialStartIndex={endIx}
-        title={<>{data.name}'s top AI conference publications</>}
+        title={<>{data.name}'s top AI conference publications <HelpTooltip text={tooltips.detailView.publications.topConferencePubsChart} /></>}
         years={overall.years}
       />
     </>

diff --git a/web/gui-v2/src/components/DetailViewWorkforce.jsx b/web/gui-v2/src/components/DetailViewWorkforce.jsx
@@ -1,35 +1,64 @@
 import React from 'react';
+import { css } from '@emotion/react';
 
-import { Alert } from '@eto/eto-ui-components';
+import { Alert, HelpTooltip } from '@eto/eto-ui-components';
 
 import HeaderWithLink from './HeaderWithLink';
 import StatBox from './StatBox';
 import StatWrapper from './StatWrapper';
 import overall from '../static_data/overall_data.json';
 import { otherMetricMap } from '../static_data/table_columns';
+import { tooltips } from '../static_data/tooltips';
+
+const styles = {
+  nonUScountryAlert: css`
+    margin: 0 auto;
+    max-width: 700px;
+  `,
+};
 
 const DetailViewWorkforce = ({
   data,
 }) => {
   const yearSpanText = <>{overall.years[0]} to {overall.years[overall.years.length-1]}</>;
 
-  const otherMetricsWorkforceKeys = ['ai_jobs', 'tt1_jobs'];
+  const otherMetricsWorkforce = [
+    {
+      key: 'ai_jobs',
+      tooltip: tooltips.detailView.workforce.aiJobs,
+    },
+    {
+      key: 'tt1_jobs',
+      tooltip: tooltips.detailView.workforce.tt1Jobs,
+    },
+  ];
 
   return (
     <>
       <HeaderWithLink title="Workforce" />
 
+      {data.country !== "United States" &&
+        <Alert css={styles.nonUScountryAlert}>
+          {data.country === "China" ? (
+            <>Zach_TKTK alert about China data</>
+          ) : (
+            <>Zach_TKTK alert about non-US, non-China data</>
+          )}
+        </Alert>
+      }
+
       {data.linkedin.length > 0 ?
         <StatWrapper>
-          { otherMetricsWorkforceKeys.map((key) => (
+          { otherMetricsWorkforce.map(({ key, tooltip }) => (
             <StatBox
               description={
-                <>
-                  From {yearSpanText}, {data.name} here is some explanatory text
+                <span>
+                  From {yearSpanText}, {data.name} here is some explanatory text Zach_tktk
                   describing how they had NUMBER jobs of the specified type
                   (#{data.other_metrics[key].rank} rank in PARAT
                   {data.in_sandp_500 && <>, #NUMBER in the S&P500</>})
-                </>
+                  <HelpTooltip smallIcon={true} text={tooltip} />
+                </span>
               }
               key={key}
               label={otherMetricMap[key]}

diff --git a/web/gui-v2/src/components/SectionHeading.jsx b/web/gui-v2/src/components/SectionHeading.jsx
@@ -3,10 +3,12 @@ import { css } from '@emotion/react';
 
 const styles = {
   chartTitle: css`
+    display: flex;
     font-family: GTZirkonMedium;
     font-size: 24px;
+    gap: 0.25em;
+    justify-content: center;
     margin-bottom: 0;
-    text-align: center;
   `,
 };
 

diff --git a/web/gui-v2/src/components/StatBox.jsx b/web/gui-v2/src/components/StatBox.jsx
@@ -46,6 +46,11 @@ const styles = {
     display: flex;
     text-align: center;
 
+    span.helptooltip {
+      margin-top: -3px;
+      vertical-align: middle;
+    }
+
     ${breakpoints.phone_large} {
       text-align: start;
     }

diff --git a/web/gui-v2/src/components/StatGrid.jsx b/web/gui-v2/src/components/StatGrid.jsx
@@ -36,6 +36,11 @@ const styles = {
         }
       }
     }
+
+    span.helptooltip {
+      margin-top: -3px;
+      vertical-align: middle;
+    }
   `,
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -36,6 +36,11 @@ const styles = { @@
             }
           }
         }
+        span.helptooltip {
+          margin-top: -3px;
+          vertical-align: middle;
+        }
       `,
     };
@@ Expand Down @@