feat: dynamic render nav items

frontend/packages/core/components/Navbar.tsx

@@ -15,19 +15,10 @@ import Icon from '~/components/Icon';
 import {InitConfig} from '@visualdl/i18n';
 import Language from '~/components/Language';
 import ee from '~/utils/event';
-import intersection from 'lodash/intersection';
 import styled from 'styled-components';
+import useNavItems from '~/hooks/useNavItems';
 import {useRouter} from 'next/router';
 
-const buildNavItems = process.env.NAV_ITEMS;
-const allNavItems = ['scalars', 'samples', 'graphs', 'high-dimensional'];
-const navItems = buildNavItems
-    ? intersection(
-          buildNavItems.split(',').map(item => item.trim()),
-          allNavItems
-      )
-    : allNavItems;
-
 const Nav = styled.nav`
     background-color: ${navbarBackgroundColor};
     color: ${textInvertColor};
@@ -103,6 +94,8 @@ const Navbar: FunctionComponent = () => {
     const {t, i18n} = useTranslation('common');
     const {pathname, basePath} = useRouter();
 
+    const navItems = useNavItems();
+
     const path = useMemo(() => pathname.replace(basePath, ''), [pathname, basePath]);
 
     const indexUrl = useMemo(() => {

frontend/packages/core/hooks/useNavItems.ts

+import {fetcher} from '~/utils/fetch';
+import intersection from 'lodash/intersection';
+import {useMemo} from 'react';
+import useRequest from '~/hooks/useRequest';
+
+const allNavItems = ['scalars', 'samples', 'high-dimensional'];
+export const navMap = {
+    scalar: 'scalars',
+    image: 'samples',
+    embeddings: 'high-dimensional'
+} as const;
+
+const useNavItems = () => {
+    const {data: components} = useRequest<(keyof typeof navMap)[]>('/components', fetcher, {
+        refreshInterval: 61 * 1000,
+        dedupingInterval: 29 * 1000,
+        errorRetryInterval: 29 * 1000,
+        errorRetryCount: Number.POSITIVE_INFINITY,
+        revalidateOnFocus: true,
+        revalidateOnReconnect: true,
+        refreshWhenHidden: false,
+        refreshWhenOffline: false
+    });
+
+    const navItems = useMemo(() => intersection(components?.map(component => navMap[component]) ?? [], allNavItems), [
+        components
+    ]);
+
+    return navItems;
+};
+
+export default useNavItems;

frontend/packages/core/next.config.js

@@ -31,7 +31,6 @@ module.exports = {
         DEFAULT_LANGUAGE,
         LOCALE_PATH,
         LANGUAGES,
-        NAV_ITEMS: process.env.NAV_ITEMS,
         PUBLIC_PATH: publicPath,
         API_URL: apiUrl
     },

frontend/packages/core/pages/index.tsx

 import {NextI18NextPage, Router} from '~/utils/i18n';
+import React, {useEffect} from 'react';
+import {headerHeight, primaryColor, size} from '~/utils/style';
 
-import {useEffect} from 'react';
+import HashLoader from 'react-spinners/HashLoader';
+import styled from 'styled-components';
+import useNavItems from '~/hooks/useNavItems';
+
+const Loading = styled.div`
+    ${size(`calc(100vh - ${headerHeight})`, '100vw')}
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overscroll-behavior: none;
+    cursor: progress;
+`;
 
 const Index: NextI18NextPage = () => {
+    const navItmes = useNavItems();
+
     useEffect(() => {
-        Router.replace('/scalars');
-    }, []);
+        if (navItmes.length) {
+            Router.replace(`/${navItmes[0]}`);
+        }
+    }, [navItmes]);
 
-    return null;
+    return (
+        <Loading>
+            <HashLoader size="60px" color={primaryColor} />
+        </Loading>
+    );
 };
 
 Index.getInitialProps = () => {
     return {
-        namespacesRequired: ['common']
+        namespacesRequired: []
     };
 };
 

frontend/packages/mock/data/components.ts

+export default ['scalar', 'image', 'embeddings'];