{children}
diff --git a/frontend/packages/core/components/ChartCollapse.tsx b/frontend/packages/core/src/components/ChartCollapse.tsx
similarity index 100%
rename from frontend/packages/core/components/ChartCollapse.tsx
rename to frontend/packages/core/src/components/ChartCollapse.tsx
diff --git a/frontend/packages/core/components/ChartPage.tsx b/frontend/packages/core/src/components/ChartPage.tsx
similarity index 96%
rename from frontend/packages/core/components/ChartPage.tsx
rename to frontend/packages/core/src/components/ChartPage.tsx
index d5e3523990c5dd4fd5e069a99753ca13265148fa..bbf787f0d192f757fd17183c9b1cca3ce52a25e3 100644
--- a/frontend/packages/core/components/ChartPage.tsx
+++ b/frontend/packages/core/src/components/ChartPage.tsx
@@ -1,5 +1,5 @@
import React, {FunctionComponent, PropsWithChildren, useCallback, useEffect, useMemo, useState} from 'react';
-import {Trans, useTranslation} from '~/utils/i18n';
+import {Trans, useTranslation} from 'react-i18next';
import {WithStyled, backgroundColor, headerHeight, link, primaryColor, rem, textLighterColor} from '~/utils/style';
import BarLoader from 'react-spinners/BarLoader';
@@ -11,7 +11,7 @@ import groupBy from 'lodash/groupBy';
import styled from 'styled-components';
import useSearchValue from '~/hooks/useSearchValue';
-const PUBLIC_PATH = process.env.PUBLIC_PATH;
+const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH;
const StyledPagination = styled(Pagination)`
margin-top: ${rem(20)};
@@ -131,7 +131,7 @@ const ChartPage =
({
}
return 0;
}),
- [items]
+ [items] // eslint-disable-line react-hooks/exhaustive-deps
);
const total = useMemo(() => Math.ceil(matchedTags.length / pageSize), [matchedTags]);
@@ -173,7 +173,7 @@ const ChartPage = ({
)}
),
- [withChart, loading, chartSize, t]
+ [withChart, loading, chartSize, t] // eslint-disable-line react-hooks/exhaustive-deps
);
return (
diff --git a/frontend/packages/core/components/ChartToolbox.tsx b/frontend/packages/core/src/components/ChartToolbox.tsx
similarity index 97%
rename from frontend/packages/core/components/ChartToolbox.tsx
rename to frontend/packages/core/src/components/ChartToolbox.tsx
index eb6d5a5f68f4e97b76d7655d14eeff86492b4b82..d650c9e5beb7bc9c5b683bf2a86ba97755a9ef3c 100644
--- a/frontend/packages/core/components/ChartToolbox.tsx
+++ b/frontend/packages/core/src/components/ChartToolbox.tsx
@@ -13,12 +13,14 @@ import {
} from '~/utils/style';
import Icon from '~/components/Icon';
+import type {Icons} from '~/components/Icon';
import Tippy from '@tippyjs/react';
import styled from 'styled-components';
const Toolbox = styled.div<{reversed?: boolean}>`
font-size: ${em(16)};
line-height: 1;
+ height: 1em;
display: flex;
flex-direction: ${props => (props.reversed ? 'row-reverse' : 'row')};
align-items: center;
@@ -43,7 +45,7 @@ const ToolboxItem = styled.a<{active?: boolean; reversed?: boolean}>`
`;
type BaseChartToolboxItem = {
- icon: string;
+ icon: Icons;
tooltip?: string;
};
@@ -54,7 +56,7 @@ type NormalChartToolboxItem = {
type ToggleChartToolboxItem = {
toggle: true;
- activeIcon?: string;
+ activeIcon?: Icons;
activeTooltip?: string;
onClick?: (value: boolean) => unknown;
} & BaseChartToolboxItem;
diff --git a/frontend/packages/core/components/Checkbox.tsx b/frontend/packages/core/src/components/Checkbox.tsx
similarity index 100%
rename from frontend/packages/core/components/Checkbox.tsx
rename to frontend/packages/core/src/components/Checkbox.tsx
diff --git a/frontend/packages/core/components/Content.tsx b/frontend/packages/core/src/components/Content.tsx
similarity index 62%
rename from frontend/packages/core/components/Content.tsx
rename to frontend/packages/core/src/components/Content.tsx
index a0acad009d80898d312fabb9fd354211fbb41978..ee53ad5979ec22dc0c8731a64a20f03be67025e7 100644
--- a/frontend/packages/core/components/Content.tsx
+++ b/frontend/packages/core/src/components/Content.tsx
@@ -1,7 +1,7 @@
import React, {FunctionComponent} from 'react';
-import {backgroundColor, contentHeight, contentMargin, headerHeight, position, primaryColor, size} from '~/utils/style';
+import {backgroundColor, contentHeight, contentMargin, headerHeight, position} from '~/utils/style';
-import HashLoader from 'react-spinners/HashLoader';
+import BodyLoading from '~/components/BodyLoading';
import styled from 'styled-components';
const Section = styled.section`
@@ -23,17 +23,6 @@ const Aside = styled.aside`
overflow-y: auto;
`;
-const Loading = styled.div`
- ${size('100vh', '100vw')}
- ${position('fixed', 0, 0, 0, 0)}
- background-color: rgba(255, 255, 255, 0.8);
- display: flex;
- justify-content: center;
- align-items: center;
- overscroll-behavior: none;
- cursor: progress;
-`;
-
type ContentProps = {
aside?: React.ReactNode;
loading?: boolean;
@@ -43,11 +32,7 @@ const Content: FunctionComponent = ({children, aside, loading}) =>
{children}
{aside && }
- {loading && (
-
-
-
- )}
+ {loading && }
);
diff --git a/frontend/packages/core/components/Error.tsx b/frontend/packages/core/src/components/Error.tsx
similarity index 96%
rename from frontend/packages/core/components/Error.tsx
rename to frontend/packages/core/src/components/Error.tsx
index 402f80ff3114a6094bfd5c4ca77569b84bb63b4a..adca7e90cec13397cc03066b43a716a36c989881 100644
--- a/frontend/packages/core/components/Error.tsx
+++ b/frontend/packages/core/src/components/Error.tsx
@@ -1,10 +1,10 @@
import React, {FunctionComponent} from 'react';
-import {Trans, useTranslation} from '~/utils/i18n';
+import {Trans, useTranslation} from 'react-i18next';
import {WithStyled, backgroundColor, em, link, rem, size, textColor, textLightColor} from '~/utils/style';
import styled from 'styled-components';
-const PUBLIC_PATH = process.env.PUBLIC_PATH;
+const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH;
const Wrapper = styled.div`
display: flex;
diff --git a/frontend/packages/core/components/Field.tsx b/frontend/packages/core/src/components/Field.tsx
similarity index 100%
rename from frontend/packages/core/components/Field.tsx
rename to frontend/packages/core/src/components/Field.tsx
diff --git a/frontend/packages/core/components/GraphPage/Argument.tsx b/frontend/packages/core/src/components/GraphPage/Argument.tsx
similarity index 97%
rename from frontend/packages/core/components/GraphPage/Argument.tsx
rename to frontend/packages/core/src/components/GraphPage/Argument.tsx
index 6ccb67055730aeba9f57596fd4b5d6f57674efb9..86de606c962e9ef39f9654fecccf5d6cd2a12063 100644
--- a/frontend/packages/core/components/GraphPage/Argument.tsx
+++ b/frontend/packages/core/src/components/GraphPage/Argument.tsx
@@ -1,4 +1,4 @@
-import {Argument as ArgumentType, Property as PropertyType} from '~/resource/graph/types';
+import type {Argument as ArgumentType, Property as PropertyType} from '~/resource/graph/types';
import React, {FunctionComponent, useMemo, useState} from 'react';
import {borderColor, em, sameBorder, textLightColor, textLighterColor} from '~/utils/style';
diff --git a/frontend/packages/core/components/GraphPage/Graph.tsx b/frontend/packages/core/src/components/GraphPage/Graph.tsx
similarity index 90%
rename from frontend/packages/core/components/GraphPage/Graph.tsx
rename to frontend/packages/core/src/components/GraphPage/Graph.tsx
index 65c6ec8fda3128d393d022892e8e83ed34601e45..bdcc30fbe2eb41fb17a3b8d4b80b344075c0253a 100644
--- a/frontend/packages/core/components/GraphPage/Graph.tsx
+++ b/frontend/packages/core/src/components/GraphPage/Graph.tsx
@@ -1,14 +1,15 @@
-import {Documentation, Properties, SearchItem, SearchResult} from '~/resource/graph/types';
+import type {Documentation, Properties, SearchItem, SearchResult} from '~/resource/graph/types';
import React, {useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
import {backgroundColor, borderColor, contentHeight, position, primaryColor, rem, size} from '~/utils/style';
import ChartToolbox from '~/components/ChartToolbox';
import HashLoader from 'react-spinners/HashLoader';
+import logo from '~/assets/images/netron.png';
import styled from 'styled-components';
import {toast} from 'react-toastify';
-import {useTranslation} from '~/utils/i18n';
+import {useTranslation} from 'react-i18next';
-const PUBLIC_PATH = process.env.PUBLIC_PATH;
+const PUBLIC_PATH: string = import.meta.env.SNOWPACK_PUBLIC_PATH;
const toolboxHeight = rem(40);
@@ -158,24 +159,20 @@ const Graph = React.forwardRef(
[onRendered, onSearch, onShowModelProperties, onShowNodeProperties, onShowNodeDocumentation]
);
const dispatch = useCallback((type: string, data?: unknown) => {
- if (process.browser) {
- iframe.current?.contentWindow?.postMessage(
- {
- type,
- data
- },
- `${window.location.protocol}//${window.location.host}`
- );
- }
+ iframe.current?.contentWindow?.postMessage(
+ {
+ type,
+ data
+ },
+ `${window.location.protocol}//${window.location.host}`
+ );
}, []);
useEffect(() => {
- if (process.browser) {
- window.addEventListener('message', handler);
- dispatch('ready');
- return () => {
- window.removeEventListener('message', handler);
- };
- }
+ window.addEventListener('message', handler);
+ dispatch('ready');
+ return () => {
+ window.removeEventListener('message', handler);
+ };
}, [handler, dispatch]);
useEffect(() => (ready && dispatch('change-files', files)) || undefined, [dispatch, files, ready]);
@@ -256,7 +253,7 @@ const Graph = React.forwardRef(