Pre-release: Polishing pages and minor bug fixes (#19)

* Refactor(PrivacyPolicy): compact no accordion policy page * Refactor(api): changed endpoints to updated api endpoint * Chore(constants): removed cdn urls for pdfdist-js * Feat(fasttext): added required wasm dependencies to run fasttext in-browser * Fix(config): module resolution changed from node to bundler to handle fasttext.wasm.js * Feat(config): added wasm as a list of plugins in vite * Refactor(extractPDF): pdfjs-dist uses internal worker file and added lang id via fasttext * Feat(api): added model version param to POST endpoint * Feat(asset): blue hero image added * Fix(images): indexed new blue hero image * Refactor(extractPDF): lang id model promise loaded only once * Refactor(VNRAnalysis): removed invalid docs prop and cleaned up file viewer Popover * Chore(DetailedReportview): removed unused props to VNRAnalysis * Refactor(priorities): UI/UX refactor for selection and analysis of documents * Fix(api): minor change to extraction endpoint to track backend change * Refactor(priorities): upload files process redesigned * WIP(styling): upload list styling overrides * Fix(libs): compatible typescript dev dependency added to project * Refactor(extractPDF): added the proper typing for languages in extraction process * Fix(minor): placement modification for tooltip * Fix(priorities): minor font fix for our approach text * Refactor(priorities): cleaned up modal content * Refactor(extractPDF): language identification model loading exported for initialization on load * Feat(main): model initalized on app entry * Feat(assets): added new hero backgrounds for pages * Feat(backgrounds): added new hero background for pages * Fix(priorities): background image, tooltip fix, and icon size change * Chore(prioritiesStyle): removed unused style for error item tooltip * Refactor(priorities): content update, state improvement and minor tweaks * Refactor(DefaultHomePage): country landing page background similar to global home page
UNDP-Data · Nov 8, 2024 · f0436de · f0436de
1 parent 9ad654a
commit f0436de
Show file tree

Hide file tree

Showing 25 changed files with 2,982 additions and 7,529 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
     "@types/react": "^17.0.27",
     "@types/react-router-dom": "^5.3.2",
     "@types/styled-components": "^5.1.20",
-    "antd": "^5.3.3",
+    "antd": "^5.21.4",
     "axios": "^1.4.0",
     "d3-array": "^3.2.0",
     "d3-force": "^3.0.0",
@@ -48,6 +48,7 @@
     "d3-transition": "^3.0.1",
     "d3-zoom": "^3.0.0",
     "dom-to-image": "^2.6.0",
+    "fasttext.wasm.js": "^1.0.0",
     "lodash.isequal": "^4.5.0",
     "lodash.max": "^4.0.1",
     "lodash.maxby": "^4.6.0",
@@ -71,8 +72,8 @@
     "react-waypoint": "^10.3.0",
     "reactflow": "^11.7.4",
     "styled-components": "^5.3.3",
-    "typescript": "^5.0.3",
     "undp-viz-colors": "^1.0.5",
+    "vite-plugin-wasm": "^3.3.0",
     "web-vitals": "^1.1.2"
   },
   "scripts": {
@@ -93,6 +94,7 @@
     "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "prettier": "2.4.1",
+    "typescript": "^5.1.6",
     "vite": "^4.3.7",
     "vite-plugin-eslint": "^1.8.1"
   }

diff --git a/public/fastText/fastText.common.wasm b/public/fastText/fastText.common.wasm
diff --git a/public/fastText/models/lid.176.ftz b/public/fastText/models/lid.176.ftz
diff --git a/src/Constants.ts b/src/Constants.ts
@@ -663,12 +663,5 @@ export const COUNTRIES_WITH_REPORT = [
   'THA',
 ];
 
-export const PDFJS_DIST_CDNS = [
-  '//cdn.jsdelivr.net/npm/[email protected]/build/pdf.worker.min.mjs',
-  '//cdnjs.cloudflare.com/ajax/libs/pdf.js/4.6.82/pdf.worker.min.mjs',
-  '//unpkg.com/browse/[email protected]/build/pdf.worker.min.mjs',
-  '//cdn.jsdelivr.net/npm/[email protected]/legacy/build/pdf.worker.min.mjs',
-];
-
 export const AIAAS_API_BASE_URL = import.meta.env.VITE_AIAAS_API_BASE_URL;
 export const AIAAS_API_KEY = import.meta.env.VITE_AIAAS_API_KEY;
diff --git a/src/CurrentGaps/index.tsx b/src/CurrentGaps/index.tsx
@@ -24,7 +24,7 @@ interface Props {
 }
 
 const HeroImageEl = styled.div`
-  background: url(${IMAGES.heroImage}) rgba(0, 0, 0, 0.3) no-repeat center;
+  background: url(${IMAGES.greenHeroImage}) rgba(0, 0, 0, 0.3) no-repeat center;
   background-size: cover;
   background-blend-mode: multiply;
   margin-top: 7.1875rem;
@@ -66,8 +66,8 @@ export const CurrentGaps = (props: Props) => {
             </span>
           </div>
           <h1 className='undp-typography'>
-            SDG Trends for
-            {' '}
+            SDG Trends:
+            <br />
             {countryFullName}
           </h1>
           <h5 className='undp-typography'>

diff --git a/src/FutureScenarios/index.tsx b/src/FutureScenarios/index.tsx
@@ -13,7 +13,7 @@ interface Props {
 }
 
 const HeroImageEl = styled.div`
-  background: url(${IMAGES.heroImage}) rgba(0, 0, 0, 0.3) no-repeat center;
+  background: url(${IMAGES.yellowHeroImage}) rgba(0, 0, 0, 0.3) no-repeat center;
   background-size: cover;
   margin-top: 7.1875rem;
 `;
@@ -46,8 +46,8 @@ export const FutureScenariosList = (props: Props) => {
             </span>
           </div>
           <h1 className='undp-typography'>
-            Showing Future Scenario for
-            {' '}
+            Future Scenario:
+            <br />
             {countryFullName}
           </h1>
           <h5 className='undp-typography'>

diff --git a/src/HomePage/DefaultHomePage.tsx b/src/HomePage/DefaultHomePage.tsx
@@ -12,10 +12,21 @@ interface Props {
   countryFullName?: string;
 }
 
-const HeroImageEl = styled.div`
-  background: url(${IMAGES.heroImage}) no-repeat center;
-  background-size: cover;
-  margin-top: 7.1875rem;
+const HeaderTextDiv = styled.div`
+  position: absolute;
+  top: 0;
+  height: calc(100vh - 240px - 1rem);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding-top: 50px;
+  padding-left: var(--spacing-09);
+  padding-right: var(--spacing-09);
+  color: white;
+  @media (max-width: 720px) {
+    padding-left: var(--spacing-05);
+    padding-right: var(--spacing-05);
+  }
 `;
 
 const H2 = styled.h2`
@@ -32,48 +43,52 @@ export const DefaultHomePage = (props: Props) => {
   } = props;
   return (
     <>
-      <HeroImageEl className='undp-hero-image'>
-        <div className='max-width'>
-          <h1 className='undp-typography'>
+      <div className='background' style={{ height: 'calc(100vh - 240px - 1rem)', paddingTop: 0 }}>
+        <div className='blob blob1' />
+        <div className='blob blob2' />
+        <HeaderTextDiv>
+          <div className='max-width'>
+            <h1 className='undp-typography'>
+              {
+                countryFullName ? `SDG Push Diagnostic for ${countryFullName}` : 'SDG Push Diagnostic'
+              }
+            </h1>
+            <h5 className='undp-typography'>
+              SDG Push reimagines and recalibrates how we determine, interrogate and advance development interventions that put countries on more stable footing. The Diagnostic powers &lsquo;Integrated SDG Insights&lsquo; reports which provide a strong evidence-base and relevant insights to support national ambition at the SDG Summit 2023.
+            </h5>
             {
-              countryFullName ? `SDG Push Diagnostic for ${countryFullName}` : 'SDG Push Diagnostic'
-            }
-          </h1>
-          <h5 className='undp-typography'>
-            SDG Push reimagines and recalibrates how we determine, interrogate and advance development interventions that put countries on more stable footing. The Diagnostic powers &lsquo;Integrated SDG Insights&lsquo; reports which provide a strong evidence-base and relevant insights to support national ambition at the SDG Summit 2023.
-          </h5>
-          {
-            countryCode
-              ? COUNTRIES_WITH_REPORT.indexOf(countryCode.replaceAll('WithCountryGovInput', '')) !== -1
-                ? (
-                  <a
-                    href={`https://sdgigeneralstorage.blob.core.windows.net/sdg-push/InsightReports/UNDP%20-%20SDG%20${countryCode.replaceAll('WithCountryGovInput', '')}.pdf`}
-                    target='_blank'
-                    className='undp-button button-arrow button-primary margin-top-07'
-                    style={{ width: 'fit-content', textDecoration: 'none' }}
-                    rel='noreferrer'
-                  >
-                    Read the Integrated SDG Insights Report
-                  </a>
-                ) : null : (
-                  <div className='margin-top-09'>
-                    <p className='label margin-bottom-03'>Select a country to find out more</p>
-                    <Select
-                      className='undp-select'
-                      placeholder='Select a country to find out more'
-                      showSearch
-                      onChange={(value) => { window.open(`../../${CountryTaxonomy[CountryTaxonomy.findIndex((d) => d['Country or Area'] === value)]['Alpha-3 code-1'] === 'IDN' ? 'IDNWithCountryGovInput' : CountryTaxonomy[CountryTaxonomy.findIndex((d) => d['Country or Area'] === value)]['Alpha-3 code-1']}/sdg-trends`, '_self'); }}
-                      style={{ flexGrow: 1 }}
+              countryCode
+                ? COUNTRIES_WITH_REPORT.indexOf(countryCode.replaceAll('WithCountryGovInput', '')) !== -1
+                  ? (
+                    <a
+                      href={`https://sdgigeneralstorage.blob.core.windows.net/sdg-push/InsightReports/UNDP%20-%20SDG%20${countryCode.replaceAll('WithCountryGovInput', '')}.pdf`}
+                      target='_blank'
+                      className='undp-button button-arrow button-primary margin-top-07'
+                      style={{ width: 'fit-content', textDecoration: 'none' }}
+                      rel='noreferrer'
                     >
-                      {
-                    sortBy(CountryTaxonomy, 'Country or Area').map((d, i: number) => <Select.Option key={i} className='undp-select-option' value={d['Country or Area']}>{d['Country or Area']}</Select.Option>)
-                  }
-                    </Select>
-                  </div>
-              )
-          }
-        </div>
-      </HeroImageEl>
+                      Read the Integrated SDG Insights Report
+                    </a>
+                  ) : null : (
+                    <div className='margin-top-09'>
+                      <p className='label margin-bottom-03'>Select a country to find out more</p>
+                      <Select
+                        className='undp-select'
+                        placeholder='Select a country to find out more'
+                        showSearch
+                        onChange={(value) => { window.open(`../../${CountryTaxonomy[CountryTaxonomy.findIndex((d) => d['Country or Area'] === value)]['Alpha-3 code-1'] === 'IDN' ? 'IDNWithCountryGovInput' : CountryTaxonomy[CountryTaxonomy.findIndex((d) => d['Country or Area'] === value)]['Alpha-3 code-1']}/sdg-trends`, '_self'); }}
+                        style={{ flexGrow: 1 }}
+                      >
+                        {
+                        sortBy(CountryTaxonomy, 'Country or Area').map((d, i: number) => <Select.Option key={i} className='undp-select-option' value={d['Country or Area']}>{d['Country or Area']}</Select.Option>)
+                      }
+                      </Select>
+                    </div>
+                )
+            }
+          </div>
+        </HeaderTextDiv>
+      </div>
       {
         countryCode ? null
           : (

diff --git a/src/HomePage/DetailedReportView.tsx b/src/HomePage/DetailedReportView.tsx
@@ -251,7 +251,6 @@ export const DetailedReportView = (props: Props) => {
                   document={priorityData.documents}
                   defaultDocs
                   onlyBubbleChart
-                  invalidDocuments={undefined}
                 />
                 <div style={{ margin: 'var(--spacing-07) 0 0 var(--spacing-05)' }}>
                   <NavLink

diff --git a/src/Interlinkages/index.tsx b/src/Interlinkages/index.tsx
@@ -22,7 +22,7 @@ interface Props {
 }
 
 const HeroImageEl = styled.div`
-background: url(${IMAGES.heroImage}) rgba(0, 0, 0, 0.3) no-repeat center;
+background: url(${IMAGES.orangeHeroImage}) rgba(0, 0, 0, 0.3) no-repeat center;
   background-size: cover;
   margin-top: 7.1875rem;
 `;
@@ -76,8 +76,8 @@ export const Interlinkages = (props: Props) => {
             </span>
           </div>
           <h1 className='undp-typography'>
-            SDG Interlinkages For
-            {' '}
+            SDG Interlinkages:
+            <br />
             {countryFullName}
           </h1>
         </div>

diff --git a/src/Priorities/VNRAnalysis.tsx b/src/Priorities/VNRAnalysis.tsx
@@ -17,7 +17,6 @@ interface Props {
   document: any;
   defaultDocs: boolean;
   onlyBubbleChart: boolean;
-  invalidDocuments: any;
 }
 
 interface SDGHoveredProps {
@@ -63,22 +62,13 @@ const FileNameChip = styled.div`
   margin: 2px;
 `;
 
-const FileNameErrorChip = styled.div`
-  font-size: 1rem;
-  padding: 0.5rem;
-  background-color: var(--light-red);
-  font-weight: bold;
-  margin: 2px;
-`;
-
 export const VNRAnalysis = (props: Props) => {
   const {
     data,
     document,
     goalStatuses,
     defaultDocs,
     onlyBubbleChart,
-    invalidDocuments,
   } = props;
   const [selectedSDG, setSelectedSDG] = useState<any>(null);
   const [hoveredSDG, setHoveredSDG] = useState<null | SDGHoveredProps>(null);
@@ -129,28 +119,20 @@ export const VNRAnalysis = (props: Props) => {
               </FileNameChip>
             ) : (
               <Popover
-                title='Analysis Based on'
-                content={defaultDocs ? (
-                  <>
-                    {document && document.map((d: any, i: number) => (d.link ? <FileNameChip key={i}><a href={d.link} target='_blank' rel='noreferrer' className='undp-style'>{d.name}</a></FileNameChip> : <FileNameChip key={i}>{d.name}</FileNameChip>))}
-                  </>
-                )
-                  : (
-                    <>
-                      {document && document.map((d: any, i: number) => <FileNameChip key={i}>{d}</FileNameChip>)}
-                      <div style={{ marginTop: '10px' }}>
-                        {invalidDocuments && invalidDocuments.length > 0 && <span><b>Excluded files</b></span>}
-                        {invalidDocuments.map((d: any, i: number) => (
-                          <FileNameErrorChip key={i}>
-                            <Popover content={d.text} placement='right'>
-                              {' '}
-                              {d.file_name}
-                            </Popover>
-                          </FileNameErrorChip>
-                        ))}
+                title='Analysis based on the following files'
+                placement='topRight'
+                content={(
+                  defaultDocs ? (
+                    <div style={{ maxHeight: '200px', overflowY: 'scroll' }}>
+                      {document && document.map((d: any, i: number) => (d.link ? <FileNameChip key={i}><a href={d.link} target='_blank' rel='noreferrer' className='undp-style'>{d.name}</a></FileNameChip> : <FileNameChip key={i}>{d.name}</FileNameChip>))}
+                    </div>
+                  )
+                    : (
+                      <div style={{ maxHeight: '200px', overflowY: 'scroll' }}>
+                        {document && document.map((d: any, i: number) => <FileNameChip key={i}>{d}</FileNameChip>)}
                       </div>
-                    </>
-                  )}
+                    )
+                )}
               >
                 <Button>
                   {document.length}
@@ -344,28 +326,20 @@ export const VNRAnalysis = (props: Props) => {
                       </FileNameChip>
                     ) : (
                       <Popover
-                        title='Analysis Based on'
-                        content={defaultDocs ? (
-                          <>
-                            {document && document.map((d: any, i: number) => (d.link ? <FileNameChip key={i}><a href={d.link} target='_blank' rel='noreferrer' className='undp-style'>{d.name}</a></FileNameChip> : <FileNameChip key={i}>{d.name}</FileNameChip>))}
-                          </>
-                        )
-                          : (
-                            <>
-                              {document && document.map((d: any, i: number) => <FileNameChip key={i}>{d}</FileNameChip>)}
-                              <div style={{ marginTop: '10px' }}>
-                                {invalidDocuments && invalidDocuments.length > 0 && <span><b>Excluded files</b></span>}
-                                {invalidDocuments.map((d: any, i: number) => (
-                                  <FileNameErrorChip key={i}>
-                                    <Popover content={d.text} placement='right'>
-                                      {' '}
-                                      {d.file_name}
-                                    </Popover>
-                                  </FileNameErrorChip>
-                                ))}
+                        title='Analysis based on the following files'
+                        placement='bottomLeft'
+                        content={(
+                          defaultDocs ? (
+                            <div style={{ maxHeight: '200px', overflowY: 'scroll' }}>
+                              {document && document.map((d: any, i: number) => (d.link ? <FileNameChip key={i}><a href={d.link} target='_blank' rel='noreferrer' className='undp-style'>{d.name}</a></FileNameChip> : <FileNameChip key={i}>{d.name}</FileNameChip>))}
+                            </div>
+                          )
+                            : (
+                              <div style={{ maxHeight: '200px', overflowY: 'scroll' }}>
+                                {document && document.map((d: any, i: number) => <FileNameChip key={i}>{d}</FileNameChip>)}
                               </div>
-                            </>
-                          )}
+                            )
+                        )}
                       >
                         <Button>
                           {document.length}

diff --git a/src/Priorities/index.css b/src/Priorities/index.css
@@ -0,0 +1,27 @@
+.undp-accordion.no-background .ant-collapse-item {
+    border: 0 !important;
+    background-color: transparent !important;
+    border-bottom: none !important;
+    margin-bottom: 0 !important;
+}
+
+.undp-accordion.no-background .ant-collapse-item .ant-collapse-header {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+.undp-accordion.no-background .ant-collapse-item .ant-collapse-header {
+    align-items: center !important;
+}
+
+.undp-accordion.no-background .ant-collapse-item .ant-collapse-header-text {
+    font-size: 1.563rem !important;
+    font-weight: normal !important;
+    text-transform: uppercase !important;
+}
+
+.ant-upload-list {
+    display: flex !important;
+    flex-wrap: wrap !important;
+    gap: 20 !important;
+}