Add parat usage disclaimer and fix spacing

Closes #441
georgetown-cset · Jun 19, 2024 · f71a934 · f71a934
1 parent 4044c29
commit f71a934
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 9 deletions.
diff --git a/web/gui-v2/src/components/DetailViewWorkforce.jsx b/web/gui-v2/src/components/DetailViewWorkforce.jsx
@@ -41,7 +41,7 @@ const DetailViewWorkforce = ({
           From {yearSpanText}, {data.name} employed about NUMBER Tech Tier 1 workers
           (#{data.other_metrics.tt1_jobs.rank} rank in PARAT
           {data.groups.sp500 && <>, #{data.other_metrics.tt1_jobs.sp500_rank} in the S&P500</>}).
-          Tech Tier 1 workers include anyone with technical skills and a reasonable probability of working with AI.<ExternalLink href="https://eto.tech/dataset-docs/private-sector-ai-indicators/#workforce">Read more &gt;&gt;</ExternalLink>
+          Tech Tier 1 workers include anyone with technical skills and a reasonable probability of working with AI. <ExternalLink href="https://eto.tech/dataset-docs/private-sector-ai-indicators/#workforce">Read more &gt;&gt;</ExternalLink>
         </span>
       ),
     },

diff --git a/web/gui-v2/src/components/ParatUsageDisclaimer.jsx b/web/gui-v2/src/components/ParatUsageDisclaimer.jsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { css } from '@emotion/react';
+
+import { ExternalLink } from '@eto/eto-ui-components';
+
+const styles = {
+  wrapper: css` 
+    background-color: white;
+    font-size: 90%;
+    margin: auto;
+    max-width: 800px;
+    padding: 2rem;
+    color: var(--grey-light);
+    
+    a {
+      color: var(--grey-light) !important;
+    }
+  `,
+};
+
+const ParatUsageDisclaimer = () => {
+  return (
+    <div css={styles.wrapper}>
+      The AI activity metrics in the <ExternalLink href="https://eto.tech/dataset-docs/private-sector-ai-indicators/">Private-Sector AI Indicators dataset</ExternalLink> are derived from data from <ExternalLink href="https://www.reveliolabs.com/">Revelio Labs</ExternalLink>, <ExternalLink href="https://clarivate.com/products/scientific-and-academic-research/research-discovery-and-workflow-solutions/webofscience-platform/">Clarivate Web of Science</ExternalLink>, and other leading sources. Additional descriptive metadata in PARAT comes from the <ExternalLink href="https://data.crunchbase.com/v3.1/docs/open-data-map">Crunchbase Open Data Map</ExternalLink> (<ExternalLink href="https://crunchbase.com">powered by Crunchbase</ExternalLink>) and <ExternalLink href="https://permid.org/">PermID</ExternalLink>. For details on our sourcing, methodology, and limitations, see the <ExternalLink href={"https://eto.tech/tool-docs/parat/"}>tool documentation</ExternalLink>.
+    </div>
+  );
+};
+
+export default ParatUsageDisclaimer;
diff --git a/web/gui-v2/src/pages/company/{companiesJson.cset_id}-{companiesJson.name}.jsx b/web/gui-v2/src/pages/company/{companiesJson.cset_id}-{companiesJson.name}.jsx
@@ -1,9 +1,10 @@
 import React from 'react';
 import { graphql } from 'gatsby';
 
-import { AppWrapper, UsageDisclaimer } from '@eto/eto-ui-components';
+import { AppWrapper } from '@eto/eto-ui-components';
 
 import DetailView from '../../components/DetailView';
+import ParatUsageDisclaimer from '../../components/ParatUsageDisclaimer';
 import { company_data as allCompanies } from '../../static_data/data';
 
 const CompanyPage = ({ data }) => {
@@ -17,9 +18,7 @@ const CompanyPage = ({ data }) => {
         companyData={companyData}
         companyId={companyId}
       />
-      <UsageDisclaimer
-        toolName="PARAT"
-      />
+      <ParatUsageDisclaimer/>
     </AppWrapper>
   );
 };

diff --git a/web/gui-v2/src/pages/index.js b/web/gui-v2/src/pages/index.js
@@ -5,11 +5,11 @@ import { graphql, useStaticQuery } from 'gatsby';
 import {
   AppWrapper,
   InfoCard,
-  UsageDisclaimer,
   breakpoints,
 } from '@eto/eto-ui-components';
 
 import ListView from '../components/ListView';
+import ParatUsageDisclaimer from '../components/ParatUsageDisclaimer';
 
 const styles = {
   introBox: css`
@@ -59,9 +59,7 @@ const IndexPage = () => {
         </div>
       </InfoCard>
       <ListView css={styles.listView} />
-      <UsageDisclaimer
-        toolName="PARAT"
-      />
+      <ParatUsageDisclaimer/>
     </AppWrapper>
   );
 }