Merge pull request #380 from georgetown-cset/257-334-366-367-various-…

…smaller-issues Adjust various smaller UI elements
georgetown-cset · Jun 3, 2024 · 306b42a · 306b42a
2 parents 309f0dd + 43d6426
commit 306b42a
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 28 deletions.
diff --git a/company_linkage/README.md b/company_linkage/README.md
@@ -40,7 +40,6 @@ At the moment, you need to take the following steps:
 1. Edit `../web/retrieve_data.py`'s `clean_misc_groups` function, adding a new object to the `group_keys_to_names` object
 1. Edit these gui files following the example of the S&P 500 group:
 ```
-../web/gui-v2/src/components/DetailViewMoreMetadataDialog.jsx
 ../web/gui-v2/src/components/DetailViewPatents.jsx
 ../web/gui-v2/src/components/DetailViewPublications.jsx <-- do not edit the stat grid entries, these only reference S&P 500
 ```
diff --git a/web/gui-v2/src/components/DetailViewIntro.jsx b/web/gui-v2/src/components/DetailViewIntro.jsx
@@ -44,14 +44,6 @@ const styles = {
       padding: 0.5rem;
     }
   `,
-  linkWrapper: css`
-    list-style: none;
-    padding: 0;
-
-    li + li {
-      margin-top: 0;
-    }
-  `,
   buttonWrapper: css`
     display: flex;
     margin-top: 1rem !important;
@@ -74,17 +66,6 @@ const DetailViewIntro = ({
     { title: "Website", value: data.website ? <ExternalLink href={data.website}>{data.website}</ExternalLink> : undefined },
   ];
 
-  if ( data.market && data.market.length > 0 ) {
-    metadata.push({
-      title: "Stock tickers",
-      value: (
-        <ul css={styles.linkWrapper}>
-          {data.market.map((e) => <li key={e.text}><ExternalLink href={e.url}>{e.text}</ExternalLink></li>)}
-        </ul>
-      ),
-    });
-  }
-
   const titleCaseSource = (source) => {
     return source.charAt(0).toUpperCase()+source.substr(1);
   }

diff --git a/web/gui-v2/src/components/DetailViewMoreMetadataDialog.jsx b/web/gui-v2/src/components/DetailViewMoreMetadataDialog.jsx
@@ -36,6 +36,10 @@ const styles = {
     display: flex;
     flex-direction: column;
   `,
+  stockList: css`
+    list-style: none;
+    margin: 0;
+  `,
   dialogBottom: css`
     display: flex;
     justify-content: center;
@@ -76,11 +80,20 @@ const MoreMetadataDialog = ({
         {data.linkedin.map(e => <ExternalLink href={e} key={e}>{e}</ExternalLink>)}
       </div>
     },
-    { title: 'In S&P 500?', value: data.groups.sp500 ? 'Yes' : 'No' },
-    { title: 'In Global Big Tech?', value: data.groups.globalBigTech ? 'Yes' : 'No' },
     { title: 'Stage', value: data.stage },
   ];
 
+  if ( data.market && data.market.length > 0 ) {
+    metadata.push({
+      title: "Stock tickers",
+      value: (
+        <ul css={styles.stockList}>
+          {data.market.map((e) => <li key={e.text}><ExternalLink href={e.url}>{e.text}</ExternalLink></li>)}
+        </ul>
+      ),
+    });
+  }
+
   const handleClose = () => {
     updateIsOpen(false);
   };

diff --git a/web/gui-v2/src/components/DetailViewPatents.jsx b/web/gui-v2/src/components/DetailViewPatents.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { css } from '@emotion/react';
 
-import { Dropdown } from '@eto/eto-ui-components';
+import { Dropdown, HelpTooltip } from '@eto/eto-ui-components';
 
 import HeaderWithLink from './HeaderWithLink';
 import StatGrid from './StatGrid';
@@ -10,6 +10,7 @@ import TextAndBigStat from './TextAndBigStat';
 import TrendsChart from './TrendsChart';
 import overall from '../static_data/overall_data.json';
 import { patentMap } from '../static_data/table_columns';
+import { tooltips } from '../static_data/tooltips';
 import { commas } from '../util';
 
 const styles = {
@@ -83,7 +84,15 @@ const DetailViewPatents = ({
   const patentTableColumns = [
     { display_name: "Subfield", key: "subfield" },
     { display_name: "Patent applications", key: "patents" },
-    { display_name: <>Growth ({overall.startPatentYear}&ndash;{overall.endPatentYear})</>, key: "growth" },
+    {
+      display_name: (
+        <>
+          Growth ({overall.startPatentYear}&ndash;{overall.endPatentYear})
+          <HelpTooltip smallIcon={true} text={tooltips.detailView.growthColumnExplanation} />
+        </>
+      ),
+      key: "growth",
+    },
   ];
 
   const patentSubkeys = Object.keys(data.patents);

diff --git a/web/gui-v2/src/components/DetailViewPublications.jsx b/web/gui-v2/src/components/DetailViewPublications.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { css } from '@emotion/react';
 
-import { Dropdown } from '@eto/eto-ui-components';
+import { Dropdown, HelpTooltip } from '@eto/eto-ui-components';
 
 import HeaderWithLink from './HeaderWithLink';
 import StatGrid from './StatGrid';
@@ -10,6 +10,7 @@ import TextAndBigStat from './TextAndBigStat';
 import TrendsChart from './TrendsChart';
 import overall from '../static_data/overall_data.json';
 import { articleMap } from '../static_data/table_columns';
+import { tooltips } from '../static_data/tooltips';
 import { commas } from '../util';
 
 const styles = {
@@ -96,7 +97,15 @@ const DetailViewPublications = ({
     { display_name: "Subfield", key: "subfield" },
     { display_name: "Articles", key: "articles" },
     { display_name: "Citations per article", key: "citations" },
-    { display_name: <>Growth ({overall.startArticleYear}&ndash;{overall.endArticleYear})</>, key: "growth" },
+    {
+      display_name: (
+        <>
+          Growth ({overall.startArticleYear}&ndash;{overall.endArticleYear})
+          <HelpTooltip smallIcon={true} text={tooltips.detailView.growthColumnExplanation} />
+        </>
+      ),
+      key: "growth",
+    },
   ];
   const topAiResearchTopics = Object.entries(data.articles)
     .filter(([_key, val]) => val.isTopResearch)

diff --git a/web/gui-v2/src/components/ListView.test.js b/web/gui-v2/src/components/ListView.test.js
@@ -13,7 +13,7 @@ import { exportsForTestingOnly } from './ListViewTable';
 
 const { extractCurrentFilters, filterRow } = exportsForTestingOnly;
 
-const INITIAL_COLUMNS = ['Company', 'Country', 'AI publications', 'AI patents', 'Tech Tier 1 jobs'];
+const INITIAL_COLUMNS = ['Company', 'Country', 'AI publications', 'AI patents', 'AI jobs'];
 const REMOVED_COLUMN = 'AI publications';
 
 describe("ListView", () => {

diff --git a/web/gui-v2/src/static_data/table_columns.js b/web/gui-v2/src/static_data/table_columns.js
@@ -576,6 +576,7 @@ const columnDefinitions = [
         return <CellStat col="ai_jobs" country={row.country} data={data} />;
       },
     ),
+    initialCol: true,
     tooltip: "Zach_tktk"
   },
   {
@@ -591,7 +592,6 @@ const columnDefinitions = [
         return <CellStat col="tt1_jobs" country={row.country} data={data} />;
       },
     ),
-    initialCol: true,
     tooltip: "Zach_tktk",
   },
 ];

diff --git a/web/gui-v2/src/static_data/tooltips.js b/web/gui-v2/src/static_data/tooltips.js
@@ -60,6 +60,9 @@ const tooltips = {
     ai_jobs: "",
     tt1_jobs: "",
   },
+  detailView: {
+    growthColumnExplanation: "Average year-to-year percentage change for years with non-zero starting values over this interval",
+  },
   groupExplanations: {
     sp500: (
       <>