+
{ed} }
>
{data.filter((e) => !(e.x === 'missing')).length !== 0 ? (
-
(
- () => ({ width: frameWidth, display: 'flex', flexWrap: 'wrap', gap: CHART_GUTTER }),
- [frameWidth]
- );
+ const containerStyle = {
+ display: 'grid',
+ gap: `${GRID_GAP}px`,
+ gridTemplateColumns: `repeat(auto-fit, ${CHART_WIDTH}px)`,
+ };
const displayedCharts = useMemo(() => allCharts.filter((e) => e.isDisplayed), [allCharts]);
@@ -51,41 +24,13 @@ const OverviewDisplayData = ({ section, allCharts }: OverviewDisplayDataProps) =
[dispatch]
);
- const renderItem = useCallback(
- (chart: ChartDataField) => {
- const columnWidth = Math.min(chart.width, columnCount);
- const pixelWidth = (columnWidth / columnCount) * (frameWidth - CHART_GUTTER * (columnCount - columnWidth));
- return (
-
+
{t(title)}
diff --git a/src/js/components/Overview/PublicOverview.tsx b/src/js/components/Overview/PublicOverview.tsx
index 43504b13..55028765 100644
--- a/src/js/components/Overview/PublicOverview.tsx
+++ b/src/js/components/Overview/PublicOverview.tsx
@@ -10,26 +10,27 @@ import { BOX_SHADOW, LOCALSTORAGE_CHARTS_KEY } from '@/constants/overviewConstan
import OverviewSection from './OverviewSection';
import ManageChartsDrawer from './Drawer/ManageChartsDrawer';
import Counts from './Counts';
+import LastIngestionInfo from './LastIngestion';
+import Loader from '@/components/Loader';
+
import { useAppSelector } from '@/hooks';
import { useTranslation } from 'react-i18next';
-import LastIngestionInfo from './LastIngestion';
-const ABOUT_CARD_STYLE = { borderRadius: '11pX', ...BOX_SHADOW };
+const ABOUT_CARD_STYLE = { width: '100%', maxWidth: '1390px', borderRadius: '11pX', ...BOX_SHADOW };
const MANAGE_CHARTS_BUTTON_STYLE = { right: '5em', bottom: '1.5em', transform: 'scale(125%)' };
const PublicOverview = () => {
- const { sections } = useAppSelector((state) => state.data);
+ const { i18n } = useTranslation();
const [drawerVisible, setDrawerVisible] = useState(false);
-
- const { isFetchingAbout, about } = useAppSelector((state) => state.content);
-
const [aboutContent, setAboutContent] = useState('');
- const { i18n } = useTranslation();
+ const { isFetchingData: isFetchingOverviewData, sections } = useAppSelector((state) => state.data);
+ const { isFetchingAbout, about } = useAppSelector((state) => state.content);
useEffect(() => {
// Save sections to localStorage when they change
+ if (isFetchingOverviewData) return;
saveToLocalStorage(sections);
}, [sections]);
@@ -48,38 +49,33 @@ const PublicOverview = () => {
saveToLocalStorage(sections);
}, [sections]);
- return (
+ return isFetchingOverviewData ? (
+
+ {isFetchingAbout ? (
+
+
+
+
+
+
{
const qp1Keys = Object.keys(qp1);
@@ -95,9 +96,13 @@ const SEARCH_SECTION_STYLE = { maxWidth: 1200 };
const Search: React.FC = () => {
const t = useTranslationCustom();
- const searchSections = useAppSelector((state) => state.query.querySections);
+ const { isFetchingFields: isFetchingSearchFields, querySections: searchSections } = useAppSelector(
+ (state) => state.query
+ );
- return (
+ return isFetchingSearchFields ? (
+
diff --git a/src/js/components/SiteHeader.tsx b/src/js/components/SiteHeader.tsx
index 6755e7af..1534869a 100644
--- a/src/js/components/SiteHeader.tsx
+++ b/src/js/components/SiteHeader.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Button, Layout, Row, Col, Typography, Space } from 'antd';
+import { Button, Flex, Layout, Typography, Space } from 'antd';
const { Header } = Layout;
import { useTranslation } from 'react-i18next';
import { DEFAULT_TRANSLATION, LNG_CHANGE, LNGS_FULL_NAMES } from '@/constants/configConstants';
@@ -7,6 +7,8 @@ import { useAppSelector } from '@/hooks';
import { useNavigate, useLocation } from 'react-router-dom';
import { useIsAuthenticated, usePerformAuth, usePerformSignOut } from 'bento-auth-js';
import { CLIENT_NAME, PORTAL_URL, TRANSLATED } from '@/config';
+import { RiTranslate } from 'react-icons/ri';
+import { ExportOutlined, LinkOutlined, LoginOutlined, LogoutOutlined } from '@ant-design/icons';
const openPortalWindow = () => window.open(PORTAL_URL, '_blank');
@@ -16,11 +18,9 @@ const SiteHeader = () => {
const location = useLocation();
const { isFetching: openIdConfigFetching } = useAppSelector((state) => state.openIdConfiguration);
-
const { isHandingOffCodeForToken } = useAppSelector((state) => state.auth);
const isAuthenticated = useIsAuthenticated();
-
const performSignOut = usePerformSignOut();
const performSignIn = usePerformAuth();
@@ -32,44 +32,52 @@ const SiteHeader = () => {
navigate(path, { replace: true });
};
- // noinspection HtmlUnknownTarget
return (
-
-
-
-
- 
-
-
- {CLIENT_NAME}
-
-
-
-
- {TRANSLATED && (
-
- )}
-
+ )}
+ } onClick={openPortalWindow}>
+ {t('Portal')}
+
-
-
+ )}
+
+
);
};
diff --git a/src/js/components/SitePageLoading.tsx b/src/js/components/SitePageLoading.tsx
deleted file mode 100644
index 23953c03..00000000
--- a/src/js/components/SitePageLoading.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import React from 'react';
-
-import { Skeleton } from 'antd';
-
-const SitePageLoading = () => {
- return (
- <>
- ;
+type MenuItem = Required['items'][number];
+type OnClick = MenuProps['onClick'];
+
+const BeaconLogo: React.FC> = (props) =>
+
+
+ );
+};
+
+export default SiteSider;
diff --git a/src/js/components/TabbedDashboard.tsx b/src/js/components/TabbedDashboard.tsx
deleted file mode 100644
index c7811625..00000000
--- a/src/js/components/TabbedDashboard.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import React, { useEffect, useCallback } from 'react';
-import { useNavigate, useLocation, useParams } from 'react-router-dom';
-import { Tabs, Typography } from 'antd';
-import { useAutoAuthenticate, useIsAuthenticated } from 'bento-auth-js';
-
-const { Title } = Typography;
-
-import { makeGetConfigRequest, makeGetServiceInfoRequest } from '@/features/config/config.store';
-import { makeGetAboutRequest } from '@/features/content/content.store';
-import { makeGetDataRequestThunk } from '@/features/data/data.store';
-import { makeGetSearchFields } from '@/features/search/query.store';
-import { makeGetProvenanceRequest } from '@/features/provenance/provenance.store';
-import { getBeaconConfig } from '@/features/beacon/beaconConfig.store';
-import { fetchGohanData, fetchKatsuData } from '@/features/ingestion/lastIngestion.store';
-
-import Loader from './Loader';
-import PublicOverview from './Overview/PublicOverview';
-import Search from './Search/Search';
-import ProvenanceTab from './Provenance/ProvenanceTab';
-import BeaconQueryUi from './Beacon/BeaconQueryUi';
-import { useAppDispatch, useAppSelector, useTranslationDefault } from '@/hooks';
-import { buildQueryParamsUrl } from '@/utils/search';
-import { makeGetDataTypes } from '@/features/dataTypes/dataTypes.store';
-import { BEACON_UI_ENABLED } from '@/config';
-import SitePageLoading from './SitePageLoading';
-
-const TabbedDashboard = () => {
- const dispatch = useAppDispatch();
- const td = useTranslationDefault();
- const navigate = useNavigate();
- const location = useLocation();
- const { page } = useParams<{ page?: string }>();
-
- const { isAutoAuthenticating } = useAutoAuthenticate();
- const isAuthenticated = useIsAuthenticated();
-
- useEffect(() => {
- dispatch(makeGetConfigRequest()).then(() => dispatch(getBeaconConfig()));
- dispatch(makeGetAboutRequest());
- dispatch(makeGetDataRequestThunk());
- dispatch(makeGetSearchFields());
- dispatch(makeGetProvenanceRequest());
- dispatch(fetchKatsuData());
- dispatch(fetchGohanData());
- dispatch(makeGetServiceInfoRequest());
- //TODO: Dispatch makeGetDataTypes to get the data types from service-registry
- if (isAuthenticated) {
- dispatch(makeGetDataTypes());
- }
- }, [isAuthenticated]);
-
- const isFetchingOverviewData = useAppSelector((state) => state.data.isFetchingData);
- const isFetchingSearchFields = useAppSelector((state) => state.query.isFetchingFields);
- const queryParams = useAppSelector((state) => state.query.queryParams);
- const isFetchingBeaconConfig = useAppSelector((state) => state.beaconConfig?.isFetchingBeaconConfig);
-
- const onChange = useCallback(
- (key: string) => {
- const currentPath = location.pathname;
- const currentPathParts = currentPath.split('/');
- const currentLang = currentPathParts[1];
- const newPath = `/${currentLang}/${key === 'overview' ? '' : key}`;
- // If we're going to the search page, insert query params into the URL pulled from the Redux state.
- // This is important to keep the URL updated if we've searched something, navigated away, and now
- // are returning to the search page.
- navigate(key === 'search' ? buildQueryParamsUrl(newPath, queryParams) : newPath);
- },
- [location, navigate, queryParams]
- );
-
- const TabTitle = ({ title }: { title: string }) => (
-
- {title}
-
- );
-
- const tabPanes = [
- {
- title: 'Overview',
- content: , initialWidth: number) => {
+ const [width, setWidth] = useState(initialWidth);
+
+ const adjustWidth = useCallback(() => {
+ if (ref.current) {
+ if (initialWidth < width) {
+ setWidth(initialWidth);
+ } else if (isElementOutOfView(ref.current)) {
+ setWidth((prevWidth) => Math.max(prevWidth - 1, 1));
+ } else if (width < initialWidth && isSpaceAvailable(ref.current)) {
+ setWidth((prevWidth) => Math.min(prevWidth + 1, initialWidth));
+ }
+ }
+ }, [ref, width, initialWidth]);
+
+ useEffect(() => {
+ adjustWidth();
+ }, [adjustWidth, initialWidth]);
+
+ useEffect(() => {
+ const handleResize = debounceAdjustWidth(adjustWidth, 200);
+ window.addEventListener('resize', handleResize);
+ return () => window.removeEventListener('resize', handleResize);
+ }, [adjustWidth]);
+
+ return width;
+};
+
+function debounceAdjustWidth(callback: () => void, delay: number) {
+ let timeoutId: NodeJS.Timeout;
+ return () => {
+ clearTimeout(timeoutId);
+ timeoutId = setTimeout(() => {
+ callback();
+ }, delay);
+ };
+}
diff --git a/src/js/index.tsx b/src/js/index.tsx
index 47156baa..62d7d0d7 100644
--- a/src/js/index.tsx
+++ b/src/js/index.tsx
@@ -12,12 +12,13 @@ import { NEW_BENTO_PUBLIC_THEME } from '@/constants/overviewConstants';
import { DEFAULT_TRANSLATION, SUPPORTED_LNGS } from '@/constants/configConstants';
// Component imports
-import { Button, Layout, Modal, message } from 'antd';
+import { Button, ConfigProvider, Layout, Modal, message } from 'antd';
import { ChartConfigProvider } from 'bento-charts';
-import TabbedDashboard from '@/components/TabbedDashboard';
import SiteHeader from '@/components/SiteHeader';
import SiteFooter from '@/components/SiteFooter';
-import SitePageLoading from '@/components/SitePageLoading';
+import SiteSider from '@/components/SiteSider';
+import Loader from '@/components/Loader';
+import BentoAppRouter from '@/components/BentoAppRouter';
// Hooks and utilities imports
import {
@@ -52,6 +53,7 @@ const createSessionWorker = () => new Worker(new URL('./workers/tokenRefresh.ts'
const App = () => {
const navigate = useNavigate();
+ const [collapsed, setCollapsed] = useState(false);
// TRANSLATION
const { lang } = useParams<{ lang?: string }>();
@@ -98,7 +100,7 @@ const App = () => {
useBeaconWithAuthIfAllowed();
return (
- <>
+
{
@@ -116,17 +118,28 @@ const App = () => {
-
-
-
-
-
+
+
+
+
+
+
+
+
-
+
);
};
diff --git a/src/js/types/routes.ts b/src/js/types/routes.ts
new file mode 100644
index 00000000..a6887773
--- /dev/null
+++ b/src/js/types/routes.ts
@@ -0,0 +1,6 @@
+export enum BentoRoute {
+ Overview = 'overview',
+ Search = 'search',
+ Beacon = 'beacon',
+ Provenance = 'provenance',
+}
diff --git a/src/js/utils/router.ts b/src/js/utils/router.ts
new file mode 100644
index 00000000..534c8a6d
--- /dev/null
+++ b/src/js/utils/router.ts
@@ -0,0 +1,11 @@
+import { BentoRoute } from '@/types/routes';
+
+export const getCurrentPage = (): BentoRoute => {
+ const pathArray = window.location.pathname.split('/');
+ const validPages = Object.values(BentoRoute);
+ if (pathArray.length > 2 && validPages.includes(pathArray[2] as BentoRoute)) {
+ return pathArray[2] as BentoRoute;
+ } else {
+ return BentoRoute.Overview;
+ }
+};
diff --git a/src/public/assets/branding.png b/src/public/assets/branding.png
index dced5abb..4d99f910 100644
Binary files a/src/public/assets/branding.png and b/src/public/assets/branding.png differ
diff --git a/src/public/assets/branding_color.png b/src/public/assets/branding_color.png
new file mode 100644
index 00000000..dced5abb
Binary files /dev/null and b/src/public/assets/branding_color.png differ
diff --git a/src/public/config.js b/src/public/config.js
index 4bc364b7..8e98a7ef 100644
--- a/src/public/config.js
+++ b/src/public/config.js
@@ -1,14 +1,14 @@
// Global to include as a config
BENTO_PUBLIC_CONFIG = {
- // GENERAL
- CLIENT_NAME: null,
- PORTAL_URL: null,
- TRANSLATED: null,
- BEACON_URL: null,
- BEACON_UI_ENABLED: null,
- // Authentication
- PUBLIC_URL: null,
- CLIENT_ID: null,
- OPENID_CONFIG_URL: null,
-}
+ // GENERAL
+ CLIENT_NAME: null,
+ PORTAL_URL: null,
+ TRANSLATED: null,
+ BEACON_URL: null,
+ BEACON_UI_ENABLED: null,
+ // Authentication
+ PUBLIC_URL: null,
+ CLIENT_ID: null,
+ OPENID_CONFIG_URL: null,
+};
diff --git a/src/styles.css b/src/styles.css
index 17f80ced..994e396b 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,7 +1,7 @@
html,
body {
min-height: 100%;
- background-color: #eff2f5;
+ background-color: #f5f5f5;
margin: 0;
}
@@ -11,9 +11,14 @@ body {
margin: auto;
}
-.floating-search {
- position: fixed !important;
- right: 5em !important;
- bottom: 3em !important;
- transform: scale(125%) !important;
+.header-button {
+ color: lightgray;
+}
+
+.header-button:hover {
+ color: white !important;
+}
+
+.ant-layout-sider-trigger {
+ border-right: 1px solid #f0f0f0;
}
diff --git a/webpack.config.js b/webpack.config.js
index ce88930c..1420bfbe 100755
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -59,7 +59,7 @@ const config = {
BENTO_PUBLIC_URL: null,
CLIENT_ID: null,
OPENID_CONFIG_URL: null,
- })
+ }),
],
optimization: {
runtimeChunk: 'single',
{displayedCharts.map(renderItem)}
;
};
-const useWindowSize = () => {
- const [windowSize, setWindowSize] = useState({
- width: window.innerWidth,
- height: window.innerHeight,
- });
-
- useEffect(() => {
- const handleResize = () => {
- setWindowSize({
- width: window.innerWidth,
- height: window.innerHeight,
- });
- };
- window.addEventListener('resize', handleResize);
- handleResize();
- return () => window.removeEventListener('resize', handleResize);
- }, []);
-
- return windowSize;
-};
-
export interface OverviewDisplayDataProps {
section: string;
allCharts: ChartDataField[];
diff --git a/src/js/components/Overview/OverviewSection.tsx b/src/js/components/Overview/OverviewSection.tsx
index aa364952..d6a5ccb9 100644
--- a/src/js/components/Overview/OverviewSection.tsx
+++ b/src/js/components/Overview/OverviewSection.tsx
@@ -9,7 +9,7 @@ const OverviewSection = ({ title, chartData }: { title: string; chartData: Chart
const t = useTranslationCustom();
return (
-
-
-
- {isFetchingAbout ? (
-
-
-
-
-
-
-
-
-
- {/* Drawer & Button */}
+
-
- ))}
-
+
+ ))}
+
-
-
-
-
- );
-};
-
-export default SitePageLoading;
diff --git a/src/js/components/SiteSider.tsx b/src/js/components/SiteSider.tsx
new file mode 100644
index 00000000..76f91679
--- /dev/null
+++ b/src/js/components/SiteSider.tsx
@@ -0,0 +1,89 @@
+import React, { useMemo, useCallback } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+
+import { Layout, Menu } from 'antd';
+import type { MenuProps, SiderProps } from 'antd';
+import Icon, { PieChartOutlined, SearchOutlined, SolutionOutlined } from '@ant-design/icons';
+
+import BeaconSvg from '@/components/Beacon/BeaconSvg';
+import { useAppSelector, useTranslationDefault } from '@/hooks';
+import { buildQueryParamsUrl } from '@/utils/search';
+import { getCurrentPage } from '@/utils/router';
+import { BentoRoute } from '@/types/routes';
+
+const { Sider } = Layout;
+
+type CustomIconComponentProps = React.ComponentProps