diff --git a/frontend/packages/core/components/ChartToolbox.tsx b/frontend/packages/core/components/ChartToolbox.tsx index ff784b53bd14fd613de3d8bce7d15e5f31a94004..d77d014ccdfd440c993c2fc3b146be05e60ce354 100644 --- a/frontend/packages/core/components/ChartToolbox.tsx +++ b/frontend/packages/core/components/ChartToolbox.tsx @@ -9,14 +9,11 @@ import { textColor, textLightColor, textLighterColor, - tooltipBackgroundColor, - tooltipTextColor, transitionProps } from '~/utils/style'; import Icon from '~/components/Icon'; -import ReactTooltip from 'react-tooltip'; -import {nanoid} from 'nanoid'; +import Tippy from '@tippyjs/react'; import styled from 'styled-components'; const Toolbox = styled.div<{reversed?: boolean}>` @@ -65,17 +62,15 @@ type ToggleChartToolboxItem = { export type ChartTooboxItem = NormalChartToolboxItem | ToggleChartToolboxItem; type ChartToolboxProps = { - cid?: string; items: ChartTooboxItem[]; reversed?: boolean; - tooltipPlace?: 'top' | 'bottom' | 'left' | 'right'; + tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right'; }; const ChartToolbox: FunctionComponent = ({ - cid, + tooltipPlacement, items, reversed, - tooltipPlace, className }) => { const [activeStatus, setActiveStatus] = useState(new Array(items.length).fill(false)); @@ -96,37 +91,39 @@ const ChartToolbox: FunctionComponent = ({ [items, activeStatus] ); - const [id] = useState(`chart-toolbox-tooltip-${cid || nanoid()}`); + const getToolboxItem = useCallback( + (item: ChartTooboxItem, index: number) => ( + onClick(index)} + > + + + ), + [activeStatus, onClick, reversed] + ); return ( <> - {items.map((item, index) => ( - onClick(index)} - data-for={item.tooltip ? id : null} - data-tip={ - item.tooltip - ? item.toggle - ? (activeStatus[index] && item.activeTooltip) || item.tooltip - : item.tooltip - : null - } - > - - - ))} + {items.map((item, index) => + item.tooltip ? ( + + {getToolboxItem(item, index)} + + ) : ( + getToolboxItem(item, index) + ) + )} - ); }; diff --git a/frontend/packages/core/components/Error.tsx b/frontend/packages/core/components/Error.tsx index 007a9e1cfccee98d8d2a6beda274c4bd93d3b9b5..11662d0f3a1f72500c245a3d498278e87dfb97a7 100644 --- a/frontend/packages/core/components/Error.tsx +++ b/frontend/packages/core/components/Error.tsx @@ -42,6 +42,8 @@ const Wrapper = styled.div` } `; +const reload = () => window.location.reload(); + const Error: FunctionComponent = ({className, children}) => { const {t} = useTranslation('errors'); @@ -79,7 +81,7 @@ const Error: FunctionComponent = ({className, children}) => {
  • Log files are generated and data is writte. Please try to  - Refresh. + Refresh.
  • diff --git a/frontend/packages/core/components/GraphsPage/Graph.tsx b/frontend/packages/core/components/GraphsPage/Graph.tsx index 99fbaa3d18feefb142a36635eab8faf4f08606d4..23993d6dcfeeaf013a6a3b5e553263eba3f541c2 100644 --- a/frontend/packages/core/components/GraphsPage/Graph.tsx +++ b/frontend/packages/core/components/GraphsPage/Graph.tsx @@ -5,6 +5,7 @@ import {backgroundColor, borderColor, contentHeight, position, primaryColor, rem import ChartToolbox from '~/components/ChartToolbox'; import HashLoader from 'react-spinners/HashLoader'; import styled from 'styled-components'; +import {toast} from 'react-toastify'; import {useTranslation} from '~/utils/i18n'; const toolboxHeight = rem(40); @@ -80,7 +81,7 @@ export type GraphRef = { }; type GraphProps = { - files: FileList | null; + files: FileList | File[] | null; uploader: JSX.Element; showAttributes: boolean; showInitializers: boolean; @@ -135,6 +136,12 @@ const Graph = React.forwardRef( return; case 'search': return onSearch?.(data); + case 'cancel': + return setLoading(false); + case 'error': + toast(data); + setLoading(false); + return; case 'show-model-properties': return onShowModelProperties?.(data); case 'show-node-properties': @@ -146,13 +153,6 @@ const Graph = React.forwardRef( }, [onRendered, onSearch, onShowModelProperties, onShowNodeProperties, onShowNodeDocumentation] ); - useEffect(() => { - if (process.browser) { - window.addEventListener('message', handler); - return () => window.removeEventListener('message', handler); - } - }, [handler]); - const dispatch = useCallback((type: string, data?: unknown) => { if (process.browser) { iframe.current?.contentWindow?.postMessage( @@ -164,11 +164,28 @@ const Graph = React.forwardRef( ); } }, []); + useEffect(() => { + if (process.browser) { + window.addEventListener('message', handler); + dispatch('ready'); + return () => { + window.removeEventListener('message', handler); + }; + } + }, [handler, dispatch]); - useEffect(() => dispatch('change-files', files), [dispatch, files]); - useEffect(() => dispatch('toggle-attributes', showAttributes), [dispatch, showAttributes]); - useEffect(() => dispatch('toggle-initializers', showInitializers), [dispatch, showInitializers]); - useEffect(() => dispatch('toggle-names', showNames), [dispatch, showNames]); + useEffect(() => (ready && dispatch('change-files', files)) || undefined, [dispatch, files, ready]); + useEffect(() => (ready && dispatch('toggle-attributes', showAttributes)) || undefined, [ + dispatch, + showAttributes, + ready + ]); + useEffect(() => (ready && dispatch('toggle-initializers', showInitializers)) || undefined, [ + dispatch, + showInitializers, + ready + ]); + useEffect(() => (ready && dispatch('toggle-names', showNames)) || undefined, [dispatch, showNames, ready]); useImperativeHandle(ref, () => ({ export(type) { @@ -225,7 +242,7 @@ const Graph = React.forwardRef( } ]} reversed - tooltipPlace="bottom" + tooltipPlacement="bottom" />