Merge pull request #362 from georgetown-cset/326-tooltips-for-jobs-nu…

…mbers

Add tooltips in jobs columns

web/gui-v2/package.json

@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",
-    "@eto/eto-ui-components": "^1.7.2",
+    "@eto/eto-ui-components": "^1.8.0",
     "@mdx-js/react": "^2.3.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.13.5",

web/gui-v2/src/components/AddRemoveColumnDialog.jsx

@@ -115,7 +115,7 @@ const AddRemoveColumnDialog = ({
                   disabled={colDef.key === "name"}
                 />
                 {colDef.title}
-                {colDef?.tooltip && <HelpTooltip text={colDef.tooltip} />}
+                {colDef?.tooltip && <HelpTooltip smallIcon={true} text={colDef.tooltip} />}
               </label>
             ))
           }

web/gui-v2/src/components/CellStat.jsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import { css } from '@emotion/react';
+import { Warning as WarningIcon } from '@mui/icons-material';
 
+import { HelpTooltip } from '@eto/eto-ui-components';
+
+import { tooltips } from '../static_data/tooltips';
 import { commas } from '../util';
 
 const styles = {
@@ -23,13 +27,50 @@ const styles = {
       color: #a0a0a0;
     }
   `,
+  cellWithTooltip: css`
+    /* Add a column for the tooltip to fit in.  Same note as above on 3.2em. */
+    grid-template-columns: auto 1fr 3.2em;
+  `,
 };
 
 const EMPTY_VALUES = [null, '---'];
 
-const CellStat = ({data, colKey}) => {
+const tooltipTypes = {
+  "United States": {},
+  "China": {
+    text: tooltips.jobsExplanations.chinaJobs,
+    Icon: WarningIcon,
+    iconCss: css`fill: var(--orange);`,
+  },
+  "noData": {
+    text: tooltips.jobsExplanations.noData,
+    iconCss: css`fill: var(--grey);`,
+  },
+  "other": {
+    text: tooltips.jobsExplanations.otherJobs,
+    Icon: WarningIcon,
+    iconCss: css`fill: var(--orange);`,
+  },
+};
+
+const CellStat = ({
+  col,
+  country = undefined,
+  data,
+}) => {
+  const tooltipType = (country === "United States") ? undefined : (
+    (country === "China") ? "China" : (
+      (data?.total === null || data?.total === undefined) ? "noData" : (
+        country ? "other" : undefined
+      )
+    )
+  );
+
   return (
-    <div css={styles.cell}>
+    <div css={[styles.cell, tooltipType && styles.cellWithTooltip]}>
+      {tooltipType &&
+        <HelpTooltip smallIcon={true} {...tooltipTypes[tooltipType]} />
+      }
       <div className="val">
         { data?.total === null ? 'n/a' : commas(data.total) }
       </div>

web/gui-v2/src/components/ListViewTable.jsx

@@ -97,6 +97,7 @@ const styles = {
     }
   `,
   buttonBarRight: css`
+    display: flex;
     margin-left: auto;
   `,
   buttonBarButton: css`
@@ -238,7 +239,7 @@ const GROUPS_OPTIONS = Object.entries(overallData.groups)
     text: (
       tooltips?.groupExplanations?.[k] ?
         <div css={styles.dropdownEntryWithTooltip}>
-          {v.name} <HelpTooltip css={styles.groupExplanationTooltip} text={tooltips.groupExplanations[k]} />
+          {v.name} <HelpTooltip css={styles.groupExplanationTooltip} smallIcon={true} text={tooltips.groupExplanations[k]} />
         </div>
       :
         v.name

web/gui-v2/src/static_data/table_columns.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { css } from '@emotion/react';
 
+import { tooltips } from './tooltips';
 import overall from '../static_data/overall_data.json';
 import CellStat from '../components/CellStat';
 import { slugifyCompanyName } from '../util';
@@ -571,11 +572,8 @@ const columnDefinitions = [
       "ai_jobs",
       undefined, // Use default extract function
       (_val, row) => {
-        if ( row?._group || row.linkedin.length > 0 ) {
-          return <CellStat data={row.other_metrics.ai_jobs} />;
-        } else {
-          return <CellStat data={{ total: null }} />
-        }
+        const data = (row?._group || row.linkedin.length > 0) ? row.other_metrics.ai_jobs : {total: null};
+        return <CellStat col="ai_jobs" country={row.country} data={data} />;
       },
     ),
     tooltip: "Zach_tktk"
@@ -589,11 +587,8 @@ const columnDefinitions = [
       "tt1_jobs",
       undefined, // Use default extract function
       (_val, row) => {
-        if ( row?._group || row.linkedin.length > 0 ) {
-          return <CellStat data={row.other_metrics.tt1_jobs} />;
-        } else {
-          return <CellStat data={{ total: null }} />
-        }
+        const data = (row?._group || row.linkedin.length > 0) ? row.other_metrics.tt1_jobs : {total: null};
+        return <CellStat col="tt1_jobs" country={row.country} data={data} />;
       },
     ),
     initialCol: true,

web/gui-v2/src/static_data/tooltips.js

@@ -85,6 +85,11 @@ const tooltips = {
       </>
     ),
   },
+  jobsExplanations: {
+    chinaJobs: "zach_tktk_china",
+    otherJobs: "zach_tktk_other",
+    noData: "--zach_tktk_null--",
+  },
 };
 
 export { tooltips };