Merge pull request #115 from bento-platform/refact/upgrade-and-clean-up

refact: upgrade dependencies, memoize, and clean up
bento-platform · Sep 29, 2023 · 6c40494 · 6c40494
2 parents 709bf6e + b56384d
commit 6c40494
Show file tree

Hide file tree

Showing 9 changed files with 847 additions and 620 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -20,10 +20,10 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Run Bento build action
-        uses: bento-platform/[email protected].0
+        uses: bento-platform/[email protected].1
         with:
           registry: ghcr.io
           registry-username: ${{ github.actor }}

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,51 +15,51 @@
   "author": "",
   "license": "LGPL-3.0-only",
   "dependencies": {
-    "@ant-design/icons": "^5.1.4",
-    "@reduxjs/toolkit": "^1.9.3",
-    "antd": "^5.6.2",
-    "axios": "^1.4.0",
+    "@ant-design/icons": "^5.2.6",
+    "@reduxjs/toolkit": "^1.9.6",
+    "antd": "^5.9.4",
+    "axios": "^1.5.1",
     "bento-charts": "^2.4.1",
     "css-loader": "^6.8.1",
     "dotenv": "^16.3.1",
-    "i18next": "^23.2.2",
-    "i18next-browser-languagedetector": "^7.0.2",
-    "i18next-http-backend": "^2.2.1",
+    "i18next": "^23.5.1",
+    "i18next-browser-languagedetector": "^7.1.0",
+    "i18next-http-backend": "^2.2.2",
     "leaflet": "^1.9.4",
-    "less": "^4.1.1",
+    "less": "^4.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-i18next": "^13.0.0",
-    "react-icons": "^4.9.0",
+    "react-i18next": "^13.2.2",
+    "react-icons": "^4.11.0",
     "react-leaflet": "^4.2.1",
-    "react-redux": "^8.1.1",
-    "react-router-dom": "^6.13.0",
-    "recharts": "^2.7.1",
+    "react-redux": "^8.1.2",
+    "react-router-dom": "^6.16.0",
+    "recharts": "^2.8.0",
     "redux": "^4.2.1",
     "redux-thunk": "^2.4.1"
   },
   "devDependencies": {
     "@types/react-dom": "^18.2.6",
-    "@typescript-eslint/eslint-plugin": "^5.60.0",
-    "@typescript-eslint/parser": "^5.60.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.3",
+    "@typescript-eslint/parser": "^6.7.3",
     "@webpack-cli/serve": "^2.0.4",
     "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
     "dotenv-webpack": "^8.0.1",
-    "eslint": "^8.43.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint": "^8.50.0",
+    "eslint-config-prettier": "^9.0.0",
+    "eslint-plugin-react": "^7.33.2",
     "file-loader": "^6.2.0",
     "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.3",
     "less-loader": "~11.1.3",
-    "nodemon": "^2.0.20",
+    "nodemon": "^3.0.1",
     "prettier": "^2.8.8",
     "source-map-loader": "^4.0.1",
     "style-loader": "^3.3.3",
-    "ts-loader": "^9.4.3",
-    "typescript": "~5.1.3",
-    "webpack": "^5.87.0",
+    "ts-loader": "^9.4.4",
+    "typescript": "~5.2.2",
+    "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-middleware": "^6.1.1",
     "webpack-dev-server": "^4.15.1"

diff --git a/src/js/components/Overview/MakeChartCard.tsx → src/js/components/Overview/ChartCard.tsx b/src/js/components/Overview/MakeChartCard.tsx → src/js/components/Overview/ChartCard.tsx
@@ -7,9 +7,9 @@ import CustomEmpty from '../Util/CustomEmpty';
 import { DEFAULT_TRANSLATION, NON_DEFAULT_TRANSLATION } from '@/constants/configConstants';
 import { ChartDataField } from '@/types/data';
 
-const CARD_STYLE = { width: '430px', height: '415px', margin: '5px 0', borderRadius: '11px' };
+const CARD_STYLE = { width: '100%', height: '415px', margin: '5px 0', borderRadius: '11px' };
 
-const MakeChartCard = memo(({ section, chart, onRemoveChart }: MakeChartCardProps) => {
+const ChartCard = memo(({ section, chart, onRemoveChart }: ChartCardProps) => {
   const { t } = useTranslation(NON_DEFAULT_TRANSLATION);
   const { t: td } = useTranslation(DEFAULT_TRANSLATION);
 
@@ -69,12 +69,12 @@ const MakeChartCard = memo(({ section, chart, onRemoveChart }: MakeChartCardProp
   );
 });
 
-MakeChartCard.displayName = 'MakeChartCard';
+ChartCard.displayName = 'ChartCard';
 
-export interface MakeChartCardProps {
+export interface ChartCardProps {
   section: string;
   chart: ChartDataField;
   onRemoveChart: (arg: { section: string; id: string }) => void;
 }
 
-export default MakeChartCard;
+export default ChartCard;
diff --git a/src/js/components/Overview/OverviewDisplayData.tsx b/src/js/components/Overview/OverviewDisplayData.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { List } from 'antd';
 
-import MakeChartCard from './MakeChartCard';
+import ChartCard from './ChartCard';
 import { disableChart } from '@/features/data/data.store';
 import { ChartDataField } from '@/types/data';
 
@@ -14,7 +14,7 @@ const getColumnCount = (width: number): number => {
   } else return 3;
 };
 
-const getframeWidth = (width: number): number => {
+const getFrameWidth = (width: number): number => {
   if (width < 990) {
     return 360;
   } else if (width < 1420) {
@@ -27,22 +27,28 @@ const OverviewDisplayData = ({ section, allCharts }: OverviewDisplayDataProps) =
 
   const { width } = useWindowSize();
 
-  const orderedCharts = allCharts;
+  const [listStyle, listGrid] = useMemo(
+    () => [{ width: `${getFrameWidth(width)}px` }, { gutter: 0, column: getColumnCount(width) }],
+    [width]
+  );
+
+  const displayedCharts = useMemo(() => allCharts.filter((e) => e.isDisplayed), [allCharts]);
 
-  const onRemoveChart = ({ section, id }: { section: string; id: string }) => {
-    dispatch(disableChart({ section, id }));
-  };
+  const onRemoveChart = useCallback(
+    ({ section, id }: { section: string; id: string }) => {
+      dispatch(disableChart({ section, id }));
+    },
+    [dispatch]
+  );
 
-  return (
-    <List
-      style={{ width: `${getframeWidth(width)}px` }}
-      grid={{ gutter: 0, column: getColumnCount(width) }}
-      dataSource={orderedCharts.filter((e) => e.isDisplayed)}
-      renderItem={(chart) => (
-        <MakeChartCard key={chart.id} chart={chart} section={section} onRemoveChart={onRemoveChart} />
-      )}
-    />
+  const renderItem = useCallback(
+    (chart: ChartDataField) => (
+      <ChartCard key={chart.id} chart={chart} section={section} onRemoveChart={onRemoveChart} />
+    ),
+    [section, onRemoveChart]
   );
+
+  return <List style={listStyle} grid={listGrid} dataSource={displayedCharts} renderItem={renderItem} />;
 };
 
 const useWindowSize = () => {

diff --git a/src/js/components/Overview/PublicOverview.tsx b/src/js/components/Overview/PublicOverview.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { Row, Col, FloatButton, Card, Skeleton } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 
@@ -12,6 +12,9 @@ import { useAppSelector } from '@/hooks';
 import { useTranslation } from 'react-i18next';
 import LastIngestionInfo from './LastIngestion';
 
+const ABOUT_CARD_STYLE = { borderRadius: '11px' };
+const MANAGE_CHARTS_BUTTON_STYLE = { right: '5em', bottom: '1.5em', transform: 'scale(125%)' };
+
 const PublicOverview = () => {
   const { sections } = useAppSelector((state) => state.data);
 
@@ -36,12 +39,15 @@ const PublicOverview = () => {
 
   const displayedSections = sections.filter(({ charts }) => charts.findIndex(({ isDisplayed }) => isDisplayed) !== -1);
 
+  const onManageChartsOpen = useCallback(() => setDrawerVisible(true), []);
+  const onManageChartsClose = useCallback(() => setDrawerVisible(false), []);
+
   return (
     <>
       <div className="container">
         <Row>
           <Col flex={1}>
-            <Card style={{ borderRadius: '11px' }}>
+            <Card style={ABOUT_CARD_STYLE}>
               {isFetchingAbout ? (
                 <Skeleton title={false} paragraph={{ rows: 2 }} />
               ) : (
@@ -68,13 +74,13 @@ const PublicOverview = () => {
       </div>
 
       {/* Drawer & Button */}
-      <ManageChartsDrawer onManageDrawerClose={() => setDrawerVisible(false)} manageDrawerVisible={drawerVisible} />
+      <ManageChartsDrawer onManageDrawerClose={onManageChartsClose} manageDrawerVisible={drawerVisible} />
       <FloatButton
         type="primary"
         icon={<PlusOutlined />}
         tooltip="Manage Charts"
-        style={{ right: '5em', bottom: '1.5em', transform: 'scale(125%)' }}
-        onClick={() => setDrawerVisible(true)}
+        style={MANAGE_CHARTS_BUTTON_STYLE}
+        onClick={onManageChartsOpen}
       />
     </>
   );

diff --git a/src/js/components/Provenance/Tables/BaseProvenanceTable.tsx b/src/js/components/Provenance/Tables/BaseProvenanceTable.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Table, TableProps } from 'antd';
-import { AnyObject } from 'antd/es/table/Table';
+import { AnyObject } from 'antd/es/_util/type';
 
 const BaseProvenanceTable = <T extends AnyObject>(props: TableProps<T>) => (
   <Table bordered={true} pagination={false} size="small" {...props} />

diff --git a/src/js/components/Search/Search.tsx b/src/js/components/Search/Search.tsx
@@ -71,16 +71,19 @@ const RoutedSearch: React.FC = () => {
         dispatch(makeGetKatsuPublic());
       }
     } else {
-      console.debug('Redirecting to : ', buildQueryParamsUrl(location.pathname, validQueryParamsObject));
-      navigate(buildQueryParamsUrl(location.pathname, validQueryParamsObject));
+      const url = buildQueryParamsUrl(location.pathname, validQueryParamsObject);
+      console.debug('Redirecting to:', url);
+      navigate(url);
     }
   }, [location.search]);
 
   // Synchronize URL from Redux query params state
   useEffect(() => {
     if (!location.pathname.endsWith('/search')) return;
     if (!attemptedFetch) return;
-    navigate(buildQueryParamsUrl(location.pathname, queryParams), { replace: true });
+    const url = buildQueryParamsUrl(location.pathname, queryParams);
+    console.debug('Redirecting to:', url);
+    navigate(url, { replace: true });
   }, [queryParams]);
 
   return <Search />;

diff --git a/src/js/constants/overviewConstants.ts b/src/js/constants/overviewConstants.ts
@@ -1,74 +1,5 @@
-export const chartTypes = {
-  BAR: 'bar',
-  PIE: 'pie',
-};
-
-// Bento-web colours
-export const COLORS = [
-  '#3366CC',
-  '#DC3912',
-  '#FF9900',
-  '#109618',
-  '#990099',
-  '#3B3EAC',
-  '#0099C6',
-  '#DD4477',
-  '#66AA00',
-  '#B82E2E',
-  '#316395',
-  '#994499',
-  '#22AA99',
-  '#AAAA11',
-  '#6633CC',
-  '#E67300',
-  '#8B0707',
-  '#329262',
-  '#5574A6',
-  '#3B3EAC',
-];
-
-// colorbrewer2.org
-// export const COLORS = [
-//   "#313695",
-//   "#a50026",
-//   "#d73027",
-//   "#f46d43",
-//   "#fdae61",
-//   "#abd9e9",
-//   "#74add1",
-//   "#4575b4",
-// ]
-
-export const BAR_CHART_FILL = '#4575b4';
-export const CHART_MISSING_FILL = '#bbbbbb';
-
 export const COUNTS_FILL = '#75787a';
 
 export const LOCALSTORAGE_CHARTS_KEY = 'charts';
 
 export const CHART_HEIGHT = 300;
-
-export const TOOL_TIP_STYLE = {
-  backgroundColor: 'rgba(255, 255, 255, 0.9)',
-  padding: '5px',
-  border: '1px solid grey',
-  boxShadow: '0px 0px 2px rgba(0, 0, 0, 0.9)',
-  borderRadius: '2px',
-  textAlign: 'left',
-};
-
-export const LABEL_STYLE = {
-  fontWeight: 'bold',
-  fontSize: '12px',
-  padding: '0',
-  margin: '0',
-};
-
-export const COUNT_STYLE = {
-  fontWeight: 'normal',
-  fontSize: '11px',
-  padding: '0',
-  margin: '0',
-};
-
-export const OTHER_THRESHOLD = 0.01; //